166 lines
4.1 KiB
Vue
166 lines
4.1 KiB
Vue
<template>
|
||
<view>
|
||
<statusNav returnColor="#141414" fontWeight="800" titleColor="#141414" backgroudColor="#ffffff"
|
||
navBarTitle="我的奖品">
|
||
</statusNav>
|
||
|
||
|
||
<view class="main">
|
||
<view class="li">
|
||
<image src="" class="img" mode=""></image>
|
||
<button @click="isMyprizeFun()" class="button" :class="true?'':'buttonCss'" type="default">立即兑换</button>
|
||
</view>
|
||
<view class="li">
|
||
<image src="" class="img" mode=""></image>
|
||
<button class="button" :class="false?'':'buttonCss'" type="default">立即兑换</button>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="make" v-if="isMyprize">
|
||
<view class="make-content">
|
||
<view class="title">
|
||
确定兑换此奖品？
|
||
</view>
|
||
|
||
<view class="text">
|
||
注:该奖品需要邮寄，请填写收货地址
|
||
</view>
|
||
<view class="button-content">
|
||
<view class="button" @click="isMyprizeFun()">
|
||
暂不兑换
|
||
</view>
|
||
<view class="button buttonCss" @click="isMyprizeFun()">
|
||
立即兑换
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import statusNav from '../../components/status-nav.vue';
|
||
export default {
|
||
components: {
|
||
statusNav
|
||
},
|
||
data() {
|
||
return {
|
||
isMyprize: true
|
||
}
|
||
},
|
||
methods: {
|
||
isMyprizeFun() {
|
||
this.isMyprize=!this.isMyprize
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.main {
|
||
margin-top: 46rpx;
|
||
}
|
||
|
||
.main .li {
|
||
width: 710rpx;
|
||
height: 468rpx;
|
||
margin: auto;
|
||
padding-top: 40rpx;
|
||
margin-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.13);
|
||
}
|
||
|
||
.main .li .img {
|
||
width: 290rpx;
|
||
height: 290rpx;
|
||
margin-bottom: 20rpx;
|
||
background-color: rgb(232, 232, 232)
|
||
}
|
||
|
||
.main .li .button {
|
||
width: 630rpx;
|
||
height: 74rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
background-color: rgba(243, 122, 97, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
.main .li .buttonCss {
|
||
width: 630rpx;
|
||
height: 74rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
background-color: rgba(227, 227, 227, 100);
|
||
text-align: center;
|
||
}
|
||
|
||
.make {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
left: 0rpx;
|
||
z-index: 50;
|
||
top: 0rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgba(0, 0, 0, 0.5)
|
||
}
|
||
|
||
.make-content {
|
||
width: 646rpx;
|
||
height: 432rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
padding-top: 94rpx;
|
||
border: 2rpx solid rgba(187, 187, 187, 100);
|
||
}
|
||
|
||
.make-content .title {
|
||
color: rgba(16, 16, 16, 100);
|
||
font-size: 32rpx;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.make-content .text {
|
||
font-size: 24rpx;
|
||
color: rgba(156, 156, 156, 100);
|
||
}
|
||
|
||
.button-content {
|
||
display: flex;
|
||
padding: 24rpx;
|
||
justify-content: space-between;
|
||
position: absolute;
|
||
left: 0rpx;
|
||
bottom: 0rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.button-content .button {
|
||
width: 242rpx;
|
||
height: 84rpx;
|
||
color: rgba(255, 255, 255, 100);
|
||
font-size: 28rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 20rpx;
|
||
background-color: rgba(185, 185, 185, 100);
|
||
}
|
||
|
||
.button-content .buttonCss {
|
||
background-color: rgba(243, 122, 97, 100);
|
||
}
|
||
</style>
|