|
@@ -1,13 +1,26 @@
|
|
<!-- 购买套餐 -->
|
|
<!-- 购买套餐 -->
|
|
<template>
|
|
<template>
|
|
<v-card class="card-box pa-3" style="min-width: 1100px;">
|
|
<v-card class="card-box pa-3" style="min-width: 1100px;">
|
|
- <v-tabs v-model="tab" align-tabs="center" color="rgb(195 15 15)">
|
|
|
|
|
|
+ <!-- <v-tabs v-model="tab" align-tabs="center" color="rgb(195 15 15)">
|
|
<v-tab :value="0" class="font-weight-bold font-size-18">套餐列表</v-tab>
|
|
<v-tab :value="0" class="font-weight-bold font-size-18">套餐列表</v-tab>
|
|
<v-tab :value="1" class="font-weight-bold font-size-18">当前套餐</v-tab>
|
|
<v-tab :value="1" class="font-weight-bold font-size-18">当前套餐</v-tab>
|
|
</v-tabs>
|
|
</v-tabs>
|
|
<Package v-if="tab === 0"></Package>
|
|
<Package v-if="tab === 0"></Package>
|
|
<div v-if="tab === 1">
|
|
<div v-if="tab === 1">
|
|
<empty :elevation="false" message="无购买的套餐内容" class="mt-15"></empty>
|
|
<empty :elevation="false" message="无购买的套餐内容" class="mt-15"></empty>
|
|
|
|
+ </div> -->
|
|
|
|
+
|
|
|
|
+ <div class="d-flex list">
|
|
|
|
+ <div v-for="(val, index) in list" :key="index" class="list-item text-center cursor-pointer" :class="{'active': index === active}" @click="active = index">
|
|
|
|
+ <h4 class="mt-5">{{ val.title }}</h4>
|
|
|
|
+ <div class="color-primary">
|
|
|
|
+ <span>¥</span>
|
|
|
|
+ <span style="font-size: 35px;">{{ val.price }}</span>
|
|
|
|
+ <span> 元</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="text-decoration-line-through color-666">原价:{{ val.originalPrice }}元</div>
|
|
|
|
+ <div class="font-size-14 color-999 mt-3 periodValidity py-2">有效期:120天</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</v-card>
|
|
</template>
|
|
</template>
|
|
@@ -15,13 +28,42 @@
|
|
<script setup>
|
|
<script setup>
|
|
defineOptions({name: 'enterprise-memberCenter-myAccount'})
|
|
defineOptions({name: 'enterprise-memberCenter-myAccount'})
|
|
import { ref } from 'vue'
|
|
import { ref } from 'vue'
|
|
-import Package from './components/package.vue'
|
|
|
|
|
|
+// import Package from './components/package.vue'
|
|
|
|
+
|
|
|
|
+// const tab = ref(0)
|
|
|
|
|
|
-const tab = ref(0)
|
|
|
|
|
|
+const active = ref(0)
|
|
|
|
+const list = [
|
|
|
|
+ { title: '1个职位', price: 399, originalPrice: 599 },
|
|
|
|
+ { title: '2个职位', price: 599, originalPrice: 799 },
|
|
|
|
+ { title: '3个职位', price: 799, originalPrice: 999 },
|
|
|
|
+ { title: '5个职位', price: 999, originalPrice: 1299 }
|
|
|
|
+]
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
:deep(.v-slide-group__content) {
|
|
:deep(.v-slide-group__content) {
|
|
background: linear-gradient(45deg, #ff8a04, transparent);
|
|
background: linear-gradient(45deg, #ff8a04, transparent);
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.list {
|
|
|
|
+ &-item {
|
|
|
|
+ width: 25%;
|
|
|
|
+ height: 172px;
|
|
|
|
+ background-color: #fcfcfd;
|
|
|
|
+ border: 1px solid #f3f3f3;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ margin-right: 12px;
|
|
|
|
+ &:last-child {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ .periodValidity {
|
|
|
|
+ background-color: #f2f4f7;
|
|
|
|
+ border-radius: 0 0 8px 8px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .active {
|
|
|
|
+ border: 1px solid #00897B;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|