Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/layout/enterprise.vue

@@ -24,14 +24,14 @@
         </div>
       </div>
     </div>
-    <Slider class="slider"></Slider>
+    <!-- <Slider class="slider"></Slider> -->
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'enterprise-layout-index' })
 import Headers from './company/navBar.vue'
-import Slider from './company/slider.vue'
+// import Slider from './company/slider.vue'
 import side from './company/side.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { watch, ref, computed } from 'vue'

src/views/recruit/enterprise/memberCenter/myMembers/components/package.vue

@@ -1,13 +1,144 @@
 <template>
-  <Package :showTitle="false" :type="1"></Package>
+  <div class="d-flex mt-5 list">
+    <div v-for="(val, i) in items" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(i)">
+      <div v-if="val.recommend" class="recommend">推荐</div>
+      <div class="text-center font-weight-bold">{{ val.title }}</div>
+      <div class="text-center my-5">
+        <div v-if="val.price && !val.cycle">￥ <span class="font-weight-bold font-size-20">{{ val.price }}</span> /年</div>
+        <div v-if="val.cycle">￥<span class="font-weight-bold font-size-18 mr-3 font-size-20">{{ val.price }}</span> {{ val.cycle }}</div>
+        <div v-if="val.customized" class="font-size-20 font-weight-bold">按需定制</div>
+      </div>
+      <v-divider></v-divider>
+      <div v-if="val.equity">
+        <div class="font-weight-bold my-3">权益</div>
+        <ul>
+          <li v-for="k in val.equity" :key="k">{{ k }}</li>
+        </ul>
+      </div>
+      <div v-else>
+        <h3 class="my-3">授权范围：</h3>
+        <div>联系客户经理为您定制</div>
+      </div>
+      <div class="text-center item-btn">
+        <v-btn color="error" variant="outlined" size="small" rounded @click="handleOpenMembership(val)">开通会员</v-btn>
+      </div>
+    </div>
+  </div>
+  <div class="my-10 tips">若注册资本超500万或特殊、行政事业单位，请联系<span class="font-weight-bold text-decoration-underline">高级客户经理</span>定制套餐</div>
+  <div class="scan color-666 d-flex flex-column align-center">
+    <div class="font-weight-bold">微信扫一扫</div>
+    <div class="font-size-15 my-3">高级客户经理为您报价（扫码后可电话联系）</div>
+    <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" width="170" height="170"></v-img>
+  </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'myAccount-package'})
-import Package from '@/views/mall/purchasePackage'
+import { ref } from 'vue'
 
+
+const active = ref(0)
+const items = ref([
+  {
+    title: '普通版',
+    price: 388,
+    equity: ['职位发布：20个', '发布岗位指定：无限']
+  },
+  {
+    title: '基础版',
+    price: 33000,
+    equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '背景调查及报告']
+  },
+  {
+    title: '筹备酒店套餐',
+    price: 33000,
+    recommend: true,
+    equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '弹窗广告：1周']
+  },
+  {
+    title: '运营酒店套餐',
+    price: 7000,
+    cycle: '6个月',
+    equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '专属职位推文']
+  },
+  {
+    title: '定制版',
+    customized: true
+  }
+])
+
+// click
+const handleClickItem = (i) => {
+  active.value = i
+}
+
+// 开通会员
+const handleOpenMembership = (val) => {
+  console.log(val, 'open-members')
+}
 </script>
 
 <style scoped lang="scss">
-
+.list {
+  width: 100%;
+}
+.list-item {
+  position: relative;
+  height: 400px;
+  width: calc((100% - 120px) / 5);
+  min-width: calc((100% - 120px) / 5);
+  max-width: calc((100% - 120px) / 5);
+  padding: 30px 20px;
+  border-radius: 14px;
+  margin-right: 30px;
+  color: #774e20;
+  background-color: #fafafa;
+  &:nth-child(5n) {
+    margin-right: 0;
+  }
+  .item-btn {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+ul li {
+  list-style: none;
+  font-size: 15px;
+  margin: 10px 0;
+  font-weight: 500;
+}
+.active {
+  background-color: rgba(255, 251, 248, 1);
+  border: 1px solid #f1b17a;
+  box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36);
+}
+:deep(.v-btn) {
+  border: 1px solid #bc8b55;
+  color: rgb(195 15 15) !important;
+}
+.tips {
+  height: 80px;
+  line-height: 80px;
+  background-color: #fffbf8;
+  border: 1px solid #f1b17a;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 15px;
+}
+.recommend {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 55px;
+  height: 26px;
+  line-height: 26px;
+  background-color: #ff8a04;
+  border-radius: 12px 0 18px 0;
+  font-weight: 600;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
 </style>

src/views/recruit/enterprise/memberCenter/myMembers/index.vue

@@ -1,6 +1,6 @@
 <!-- 购买套餐 -->
 <template>
-  <v-card class="card-box pa-3">
+  <v-card class="card-box pa-3" style="min-width: 1100px;">
     <v-tabs v-model="tab" align-tabs="center" color="primary" bg-color="#f7f8fa">
       <v-tab :value="0">套餐购买</v-tab>
       <v-tab :value="1">余额充值</v-tab>