dykj-football/pages/index/index.vue

<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: 900rpx; overflow-y: auto; -webkit-overflow-scrolling: touch">
        <view 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 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 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: '无头像'
});
// #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>