积分竞猜页面完成
This commit is contained in:
ycy
parent
e66dcbe2c0
commit
d033518ad1
|
|
@ -104,6 +104,13 @@
|
|||
"navigationBarTitleText": "结算页面",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/compontents/integralGuess",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分竞猜",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
255
pages/index/compontents/integralGuess.vue
Normal file
255
pages/index/compontents/integralGuess.vue
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<view style="background-color: #e13977; height: 30vh; padding: 0 3%;">
|
||||
<view style="margin-bottom: 5%;">
|
||||
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @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></u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 95%;">
|
||||
<u-input placeholder="请输入积分" border="surround" v-model="value" />
|
||||
<u-button text="提交" size="large" 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></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>
|
||||
Loading…
Reference in New Issue
Block a user