|
|
|
|
<template>
|
|
|
|
|
<banner />
|
|
|
|
|
<div class="main bg">
|
|
|
|
|
<div class="mainbox">
|
|
|
|
|
|
|
|
|
|
<div class="box-title" v-if="newLiveList.length>0">
|
|
|
|
|
<h2>直播课程</h2>
|
|
|
|
|
<router-link to="/live" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-carousel indicator-position="outside" v-if="newLiveList.length>0" class="live-box" height="220px">
|
|
|
|
|
<el-carousel-item v-for="(item, i) in newLiveList" :key="i">
|
|
|
|
|
<li class="item">
|
|
|
|
|
<div class="cover-mask">
|
|
|
|
|
<el-image class="cover" :src="item.cover"></el-image>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="info">
|
|
|
|
|
<div class="lfbox">
|
|
|
|
|
<h2 class="hide-txt">{{item.title}}</h2>
|
|
|
|
|
<div class="f16 hide-txt">{{item.description}}</div>
|
|
|
|
|
<div class="flex-1 speaker">
|
|
|
|
|
<img class="speaker-uid" :src="item.speaker_uid" alt="">
|
|
|
|
|
<div>
|
|
|
|
|
<p>主讲人</p>
|
|
|
|
|
<p>{{item.speaker}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rtbox flex-2 flex-1">
|
|
|
|
|
<a class="btn-008 btn-008-big f16" :href="'live/'+item.liveid">已有{{item.number_people}}人报名，立即报名</a>
|
|
|
|
|
<div v-html="item.downtime"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
</el-carousel-item>
|
|
|
|
|
</el-carousel>
|
|
|
|
|
|
|
|
|
|
<div class="m-dn" style="height: 26px" v-if="newLiveList.length<=0"></div>
|
|
|
|
|
|
|
|
|
|
<div class="box-title m-dn" style="padding-top: 14px">
|
|
|
|
|
<h2>学习班</h2>
|
|
|
|
|
<router-link to="/class" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="study-class m-dn">
|
|
|
|
|
<div class="cover">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :span="6" v-for="(item, i) in studyClass" :key="i">
|
|
|
|
|
<ul>
|
|
|
|
|
<a class="link" :href="item.url1" target="_blank">
|
|
|
|
|
<img :style="item.imgsty" :src="item.img" />
|
|
|
|
|
<div class="bmbtn">立即报名</div>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<li :class="'hover_' + i">
|
|
|
|
|
<a class="link2" :href="item.url2" :style="item.linksty" target="_blank">
|
|
|
|
|
<i class="title" :style="item.txtbg">能力认证<em :style="item.arrow"></em></i>
|
|
|
|
|
<span :style="item.txtcol">{{ item.text2 }}</span>
|
|
|
|
|
<i class="arrow el-icon-arrow-right" :style="item.txtcol"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a class="link2" :href="item.url3" :style="item.linksty" target="_blank">
|
|
|
|
|
<i class="title" :style="item.txtbg">岗位招聘<em :style="item.arrow"></em></i>
|
|
|
|
|
<span :style="item.txtcol">{{ item.text3 }}</span>
|
|
|
|
|
<i class="arrow el-icon-arrow-right" :style="item.txtcol"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="height: 50px;" class="m-dn"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 移动端学习班 -->
|
|
|
|
|
<div class="mainbox dn m-db">
|
|
|
|
|
<div class="box-title" style="padding-top: 14px">
|
|
|
|
|
<h2>学习班</h2>
|
|
|
|
|
<router-link to="/class" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="study_class_m">
|
|
|
|
|
|
|
|
|
|
<li v-for="(item, i) in studyClass" :key="i" :style="item.m_bg">
|
|
|
|
|
<a class="link" :href="item.url1" target="_blank">
|
|
|
|
|
<img :src="item.m_img" class="chatu" />
|
|
|
|
|
<div class="txt">
|
|
|
|
|
<div class="txt1">{{item.m_txt1}}</div>
|
|
|
|
|
<div class="txt2">{{item.m_txt2}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bmbtn">立即报名</div>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="wtbg pb60">
|
|
|
|
|
<div class="mainbox">
|
|
|
|
|
<div class="box-title">
|
|
|
|
|
<h2>热门课程</h2>
|
|
|
|
|
<router-link to="/video?sort=1" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-hot flex-3">
|
|
|
|
|
<li class="item" v-for="(item, i) in video_hot" :key="i">
|
|
|
|
|
<router-link :to="'/video/'+item.id" target="_blank" class="flex-3-m">
|
|
|
|
|
<div class="imgps">
|
|
|
|
|
<el-image class="img" :src="item.img"></el-image>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rtbox-m">
|
|
|
|
|
<h2 class="hide-txt2 f16">{{item.title}}</h2>
|
|
|
|
|
<div class="tag">{{item.price}}</div>
|
|
|
|
|
<div class="info flex-3">
|
|
|
|
|
<span>{{item.class_hour}}</span>
|
|
|
|
|
<h5>{{item.number_people}}</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</router-link>
|
|
|
|
|
</li>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mainbox m_pb_0" style="padding-bottom: 30px;">
|
|
|
|
|
<div class="box-title">
|
|
|
|
|
<h2>新上好课</h2>
|
|
|
|
|
<router-link to="/video?sort=0" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-new">
|
|
|
|
|
<li class="item" v-for="(item, i) in video_new" :key="i">
|
|
|
|
|
<router-link :to="'/video/'+item.id" class="flex-3" target="_blank">
|
|
|
|
|
<div class="imgps">
|
|
|
|
|
<el-image class="img" :src="item.img"></el-image>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rtbox">
|
|
|
|
|
<h2 class="hide-txt2 f16">{{item.title}}</h2>
|
|
|
|
|
<div class="saleprice" v-if="item.it618_saleprice>0">
|
|
|
|
|
<span class="colff3">
|
|
|
|
|
<i class="f14">￥</i>{{item.it618_saleprice}}
|
|
|
|
|
</span>
|
|
|
|
|
<del>￥{{item.it618_price}}</del>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tag" v-else>免费</div>
|
|
|
|
|
<div class="info flex-3">
|
|
|
|
|
<span>{{item.class_hour}}</span>
|
|
|
|
|
<h5>{{item.number_people}}</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</router-link>
|
|
|
|
|
</li>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="wtbg pb40">
|
|
|
|
|
|
|
|
|
|
<div class="mainbox" v-for="(item, i) in catelist" :key="i">
|
|
|
|
|
<div class="box-title">
|
|
|
|
|
<h2>{{item.title}}</h2>
|
|
|
|
|
<router-link :to="'/video?class1='+item.class1_id" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i>
|
|
|
|
|
</router-link>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-hot flex-3">
|
|
|
|
|
<li class="item" v-for="(item, i) in item.list" :key="i">
|
|
|
|
|
<i class="new" v-if="i===0"></i>
|
|
|
|
|
<router-link :to="'/video/'+item.id" class="flex-3-m" target="_blank">
|
|
|
|
|
<div class="imgps">
|
|
|
|
|
<el-image class="img" :src="item.img"></el-image>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rtbox-m">
|
|
|
|
|
<h2 class="hide-txt2 f16">{{item.title}}</h2>
|
|
|
|
|
|
|
|
|
|
<div class="saleprice" v-if="item.it618_saleprice>0">
|
|
|
|
|
<span class="colff3">
|
|
|
|
|
<i class="f14">￥</i>{{item.it618_saleprice}}
|
|
|
|
|
</span>
|
|
|
|
|
<del>￥{{item.it618_price}}</del>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tag" v-else>免费</div>
|
|
|
|
|
|
|
|
|
|
<div class="info flex-3">
|
|
|
|
|
<span>{{item.class_hour}}</span>
|
|
|
|
|
<h5>{{item.number_people}}</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</router-link>
|
|
|
|
|
</li>
|
|
|
|
|
<div v-if="[2].includes(item.list.length) " style="width: 276px;"></div>
|
|
|
|
|
<div v-if="[2].includes(item.list.length) " style="width: 276px;"></div>
|
|
|
|
|
<div v-if="[3].includes(item.list.length) " style="width: 276px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mainbox">
|
|
|
|
|
<div class="box-title">
|
|
|
|
|
<h2>付费课程</h2>
|
|
|
|
|
<router-link to="/video?sort=3" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-hot flex-3">
|
|
|
|
|
<li class="item" v-for="(item, i) in video_pay" :key="i">
|
|
|
|
|
<router-link :to="'/video/'+item.id" class="flex-3-m" target="_blank">
|
|
|
|
|
<div class="imgps">
|
|
|
|
|
<el-image class="img" :src="item.img"></el-image>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="rtbox-m">
|
|
|
|
|
<h2 class="hide-txt2 f16">{{item.title}}</h2>
|
|
|
|
|
<div class="saleprice">
|
|
|
|
|
<span class="colff3">
|
|
|
|
|
<i class="f14">￥</i>{{item.saleprice}}
|
|
|
|
|
</span>
|
|
|
|
|
<del>￥{{item.price}}</del>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info flex-3">
|
|
|
|
|
<span>{{item.class_hour}}</span>
|
|
|
|
|
<h5>{{item.number_people}}</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</router-link>
|
|
|
|
|
</li>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div><!-- end main-->
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import banner from "@/components/banner.vue";
|
|
|
|
|
import { getNewlive, getvideo } from "@/api/index";
|
|
|
|
|
import { defineComponent, reactive, toRefs } from "vue";
|
|
|
|
|
import dateFormat from '@/utils/dateFormat';
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: "index",
|
|
|
|
|
components: {
|
|
|
|
|
banner,
|
|
|
|
|
},
|
|
|
|
|
setup() {
|
|
|
|
|
const state = reactive({
|
|
|
|
|
studyClass: [
|
|
|
|
|
{
|
|
|
|
|
img: require('@/assets/index/plate1/img1.png'),
|
|
|
|
|
url1: "https://bbs.fanruan.com/course/DOO/enterprise",
|
|
|
|
|
url2: "https://cert.fanruan.com/detail/fd48d1e0b61211ec85ed00163e0210ff",
|
|
|
|
|
url3: "https://bbs.fanruan.com/jobs-0-3-0-0-0",
|
|
|
|
|
text2: "科学备战FCP-业务分析师认证",
|
|
|
|
|
text3: "帆软数据运营官等你来应聘",
|
|
|
|
|
imgsty: "box-shadow: 0px 2px 3px 0px rgba(28, 96, 224, 0.7);",
|
|
|
|
|
linksty: "background-color:rgba(28, 96, 224, 0.1);",
|
|
|
|
|
arrow: "border-bottom: 21px solid #1c60e0;",
|
|
|
|
|
txtcol: "color: #1c60e0;",
|
|
|
|
|
txtbg: "background: #1c60e0;",
|
|
|
|
|
m_bg: "background: url(" + require('@/assets/index/m/yyg_bg.png') + ") no-repeat;",
|
|
|
|
|
m_img: require('@/assets/index/m/yyg_img.png'),
|
|
|
|
|
m_txt1: "数据运营官",
|
|
|
|
|
m_txt2: "线上学习班火热报名",
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
img: require('@/assets/index/plate1/img2.png'),
|
|
|
|
|
url1: "https://bbs.fanruan.com/course/BI/standard/?sqtj",
|
|
|
|
|
url2: "https://cert.fanruan.com/detail/e6ff3d20b61211eca9e500163e0210ff",
|
|
|
|
|
url3: "https://bbs.fanruan.com/jobs-0-2-0-0-0",
|
|
|
|
|
text2: "科学备战FCP-FineBI认证",
|
|
|
|
|
text3: "帆软BI工程师等你来应聘",
|
|
|
|
|
imgsty: "box-shadow: 0px 2px 3px 0px rgba(163,93,245, 0.7);",
|
|
|
|
|
linksty: "background-color:rgba(155, 76, 213, 0.1);",
|
|
|
|
|
arrow: "border-bottom: 21px solid #9B4CD5;",
|
|
|
|
|
txtcol: "color: #9B4CD5;",
|
|
|
|
|
txtbg: "background: #9B4CD5;",
|
|
|
|
|
m_bg: "background: url(" + require('@/assets/index/m/bi_bg.png') + ") no-repeat;",
|
|
|
|
|
m_img: require('@/assets/index/m/bi_img.png'),
|
|
|
|
|
m_txt1: "BI工程师",
|
|
|
|
|
m_txt2: "从入门到精通·实战班",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
img: require('@/assets/index/plate1/img3.png'),
|
|
|
|
|
url1: "https://bbs.fanruan.com/course/report/standard?sqtj",
|
|
|
|
|
url2: "https://cert.fanruan.com/detail/d9c08fe2b61211ec8dbf00163e0210ff",
|
|
|
|
|
url3: "https://bbs.fanruan.com/jobs-0-1-0-0-0",
|
|
|
|
|
text2: "科学备战FCP-报表开发工程师认证",
|
|
|
|
|
text3: "帆软报表工程师等你来应聘",
|
|
|
|
|
imgsty: "box-shadow: 0px 2px 3px 0px rgba(92,149,254, 0.7);",
|
|
|
|
|
linksty: "background-color:rgba(58, 145, 255, 0.1);",
|
|
|
|
|
arrow: "border-bottom: 21px solid #3A91FF;",
|
|
|
|
|
txtcol: "color: #3A91FF;",
|
|
|
|
|
txtbg: "background: #3A91FF;",
|
|
|
|
|
m_bg: "background: url(" + require('@/assets/index/m/fr_bg.png') + ") no-repeat;",
|
|
|
|
|
m_img: require('@/assets/index/m/fr_img.png'),
|
|
|
|
|
m_txt1: "帆软报表工程师",
|
|
|
|
|
m_txt2: "从入门到精通·实战班",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
img: require('@/assets/index/plate1/img4.png'),
|
|
|
|
|
url1: "https://bbs.fanruan.com/course/jiandaoyun/standard/?sqtj",
|
|
|
|
|
url2: "https://cert.fanruan.com/detail/c55572c4b61311ec895d00163e0210ff",
|
|
|
|
|
url3: "https://bbs.fanruan.com/jobs-0-5-0-0-0",
|
|
|
|
|
text2: "科学备战FCP-零代码开发工程师认证",
|
|
|
|
|
text3: "帆软简道云工程师等你来应聘",
|
|
|
|
|
imgsty: "box-shadow: 0px 2px 3px 0px rgba(11, 179, 166, 0.7);",
|
|
|
|
|
linksty: "background-color:rgba(63, 167, 159, 0.1);",
|
|
|
|
|
arrow: "border-bottom: 21px solid #0BB3A6;",
|
|
|
|
|
txtcol: "color: #0BB3A6;",
|
|
|
|
|
txtbg: "background: #0BB3A6;",
|
|
|
|
|
m_bg: "background: url(" + require('@/assets/index/m/jdy_bg.png') + ") no-repeat;",
|
|
|
|
|
m_img: require('@/assets/index/m/jdy_img.png'),
|
|
|
|
|
m_txt1: "简道云工程师",
|
|
|
|
|
m_txt2: "线上学习班火热招生",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
newLiveList: [],
|
|
|
|
|
video_hot: [],
|
|
|
|
|
video_new: [],
|
|
|
|
|
video_pay: [],
|
|
|
|
|
FineReport: [],
|
|
|
|
|
FineBI: [],
|
|
|
|
|
jiandaoyun: [],
|
|
|
|
|
catelist: [],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const fetchnewLiveList = async () => {
|
|
|
|
|
const res = await getNewlive();
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
state.newLiveList = res.data;
|
|
|
|
|
state.newLiveList.forEach((item, i) => {
|
|
|
|
|
createSetInterVal(item, i);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
fetchnewLiveList();
|
|
|
|
|
|
|
|
|
|
const createSetInterVal = (item, i) => {
|
|
|
|
|
const { end_time } = item;
|
|
|
|
|
state.newLiveList[i].downtime = dateFormat(end_time);
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
createSetInterVal(item, i);
|
|
|
|
|
}, 1000);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const resVdeio_hot = async () => {
|
|
|
|
|
const res = await getvideo({ type: 'hot' });
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
state.video_hot = res.data;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
resVdeio_hot()
|
|
|
|
|
|
|
|
|
|
const resVdeio_new = async () => {
|
|
|
|
|
const res = await getvideo({ type: 'new' });
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
state.video_new = res.data;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
resVdeio_new()
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
const rescatelist = async () => {
|
|
|
|
|
const res = await getvideo({ type: 'cate' });
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
state.catelist = res.data;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
rescatelist()
|
|
|
|
|
}, 1500);
|
|
|
|
|
|
|
|
|
|
const resvideo_pay = async () => {
|
|
|
|
|
const res = await getvideo({ type: 'pay' });
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
state.video_pay = res.data;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
resvideo_pay()
|
|
|
|
|
}, 2500);
|
|
|
|
|
|
|
|
|
|
// const resjiandaoyun = async () => {
|
|
|
|
|
// const res = await getvideo({ type: 'jiandaoyun' });
|
|
|
|
|
// if (res.code === 200) {
|
|
|
|
|
// state.jiandaoyun = res.data;
|
|
|
|
|
// }
|
|
|
|
|
// };
|
|
|
|
|
// setTimeout(function () {
|
|
|
|
|
// resjiandaoyun()
|
|
|
|
|
// }, 3000);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
...toRefs(state),
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.main {
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
.wtbg {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
|
|
&.pb60 {
|
|
|
|
|
padding-bottom: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.pb30 {
|
|
|
|
|
padding-bottom: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.bg {
|
|
|
|
|
background: #f3f8ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-title {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 40px 0 20px;
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
|
i {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 学习班 */
|
|
|
|
|
.study-class {
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
position: relative;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
padding: 188px 0 8px;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 240px;
|
|
|
|
|
padding: 0 20px 0 20px;
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hover_0 .link2 {
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: rgba(28, 96, 224, 0.2) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hover_1 .link2 {
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: rgba(155, 76, 213, 0.2) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hover_2 .link2 {
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: rgba(58, 145, 255, 0.2) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hover_3 .link2 {
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: rgba(63, 167, 159, 0.2) !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.link {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
|
|
|
|
.bmbtn {
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 109px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
box-shadow: 0px 2px 6px 0px rgba(121, 55, 176, 0.5);
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
left: 24px;
|
|
|
|
|
bottom: 35px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover img {
|
|
|
|
|
width: 106%;
|
|
|
|
|
margin: -8px 0 0 -8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover .bmbtn {
|
|
|
|
|
width: 114px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
color: #333;
|
|
|
|
|
margin-left: -6px;
|
|
|
|
|
box-shadow: 0px 2px 6px 0px rgba(255, 255, 255, 0.8);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.link2 {
|
|
|
|
|
display: block;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
padding: 26px;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 152px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -8px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
width: 70px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 4px 0px 0px 0px;
|
|
|
|
|
padding: 2.5px 0;
|
|
|
|
|
|
|
|
|
|
em {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: -10px;
|
|
|
|
|
content: "";
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border-right: 10px solid transparent;
|
|
|
|
|
border-radius: 0 0px 3px 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrow {
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #1c60e0;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
right: 18px;
|
|
|
|
|
top: 36px;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover .arrow {
|
|
|
|
|
right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 直播课程 */
|
|
|
|
|
.live-box {
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
background: #fff;
|
|
|
|
|
height: 200px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 14px;
|
|
|
|
|
|
|
|
|
|
.cover {
|
|
|
|
|
position: relative;
|
|
|
|
|
margin-top: -14px;
|
|
|
|
|
width: 322px;
|
|
|
|
|
height: 191px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cover-mask::after {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 10px;
|
|
|
|
|
width: 302px;
|
|
|
|
|
height: 186px;
|
|
|
|
|
background-color: #D7E9FF;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-left: 48px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.lfbox {
|
|
|
|
|
width: 460px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
padding: 28px 0 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.speaker-uid {
|
|
|
|
|
border-radius: 100px;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.speaker {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p:nth-child(2) {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rtbox {
|
|
|
|
|
height: 100px;
|
|
|
|
|
margin-right: 50px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 热门课程 */
|
|
|
|
|
.video-hot {
|
|
|
|
|
.item {
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
width: 276px;
|
|
|
|
|
height: 342px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF;
|
|
|
|
|
|
|
|
|
|
.new {
|
|
|
|
|
margin: -10px 0 0 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.new {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
background: url('~@/assets/img/new.png') no-repeat;
|
|
|
|
|
background-size: 100% auto;
|
|
|
|
|
position: absolute;
|
|
|
|
|
margin: -4px 0 0 10px;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item:hover .img {
|
|
|
|
|
margin-top: -6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgps {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 276px;
|
|
|
|
|
height: 184px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 276px;
|
|
|
|
|
height: 184px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
width: 250px;
|
|
|
|
|
height: 44px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
margin: 16px auto 16px auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
|
width: 60px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
margin-left: 14px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: rgba(40, 195, 70, 0.08);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
color: #28C346;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.saleprice {
|
|
|
|
|
padding-left: 14px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
|
|
del {
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
color: #B3C1D3;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
width: 260px;
|
|
|
|
|
padding: 16px 18px 0 18px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
color: #617288;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h5 {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 新上好课 */
|
|
|
|
|
.video-new {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 440px;
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
width: 576px;
|
|
|
|
|
height: 184px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rtbox {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 280px;
|
|
|
|
|
padding: 18px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item:hover .img {
|
|
|
|
|
margin-top: -6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgps {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 276px;
|
|
|
|
|
height: 184px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 276px;
|
|
|
|
|
height: 184px;
|
|
|
|
|
top: -14px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
width: 262px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
|
width: 60px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: rgba(40, 195, 70, 0.08);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
color: #28C346;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
width: 260px;
|
|
|
|
|
padding: 16px 4px 0 4px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-top: auto;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
color: #617288;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h5 {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 收费通用 */
|
|
|
|
|
.saleprice {
|
|
|
|
|
padding-left: 14px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
|
|
del {
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
color: #B3C1D3;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
/*响应式-移动端*/
|
|
|
|
|
@import '~@/assets/css/m.css';
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
|
|
|
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
background-color: #f3f8ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.flex-3-m {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.idBanner {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.playbox {
|
|
|
|
|
top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pb60 {
|
|
|
|
|
padding-bottom: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 视频橱窗 */
|
|
|
|
|
.video-new,
|
|
|
|
|
.video-hot {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 260px !important;
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
width: 49% !important;
|
|
|
|
|
height: 110px !important;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rtbox,
|
|
|
|
|
.rtbox-m {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
min-width: 55%;
|
|
|
|
|
padding: 18px 0;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.saleprice {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item:hover .img {
|
|
|
|
|
margin-top: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgps {
|
|
|
|
|
width: auto !important;
|
|
|
|
|
min-width: 170px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
height: 110px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
position: static !important;
|
|
|
|
|
top: 0 !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
min-width: 160px;
|
|
|
|
|
height: 110px !important;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
height: 26px !important;
|
|
|
|
|
width: 92% !important;
|
|
|
|
|
margin: 0 6px 0 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
|
width: 50px !important;
|
|
|
|
|
height: 20px !important;
|
|
|
|
|
line-height: 20px !important;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: rgba(40, 195, 70, 0.08);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
color: #28C346;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
width: 92% !important;
|
|
|
|
|
padding: 10px 4px 0 4px !important;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-top: auto;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
color: #617288;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h5 {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hide-txt2 {
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
-webkit-line-clamp: 1 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wtbg {
|
|
|
|
|
background-color: #F3F8FF !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-title {
|
|
|
|
|
padding: 30px 0 10px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.m_pb_0 {
|
|
|
|
|
padding-bottom: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 移动端-学习班 */
|
|
|
|
|
.study_class_m {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
width: 49%;
|
|
|
|
|
height: 150px;
|
|
|
|
|
margin: 7px 0;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.link {
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
|
|
.bmbtn {
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 109px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
box-shadow: 0px 2px 6px 0px rgba(121, 55, 176, 0.5);
|
|
|
|
|
border-radius: 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
left: 24px;
|
|
|
|
|
bottom: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.txt {
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 24px;
|
|
|
|
|
top: 24px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
.txt1 {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.txt2 {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatu {
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 40%;
|
|
|
|
|
height: auto;
|
|
|
|
|
left: 58%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
-webkit-transform: translateY(-50%);
|
|
|
|
|
-webkit-transform: translateY(-50%);
|
|
|
|
|
-moz-transform: translateY(-50%);
|
|
|
|
|
-ms-transform: translateY(-50%);
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* end-pad */
|
|
|
|
|
@media screen and (max-width: 800px) {
|
|
|
|
|
|
|
|
|
|
/* 新上好课 */
|
|
|
|
|
.video-new,
|
|
|
|
|
.video-hot {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around !important;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 100% !important;
|
|
|
|
|
|
|
|
|
|
.flex-3 {
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
height: 100px !important;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rtbox,
|
|
|
|
|
.rtbox-m {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 18px 0;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.saleprice {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item:hover .img {
|
|
|
|
|
margin-top: 0px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.imgps {
|
|
|
|
|
width: auto !important;
|
|
|
|
|
min-width: 160px;
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
height: 110px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
position: static !important;
|
|
|
|
|
top: 0 !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
min-width: 150px;
|
|
|
|
|
height: 100px !important;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
height: 26px !important;
|
|
|
|
|
width: 94% !important;
|
|
|
|
|
margin: 0 6px 0 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag {
|
|
|
|
|
width: 50px !important;
|
|
|
|
|
height: 20px !important;
|
|
|
|
|
line-height: 20px !important;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: rgba(40, 195, 70, 0.08);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
color: #28C346;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.info {
|
|
|
|
|
width: 96% !important;
|
|
|
|
|
padding: 10px 4px 0 4px !important;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-top: auto;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
color: #617288;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h5 {
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.flex-3 {
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* end-phone */
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
@media screen and (max-width: 530px) {
|
|
|
|
|
|
|
|
|
|
/* 移动端-学习班 */
|
|
|
|
|
.study_class_m {
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
height: 130px;
|
|
|
|
|
|
|
|
|
|
.link {
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
|
|
.bmbtn {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.txt {
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 15px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
|
|
-moz-transform: translateX(-50%);
|
|
|
|
|
-ms-transform: translateX(-50%);
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
|
|
|
|
.txt1 {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.txt2 {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chatu {
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 60%;
|
|
|
|
|
height: auto;
|
|
|
|
|
left: 50%;
|
|
|
|
|
bottom: -20px;
|
|
|
|
|
top: auto !important;
|
|
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
|
|
-moz-transform: translateX(-50%);
|
|
|
|
|
-ms-transform: translateX(-50%);
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 400px) {
|
|
|
|
|
|
|
|
|
|
/* 移动端-学习班 */
|
|
|
|
|
.study_class_m {
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
height: 130px;
|
|
|
|
|
|
|
|
|
|
.link {
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
|
|
.chatu {
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 80%;
|
|
|
|
|
height: auto;
|
|
|
|
|
left: 50%;
|
|
|
|
|
bottom: -20px;
|
|
|
|
|
top: auto !important;
|
|
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
|
|
-moz-transform: translateX(-50%);
|
|
|
|
|
-ms-transform: translateX(-50%);
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
