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.
227 lines
8.2 KiB
227 lines
8.2 KiB
<template>
|
|
<div class="course-page">
|
|
<div class="topcontent">
|
|
<img src="../../assets/img/bg/college_bg.png" alt="" style="height: 447px;width: 650px;margin-right:134px;">
|
|
<div>
|
|
<div style="font-size: 60px;width: 540px;">{{$t('college.text1')}}</div>
|
|
<div style="font-size: 36px;width: 540px;">{{$t('college.text2')}}</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" style="font-size: 48px;">{{$t('college.buy')}}</div>
|
|
<div>
|
|
<ul class="list">
|
|
<li class="d-flex align-items-start my-3">
|
|
<div class="num text-light">1</div>
|
|
<div>
|
|
<div class="label h5">{{$t('college.register')}} AMATAK</div>
|
|
<div class="txt">{{$t('college.visit',{name:'AMATAK'})}}</div>
|
|
</div>
|
|
</li>
|
|
<li class="d-flex align-items-start my-3">
|
|
<div class="num text-light">2</div>
|
|
<div>
|
|
<div class="label h5">{{$t('college.realName')}}</div>
|
|
<div class="txt">{{$t('college.upload')}}</div>
|
|
</div>
|
|
</li>
|
|
<li class="d-flex align-items-start my-3">
|
|
<div class="num text-light">3</div>
|
|
<div>
|
|
<div class="label h5">{{$t('college.oneClick')}}</div>
|
|
<div class="txt">{{$t('college.inAssets')}}</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<router-link tag="button" to="/exchange" class="btn btn-primary">{{$t('college.tradeNow')}}</router-link>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
|
|
<div class="banner-tab">
|
|
<div class="container">
|
|
<div class="row">
|
|
<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 class="container course-list" style="width: 1320px !important;max-width:none;padding: 0px;">
|
|
<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 align-items-center mb-5">
|
|
<span style="font-size: 50px;">
|
|
{{ item.name }}
|
|
</span>
|
|
<router-link :to="`/college/list/${item.id}`" class="fn-28 text-light">
|
|
{{$t('college.seeMore')}}>>
|
|
</router-link>
|
|
</div>
|
|
<div class="row justify-content-between">
|
|
<div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(article, index) in item.article" :key="index">
|
|
<router-link :to="`/college/detail/${item.id}/${article.id}`">
|
|
<div class="banner">
|
|
<img :src="article.full_cover" alt />
|
|
</div>
|
|
<div class="txt">
|
|
{{article.title}}
|
|
</div>
|
|
<div class="txt2" v-html="article.body"></div>
|
|
<div class="txt2">{{article.updated_at}}</div>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- lattest-news-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">
|
|
<div class="title">{{ $t("common.start-trade") }}</div>
|
|
</div>
|
|
<div class="colto-btn-group" v-if="!isLogin">
|
|
<router-link tag="button" to="/sign-in" class="btn btn-success rounded-pill callto-btn">{{$t('common.login')}}</router-link>
|
|
<span>or</span>
|
|
<router-link tag="button" to="/sign-up" class="btn btn-primary rounded-pill callto-btn">{{$t('common.register')}}</router-link>
|
|
</div>
|
|
<div v-else class="colto-btn-group">
|
|
<router-link tag="button" to="/exchange" class="btn btn-primary rounded-pill callto-btn">{{$t('common.trading')}}</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import College from "@/api/college";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 当前播放的视频
|
|
video: null,
|
|
categoryList: [],
|
|
bannerList: [],
|
|
nowIndex: 0
|
|
}
|
|
},
|
|
computed: {
|
|
isLogin() {
|
|
return Boolean(localStorage.token);
|
|
},
|
|
},
|
|
methods: {
|
|
view(banner, index) {
|
|
this.video.url = banner.url;
|
|
this.video.poster = banner.poster;
|
|
this.nowIndex = index;
|
|
},
|
|
|
|
initPage() {
|
|
College.college().then(response => {
|
|
({
|
|
categoryList: this.categoryList,
|
|
bannerList: this.bannerList
|
|
} = response);
|
|
|
|
this.video = this.bannerList[0];
|
|
}).catch(err => {
|
|
|
|
});
|
|
},
|
|
getVideo() {
|
|
|
|
}
|
|
},
|
|
created() {
|
|
this.initPage();
|
|
},
|
|
};
|
|
</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%;
|
|
}
|
|
.course-page .course-list .item .banner{
|
|
width: 310px;
|
|
height: 164px;
|
|
border-radius: 10px;
|
|
margin-bottom: 35px;
|
|
}
|
|
.course-page .course-list .item .txt{
|
|
padding: 0px 45px 0px 25px;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
margin-bottom: 18px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
height: 66px;
|
|
}
|
|
.course-page .course-list .item .txt2{
|
|
padding: 0px 45px 0px 25px;
|
|
font-size: 16px;
|
|
color: #929292;
|
|
margin-bottom: 18px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|