mengyirong/libs/components/multiple-options-demo.vue

148 lines
3.4 KiB
Vue

<template>
<view class="multiple-options">
<view class="list">
<block v-for="(item, index) in listData" :key="index">
<view
class="list__item"
:class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]"
@tap="navOptionsPage(item.url)"
>
<view class="list__content">
<view class="list__content__title">{{ item.title }}</view>
<view class="list__content__desc">{{ item.desc }}</view>
</view>
<view class="list__icon">
<view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
<view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
</view>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
name: 'multiple-options-demo',
props: {
// 显示的列表数据
list: {
type: Array,
default() {
return []
}
}
},
data() {
return {
// 图鸟颜色列表
tuniaoColorList: [
'red',
'purplered',
'purple',
'bluepurple',
'aquablue',
'blue',
'indigo',
'cyan',
'teal',
'green',
'orange',
'orangered'
],
listData: []
}
},
watch: {
list(val) {
this.initList()
}
},
created() {
this.initList()
},
methods: {
// 初始化列表数据
initList() {
// 给列表添加背景颜色数据
this.listData = this.list.map((item, index) => {
item.bgColorIndex = this.getBgNum()
item.mainIcon = item?.mainIcon || 'computer-fill'
item.subIcon = item?.subIcon || 'share'
return item
})
},
// 跳转到对应的选项页面
navOptionsPage(url) {
uni.navigateTo({
url: url
})
},
// 获取酷炫背景随机数
getBgNum() {
return Math.floor((Math.random() * this.tuniaoColorList.length))
}
}
}
</script>
<style lang="scss" scoped>
.list {
&__item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: calc(100% - 60rpx);
margin: 108rpx 30rpx 0rpx 30rpx;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
border-radius: 20rpx;
}
&__content {
flex: 1;
// color: $tn-font-color;
margin: 34rpx 0rpx 27rpx 37rpx;
&__title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 12rpx;
}
&__desc {
font-size: 28rpx;
}
}
&__icon {
flex: 1;
margin-right: 26rpx;
position: relative;
&__main, &__sub {
-webkit-background-clip: text;
color: transparent;
position: absolute;
transition: transform 0.25s ease;
}
&__main {
font-size: 200rpx;
width: 190rpx;
line-height: 200rpx;
top: 0;
right: 0rpx;
transform: translateY(-60%);
}
&__sub {
font-size: 70rpx;
top: 0;
right: 175rpx;
transform: translateY(-5rpx);
}
}
}
</style>