zhangsiye/mini/pages/member/index.vue

<template>
  <view class="member-container">
    <view class="header dir-top-wrap cross-center">
      <view class="title">会员充值</view>
      <text class="tips">会员指定短剧无限观看、xxx 等特权</text>
    </view>
    <view class="content main-left">
      <view
        v-for="(item,index) in vip"
        :key="index"
        class="item dir-top-wrap cross-center main-center"
        :class="{active: activeIndex === index}"
        @click="activeIndex = index"
      >
        <view class="border" />
        <view v-if="activeIndex === index" class="selected">已选择</view>
        <text class="day">7天</text>
        <text class="price">￥29</text>
      </view>
    </view>
    <view class="free main-center cross-center" @click="$u.route('/pages/member/free')">
      查看 <text>免费片单</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vip: [1, 2, 3],
      activeIndex: 0
    }
  },
  computed: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
    .member-container{
      padding: 20rpx 0;
      font-size: 30rpx;
      .header{
        color: $primary-color;
        margin-top: 50rpx;
        .title{
          position: relative;
          font-size: 42rpx;
          font-weight: 600;
          width: 100%;
          text-align: center;
          &:before,&:after{
            content: "";
            background: url("/static/image/member-line-bg.png") no-repeat;
            background-size: 100%;
            position: absolute;
            top: 50%;
            left: 60rpx;
            width: 200rpx;
            height: 20rpx;
          }
          &:after{
            transform: rotate(180deg);
            right: 60rpx;
            left: unset;
            top: 20%;
          }
        }
        .tips{
          color: $dark-color;
          font-size: 26rpx;
          margin-top: 20rpx;
        }
      }
      .content{
        padding: 0 20rpx;
        margin-top: 80rpx;
        .item{
          color: $default-color;
          margin-left: 20rpx;
          flex: 1;
          height: 300rpx;
          position: relative;
          .border{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            border: 4rpx solid $info-color;
            border-radius: 10rpx;
            overflow: hidden;
          }
          &.active .border{
            border: unset;
            &:after{
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border: 4rpx solid;
              border-image: linear-gradient(222deg, #6EEBE8, #FF74B9) 1;
              z-index: 0;
            }
          }
          .selected{
            position: absolute;
            top: -20rpx;
            background: url("/static/image/member-selected-bg.png") no-repeat;
            background-size: 100%;
            text-align: center;
            width: 120rpx;
            height: 40rpx;
            font-size: 24rpx;
            line-height: 40rpx;
            left: 20rpx;
            z-index: 1;
          }
          &:first-child{
            margin-left: 0;
          }
          .day{
            font-size: 32rpx;
            margin-bottom: 80rpx;
          }
          .price{
            font-size: 38rpx;
            color: $primary-color;
          }
        }
      }
      .free{
        background: #1B1E32;
        width: 100%;
        padding: 20rpx 0;
        color: $info-color;
        text-align: center;
        font-size: 26rpx;
        margin-top: 60px;
        text{
          color: $dark-color;
        }
      }
    }
</style>