328 lines
8.0 KiB
Vue
328 lines
8.0 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: 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>
|