assess-app/pages/test/index.vue

<template>
  <view class="page-box">
    <en-nav title="垫资还款" :bgckground-box="''" title-color="#FF121212"></en-nav>
    <view class="top">
       <image class="top-img" src="/static/img/test/top.png" mode="widthFix" />
       <image class="top-status animate__animated animate__fadeInDownBig" src="/static/img/test/status.png" mode="widthFix" />
    </view>
    <view class="from-title sys-radius-20">
      <view class="title-list">
        <view class="title-text  sys-size-28 text-center sys-weight-600" :class="{'default-text':type===1}" @click="setType(1)">基础信息</view>
        <view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===2}" @click="setType(2)">资产/征信</view>
        <view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===3}" @click="setType(3)">跟进记录</view>
        <view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===4}" @click="setType(4)">审核进度</view>
      </view>
      <view class="title-bg" :class="{'title-bg-two':type===2,'title-bg-three':type===3,'title-bg-four':type===4}">
        <view class="bg-icon sys-background-dominant sys-radius-100"  ></view>
      </view>
    </view>
    <view class="data-box">
      <z-swiper v-model="list"  :options="options">
        <z-swiper-item :custom-style="{width:'88vw'}">
          <image class="image" src="/static/img/test/one.png" mode="widthFix">
          </image>
        </z-swiper-item>
        <z-swiper-item  :custom-style="{width:'88vw'}">
          <image class="image" src="/static/img/test/two.png" mode="widthFix">
          </image>
        </z-swiper-item>
        <z-swiper-item :custom-style="{width:'88vw'}" >
          <image class="image" src="/static/img/test/therr.png" mode="widthFix">
          </image>
        </z-swiper-item>

      </z-swiper>

    </view>


  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav.vue";

export default {
  components: {EnNav},
  data() {
    return {
      type:1,
      list:[
        'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
        'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
        'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
      ],
      options: {
        effect: 'coverflow',
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
      },
      slideCustomStyle: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '6rpx'
      },
    };
  },
  methods:{
    setType(type){
      if(type!==this.type){
        this.type=type
      }
    },
  }
}
</script>

<style lang="scss">
.page-box{
  min-height: 100vh;
  background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/app-serve/2024-4-18/gvd571v9s9.png?imageMogr2/quality/20");
  background-repeat: no-repeat;
  background-size: 100% auto;
  .top{
    position: relative;
    padding: 20rpx;
    .top-img{
      width: calc(100vw - 40rpx);
    }
    .top-status{
      position: absolute;
      top: 47rpx;
      right: 54rpx;
      width: 75rpx;
    }
  }
  .from-title{
    margin: 20rpx 20rpx 34rpx 20rpx;
    height: 90rpx;
    position: relative;
    background: linear-gradient( 180deg, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.86) 100%);
    .title-bg{
      position: absolute;
      top: 0;
      left: 0;
      transition: .5s ease;
      z-index: 1;
      background-image: url("/static/img/test/tab-bg.png");
      background-repeat: no-repeat;
      background-size: 100% auto;
      height:103rpx;
      width: 161rpx;
      .bg-icon{
        margin-top: 68rpx;
        margin-left: 63rpx;
        width: 45rpx;
        height: 4rpx;
      }
    }
    .title-bg-two{
      left: 25%;
      transition: .5s ease;
    }
    .title-bg-three{
      left: 50%;
      transition: .5s ease;
    }
    .title-bg-four{
      left: 75%;
      transition: .5s ease;
    }

    .title-list{
      display: flex;
      justify-content: space-between;
      z-index: 2;
      position: relative;
      .title-text{
        width: 25%;
        height: 90rpx;
        line-height: 90rpx;
        color: #333333;
      }
      .default-text{
        color: #10B261;
      }

    }

  }
  .data-box{
    margin-top: 20rpx;
    .image{
      width: 90vw;
    }
  }
}

</style>