109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<template>
|
||
<view class="request-box">
|
||
<view class="tags">
|
||
<view class="tag" @click="click(index)" :class="{'active': checkList(index)}" v-for="(item, index) in list" :key="index">{{item}}</view>
|
||
</view>
|
||
<view class="all-req">
|
||
<view v-for="(item, index) in allList" :key="index">
|
||
<view class="item" :class="{'active': checkAllList(index)}" @click="allClick(index)">
|
||
<view class="title">{{item}}</view>
|
||
<image src="../../static/img/cj_icon_xjt/cj_icon_xjt.png" class="img"></image>
|
||
</view>
|
||
<view v-if="checkAllList(index)">A 抖达人是一款新媒体服务平台，致力于KOL红人孵化，用户可以通过抖达人来提升作品曝光指数、用户关注，帮助更多红人和创作者解决“创作难”难题，让短视频创作没有门槛，让创业更简单。</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
show: true,
|
||
list: [
|
||
'关于我们', '关于提现和会员', '关于分站', '关于订单', '关于签到'
|
||
],
|
||
clickList: [],
|
||
|
||
allList: [
|
||
'Q 关于我们', 'Q 怎么赚钱'
|
||
],
|
||
allClickList: []
|
||
}
|
||
},
|
||
methods: {
|
||
tagClick () {
|
||
},
|
||
checkList (index) {
|
||
return this.clickList.indexOf(index) >= 0
|
||
},
|
||
click (index) {
|
||
let le = this.clickList.indexOf(index)
|
||
if (le >= 0) {
|
||
this.clickList.splice(le, 1)
|
||
} else {
|
||
this.clickList.push(index)
|
||
}
|
||
},
|
||
checkAllList (index) {
|
||
return this.allClickList.indexOf(index) >= 0
|
||
},
|
||
allClick (index) {
|
||
console.log(index)
|
||
let le = this.allClickList.indexOf(index)
|
||
if (le >= 0) {
|
||
this.allClickList.splice(le, 1)
|
||
} else {
|
||
this.allClickList.push(index)
|
||
}
|
||
console.log(this.allClickList)
|
||
},
|
||
// 加载数据
|
||
loadData () {
|
||
|
||
}
|
||
},
|
||
onLoad () {
|
||
this.loadData()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.request-box {
|
||
margin: 20rpx;
|
||
}
|
||
.tag {
|
||
margin: 18rpx 20rpx;
|
||
color: #FFFFFF;
|
||
display: inline-block;
|
||
background: #2B3062;
|
||
border-radius: 100rpx;
|
||
font-size: 28rpx;
|
||
padding: 0 20rpx 10rpx 20rpx;
|
||
&.active {
|
||
background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
|
||
}
|
||
}
|
||
.all-req {
|
||
margin-top: 45rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
& .item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 30rpx 0;
|
||
color: #9093B7;
|
||
&.active {
|
||
color: #FE192F;
|
||
}
|
||
}
|
||
& .img {
|
||
height: 12rpx;
|
||
width: 24rpx;
|
||
}
|
||
}
|
||
</style>
|
||
|