zcb_APP/pages/activateVIP/index.vue

<template>
  <view class="content pdx-48">
    <view class="top_bg pdx-48">
      <view class="w h-88 flex ai_center jc_center mgt-88 p-rel">
        <image
          @click="$navBack()"
          class="w-48 h-48 abs_left"
          src="/static/image/common/left_arrow_icon.png"
          mode="scaleToFill"
        />
        <view class="text-36 text-500 text-070202">开通会员</view>
      </view>

      <view class="head" @click="$navTo('/pages/personalProfile/index')">
        <view class="flex fd_c">
          <view class="text-36 text-070202 text-500">用户名称用户名称</view>
          <!-- <view class="vip_year_bg"> lv.1年 </view> -->
          <view class="vip_bg">普通会员</view>
        </view>
        <!-- 
			未登录时头像
			/static/image/my/no_login_avatar.png 
		  -->
        <image
          class="image"
          src="/static/image/my/my_default_avatar.png"
        ></image>
      </view>

      <view class="w h-96 flex ai_center mgt-42">
        <view
          v-for="(item, index) in menuList"
          :key="item"
          class="menu"
          :class="menuIndex === index ? 'check_menu' : 'default_menu'"
          @click="handleMenu(index)"
        >
          <view>{{ item }}</view>
          <view
            class="menu_line"
            :style="{
              backgroundColor:
                menuIndex === index ? ' #fe6505' : ' transparent',
            }"
          ></view>
        </view>
      </view>
    </view>

    <view style="width: 100vw; padding: 0 32rpx; margin-top: -62rpx">
      <view class="rights">
        <view class="title text-28 text-500 text-white">开通权益</view>
        <view class="rights_box w flex jc_between">
          <view
            class="rights_item flex fd_c w-128"
            v-for="item in rightsList"
            :key="item.icon"
          >
            <image class="w-72 h-72" :src="item.icon" mode="scaleToFill" />
            <view
              class="text text-20 text-400 text-7E7E7E"
              v-html="item.content"
            >
            </view>
          </view>
        </view>
      </view>
    </view>

    <button class="btn">立即开通</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: ["月度会员", "季度会员", "年度会员"],
      menuIndex: 0,
      rightsList: [
        {
          icon: "/static/image/vip/publish_tasks_icon.png",
          content: `
			发布任务<br>
			服务费<text class="text-500 text-FF9F38">13%</text>`,
        },
        {
          icon: "/static/image/vip/tools_use_icon.png",
          content: `
			工具使用优惠<br>
			折扣<text class="text-500 text-FF9F38">9折</text>`,
        },
        {
          icon: "/static/image/vip/give_icon.png",
          content: `
			赠送<text class="text-500 text-FF9F38">2小时</text>
			<br>置顶`,
        },
        {
          icon: "/static/image/vip/edit_tasks_icon.png",
          content: `
			发布/修改任务<br>
			数量限制<text class="text-500 text-FF9F38">10次</text>`,
        },
        {
          icon: "/static/image/vip/give_icon.png",
          content: `
			可发布类型:<br>
			<text class="text-500 text-FF9F38">高价悬赏</text>`,
        },
      ],
    };
  },
  computed: {},
  onLoad() {},
  methods: {
    handleMenu(index) {
      this.menuIndex = index;
    },
  },
};
</script>

<style lang="scss" scope>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top_bg {
  width: 100vw;
  height: 568rpx;
  flex-shrink: 0;
  // background: linear-gradient(to bottom, #ffd8bf, #ffffff);
  background: linear-gradient(180deg, #ffd8bf 10%, #fff 65%);

  .head {
    margin-top: 32rpx;
    height: 144rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .vip_icon {
      margin-top: 16rpx;
      width: 112rpx;
      height: 44rpx;
    }
    .image {
      width: 144rpx;
      height: 144rpx;
      border-radius: 50%;
    }
  }
}

.vip_year_bg {
  margin-top: 16rpx;
  width: 112rpx;
  height: 44rpx;
  background: url("/static//image/my/vip_year_bg.png");
  background-size: cover;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-family: "MiSans VF";
  font-size: 22rpx;
  font-weight: 500;
  letter-spacing: 0.66rpx;
  padding-left: 42rpx;
}

.vip_bg {
  margin-top: 16rpx;
  width: 144rpx;
  height: 48rpx;
  line-height: 40rpx;
  background: url("/static//image/my/vip_bg.png");
  background-size: cover;
  padding-left: 42rpx;
  color: #ffffff;
  font-family: "MiSans VF";
  font-size: 22rpx;
  font-weight: 500;
  letter-spacing: -0.66rpx;
}

.check_menu {
  color: #070202;
  font-size: 36rpx;
  font-weight: 600;
}

.default_menu {
  color: #7e7e7e;
  font-size: 32rpx;
  font-weight: 500;
}

.menu_line {
  margin-top: 8rpx;
  width: 32rpx;
  height: 10rpx;
}

.menu {
  margin-right: 48rpx;
  text-align: center;
  font-family: "MiSans VF";
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rights {
  width: 100%;
  height: 322rpx;
  border-radius: 24rpx 24rpx 0 0;
  background: linear-gradient(180deg, #ff6606 0%, #ff9a5c 100%);
  //   background: url("/static//image/vip/rights_bg.png");
  //   background-size: cover;
  //   padding:  20rpx 24rpx 40rpx 24rpx;
  position: relative;

  .title {
    position: absolute;
    top: 20rpx;
    left: 24rpx;
  }
  .rights_box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 244rpx;
    border-radius: 24rpx 24rpx 0 0;
    background: linear-gradient(180deg, #fff 0%, #ffffffe6 100%);

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7rpx;

    .rights_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .text {
        margin-top: 28rpx;
        text-align: center;
        letter-spacing: -0.66rpx;
        line-height: 1.4;
      }
    }
  }
}

.btn {
  position: absolute;
  left: 50%;
  bottom: 262rpx;
  transform: translateX(-50%);
  width: 88%;
  height: 96rpx;
  line-height: 96rpx;
  flex-shrink: 0;
  border-radius: 64rpx;
  background: #fe6505;
  color: #ffffff;
  text-align: center;
  font-family: "MiSans VF";
  font-size: 36rpx;
  font-weight: 500;
}
</style>