764 lines
20 KiB
Vue
764 lines
20 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="buy-service">
|
||
<view class="back_bar"> <BackBar title="督学服务" /></view>
|
||
<view class="header">
|
||
<wd-tabs v-model="curTab" @change="onModelChange">
|
||
<block v-for="item in modelList" :key="item.name">
|
||
<wd-tab class="tabs" :title="`${item.name}`" :name="item.mode + ''">
|
||
<view v-if="item.mode === 1" class="content">
|
||
<card :is-show-title="false">
|
||
<image :src="item.url"></image>
|
||
</card>
|
||
</view>
|
||
<view v-if="item.mode === 2" class="content">
|
||
<card :is-show-title="false">
|
||
<image :src="item.url"></image>
|
||
</card>
|
||
</view>
|
||
</wd-tab>
|
||
</block>
|
||
</wd-tabs>
|
||
</view>
|
||
|
||
<view class="classDate">
|
||
<card :is-show-line="false" title="选择开课时间">
|
||
<view class="date-des">请点击日历选择12个督学日,以生成课表</view>
|
||
<custom-calender
|
||
ref="customCalenderRef"
|
||
class="custom-calender-class"
|
||
style="width: 100%; margin: 0"
|
||
:date-disabled="dateDisabled"
|
||
@selected-day="selectedDay"
|
||
>
|
||
<template #header="{ date }">
|
||
<view class="date-header">
|
||
<wd-icon name="arrow-left" size="22px" @click="prevTime"></wd-icon>
|
||
<view>{{ date.monthDate }}</view>
|
||
<wd-icon name="arrow-right" size="22px" @click="nextTime"></wd-icon>
|
||
</view>
|
||
</template>
|
||
</custom-calender>
|
||
<view class="date-state-des">
|
||
<view v-for="state in dateStateList" :key="state.name" class="item">
|
||
<view class="item-block" :style="{ backgroundColor: state.bgcolor }"></view>
|
||
<view>{{ state.name }}</view>
|
||
</view>
|
||
</view>
|
||
</card>
|
||
</view>
|
||
|
||
<view class="class-calender">
|
||
<wd-icon
|
||
v-show="curClassColl === 0 && allClassCalenderList.length > 5"
|
||
name="arrow-up"
|
||
size="22px"
|
||
class="coll-icon"
|
||
@click="onCollClick"
|
||
></wd-icon>
|
||
<wd-icon
|
||
v-show="curClassColl === 1 && allClassCalenderList.length > 5"
|
||
name="arrow-down"
|
||
size="22px"
|
||
class="coll-icon"
|
||
@click="onCollClick"
|
||
></wd-icon>
|
||
|
||
<card :is-show-line="false" title="课表">
|
||
<view v-if="!classCalenderList.length" class="no-class">
|
||
<image :src="noclassIcon"></image>
|
||
<text>您还没有选择督学日期，暂未生成课表哦～</text>
|
||
</view>
|
||
<view v-else style="width: 100%">
|
||
<view v-for="classItem in classCalenderList" :key="classItem.id" class="class-item">
|
||
<text>{{ classItem.id }}</text>
|
||
<text>{{ classItem.date }}</text>
|
||
<text>{{ classItem.time }}</text>
|
||
<text>{{ classItem.day }}</text>
|
||
</view>
|
||
</view>
|
||
</card>
|
||
</view>
|
||
|
||
<!-- //选择孩子弹窗 -->
|
||
<view class="select-pop">
|
||
<wd-popup
|
||
v-model="showSelectChild"
|
||
position="bottom"
|
||
safe-area-inset-bottom
|
||
class="select-pop"
|
||
custom-style="height: 580rpx;"
|
||
@close="onCloseSelectChild"
|
||
>
|
||
<view>
|
||
<view class="title">选择下单对象</view>
|
||
<view class="children">
|
||
<view v-for="child in childrenList" :key="child.id" class="child-item">
|
||
<view class="child-block">
|
||
<image :src="child.src"></image>
|
||
</view>
|
||
|
||
<view class="child-name">
|
||
<text class="name">{{ child.name }}</text>
|
||
<text class="expire"
|
||
>有效期至：{{ dayjs(child.expire).format('YYYY.MM.DD') }}</text
|
||
>
|
||
</view>
|
||
|
||
<view class="child-select">
|
||
<wd-checkbox v-model="child.selected" shape="square"></wd-checkbox>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ok-btn">
|
||
<button class="confirm-btn" @click="onConfirmSelectChild">确认</button>
|
||
</view>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
|
||
<!-- //订单确认弹窗 -->
|
||
<view class="select-pop">
|
||
<wd-popup
|
||
v-model="showSelectOrder"
|
||
position="bottom"
|
||
safe-area-inset-bottom
|
||
class="order-pop"
|
||
custom-style="height: 290px;"
|
||
@close="onCloseSelectOrder"
|
||
>
|
||
<view>
|
||
<view class="confirm-pay-title" style="text-align: center">确认支付</view>
|
||
|
||
<view class="pay-price" style="text-align: center">
|
||
<text>￥</text>
|
||
{{ curSelectMode.discountPrice }}
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="order-info">
|
||
<text class="order-title">订单信息</text>
|
||
<text class="order-value">督学服务</text>
|
||
</view>
|
||
|
||
<view class="order-info">
|
||
<text class="order-title">支付方式</text>
|
||
<text class="order-value">微信支付</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ok-btn">
|
||
<button class="confirm-btn" @click="onConfirmSelectOrder">立即付款</button>
|
||
</view>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
|
||
<!-- //支付成功弹窗 -->
|
||
<view class="success-pop">
|
||
<wd-popup v-model="buySuccessPop" custom-style="padding: 30px 40px;">
|
||
<image :src="successPng"></image>
|
||
<view class="des">购买成功,将自动为你分配督学师</view>
|
||
<view class="close-btn" @click="buySuccessPop = false">确定</view>
|
||
</wd-popup>
|
||
</view>
|
||
<wd-toast />
|
||
<wd-overlay :show="payLoading">
|
||
<view style="text-align: center; height: 500px; color: #fff">
|
||
{{ tipsInfo }}
|
||
<text style="line-height: 500px"> 正在请求支付...</text>
|
||
</view>
|
||
</wd-overlay>
|
||
</view>
|
||
<view v-if="curSelectMode" class="buy-info">
|
||
<view class="price">
|
||
<view class="new-price"> <text>￥</text>{{ curSelectMode.discountPrice }}</view>
|
||
<view class="old-price">
|
||
<text>原价</text>
|
||
<wd-text
|
||
:text="String(curSelectMode.price)"
|
||
mode="price"
|
||
decoration="line-through"
|
||
prefix="￥"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<wd-button :disabled="!allClassCalenderList.length" class="buy-btn" @click="buyService">
|
||
购买
|
||
</wd-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
declare const WeixinJSBridge: any;
|
||
import { computed, reactive, ref, watchEffect } from 'vue';
|
||
import card from './components/card.vue';
|
||
import CustomCalender from '@/components/customCalender/index.vue';
|
||
import dayjs from 'dayjs';
|
||
import noclassIcon from '@/static/noclass-icon.jpg';
|
||
import successPng from '@/static/suc.png';
|
||
import { useToast } from '@/uni_modules/wot-design-uni';
|
||
import { getChildList, getModelList } from '@/api/modules/parent';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { createInspectorPrepayOrder } from '@/api/global';
|
||
|
||
const toast = useToast();
|
||
const curTab = ref('1');
|
||
const modelList = ref([]);
|
||
let modes_data = []; // 后端原始数据
|
||
let curSelectMode = ref(null);
|
||
|
||
const onModelChange = value => {
|
||
curSelectMode.value = modes_data.find(m => m.mode === Number(value.name));
|
||
};
|
||
const customCalenderRef = ref();
|
||
|
||
const classCalenderList = ref([]);
|
||
const allClassCalenderList = ref([]);
|
||
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||
const selectedDay = date => {
|
||
// 根据当前日期向后选择 11 个 周二 周四 周六
|
||
const resultDay = [];
|
||
let curDay = dayjs(date.date);
|
||
|
||
let i = 0;
|
||
while (resultDay.length < 12) {
|
||
const day = curDay.add(i, 'day');
|
||
i++;
|
||
if (day.day() === 2 || day.day() === 4 || day.day() === 6) {
|
||
resultDay.push(day);
|
||
}
|
||
}
|
||
allClassCalenderList.value = resultDay.map((d, idx) => {
|
||
return {
|
||
id: `${String(idx + 1).padStart(2, '0')}`,
|
||
date: dayjs(d).format('YYYY.MM.DD'),
|
||
dateParams: dayjs(d).format('YYYY-MM-DD'),
|
||
time: '19:00-20:00',
|
||
day: weekDays[dayjs(d).day()],
|
||
};
|
||
});
|
||
|
||
if (allClassCalenderList.value.length > 5) {
|
||
classCalenderList.value = allClassCalenderList.value.slice(0, 5);
|
||
} else {
|
||
classCalenderList.value = allClassCalenderList.value;
|
||
}
|
||
};
|
||
|
||
const prevTime = () => {
|
||
customCalenderRef.value.prevMonth();
|
||
};
|
||
const nextTime = () => {
|
||
customCalenderRef.value.nextMonth();
|
||
};
|
||
|
||
const dateStateList = ref([
|
||
{ name: '可选', bgcolor: '#FFF' },
|
||
{ name: '不可选', bgcolor: '#f9f9f9' },
|
||
{ name: '已选中', bgcolor: '#E1E0FF' },
|
||
]);
|
||
|
||
// 课表更多收起
|
||
const curClassColl = ref(0);
|
||
const onCollClick = () => {
|
||
if (curClassColl.value === 0) {
|
||
classCalenderList.value = allClassCalenderList.value;
|
||
} else {
|
||
classCalenderList.value = allClassCalenderList.value.slice(0, 5);
|
||
}
|
||
curClassColl.value = curClassColl.value === 0 ? 1 : 0;
|
||
};
|
||
|
||
const buyService = () => {
|
||
if (childrenList.value.length === 0) {
|
||
uni.showToast({ title: '还没绑定孩子账号，请前往扫码绑定', icon: 'none' });
|
||
return;
|
||
}
|
||
if (childrenList.value.length === 1) {
|
||
curSelectChildren = childrenList.value;
|
||
showSelectOrder.value = true;
|
||
return;
|
||
}
|
||
showSelectChild.value = true;
|
||
};
|
||
|
||
const showSelectChild = ref(false);
|
||
const onCloseSelectChild = () => {
|
||
showSelectChild.value = false;
|
||
};
|
||
|
||
const childrenList = ref([]);
|
||
|
||
const showSelectOrder = ref(false);
|
||
const onCloseSelectOrder = () => {
|
||
showSelectOrder.value = false;
|
||
};
|
||
|
||
const getBaseInfo = async () => {
|
||
const data = await getChildList();
|
||
// console.log('data', data);
|
||
childrenList.value = data.map(child => {
|
||
return {
|
||
id: child.childId,
|
||
src: child.childAvatar,
|
||
name: child.childName,
|
||
expire: child.vipEndTime,
|
||
selected: false,
|
||
};
|
||
});
|
||
|
||
const { data: models } = await getModelList();
|
||
// console.log('models', models);
|
||
modes_data = models;
|
||
modelList.value = models.map(model => {
|
||
return {
|
||
mode: model.mode,
|
||
name: model.mode === 1 ? '1V1' : '1VN',
|
||
url: model.promotionalMaterials,
|
||
discountPrice: model.discountPrice,
|
||
price: model.price,
|
||
};
|
||
});
|
||
curSelectMode.value = modes_data.find(mode => mode.mode === 1);
|
||
};
|
||
onLoad(async (options = {}) => {
|
||
getBaseInfo();
|
||
});
|
||
|
||
let curSelectChildren = [];
|
||
const onConfirmSelectChild = () => {
|
||
curSelectChildren = childrenList.value.filter(child => child.selected);
|
||
if (curSelectChildren.length) {
|
||
showSelectChild.value = false;
|
||
showSelectOrder.value = true;
|
||
} else {
|
||
toast.show('请选择至少一个宝贝');
|
||
}
|
||
};
|
||
|
||
let timer = null;
|
||
const tipsInfo = ref();
|
||
const onConfirmSelectOrder = async () => {
|
||
// 只处理 微信浏览器 H5 端支付
|
||
const ua = navigator?.userAgent?.toLowerCase();
|
||
const isWechatBrowser = ua?.indexOf('micromessenger') !== -1;
|
||
if (!isWechatBrowser) {
|
||
toast.show('请在微信中打开进行支付');
|
||
return;
|
||
}
|
||
|
||
payLoading.value = true;
|
||
if (timer) clearTimeout(timer);
|
||
timer = setTimeout(() => {
|
||
payLoading.value = false;
|
||
}, 30000);
|
||
|
||
const params = {
|
||
inspectorCourseList: allClassCalenderList.value.map(c => {
|
||
return c.dateParams + ' 19:00:00';
|
||
}),
|
||
inspectorModeId: curSelectMode.value.id,
|
||
money: curSelectMode.value.discountPrice,
|
||
orderType: 1,
|
||
paySubType: 'JSAPI',
|
||
userId: curSelectChildren[0].id,
|
||
};
|
||
|
||
const data = await createInspectorPrepayOrder(params);
|
||
|
||
const order = {
|
||
appId: data.prepayResponse.appId,
|
||
nonceStr: data.prepayResponse.nonceStr,
|
||
package: data.prepayResponse.packageVal,
|
||
signType: data.prepayResponse.signType,
|
||
paySign: data.prepayResponse.paySign,
|
||
timeStamp: data.prepayResponse.timeStamp,
|
||
};
|
||
|
||
// // 测试
|
||
// const o = {
|
||
// appId: 'wxd13aabeb40898e1d',
|
||
// nonceStr: 'qAQwNzkqoxXyotjWf76x466oNxq5Y97z',
|
||
// package: 'prepay_id=wx2810324759377114f4c3455c0fd7230000',
|
||
// paySign: `UMRbpAknP59VvTOOszCcUZ8Mg2JtJbU8IaXBObgwm/RTcK/h8bS9zoU8QSHLOaSZVtphbT5apy9Hn2A/2W7D/DMecJwkNk0Eczhc/8fPG3/Ato93Rl2tyOi4Ck0z5mw03E/KHSIU/8nHl7uyOet3shCxV3EiHSEVibp+rxmkWTP5VTaBJhqjvoNgECiVpjofA//iur1OnAoMdQFBznkfxqTNND1ZBm2ZLUB5plrBddhJk1WrCRmSadRx0P36ZSz+t18TJd9+n34uUhQ14Cez6oJBv1uHcEJUij+YuUx72gMO4flVVGDNZ2stWax1bupQ+N/cDTuiOOIAuet/JpltQg==`,
|
||
// signType: 'RSA',
|
||
// timeStamp: '1724812366',
|
||
// };
|
||
|
||
const payResult = await pay(order);
|
||
payLoading.value = false;
|
||
buySuccessPop.value = payResult;
|
||
showSelectOrder.value = false;
|
||
};
|
||
|
||
const buySuccessPop = ref(false);
|
||
|
||
// -----------支付相关
|
||
const payLoading = ref(false);
|
||
|
||
const pay = async order => {
|
||
return new Promise((resove, reject) => {
|
||
WeixinJSBridge.invoke(
|
||
'getBrandWCPayRequest',
|
||
{
|
||
appId: order.appId, // 公众号ID，由商户传入
|
||
timeStamp: order.timeStamp, // 时间戳，自1970年以来的秒数
|
||
nonceStr: order.nonceStr, // 随机串
|
||
package: order.package,
|
||
signType: order.signType, // 微信签名方式：
|
||
paySign: order.paySign,
|
||
},
|
||
res => {
|
||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||
// 支付成功后的操作
|
||
console.log('支付成功');
|
||
|
||
resove(true);
|
||
} else {
|
||
// 支付失败后的操作
|
||
console.log('支付失败', res.err_msg);
|
||
resove(false);
|
||
}
|
||
},
|
||
);
|
||
});
|
||
};
|
||
|
||
const dateDisabled = date => {
|
||
return (
|
||
![2, 4, 6].includes(dayjs(date.date).day()) ||
|
||
dayjs(date.date).isBefore(dayjs().subtract(1, 'day'))
|
||
);
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.buy-info {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 126rpx;
|
||
background-color: #fff;
|
||
bottom: 0;
|
||
border-top: 1px solid #eee;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
box-sizing: border-box;
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: center;
|
||
.new-price {
|
||
color: #ff8d5f;
|
||
font-weight: 700;
|
||
font-size: 42rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
.old-price {
|
||
font-size: 24rpx;
|
||
margin-left: 10rpx;
|
||
line-height: 60rpx;
|
||
color: #a9aab5;
|
||
display: flex;
|
||
}
|
||
}
|
||
.buy-btn {
|
||
display: block;
|
||
width: 300rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 30rpx;
|
||
overflow: hidden;
|
||
background-color: #615dff;
|
||
border-radius: 10px !important;
|
||
}
|
||
}
|
||
.buy-service {
|
||
padding: 0 12rpx 160rpx 12rpx;
|
||
|
||
.back_bar {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.classDate {
|
||
.date-des {
|
||
color: #a9aab5;
|
||
font-size: 12px;
|
||
margin-top: -10px;
|
||
}
|
||
.date-state-des {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
.item {
|
||
width: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
.item-block {
|
||
margin: 0 5px;
|
||
width: 15px;
|
||
height: 15px;
|
||
border: 1px solid #eee;
|
||
}
|
||
}
|
||
}
|
||
.date-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 10rpx 0 30rpx 0;
|
||
}
|
||
.custom-calender-class {
|
||
:deep(.calendar-week) {
|
||
width: 100%;
|
||
}
|
||
:deep(.calendar-inner) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
.class-calender {
|
||
.no-class {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-bottom: 16px;
|
||
image {
|
||
display: block;
|
||
margin: auto;
|
||
width: 240px;
|
||
height: 230px;
|
||
}
|
||
text {
|
||
color: #a9aab5;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.class-item {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 45px;
|
||
border-radius: 5px;
|
||
padding: 0 16px;
|
||
margin: 5px 0;
|
||
width: 100%;
|
||
&:nth-child(2n) {
|
||
background: linear-gradient(90deg, #e1e0ff 0%, #f5f5ff 100%);
|
||
}
|
||
&:nth-child(2n + 1) {
|
||
background: linear-gradient(90deg, #f5f5ff 0%, #f5f5ff 100%);
|
||
}
|
||
text:nth-child(1) {
|
||
width: 40px;
|
||
font-weight: 700;
|
||
}
|
||
text:nth-child(2) {
|
||
width: 100px;
|
||
}
|
||
text:nth-child(3) {
|
||
width: 100px;
|
||
}
|
||
}
|
||
position: relative;
|
||
.coll-icon {
|
||
position: absolute;
|
||
width: 15px;
|
||
height: 15px;
|
||
top: 10px;
|
||
right: 20px;
|
||
}
|
||
}
|
||
|
||
.select-pop {
|
||
::v-deep .wd-popup {
|
||
border-radius: 10px;
|
||
border-bottom-left-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
padding: 30rpx;
|
||
|
||
.title {
|
||
font-weight: 700;
|
||
}
|
||
.confirm-pay-title {
|
||
text-align: center;
|
||
font-weight: 700;
|
||
line-height: 40px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.pay-price {
|
||
text-align: center;
|
||
color: #ff8d5f;
|
||
line-height: 60px;
|
||
height: 60px;
|
||
font-weight: 700;
|
||
font-size: 20px;
|
||
text {
|
||
margin-right: -5px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.content {
|
||
padding: 0px 0 16px;
|
||
.order-info {
|
||
margin: 10px 0;
|
||
border-bottom: 1px solid #eee;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.order-title {
|
||
color: #a9aab5;
|
||
}
|
||
.order-value {
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.children {
|
||
padding: 30rpx 0;
|
||
height: 320rpx;
|
||
overflow: auto;
|
||
margin-bottom: 16rpx;
|
||
.child-item {
|
||
display: flex;
|
||
align-items: center;
|
||
// margin: 10px 0;
|
||
border-bottom: 1px solid #eee;
|
||
padding: 30rpx 0;
|
||
.child-block {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.child-name {
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
.name {
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
}
|
||
.expire {
|
||
color: #a9aab5;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.child-select {
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
.ok-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.confirm-btn {
|
||
width: 440rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
line-height: 40px;
|
||
border-radius: 10px !important;
|
||
background-color: #615dff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.success-pop {
|
||
::v-deep .wd-popup {
|
||
width: 300px;
|
||
// height: 100px !important;
|
||
border-radius: 10px;
|
||
padding: 0 !important;
|
||
image {
|
||
display: block;
|
||
width: 40px;
|
||
height: 40px;
|
||
margin: auto;
|
||
margin-top: 16px;
|
||
}
|
||
.des {
|
||
width: 100%;
|
||
height: 50px;
|
||
padding-top: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
text-align: center;
|
||
}
|
||
.close-btn {
|
||
height: 45px;
|
||
line-height: 45px;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .tabs {
|
||
image {
|
||
width: 100%;
|
||
height: 360px;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
|
||
::v-deep .wd-tabs__nav {
|
||
height: 60px;
|
||
}
|
||
::v-deep .wd-tabs__nav-container {
|
||
padding: 12px;
|
||
}
|
||
::v-deep .wd-tabs__container {
|
||
margin-top: 12px;
|
||
}
|
||
::v-deep .wd-tabs {
|
||
background-color: transparent;
|
||
}
|
||
|
||
::v-deep .wd-tabs__nav-item {
|
||
box-sizing: border-box;
|
||
margin: 0 3px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
border-radius: 5px;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
&:first-child {
|
||
border-radius: 5px;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
transition: none;
|
||
background-color: #f9f9fb;
|
||
}
|
||
::v-deep .wd-tabs__line {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .wd-tabs__nav-item.is-active {
|
||
background-color: #615dff;
|
||
color: #f1f1f1;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
</style>
|