mengyirong/libs/components/multiple-options-demo.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>