zm/taimed-international-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新：增加课程和图书VIP购买及“我的”主页vip身份显示

Browse Source
This commit is contained in:
chenghuan
2025-11-27 14:19:51 +08:00
parent 509f735493
commit 7062e675f6
20 changed files with 1117 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/course/details/course.vue
View File

@@ -13,7 +13,7 @@
</view>
<!-- 课程信息 -->
<CourseInfo v-if="courseDetail" :course="courseDetail" class="pt-[40px]" />
<CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />
<!-- 课程内容包装器 -->
<view class="course-content-wrapper">
@@ -432,10 +432,8 @@ const confirmPurchase = () => {
* 跳转到VIP页面
*/
const goToVip = () => {
uni.showToast({ icon: 'none', title: 'VIP功能开发中' })
return false
uni.navigateTo({
url: '/pages/user/wallet/index'
url: '/pages/vip/course'
})
}

152
pages/order/vipConfirm.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<view>
<!-- 自定义导航栏 -->
<nav-bar :title="$t('order.confirmTitle')" />
<!-- 确认订单组件 -->
<Confirm :goodsList="goodsList" :userInfo="userInfo" :orderType="orderType" :allowPointPay="isLengthen" :backStep="orderType === 'abroadVip' ? 2 : 1">
<!-- 商品列表内容 -->
<template #goodsList>
<view class="goods-item" v-for="goods in goodsList" :key="goods.productId">
<!-- VIP优惠标签 -->
<wd-tag v-if="goods.isVipPrice === 1 && goods.vipPrice" type="danger" mark custom-class="vip-badge">{{ $t('order.vipLabel') }}</wd-tag>
<!-- 商品图片 -->
<view class="goods-image">
<image
:src="goods.productImages || '/static/nobg.jpg'"
mode="aspectFit"
/>
</view>
<!-- 商品信息 -->
<view class="goods-info">
<text class="goods-name">{{ goods.productName }}</text>
<!-- 商品价格组件 -->
<GoodsPrice :goods="goods" />
</view>
</view>
</template>
</Confirm>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { orderApi } from '@/api/modules/order'
import type { IOrderGoods } from '@/types/order'
import Confirm from '@/components/order/Confirm.vue';
import GoodsPrice from '@/components/order/GoodsPrice.vue';
/**
* 获取用户信息
*/
const userInfo = ref({})
const getUserInfo = async () => {
const res = await orderApi.getUserInfo()
userInfo.value = res.result || {}
}
// 商品列表
const goodsList = ref<IOrderGoods[]>([])
const isLengthen = ref<boolean>(false)
const orderType = ref<string>('')
/**
* 页面加载
*/
onLoad(async () => {
try {
// 获取商品列表
uni.$on('selectedGoods', (data: IOrderGoods) => {
console.log('监听到传入的商品数据:', data)
isLengthen.value = data.state !== null
orderType.value = data.orderType || ''
goodsList.value = [ data ]
})
// 获取用户信息
getUserInfo()
} catch (error) {
console.error('解析商品数据失败:', error)
uni.showToast({
title: '商品数据错误',
icon: 'none'
})
}
})
onUnload(() => {
uni.$off('selectedGoods')
})
</script>
<style lang="scss" scoped>
.goods-item {
position: relative;
display: flex;
padding-bottom: 20rpx;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
.vip-badge {
position: absolute;
top: 20rpx;
left: 0;
z-index: 1;
}
.goods-image {
width: 140rpx;
height: 140rpx;
flex-shrink: 0;
margin-right: 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.goods-info {
flex: 1;
display: flex;
flex-direction: column;
.goods-name {
font-size: 28rpx;
color: #333;
line-height: 1.4;
margin-bottom: 10rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.quantity-row {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999;
.quantity-label {
margin-right: 10rpx;
}
.quantity-control {
display: flex;
align-items: center;
}
}
}
}
</style>

103
pages/user/index.vue
View File

@@ -23,25 +23,28 @@
<!-- VIP订阅卡片 -->
<view class="vip-card-section">
<view class="vip-card">
用户VIP功能重写中。。。
<!-- <view v-if="vipInfo.id" class="vip-info">
<text class="label">{{ $t('user.vip') }}</text>
<text class="value">{{ vipInfo.endTime ? vipInfo.endTime.split(' ')[0] : '' }}</text>
</view>
<wd-button
v-else
type="success"
size="small"
@click="goSubscribe"
>
{{ $t('user.subscribe') }}
</wd-button> -->
<view class="vip-card-title">{{ $t('user.vip') }}</view>
<view class="vip-card-content">
<view class="vip-item-list">
<view v-if="vipInfo.length > 0" v-for="vip in vipInfo">{{ vipTypeDict[vip.type] }}（有效期到 {{ parseTime(vip.endTime, '{y}-{m}-{d}') }}）</view>
<view v-else>办理课程VIP，畅享更多权益</view>
</view>
<wd-button v-if="vipInfo.length > 0" plain type="primary" size="small" @click="goSubscribe">{{ $t('vip.renewal') }}</wd-button>
<wd-button v-else plain type="primary" size="small" @click="goSubscribe">{{ $t('vip.openVip') }}</wd-button>
</view>
<view class="vip-card-content">
<view class="vip-item-list">
<view v-if="vipInfoEbook.length > 0" v-for="vip in vipInfoEbook">电子书VIP{{ vipTypeDict[vip.type] }}（有效期到 {{ parseTime(vip.endTime, '{y}-{m}-{d}') }}）</view>
<view v-else>办理电子书VIP，畅享更多权益</view>
</view>
<wd-button v-if="!vipInfoEbook.length" plain type="primary" size="small" @click="goSubscribe">{{ $t('vip.openVip') }}</wd-button>
</view>
</view>
</view>
<!-- 我的资产 -->
<view class="vip-card-section wallet-section">
<view class="vip-card wallet_l">
<view class="assets-card-section wallet-section">
<view class="assets-card wallet_l">
<view class="assets">
<view @click="goVirtualList">
<view class="assets_row">{{ t('global.coin') }}</view>
@@ -77,13 +80,15 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useSysStore } from '@/stores/sys'
import { getUserInfo, getVipInfo } from '@/api/modules/user'
import type { IVipInfo } from '@/types/user'
import { useI18n } from 'vue-i18n'
import { getNotchHeight } from '@/utils/system'
import { parseTime } from '@/utils/index'
import { t } from '@/utils/i18n'
const { t } = useI18n()
const userStore = useUserStore()
const sysStore = useSysStore()
// 默认头像
const defaultAvatar = '/static/home_icon.png'
@@ -92,11 +97,11 @@
const userInfo = computed(() => userStore.userInfo)
// VIP信息
const vipInfo = ref<IVipInfo>({
id: 0,
endTime: '',
vipType: 0
})
const vipInfo = computed(() => userStore.userVips)
const vipInfoEbook = computed(() => userStore.userEbookVip)
// VIP类型字典
const vipTypeDict = sysStore.vipTypeDict
// 平台信息
const platform = ref('')
@@ -148,16 +153,9 @@
*/
const getData = async () => {
// 获取用户信息
const userRes = await getUserInfo()
console.log(userRes);
if (userRes.user) {
userStore.setUserInfo(userRes.user)
}
// 获取VIP信息
const vipRes = await getVipInfo()
if (vipRes.vipInfo) {
vipInfo.value = vipRes.vipInfo
const userInfoRes = await getUserInfo()
if (userInfoRes.result) {
userStore.setUserInfo(userInfoRes.result)
}
}
@@ -184,7 +182,7 @@
*/
const goSubscribe = () => {
uni.navigateTo({
url: '/pages/user/wallet/index'
url: '/pages/vip/book'
})
}
@@ -298,12 +296,47 @@
}
}
// vip 卡片
.vip-card-section {
padding: 0 20rpx;
margin-bottom: 20rpx;
.vip-card {
background: linear-gradient(135deg, #3E7EF5 0%, #9134EA 100%);
border-radius: 15rpx;
padding: 26rpx 30rpx 10rpx;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
.vip-card-title {
font-size: 32rpx;
color: #fff;
font-weight: bold;
margin-bottom: 20rpx;
}
.vip-card-content {
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 30rpx;
margin-bottom: 20rpx;
}
.vip-item-list {
font-size: 28rpx;
color: #fff;
font-weight: bold;
}
}
}
.assets-card-section {
padding: 0 20rpx;
margin-bottom: 20rpx;
}
.vip-card {
.assets-card {
background: #fff;
border-radius: 15rpx;
padding: 40rpx;
@@ -312,7 +345,7 @@
justify-content: space-between;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.vip-info {
.assets-info {
text-align: center;
.label {

400
pages/vip/book.vue Normal file
View File

@@ -0,0 +1,400 @@
<template>
<view class="page-wrapper">
<!-- 自定义导航栏 -->
<nav-bar :title="$t('vip.bookVip')" />
<!-- VIP介绍卡片 -->
<view class="vip-intro-card">
<view class="vip-intro-header">
<text class="vip-intro-title">📚 读书VIP特权</text>
<!-- <text class="vip-intro-subtitle">畅享海量电子图书</text> -->
</view>
<view class="vip-intro-features">
<view class="feature-item">
<wd-icon name="check-circle" size="16px" color="#258feb" />
<text>畅享海量电子图书</text>
</view>
</view>
</view>
<!-- VIP套餐列表 -->
<view class="vip-packages">
<text class="section-title">选择套餐</text>
<view class="package-grid">
<view
class="package-card"
:class="{ 'package-card--popular': vip.isRecommend }"
v-for="(vip, index) in vipList"
:key="index"
@click="selectPackage(vip)"
>
<view class="package-header">
<view class="package-title-wrapper">
<text class="package-title package-title--vip">{{ vip.title }}</text>
</view>
</view>
<view class="package-price">
<text class="price-amount">{{ vip.money }}</text>
<text class="price-unit">{{ $t('global.coin') }}</text>
</view>
<view class="package-duration">
<view class="duration-text">{{ vip.days }} {{ $t('global.days') }}</view>
<view class="daily-price">{{ $t('vip.daily') }}{{ Math.round(vip.money / vip.days * 100) / 100 }}{{ $t('global.coin') }}</view>
</view>
<wd-button
type="primary"
size="small"
class="package-btn"
@click="handlePurchase(vip)"
>
{{ $t('vip.openVip') }}
</wd-button>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { vipApi } from '@/api/modules/vip'
const userStore = useUserStore()
const vipList = ref([])
const getVipList = async () => {
const res = await vipApi.getBookVipList()
// 模拟推荐标识，实际项目中应该从后端获取
vipList.value = res.lableList || []
}
// 选择套餐
const selectPackage = (vip: any) => {
// 这里可以添加跳转到订单确认页面的逻辑
uni.showToast({
title: `已选择: ${vip.title}`,
icon: 'none'
})
}
// 处理购买
const handlePurchase = (vip: any) => {
const selectedGoods = {
productId: vip.id,
productName: `${vip.title}`,
price: vip.money,
productImages: '/static/vip.png',
state: null,
orderType: 'abroadVip'
}
uni.navigateTo({
url: `/pages/order/vipConfirm`,
success: () => {
setTimeout(() => {
uni.$emit('selectedGoods', selectedGoods)
}, 100)
}
})
}
onShow(() => {
getVipList()
})
</script>
<style lang="scss" scoped>
.page-wrapper {
padding: 20rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
// VIP介绍卡片
.vip-intro-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20rpx;
padding: 30rpx 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10rpx);
}
.vip-intro-header {
text-align: center;
}
.vip-intro-title {
display: block;
font-size: 40rpx;
font-weight: bold;
color: #333;
margin-bottom: 10rpx;
}
.vip-intro-subtitle {
display: block;
font-size: 28rpx;
color: #666;
}
.vip-intro-features {
margin-top: 20rpx;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
margin: 10rpx;
font-size: 28rpx;
color: #555;
}
.feature-item text {
margin-left: 8rpx;
}
// 套餐区域
.vip-packages {
margin-bottom: 30rpx;
}
.section-title {
display: block;
font-size: 32rpx;
font-weight: bold;
color: #fff;
margin-bottom: 20rpx;
text-align: center;
}
.package-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 20rpx;
}
.package-card {
flex: 0 0 calc(50% - 10rpx);
background: rgba(255, 255, 255, 0.95);
border-radius: 20rpx;
padding: 30rpx;
box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10rpx);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
&:active {
transform: scale(0.98);
}
}
.package-card--popular {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
border: 2rpx solid #ff6b6b;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-left: 60rpx solid transparent;
border-top: 60rpx solid #ff6b6b;
}
}
.package-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
// .package-title-wrapper {
// position: relative;
// display: inline-block;
// }
.package-title {
font-size: 36rpx;
font-weight: bold;
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: inline-block;
width: 3em;
text-align: center;
padding: 8rpx 0;
border-radius: 12rpx;
transition: all 0.3s ease;
}
.package-title--vip {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%);
color: #8b4513;
box-shadow:
0 4rpx 15rpx rgba(255, 215, 0, 0.6),
0 0 20rpx rgba(255, 215, 0, 0.4),
inset 0 2rpx 0 rgba(255, 255, 255, 0.3);
border: 1rpx solid rgba(255, 215, 0, 0.5);
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}
.package-title--popular {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%);
color: #8b4513;
box-shadow:
0 6rpx 20rpx rgba(255, 215, 0, 0.8),
0 0 30rpx rgba(255, 215, 0, 0.6),
inset 0 2rpx 0 rgba(255, 255, 255, 0.4);
border: 2rpx solid rgba(255, 215, 0, 0.7);
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
font-size: 38rpx;
}
.title-decoration {
position: absolute;
top: -10rpx;
right: -10rpx;
width: 20rpx;
height: 20rpx;
background: linear-gradient(45deg, #ffd700, #ffed4e);
border-radius: 50%;
animation: decorationPulse 2s ease-in-out infinite;
z-index: 1;
}
@keyframes crownFloat {
0%, 100% { transform: translateY(0rpx); }
50% { transform: translateY(-4rpx); }
}
@keyframes starSparkle {
0%, 100% {
transform: scale(1) rotate(0deg);
filter: brightness(1);
}
50% {
transform: scale(1.2) rotate(180deg);
filter: brightness(1.3);
}
}
@keyframes decorationPulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.3);
opacity: 1;
}
}
.popular-badge {
background: #ff6b6b;
padding: 4rpx 12rpx;
border-radius: 20rpx;
}
.popular-text {
color: #fff;
font-size: 20rpx;
font-weight: bold;
}
.package-price {
text-align: center;
margin-bottom: 20rpx;
}
.price-amount {
font-size: 48rpx;
font-weight: bold;
color: #ff6b6b;
}
.price-unit {
font-size: 28rpx;
color: #666;
margin-left: 8rpx;
}
.package-duration {
margin-bottom: 20rpx;
padding: 15rpx;
background: rgba(102, 126, 234, 0.1);
border-radius: 12rpx;
text-align: center;
}
.duration-text {
font-size: 28rpx;
color: #333;
font-weight: bold;
margin-bottom: 10rpx;
}
.daily-price {
font-size: 24rpx;
color: #666;
}
.package-features {
margin-bottom: 30rpx;
}
.feature-dot {
font-size: 24rpx;
color: #555;
margin-bottom: 10rpx;
padding-left: 20rpx;
position: relative;
&::before {
content: '•';
position: absolute;
left: 0;
color: #667eea;
font-weight: bold;
}
}
.package-btn {
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none !important;
border-radius: 50rpx !important;
font-size: 28rpx !important;
font-weight: bold;
padding: 30rpx !important;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
}
}
.package-btn--popular {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important;
}
// 响应式设计
@media (max-width: 480px) {
.package-grid {
grid-template-columns: 1fr;
}
}
</style>

251
pages/vip/course.vue
View File

@@ -0,0 +1,251 @@
<template>
<view class="page-wrapper">
<!-- 自定义导航栏 -->
<nav-bar :title="$t('vip.courseVip')" />
<view
class="info"
:class="{
'vip-item-special': item.type == 1 || item.type == 2,
'vip-item-overdue': item.state == 1,
'vip-item-special-effective': (item.type == 1 || item.type == 2) && item.state == 0,
'vip-item-ordinary-effective': item.type != 1 && item.type != 2 && item.state == 0,
}"
v-for="(item, index) in list"
:key="index"
>
<!-- 购买按钮 -->
<wd-button
type="error"
size="small"
plain
class="vip-item-btn"
@click="handlePurchase(item)"
>
{{ item.state == null ? '去办理' : '去续费' }}
</wd-button>
<!-- vip标志 -->
<view>
<text class="vip-item-title">{{ item.title }}</text>
<text v-if="item.tip && item.tip < 100">
<wd-icon name="warning" size="14px" color="#ff1f00"/> 还有{{ item.tip }}天到期
</text>
<text v-if="item.state == 1">
<wd-icon name="warning" size="14px" color="#999"/> 已过期
</text>
</view>
<view class="info-row pt-1">
<text class="info-label">课程价格：</text>
<view class="info-content">一年<text class="course-price">{{ item.originalPrice || 0 }}</text>天医币</view>
</view>
<view class="info-row">
<text class="info-label">
<template v-if="item.state !== null">延期价格：</template>
<template v-else>{{ `${item.type == 1 || item.type == 2 ? '超级' : ''}VIP价格：` }}</template>
</text>
<view class="info-content">
<text
class="vip-product"
v-for="(item_price, index_price) in (item.yanqiList ?? item.vcbList)"
:key="index_price"
@click="openorderModal(item, index_price)"
>
{{ item_price.year }}年<text>{{ item_price.rebateFee }}</text>{{ t('global.coin') }}
</text>
</view>
</view>
<view class="info-row">
<text class="info-label" style="display: block">{{ `${item.type == 1 || item.type == 2 ? '超级' : ''}VIP权限：` }}</text>
<view class="info-content" v-html="vipIntro[item.type]"></view>
</view>
</view>
<!-- 商品选择器 -->
<GoodsSelector
:show="showGoodsSelector"
:goods="goodsList"
@select="handleGoodsSelect"
@confirm="handleGoodsConfirm"
@close="closeGoodsSelector"
/>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { vipApi } from '@/api/modules/vip'
import { t } from '@/utils/i18n'
import type { IVipItem, IVipItemProduct } from '@/types/vip'
import type { IGoods } from '@/types/order'
import GoodsSelector from '@/components/order/GoodsSelector.vue'
const vipIntro = {
1: '<p>无限制观看中医学、中西汇通学、针灸学、肿瘤学四个板块任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">8折</b>优惠。</p>',
2: '<p>无限制观看国学与心理学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">8折</b>优惠。</p>',
4: '<p>无限制观看中医任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
5: '<p>无限制观看针灸任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
6: '<p>无限制观看肿瘤学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
7: '<p>无限制观看国学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
8: '<p>无限制观看心理学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
9: '<p>无限制观看中医学板块任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>'
}
// 获取VIP列表
const list = ref<IVipItem[]>([])
const getData = async () => {
const res = await vipApi.getVipBuyConfigList()
list.value = res.res
}
onShow(() => {
getData()
})
// 商品选择
const showGoodsSelector = ref(false)
const goodsList = ref<IGoods[]>([])
const selectedGoods = ref<IGoods | null>(null)
/**
* 打开商品选择器
*/
const handlePurchase = async (item: IVipItem) => {
const currentVipProductList = item[item.state == null ? 'vcbList' : 'yanqiList']
goodsList.value = currentVipProductList.map((e: IVipItemProduct) => {
return {
productId: e.id,
productName: `${e.title} ${e.year}年`,
price: item.state == null ? e.fee : e.rebateFee,
productImages: '/static/vip.png',
state: item.state,
orderType: 'vip'
}
})
showGoodsSelector.value = true
}
/**
* 关闭商品选择器
*/
const closeGoodsSelector = () => {
showGoodsSelector.value = false
}
// 处理选择商品
const handleGoodsSelect = (data: IGoods) => {
selectedGoods.value = data
}
// 购买商品
const handleGoodsConfirm = () => {
uni.navigateTo({
url: `/pages/order/vipConfirm`,
success: () => {
setTimeout(() => {
uni.$emit('selectedGoods', selectedGoods.value)
}, 100)
}
})
}
</script>
<style lang="scss" scoped>
.page-wrapper {
padding: 20rpx;
}
.info {
width: 100%;
padding: 20rpx 30rpx;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 5px 0px #a7bbe4;
margin-bottom: 20rpx;
position: relative;
font-size: 28rpx;
.info-row {
display: flex;
margin-bottom: 3px;
font-size: 28rpx;
line-height: 40rpx;
&:last-child {
margin-bottom: 0;
}
}
.info-label {
display: inline-block;
white-space: nowrap;
font-weight: bold;
}
.info-content {
display: inline-block;
}
}
.course-price {
font-size: 34rpx !important;
color: #258feb;
font-weight: bold;
text-decoration: line-through;
font-style: italic;
padding: 0 5rpx;
}
.vip-product {
display: inline-block;
color: #ff1f00;
border: 1rpx solid #ff1f00;
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 10rpx;
padding: 0 10rpx;
}
.vip-item-btn {
position: absolute !important;
right: 20rpx;
top: 20rpx;
padding: 2rpx 10rpx !important;
height: auto !important;
line-height: 1.5 !important;
border-radius: 5px !important;
}
.vip-item-title {
display: inline-block;
font-size: 24rpx;
font-weight: bold;
line-height: 1;
color: #fff;
padding: 10rpx 12rpx;
border-radius: 15rpx;
background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
}
// 超级vip
.vip-item-special {
.vip-item-title {
font-size: 26rpx;
background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
}
}
// 已过期
.vip-item-overdue{
background: rgba(220, 223, 225, 0.9) !important;
opacity: 0.75;
.vip-item-title {
background-image: linear-gradient(90deg, #999 0%, #ccc 100%);
color: #000;
}
}
// 普通vip生效中
.vip-item-ordinary-effective {
background-color: rgba(64, 148, 222, 0.3) !important;
}
// 超级vip生效中
.vip-item-special-effective {
background: rgba(227, 120, 125, 0.3) !important;
}
</style>