<template>
  <view>
    <view
      :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }"
      class="index-page"
    >
      <!-- 自定义导航 -->
      <view
        :style="{ paddingTop: safeAreaInsets.top + 'px' }"
        class="page-navbar"
        >足球状元榜</view
      >
    </view>
    <view class="color">
      <view class="headPortrait">图片</view>
      <view class="Off-card">
        <view class="card" v-for="item in text">{{ item.txt }}</view>
      </view>
      <view class="Off-card">
        <view class="Long-card" v-for="item in 2">1</view>
      </view>
      <view class="scheme">
        <view style="font-weight: 700">今日方案</view>
        <view
          style="display: flex; width: 150rpx; justify-content: space-around"
        >
          <view style="font-size: 20rpx">查看更多</view>
          <u-icon name="arrow-right" size="12" color="#555555"></u-icon>
        </view>
      </view>
      <view
        style="
          height: 850rpx;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        "
      >
        <view @click="scheme" v-for="item in 3" class="Pitch-card">
          <view class="one">
            <view
              style="
                width: 330rpx;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
              "
            >
              <span style="color: #e4b895">¥</span>
              <span style="color: #e4b895; font-size: 45rpx">888.00</span>
              <u-tag
                text="未购买"
                type="warning"
                size="mini"
                bgColor="#fef3ef"
                color="#e4b895"
                borderColor="#fef3ef"
              ></u-tag>
            </view>
            <view style="margin-right: 35rpx; margin-top: 10rpx">
              <u-tag
                text="泰国联赛杯"
                size="mini"
                type="warning"
                plain
                color="#e4b895"
                borderColor="#e4b895"
              ></u-tag>
            </view>
          </view>
          <view class="two">
            <view>刚开球，来得及!</view>
          </view>
          <view class="three">
            <view
              style="
                display: flex;
                width: 200rpx;
                align-items: center;
                justify-content: space-evenly;
              "
            >
              <u-avatar src=""></u-avatar>
              <view class="">人名</view>
            </view>
            <view style="font-size: 26rpx; margin-right: 35rpx"
              >2024-04-11 18:59:52</view
            >
          </view>
          <view class="four">
            <u-button
              style="color: #e5b29f; font-weight: 700"
              type="primary"
              text="立即购买"
              color="#fef3ef"
            ></u-button>
          </view>
        </view>
      </view>
      <view>
        <view class="Master-card">
          <view class="top">
            <view class="left" style="font-weight: 700; font-size: 34rpx"
              >推荐高手</view
            >
            <view class="right">
              <view
                @click="ViewGuru"
                style="font-size: 24rpx; margin-right: 15rpx"
                >查看更多</view
              >
              <u-icon name="arrow-right" size="12" color="#555555"></u-icon>
            </view>
          </view>
        </view>
        <view
          style="
            height: 900rpx;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
          "
        >
          <view
            @click="masterHand(item)"
            v-for="(item, index) in 5"
            class="Master-card-buttom"
          >
            <view class="left">
              <u-avatar src=""></u-avatar>
              <view class="">人名</view>
            </view>
            <view class="right">
              <view>
                <span style="color: red; font-weight: 700">9连红</span>
                <span style="color: red; margin-left: 15rpx; font-weight: 700"
                  >近20中15</span
                >
              </view>
              <view class="texta">行走江湖多年关系网遍布全球</view>
              <view class="textb">全球，周易，五行，术数</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  // 获取安全区域的边界
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const text = ref([
    {
      txt: '学院',
    },
    {
      txt: '方法',
    },
    {
      txt: '高玩区',
    },
  ])
  const src = ref({
    src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
    text: '无头像',
  })
  const ViewGuru = () => {
    uni.navigateTo({
      url: '/pages/index/compontents/bigMaster',
      animationDuration: '300',
    })
  }
  const masterHand = (item) => {
    uni.navigateTo({
      url: '/pages/index/compontents/masterHand',
      animationDuration: '300',
    })
  }
  const scheme = () => {
    uni.navigateTo({
      url: '/pages/index/compontents/scheme',
      animationDuration: '300',
    })
  }
  // #ifdef H5 || APP
  console.log('运行在 App')
  // #endif

  // #ifndef MP-WEIXIN
  console.log('不是运行在微信小程序')
  // #endif
</script>

<style lang="scss" scoped>
  .color {
    background-image: linear-gradient(
      to bottom,
      rgba(246, 233, 224),
      rgba(255, 255, 255)
    );
    height: 100%;
    display: flow-root;
  }
  .index-page {
    background-size: contain;
    background-repeat: no-repeat;
    /* #ifdef H5 */
    padding-top: 20rpx;
    /* #endif */
  }

  .page-navbar {
    height: 88rpx;
    line-height: 88rpx;
    padding: 0 30rpx;
    font-size: 34rpx;
    font-weight: 700;
    color: #000;
    text-align: center;
  }
  .headPortrait {
    width: 650rpx;
    height: 250rpx;
    border-radius: 20rpx;
    margin: auto;
    margin-top: 100rpx;
    background-color: #fff;
    border: 1rpx solid #b6b5b3;
  }
  .Off-card {
    display: flex;
    justify-content: space-evenly;
    margin-top: 15rpx;
  }
  .card {
    width: 200rpx;
    height: 200rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20rpx;
    border: 1rpx solid #b6b5b3;
  }
  .Long-card {
    background-color: #fff;
    width: 300rpx;
    height: 120rpx;
    margin-top: 15rpx;
    border-radius: 15rpx;
    border: 1rpx solid #b6b5b3;
  }
  .scheme {
    display: flex;
    justify-content: space-between;
    margin: 35rpx;
    line-height: 40rpx;
  }
  .Pitch-card {
    width: 650rpx;
    height: 400rpx;
    border-radius: 15rpx;
    margin: 20rpx auto;
    background-color: #fff;
    border: 1rpx solid #b6b5b3;
    .one {
      display: flex;
      margin-top: 20rpx;
      justify-content: space-between;
    }
    .two {
      font-size: 35rpx;
      font-weight: 700;
      margin: 10rpx 0 10rpx 20rpx;
    }
    .three {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .four {
      margin: 45rpx;
    }
  }
  .Master-card {
    width: 650rpx;
    margin: auto;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
    }
    .right {
      display: flex;
    }
  }
  .Master-card-buttom {
    width: 650rpx;
    height: 250rpx;
    margin: auto;
    border: 1rpx solid #b6b5b3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .left {
      display: flex;
      align-items: center;
    }
    .texta {
      width: 300rpx;
      height: 80rpx;
      border: 1rpx solid #e4b895;
      color: #e4b895;
      font-size: 16rpx;
      margin-top: 16rpx;
      margin-bottom: 16rpx;
    }
    .textb {
      border: 1rpx solid #e4b895;
      color: #e4b895;
      width: 300rpx;
      font-size: 16rpx;
    }
  }
</style>
