Skip to content

U
user
Commit 6a072359 by songbingqi
Options

完成我的页面优惠卷部分开发

parent 253bc869
Showing with 222 additions and 25 deletions
components/Ticket/index.vue
<template>
<view class="all">
<view class="partOne">
<view class="partOne">
<view class="one_left">
<view class="type">最大字数最大字</view>
<view class="price">
30<span>元</span>
</view>
<view class="price_desc">满130可用</view>
</view>
<view class="one_right">
<view class="right_top">
<view class="info">
<view class="title">最大字数最大字数最大</view>
<view class="time">有效期至2022.07.24.17:20</view>
</view>
<view class="action">
<button class="gouse">去使用</button>
</view>
</view>
<view class="right_bottom">
<view class="more_info" @click="openDetail">
<view class="desc">最大字数最大字数最大字数最</view>
<image class="arrow-right-select" :src="'../../static/imgs/jiantouhei.png'" />
</view>
</view>
</view>
</view>
<view class="partTwo" v-if="detailFlag" :key="twokey">
</view>
<view class="partThree" v-if="!status">
</view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
detailFlag:false,
status:true,
twokey:0
}
},
methods:{
openDetail(){
this.detailFlag = !this.detailFlag
this.$nextTick(()=>{
this.twokey++
})
}
}
}
</script>
......@@ -21,34 +64,188 @@ export default {
.partOne {
width: 100%;
height: 241rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(102,102,102,0.1000);
.partOne {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
background: radial-gradient(circle at right top, transparent 9px, #FFFFFF 0) top left / 178rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 9px, #FFFFFF 0) bottom left / 178rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 9px, #FFFFFF 0) top right / 510rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 9px, #FFFFFF 0) bottom right / 510rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
.one_left {
height: 100%;
width: 154rpx;
.type {
padding: 2rpx 10rpx;
max-width: 154rpx;
text-align: center;
height: 28rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
background: linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%);
color: #FFFFFF;
line-height: 28rpx;
}
.price{
width: 178rpx;
height: 79rpx;
font-size: 56rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #0050F6;
line-height: 74rpx;
margin: 0 auto;
text-align: center;
margin-top: 40rpx;
span {
height: 34rpx;
font-size: 24rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #0050F6;
line-height: 30rpx;
}
}
.price_desc {
height: 28rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0050F6;
line-height: 28rpx;
width: 178rpx;
text-align: center;
}
}
.one_right {
height: 198rpx;
width: calc(510rpx - 38rpx);
.right_top {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-top: 42rpx;
padding-bottom: 22rpx;
margin-right: 32rpx;
border-bottom: 1rpx solid #ECECEC;
.info {
.title {
max-width: 332rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.time {
height: 28rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-top: 8rpx;
line-height: 28rpx;
}
}
.action {
.gouse{
width: 128rpx;
height: 52rpx;
background: #0050F6;
border-radius: 2rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}
}
}
.right_bottom {
padding-top: 22.96rpx;
margin-right: 32rpx;
.more_info {
display: flex;
justify-content: flex-start;
align-items: center;
.desc {
max-width: 261rpx;
height: 28rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 28rpx;
}
.arrow-right-select {
margin-left: 8rpx;
width: 8.27rpx;
height: 12.68rpx;
}
}
}
}
.partOne::after {
content:'';
display: inline-block;
position: absolute;
top: -25rpx;
left: 160rpx;
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background: #F8F8F8;
}
.partOne::before {
content:'';
display: inline-block;
content: '';
height: 198rpx;
border: 1rpx dashed #F6F6F6;
position: absolute;
bottom: -25rpx;
left: 160rpx;
width: 50rpx;
height: 50rpx;
border-radius: 50%;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(102,102,102,0.1000);
background: #F8F8F8;
left: 176rpx;
top: 0;
bottom: 0;
margin: auto;
}
.partTwo {
transform: translateZ(0);
width: 100%;
height: 300rpx;
position: relative;
background: radial-gradient(circle at right top, transparent 10px, #FFFFFF 0) top left / 180rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, #FFFFFF 0) bottom left / 180rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, #FFFFFF 0) top right / 512rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #FFFFFF 0) bottom right / 512rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
}
.partTwo::before {
content: '';
height: 1rpx;
width: 122rpx;
border: 1rpx dashed #F4F4F4;
position: absolute;
left: 33.75rpx;
top: -296rpx;
bottom: 0;
margin: auto;
}
.partTwo::after {
content: '';
height: 1rpx;
width: 460rpx;
border: 1rpx dashed #F4F4F4;
position: absolute;
left: 196.75rpx;
top: -296rpx;
bottom: 0;
margin: auto;
}
.partThree {
width: 100%;
height: 72rpx;
position: relative;
background: radial-gradient(circle at right top, transparent 9px, #E9E9E9 0) top left / 180rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 0px, #E9E9E9 0) bottom left / 180rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 9px, #E9E9E9 0) top right / 512rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 0px, #E9E9E9 0) bottom right / 512rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
}
}
}
</style>
\ No newline at end of file
mineSubPackage/pages/coupon/index.vue
......@@ -67,7 +67,6 @@ export default {
background: #F8F8F8;
height: calc(100vh - 64rpx);
.nouser{
border: 1px solid red;
height: 100%;
padding: 32rpx;
overflow-y: scroll;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment