204 lines
4.3 KiB
Vue
204 lines
4.3 KiB
Vue
<template>
|
||
<view class="p-20">
|
||
<view>
|
||
<view class="top-img flex justify-center items-center">
|
||
<image src="../../../static/uni.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="information p-20 flex flex-row">
|
||
<image class="img" src="../../../static/uni.png" mode="aspectFit"></image>
|
||
<view class="flex-1 flex flex-col">
|
||
<text class="title">老公的金丝雀怀孕后</text>
|
||
<text>抖音 | CPM</text>
|
||
<text>地球行者品宣部</text>
|
||
</view>
|
||
</view>
|
||
<view class="way-percent flex flex-row">
|
||
<view class="flex-1 flex flex-col justify-center items-center">
|
||
<view class="biger">52</view>
|
||
<view class="smaller">视频数</view>
|
||
</view>
|
||
<view class="flex-1 flex flex-col justify-center items-center">
|
||
<view class="biger">3.22w</view>
|
||
<view class="smaller">播放次数</view>
|
||
</view>
|
||
<view class="flex-1 flex flex-col justify-center items-center">
|
||
<view class="biger">217</view>
|
||
<view class="smaller">获赞数</view>
|
||
</view>
|
||
<view class="flex-1 flex flex-col justify-center items-center">
|
||
<view class="biger">42</view>
|
||
<view class="smaller">评论数</view>
|
||
</view>
|
||
</view>
|
||
<view class="p-30 bg-white introduce">
|
||
<view>任务奖励：根据视频表现持续瓜分现金，先到先得</view>
|
||
<view>总奖金池：<text style="color: red;">1,0000.00</text></view>
|
||
<view>
|
||
<text>奖励已瓜分</text>
|
||
<cmd-progress :percent="16"></cmd-progress>
|
||
</view>
|
||
</view>
|
||
<view class="info">
|
||
<u-tabs style="padding: 20upx 0;" :scrollable="false" :list="tabs" lineColor="#007aff" :activeStyle="{
|
||
color: '#303133',
|
||
fontWeight: 'bold'
|
||
}" :inactiveStyle="{
|
||
color: '#606266',
|
||
transform: 'scale(1)'
|
||
}" itemStyle="height: 34px; padding-bottom: 10upx;" @change="change">
|
||
</u-tabs>
|
||
<view v-if="currentIndex === 0">
|
||
<view class="inside-content">
|
||
<text>链接：https://pan.baidu.com/s/1vqFyozWUCc5NSYdqIqcP2A?pwd=uye7</text>
|
||
<view class="copy-wrap"><text class="copy">复制链接</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="imageine" v-else-if="currentIndex === 1">
|
||
暂无信息
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fix-btn p-20">
|
||
<u-button shape="circle" type="primary">立即领取</u-button>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
|
||
export default {
|
||
components: {
|
||
cmdProgress
|
||
},
|
||
data() {
|
||
return {
|
||
tabs: [{
|
||
name: '任务玩法'
|
||
}, {
|
||
name: '播放排行'
|
||
}],
|
||
currentIndex: 0,
|
||
}
|
||
},
|
||
created() {
|
||
|
||
},
|
||
methods: {
|
||
change(e) {
|
||
this.currentIndex = e.index
|
||
},
|
||
change2(e) {
|
||
this.promotionActive = e.index
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.top-img {
|
||
height: 300upx;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
height: 600upx;
|
||
}
|
||
}
|
||
|
||
.fix-btn {
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
background-color: #fff;
|
||
}
|
||
|
||
.information {
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
|
||
.img {
|
||
width: 120upx;
|
||
height: 120upx;
|
||
border-radius: 10upx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.flex-1 {
|
||
padding-left: 20upx;
|
||
|
||
.title {
|
||
color: #323333;
|
||
font-size: 28upx;
|
||
}
|
||
|
||
text {
|
||
color: #aaa;
|
||
font-size: 23upx;
|
||
padding: 2upx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.introduce {
|
||
padding: 30upx;
|
||
border-radius: 20upx;
|
||
color: #aaa;
|
||
font-size: 25upx;
|
||
|
||
>view {
|
||
padding: 5upx 0;
|
||
}
|
||
}
|
||
|
||
.way-percent {
|
||
padding: 30upx 0;
|
||
border-top: 0;
|
||
|
||
.biger {
|
||
font-size: 30upx;
|
||
font-weight: bold;
|
||
color: #323333;
|
||
}
|
||
|
||
.smaller {
|
||
font-size: 24upx;
|
||
color: #7d8394;
|
||
margin-top: 10upx;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
margin-top: 30upx;
|
||
}
|
||
|
||
.inside-content {
|
||
font-size: 28upx;
|
||
padding: 30upx;
|
||
color: #666;
|
||
word-break: break-all;
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
margin-top: 20upx;
|
||
|
||
.copy-wrap {
|
||
padding-top: 50upx;
|
||
}
|
||
|
||
.copy {
|
||
color: $uni-theme;
|
||
}
|
||
}
|
||
|
||
.imageine {
|
||
font-size: 28upx;
|
||
padding: 30upx;
|
||
color: #666;
|
||
word-break: break-all;
|
||
border-top: 1upx solid #ebedf0;
|
||
}
|
||
</style> |