301 lines
7.6 KiB
Vue
301 lines
7.6 KiB
Vue
<template>
|
|
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
|
|
<!-- 自定义导航 -->
|
|
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
|
|
</view>
|
|
<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 style="font-weight: 700; font-size: 18px; margin-bottom: 3%;">
|
|
最新打折方案
|
|
</view>
|
|
<view v-for="(item,index) in list" :key="index">
|
|
<view class="content">
|
|
<view class="moneyBuy">
|
|
<view class="money-discount">
|
|
<view class="money-top">
|
|
<view class="money-text">
|
|
<u-icon name="rmb" color="#e4b698" size="10" />
|
|
<span style="color: #e4b698; font-size: 18px; font-weight: 600;">{{item.originalPrice}}</span>
|
|
<u-tag :text="item.isNoBuy" type="warning" size="mini" plain plainFill></u-tag>
|
|
</view>
|
|
<view class="discounted">
|
|
<span>{{item.currentPrice}}</span>
|
|
</view>
|
|
</view>
|
|
<view class="discountNum">
|
|
<span>{{item.discount}}</span>
|
|
</view>
|
|
<view class="btnStyle" style="margin-right: 10%;">
|
|
<u-button v-if="item.isNoBuy !== '已购买'" size="small" text="立即购买" shape="circle" color=" #e13977">
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
<view class="money-content">
|
|
<span>{{item.content}}</span>
|
|
</view>
|
|
</view>
|
|
<u-line style="width: 95%;"></u-line>
|
|
<view class="timeSession">
|
|
<view>
|
|
<span style="font-size: 14px; font-weight: 600; margin-right: 3%;">{{item.time}}</span>
|
|
<u-tag :text="item.league" type="warning" size="mini" plain></u-tag>
|
|
</view>
|
|
<view class="teamVs">
|
|
<view class="team">
|
|
<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
|
|
{{item.teamOne}}
|
|
</view>
|
|
<view>
|
|
{{'vs'}}
|
|
</view>
|
|
<view class="team">
|
|
<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
|
|
{{item.teamTwo}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-line style="width: 95%;"></u-line>
|
|
<view class="userInfo">
|
|
<view class="userName">
|
|
<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
|
|
{{item.name}}
|
|
</view>
|
|
<view class="userTag" >
|
|
<view v-for="(item, index) in item.tagList" :key="index">
|
|
<u-tag :text="item.name" type="warning" size="mini" plain></u-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="font-weight: 700; font-size: 18px; margin-bottom: 3%;">
|
|
历史打折方案
|
|
</view>
|
|
<view v-for="(item,index) in list" :key="index">
|
|
<view class="content">
|
|
<view class="moneyBuy" style="position: relative;">
|
|
<view class="money-content">
|
|
<span>{{item.content}}</span>
|
|
</view>
|
|
<view style="position: absolute; right: 0; top: 10px;">
|
|
<u-tag :text="item.deadHeat" :type="item.deadHeat === '中' ? 'success' : item.deadHeat === '负' ? 'error' : 'warning' " size="mini"></u-tag>
|
|
</view>
|
|
</view>
|
|
<u-line style="width: 95%;"></u-line>
|
|
<view class="timeSession">
|
|
<view>
|
|
<span style="font-size: 14px; font-weight: 600; margin-right: 3%;">{{item.time}}</span>
|
|
<u-tag :text="item.league" type="warning" size="mini" plain></u-tag>
|
|
</view>
|
|
<view class="teamVs">
|
|
<view class="team">
|
|
<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
|
|
{{item.teamOne}}
|
|
</view>
|
|
<view>
|
|
{{'vs'}}
|
|
</view>
|
|
<view class="team">
|
|
<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
|
|
{{item.teamTwo}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-line style="width: 95%;"></u-line>
|
|
<view class="userInfo">
|
|
<view class="userName">
|
|
<u-avatar shape="circle" size="25" :src="src" customStyle="margin: -3px 5px -3px 0" />
|
|
{{item.name}}
|
|
</view>
|
|
<view class="userTag" >
|
|
<view v-for="(item, index) in item.tagList" :key="index">
|
|
<u-tag :text="item.name" type="warning" size="mini" plain></u-tag>
|
|
</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先行者'},
|
|
]
|
|
},
|
|
{
|
|
originalPrice: '998.00',
|
|
isNoBuy: '已购买',
|
|
currentPrice: '98.00',
|
|
discount: '1折',
|
|
content: '我是内容',
|
|
time: '2024-04-19 10:00:00',
|
|
league: '殴足欧洲联赛',
|
|
teamOne: '宝飞加',
|
|
teamTwo: '马赛',
|
|
name: '老潘秘籍',
|
|
deadHeat: '负',
|
|
tagList: [
|
|
{name: '评级:掌门'},
|
|
{name: 'AI提问工程师'},
|
|
{name: '数字化及AI先行者'},
|
|
]
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-navbarOne {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
padding: 0 30rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
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: 30%;
|
|
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: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
.teamVs{
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
.team{
|
|
width: 30%;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
}
|
|
|
|
.userInfo {
|
|
width: 94%;
|
|
height: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
.userName{
|
|
width: 30%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.userTag{
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnStyle {
|
|
width: 50px;
|
|
}
|
|
</style> |