designer-hub/packages/app/src/pages/mine/levels/index.vue

<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<script setup lang="ts">
import { levels } from '../../../core/libs/levels'
import { useRouter } from '../../../core/utils/router'
import { notify } from '@designer-hub/assets/src/assets/svgs'
const router = useRouter()
const current = ref(0)
const swiperList = ref(levels.map(({ bgImg }) => bgImg))
const items = ref([
  {
    icon: 'https://image.zhuchaohui.com/zhucaohui/95aa37b07a32a571fda86e8f8b89a2e54d1dd36d1250190ed8cfc68d638c3d43.png',
    title: '会员专属活动',
    subTitle: '参与平台内的会员活动',
  },
  {
    icon: 'https://image.zhuchaohui.com/zhucaohui/95aa37b07a32a571fda86e8f8b89a2e54d1dd36d1250190ed8cfc68d638c3d43.png',
    title: '国内外游学项目',
    subTitle: '参与平台国内外设计游学项目',
  },
  {
    icon: 'https://image.zhuchaohui.com/zhucaohui/95aa37b07a32a571fda86e8f8b89a2e54d1dd36d1250190ed8cfc68d638c3d43.png',
    title: '专属经纪人',
    subTitle: '认证成功即可拥有专属经纪人',
  },
  {
    icon: 'https://image.zhuchaohui.com/zhucaohui/95aa37b07a32a571fda86e8f8b89a2e54d1dd36d1250190ed8cfc68d638c3d43.png',
    title: '销售积分券',
    subTitle: '得1张200积分的销售积分券，使用时不限制...',
  },
])
</script>
<template>
  <div class="flex-grow flex flex-col gap-4 bg-gradient-to-b from-[#312c38] to-[#171322] px-3.5">
    <wd-navbar
      left-arrow
      safe-area-inset-top
      custom-class="mx--3.5 bg-transparent!"
      title="会员等级"
      :bordered="false"
      @left-click="router.back()"
    ></wd-navbar>
    <div class="flex gap-2 bg-gradient-to-r from-[#292331] to-[#35303b] rounded-md px-5 py-1">
      <wd-img width="22" height="22" :src="notify"></wd-img>
      <div class="text-[#f1d2c5] text-sm font-normal font-['PingFang SC'] leading-normal">
        会员成长等级保级规则通知
      </div>
    </div>
    <view class="card-swiper mx--3.5">
      <wd-swiper
        :autoplay="false"
        v-model:current="current"
        custom-indicator-class="custom-indicator-class"
        custom-image-class="custom-image"
        custom-next-image-class="custom-image-prev"
        custom-prev-image-class="custom-image-prev"
        :indicator="{ type: 'dots' }"
        :list="swiperList"
        previousMargin="24px"
        nextMargin="24px"
      ></wd-swiper>
    </view>
    <template v-for="({ icon, title, subTitle }, index) in items" :key="index">
      <div
        class="bg-[#201d28] rounded-2xl shadow border border-[#504951] border-solid flex gap-4 px-2.5 py-5.5"
      >
        <wd-img width="50" height="50" :src="icon"></wd-img>
        <div class="flex flex-col justify-between flex-1">
          <div class="text-[#f1d2c5] text-base font-normal font-['PingFang SC']">
            {{ title }}
          </div>
          <div class="text-white/40 text-xs font-normal font-['PingFang SC']">
            {{ subTitle }}
          </div>
        </div>
        <div></div>
      </div>
    </template>
  </div>
</template>
<style lang="scss">
.card-swiper {
  --wot-swiper-radius: 0;
  --wot-swiper-item-padding: 0 24rpx;
  --wot-swiper-nav-dot-color: #e7e7e7;
  --wot-swiper-nav-dot-active-color: #4d80f0;
  padding-bottom: 24rpx;
  :deep(.custom-indicator-class) {
    bottom: -16px;
  }
  :deep(.custom-image) {
    border-radius: 12rpx;
  }
  :deep(.custom-image-prev) {
    height: 168px !important;
  }
}
</style>