110 lines
2.6 KiB
Vue
110 lines
2.6 KiB
Vue
<template>
|
|
<u-popup :show="itemShow" mode="bottom" bgColor="transparent">
|
|
<view class="select-item">
|
|
<view class="select-head">
|
|
<view></view>
|
|
<text class="text-28 text-fu1">兑换方式</text>
|
|
<u-icon name="close" color="#333" size="16" @click="onClose"></u-icon>
|
|
</view>
|
|
<view class="select-box" @click="onOk(0)">
|
|
<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/shu_0.png"></image>
|
|
<view class="select-box-one">
|
|
<text class="text-32 text-zu1">区块链数字积分</text>
|
|
<text class="text-26 text-fu1">通过区块链兑换</text>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#999" size="14" class="select-icon"></u-icon>
|
|
</view>
|
|
<!-- <view class="select-box" @click="onOk(1)">
|
|
<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/shu_1.png"></image>
|
|
<view class="select-box-one">
|
|
<text class="text-32 text-zu1">alpha数字积分</text>
|
|
<text class="text-26 text-fu1">通过邮箱兑换</text>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#999" size="14" class="select-icon"></u-icon>
|
|
</view> -->
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import MyBtn from '@/components/common/my-btn.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
props:{
|
|
itemShow:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
|
|
},
|
|
mounted(){
|
|
},
|
|
methods: {
|
|
onOk(index){
|
|
this.$emit('ok',index);
|
|
},
|
|
onClose(){
|
|
this.$emit('close');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select-item{
|
|
width:100%;
|
|
min-height:588rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 32rpx 24rpx;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
.select-box{
|
|
width:100%;
|
|
height:152rpx;
|
|
min-height:152rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 0px 16rpx 0px #F4F4F4;
|
|
border-radius: 16rpx;
|
|
border: 1rpx solid #E3E3E3;
|
|
padding: 0 28rpx;
|
|
box-sizing: border-box;
|
|
margin-top:32rpx;
|
|
position: relative;
|
|
.select-icon{
|
|
position: absolute;
|
|
right:28rpx;
|
|
}
|
|
.select-box-one{
|
|
flex:1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height:88rpx;
|
|
}
|
|
image{
|
|
width:88rpx;
|
|
height:88rpx;
|
|
}
|
|
}
|
|
.select-head{
|
|
width:100%;
|
|
height:88rpx;
|
|
min-height:88rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style> |