245 lines
6.4 KiB
Vue
245 lines
6.4 KiB
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 @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 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'
|
||
});
|
||
};
|
||
// #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>
|