<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 class="Pitch-card">
        <view class="">1</view>
        <view class="">2</view>
        <view class="">3</view>
        <view class="">4</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 获取安全区域的边界
const { safeAreaInsets } = uni.getSystemInfoSync();

const text = ref([
  {
    txt: '学院'
  },
  {
    txt: '方法'
  },
  {
    txt: '高玩区'
  }
]);

// #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: 750rpx;
  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: 250rpx;
  border-radius: 15rpx;
  margin: auto;
  background-color: #fff;
  border: 1rpx solid #b6b5b3;
}
</style>
