328 lines
7.1 KiB
Vue
328 lines
7.1 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="onecontent">
|
||
<view class="onecontentabsolute"></view>
|
||
</view>
|
||
<view class="towcontent">
|
||
<view class="towcontentone">
|
||
<image class="towcontentoneimage" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd1.png"
|
||
mode="aspectFill"></image>
|
||
<view class="towcontentonebox">
|
||
<image class="towcontentoneboximage"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd2.png" mode="aspectFill">
|
||
</image>
|
||
<view class="towcontentoneboxswiper">
|
||
<swiper class="swiper" circular :autoplay='true' :vertical='true' display-multiple-items="4"
|
||
:interval="'3000'">
|
||
<swiper-item class="swiperitem" v-for="(item, index) in orderfindWiningUserlist"
|
||
:key="index">
|
||
<view class="swiper-item">{{ item.userName }}* 免单{{ item.orderAmount }}元订单号：{{ item.orderNo }}
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towcontentoness">
|
||
<view class="towcontentonebox_box">
|
||
订单数：10
|
||
</view>
|
||
<view class="towcontentonebox">
|
||
<view class="towcontentoneboxswiper">
|
||
<view class="swiper-item" style="margin-bottom: 32rpx;">
|
||
<view class="swiper_itemone">
|
||
免单状态
|
||
</view>
|
||
<view class="swiper_itemtow">
|
||
订单号
|
||
</view>
|
||
<view class="swiper_itemthere">
|
||
金额
|
||
</view>
|
||
</view>
|
||
<view class="swiperitem" v-for="(item, index) in ordermineWinnerList" :key="index">
|
||
<view class="swiper-item" style="margin-top: 32rpx;">
|
||
<view class="swiper_itemone">
|
||
{{ item.isRefund == true ? '已免单' : '待免单' }}
|
||
</view>
|
||
<view class="swiper_itemtow">
|
||
{{ item.orderNo }}
|
||
</view>
|
||
<view class="swiper_itemthere">
|
||
{{ item.orderAmount }}元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towcontenttow">
|
||
注：每笔订单完成后30天内均有机会获得免单
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
let orderfindWiningUserlist = ref([{
|
||
userName: "王*",
|
||
orderAmount: 12,
|
||
orderNo: 213504512353548688546
|
||
}, {
|
||
userName: "赵*",
|
||
orderAmount: 48,
|
||
orderNo: 65481188834105643623210
|
||
}, {
|
||
userName: "钱*",
|
||
orderAmount: 91,
|
||
orderNo: 5891051346764518249444
|
||
}, {
|
||
userName: "孙*",
|
||
orderAmount: 84,
|
||
orderNo: 688472546798742575342
|
||
}, {
|
||
userName: "王",
|
||
orderAmount: 73,
|
||
orderNo: 597344582826533594131
|
||
}, {
|
||
userName: "郑*",
|
||
orderAmount: 98,
|
||
orderNo: 469867684658481051627
|
||
}, {
|
||
userName: "凯*",
|
||
orderAmount: 95,
|
||
orderNo: 895961781634536230631
|
||
},
|
||
|
||
])
|
||
let ordermineWinnerList = ref([{
|
||
isRefund: true,
|
||
orderNo: 895961781634536230631,
|
||
orderAmount: "95"
|
||
},
|
||
{
|
||
isRefund: true,
|
||
orderAmount: 74,
|
||
orderNo: 222674526516892311380
|
||
},
|
||
{
|
||
isRefund: false,
|
||
orderAmount: 23,
|
||
orderNo: 862674526546892311380
|
||
},
|
||
])
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
|
||
.content {
|
||
.onecontent {
|
||
width: 100%;
|
||
height: 684.19rpx;
|
||
position: relative;
|
||
background: linear-gradient(96deg, #F9F2D9 0%, #FBE1DA 100%);
|
||
|
||
.onecontentabsolute {
|
||
position: absolute;
|
||
top: 0;
|
||
height: 534.19rpx;
|
||
width: 100%;
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/mrmd.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.towcontent {
|
||
position: relative;
|
||
padding: 0 28rpx;
|
||
width: 100%;
|
||
margin-top: -100rpx;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(249, 242, 217, 0.77) 10%, #F5DFDF 100%);
|
||
|
||
.towcontentone {
|
||
position: relative;
|
||
width: 100%;
|
||
background: linear-gradient(180deg, rgba(255, 241, 204, 0.77) 0%, rgba(255, 255, 255, 0.56) 40%, #FFFFFF 100%);
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
padding: 32rpx 24rpx;
|
||
|
||
.towcontentoneimage {
|
||
position: absolute;
|
||
top: -30rpx;
|
||
left: 50%;
|
||
transform: translatex(-50%);
|
||
width: 118rpx;
|
||
height: 46rpx;
|
||
}
|
||
|
||
.towcontentonebox {
|
||
width: 100%;
|
||
|
||
.towcontentoneboximage {
|
||
width: 171.63rpx;
|
||
height: 37.24rpx;
|
||
}
|
||
|
||
.towcontentoneboxswiper {
|
||
width: 100%;
|
||
padding-top: 24rpx;
|
||
overflow: hidden;
|
||
|
||
.swiper {
|
||
height: 242rpx;
|
||
|
||
.swiperitem {
|
||
height: 40rpx;
|
||
|
||
.swiper-item {
|
||
display: block;
|
||
height: 40rpx;
|
||
text-align: left;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontentoness {
|
||
margin-top: 48rpx;
|
||
width: 100%;
|
||
background: rgba(255, 255, 255, 0.96);
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
padding: 38rpx 48rpx;
|
||
|
||
.towcontentonebox_box {
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
width: 262rpx;
|
||
height: 58rpx;
|
||
line-height: 58rpx;
|
||
background: #FFA436;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.towcontentonebox {
|
||
width: 100%;
|
||
|
||
.towcontentoneboximage {
|
||
width: 171.63rpx;
|
||
height: 37.24rpx;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.swiper_itemone {
|
||
width: 25%;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.swiper_itemtow {
|
||
width: auto;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.swiper_itemthere {
|
||
width: 25%;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.towcontentoneboxswiper {
|
||
width: 100%;
|
||
// height: 242rpx;
|
||
padding-top: 24rpx;
|
||
overflow: hidden;
|
||
|
||
.swiper {
|
||
height: 230rpx;
|
||
|
||
.swiperitem {
|
||
height: 40rpx;
|
||
|
||
.swiper-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.swiper_itemone {
|
||
width: 25%;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.swiper_itemtow {
|
||
width: auto;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.swiper_itemthere {
|
||
width: 25%;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontenttow {
|
||
margin-top: 32rpx;
|
||
padding-bottom: 144rpx;
|
||
text-align: center;
|
||
width: 100%;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
</style> |