123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- <template>
- <view class="grace-pk" :style="{height:height,borderRadius:borderRadius}">
- <view class="grace-pk-item">
- <text class="grace-pk-title">{{title[0]}}</text>
- <view class="grace-pk-btn-wrap" v-if="status == 'button'">
- <view class="grace-pk-btn" hover-class="grace-pk-btn-hv"
- data-index="left" @tap="choose">{{btnName}}</view>
- </view>
- <view class="grace-pk-btn-wrap" v-if="status == 'progress'">
- <progress :percent="progress[0]" stroke-width="3" class="grace-pk-progress" active
- activeColor="#FFFFFF" border-radius="10" backgroundColor="#3699ff"/>
- </view>
- <view class="grace-pk-text" v-if="status == 'progress'">{{progress[2]}}</view>
- </view>
- <view class="grace-pk-item">
- <text class="grace-pk-title" style="text-align:right;">{{title[1]}}</text>
- <view class="grace-pk-btn-wrap" style="justify-content:flex-end;" v-if="status == 'button'">
- <view class="grace-pk-btn" hover-class="grace-pk-btn-hv"
- style="color:#FF0036;" data-index="right" @tap="choose">{{btnName}}</view>
- </view>
- <view class="grace-pk-btn-wrap" style="justify-content:flex-end;" v-if="status == 'progress'">
- <progress :percent="progress[1]" active stroke-width="3" class="grace-pk-progress"
- activeColor="#FFFFFF" border-radius="10" backgroundColor="#FF6666"/>
- </view>
- <view class="grace-pk-text" style="text-align:right;" v-if="status == 'progress'">{{progress[3]}}</view>
- </view>
- <view class="grace-pk-icon">
- <image src="https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200806/84515c21a39e8382addbeca53462e3a0.png"
- mode="widthFix" style="width:88rpx; height:88rpx;"></image>
- </view>
- </view>
- </template>
- <script>
- export default{
- props:{
- height : {type:String, default:'260rpx'},
- borderRadius : {type:String, default:'8rpx'},
- title : {type:Array, default:function(){return ['',''];}},
- btnName : {type:String, default:'站队'},
- status : {type:String, default:'button'},
- progress : {type:Array, default:function(){return [80,20,'8000 票', '2000 票'];}}
- },
- methods:{
- choose:function (e) {
- this.$emit('choose', e.currentTarget.dataset.index);
- }
- }
- }
- </script>
- <style>
- .grace-pk{display:flex; flex-direction:row; justify-content:space-between; background-image:url(https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200806/24692285f85690abbc762512ce22d2c5.png); background-repeat:repeat-y; background-size:100% auto; background-position:left center; position:relative;}
- .grace-pk-item{width:750rpx; overflow:hidden; padding:0rpx 35rpx; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center;}
- .grace-pk-title{display:block; color:#FFFFFF; font-size:50rpx; line-height:60rpx;}
- .grace-pk-btn-wrap{display:flex; flex-direction:row; margin-top:32rpx;}
- .grace-pk-btn{width:150rpx; height:50rpx; line-height:50rpx; text-align:center; background-color:#FFFFFF; font-size:22rpx; border-radius:100rpx; color:#3687FF;}
- .grace-pk-btn-hv{font-weight:bold;}
- .grace-pk-progress{width:200rpx;}
- .grace-pk-text{font-size:22rpx; color:#FFFFFF; line-height:50rpx; margin-top:2px;}
- .grace-pk-icon{width:88rpx; height:88rpx; background-color:#FFFFFF; border-radius:100rpx; font-size:0; position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%); padding:20rpx;}
- </style>
|