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.
1286 lines
31 KiB
1286 lines
31 KiB
<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> |