购买套餐

src/layout/personal/navBar.vue

@@ -37,6 +37,7 @@
           
           <!-- 头像用户名 -->
           <div class="d-flex align-center" v-if="getToken()">
+            <a href="/purchasePackage" class="cursor-pointer mr-5" style="color: #FB8C00;">{{ $t('sys.purchasePackage') }}</a>
             <span class="cursor-pointer">{{ $t('sys.news') }}</span>
             <v-menu open-on-hover>
               <template v-slot:activator="{ props }">

src/locales/en.js

@@ -67,6 +67,7 @@ export default {
       errMsg901: 'Demo mode, no write operations are possible!'
     },
     tourist: 'Tourist',
+    purchasePackage: 'Purchase Package',
     news: 'News',
     lookingJob: 'Looking For Job',
     recruit: 'Recruit',

src/locales/zh-CN.js

@@ -67,6 +67,7 @@ export default {
       errMsg901: '演示模式，无法进行写操作!'
     },
     tourist: '游客',
+    purchasePackage: '购买套餐',
     news: '消息',
     lookingJob: '我要找工作',
     recruit: '我要招聘',

src/router/modules/personal.js

@@ -119,5 +119,22 @@ const personal = [
       }
     ]
   },
+  {
+    path: '/purchasePackage',
+    component: Layout,
+    name: 'purchasePackage',
+    meta: {
+      title: '购买套餐'
+    },
+    children: [
+      {
+        path: '/purchasePackage',
+        component: () => import('@/views/personal/purchasePackage/index'),
+        meta: {
+          title: '购买套餐'
+        },
+      }
+    ]
+  },
 ]
 export default personal

src/views/personal/purchasePackage/index.vue

@@ -0,0 +1,33 @@
+<!-- 购买套餐 -->
+<template>
+  <div class="default-width white-bgc mb-8">
+    <div class="d-flex align-center justify-center pt-8">
+      <div
+        v-for="item in packages"
+        :key="item.id"
+        class="mx-3"
+        style="border: 1px solid var(--v-primary-base); border-radius: 5px; width: 220px;"
+      >
+        <div class="d-flex flex-column align-center">  
+          <div>{{ item.标题 }}</div>  
+          <div>￥{{ item.价格 }}</div>  
+          <div>每天低至{{ item.dailyPrice }}元</div>  
+        </div> 
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+defineOptions({name: 'personal-purchasePackage'})
+
+const packages = [
+  { id: '60', 标题: '60天双月卡', 价格: '108', dailyPrice: '1.8' },
+  { id: '30', 标题: '30天月卡', 价格: '58', dailyPrice: '2' },
+  { id: '14', 标题: '14天双周卡', 价格: '38', dailyPrice: '2.8' },
+]
+</script>
+<style lang="scss" scoped>
+
+</style>