|
|
@@ -1,48 +1,361 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="nav">
|
|
|
- <view class="navCont">
|
|
|
- <view class="logo">
|
|
|
- <image src="../../static/pcimg/nav_logo@2x.png" mode="" class="logoImg"></image>
|
|
|
+ <pcNav></pcNav>
|
|
|
+ <view style="height: 72px;"></view>
|
|
|
+ <view class="swiperBox">
|
|
|
+ <view class="swiperCont">
|
|
|
+ <view class="tuijbox">
|
|
|
+ <image src="../../static/pcimg/icon_tuijian@2x.png" mode="" class="tuijImg"></image>
|
|
|
+ <span class="tuijTitle">推荐文章</span>
|
|
|
</view>
|
|
|
- <view class="navTitle">门店学院</view>
|
|
|
+ <swiper class="swiper" :autoplay="false" :circular="true" :current="swpIndex">
|
|
|
+ <swiper-item v-for="(item,index) in recommendList" v-if="(index+1)%2!=0">
|
|
|
+ <view class="swpCont">
|
|
|
+ <view class="swiper-item" >
|
|
|
+ <view class="swpimgBox swpBr">
|
|
|
+ <image :src="item.logoImg" mode="" class="swpimg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="swpTitleBox">
|
|
|
+ <view class="swpTitle">{{item.title}}</view>
|
|
|
+ <view class="categoryName">{{item.categoryName}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="swiper-item" v-if="(index+1)<recommendList.length">
|
|
|
+ <view class="swpimgBox swpBr">
|
|
|
+ <image :src="recommendList[index+1].logoImg" mode="" class="swpimg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="swpTitleBox">
|
|
|
+ <view class="swpTitle">{{recommendList[index+1].title}}</view>
|
|
|
+ <view class="categoryName">{{recommendList[index+1].categoryName}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </swiper-item>
|
|
|
+
|
|
|
+ </swiper>
|
|
|
+ <image src="../../static/pcimg/icon_arrow_zuo_sel@2x.png" mode="" class="swpImgleft" @click="swpBtnLeft"></image>
|
|
|
+ <image src="../../static/pcimg/legtspx.png" mode="" class="swpImgright" @click="swpBtnRight"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <view class="mainCont">
|
|
|
+ <view class="mainline" v-for="(item,index) in indexData.categoryList">
|
|
|
+ <view class="mainlineTop">
|
|
|
+ <view class="mainlineTopleft">
|
|
|
+ <view class="mainlineTitle">{{item.name}}</view>
|
|
|
+ <view class="mainlinecount">共{{item.count}}篇文章</view>
|
|
|
+ </view>
|
|
|
+ <view class="mainlineMore" @click="mainMore(item)">查看更多></view>
|
|
|
+ </view>
|
|
|
+ <view class="mainwzbox" >
|
|
|
+ <view class="mainwzline" v-for="(wz,wzindex) in item.children" v-if="wzindex<4" :class="{'mainwzlineR':wzindex!=3}">
|
|
|
+ <view class="mainwzImgBox">
|
|
|
+ <img :src="wz.logoImg" alt="" class="mainwzImg">
|
|
|
+ </view>
|
|
|
+ <view class="wztitle">{{wz.title}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="gotop" @click="gotoTop">
|
|
|
+ <image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <view>
|
|
|
+ <a class="table-btn" href="http://phone.66km.cn:8088/marketing/training/940C4BF0A2E04542A1A1AD244EAFB6E2.xlsx" target='_blank'>下载入口</a>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import pcNav from '../../components/pcNav/pcNav.vue'
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ pcNav,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- title: 'Hello'
|
|
|
+ title: 'Hello',
|
|
|
+ allCategory:[],
|
|
|
+ navMoret:false,
|
|
|
+ swpIndex:0,
|
|
|
+ indexData:'',
|
|
|
+ recommendList:[],
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
|
|
|
+ this.getindexData()
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ gotoTop(){
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0, duration: 300
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ swpBtnRight(){
|
|
|
+ var length=this.recommendList.length
|
|
|
+ var num=Math.ceil(length/2)
|
|
|
+ if(this.swpIndex<num){
|
|
|
+ this.swpIndex++
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ swpBtnLeft(){
|
|
|
+ if(this.swpIndex==0){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.swpIndex--
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ getindexData(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+ this.$http('/trainingOpenApi/indexData', {}, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.indexData = res.data;
|
|
|
+ this.recommendList=this.indexData.recommendList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mainMore(item){
|
|
|
+ console.log(item)
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'list?code='+item.code+'&topName='+item.name+'&comment='+item.comment
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .nav{
|
|
|
+
|
|
|
+ .swiperBox{
|
|
|
+ height: 356px;
|
|
|
+ background: #F3F8FF;
|
|
|
width: 100%;
|
|
|
- height: 72px;
|
|
|
+ }
|
|
|
+ .swiperCont{
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .tuijImg{
|
|
|
+ width: 24px;height: 24px;
|
|
|
+ }
|
|
|
+ .tuijbox{
|
|
|
+ display: flex;padding-top: 44px;padding-bottom: 30px;
|
|
|
+ }
|
|
|
+ .tuijTitle{
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ padding-left: 7px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .swpImgleft{
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ position: absolute;
|
|
|
+ top: 150px;
|
|
|
+ left: -50px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swpImgright{
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ position: absolute;
|
|
|
+ top: 150px;
|
|
|
+ right: -50px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper-item{
|
|
|
+ width: 576px;
|
|
|
+ height: 184px;
|
|
|
background: #FFFFFF;
|
|
|
- box-shadow: 0px 4px 10px 0px rgba(153, 153, 153, 0.12);
|
|
|
+ box-shadow: 0px 0px 16px 0px rgba(153, 153, 153, 0.2);
|
|
|
+ border-radius: 9px;
|
|
|
+ margin-top: 14px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swpCont{
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ height: 200px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .swpimg{
|
|
|
+ width: 276px;
|
|
|
+ height: 184px;
|
|
|
+ }
|
|
|
+ .swpimgBox{
|
|
|
+ width: 276px;
|
|
|
+ height: 184px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: -14px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .swpBr{
|
|
|
+ width: 276px;
|
|
|
+ height: 184px;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .swiper{
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ .swpTitleBox{
|
|
|
+ padding-left: 296px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 160px;
|
|
|
+ padding-top: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .swpTitle{
|
|
|
+ width: 260px;
|
|
|
+ height: 44px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 22px;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
}
|
|
|
- .navCont{
|
|
|
+ .swpTitleBox:hover .swpTitle{
|
|
|
+ color: #FF4F00;
|
|
|
+ }
|
|
|
+ .categoryName{
|
|
|
+ line-height: 24px;
|
|
|
+ width: 84px;
|
|
|
+ height: 24px;
|
|
|
+ background: rgba(63, 144, 247, 0.1);
|
|
|
+ border-radius: 14px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #3F90F7;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .mainCont{
|
|
|
width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .mainline{
|
|
|
+ padding-top: 48px;
|
|
|
+ }
|
|
|
+ .mainlineTop{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .mainlineTopleft{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .mainlineTitle{
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 33px;
|
|
|
+ }
|
|
|
+ .mainlinecount{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 33px;
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ .mainlineMore{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .mainwzbox{
|
|
|
display: flex;
|
|
|
+ padding-top: 30px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .mainwzImg{
|
|
|
+ width: 276px;
|
|
|
+ height: 184px;
|
|
|
+ }
|
|
|
+ .mainwzImgBox{
|
|
|
+ border-radius: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .mainwzline{
|
|
|
+ width: 276px;
|
|
|
+ height: 260px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .mainwzlineR{
|
|
|
+ margin-right: 32px;
|
|
|
+ }
|
|
|
+ .wztitle{
|
|
|
+ width: 250px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ height: 44px;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ padding-top: 16px;
|
|
|
+ padding:0 13px ;
|
|
|
+ }
|
|
|
+ .mainwzline:hover{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 16px 0px rgba(153, 153, 153, 0.2);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .mainwzline:hover .wztitle{
|
|
|
+ color: #FF4F00;
|
|
|
+ }
|
|
|
+ .mainlineMore:hover{
|
|
|
+ color: #FF4F00;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .gotopImg{
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
}
|
|
|
- .logoImg{
|
|
|
- width: 86px;
|
|
|
- height: 36px;
|
|
|
- margin-top: 19px;
|
|
|
+ .gotop{
|
|
|
+ position: fixed;
|
|
|
+ right:15vh ;
|
|
|
+ bottom: 100px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
</style>
|
guo
