|
|
|
@ -1,10 +1,17 @@ |
|
|
|
<template> |
|
|
|
<div class="course-page"> |
|
|
|
<!-- <div class="banner"> |
|
|
|
<div class="container pt-3"> |
|
|
|
<div class="row py-5"> |
|
|
|
<div class="topcontent"> |
|
|
|
<img src="" alt="" style="height: 447px;width: 650px;margin-right:134px;"> |
|
|
|
<div> |
|
|
|
<div style="font-size: 60px;">数字货币全攻略</div> |
|
|
|
<div style="font-size: 36px;width: 540px;">新手必读、操作指南、进阶策略、行业热点尽在新手学院，精彩一站直达，轻松玩转数字货币。</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="banner"> |
|
|
|
<div class="container pt-3 newcontent"> |
|
|
|
<div class="row justify-content-center align-items-center" style="height: 100%;"> |
|
|
|
<div class="col-5 left"> |
|
|
|
<div class="title h3 text-light">{{$t('college.buy')}}</div> |
|
|
|
<div class="title h3 text-light" style="font-size: 48px;">{{$t('college.buy')}}</div> |
|
|
|
<div> |
|
|
|
<ul class="list"> |
|
|
|
<li class="d-flex align-items-start my-3"> |
|
|
|
@ -32,7 +39,7 @@ |
|
|
|
<router-link tag="button" to="/exchange" class="btn btn-primary">{{$t('college.tradeNow')}}</router-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-7 right" v-if="video"> |
|
|
|
<div class=" right" v-if="video" style="width: 692px;height: 367px;"> |
|
|
|
<video class="video" preload controls :src="video.url" :poster="`https://guanli.coin.amatak.net/storage/` + video.poster"></video> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -41,28 +48,29 @@ |
|
|
|
<div class="banner-tab"> |
|
|
|
<div class="container"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-12 d-flex"> |
|
|
|
<div class="w-25 item active" v-for="(banner, index) in bannerList" :key="index" @click="view(banner)"> |
|
|
|
<div class="col-12 d-flex justify-content-center"> |
|
|
|
<div class="dianItem" :class="index==nowIndex?'active':''" v-for="(banner, index) in bannerList" :key="index" @click="view(banner, index)"></div> |
|
|
|
<!-- <div class="w-25 item active" v-for="(banner, index) in bannerList" :key="index" @click="view(banner)"> |
|
|
|
<div class="icon fn-22"> |
|
|
|
<i class="default el-icon-refresh"></i> |
|
|
|
<i class="iconshow el-icon-coin"></i> |
|
|
|
</div> |
|
|
|
<div class="txt">{{ banner.name }}</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
<!-- 列表 --> |
|
|
|
<div class="container course-list"> |
|
|
|
<div class="container course-list" style="width: 1300px !important;max-width:none;"> |
|
|
|
<div class="row mt-3" v-for="(item, index) in categoryList" :key="index"> |
|
|
|
<div class="col-12"> |
|
|
|
<div class="title h3 my-4 d-flex justify-content-between"> |
|
|
|
<span> |
|
|
|
<div class="title h3 my-4 d-flex justify-content-between align-items-center mb-5"> |
|
|
|
<span style="font-size: 50px;"> |
|
|
|
{{ item.name }} |
|
|
|
</span> |
|
|
|
<router-link :to="`/college/list/${item.id}`" class="fn-14"> |
|
|
|
<router-link :to="`/college/list/${item.id}`" class="fn-28 text-light"> |
|
|
|
{{$t('college.seeMore')}}>> |
|
|
|
</router-link> |
|
|
|
</div> |
|
|
|
@ -82,7 +90,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- lattest-news-section --> |
|
|
|
<div class="colto-section"> |
|
|
|
<div class="colto-section" v-if="0"> |
|
|
|
<div class="container"> |
|
|
|
<div class="colto-content-wrap d-flex flex-column align-items-center justify-content-center"> |
|
|
|
<div class="colto-content"> |
|
|
|
@ -112,6 +120,7 @@ export default { |
|
|
|
video: null, |
|
|
|
categoryList: [], |
|
|
|
bannerList: [], |
|
|
|
nowIndex: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -120,9 +129,10 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
view(banner) { |
|
|
|
view(banner, index) { |
|
|
|
this.video.url = banner.url; |
|
|
|
this.video.poster = banner.poster; |
|
|
|
this.nowIndex = index; |
|
|
|
}, |
|
|
|
|
|
|
|
initPage() { |
|
|
|
@ -148,4 +158,41 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.course-page{ |
|
|
|
background-color: #1a1a1a; |
|
|
|
padding: 118px 0px 100px; |
|
|
|
} |
|
|
|
.course-page .banner{ |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
.topcontent{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.newcontent{ |
|
|
|
width: 1400px !important;max-width:none; |
|
|
|
height:594px;border:1px solid #828282; |
|
|
|
border-radius: 44px;margin-bottom:66px; |
|
|
|
margin-top: 156px; |
|
|
|
} |
|
|
|
.course-page .banner .banner-tab { |
|
|
|
border-top: none; |
|
|
|
|
|
|
|
.dianItem{ |
|
|
|
width: 12px; |
|
|
|
height: 12px; |
|
|
|
background-color: #4A4A4A; |
|
|
|
border-radius: 50%; |
|
|
|
margin: 0px 14px; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&.active{ |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.course-page .banner .right .video{ |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
