|
|
|
|
@ -1,21 +1,18 @@
|
|
|
|
|
<template> |
|
|
|
|
|
|
|
|
|
<div v-wechat-title="class1_title+' - '+class2_title+$route.meta.title" v-if="class1_title && class2_title"></div> |
|
|
|
|
<div v-wechat-title="class1_title+' - '+$route.meta.title" v-if="class1_title && !class2_title"></div> |
|
|
|
|
<div v-wechat-title="class2_title+' - '+$route.meta.title" v-if="class2_title && !class1_title"></div> |
|
|
|
|
<div v-wechat-title="class1_title + ' - ' + class2_title + $route.meta.title" v-if="class1_title && class2_title"></div> |
|
|
|
|
<div v-wechat-title="class1_title + ' - ' + $route.meta.title" v-if="class1_title && !class2_title"></div> |
|
|
|
|
<div v-wechat-title="class2_title + ' - ' + $route.meta.title" v-if="class2_title && !class1_title"></div> |
|
|
|
|
<div v-wechat-title="$route.meta.title" v-if="!class1_title && !class2_title"></div> |
|
|
|
|
|
|
|
|
|
<div class="video-page w1200 m-dn"> |
|
|
|
|
<div class="type"> |
|
|
|
|
|
|
|
|
|
<div class="category"> |
|
|
|
|
<div class="wrapper"> |
|
|
|
|
<span class="title">课程方向</span> |
|
|
|
|
<ul> |
|
|
|
|
<li class="category-item" :class="{active: query.class1 === 0}" @click="changeCategory(0)">全部</li> |
|
|
|
|
<li class="category-item" v-for="(item,i) in class1_list" :key="i" |
|
|
|
|
:class="{active: query.class1 === item.id}" @click="changeCategory(item.id,item.name)"> |
|
|
|
|
{{item.name}} |
|
|
|
|
<li class="category-item" :class="{ active: query.class1 === 0 }" @click="changeCategory(0)">全部</li> |
|
|
|
|
<li class="category-item" v-for="(item, i) in class1_list" :key="i" :class="{ active: query.class1 === item.id }" @click="changeCategory(item.id, item.name)"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
@ -25,10 +22,9 @@
|
|
|
|
|
<div class="wrapper"> |
|
|
|
|
<span class="title">课程标签</span> |
|
|
|
|
<ul> |
|
|
|
|
<li class="category-item" :class="{active: query.class2 === 0 }" @click="changeCategory2(0)">全部</li> |
|
|
|
|
<li class="category-item" v-for="(item,i) in class2_list" :key="i" |
|
|
|
|
:class="{active: query.class2 === item.id}" @click="changeCategory2(item.id,item.name)"> |
|
|
|
|
{{item.name}} |
|
|
|
|
<li class="category-item" :class="{ active: query.class2 === 0 }" @click="changeCategory2(0)">全部</li> |
|
|
|
|
<li class="category-item" v-for="(item, i) in class2_list" :key="i" :class="{ active: query.class2 === item.id }" @click="changeCategory2(item.id, item.name)"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
@ -38,16 +34,14 @@
|
|
|
|
|
<div class="wrapper"> |
|
|
|
|
<span class="title">课程价格</span> |
|
|
|
|
<ul> |
|
|
|
|
<li class="category-item" v-for="(item,i) in priceList" :key="i" :class="{active: query.price === item.id}" |
|
|
|
|
@click="changePrice(item.id)">{{item.name}}</li> |
|
|
|
|
<li class="category-item" v-for="(item, i) in priceList" :key="i" :class="{ active: query.price === item.id }" @click="changePrice(item.id)">{{ item.name }}</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="sort flex-1"> |
|
|
|
|
<div class="wrapper"> |
|
|
|
|
<ul> |
|
|
|
|
<li class="category-item" v-for="(item,i) in sortList" :key="i" :class="{active: query.sort === item.id}" |
|
|
|
|
@click="changeSort(item.id)"> |
|
|
|
|
<li class="category-item" v-for="(item, i) in sortList" :key="i" :class="{ active: query.sort === item.id }" @click="changeSort(item.id)"> |
|
|
|
|
<el-tooltip :content="item.label" placement="top"> |
|
|
|
|
<span>{{ item.name }} <i :class="item.icon"></i></span> |
|
|
|
|
</el-tooltip> |
|
|
|
|
@ -60,7 +54,6 @@
|
|
|
|
|
|
|
|
|
|
<!-- v-if="onresize > 1200" 暂时不需要这个判断 --> |
|
|
|
|
<el-skeleton :loading="loading" animated class="m-dn"> |
|
|
|
|
|
|
|
|
|
<template #template> |
|
|
|
|
<div class="w1200 video-page"> |
|
|
|
|
<div class="video-wrap"> |
|
|
|
|
@ -75,27 +68,21 @@
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #default> |
|
|
|
|
|
|
|
|
|
<div class="video-page w1200 m-dn"> |
|
|
|
|
|
|
|
|
|
<div class="video-wrap"> |
|
|
|
|
<ul class="video-list"> |
|
|
|
|
|
|
|
|
|
<li class="video-item" v-for="(item,i) in videoList" :key="i"> |
|
|
|
|
<router-link :to="'/video/'+item.id" target="_blank"> |
|
|
|
|
<li class="video-item" v-for="(item, i) in videoList" :key="i"> |
|
|
|
|
<router-link :to="'/video/' + item.id" target="_blank"> |
|
|
|
|
<div class="imgps"> |
|
|
|
|
<el-image class="img" :src="item.it618_picbig" :alt="item.it618_name"></el-image> |
|
|
|
|
</div> |
|
|
|
|
<h2 class="hide-txt2 f16">{{ item.it618_name }}</h2> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div v-if="item.it618_saleprice" class="saleprice"> |
|
|
|
|
<span class="colff3"> |
|
|
|
|
<i class="f14">￥</i>{{item.it618_saleprice}} |
|
|
|
|
</span> |
|
|
|
|
<del>￥{{item.it618_price}}</del> |
|
|
|
|
<span class="colff3"> <i class="f14">￥</i>{{ item.it618_saleprice }} </span> |
|
|
|
|
<del>￥{{ item.it618_price }}</del> |
|
|
|
|
</div> |
|
|
|
|
<div class="tag" v-else>{{ item.it618_saleprice ? item.it618_saleprice:"免费" }}</div> |
|
|
|
|
<div class="tag" v-else>{{ item.it618_saleprice ? item.it618_saleprice : "免费" }}</div> |
|
|
|
|
|
|
|
|
|
<div class="info flex-3"> |
|
|
|
|
<span>共{{ item.it618_videocount }}课时</span> |
|
|
|
|
@ -103,35 +90,31 @@
|
|
|
|
|
</div> |
|
|
|
|
</router-link> |
|
|
|
|
</li> |
|
|
|
|
<div v-if="[2,6,10,14].includes(videoList.length) " style="width: 276px;"></div> |
|
|
|
|
<div v-if="[2, 6, 10, 14].includes(videoList.length)" style="width: 276px;"></div> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-empty :image-size="90" description="暂无数据" v-if="videoList.length<=0"> |
|
|
|
|
</el-empty> |
|
|
|
|
<el-empty :image-size="90" description="暂无数据" v-if="videoList.length <= 0"> </el-empty> |
|
|
|
|
|
|
|
|
|
<div style="margin: 30px 0 10px"> |
|
|
|
|
<el-pagination class="pagination" v-model:currentPage="query.page" background layout="prev, pager, next" |
|
|
|
|
@current-change="handleCurrentChange" :total="total" :page-size="query.perpage" /> |
|
|
|
|
<el-pagination class="pagination" v-model:currentPage="query.page" background layout="prev, pager, next" @current-change="handleCurrentChange" :total="total" :page-size="query.perpage" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-skeleton> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 移动端 --> |
|
|
|
|
<div class="tool-box-m dn m-db"> |
|
|
|
|
<div class="flex-3"> |
|
|
|
|
<div> |
|
|
|
|
<el-dropdown trigger="click" style="height: 44px;" class="flex-2"> |
|
|
|
|
<span class="el-dropdown-link col008"> |
|
|
|
|
<span style="margin-right: 5px;">{{curSortName}}</span> |
|
|
|
|
<span style="margin-right: 5px;">{{ curSortName }}</span> |
|
|
|
|
<i class="iconfont icon-paixu f14"></i> |
|
|
|
|
</span> |
|
|
|
|
<template #dropdown> |
|
|
|
|
<el-dropdown-menu> |
|
|
|
|
<el-dropdown-item class="category-item" v-for="(item,i) in sortList" :key="i" |
|
|
|
|
:class="{col008: query.sort === item.id}" @click="changeSort(item.id,item.name)"> |
|
|
|
|
<el-dropdown-item class="category-item" v-for="(item, i) in sortList" :key="i" :class="{ col008: query.sort === item.id }" @click="changeSort(item.id, item.name)"> |
|
|
|
|
<span>{{ item.name }}</span> |
|
|
|
|
</el-dropdown-item> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
@ -139,19 +122,15 @@
|
|
|
|
|
</el-dropdown> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div @click="videDrawer=true" style="height: 44px;" class="flex-1 f14 col008"> |
|
|
|
|
<div @click="videDrawer = true" style="height: 44px;" class="flex-1 f14 col008"> |
|
|
|
|
<span style="margin-right: 6px; margin-top: -2px;">筛选课程</span> |
|
|
|
|
<i class="iconfont icon-shaixuan1 f14"></i> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 移动端视频列表 --> |
|
|
|
|
<el-skeleton :loading="loading" animated class="dn m-db"> |
|
|
|
|
|
|
|
|
|
<template #template> |
|
|
|
|
<div class="w1200 video-page"> |
|
|
|
|
<div class="video-wrap"> |
|
|
|
|
@ -171,23 +150,20 @@
|
|
|
|
|
|
|
|
|
|
<template #default> |
|
|
|
|
<div class="dn m-db"> |
|
|
|
|
|
|
|
|
|
<van-list v-model:loading="loading_m" :finished="max_total" :offset="0" finished-text="没有更多了" error-text="请求失败，点击重新加载" @load="loadVlist"> |
|
|
|
|
<div class="video-list-m"> |
|
|
|
|
<li class="item" v-for="(item, i) in videoList" :key="i"> |
|
|
|
|
<router-link :to="'/video/'+item.id" class="flex-3" target="_blank"> |
|
|
|
|
<router-link :to="'/video/' + item.id" class="flex-3" target="_blank"> |
|
|
|
|
<div class="imgps"> |
|
|
|
|
<el-image class="img" :src="item.it618_picbig" :alt="item.it618_name"></el-image> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="rtbox"> |
|
|
|
|
<h2 class="hide-txt f16">{{item.it618_name}}</h2> |
|
|
|
|
<h2 class="hide-txt f16">{{ item.it618_name }}</h2> |
|
|
|
|
|
|
|
|
|
<div v-if="item.it618_saleprice" class="saleprice"> |
|
|
|
|
<span class="colff3"> |
|
|
|
|
<i class="f14">￥</i>{{item.it618_saleprice}} |
|
|
|
|
</span> |
|
|
|
|
<del>￥{{item.it618_price}}</del> |
|
|
|
|
<span class="colff3"> <i class="f14">￥</i>{{ item.it618_saleprice }} </span> |
|
|
|
|
<del>￥{{ item.it618_price }}</del> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="tag" v-else>免费</div> |
|
|
|
|
@ -200,26 +176,20 @@
|
|
|
|
|
</li> |
|
|
|
|
</div> |
|
|
|
|
</van-list> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-skeleton> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 筛选抽屉 --> |
|
|
|
|
<el-drawer v-model="videDrawer" :with-header="false" title="筛选课程" direction="btt" custom-class="video-drawer" |
|
|
|
|
size="86%"> |
|
|
|
|
<el-drawer v-model="videDrawer" :with-header="false" title="筛选课程" direction="btt" custom-class="video-drawer" size="86%"> |
|
|
|
|
<el-scrollbar style=" position: absolute; height: 90%; margin:14px 6px 0;" height="300" always> |
|
|
|
|
<div class="category"> |
|
|
|
|
<div class="wrapper-video-m"> |
|
|
|
|
<div class="title">课程方向</div> |
|
|
|
|
<ul> |
|
|
|
|
<li class="category-item" :class="{active: query.class1 === 0}" @click="changeCategory(0)">全部</li> |
|
|
|
|
<li class="category-item" v-for="(item,i) in class1_list" :key="i" |
|
|
|
|
:class="{active: query.class1 === item.id}" @click="screening_memory(item.id,'class1')"> |
|
|
|
|
{{item.name}} |
|
|
|
|
<li class="category-item" :class="{ active: query.class1 === 0 }" @click="changeCategory(0)">全部</li> |
|
|
|
|
<li class="category-item" v-for="(item, i) in class1_list" :key="i" :class="{ active: query.class1 === item.id }" @click="screening_memory(item.id, 'class1')"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
@ -229,10 +199,9 @@
|
|
|
|
|
<div class="wrapper-video-m"> |
|
|
|
|
<div class="title">课程标签</div> |
|
|
|
|
<ul> |
|
|
|
|
<li class="category-item" :class="{active: query.class2 === 0 }" @click="changeCategory2(0)">全部</li> |
|
|
|
|
<li class="category-item" v-for="(item,i) in class2_list" :key="i" |
|
|
|
|
:class="{active: query.class2 === item.id}" @click="screening_memory(item.id,'class2')"> |
|
|
|
|
{{item.name}} |
|
|
|
|
<li class="category-item" :class="{ active: query.class2 === 0 }" @click="changeCategory2(0)">全部</li> |
|
|
|
|
<li class="category-item" v-for="(item, i) in class2_list" :key="i" :class="{ active: query.class2 === item.id }" @click="screening_memory(item.id, 'class2')"> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
@ -242,8 +211,7 @@
|
|
|
|
|
<div class="wrapper-video-m"> |
|
|
|
|
<div class="title">课程价格</div> |
|
|
|
|
<ul> |
|
|
|
|
<li class="category-item" v-for="(item,i) in priceList" :key="i" :class="{active: query.price === item.id}" |
|
|
|
|
@click="changePrice(item.id)">{{item.name}}</li> |
|
|
|
|
<li class="category-item" v-for="(item, i) in priceList" :key="i" :class="{ active: query.price === item.id }" @click="changePrice(item.id)">{{ item.name }}</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -251,21 +219,37 @@
|
|
|
|
|
|
|
|
|
|
<div class="vtool-foot-box"> |
|
|
|
|
<div class="vtool-foot-m flex-3"> |
|
|
|
|
<div class="chongzhi" @click="videDrawer=flase; changeCategory(0);changeCategory2(0);changePrice(0);">重置</div> |
|
|
|
|
<div class="queding" @click="screening(); videDrawer=false">确定</div> |
|
|
|
|
<div |
|
|
|
|
class="chongzhi" |
|
|
|
|
@click=" |
|
|
|
|
videDrawer = flase; |
|
|
|
|
changeCategory(0); |
|
|
|
|
changeCategory2(0); |
|
|
|
|
changePrice(0); |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
重置 |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
class="queding" |
|
|
|
|
@click=" |
|
|
|
|
screening(); |
|
|
|
|
videDrawer = false; |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
确定 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</el-drawer> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { reactive, toRefs } from "vue"; |
|
|
|
|
import { getVideoList, getCourseDirection, getCourseTag } from "@/api/video"; |
|
|
|
|
import { useRoute, useRouter } from 'vue-router'; |
|
|
|
|
import { Button, List, Cell } from 'vant'; |
|
|
|
|
export default { |
|
|
|
|
import { reactive, toRefs } from "vue"; |
|
|
|
|
import { getVideoList, getCourseDirection, getCourseTag } from "@/api/video"; |
|
|
|
|
import { useRoute, useRouter } from "vue-router"; |
|
|
|
|
import { Button, List, Cell } from "vant"; |
|
|
|
|
export default { |
|
|
|
|
name: "videoindex", |
|
|
|
|
components: { |
|
|
|
|
[Button.name]: Button, |
|
|
|
|
@ -273,8 +257,8 @@
|
|
|
|
|
[Cell.name]: Cell, |
|
|
|
|
}, |
|
|
|
|
setup() { |
|
|
|
|
const route = useRoute() |
|
|
|
|
const router = useRouter() |
|
|
|
|
const route = useRoute(); |
|
|
|
|
const router = useRouter(); |
|
|
|
|
let get_class1 = route.query.class1 ? parseInt(route.query.class1) : 0; |
|
|
|
|
let get_class2 = route.query.class2 ? parseInt(route.query.class2) : 0; |
|
|
|
|
let get_sort = route.query.sort ? parseInt(route.query.sort) : 0; |
|
|
|
|
@ -312,14 +296,14 @@
|
|
|
|
|
}, |
|
|
|
|
loading: true, |
|
|
|
|
loading_m: false, |
|
|
|
|
class1_title: '', |
|
|
|
|
class2_title: '', |
|
|
|
|
curSortName: '默认排序', |
|
|
|
|
class1_title: "", |
|
|
|
|
class2_title: "", |
|
|
|
|
curSortName: "默认排序", |
|
|
|
|
videDrawer: false, |
|
|
|
|
video_total: 0, |
|
|
|
|
max_total: false, |
|
|
|
|
start_perpage: 16, |
|
|
|
|
onresize: '', |
|
|
|
|
onresize: "", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 移动端 记忆筛选 |
|
|
|
|
@ -337,7 +321,7 @@
|
|
|
|
|
state.query.price = params; |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 移动端 确定筛选 |
|
|
|
|
const screening = () => { |
|
|
|
|
@ -346,7 +330,7 @@
|
|
|
|
|
...state.query, |
|
|
|
|
}; |
|
|
|
|
fetVideoList(params); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const changeCategory = (id, title) => { |
|
|
|
|
state.class1_title = title; |
|
|
|
|
@ -356,8 +340,8 @@
|
|
|
|
|
query: { |
|
|
|
|
class1: id, |
|
|
|
|
class2: state.query.class2, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
getClass2(id); |
|
|
|
|
state.query.class1 = id; |
|
|
|
|
state.query.class2 = 0; |
|
|
|
|
@ -376,8 +360,8 @@
|
|
|
|
|
query: { |
|
|
|
|
class1: state.query.class1, |
|
|
|
|
class2: id, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
state.query.class2 = id; |
|
|
|
|
state.query.page = 1; |
|
|
|
|
const params = { |
|
|
|
|
@ -441,18 +425,17 @@
|
|
|
|
|
|
|
|
|
|
// 二级分类 |
|
|
|
|
const getClass2 = async (class1_id) => { |
|
|
|
|
let getId = class1_id > 0 ? class1_id : ''; |
|
|
|
|
let getId = class1_id > 0 ? class1_id : ""; |
|
|
|
|
const params = { |
|
|
|
|
directionTag: getId |
|
|
|
|
} |
|
|
|
|
directionTag: getId, |
|
|
|
|
}; |
|
|
|
|
console.log(params); |
|
|
|
|
|
|
|
|
|
const res = await getCourseTag(params) |
|
|
|
|
const res = await getCourseTag(params); |
|
|
|
|
if (res.code === 200) { |
|
|
|
|
state.class2_list = res.data; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// 获取视频列表 |
|
|
|
|
const fetVideoList = async (query) => { |
|
|
|
|
@ -473,7 +456,6 @@
|
|
|
|
|
} else { |
|
|
|
|
state.max_total = false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
@ -483,14 +465,13 @@
|
|
|
|
|
const handleCurrentChange = (val) => { |
|
|
|
|
const params = { |
|
|
|
|
...state.query, |
|
|
|
|
page: val |
|
|
|
|
page: val, |
|
|
|
|
}; |
|
|
|
|
fetVideoList(params) |
|
|
|
|
fetVideoList(params); |
|
|
|
|
window.scrollTo(0, 0); |
|
|
|
|
// setTimeout(function () { |
|
|
|
|
// toTop(); |
|
|
|
|
// }, 300); |
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// const toTop = () => { |
|
|
|
|
@ -514,19 +495,18 @@
|
|
|
|
|
// 滚动加载 |
|
|
|
|
const loadVlist = () => { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
state.start_perpage += 8 |
|
|
|
|
state.start_perpage += 8; |
|
|
|
|
const params = { |
|
|
|
|
...state.query, |
|
|
|
|
perpage: state.start_perpage |
|
|
|
|
perpage: state.start_perpage, |
|
|
|
|
}; |
|
|
|
|
// if (state.onresize < 1200) { |
|
|
|
|
state.videoList.push(fetVideoList(params)); |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
state.loading_m = false; |
|
|
|
|
|
|
|
|
|
}, 800); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
calcNum, |
|
|
|
|
@ -541,11 +521,11 @@
|
|
|
|
|
screening, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.video-page { |
|
|
|
|
.video-page { |
|
|
|
|
height: 100%; |
|
|
|
|
margin: auto; |
|
|
|
|
display: flex; |
|
|
|
|
@ -556,7 +536,7 @@
|
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
border: 1px solid #CEDDF2; |
|
|
|
|
border: 1px solid #ceddf2; |
|
|
|
|
padding: 14px 24px 6px 24px; |
|
|
|
|
margin: 30px 0 24px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
@ -605,7 +585,7 @@
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
color: #0082fc; |
|
|
|
|
background-color: #D9ECFF; |
|
|
|
|
background-color: #d9ecff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -625,7 +605,7 @@
|
|
|
|
|
right: 0; |
|
|
|
|
margin: auto; |
|
|
|
|
height: 1px; |
|
|
|
|
background-color: #CEDDF2; |
|
|
|
|
background-color: #ceddf2; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -640,20 +620,19 @@
|
|
|
|
|
padding-top: 10px; |
|
|
|
|
|
|
|
|
|
&:after { |
|
|
|
|
content: ' '; |
|
|
|
|
content: " "; |
|
|
|
|
width: 276px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.video-item { |
|
|
|
|
transition: all .3s; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
width: 276px; |
|
|
|
|
height: 342px; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
margin-bottom: 22px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF; |
|
|
|
|
box-shadow: 0px 1px 12px 0px #dce5ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.video-item:hover .img { |
|
|
|
|
@ -671,8 +650,7 @@
|
|
|
|
|
width: 276px; |
|
|
|
|
height: 184px; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
transition: all .3s; |
|
|
|
|
|
|
|
|
|
transition: all 0.3s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
@ -691,7 +669,7 @@
|
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(40, 195, 70, 0.08); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
color: #28C346; |
|
|
|
|
color: #28c346; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.saleprice { |
|
|
|
|
@ -700,13 +678,11 @@
|
|
|
|
|
|
|
|
|
|
del { |
|
|
|
|
margin-left: 8px; |
|
|
|
|
color: #B3C1D3; |
|
|
|
|
color: #b3c1d3; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
width: 260px; |
|
|
|
|
padding: 16px 18px 0 18px; |
|
|
|
|
@ -722,7 +698,6 @@
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.video-item { |
|
|
|
|
width: 276px; |
|
|
|
|
height: 342px; |
|
|
|
|
@ -791,32 +766,31 @@
|
|
|
|
|
height: 40px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
/*响应式-移动端*/ |
|
|
|
|
@import '~@/assets/css/m.css'; |
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 1200px) { |
|
|
|
|
/*响应式-移动端*/ |
|
|
|
|
@import "~@/assets/css/m.css"; |
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 1200px) { |
|
|
|
|
html, |
|
|
|
|
body { |
|
|
|
|
background-color: #f3f8ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* end screen */ |
|
|
|
|
/* end screen */ |
|
|
|
|
|
|
|
|
|
.tool-box-m { |
|
|
|
|
.tool-box-m { |
|
|
|
|
margin: 0 20px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.wrapper-video-m { |
|
|
|
|
.wrapper-video-m { |
|
|
|
|
padding: 0 20px; |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
@ -850,7 +824,7 @@
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
color: #0082fc; |
|
|
|
|
background-color: #D9ECFF; |
|
|
|
|
background-color: #d9ecff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -858,15 +832,15 @@
|
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.video-drawer { |
|
|
|
|
.video-drawer { |
|
|
|
|
.el-drawer__header { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.vtool-foot-box { |
|
|
|
|
.vtool-foot-box { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 10%; |
|
|
|
|
@ -893,10 +867,10 @@
|
|
|
|
|
border-top: 1px solid #0082fc; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 移动端视频列表 */ |
|
|
|
|
.video-list-m { |
|
|
|
|
/* 移动端视频列表 */ |
|
|
|
|
.video-list-m { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
@ -906,7 +880,7 @@
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
transition: all .3s; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
width: 49% !important; |
|
|
|
|
height: 110px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
@ -914,7 +888,7 @@
|
|
|
|
|
margin-bottom: 18px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF; |
|
|
|
|
box-shadow: 0px 1px 12px 0px #dce5ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rtbox, |
|
|
|
|
@ -951,8 +925,7 @@
|
|
|
|
|
width: 160px !important; |
|
|
|
|
height: 110px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
transition: all .3s; |
|
|
|
|
|
|
|
|
|
transition: all 0.3s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
@ -970,7 +943,7 @@
|
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(40, 195, 70, 0.08); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
color: #28C346; |
|
|
|
|
color: #28c346; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
@ -987,20 +960,18 @@
|
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.v_lod_txt { |
|
|
|
|
.v_lod_txt { |
|
|
|
|
text-align: center; |
|
|
|
|
color: #7E8FA3; |
|
|
|
|
color: #7e8fa3; |
|
|
|
|
margin-top: 14px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
letter-spacing: 2px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 800px) { |
|
|
|
|
|
|
|
|
|
/* 视频看列表 */ |
|
|
|
|
@media screen and (max-width: 800px) { |
|
|
|
|
/* 视频课列表 */ |
|
|
|
|
.video-list-m { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around !important; |
|
|
|
|
@ -1012,7 +983,7 @@
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
transition: all .3s; |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
width: 100% !important; |
|
|
|
|
height: 100px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
@ -1020,7 +991,7 @@
|
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
box-shadow: 0px 1px 12px 0px #DCE5FF; |
|
|
|
|
box-shadow: 0px 1px 12px 0px #dce5ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rtbox, |
|
|
|
|
@ -1055,8 +1026,7 @@
|
|
|
|
|
width: 150px !important; |
|
|
|
|
height: 100px !important; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
transition: all .3s; |
|
|
|
|
|
|
|
|
|
transition: all 0.3s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
h2 { |
|
|
|
|
@ -1074,7 +1044,7 @@
|
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(40, 195, 70, 0.08); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
color: #28C346; |
|
|
|
|
color: #28c346; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
@ -1096,7 +1066,7 @@
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* end-phone */ |
|
|
|
|
/* end-phone */ |
|
|
|
|
</style> |
