完善功能
This commit is contained in:
@ -10,7 +10,7 @@
|
||||
<view class="kt-eg-name">{{ item.eg_name }}</view>
|
||||
<view class="kt-name">{{ item.name }}</view>
|
||||
<view class="kt-btn-bg">
|
||||
<view>立即开通</view>
|
||||
<view :class="item.order ? 'kt-txt2' : 'kt-txt1'">{{ item.order ? '续费' : '立即开通' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -94,9 +94,13 @@ page {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
|
||||
& view {
|
||||
& .kt-txt1 {
|
||||
padding-left: 60rpx;
|
||||
}
|
||||
|
||||
& .kt-txt2 {
|
||||
padding-left: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<view class="info-name" style="position: absolute; top: 40rpx; left: 40rpx;">{{ info.eg_name }}
|
||||
</view>
|
||||
<view class="info-name" style="position: absolute; top: 100rpx; left: 40rpx;">{{ info.name }}</view>
|
||||
<view v-if="info.order.end_time && id == info.order.group_id" style="position: absolute; bottom: 68rpx; right: 40rpx; display: flex; align-items: center;">
|
||||
<view v-if="info.order && info.order.end_time && id == info.order.group_id" style="position: absolute; bottom: 68rpx; right: 40rpx; display: flex; align-items: center;">
|
||||
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit">
|
||||
</image>
|
||||
<text style="color: #834B08;font-weight: bold;">有效期:{{ info.order.end_time }}到期</text>
|
||||
@ -81,8 +81,18 @@
|
||||
|
||||
<!-- Bottom Button -->
|
||||
<view class="bottom-bar">
|
||||
<view class="btn-submit" @click="hanldeTakePhoto" v-if="info.order.end_time && id == info.order.group_id">录入人脸</view>
|
||||
<view class="btn-submit" @click="handleSubmit" v-else>立即开通</view>
|
||||
<!-- 两个按钮并排显示的情况 -->
|
||||
<view class="btn-group" v-if="result && result.status == 1 && id == result.group_id && info.order && info.order.id">
|
||||
<view class="btn-submit btn-half btn-secondary" @click="hanldeTakePhoto">人脸信息</view>
|
||||
<view class="btn-submit btn-half" @click="handleSubmit">立即续费</view>
|
||||
</view>
|
||||
|
||||
<!-- 单个按钮显示的情况 -->
|
||||
<template v-else>
|
||||
<view class="btn-submit btn-disabled" v-if="result && result.status == 0 && id == result.group_id">审核中</view>
|
||||
<view class="btn-submit" @click="handleSubmit" v-else-if="result && result.status == 2 && id == result.group_id">重新提交</view>
|
||||
<view class="btn-submit" @click="handleSubmit" v-else>立即开通</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 完善信息提示弹窗 -->
|
||||
@ -125,10 +135,10 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="buy-modal-tips">
|
||||
<view class="buy-modal-tips" v-if="!isRenewal">
|
||||
开通成功之后,需要录入人脸信息
|
||||
</view>
|
||||
<view class="buy-modal-btn" @click="confirmBuy">立即开通</view>
|
||||
<view class="buy-modal-btn" @click="confirmBuy">{{ isRenewal ? '立即续费' : '立即开通' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -167,6 +177,8 @@ export default {
|
||||
end_time: '', // 会员到期时间
|
||||
},
|
||||
}, // 套餐详情数据
|
||||
result: null, // 审核数据
|
||||
isRenewal: false, // 是否为续费
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -181,12 +193,30 @@ export default {
|
||||
this.comboType = args.type || 'adult'
|
||||
this.id = args.id
|
||||
this.handleGetDetails();
|
||||
this.handleInit();
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
handleInit() {
|
||||
let self = this;
|
||||
self._post(
|
||||
'ground.group/getGroupData',
|
||||
{
|
||||
group_id: self.id
|
||||
},
|
||||
result => {
|
||||
self.result = result.data
|
||||
console.log("🚀 ~ self.result:", self.result)
|
||||
},
|
||||
false,
|
||||
() => {
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
handleGetDetails() {
|
||||
let self = this;
|
||||
self._post(
|
||||
@ -194,6 +224,7 @@ export default {
|
||||
{ id: self.id },
|
||||
result => {
|
||||
self.info = result.data;
|
||||
console.log("🚀 ~ self.info:", self.info)
|
||||
},
|
||||
false,
|
||||
() => {
|
||||
@ -204,64 +235,55 @@ export default {
|
||||
handleSubmit() {
|
||||
let self = this;
|
||||
|
||||
// 判断之前是否开通过任意一张会员卡,如果开通过且没有过期,提示"您已购买过套餐卡,无需重复购买"
|
||||
if (self.info.order?.end_time) {
|
||||
uni.showToast({ title: '您已购买过套餐卡,无需重复购买', icon: 'none' });
|
||||
if (self.info.order && self.info.order.id) {
|
||||
self.isRenewal = true;
|
||||
} else {
|
||||
self.isRenewal = false;
|
||||
}
|
||||
|
||||
if (!self.result) {
|
||||
// 没有填写过信息,弹出完善信息提示弹窗
|
||||
self.showInfoModal = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
//TODO 如果信息审核没有通过,uni.showToast提示"信息审核没通过,请耐心等待"
|
||||
// 成人卡不需要提交资料
|
||||
// if (self.id == 2) {
|
||||
// self.showBuyModal = true;
|
||||
// } else {
|
||||
// 其他卡需要先判断是否提交过资料,如果没有提交过资料,弹出提示完善信息的弹窗;如果提交过资料,根据审核状态提示不同的消息或者弹窗
|
||||
self._post(
|
||||
'ground.group/getGroupData',
|
||||
null,
|
||||
result => {
|
||||
console.log("🚀 ~ result.data:", result.data)
|
||||
if (!result.data) {
|
||||
// 没有填写过信息,弹出完善信息提示弹窗
|
||||
self.showInfoModal = true;
|
||||
return false;
|
||||
}
|
||||
if (self.result.status == 0) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({ title: '信息审核中,请耐心等待', icon: 'none' });
|
||||
}, 100);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (result.data.status == 0) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({ title: '信息审核中,请耐心等待', icon: 'none' });
|
||||
}, 100);
|
||||
return false;
|
||||
}
|
||||
if (self.result.status == 2) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({ title: '审核失败,请重新提交', icon: 'none' });
|
||||
}, 100);
|
||||
// 没有填写过信息,弹出完善信息提示弹窗
|
||||
self.showInfoModal = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (result.data.status == 2) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({ title: '审核失败,请重新提交', icon: 'none' });
|
||||
}, 100);
|
||||
// 没有填写过信息,弹出完善信息提示弹窗
|
||||
self.showInfoModal = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (result.data.status == 1) {
|
||||
// 已经审核通过,弹出开通会员弹窗
|
||||
self.showBuyModal = true;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
false,
|
||||
() => {
|
||||
}
|
||||
);
|
||||
// }
|
||||
if (self.result.status == 1) {
|
||||
// 已经审核通过,弹出开通会员弹窗
|
||||
self.showBuyModal = true;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
closeInfoModal() {
|
||||
this.showInfoModal = false;
|
||||
},
|
||||
goToFillInfo() {
|
||||
this.showInfoModal = false;
|
||||
let self = this;
|
||||
self.showInfoModal = false;
|
||||
uni.navigateTo({
|
||||
url: '/bundle/combo/info?id=' + this.id
|
||||
url: '/bundle/combo/info?id=' + self.id,
|
||||
events:{
|
||||
data: (e) => {
|
||||
if (e.notice == 'success') {
|
||||
self.handleInit()
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
closeBuyModal() {
|
||||
@ -275,7 +297,7 @@ export default {
|
||||
let self = this
|
||||
self.showBuyModal = false;
|
||||
self._post(
|
||||
'order.group/submitStoreOrder',
|
||||
'order.group/submitGroupOrder',
|
||||
{
|
||||
group_id: self.id,
|
||||
group_type: self.selectedPlan, // 1-月卡 2-季卡
|
||||
@ -328,16 +350,29 @@ export default {
|
||||
)
|
||||
|
||||
},
|
||||
|
||||
closeSuccessModal() {
|
||||
this.showSuccessModal = false;
|
||||
if (this.isRenewal) {
|
||||
this.handleGetDetails();
|
||||
return;
|
||||
}
|
||||
let orderId = this.info.order ? this.info.order.id : '';
|
||||
uni.navigateTo({
|
||||
url: '/bundle/combo/face-list?id=' + this.id + '&order_id=' + this.info.order.id
|
||||
url: '/bundle/combo/face-list?id=' + this.id + '&order_id=' + orderId
|
||||
});
|
||||
},
|
||||
|
||||
hanldeTakePhoto() {
|
||||
if (this.result.status == 0) {
|
||||
setTimeout(() => {
|
||||
uni.showToast({ title: '信息审核中,请耐心等待', icon: 'none' });
|
||||
}, 100);
|
||||
return false;
|
||||
}
|
||||
let orderId = this.info.order ? this.info.order.id : '';
|
||||
uni.navigateTo({
|
||||
url: '/bundle/combo/face-list?id=' + this.id + '&order_id=' + this.info.order.id
|
||||
url: '/bundle/combo/face-list?id=' + this.id + '&order_id=' + orderId
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -564,8 +599,17 @@ page {
|
||||
background-color: #fff;
|
||||
padding: 20rpx 40rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
flex: 1;
|
||||
background: linear-gradient(90deg, #F6E1B0 0%, #EDC66E 100%);
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
@ -575,6 +619,26 @@ page {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 45rpx;
|
||||
box-shadow: 0 6rpx 12rpx rgba(237, 198, 110, 0.3);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-submit:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 6rpx rgba(237, 198, 110, 0.2);
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
background: #F5F5F5;
|
||||
color: #999;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #FDF8EE;
|
||||
border: 2rpx solid #EDC66E;
|
||||
color: #834B08;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
|
||||
self._post(
|
||||
'ground.group/getGroupData',
|
||||
null,
|
||||
{group_id: self.id},
|
||||
result => {
|
||||
if (result.data && result.data.face_url) {
|
||||
self.youthFace = result.data.face_url;
|
||||
|
||||
@ -163,7 +163,7 @@
|
||||
<view class="form-item-row no-border">
|
||||
<view class="label">联系电话</view>
|
||||
<input class="input-grey" type="number" placeholder="请填写联系方式"
|
||||
placeholder-class="placeholder-style-small" v-model="formData.phone" />
|
||||
placeholder-class="placeholder-style-small" v-model="formData.mobile" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -227,8 +227,8 @@ export default {
|
||||
card: '',
|
||||
},
|
||||
parents: [
|
||||
{ name: '', both: '', card: '' },
|
||||
{ name: '', both: '', card: '' }
|
||||
{ id: 0, name: '', both: '', card: '' },
|
||||
{ id: 0, name: '', both: '', card: '' }
|
||||
],
|
||||
child: {
|
||||
name: '',
|
||||
@ -239,15 +239,102 @@ export default {
|
||||
group_id: 0
|
||||
},
|
||||
id: 0,
|
||||
isSubmitting: false
|
||||
isSubmitting: false,
|
||||
setting: {
|
||||
company: {}
|
||||
},
|
||||
info: {}, // 用户信息数据
|
||||
}
|
||||
},
|
||||
onLoad(args) {
|
||||
this.comboType = args.type || 'adult'
|
||||
this.id = args.id
|
||||
this.formData.group_id = this.id
|
||||
this.handleInit()
|
||||
this.handleGetSetting()
|
||||
},
|
||||
methods: {
|
||||
handleInit() {
|
||||
let self = this;
|
||||
self._post(
|
||||
'ground.group/getGroupData',
|
||||
{
|
||||
group_id: self.id
|
||||
},
|
||||
result => {
|
||||
if (result.code && result.data) {
|
||||
const data = result.data;
|
||||
self.info = data;
|
||||
|
||||
self.formData.mobile = data.mobile || '';
|
||||
|
||||
if (data.group_id == 1 ) {
|
||||
// 青年卡
|
||||
self.formData.youth = {
|
||||
name: data.name,
|
||||
both: data.both,
|
||||
card: data.card,
|
||||
}
|
||||
}
|
||||
|
||||
if (data.group_id == 2) {
|
||||
// 成人卡
|
||||
self.formData.adult = {
|
||||
name: data.name,
|
||||
both: data.both,
|
||||
card: data.card,
|
||||
}
|
||||
}
|
||||
|
||||
if (data.group_id == 3 || data.group_id == 4) {
|
||||
// 亲子卡
|
||||
if (data.parent && data.parent.length > 0) {
|
||||
self.formData.parents[0] = {
|
||||
id: data.parent[0].id,
|
||||
name: data.parent[0].name,
|
||||
both: data.parent[0].both,
|
||||
card: data.parent[0].card,
|
||||
}
|
||||
}
|
||||
|
||||
if (data.parent && data.parent.length > 1) {
|
||||
self.formData.parents[1] = {
|
||||
id: data.parent[0].id,
|
||||
name: data.parent[1].name,
|
||||
both: data.parent[1].both,
|
||||
card: data.parent[1].card,
|
||||
}
|
||||
}
|
||||
|
||||
self.formData.child = {
|
||||
name: data.name,
|
||||
both: data.both,
|
||||
card: data.card,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
false,
|
||||
() => {
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
handleGetSetting() {
|
||||
let self = this;
|
||||
self._post(
|
||||
'ground.ground/groundSetting',
|
||||
{
|
||||
app_id: self.getAppId()
|
||||
},
|
||||
function(res) {
|
||||
if (res.code) {
|
||||
self.info = res.data;
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
onYouthDateChange(e) {
|
||||
this.formData.youth.both = e.detail.value;
|
||||
},
|
||||
@ -265,13 +352,39 @@ export default {
|
||||
},
|
||||
|
||||
contactUs() {
|
||||
uni.showToast({ title: '正在连接客服...', icon: 'none' });
|
||||
console.log("🚀 ~ this.setting:", this.setting)
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.setting.company.contact
|
||||
});
|
||||
},
|
||||
|
||||
submitForm() {
|
||||
let self = this;
|
||||
const regex = /^[1-9]\d{5}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
|
||||
|
||||
const validateCardAndAgeMatch = (card, both, prefix, ageRule) => {
|
||||
let idBirthStr = card.length === 15 ? '19' + card.substring(6, 12) : card.substring(6, 14);
|
||||
let idDateStr = `${idBirthStr.substring(0, 4)}-${idBirthStr.substring(4, 6)}-${idBirthStr.substring(6, 8)}`;
|
||||
if (idDateStr !== both) {
|
||||
return `${prefix}出生日期选错了与身份证不符`;
|
||||
}
|
||||
if (ageRule) {
|
||||
const today = new Date();
|
||||
let age = today.getFullYear() - parseInt(idBirthStr.substring(0, 4));
|
||||
const m = (today.getMonth() + 1) - parseInt(idBirthStr.substring(4, 6));
|
||||
if (m < 0 || (m === 0 && today.getDate() < parseInt(idBirthStr.substring(6, 8)))) {
|
||||
age--;
|
||||
}
|
||||
if (ageRule === 'adult' && age < 18) {
|
||||
return `${prefix}必须满18周岁`;
|
||||
}
|
||||
if (ageRule === 'child' && age >= 18) {
|
||||
return `${prefix}须未满18周岁`;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// id == 1 验证 youth 属性
|
||||
if (self.id == 1) {
|
||||
let youth = self.formData.youth;
|
||||
@ -281,6 +394,8 @@ export default {
|
||||
if (!regex.test(youth.card)) {
|
||||
return uni.showToast({ title: '请输入正确的身份证号码', icon: 'none' });
|
||||
}
|
||||
let err = validateCardAndAgeMatch(youth.card, youth.both, '', 'child');
|
||||
if (err) return uni.showToast({ title: err, icon: 'none' });
|
||||
}
|
||||
|
||||
// 成人卡
|
||||
@ -293,6 +408,8 @@ export default {
|
||||
if (!regex.test(adult.card)) {
|
||||
return uni.showToast({ title: '请输入正确的身份证号码', icon: 'none' });
|
||||
}
|
||||
let err = validateCardAndAgeMatch(adult.card, adult.both, '', 'adult');
|
||||
if (err) return uni.showToast({ title: err, icon: 'none' });
|
||||
}
|
||||
|
||||
// id == 3(第一个亲子卡) 或 4 时,验证 parents[0] 和 child 属性
|
||||
@ -304,6 +421,8 @@ export default {
|
||||
if (!regex.test(p0.card)) {
|
||||
return uni.showToast({ title: '请输入正确的家长1身份证号码', icon: 'none' });
|
||||
}
|
||||
let err0 = validateCardAndAgeMatch(p0.card, p0.both, '家长1', 'adult');
|
||||
if (err0) return uni.showToast({ title: err0, icon: 'none' });
|
||||
|
||||
// id == 4 时(第二个亲子卡),还需要额外验证 parents[1] 属性
|
||||
if (self.id == 4) {
|
||||
@ -314,6 +433,8 @@ export default {
|
||||
if (!regex.test(p1.card)) {
|
||||
return uni.showToast({ title: '请输入正确的家长2身份证号码', icon: 'none' });
|
||||
}
|
||||
let err1 = validateCardAndAgeMatch(p1.card, p1.both, '家长2', 'adult');
|
||||
if (err1) return uni.showToast({ title: err1, icon: 'none' });
|
||||
}
|
||||
|
||||
let child = self.formData.child;
|
||||
@ -323,15 +444,17 @@ export default {
|
||||
if (!regex.test(child.card)) {
|
||||
return uni.showToast({ title: '请输入正确的子女身份证号码', icon: 'none' });
|
||||
}
|
||||
let errC = validateCardAndAgeMatch(child.card, child.both, '子女', 'child');
|
||||
if (errC) return uni.showToast({ title: errC, icon: 'none' });
|
||||
}
|
||||
|
||||
// 所有场景必填联系电话
|
||||
if (!self.formData.phone) {
|
||||
if (!self.formData.mobile) {
|
||||
return uni.showToast({ title: '请填写联系电话', icon: 'none' });
|
||||
}
|
||||
|
||||
const phoneReg = /^1[3-9]\d{9}$/;
|
||||
if (!phoneReg.test(self.formData.phone)) {
|
||||
if (!phoneReg.test(self.formData.mobile)) {
|
||||
return uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
|
||||
}
|
||||
|
||||
@ -381,6 +504,7 @@ export default {
|
||||
this.showSuccessPopup = false;
|
||||
// 点击好的之后,可以跳转或返回上一页
|
||||
uni.navigateBack();
|
||||
this.getOpenerEventChannel().emit('data', {notice: 'success'});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,19 +17,37 @@
|
||||
<image style="width: 40rpx;height: 40rpx;" src="@/static/icon/notice.png" mode=""></image>
|
||||
<view class="notice-txt">{{ setting.notice }}</view>
|
||||
</view> -->
|
||||
|
||||
<!--
|
||||
<view style="display: flex; justify-content: center; margin-bottom: 20rpx;" @click="toRecharge">
|
||||
<image style="width: 690rpx;height: 140rpx;" src="https://xh.stnav.com/uploads/sport/recharge.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
<view style="display: flex; justify-content: center; margin-bottom: 26rpx;" @click="toCombo">
|
||||
<image style="width: 690rpx;height: 200rpx;" src="https://xh.stnav.com/uploads/sport/to-combo2.png" mode=""></image>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- <view style="display: flex; justify-content: center; margin-bottom: 40rpx;" @click="toCombo">
|
||||
<image style="width: 690rpx;height: 230rpx;" src="https://xh.stnav.com/uploads/sport/to-combo1.png" mode=""></image>
|
||||
</view> -->
|
||||
|
||||
<view class="card-container">
|
||||
<view class="card left-card" @click="toRecharge" style="background-image: url('https://xh.stnav.com/uploads/sport/home_image2.png'); background-size: 100% 100%; background-repeat: no-repeat;">
|
||||
<view class="card-text">
|
||||
<view class="card-title" style="color: #4693F6;">网球充值卡</view>
|
||||
<view class="card-subtitle left-subtitle" style="color: #4693F6;">充值立享优惠</view>
|
||||
<view style="margin-top: 50rpx;"><text class="card-btn" style="background-color: #6A9CFD; color: #fff;">立即抢购</text></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card right-card" @click="toCombo" style="background-image: url('https://xh.stnav.com/uploads/sport/home_image1.png'); background-size: 100% 100%; background-repeat: no-repeat;">
|
||||
<view class="card-text">
|
||||
<view class="card-title" style="color: #D1834F;">篮球套餐卡</view>
|
||||
<view class="card-subtitle right-subtitle" style="color: #CD9C7B;">青年卡、亲子卡、成年卡...等你来领</view>
|
||||
<view><text class="card-btn" style="background-color: #D19A62; color: #fff;">立即查看</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预约球馆 -->
|
||||
<view class="info">
|
||||
<view class="title">
|
||||
@ -719,6 +737,62 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 330rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 22rpx;
|
||||
margin-bottom: 24rpx;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.left-subtitle {
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.right-subtitle {
|
||||
width: 250rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
font-size: 20rpx;
|
||||
padding: 6rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: $xh-bg;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user