<template>
  <view class="flex fld-c p15">
    <u-sticky>
      <view class="flex ai-c">
        <view v-for="(item,index) in list" :key="index" class="km-item" :class="{ actived: index==current }"
          @click="current=index">
          {{ item.name }}
        </view>
      </view>
    </u-sticky>
    <view class="mt15">
      <swiper class="swiper" :current="current" style="height: 120px;" :autoplay="false" :display-multiple-items="1.45"
        :disable-programmatic-animation="true" @change="onChange">
        <swiper-item v-for="(item,index) in list" :key="index">
          <view class="relative">
            <image src="../../static/image/mine/vip_card.png" mode="widthFix" style="width:95%;"></image>
            <view class="vip-info">
              <u-avatar class="br-p50 overflow-h" style="border: 3px solid #873E1D;" :size="35" mp-avatar></u-avatar>
              <view class="ml10">
                <view class="fs16 fwb" style="color: #7E4012;line-height: 16px;">
                  {{item.name}}尊享VIP
                </view>
                <view class="mt5 fs12" style="color: #7E4012;line-height: 12px;">
                  2024-12-12到期
                </view>
              </view>
            </view>
            <view class="corner">
              VIP已开通
            </view>
            <view class="renew">
              98元立即续费
            </view>
          </view>
        </swiper-item>
        <swiper-item>
        </swiper-item>
      </swiper>
    </view>
    <view class="mt20">
      <swiper class="swiper" :current="current" style="height: 300px;" :autoplay="false"
        :disable-programmatic-animation="true" @change="onChange">
        <swiper-item v-for="(item,index) in list" :key="index">
          <view v-if="index == 0 || index == 3" class="p15 br8 cor-fff">
            <view class="fs18 cor-000 fwb">
              3步轻松学{{item.name}}
            </view>
            <view class="mt25 flex ai-c jc-sb">
              <view class="flex ai-c">
                <image src="../../static/image/mine/1.png" mode="widthFix" style="width:25px;"></image>
                <view class="ml7">
                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
                    精简500题
                  </view>
                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
                    题目全部做对，视为完成
                  </view>
                </view>
              </view>
              <view class="study">
                去学习
              </view>
            </view>
            <view class="mt45 flex ai-c jc-sb">
              <view class="flex ai-c">
                <image src="../../static/image/mine/2.png" mode="widthFix" style="width:25px;"></image>
                <view class="ml7">
                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
                    真实考场模拟
                  </view>
                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
                    10次95分以上，视为完成
                  </view>
                </view>
              </view>
              <view class="study">
                去学习
              </view>
            </view>
            <view class="mt45 flex ai-c jc-sb">
              <view class="flex ai-c">
                <image src="../../static/image/mine/3.png" mode="widthFix" style="width:25px;"></image>
                <view class="ml7">
                  <view class="fs16 cor-000 fwb" style="line-height: 16px;">
                    考前密卷
                  </view>
                  <view class="mt7 fs12 cor-666" style="line-height: 12px;">
                    2套试卷95分以上，视为完成
                  </view>
                </view>
              </view>
              <view class="study">
                去学习
              </view>
            </view>
          </view>
          <view v-else style="margin-top: 30rpx;">
            <view class="video-box">
              <view class="flex jc-sb ai-c wp100">
                <text style="color: #873E1D;font-size: 36rpx;">考场实况</text>
                <text class="cor-666 fs12">全部 ></text>
              </view>
              <view class="flex ai-c mt20">
                <image src="../../static/image/index/index_bg.png" mode="widthFix" style="flex: 1;border-radius: 33rpx;"></image>
                <view class="ml18 text-center">
                  <u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
                    text="去看视频" color="linear-gradient(90deg, #E66501 0%, #F8A42C 100%)" icon="play-circle">
                  </u-button>
                  <view class="cor-333 fs15 mt17">真实考场模拟</view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
          name: '科一'
        }, {
          name: '科二'
        }, {
          name: '科三'
        }, {
          name: '科四'
        }],
        current: 0
      }
    },
    methods: {
      onChange(e) {
        this.current = e.detail.current
      }
    }
  }
</script>

<style lang="scss" scoped>
  .km-item {
    margin-right: 8px;
    width: 72px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #333;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #CCCCCC;
  }

  .actived {
    background: linear-gradient(90deg, #E66501 0%, #F8A42C 100%);
    color: #fff;
  }

  .km-item:last-of-type {
    margin-right: 0;
  }

  .vip-info {
    position: absolute;
    top: 15px;
    left: 10px;
    display: flex;
    align-items: center;
  }

  .corner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 77px;
    height: 23px;
    background: linear-gradient(0deg, #E66501 0%, #F8A42C 100%);
    opacity: 0.86;
    border-radius: 0px 8px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
  }

  .renew {
    position: absolute;
    right: 10%;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 185rpx;
    height: 52rpx;
    background: #873E1D;
    border-radius: 26rpx;
    font-size: 12px;
    color: #F6E99F;
  }

  .study {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 161rpx;
    height: 67rpx;
    background: #F6E99F;
    border-radius: 34rpx;
    font-size: 12px;
    color: #873E1D;
  }
  .video-box {
  	padding: 20rpx;
  	width: 694rpx;
  	height: 369rpx;
  	background: #F9F3E7;
  	border: 2rpx solid #CF8B6D;
  	border-radius: 16rpx;
  }
</style>