feat: vip

src/pages.json

@@ -94,6 +94,15 @@
         "navigationBarBackgroundColor": "#FFFFFF",
         "backgroundColor": "#F5F5F5"
       }
+    },
+    {
+      "path": "pages/vip/vip",
+      "style": {
+        "navigationBarTitleText": "VIP会员",
+        "navigationBarTextStyle": "white",
+        "navigationBarBackgroundColor": "#000",
+        "backgroundColor": "#000"
+      }
     }
     // {
     //   "path": "pages/help/help_about",
@@ -272,6 +281,10 @@
         "name": "vip",
         "path": "pages/vip/index"
       },
+      {
+        "name": "VIP会员",
+        "path": "pages/vip/vip"
+      },
       {
         "name": "vip detail",
         "path": "pages/vip/detail",

src/pages/vip/vip.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="page">
+    <view class="card">
+      <view class="card-title">VIP会员</view>
+      <view calss="card-desc">开通VIP会员专享权益</view>
+      <view class="card-status">
+        已经开通 <button class="card-btn">立即开通</button>
+      </view>
+    </view>
+    <view class="list-title">VIP会员专享{{ list.length }}项权益</view>
+    <view class="list">
+      <view class="item" v-for="item in list" :key="item.name">
+        <image class="icon" :src="item.icon"></image>
+        {{ item.name }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "VipVip",
+  data() {
+    return {
+      id: 0,
+      list: [
+        {
+          title: "10000积分",
+          icon: require("@/assets/vip/icon-integral.png"),
+        },
+        {
+          title: "90团1000",
+          icon: require("@/assets/vip/icon-purchase.png"),
+        },
+        {
+          title: "85团100",
+          icon: require("@/assets/vip/icon-restaurant.png"),
+        },
+        {
+          title: "积分翻倍抵现",
+          icon: require("@/assets/vip/icon-double.png"),
+        },
+        {
+          title: "精选商户权益",
+          icon: require("@/assets/vip/icon-boutique.png"),
+        },
+        {
+          title: "停车优惠",
+          icon: require("@/assets/vip/icon-parking.png"),
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss">
+page {
+  background: #000;
+}
+.page {
+  background: url("~@/assets/vip/bg.png") no-repeat center top #000;
+  background-size: contain;
+  padding: 40rpx 20rpx;
+  color: rgb(251, 222, 190);
+}
+.card {
+  width: 710rpx;
+  height: 420rpx;
+  background: url("~@/assets/vip/card-vip.png") no-repeat center;
+  background-size: contain;
+  box-sizing: border-box;
+  padding: 40rpx;
+  color: rgb(251, 222, 190);
+  .card-title {
+    font-size: 64rpx;
+  }
+  .card-desc {
+    font-size: 28rpx;
+    margin-top: 20rpx;
+  }
+  .card-status {
+    margin-top: 100rpx;
+    text-align: right;
+    line-height: 92rpx;
+    font-size: 36rpx;
+  }
+  .card-btn {
+    color: rgb(3, 3, 3);
+    background: rgb(251, 222, 190);
+    display: inline-block;
+    padding: 0 50rpx;
+    border-radius: 100rpx;
+    font-weight: bold;
+    &::after {
+      display: none;
+    }
+  }
+}
+.list-title {
+  font-size: 36rpx;
+  margin-top: 40rpx;
+  text-align: center;
+  &::before,
+  &::after {
+    content: "";
+    display: inline-block;
+    width: 40rpx;
+    height: 40rpx;
+    background: url("~@/assets/vip/icon-crown.png") no-repeat center;
+    background-size: contain;
+    vertical-align: middle;
+    margin: 0 10rpx;
+  }
+}
+</style>