dykj-football/pages/index/compontents/integralGuess.vue
2024-04-20 10:14:22 +08:00

255 lines
5.7 KiB
Vue

<template>
<view style="background-color: #e13977; height: 30vh; padding: 0 3%;">
<view style="margin-bottom: 5%; position: relative;">
<u-icon name="arrow-left" color="#646668" size="24" style="position: absolute; top: 11px;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbarOne">积分竞猜</view>
</view>
<view>
<view class="Title">
<text>最新竞猜</text>
<text style="color: #fff;">我的积分:20</text>
</view>
<view v-for="(item,index) in list" :key="index">
<view class="content">
<view class="moneyBuy">
<view class="money-content">
<span>{{"四月门派冠军"}}</span>
</view>
</view>
<u-line style="width: 95%;"></u-line>
<view class="timeSession">
<view style="width: 30%; display: flex; justify-content: space-around;">
<span style="font-size: 18px;font-weight: 700; color: #eabc9e;">X5</span>
<u-tag text="未竞猜" type="warning" size="mini" plain plainFill></u-tag>
</view>
<view>
<span style="font-size: 14px; font-weight: 600;">{{'发布时间:'+item.time}}</span>
</view>
</view>
<u-line style="width: 95%;"></u-line>
<view class="userInfo">
<view class="userTag">
<view v-for="(item, index) in item.tagList" :key="index">
<view class="grid-item">
<u-tag :text="item.name" type="warning" size="large" plain plainFill></u-tag>
</view>
</view>
</view>
</view>
<view style="width: 95%;">
<u-input placeholder="请输入积分" border="surround" v-model="value" />
<u-button text="提交" size="main" shape="circle" color="#1989f9" style="margin: 3% 0 ;"/>
</view>
</view>
</view>
</view>
<view class="Title">
<text>最新竞猜</text>
<text style="color: #fff;">我的积分:20</text>
</view>
<view v-for="(item,index) in list" :key="index">
<view class="content">
<view class="moneyBuy">
<view class="money-content">
<span>{{"三月门派冠军"}}</span>
</view>
</view>
<u-line style="width: 95%;"></u-line>
<view class="timeSession">
<view style="width: 30%; display: flex; justify-content: space-around;">
<span style="font-size: 18px;font-weight: 700; color: #eabc9e;">X5</span>
<u-tag text="已结算" type="info" size="mini" plain plainFill></u-tag>
</view>
<view>
<span style="font-size: 14px; font-weight: 600;">{{'发布时间:'+item.time}}</span>
</view>
</view>
<u-line style="width: 95%;"></u-line>
<view class="userInfo">
<view class="userTag">
<view v-for="(item, index) in item.tagList" :key="index">
<view class="grid-item">
<u-tag :text="item.name" type="warning" size="large" plain plainFill></u-tag>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const {
safeAreaInsets
} = uni.getSystemInfoSync();
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const gotoBack = () => {
uni.navigateBack({
delta: 1
})
}
const list = [{
originalPrice: '998.00',
isNoBuy: '未购买',
currentPrice: '496.00',
discount: '5折',
content: '我是内容',
time: '2024-04-19 10:00:00',
league: '殴足欧洲联赛',
teamOne: '利叶古通',
teamTwo: '高思维',
name: '程博士',
deadHeat: '中',
tagList: [{
name: '评级:掌门'
},
{
name: 'AI提问工程师'
},
{
name: '数字化及AI先行者'
},
{
name: '数字化及AI先行者'
},
]
}, ]
</script>
<style lang="scss" scoped>
.page-navbarOne {
height: 88rpx;
line-height: 88rpx;
padding: 0 30rpx;
color: #fff;
text-align: center;
}
.Title {
font-weight: 700;
font-size: 15px;
margin-bottom: 3%;
display: flex;
justify-content: space-between;
}
.content {
width: 100%;
// min-height: 35vh;
background-color: #fff;
border: 1px solid #f6f6f6;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5%;
.moneyBuy {
width: 94%;
height: 5vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.money-discount {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
align-items: center;
.money-top {
width: 40%;
position: relative;
.money-text {
display: flex;
justify-content: space-around;
position: relative;
span::before {
content: "";
position: absolute;
top: 50%;
left: 18px;
width: 48%;
height: 1px;
background-color: #e4b698;
transform: translateY(-50%);
}
}
.discounted {
position: absolute;
color: red;
font-size: 18px;
font-weight: 600;
top: 10px;
left: 22px;
}
}
.discountNum {
color: red;
font-size: 20px;
font-weight: 700;
transform: skewy(10deg);
}
}
.money-content {
font-weight: 700;
width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.timeSession {
width: 94%;
height: 8vh;
display: flex;
align-items: center;
justify-content: space-between;
.teamVs {
display: flex;
justify-content: space-evenly;
align-items: center;
}
}
.userInfo {
width: 94%;
min-height: 10vh;
max-height: 30vh;
overflow-y: auto;
.userTag {
width: 100%;
margin: 5% 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 创建两列 */
grid-gap: 10px;
/* 列间隔 */
.grid-item {
text-align: center;
background-color: #fff;
border-radius: 5px;
}
}
}
}
.btnStyle {
width: 50px;
}
</style>