You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2270 lines
60 KiB
2270 lines
60 KiB
<template>
|
|
<BaseContainer class="single-special">
|
|
<NavBar :title="navTitle" />
|
|
<view class="detail-wrap" v-if="special.id">
|
|
<!-- 播放器 -->
|
|
<view class="header" :style="{ height: playerHeight + 'px' }">
|
|
<image :src="special.image" alt="封面" />
|
|
</view>
|
|
<view v-if="special_validity == -1" class="validity">
|
|
<template v-if="special.validity">课程有效期为{{ special.validity }}天，过期后需重新购买哦！</template>
|
|
<template v-else>课程永久有效哦！</template>
|
|
</view>
|
|
<view v-else-if="special_validity == 0" class="validity">课程永久有效哦！</view>
|
|
<view v-else-if="special_validity > 0" class="validity">
|
|
课程有效期剩余{{
|
|
special_validity | formatValidity
|
|
}}，过期后需重新购买哦！
|
|
</view>
|
|
<view class="special-attr">
|
|
<view class="title">{{ special.title }}</view>
|
|
<view class="label">
|
|
<view v-for="(item, index) in special.label" :key="index">{{
|
|
item
|
|
}}</view>
|
|
</view>
|
|
<view class="money-button">
|
|
<view class="money">
|
|
<template v-if="special.pay_type">
|
|
<view><span>￥</span>{{ special.money }}</view>
|
|
<view>￥{{ special.member_money }}</view>
|
|
</template>
|
|
<view v-else>免费</view>
|
|
</view>
|
|
<view class="button" @click="handleCreateSharePoster">
|
|
<i class="iconfont iconfenxiang"></i>
|
|
<view>分享</view>
|
|
</view>
|
|
<view class="button" @click="collect">
|
|
<i :class="[
|
|
'iconfont',
|
|
special.collect ? 'iconshoucang2' : 'iconshoucang11',
|
|
]"></i>
|
|
<view>{{ special.collect ? "已收藏" : "收藏" }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 群聊 -->
|
|
<view v-if="special.service_code" class="wechat">
|
|
<view class="group-chat">
|
|
<view>和小伙伴一起学习，有老师答疑哦~</view>
|
|
<button type="button" @click="groupChartShow = true">加入群聊</button>
|
|
</view>
|
|
</view>
|
|
<!-- 学习人数、讲师 -->
|
|
<view class="learner-teacher">
|
|
<view v-if="record.length" class="learner">
|
|
<view>
|
|
<image v-for="(item, index) in record" :key="index" :src="item.avatar" alt="" />
|
|
</view>
|
|
已有{{ recordCoujnt }}人学习
|
|
</view>
|
|
<navigator v-if="lecturer" class="teacher" :url="`/pages/merchant/teacher_detail?id=${special.lecturer_id}`">
|
|
<view>
|
|
<image :src="lecturer.lecturer_head" :alt="lecturer.lecturer_name" />
|
|
</view>
|
|
<view class="lecturer-body">
|
|
<view>{{ lecturer.lecturer_name }}</view>
|
|
<view v-if="lecturer.label.length" class="label">
|
|
<view v-for="(item, index) in lecturer.label" :key="index">{{
|
|
item
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
<i class="iconfont iconxiangyou"></i>
|
|
</navigator>
|
|
</view>
|
|
<!-- 关联资料 -->
|
|
<view v-if="specialDownload.length" class="material">
|
|
<navigator v-for="item in specialDownload" :key="item.id" :url="`/pages/special/data_details?id=${item.id}`">
|
|
<view>
|
|
<image :src="item.image" alt="" mode="aspectFit" />
|
|
</view>
|
|
<view>
|
|
<view>{{ item.title }}</view>
|
|
<view v-if="item.pay_type" class="money">
|
|
￥<span>{{ item.money }}</span>
|
|
</view>
|
|
<view v-else>免费</view>
|
|
<view>
|
|
<view>{{ item.ficti + item.sales }}人已下载</view>
|
|
<button type="button">去下载</button>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<!-- 拼团人数 -->
|
|
<view v-if="special.is_pink" class="group-buy">
|
|
<view v-if="specialGroupLists.length" class="marquee">
|
|
<i class="iconfont iconshengyinyinliang"></i>
|
|
<view>已拼{{ specialGroupLists.length }}件</view>
|
|
<view class="swiper-container">
|
|
<view class="swiper-wrapper">
|
|
<view v-for="(item, index) in specialGroupLists" :key="index" class="swiper-slide">
|
|
{{ item.nickname }}拼团成功
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="specialPinkLists.length" class="list">
|
|
<view class="item" v-for="(item, index) in specialPinkLists" :key="index">
|
|
<view>
|
|
<image :src="item.avatar" alt="" />
|
|
</view>
|
|
<view>{{ item.nickname }}</view>
|
|
<view>
|
|
<view>
|
|
还差<span>{{ item.num }}人</span>成团
|
|
</view>
|
|
<view>剩余 {{ item.duration | format }}</view>
|
|
</view>
|
|
<button type="button" @click="goPink(item.id, item.uid)">
|
|
去拼单
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 拼团玩法 -->
|
|
<view v-if="special.is_pink" class="group-way">
|
|
<view class="way-title">拼团玩法</view>
|
|
<view class="list">
|
|
<view class="item">开团/参团</view>
|
|
<view class="item">邀请好友</view>
|
|
<view class="item">满员发货</view>
|
|
</view>
|
|
</view>
|
|
<!-- 导航 -->
|
|
<view class="tabbar">
|
|
<view class="item" :class="{ on: tabActive === 1 }" @click="tabActive = 1">详情</view>
|
|
<view class="item" v-if="specialTest1.length" :class="{ on: tabActive === 2 }" @click="tabActive = 2">
|
|
练习
|
|
</view>
|
|
<view class="item" v-if="specialTest2.length" :class="{ on: tabActive === 3 }" @click="tabActive = 3">
|
|
考试
|
|
</view>
|
|
<view class="item" v-if="comment_switch" :class="{ on: tabActive === 4 }" @click="tabActive = 4">
|
|
评价({{ whole }})
|
|
</view>
|
|
</view>
|
|
<!-- 详情 -->
|
|
<mp-html v-if="tabActive === 1" container-style="padding: 30rpx;background: #ffffff;"
|
|
:content="special.abstract"></mp-html>
|
|
<!-- 练习 -->
|
|
<view v-if="specialTest1.length && tabActive === 2" class="exercise">
|
|
<view v-for="item in specialTest1" :key="item.id" class="item">
|
|
<view class="title">
|
|
<i v-if="!isPay" class="iconfont iconsuozi"></i>{{ item.title }}
|
|
</view>
|
|
<view class="group">
|
|
<view class="progress">
|
|
<view :style="{ width: item.rate + '%' }"></view>
|
|
</view>
|
|
<view>{{ item.rate }}%</view>
|
|
<view>{{ item.answer }}人已答题</view>
|
|
<button type="button" @click="goQuestion(item)">
|
|
<i class="iconfont icon-19-lianxi"></i>练习
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 考试 -->
|
|
<view v-if="specialTest2.length && tabActive === 3" class="question">
|
|
<view class="item" v-for="item in specialTest2" :key="item.id">
|
|
<view class="head">
|
|
<view>
|
|
<image :src="item.image" alt="" />
|
|
</view>
|
|
<view>
|
|
<view class="title">{{ item.title }}</view>
|
|
<view class="group">
|
|
<view>共{{ item.item_number }}题</view>
|
|
<button v-if="isPay" type="button" @click="goQuestion(item)">
|
|
<i class="iconfont icon-19-lianxi"></i>答题
|
|
</button>
|
|
<view v-else>
|
|
<i class="iconfont iconsuozi"></i>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 评价 -->
|
|
<view v-if="tabActive === 4" class="evaluate">
|
|
<view>
|
|
<view class="score">
|
|
<view>
|
|
<span>{{ score }}</span>分
|
|
</view>
|
|
<view>课程评分</view>
|
|
</view>
|
|
<button type="button" class="flex-center flex" @click="userEvaluate">我要评价</button>
|
|
</view>
|
|
<EvaluateList :evaluate-list="replyList" />
|
|
<view v-if="evaluateFinished && replyList.length" class="finished">已全部加载完</view>
|
|
<view v-if="evaluateFinished && !replyList.length" class="empty">
|
|
<image :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无评价" />
|
|
<view>暂无评价</view>
|
|
</view>
|
|
</view>
|
|
<!-- 底部按钮 -->
|
|
<view class="footer">
|
|
<view class="button" @click="goHome">
|
|
<image :src="getImgPath('/wap/first/zsff/images/home.png')" alt="首页" />
|
|
<view>首页</view>
|
|
</view>
|
|
<!-- 抖音客服 -->
|
|
<view class="link" v-if="TOUTIAO_STATUS">
|
|
<view class="cont">
|
|
<view>
|
|
<button class="im" open-type="im" :data-im-id="imId" bindim="imCallback" binderror="onimError">
|
|
<image :src="getImgPath('/wap/first/zsff/images/chat.png')" />
|
|
客服</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="button" @click="customerService" v-else>
|
|
<image :src="getImgPath('/wap/first/zsff/images/chat.png')" alt="客服" />
|
|
<view>客服</view>
|
|
</view>
|
|
<view class="button" @click="buy(1)">
|
|
<image :src="getImgPath('/wap/first/zsff/images/link.png')" alt="送朋友" />
|
|
<view>送朋友</view>
|
|
</view>
|
|
<view class="learn-btn">
|
|
<button v-if="gift" type="button" @click="buy(4)">领取课程</button>
|
|
<template v-else>
|
|
<button v-if="isPay || (!special.member_pay_type && is_member)" type="button" class="flex flex-center"
|
|
@click="buy(5)">
|
|
{{
|
|
special.pay_type || special.member_pay_type
|
|
? "去学习"
|
|
: "免费学习"
|
|
}}
|
|
</button>
|
|
<template v-else>
|
|
<button v-if="special.profile.is_try" @click="handleTry">试{{ special.light_type === 2 ? '听' : '看'
|
|
}}</button>
|
|
<template v-if="special.is_pink">
|
|
<button v-if="isPink" type="button">查看拼团</button>
|
|
<template>
|
|
<view class="video_footer_btn_left acea-row row-column row-center-wrapper" @click="buy(3)">
|
|
<text class="video_footer_btn_left_pic">￥{{ special.pink_money }}</text>
|
|
<text class="video_footer_btn_left_num">{{ special.pink_number }}人团</text>
|
|
</view>
|
|
<!-- <button type="button" @click="buy(3)">
|
|
￥{{ special.pink_money }}
|
|
<view>{{ special.pink_number }}人团</view>
|
|
</button> -->
|
|
<button type="button" @click="buy(2)" style="font-weight:600;">
|
|
￥{{ is_member ? special.member_money : special.money }}
|
|
<view>单独购</view>
|
|
</button>
|
|
</template>
|
|
</template>
|
|
<button v-else type="button" @click="buy(2)">立即购买</button>
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 遮罩层 -->
|
|
<view :class="{
|
|
mask:
|
|
payDialogOpen ||
|
|
shareShow ||
|
|
groupChartShow ||
|
|
dialogShow ||
|
|
certificateImage,
|
|
}" @touchmove.prevent @click="maskClick"></view>
|
|
<!-- 支付弹窗 -->
|
|
<PayDiaLog :open.sync="payDialogOpen" :money="parseFloat(money)" :now_money="nowMoney" :special_id="special.id"
|
|
:link_pay_uid="link_pay_uid" :pay_type_num="pay_type_num" :pink-id="pinkId" :is-wechat="isWechat"
|
|
:is-alipay="isAlipay" :is-balance="isBalance" :template-id="templateIds" :wxpay-h5="wxpayH5" @change="changeVal"
|
|
:isMember="!!is_member" :memberMoney="Number(special.member_money)" :isMembership="true"
|
|
@fatherMethod="fatherMethod" />
|
|
<!-- 分享海报 -->
|
|
<image v-if="shareImage && shareShow" class="share-dialog" :src="shareImage" alt="" />
|
|
<!-- 加入群聊 -->
|
|
<view v-if="groupChartShow" class="group-chart-dialog">
|
|
<image :src="special.service_code" alt="" />
|
|
<view>
|
|
<view>长按扫码</view>
|
|
<view>加客服好友进群</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 评价弹窗 -->
|
|
<EvaluateDialog :dialog-show="dialogShow" :rate-value="rateValue" :image-list="imageList"
|
|
@rate-change="rateChange" @image-upload="imageUpload" @image-delete="imageDelete"
|
|
@evaluate-submit="evaluateSubmit" />
|
|
<!-- 兑换码 -->
|
|
<view class="exchange-guide" v-if="isBatch && !isPay" @click="getexchange">
|
|
<i class="iconfont iconicon-life-gift"></i> 兑换码 <i class="iconfont iconxiangyou"></i>
|
|
</view>
|
|
<!-- 完课证书 -->
|
|
<image :src="certificateImage" v-if="certificateImage" class="certificate-image" alt="" />
|
|
<!-- 弹幕 -->
|
|
<view v-if="barrageList.length" class="barrage">
|
|
<view>
|
|
<image :src="barrageList[barrage_index].avatar" alt="" />
|
|
</view>
|
|
<view>
|
|
{{ barrageList[barrage_index].nickname }}
|
|
{{ barrageList[barrage_index].status_name }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分享返佣 -->
|
|
<RebateGuide v-if="rebateMoney" :rebate-money="rebateMoney" @rebate-action="rebateAction" />
|
|
|
|
<TkiQrcode loadMake v-if="isQrcodeCanvasVisable" ref="qrcode" :showLoading="false" :val="qrcodeText"
|
|
@result="handleQrcodeCreateSuccess" />
|
|
<canvas canvas-id="poster" v-if="isPosterCanvasVisable" class="poster-canvas" />
|
|
</view>
|
|
<canvas canvas-id="poster2" v-if="isPosterCanvasVisable2" class="poster-canvas2" />
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getLecturer, getRebateAmount } from "@/api/auth";
|
|
import {
|
|
addLearningRecords,
|
|
collectSpecial,
|
|
// getBarrageList,
|
|
getInspectData,
|
|
getLearningRecords,
|
|
getSingleSpecialDetail,
|
|
getSpecialCertificate,
|
|
getSpecialCertificateInfo,
|
|
getSpecialMaterial,
|
|
getSpecialPinkList,
|
|
getSpecialReplyData,
|
|
getSpecialReplyList,
|
|
getSpecialTemplateIds,
|
|
getTopicSpecialTestPaper,
|
|
receiveGift,
|
|
saveSpecialViewing,
|
|
setBarrageIndex,
|
|
validitySpecial,
|
|
submitSpecialComment,
|
|
getVideoPlayCredentials,
|
|
aliPayApp,
|
|
aliPayWap,
|
|
delSpecialOrder,
|
|
} from "@/api/special";
|
|
import { getGroupList } from "@/api/special";
|
|
import userInfoMixin from "@/mixins/userInfo";
|
|
import EvaluateList from "@/components/EvaluateList/index.vue";
|
|
import EvaluateDialog from "@/components/EvaluateDialog/index.vue";
|
|
import PayDiaLog from "@/components/PayDialog/index.vue";
|
|
import RebateGuide from "@/components/RebateGuide/index.vue";
|
|
import dayjs from "dayjs";
|
|
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
|
|
import posterMixin from "@/mixins/poster";
|
|
import { getAuthInfo } from "@/api/auth";
|
|
import { CUSTOMER_DETAIL_TYPE, CUSTOMER_SUPPORT_TYPE } from "@/constants/customer-type";
|
|
|
|
export default {
|
|
mixins: [userInfoMixin, posterMixin],
|
|
components: {
|
|
EvaluateList,
|
|
EvaluateDialog,
|
|
PayDiaLog,
|
|
RebateGuide,
|
|
mpHtml,
|
|
},
|
|
filters: {
|
|
format(time, sibling) {
|
|
let duration = dayjs.duration(time * 1000);
|
|
let hours = duration.hours();
|
|
let siblingHours = sibling ? dayjs.duration(sibling * 1000).hours() : 0;
|
|
|
|
return dayjs({
|
|
h: hours,
|
|
m: duration.minutes(),
|
|
s: duration.seconds(),
|
|
}).format((hours || siblingHours ? "HH:" : "") + "mm:ss");
|
|
},
|
|
formatValidity(time) {
|
|
let duration = dayjs.duration(Number(time), "seconds");
|
|
let days = Math.floor(duration.asDays());
|
|
let hours = duration.hours();
|
|
let minutes = duration.minutes();
|
|
return (
|
|
(days ? days + "天" : "") +
|
|
(hours ? hours + "小时" : "") +
|
|
minutes +
|
|
"分钟"
|
|
);
|
|
},
|
|
},
|
|
data() {
|
|
const { screenWidth } = this.$util.getSystemInfo();
|
|
const playerHeight = Math.floor((screenWidth * 9) / 16);
|
|
return {
|
|
navTitle: "",
|
|
special: {},
|
|
poster_image: "",
|
|
site_url: "",
|
|
site_name: "",
|
|
isPay: false,
|
|
is_member: false,
|
|
gift: false,
|
|
isBatch: false,
|
|
isPink: false,
|
|
barrageShowTime: 0,
|
|
barrage_index: 0,
|
|
barrageList: [],
|
|
record: [], // 学习人员
|
|
recordCoujnt: "", // 学习人数
|
|
lecturer: null,
|
|
specialGroupLists: [], // 拼团信息
|
|
specialPinkLists: [], // 拼团人员
|
|
tabActive: 1,
|
|
specialTest1: [], // 关联练习
|
|
specialTest2: [], // 关联考试
|
|
evaluatePage: 1,
|
|
evaluateLimit: 16,
|
|
replyList: [], // 评价列表
|
|
payDialogOpen: false, // 是否显示支付弹窗
|
|
money: 0,
|
|
nowMoney: 0,
|
|
link_pay_uid: 0,
|
|
pay_type_num: -1,
|
|
pinkId: 0,
|
|
isWechat: false,
|
|
isAlipay: false,
|
|
isBalance: false,
|
|
templateIds: "", // 订阅模板id
|
|
wxpayH5: false,
|
|
shareImage: "",
|
|
shareShow: false,
|
|
groupChartShow: false,
|
|
loginShow: false,
|
|
score: 0,
|
|
whole: 0,
|
|
dialogShow: false,
|
|
rateValue: 5,
|
|
imageList: [],
|
|
orderId: 0,
|
|
evaluateLoading: false,
|
|
evaluateFinished: false,
|
|
playerHeight,
|
|
currentTime: 0,
|
|
duration: 0,
|
|
certificateImage: "",
|
|
specialDownload: [], // 关联资料
|
|
comment_switch: false,
|
|
special_validity: -1,
|
|
tryShow: true,
|
|
seeked: false,
|
|
rebateMoney: 0,
|
|
id: 0,
|
|
isOpenWeixing: false,
|
|
gift_uid: 0,
|
|
gift_order_id: 0,
|
|
gift: 0,
|
|
spread_uid: 0,
|
|
isPosterCanvasVisable2: false,
|
|
TOUTIAO_STATUS:false,
|
|
imId:''
|
|
};
|
|
},
|
|
computed: {
|
|
url() {
|
|
return this.isWechat ? "/pages/index/login" : "/pages/login/phone_check";
|
|
},
|
|
range() {
|
|
return Math.ceil((this.currentTime / this.duration) * 100);
|
|
},
|
|
shareQrcodeData() {
|
|
return {
|
|
spread_uid: this.userInfo?.uid,
|
|
id: this.id,
|
|
};
|
|
},
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.timerFlag);
|
|
},
|
|
onShow() {
|
|
if (this.isOpenWeixing && this.orderId) {
|
|
this.$util.wxh5PayIsSuccess(this.orderId, 1, this);
|
|
this.isOpenWeixing = false;
|
|
}
|
|
this.getData();
|
|
},
|
|
onLoad(options) {
|
|
// const { id } = this.$util.mergeLaunchParams(options);
|
|
|
|
let id = 0;
|
|
const parmData = this.$util.mergeLaunchParams(options)
|
|
if (parmData.id) id = parmData.id;
|
|
if (parmData.goid) {
|
|
this.gift = 1
|
|
this.spread_uid = parmData.guid
|
|
this.gift_order_id = parmData.goid
|
|
this.gift_uid = parmData.guid
|
|
}
|
|
this.id = id;
|
|
|
|
this.getData().then(() => {
|
|
this.lecturerDetails();
|
|
|
|
if (this.special.is_pink) {
|
|
this.groupLists();
|
|
this.pinkIngLists();
|
|
this.getBarrageList();
|
|
}
|
|
|
|
if (this.comment_switch) {
|
|
this.specialReplyData();
|
|
this.specialReplyList();
|
|
}
|
|
|
|
});
|
|
|
|
this.learningRecords();
|
|
this.addLearningRecords();
|
|
this.specialDataDownload();
|
|
this.specialTestPaper(1);
|
|
this.specialTestPaper(2);
|
|
this.$util.checkLogin(this.inspect, '', 1);
|
|
this.rebateAmount();
|
|
this.validitySpecial();
|
|
this.getAuthInfo();
|
|
/* #ifdef MP-TOUTIAO */
|
|
this.TOUTIAO_STATUS = true;
|
|
/* #endif */
|
|
},
|
|
onReachBottom() {
|
|
if (this.tabActive === 4) {
|
|
this.specialReplyList();
|
|
}
|
|
},
|
|
created() {
|
|
//#ifdef MP-WEIXIN
|
|
wx.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
});
|
|
//#endif
|
|
},
|
|
// 分享朋友
|
|
onShareAppMessage() {
|
|
return { title: this.special.title, path: '/pages/special/details?id=' + this.special_id+'&spread_uid='+(this.userInfo.uid??0) }
|
|
},
|
|
methods: {
|
|
|
|
getexchange() {
|
|
this.$util.checkLogin(() => {
|
|
uni.navigateTo({
|
|
url: `/pages/special/exchange?special_id=${this.id}`
|
|
});
|
|
}, true);
|
|
},
|
|
fatherMethod() {
|
|
this.payDialogOpen = false;
|
|
},
|
|
handleTry: function () {
|
|
this.$util.checkLogin(() => {
|
|
this.$nextTick(() => {
|
|
if (this.special.light_type === 1) {
|
|
uni.navigateTo({
|
|
url: "/pages/special/single_text_detail?try=1&id=" + this.id,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/pages/special/single_con_detail?try=1&id=" + this.id,
|
|
});
|
|
}
|
|
});
|
|
})
|
|
},
|
|
async getAuthInfo() {
|
|
const res = await getAuthInfo();
|
|
const { nowMoney, isWechat, isAlipay, isBalance, wxpayH5 } = res.data;
|
|
Object.assign(this, {
|
|
nowMoney,
|
|
isWechat,
|
|
isAlipay,
|
|
isBalance,
|
|
wxpayH5,
|
|
});
|
|
},
|
|
getData() {
|
|
return getSingleSpecialDetail(this.id, this.gift_uid, this.gift_order_id, this.gift, this.spread_uid).then(({ data }) => {
|
|
const {
|
|
special,
|
|
pinkId,
|
|
isBatch,
|
|
site_url,
|
|
is_member,
|
|
isPink,
|
|
isPay,
|
|
viewing_time,
|
|
orderId,
|
|
link_pay,
|
|
gift,
|
|
link_pay_uid,
|
|
comment_switch,
|
|
BarrageShowTime,
|
|
barrage_index,
|
|
d_im
|
|
} = data;
|
|
Object.assign(this, {
|
|
navTitle: special.title,
|
|
special: special.special,
|
|
pinkId,
|
|
isBatch,
|
|
site_url,
|
|
is_member,
|
|
isPink,
|
|
isPay,
|
|
viewing_time,
|
|
orderId,
|
|
gift,
|
|
link_pay_uid,
|
|
comment_switch: !!comment_switch,
|
|
BarrageShowTime,
|
|
barrage_index: barrage_index || 0,
|
|
imId:d_im
|
|
});
|
|
}).catch((err) => {
|
|
this.$util.showMsg(err.msg);
|
|
setTimeout(() => {
|
|
// #ifndef MP
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
// #endif
|
|
// #ifdef MP
|
|
uni.navigateBack({
|
|
fail: (err) => {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
}
|
|
})
|
|
// #endif
|
|
}, 2000);
|
|
|
|
});
|
|
},
|
|
// 学习人数
|
|
learningRecords() {
|
|
getLearningRecords(this.id).then(({ data }) => {
|
|
this.record = data.record;
|
|
this.recordCoujnt = data.recordCoujnt;
|
|
});
|
|
},
|
|
// 讲师信息
|
|
lecturerDetails() {
|
|
getLecturer(this.special.mer_id).then(({ data }) => {
|
|
this.lecturer = data;
|
|
});
|
|
},
|
|
// 拼团消息
|
|
groupLists() {
|
|
getGroupList(this.id).then(({ data }) => {
|
|
this.specialGroupLists = data;
|
|
});
|
|
},
|
|
// 拼团列表
|
|
pinkIngLists() {
|
|
getSpecialPinkList(this.id).then(({ data }) => {
|
|
data.forEach((item) => {
|
|
item.duration = 0;
|
|
item.stop_time = item.stop_time * 1000;
|
|
});
|
|
this.specialPinkLists = data;
|
|
});
|
|
},
|
|
// 练习、考试
|
|
specialTestPaper(type) {
|
|
getTopicSpecialTestPaper(this.id, type).then(({ data }) => {
|
|
if (type === 1) {
|
|
data.forEach((item) => {
|
|
item.rate = Math.floor((item.done / item.item_number) * 100);
|
|
});
|
|
}
|
|
this["specialTest" + type] = data;
|
|
});
|
|
},
|
|
// 评价状态
|
|
specialReplyData() {
|
|
getSpecialReplyData(this.id).then(({ data }) => {
|
|
this.score = data.score;
|
|
this.whole = data.whole;
|
|
});
|
|
},
|
|
// 评价列表
|
|
async specialReplyList() {
|
|
if (this.evaluateLoading || this.evaluateFinished) return;
|
|
this.evaluateLoading = true;
|
|
|
|
try {
|
|
const { data } = await getSpecialReplyList(
|
|
this.id,
|
|
this.evaluatePage++,
|
|
this.evaluateLimit
|
|
);
|
|
this.evaluateLoading = false;
|
|
this.replyList = this.replyList.concat(data);
|
|
this.evaluateFinished = this.evaluateLimit > data.length;
|
|
} catch (err) {
|
|
this.evaluateLoading = false;
|
|
}
|
|
},
|
|
validitySpecial() {
|
|
validitySpecial(this.id).then(({ data }) => {
|
|
this.special_validity = data.validity;
|
|
});
|
|
},
|
|
// 生成分享海报
|
|
handleCreateSharePoster() {
|
|
this.poster_image = this.special.poster_image;
|
|
this.createSharePoster("special", {
|
|
id: this.special_id,
|
|
spread_uid: this.userInfo?.uid,
|
|
url: 'pages/special/single_details'
|
|
});
|
|
},
|
|
// 收藏、取消收藏
|
|
collect() {
|
|
this.$util.checkLogin(() => {
|
|
collectSpecial(this.id).then(() => {
|
|
this.special.collect = !this.special.collect;
|
|
this.$util.showMsg(
|
|
this.special.collect ? "收藏成功" : "取消收藏成功"
|
|
);
|
|
});
|
|
}, true);
|
|
},
|
|
changeVal: function (opt) {
|
|
if (typeof opt !== "object") {
|
|
opt = {};
|
|
}
|
|
var action = opt.action || "";
|
|
var value = opt.value || "";
|
|
this[action] && this[action](value);
|
|
},
|
|
// 点击遮罩层
|
|
maskClick() {
|
|
this.shareShow = false;
|
|
this.groupChartShow = false;
|
|
this.dialogShow = false;
|
|
this.certificateImage = "";
|
|
},
|
|
// 立即购买
|
|
buy(type) {
|
|
this.pay_type_num = type;
|
|
this.$util.checkLogin(() => {
|
|
switch (type) {
|
|
case 1:
|
|
if (!this.special.pay_type) {
|
|
return this.$util.showMsg("免费的不可以赠送哦");
|
|
}
|
|
if (this.is_member && !this.special.member_pay_type) {
|
|
return this.$util.showMsg("会员价免费的不可以赠送哦");
|
|
}
|
|
this.money = this.special.money;
|
|
this.payDialogOpen = true;
|
|
break;
|
|
case 2:
|
|
this.money = this.is_member
|
|
? this.special.member_money
|
|
: this.special.money;
|
|
this.payDialogOpen = true;
|
|
break;
|
|
case 3:
|
|
this.money = this.special.pink_money;
|
|
this.payDialogOpen = true;
|
|
break;
|
|
case 4:
|
|
uni.showLoading({ mask: true });
|
|
receiveGift(this.orderId)
|
|
.then(({ msg }) => {
|
|
uni.hideLoading();
|
|
this.$util.showMsg(msg);
|
|
uni.navigateTo({
|
|
url: "/pages/special/grade_special",
|
|
});
|
|
})
|
|
.catch(({ msg }) => {
|
|
this.$util.showMsg(msg);
|
|
uni.hideLoading();
|
|
});
|
|
|
|
break;
|
|
case 5:
|
|
if (this.special.light_type === 1) {
|
|
uni.navigateTo({
|
|
url: "/pages/special/single_text_detail?try=0&id=" + this.id,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "/pages/special/single_con_detail?try=1&id=" + this.id,
|
|
});
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}, true);
|
|
},
|
|
// 支付方式回调
|
|
pay_order: function (data) {
|
|
this.orderId = data.data.result.orderId || "";
|
|
switch (data.data.status) {
|
|
case "PAY_ERROR":
|
|
case "ORDER_EXIST":
|
|
case "ORDER_ERROR":
|
|
this.extendOrder(data.msg);
|
|
break;
|
|
case "WECHAT_PAY":
|
|
this.wechatPay(data.data.result.jsConfig);
|
|
break;
|
|
case "WECHAT_H5_PAY":
|
|
this.payDialogOpen = false;
|
|
this.$util.wechatH5Pay(data.data.result.jsConfig, this);
|
|
break;
|
|
case "WECHAT_ROUTINE_PAY":
|
|
this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
|
|
break;
|
|
case "SUCCESS":
|
|
this.successOrder(data.msg);
|
|
break;
|
|
case "ZHIFUBAO_PAY":
|
|
this.aliPay(data.data.result, "special");
|
|
break;
|
|
case 'TOUTIAO_PAY':
|
|
this.$util.toutiaoPay(data.data.result.jsConfig, this);
|
|
break;
|
|
case 'KUAISHOU_PAY':
|
|
this.$util.kuaishouPay(data.data.result.jsConfig, this);
|
|
break;
|
|
}
|
|
},
|
|
aliPay(msn, type) {
|
|
this.$util.aliPay(msn, type, this);
|
|
},
|
|
// 微信支付
|
|
wechatPay: function (config) {
|
|
this.$util.weixinpay(config, this);
|
|
},
|
|
// 支付成功
|
|
successOrder: function (msg) {
|
|
this.$util.showMsg(msg ? msg : "支付成功");
|
|
this.payDialogOpen = false;
|
|
switch (parseInt(this.pay_type_num)) {
|
|
case 1:
|
|
uni.navigateTo({
|
|
url: `/pages/special/gift_special?orderId=${this.orderId}`,
|
|
});
|
|
break;
|
|
case 2:
|
|
this.isPay = true;
|
|
this.payment = true;
|
|
break;
|
|
case 3:
|
|
uni.navigateTo({
|
|
url: `/pages/special/pink?orderId=${this.orderId}`,
|
|
});
|
|
break;
|
|
}
|
|
|
|
validitySpecial(this.id).then((res) => {
|
|
this.special_validity = res.data.validity;
|
|
});
|
|
},
|
|
updateMaterialStatus() {
|
|
this.otherLoading = false;
|
|
this.otherLoaded = false;
|
|
this.where.page = 1;
|
|
this.$set(this, "otherTaskList", []);
|
|
this.getCourseList();
|
|
},
|
|
// 支付未完成
|
|
extendOrder: function (msg) {
|
|
var that = this;
|
|
if (typeof msg === "object") {
|
|
if (msg.errMsg === "chooseWXPay:cancel") {
|
|
msg = "微信支付取消";
|
|
} else {
|
|
msg = "支付失败";
|
|
}
|
|
} else {
|
|
msg = "支付失败";
|
|
}
|
|
this.$util.showMsg(msg, "error");
|
|
that.payDialogOpen = false;
|
|
if (that.orderId) {
|
|
delSpecialOrder(that.orderId).then((res) => {
|
|
});
|
|
}
|
|
},
|
|
// 评分
|
|
rateChange(value) {
|
|
this.rateValue = value;
|
|
},
|
|
// 上传图片
|
|
imageUpload(path) {
|
|
this.imageList.push(path);
|
|
},
|
|
// 删除图片
|
|
imageDelete(index) {
|
|
this.imageList.splice(index, 1);
|
|
},
|
|
// 提交评价
|
|
async evaluateSubmit(text) {
|
|
uni.showLoading({ mask: true });
|
|
try {
|
|
const { msg } = await submitSpecialComment(this.id, {
|
|
satisfied_score: this.rateValue,
|
|
comment: text.trim(),
|
|
pics: this.imageList,
|
|
});
|
|
uni.hideLoading();
|
|
|
|
this.$util.showMsg(msg);
|
|
this.dialogShow = false;
|
|
this.specialReplyData();
|
|
this.evaluateFinished = false;
|
|
this.evaluatePage = 1;
|
|
this.replyList = [];
|
|
this.specialReplyList();
|
|
} catch (err) {
|
|
uni.hideLoading();
|
|
this.$util.showMsg(err.msg);
|
|
}
|
|
},
|
|
// 我要评价
|
|
userEvaluate() {
|
|
this.$util.checkLogin(() => {
|
|
if (!this.isPay) {
|
|
return this.$util.showMsg("购买学习后既可进行评价");
|
|
}
|
|
this.dialogShow = true;
|
|
}, true);
|
|
},
|
|
// 去练习、答题
|
|
goQuestion(question) {
|
|
this.$util.checkLogin(() => {
|
|
if (question.is_pay || this.isPay) {
|
|
let url =
|
|
question.type === 1
|
|
? "/pages/topic/problem_index"
|
|
: "/pages/special/question_index" + "?id=" + question.id;
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
} else {
|
|
this.payDialogOpen = true;
|
|
}
|
|
}, true);
|
|
},
|
|
// 客服
|
|
customerService() {
|
|
this.$util.goSupport(CUSTOMER_DETAIL_TYPE.GOOD, CUSTOMER_SUPPORT_TYPE.SPECIAL, this.id, this.special.mer_id);
|
|
},
|
|
// 首页
|
|
goHome() {
|
|
uni.switchTab({
|
|
url: "/pages/index/index",
|
|
});
|
|
},
|
|
|
|
// 控制栏自动隐藏
|
|
onPlayerHideBar: function () {
|
|
this.tryShow = true;
|
|
},
|
|
// 控制栏自动显示
|
|
onPlayerShowBar: function () {
|
|
this.tryShow = false;
|
|
},
|
|
|
|
showLoginPage() {
|
|
this.$util.jumpLogin(this);
|
|
},
|
|
// 订阅通知模板id
|
|
getTemplateIds() {
|
|
getSpecialTemplateIds(this.pay_type_num, this.id).then(({ msg }) => {
|
|
this.templateIds = msg;
|
|
});
|
|
},
|
|
// 记录浏览人数
|
|
addLearningRecords() {
|
|
addLearningRecords(this.id);
|
|
},
|
|
// 去拼团
|
|
goPink(id, uid) {
|
|
if (uid === this.uid && this.isPink) {
|
|
uni.navigateTo({
|
|
url: `/pages/special/pink?orderId=${this.orderId}&is_help=0&special_id=${this.id}&pink_id=${this.pinkId}`,
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `/pages/special/pink?orderId=${this.orderId}&is_help=1&special_id=${this.id}&pink_id=${id ? id : this.pinkId
|
|
}`,
|
|
});
|
|
}
|
|
},
|
|
// 播放记忆
|
|
viewing(currentTime) {
|
|
saveSpecialViewing({
|
|
special_id: this.id,
|
|
task_id: 0,
|
|
total: this.duration * 1e3,
|
|
viewing_time: currentTime * 1e3,
|
|
percentage: Math.floor((currentTime / this.duration) * 100),
|
|
});
|
|
},
|
|
// 发放证书
|
|
inspect() {
|
|
getInspectData(this.id, 1).then(() => {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "恭喜您达到发放证书要求，是否领取？",
|
|
okText: "领取",
|
|
success: ({ confirm }) => {
|
|
if (!confirm) return;
|
|
this.getTheCertificate();
|
|
},
|
|
});
|
|
});
|
|
},
|
|
// 领取证书
|
|
getTheCertificate() {
|
|
getSpecialCertificate(this.id).then(({ msg }) => {
|
|
this.$util.showMsg("领取成功\n证书制作中...");
|
|
this.viewCertificate(msg);
|
|
});
|
|
},
|
|
// 证书信息
|
|
viewCertificate(id) {
|
|
getSpecialCertificateInfo(id).then(({ data }) => {
|
|
// this.createCertificate(data);
|
|
this.renderProductPoster2(data);
|
|
});
|
|
},
|
|
// 加载图片
|
|
loadImage: function (path) {
|
|
return new Promise(function (resolve, reject) {
|
|
var image = new Image();
|
|
image.crossOrigin = "anonymous";
|
|
image.src = path + "?" + new Date().getTime();
|
|
image.onload = function () {
|
|
resolve(image);
|
|
};
|
|
image.onerror = function () {
|
|
reject("error-image");
|
|
};
|
|
});
|
|
},
|
|
// 制作证书
|
|
async renderProductPoster2(data) {
|
|
this.isPosterCanvasVisable2 = true
|
|
let id = "poster2"
|
|
let task1 = this.$util.getImagePath(data.certificate.background);
|
|
let task2 = this.$util.getImagePath(data.certificate.qr_code);
|
|
const [bgPath, codePath] = await Promise.all([task1, task2]);
|
|
let WIDTH = 600;
|
|
let HEIGHT = 850;
|
|
let site_name = "知识付费"
|
|
let context = uni.createCanvasContext(id);
|
|
|
|
context.drawImage(bgPath, 0, 0);
|
|
context.drawImage(codePath, 220, 557, 160, 160);
|
|
|
|
context.fillStyle = "rgba(255, 255, 255, 0.8)";
|
|
context.fillRect(220, 724, 160, 36);
|
|
|
|
context.font = "bold 34px sans-serif";
|
|
context.textAlign = "center";
|
|
context.fillStyle = "#29466D";
|
|
context.fillText(data.nickname, 300, 296);
|
|
|
|
context.font = "24px sans-serif";
|
|
context.fillText(
|
|
"颁发时间：" +
|
|
dayjs(data.add_time * 1000).format("YYYY.MM.DD"),
|
|
300,
|
|
490
|
|
);
|
|
|
|
context.font = "20px sans-serif";
|
|
context.fillStyle = "#666666";
|
|
context.fillText("长按二维码查看", 300, 748);
|
|
|
|
context.font = "28px sans-serif";
|
|
context.textAlign = "start";
|
|
context.fillStyle = "#333333";
|
|
|
|
let lineWidth = 0;
|
|
let substringFrom = 0;
|
|
let offsetTop = 364;
|
|
for (let i = 0; i < data.certificate.explain.length; i++) {
|
|
lineWidth += context.measureText(
|
|
data.certificate.explain[i]
|
|
).width;
|
|
if (lineWidth > 434) {
|
|
context.fillText(
|
|
data.certificate.explain.substring(substringFrom, i),
|
|
83,
|
|
offsetTop
|
|
);
|
|
lineWidth = 0;
|
|
substringFrom = i;
|
|
offsetTop += 50;
|
|
}
|
|
if (i == data.certificate.explain.length - 1) {
|
|
context.fillText(
|
|
data.certificate.explain.substring(substringFrom, i),
|
|
83,
|
|
offsetTop
|
|
);
|
|
}
|
|
}
|
|
context.draw(true, () => {
|
|
uni.canvasToTempFilePath(
|
|
{
|
|
canvasId: id,
|
|
fileType: "png",
|
|
destWidth: WIDTH,
|
|
destHeight: HEIGHT,
|
|
success: (res) => {
|
|
this.isPosterCanvasVisable2 = false
|
|
uni.previewImage({
|
|
current: 0,
|
|
urls: [res.tempFilePath],
|
|
})
|
|
context = null;
|
|
},
|
|
fail: (err) => {
|
|
this.isPosterCanvasVisable2 = false
|
|
context = null;
|
|
},
|
|
}
|
|
);
|
|
});
|
|
},
|
|
createCertificate: function (certificate) {
|
|
var vm = this;
|
|
$h.loadFFF();
|
|
Promise.all([
|
|
this.loadImage(certificate.certificate.background),
|
|
this.loadImage(certificate.certificate.qr_code),
|
|
])
|
|
.then(function (images) {
|
|
var canvas = document.createElement("canvas");
|
|
var context = canvas.getContext("2d");
|
|
|
|
canvas.width = images[0].width;
|
|
canvas.height = images[0].height;
|
|
|
|
context.drawImage(images[0], 0, 0);
|
|
context.drawImage(images[1], 220, 557, 160, 160);
|
|
|
|
context.fillStyle = "rgba(255, 255, 255, 1)";
|
|
context.fillRect(220, 724, 160, 36);
|
|
|
|
context.font = "20px sans-serif";
|
|
context.textAlign = "center";
|
|
context.fillStyle = "#666666";
|
|
context.fillText("长按二维码查看", 300, 748);
|
|
|
|
context.font = "bold 34px sans-serif";
|
|
context.fillStyle = "#29466D";
|
|
context.fillText(certificate.nickname, 300, 296);
|
|
|
|
context.font = "24px sans-serif";
|
|
context.fillText(
|
|
"颁发时间：" +
|
|
moment(certificate.add_time * 1000).format("YYYY.MM.DD"),
|
|
300,
|
|
481
|
|
);
|
|
|
|
context.font = "28px sans-serif";
|
|
context.textAlign = "start";
|
|
context.fillStyle = "#333333";
|
|
|
|
for (
|
|
var i = Math.ceil(certificate.certificate.explain.length % 16);
|
|
i--;
|
|
|
|
) {
|
|
context.fillText(
|
|
certificate.certificate.explain.substr(i * 16, 16),
|
|
83,
|
|
i * 40 + 370
|
|
);
|
|
}
|
|
|
|
this.certificateImage = canvas.toDataURL("image/jpeg");
|
|
canvas = null;
|
|
})
|
|
.catch(function (err) { });
|
|
},
|
|
// 弹幕
|
|
getBarrageList() {
|
|
getBarrageList(this.id).then(({ data }) => {
|
|
let barrageLen = 0;
|
|
this.barrageList = data;
|
|
barrageLen = this.barrageList.length;
|
|
if (!barrageLen) {
|
|
return;
|
|
}
|
|
this.timerFlag = setInterval(() => {
|
|
this.barrage_index++;
|
|
if (this.barrage_index >= barrageLen) {
|
|
this.barrage_index = 0;
|
|
}
|
|
setBarrageIndex(this.barrage_index);
|
|
}, this.barrageShowTime * 1000);
|
|
});
|
|
},
|
|
// 关联资料
|
|
specialDataDownload() {
|
|
getSpecialMaterial(this.id).then(({ data }) => {
|
|
this.specialDownload = data;
|
|
});
|
|
},
|
|
// 获取返佣金额
|
|
rebateAmount() {
|
|
getRebateAmount(this.id).then(({ data }) => {
|
|
this.rebateMoney = data.brokeragePrice;
|
|
});
|
|
},
|
|
rebateAction(value) {
|
|
switch (value) {
|
|
case "close":
|
|
this.rebateMoney = 0;
|
|
break;
|
|
case "share":
|
|
this.handleCreateSharePoster();
|
|
break;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style>
|
|
|
|
<style scoped lang="scss">
|
|
/* 轻课程 */
|
|
.wechat {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.validity {
|
|
padding-left: 30rpx;
|
|
background: url(getAssetsPath("/wap/first/zsff/images/validity.png")) center/cover no-repeat;
|
|
font-size: 26rpx;
|
|
line-height: 80rpx;
|
|
color: #ff6b00;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
margin-top: -40rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.detail-wrap {
|
|
padding-bottom: calc(100rpx + var(--safe-bottom));
|
|
}
|
|
|
|
.single-special .certificate-image {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 56;
|
|
width: 600rpx;
|
|
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.single-special .finished,
|
|
.single-special .loading {
|
|
font-size: 28rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
color: #bbb;
|
|
}
|
|
|
|
.single-special .fa-spin {
|
|
animation: fa-spin 1s infinite linear;
|
|
}
|
|
|
|
.single-special .empty {
|
|
padding-top: 50rpx;
|
|
padding-bottom: 50rpx;
|
|
background-color: #ffffff;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: #bbb;
|
|
}
|
|
|
|
.single-special .empty image {
|
|
display: block;
|
|
width: 414rpx;
|
|
height: 305rpx;
|
|
margin: 0 auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.single-special .prism-player .prism-big-play-btn {
|
|
left: 50% !important;
|
|
bottom: 50% !important;
|
|
|
|
transform: translate(-50%, 50%);
|
|
}
|
|
|
|
.single-special .prism-player .prism-info-display {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.single-special .header {
|
|
position: relative;
|
|
/* height: 420rpx; */
|
|
}
|
|
|
|
.single-special .header>image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.single-special .header .try {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 30rpx;
|
|
z-index: 12;
|
|
padding: 11rpx 16rpx 11rpx 14rpx;
|
|
border-radius: 23rpx;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
font-size: 22rpx;
|
|
line-height: 1;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.single-special .header .try .iconfont {
|
|
margin-right: 8rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.single-special .special-attr {
|
|
padding: 20rpx 30rpx 30rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.single-special .special-attr .title {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.single-special .special-attr .label {
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.single-special .special-attr .label view {
|
|
flex-shrink: 0;
|
|
height: 40rpx;
|
|
padding-right: 12rpx;
|
|
padding-left: 12rpx;
|
|
border-radius: 3rpx;
|
|
background-color: rgba(44, 142, 255, 0.06);
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
color: #2c8eff;
|
|
}
|
|
|
|
.single-special .special-attr .label view view {
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.single-special .special-attr .money-button {
|
|
display: flex;
|
|
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.single-special .special-attr .money {
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.single-special .special-attr .money text {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.single-special .special-attr .money view:nth-child(2) {
|
|
padding-right: 46rpx;
|
|
margin-left: 8rpx;
|
|
background: url(getAssetsPath("/wap/first/zsff/images/vip.png")) right center/46rpx 21rpx no-repeat;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.single-special .special-attr .button {
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
font-size: 26rpx;
|
|
line-height: normal;
|
|
color: #999999;
|
|
text-align: center;
|
|
}
|
|
|
|
.single-special .special-attr .button+.button {
|
|
width: 3em;
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
.single-special .special-attr .iconfont {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.single-special .special-attr .iconshoucang2 {
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.single-special .special-attr .button view {
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.single-special .group-chat {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
padding: 12rpx 30rpx;
|
|
border-radius: 12rpx;
|
|
margin: 0 20rpx;
|
|
background-color: #e2efff;
|
|
font-size: 26rpx;
|
|
color: #2c8eff;
|
|
}
|
|
|
|
.single-special .group-chat view {
|
|
flex: 1;
|
|
}
|
|
|
|
.single-special .group-chat button {
|
|
padding: 5rpx 20rpx;
|
|
border-radius: 23rpx;
|
|
background-color: #2c8eff;
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
font-size: 24rpx;
|
|
color: #f5f5f5;
|
|
}
|
|
|
|
.single-special .learner-teacher {
|
|
padding: 30rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.single-special .learner-teacher .learner {
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
padding-top: 6rpx;
|
|
padding-bottom: 6rpx;
|
|
font-size: 24rpx;
|
|
line-height: normal;
|
|
color: #666;
|
|
}
|
|
|
|
.single-special .learner-teacher .learner view {
|
|
flex-shrink: 0;
|
|
margin-right: 20rpx;
|
|
font-size: 0;
|
|
}
|
|
|
|
.single-special .learner-teacher .learner image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 50%;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.single-special .learner-teacher .learner image image {
|
|
margin-left: -13rpx;
|
|
}
|
|
|
|
.single-special .learner-teacher .learner+.teacher {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.single-special .learner-teacher .teacher {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.single-special .learner-teacher .teacher image {
|
|
display: block;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 50%;
|
|
background-color: #9d8585;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.lecturer-body {
|
|
flex: 1;
|
|
margin-left: 18rpx;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.single-special .learner-teacher .label {
|
|
display: flex;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.single-special .learner-teacher .label view {
|
|
height: 34rpx;
|
|
padding-right: 12rpx;
|
|
padding-left: 12rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #fff0e5;
|
|
font-weight: normal;
|
|
font-size: 22rpx;
|
|
line-height: 34rpx;
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.single-special .learner-teacher .label view view {
|
|
margin-left: 5rpx;
|
|
}
|
|
|
|
.single-special .learner-teacher .iconfont {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.single-special .group-buy {
|
|
margin-top: 14rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.single-special .group-buy .marquee {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
padding-left: 32rpx;
|
|
background-color: #fff0e5;
|
|
font-size: 24rpx;
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.single-special .group-buy .iconfont {
|
|
margin-right: 20rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.single-special .group-buy .swiper-container {
|
|
flex: 1;
|
|
height: 62rpx;
|
|
padding-left: 20rpx;
|
|
margin-left: 20rpx;
|
|
font-size: 24rpx;
|
|
line-height: 62rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.single-special .group-buy .swiper-container::before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 1px;
|
|
height: 30rpx;
|
|
border-left: 1px solid #282828;
|
|
|
|
box-sizing: border-box;
|
|
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.single-special .group-buy .list {
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
.single-special .group-buy .item {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
padding-top: 25rpx;
|
|
padding-right: 30rpx;
|
|
padding-bottom: 25rpx;
|
|
}
|
|
|
|
.single-special .group-buy .item+.item {
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.single-special .group-buy .item image {
|
|
display: block;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background-color: #e93323;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.single-special .group-buy .item>view view {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.single-special .group-buy .item>view:nth-child(2) {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
}
|
|
|
|
.single-special .group-buy .item>view:nth-child(3) {
|
|
text-align: right;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.single-special .group-buy .item>view:nth-child(3) text {
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.single-special .group-buy .item>view:nth-child(3) view:last-child {
|
|
font-size: 22rpx;
|
|
color: #82848f;
|
|
}
|
|
|
|
.single-special .group-buy .item button {
|
|
width: 140rpx;
|
|
height: 50rpx;
|
|
border-radius: 25rpx;
|
|
margin-left: 35rpx;
|
|
|
|
background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.single-special .group-buy>view:nth-child(3) {
|
|
padding-top: 9rpx;
|
|
padding-bottom: 24rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
color: #282828;
|
|
}
|
|
|
|
.single-special .group-way {
|
|
margin-top: 14rpx;
|
|
background-color: #ffffff;
|
|
font-size: 28rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.single-special .group-way .way-title {
|
|
height: 86rpx;
|
|
padding-left: 30rpx;
|
|
line-height: 86rpx;
|
|
}
|
|
|
|
.single-special .group-way .list {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
height: 110rpx;
|
|
padding-left: 30rpx;
|
|
border-top: 1px solid #eee;
|
|
font-size: 26rpx;
|
|
counter-reset: ul;
|
|
}
|
|
|
|
.single-special .group-way .item {
|
|
position: relative;
|
|
padding-left: 34rpx;
|
|
}
|
|
|
|
.single-special .group-way .item ::before {
|
|
counter-increment: ul;
|
|
content: counter(ul);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
border: 1px solid #282828;
|
|
border-radius: 50%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
transform: translateY(-50%);
|
|
font-size: 22rpx;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.single-special .group-way .item:not(:last-child) {
|
|
padding-right: 66rpx;
|
|
margin-right: 40rpx;
|
|
background: url(getAssetsPath("/wap/first/zsff/images/group-way.png")) right center/28rpx no-repeat;
|
|
}
|
|
|
|
.single-special .detail {
|
|
padding: 30rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.single-special .detail image {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.single-special .tabbar {
|
|
position: relative;
|
|
|
|
display: flex;
|
|
height: 96rpx;
|
|
padding-left: 5rpx;
|
|
margin-top: 14rpx;
|
|
|
|
box-sizing: border-box;
|
|
background-color: #ffffff;
|
|
|
|
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
|
|
font-size: 30rpx;
|
|
line-height: 96rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.single-special .tabbar .item {
|
|
position: relative;
|
|
padding-right: 25rpx;
|
|
padding-left: 25rpx;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.single-special .tabbar .item.on {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.single-special .tabbar .item.on::after {
|
|
content: " ";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 44rpx;
|
|
height: 4rpx;
|
|
border-radius: 2rpx;
|
|
background-color: #2c8eff;
|
|
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.single-special .exercise {
|
|
padding: 30rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.single-special .exercise .item {
|
|
padding: 30rpx;
|
|
border-radius: 12rpx;
|
|
|
|
box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
.single-special .exercise .item+.item {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.single-special .exercise .title {
|
|
font-size: 30rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.single-special .exercise .title .iconfont {
|
|
margin-right: 20rpx;
|
|
font-size: 30rpx;
|
|
color: #ccc;
|
|
}
|
|
|
|
.single-special .exercise .group {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.single-special .exercise .progress {
|
|
width: 160rpx;
|
|
height: 12rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 10rpx;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.single-special .exercise .progress view {
|
|
height: 100%;
|
|
border-radius: 6rpx;
|
|
background-color: #2c8eff;
|
|
}
|
|
|
|
.single-special .exercise .group>view:nth-child(2) {
|
|
width: 98rpx;
|
|
}
|
|
|
|
.single-special .exercise .group>view:nth-child(3) {
|
|
flex: 1;
|
|
}
|
|
|
|
.single-special .exercise button {
|
|
width: 120rpx;
|
|
height: 42rpx;
|
|
border-radius: 21rpx;
|
|
background-color: #2c8eff;
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.single-special .exercise button .iconfont {
|
|
margin-right: 10rpx;
|
|
font-size: 19rpx;
|
|
}
|
|
|
|
.single-special .question {
|
|
padding: 30rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.single-special .question .item {
|
|
padding-right: 30rpx;
|
|
padding-left: 30rpx;
|
|
border-radius: 12rpx;
|
|
|
|
box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
.single-special .question .item .item {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.single-special .question .head {
|
|
display: flex;
|
|
padding-top: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.single-special .question image {
|
|
display: block;
|
|
width: 240rpx;
|
|
height: 135rpx;
|
|
border-radius: 10rpx;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.single-special .question .head>view:last-child {
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-between;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.single-special .question .title {
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.single-special .question .group {
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.single-special .question .iconfont {
|
|
font-size: 30rpx;
|
|
color: #ccc;
|
|
}
|
|
|
|
.single-special .question button {
|
|
width: 120rpx;
|
|
height: 42rpx;
|
|
border-radius: 21rpx;
|
|
background-color: #2c8eff;
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
color: #ffffff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.single-special .question button .iconfont {
|
|
margin-right: 10rpx;
|
|
font-size: 19rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.single-special .evaluate>view:first-child {
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
padding: 33rpx 30rpx 13rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.single-special .evaluate button {
|
|
padding: 9rpx 28rpx;
|
|
border-radius: 28rpx;
|
|
|
|
background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.single-special .evaluate .score {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #ff6b00;
|
|
}
|
|
|
|
.single-special .evaluate .score text {
|
|
margin-right: 5rpx;
|
|
font-weight: bold;
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.single-special .evaluate .score view:last-child {
|
|
padding: 3rpx 25rpx;
|
|
border-radius: 21rpx;
|
|
margin-left: 15rpx;
|
|
background-color: #f5f5f5;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.single-special .footer {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 9;
|
|
|
|
display: flex;
|
|
height: 100rpx;
|
|
|
|
height: calc(100rpx + var(--safe-bottom));
|
|
padding-right: 30rpx;
|
|
padding-left: 8rpx;
|
|
border-top: 1px solid #eee;
|
|
background-color: #ffffff;
|
|
padding-bottom: var(--safe-bottom);
|
|
}
|
|
|
|
.single-special .footer>.button {
|
|
width: 84rpx;
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
font-size: 18rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
.single-special .footer>.button:nth-child(3) {
|
|
width: 98rpx;
|
|
}
|
|
|
|
.single-special .footer>.button image {
|
|
display: block;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 16rpx auto 5rpx;
|
|
}
|
|
|
|
.learn-btn {
|
|
flex: 1;
|
|
align-self: center;
|
|
|
|
display: flex;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
margin-left: 26rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.learn-btn button {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-family: inherit;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
line-height: 76rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.learn-btn button:first-child {
|
|
background: linear-gradient(90deg, #ff6b00 0%, #ff9100 100%);
|
|
}
|
|
|
|
.learn-btn button:last-child {
|
|
background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
|
|
}
|
|
|
|
.learn-btn button view {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.single-special .audio-panel {
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
height: 100%;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.single-special .audio-panel image {
|
|
display: block;
|
|
width: 464rpx;
|
|
height: 160rpx;
|
|
margin: 0 auto;
|
|
object-fit: contain;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.single-special .audio-panel .control {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
padding-right: 30rpx;
|
|
padding-left: 30rpx;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.single-special .audio-panel .icon {
|
|
font-size: 64rpx;
|
|
color: #2c8eff;
|
|
}
|
|
|
|
.single-special .audio-panel .timeline {
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
margin-left: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #2c8eff;
|
|
}
|
|
|
|
.single-special .audio-panel .track {
|
|
flex: 1;
|
|
height: 4rpx;
|
|
border-radius: 2rpx;
|
|
margin-right: 18rpx;
|
|
margin-left: 18rpx;
|
|
background-color: rgba(44, 142, 255, 0.2);
|
|
}
|
|
|
|
.single-special .audio-panel .range {
|
|
position: relative;
|
|
width: 0;
|
|
height: 100%;
|
|
border-radius: 2rpx;
|
|
background-color: #2c8eff;
|
|
}
|
|
|
|
.single-special .audio-panel .thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 100%;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
background-color: #2c8eff;
|
|
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.single-special .share-dialog {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 1001;
|
|
width: 600rpx;
|
|
height: 960rpx;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.single-special .group-chart-dialog {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 56;
|
|
width: 600rpx;
|
|
padding-top: 100rpx;
|
|
padding-bottom: 60rpx;
|
|
border-radius: 30rpx;
|
|
background-color: #ffffff;
|
|
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.single-special .group-chart-dialog image {
|
|
display: block;
|
|
width: 354rpx;
|
|
height: 354rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.single-special .barrage {
|
|
position: fixed;
|
|
top: 100rpx;
|
|
left: 30rpx;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
max-width: calc(100% - 60rpx);
|
|
height: 48rpx;
|
|
padding-right: 24rpx;
|
|
padding-left: 4rpx;
|
|
border-radius: 24rpx;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.single-special .barrage image {
|
|
display: block;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
|
|
object-fit: cover;
|
|
}
|
|
|
|
.single-special .barrage view:nth-child(2) {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.exchange-guide {
|
|
position: fixed;
|
|
top: 50%;
|
|
right: 0;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
height: 62rpx;
|
|
padding-right: 21rpx;
|
|
padding-left: 28rpx;
|
|
border-top-left-radius: 31rpx;
|
|
border-bottom-left-radius: 31rpx;
|
|
background-color: #2c8eff;
|
|
-webkit-box-shadow: 0 2rpx 10rpx rgba(76, 146, 226, 0.25);
|
|
box-shadow: 0 2rpx 1rpx rgba(76, 146, 226, 0.25);
|
|
font-size: 30rpx;
|
|
line-height: normal;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.video_footer_btn_left {
|
|
width: 35%;
|
|
height: 100%;
|
|
background: #ff6b00;
|
|
}
|
|
|
|
.video_footer_btn_left_pic {
|
|
font-size: 28rpx;
|
|
line-height: 22rpx;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.video_footer_btn_left_num {
|
|
font-size: 20rpx;
|
|
line-height: 20rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
|
|
.video_footer_btn_left_pic+.video_footer_btn_left_num {
|
|
margin-top: 9rpx;
|
|
}
|
|
|
|
.poster-canvas2 {
|
|
width: 1200rpx;
|
|
height: 1700rpx;
|
|
}
|
|
</style> |