<template>
  <view>
    <!-- 导航 -->
    <view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
      <!-- 自定义导航 -->
      <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">
        <view @click="returnnav" style="padding-top: 14rpx">
          <u-icon name="arrow-left" color="#000" size="26"></u-icon>
        </view>
        <view style="margin: 0 auto">大宗师</view>
      </view>
    </view>
    <!-- 滚动通知 -->
    <view class="notice">
      <u-notice-bar :text="text1"></u-notice-bar>
    </view>
    <!-- 主体部分 -->
    <scroll-view scroll-y="true" class="centre">
      <view class="category">
        <view class="box" v-for="item in 4">
          <view class="up">
            <view class="up-left">
              <u-avatar src="" shape="circle" size="60"></u-avatar>
            </view>
            <view class="up-centre">
              <view style="margin-left: 45rpx">大地皇者</view>
              <view style="display: flex">
                <view style="font-size: 16rpx; color: #afafaf; width: 100rpx">本月：</view>
                <view class="quadrangle">
                  <view class="text">近20中17</view>
                </view>
              </view>
              <view>
                <span style="font-size: 16rpx; color: #afafaf">本月重心：</span>
                <span style="font-size: 16rpx; color: #afafaf">20</span>
                <span style="font-size: 16rpx; color: #afafaf">分</span>
              </view>
            </view>
            <view class="up-right">
              <view style="margin-left: 5rpx">
                <u-icon name="heart" color="#e1e1e1" size="20"></u-icon>
              </view>
            </view>
          </view>
          <view class="centre">
            <view class="centre-text">评价：大宗师</view>
            <view class="centre-text">行走江湖多年，关系网遍布全球</view>
            <view class="centre-text">评价：大宗师</view>
            <view class="centre-price">
              <span>价格：</span>
              <span>888.00奖门令</span>
            </view>
          </view>
          <view class="below">
            <view>高手介绍：</view>
            <view class="text">奖门人鬼画符韩国打算卡夫卡撒法斯科防守上的开始啦的库萨克达</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
const { safeAreaInsets } = uni.getSystemInfoSync();
import { ref } from 'vue';

// 创建响应式数据
const text1 = ref('众多组件覆盖开发过程的各个需求,1组件功能丰富多端兼容让您快速集成开箱即用');
const returnnav = () => {
  uni.navigateBack();
};
</script>

<style lang="scss">
.page-navbar {
  display: flex;
}
.notice {
  height: 30rpx;
}
.centre {
  width: 100%;
  margin-top: 20rpx;

  .category {
    width: 92%;
    padding: 20rpx 3%;

    .box {
      width: 90vw;
      height: 42vh;
      border-top: 1rpx solid #f4f4f4;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .up {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        .up-left {
          margin-top: 30rpx;
          margin-left: 40rpx;
        }
        .up-centre {
          margin-top: 20rpx;
          margin-left: 20rpx;
          .quadrangle {
            font-size: 16rpx;
            line-height: 30rpx;
            width: 80%;
            height: 30rpx;
            background-color: #f00; /* 任意颜色 */
            transform: skewX(-25deg); /* 调整倾斜角度以改变形状 */
            .text {
              transform: skewX(25deg); /* 调整倾斜角度以改变形状 */
              text-align: center;
            }
          }
        }
        .up-right {
          margin-left: 100px;
          margin-bottom: 80rpx;
          margin-top: 20rpx;
          font-size: 24rpx;
          display: flex;
          margin-right: 16rpx;
        }
      }
      .centre {
        .centre-text {
          display: inline-block;
          border: 1rpx solid #e5b47e;
          color: #e8b596;
          border-radius: 15rpx;
          padding: 12rpx;
          margin-left: 20rpx;
          margin-top: 12rpx;
          margin-bottom: 12rpx;
          font-size: 24rpx;
        }
        .centre-price {
          margin: 20rpx;
          color: #e5b47e;
          font-weight: 600;
        }
      }
      .below {
        font-size: 24rpx;
        margin-left: 20rpx;
        width: 500rpx;
        .text {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
