mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-08 02:16:46 +08:00
1055 lines
29 KiB
Vue
1055 lines
29 KiB
Vue
<template>
|
||
<view>
|
||
<page-title>资源</page-title>
|
||
<view class="top-tab">
|
||
<view class="top-tab-left">
|
||
<view class="left_top">
|
||
<view @click="clicktab(0)" class="top_le">课程</view>
|
||
<view v-if="tabIndex==0" class="top-tab-line"></view>
|
||
</view>
|
||
<u-toast ref="articleFailure"></u-toast>
|
||
<view class="left_top">
|
||
<view @click="clicktab(1)" class="top_le">文章</view>
|
||
<view v-if="tabIndex==1" class="top-tab-line"></view>
|
||
</view>
|
||
<view class="left_top">
|
||
<view @click="clicktab(2)" class="top_le">问答</view>
|
||
<view v-if="tabIndex==2" class="top-tab-line"></view>
|
||
</view>
|
||
</view>
|
||
<view class="top-tab-icon">
|
||
<u-icon @click="toSearch()" name="search" size="28" color="#ffffff"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!--课程-->
|
||
<view v-if="tabIndex==0">
|
||
<view class="big-box_top">
|
||
<view class="contab">
|
||
<view class="contab-item" :class="{'contab-active':courseList.newHotIdx==0}" @click="clickConTab(0)">最新</view>
|
||
<view class="contab-item" :class="{'contab-active':courseList.newHotIdx==1}" @click="clickConTab(1)">最热</view>
|
||
</view>
|
||
<!-- 筛选选项 -->
|
||
<view class="big-box_top2">
|
||
<!-- <view class="newest" style="border-radius: 99upx">微课</view>
|
||
<view class="hottest" style="border-radius: 99upx">在线课</view>
|
||
<view class="hottest" style="border-radius: 99upx">录播课</view>
|
||
<view class="hottest" style="border-radius: 99upx">通用力</view> -->
|
||
<u-popup :show="show" mode="right" :round="20" @close="close" @open="open" @touchmove.stop.prevent="disabledScroll">
|
||
<scroll-view scroll-y="true" class="scroll-Y">
|
||
<view style="padding: 40upx;">
|
||
<text class="sear-box" style="width: 300px;display: flex;">
|
||
<view class="ser-top">
|
||
<text @click="close()">< </text>
|
||
</view>
|
||
<view style="width: 300px;color: #CCCCCC;">授课方式</view>
|
||
<view class="sear-info">
|
||
<view :class="wayFlag == item.flag ? 'active':'sear-index'" v-for="(item,index) in wayList" :key="index" @click="wayFn(item)">
|
||
<view>{{item.contname}}</view>
|
||
</view>
|
||
</view>
|
||
</text>
|
||
<text class="sear-box" style="width: 300px;display: flex;">
|
||
<view style="width: 300px;color: #CCCCCC;">应用场景</view>
|
||
<view class="sear-info">
|
||
<view v-for="(item,index) in sceneList" :key="index" :class="flog == item.flog ? 'sear-index':'active'" @click="sceneFn(index)">
|
||
<view>{{item.contname}}</view>
|
||
</view>
|
||
</view>
|
||
<text class="sear-box" style="width: 300px;display: flex;">
|
||
<view style="width: 300px;color: #CCCCCC;">内容分类</view>
|
||
<view class="sear-info">
|
||
<view :class="classifyFlag == item.flag ? 'active':'sear-index'" v-for="(item,index) in classifyList" :key="index" @click="classifyFn(item)">
|
||
<view>{{item.contname}}</view>
|
||
</view>
|
||
</view>
|
||
</text>
|
||
</text>
|
||
<view class="sear-su" >
|
||
<!-- 以下形式在微信小程序会无效，APP和H5有效 -->
|
||
<view class="custom-style" @click="resetFn()">重置</view>
|
||
<view class="custom-style" @click="ensureFn()">确定</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</u-popup>
|
||
<u-button @click="show = true"style="width: 140upx;height: 60upx;background-color:#f4f4f4;" >筛选</u-button>
|
||
</view>
|
||
</view>
|
||
<u-scroll-list v-if="flags" style="display: flex;" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
|
||
<view v-for="(item,index) in pitchArr" :key="index">
|
||
<view class="hottest">{{item.contname}}</view>
|
||
</view>
|
||
</u-scroll-list>
|
||
<view>
|
||
|
||
<!-- 课程列表 -->
|
||
<view v-for="(c,cidx) in Course.list" :key="cidx" class="con_box">
|
||
<view class="tit">
|
||
<text v-if="c.type==10">[微课]</text><text v-if="c.type==20">[录播]</text>
|
||
{{c.name}}
|
||
</view>
|
||
<view class="course" @click="toCourseDetail(c)">
|
||
<view class="course-img">
|
||
<!-- <img src="../../static/temp/course.png" style="width: 262upx;height: 147upx;" alt=""> -->
|
||
<!-- <image :src=" urlimage + c.coverImg " style="width: 262upx;height: 147upx;" mode=""></image>
|
||
--> <course-image :course="c" width="262upx" height="147upx" ></course-image>
|
||
<view class="coures-conent">
|
||
<view class="con-con">{{c.summary}}</view>
|
||
<view class="con-au">
|
||
<!-- <img src="../../static/temp/hPhoto.png" class='im'></image> -->
|
||
<course-image :course="c" width="50upx" height="50upx" margin-right="8upx" ></course-image>
|
||
<text class="tet">{{c.sysCreateBy}} {{ c.keywords }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="stu_c">
|
||
<view class="stu_e">
|
||
<text>{{c.studys}}人学习</text>
|
||
<text>{{c.praises}}人点赞</text>
|
||
</view>
|
||
<view class="stu-f">{{c.sysVersion}}分</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 文章 -->
|
||
<view v-if="tabIndex==1">
|
||
<view class="big-box_top">
|
||
<view class="contab">
|
||
<view class="contab-item" :class="{'contab-active':articleList.newHotIdx==0}" @click="clickConTab(0)">最新</view>
|
||
<view class="contab-item" :class="{'contab-active':articleList.newHotIdx==1}" @click="clickConTab(1)">最热</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="article_one" v-for="(item,irs) in Article.list" :key="irs" @click="toArticleDetail(item)">
|
||
<view class="content">
|
||
<view class="content-list">
|
||
<text style="font-size: 13px;color: #343434;">{{ item.title }}</text>
|
||
<text style="font-size: 8px; color: #BBBBBB;">{{ item.sysCreateTime }} </text>
|
||
</view>
|
||
<view class="content-listtwo">
|
||
<view class="list-details">
|
||
<view class="list-text" >{{ item.summary }}</view>
|
||
<view style="padding-top: 6px;">
|
||
<img src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
|
||
style="width: 15px;height: 15px;background-size: 100%;border-radius: 50%;"
|
||
alt="">
|
||
|
||
<text style="font-size: 26upx;color: #666666;">{{ item.sysCreateBy }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="pictures">
|
||
|
||
<!-- <img src="../../static/images/1644823669(1).png"
|
||
style="width: 88px;height: 59px;border-radius: 4px;margin-left: 17px;" alt=""> -->
|
||
</view>
|
||
</view>
|
||
<view style="margin-top: 8px;">
|
||
<interact-bar ></interact-bar>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- <view v-if="articleList.list.length>articleList.count">
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view> -->
|
||
</view>
|
||
<!-- 问答 -->
|
||
<view class="questions" v-if="tabIndex==2">
|
||
<view class="big-box_top">
|
||
<view class="contab">
|
||
<view class="contab-item" :class="{'contab-active':qaList.newHotIdx==0}" @click="clickConTab(0)">最新</view>
|
||
<view class="contab-item" :class="{'contab-active':qaList.newHotIdx==1}" @click="clickConTab(1)">最热</view>
|
||
<view class="contab-item" :class="{'contab-active':qaList.resolveIdx==2}" @click="clickConTab(2)">待解决</view>
|
||
<view class="contab-item" :class="{'contab-active':qaList.resolveIdx==3}" @click="clickConTab(3)">已解决</view>
|
||
<view class="contab-item" :class="{'contab-active':qaList.essence}" @click="clickConTab(4)">精华问题</view>
|
||
</view>
|
||
</view>
|
||
<view v-for="(qa,qaidx) in qaList.list" :key="qaidx" class="qa" @click="toQaDetail(qa)">
|
||
<!-- <view class="qa-header">
|
||
<view class="qa-user">
|
||
<img src="../../static/temp/hPhoto.png">
|
||
<view class="qa-time">{{qa.sysUpdateBy}}</view>
|
||
|
||
</view>
|
||
</view> -->
|
||
<view class="qa-body">
|
||
<view class="qa-basic"><text :class="qa.isResolve?'qa-solve':'qa-unSolve'">{{qa.isResolve?'[已解决]':'[待解决]'}}</text>{{qa.title}}</view>
|
||
</view>
|
||
<view class="qa-bottom">
|
||
{{qa.content}}
|
||
</view>
|
||
<view class="qa-data">{{qa.sysUpdateTime}}</view>
|
||
<view class="qa-bar">
|
||
<interact-bar :data="qa" :answers="true" :comments="false"></interact-bar>
|
||
</view>
|
||
</view>
|
||
<!-- <view v-if="qaList && qaList.list.length>qaList.count">
|
||
应该是我拿到的数据小于总数的时候才会出现这个
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view> -->
|
||
</view>
|
||
<view >
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import conindex from "../../config/index.js"
|
||
import apiArticle from '@/api/modules/article.js'
|
||
import apiCoures from '@/api/modules/course.js'
|
||
import {mapState,mapActions} from 'vuex';
|
||
import apiQa from '@/api/modules/qa.js'
|
||
import data from '@/components/data.js'; //筛选菜单数据
|
||
export default {
|
||
computed: mapState(['resourceTab']),
|
||
data() {
|
||
return {
|
||
page:1,//当前页数
|
||
pagesize:10, //总页数
|
||
loadStatus:'more', //加载样式 ：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
||
urlimage:'',
|
||
Course:'',
|
||
pictures:false,
|
||
Article:'',
|
||
keyword:'',
|
||
show: false,
|
||
tabIndex: 0,
|
||
qaList:{
|
||
pageIndex:1,
|
||
newHotIdx:0,
|
||
essence:false,
|
||
|
||
pageSize:10,
|
||
resolveIdx:-1,//此时是全部，无任何值
|
||
list:[]
|
||
},
|
||
courseList: {
|
||
pageIndex: 1,
|
||
newHotIdx:0,
|
||
pageSize:0,
|
||
list: []
|
||
},
|
||
articleList: {
|
||
pageIndex: 1,
|
||
newHotIdx:0,
|
||
pageSize:0,
|
||
list: []
|
||
},
|
||
indexArr: '',
|
||
valueArr: '',
|
||
//商品数据
|
||
defaultSelected: [],
|
||
filterData: [],
|
||
wayList:[
|
||
{flag:false,contname:'微课'},
|
||
{flag:false,contname:'在线课'},
|
||
{flag:false,contname:'录播课'},
|
||
],
|
||
wayFlag:true,
|
||
sceneList:[
|
||
{flog:false,contname:'校招新员工'}, {flog:false,contname:'社招新员工'}, {flog:false,contname:'新人科长'},
|
||
{flog:false,contname:'科长进阶'}, {flog:false,contname:'新任部长'}, {flog:false,contname:'部长进阶'},
|
||
{flog:false,contname:'新任中心长'}, {flog:false,contname:'营销师'}, {flog:false,contname:'项目经理'},
|
||
{flog:false,contname:'产品经理'}, {flog:false,contname:'京选小课堂'}, {flog:false,contname:'开拓视野'},
|
||
],
|
||
sceneFlag:true,
|
||
classifyList:[
|
||
{flag:false,contname:'通用力'},
|
||
{flag:false,contname:'专业力'},
|
||
{flag:false,contname:'领导力'},
|
||
{flag:false,contname:'更多'},
|
||
],
|
||
classifyFlag:true,
|
||
pitchArr:[],
|
||
flog:false,
|
||
flags:false,
|
||
tempList:[
|
||
{
|
||
type: 1,
|
||
id: '1',
|
||
title: '[微课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'5'
|
||
|
||
},
|
||
{
|
||
type: 1,
|
||
id: '2',
|
||
title: '[微课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'2'
|
||
|
||
},
|
||
{
|
||
type: 2,
|
||
id: '3',
|
||
title: '[录播课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'3'
|
||
|
||
},
|
||
{
|
||
type: 1,
|
||
id: '4',
|
||
title: '[微课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'5'
|
||
|
||
},
|
||
{
|
||
type: 2,
|
||
id: '5',
|
||
title: '[录播课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'3'
|
||
|
||
},
|
||
{
|
||
type: 1,
|
||
id: '6',
|
||
title: '[微课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'2'
|
||
|
||
},
|
||
{
|
||
type: 2,
|
||
id: '7',
|
||
title: '[录播课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'4'
|
||
|
||
},
|
||
{
|
||
type: 1,
|
||
id: '8',
|
||
title: '[微课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'1'
|
||
|
||
},
|
||
{
|
||
type: 2,
|
||
id: '9',
|
||
title: '[录播课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'2'
|
||
|
||
},
|
||
{
|
||
type: 1,
|
||
id: '10',
|
||
title: '[微课]BOE的历史与文化',
|
||
content:'目标学院公司内部，课程价值增强国人的危机意识...',
|
||
name:'陈萌',
|
||
dep:'(BOEU/教育技术中心)',
|
||
number:'9996',
|
||
num:'8888',
|
||
scor:'3'
|
||
|
||
},
|
||
]
|
||
}
|
||
},
|
||
filters: {
|
||
outData(value) {
|
||
return JSON.stringify(value);
|
||
}
|
||
},
|
||
onLoad (options) {
|
||
this.clicktab(this.tabIndex);
|
||
this.urlimage = conindex.fileUrl
|
||
|
||
},
|
||
|
||
onReachBottom(){ //上拉触底函数
|
||
|
||
this.loadStatus='loading';
|
||
if(this.tabIndex == 0){
|
||
this.CourseData()
|
||
} else if(this.tabIndex == 1){
|
||
this.ArticleData()
|
||
}else if(this.tabIndex == 2){
|
||
this.getQaData()
|
||
}
|
||
// if(!this.isLoadMore){ //此处判断，上锁，防止重复请求
|
||
// this.isLoadMore=true
|
||
// this.page+=1
|
||
// this.CourseData()
|
||
// }
|
||
// this.loadStatus='more';
|
||
},
|
||
methods: {
|
||
//获取问答数据列表
|
||
getQaData(){
|
||
let queryObj={};
|
||
// let {pageIndex,pageSize,newHotIdx:orderField,essence:isEssence,resolveIdx:isResolve}=this.qaList
|
||
if(orderField==0){
|
||
orderField='id'
|
||
}
|
||
if(orderField==1){
|
||
orderField='views'
|
||
}
|
||
if(isResolve==-1){
|
||
queryObj={pageIndex,pageSize,orderField,isEssence}
|
||
}else{
|
||
if(isResolve==2){
|
||
isResolve=false
|
||
}else{
|
||
isResolve=true
|
||
}
|
||
queryObj={pageIndex,pageSize,orderField,isEssence,isResolve}
|
||
}//筛选数据转换
|
||
|
||
|
||
apiQa.pageList(queryObj).then(res=>{
|
||
if(res.status==200){
|
||
//console.log(res)
|
||
this.qaList.list = res.result.list
|
||
|
||
setTimeout(()=>{
|
||
this.loadStatus='more'
|
||
},1000);
|
||
setTimeout(function(){ uni.hideLoading() },1000);
|
||
}else{
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title:"获取数据失败"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
clicktab(idx) {
|
||
uni.showLoading({title:'加载中...'})
|
||
this.tabIndex = idx;
|
||
//this.setResourceTab(idx); //临时保存
|
||
this.$store.dispatch('resource/setResourceTab',idx);
|
||
if(idx==2){
|
||
this.qaList.resolveIdx=-1;//清空已解决或待解决的选中状态
|
||
this.getQaData()
|
||
setTimeout(function(){ uni.hideLoading() },1000);
|
||
|
||
}else if(idx==0){
|
||
this.CourseData()
|
||
//模拟加载数据
|
||
if(this.courseList.list.length==0){
|
||
//这里正式环境要换成从后台去提取
|
||
let $this=this;
|
||
this.tempList.forEach(item=>{
|
||
$this.courseList.list.push(item);
|
||
});
|
||
}
|
||
setTimeout(function(){ uni.hideLoading() },1000);
|
||
//文章
|
||
}else{
|
||
// apiArticle.portalList(5,1).then(res=>{
|
||
// console.log(res);
|
||
// });
|
||
let $this=this
|
||
|
||
|
||
this.ArticleData()
|
||
if(this.articleList.list.length==0){
|
||
for(var i=0;i<10;i++){
|
||
$this.articleList.list.push({
|
||
id:''+i,
|
||
title:'文章名称'+i
|
||
});
|
||
}
|
||
}
|
||
setTimeout(function(){ uni.hideLoading() },1000);
|
||
}
|
||
},
|
||
//拿到课程数据列表方法
|
||
CourseData(){
|
||
|
||
let query = {
|
||
pageIndex:1,
|
||
pageSize:20,
|
||
device:3,
|
||
}
|
||
apiCoures.pageList (query).then(res=>{
|
||
if(res.status==200){
|
||
this.Course = res.result
|
||
//console.log(res.result)
|
||
setTimeout(()=>{this.loadStatus='more'},1000);
|
||
setTimeout(function(){ uni.hideLoading() },1000);
|
||
}
|
||
|
||
})
|
||
|
||
|
||
},
|
||
|
||
|
||
//拿到文章数据列表方法
|
||
ArticleData(){
|
||
let artdata = {
|
||
pageIndex:1,
|
||
pageSize:20,
|
||
keyword:this.keyword
|
||
}
|
||
apiArticle.findPortal(
|
||
artdata
|
||
).then(res=>{
|
||
|
||
if(res.status==200){
|
||
//console.log(res.result)
|
||
this.Article = res.result
|
||
|
||
setTimeout(()=>{
|
||
this.loadStatus='more'
|
||
},1000);
|
||
setTimeout(function(){ uni.hideLoading() },1000);
|
||
}
|
||
else{
|
||
this.$refs.articleFailure.show({message:'加载内容失败',type:'error'});
|
||
console.log(res.message+res.error);
|
||
}
|
||
|
||
|
||
})
|
||
|
||
},
|
||
clickConTab(idx){
|
||
|
||
if(this.tabIndex==0){ //课程
|
||
|
||
this.courseList.newHotIdx=idx;
|
||
}else if(this.tabIndex==1){ //文章
|
||
this.articleList.newHotIdx=idx;
|
||
}else if(this.tabIndex==2){ //问答
|
||
if(idx<2){
|
||
//最新最热
|
||
this.qaList.newHotIdx=idx;
|
||
}else if(idx==2 || idx==3){
|
||
this.qaList.resolveIdx=idx;
|
||
}else{
|
||
if(this.qaList.essence){
|
||
this.qaList.essence=false;
|
||
}else{
|
||
this.qaList.essence=true;
|
||
}
|
||
|
||
}
|
||
this.getQaData()
|
||
}
|
||
//调查查询请求
|
||
},
|
||
confirm(e) {
|
||
this.indexArr = e.index;
|
||
this.valueArr = e.value;
|
||
},
|
||
toSearch(){
|
||
let value;
|
||
if(this.tabIndex==0){
|
||
value=1
|
||
}
|
||
if(this.tabIndex==1){
|
||
value=2
|
||
}
|
||
if(this.tabIndex==2){
|
||
value=4
|
||
}
|
||
uni.navigateTo({
|
||
url: './search?type='+value
|
||
});
|
||
},
|
||
|
||
//文章跳转详情
|
||
toArticleDetail(item) {
|
||
|
||
//console.log(item.id)
|
||
|
||
uni.navigateTo({
|
||
url: './articeDetail?id=' + item.id
|
||
});
|
||
|
||
},
|
||
toQaDetail(item) {
|
||
uni.navigateTo({
|
||
url: './qaDetail?id=' + item.id
|
||
});
|
||
},
|
||
|
||
//课程跳转详情
|
||
toCourseDetail(citem) {
|
||
|
||
if (citem.type == 10) {
|
||
//console.log(citem.id)
|
||
uni.navigateTo({
|
||
url: 'microDetail?id=' + citem.id
|
||
});
|
||
} else if (citem.type == 20) {
|
||
uni.navigateTo({
|
||
url: 'courseDetail?id=' +citem.id
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
//筛选
|
||
close() {
|
||
this.show = false
|
||
},
|
||
sceneFn(id){
|
||
this.sceneList.forEach((item,index)=>{
|
||
if(index == id){
|
||
item.flog = !item.flog
|
||
}
|
||
})
|
||
},
|
||
wayFn(val){
|
||
val.flag = true
|
||
},
|
||
classifyFn(val){
|
||
val.flag = true
|
||
},
|
||
resetFn(){
|
||
this.sceneList.forEach(item=>{
|
||
item.flot = false
|
||
})
|
||
this.wayList[0].flag = false
|
||
this.wayList[1].flag = false
|
||
this.wayList[2].flag = false
|
||
this.classifyList[0].flag = false
|
||
this.classifyList[1].flag = false
|
||
this.classifyList[2].flag = false
|
||
this.classifyList[3].flag = false
|
||
this.sceneList[0].flog = false
|
||
this.sceneList[1].flog = false
|
||
this.sceneList[2].flog = false
|
||
this.sceneList[3].flog = false
|
||
this.sceneList[4].flog = false
|
||
this.sceneList[5].flog = false
|
||
this.sceneList[6].flog = false
|
||
this.sceneList[7].flog = false
|
||
this.sceneList[8].flog = false
|
||
this.sceneList[9].flog = false
|
||
this.sceneList[10].flog = false
|
||
this.sceneList[11].flog = false
|
||
},
|
||
// 点击确定
|
||
ensureFn(){
|
||
this.flags = true
|
||
this.pitchArr = this.sceneList.filter(item=>{
|
||
return item.flog == true
|
||
})
|
||
this.show = false
|
||
this.wayList[0].flag = false
|
||
this.wayList[1].flag = false
|
||
this.wayList[2].flag = false
|
||
this.classifyList[0].flag = false
|
||
this.classifyList[1].flag = false
|
||
this.classifyList[2].flag = false
|
||
this.classifyList[3].flag = false
|
||
this.sceneList[0].flog = false
|
||
this.sceneList[1].flog = false
|
||
this.sceneList[2].flog = false
|
||
this.sceneList[3].flog = false
|
||
this.sceneList[4].flog = false
|
||
this.sceneList[5].flog = false
|
||
this.sceneList[6].flog = false
|
||
this.sceneList[7].flog = false
|
||
this.sceneList[8].flog = false
|
||
this.sceneList[9].flog = false
|
||
this.sceneList[10].flog = false
|
||
this.sceneList[11].flog = false
|
||
},
|
||
disabledScroll(){
|
||
return
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.active{
|
||
font-size: 25upx;
|
||
width: 130upx;
|
||
margin: 10upx 10upx;
|
||
padding-left:10px;
|
||
padding-right: 10px;
|
||
height: 80upx;
|
||
border-radius: 5px;
|
||
line-height: 80upx;
|
||
text-align: center;
|
||
border: 2px solid #ffaa00;
|
||
background: #ffaa00;
|
||
color: #FFFFFF;
|
||
}
|
||
.con_box {
|
||
margin-bottom: 10px;
|
||
background-color: #FFFFFF;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
.tit {
|
||
font-size: 16px;
|
||
color: #4c4c4c;
|
||
font-weight: 35upx;
|
||
margin-bottom: 10upx;
|
||
}
|
||
}
|
||
.sear-box{
|
||
.ser-top text {
|
||
font-size: 40upx;
|
||
}
|
||
.ser-top {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
margin-bottom: 25upx;
|
||
}
|
||
.ser-top :nth-child(2) {
|
||
font-size: 50upx;
|
||
margin-left: 235upx;
|
||
}
|
||
.sear-info{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
.sear-index{
|
||
font-size: 25upx;
|
||
width: 130upx;
|
||
margin: 10upx 10upx;
|
||
padding:0 10px;
|
||
height: 80upx;
|
||
border: 2px solid #ccc;
|
||
border-radius: 5px;
|
||
line-height: 80upx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.sear-su {
|
||
justify-content: space-around;
|
||
padding: 20px;
|
||
display: flex;
|
||
.custom-style{
|
||
width: 250upx;
|
||
height: 80upx;
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
border: 2px solid #ffaa00;
|
||
border-radius: 99upx;
|
||
color:#ffaa00 ;
|
||
}
|
||
.custom-style:nth-child(2) {
|
||
margin-left: 25upx;
|
||
background: #ffaa00;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
.top-tab {
|
||
height: 60px;
|
||
background: linear-gradient(to bottom, #6BA0FC, #6297FD);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 60px;
|
||
color: #FFFFFF;
|
||
.top-tab-left {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 70%;
|
||
text-align: center;
|
||
.left_top{
|
||
width: 50px;
|
||
|
||
.top_le{
|
||
font-size: 36upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-tab-icon {
|
||
margin-right: 46upx;
|
||
margin: auto;
|
||
}
|
||
|
||
.top-tab-line {
|
||
width: 50px;
|
||
height: 3px;
|
||
background: #FFFFFF;
|
||
margin-top: -5px;
|
||
}
|
||
}
|
||
.contab{
|
||
display: flex;
|
||
.contab-item{
|
||
padding: 10upx 20upx;
|
||
border-radius: 8upx;
|
||
font-size: 24upx;
|
||
margin-right: 16upx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
.contab-active{
|
||
background-color: #DFEBF4;
|
||
color: #5BA2FC;
|
||
}
|
||
}
|
||
.course {
|
||
.course-img {
|
||
display: flex;
|
||
margin-top: 20upx;
|
||
position: relative;
|
||
>text {
|
||
width: 100upx;
|
||
position: absolute;
|
||
left: 199upx;
|
||
top: 0px;
|
||
opacity: 0.6;
|
||
background-color: #7f7f7f;
|
||
color: #FFFFFF;
|
||
}
|
||
.con-con {
|
||
// display: flex;
|
||
flex-direction: column;
|
||
font-size: 14px;
|
||
color: #444444;
|
||
padding-left: 10upx;
|
||
margin-top: 3px;
|
||
margin-bottom: 6px;
|
||
display: -webkit-box;
|
||
// white-space:pre-wrap;
|
||
overflow: hidden;
|
||
// text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
.con-au {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
padding-left: 10upx;
|
||
image{
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.im {
|
||
width: 50upx;
|
||
height: 50upx;
|
||
margin-right: 8upx;
|
||
}
|
||
.tet {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
padding-top: 10upx;
|
||
}
|
||
.coures-conent{
|
||
flex: 1;
|
||
overflow: hidden;
|
||
// height: 100%;
|
||
}
|
||
|
||
}
|
||
.stu_c {
|
||
display:flex;
|
||
justify-content: space-between;
|
||
.stu_e {
|
||
margin-top: 10upx;
|
||
display: flex;
|
||
font-size: 12px;
|
||
color: #666666;
|
||
}
|
||
.stu_e :nth-child(2) {
|
||
margin-left: 40upx;
|
||
}
|
||
.stu-f {
|
||
font-size: 32upx;
|
||
color:#ffaa00 ;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
.article_one {
|
||
padding-bottom: 10px;
|
||
.content{
|
||
background: #FFFFFF;
|
||
border-radius: 5px;
|
||
.content-list{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 10px;
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
.content-listtwo{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 8px;
|
||
height: 130upx;
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
.list-details{
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
.list-text{
|
||
|
||
// color: #8F8F8F;
|
||
overflow:hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
text-overflow:ellipsis;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.qa {
|
||
padding: 10px;
|
||
box-shadow: #F7F7F7 0px 6px 5px;
|
||
border-radius: 4px;
|
||
background: #FFFFFF;
|
||
margin-top: 10px;
|
||
|
||
.qa-header {
|
||
height: 26px;
|
||
line-height: 25px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.qa-user {
|
||
display: flex;
|
||
|
||
img {
|
||
height: 25px;
|
||
width: 25px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.qa-time{
|
||
font-size: 36upx;
|
||
display: flex;
|
||
|
||
text{
|
||
font-size: 28upx;
|
||
color: #666666
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.qa-body {
|
||
padding-top: 20upx;
|
||
|
||
view{
|
||
font-size: 36upx;
|
||
color: #000000;
|
||
|
||
text{
|
||
font-size: 36upx;
|
||
color: #E62E38;
|
||
}
|
||
.resolved{
|
||
color: #1EA0FA;
|
||
}
|
||
}
|
||
.qa-title{
|
||
display: -webkit-box;
|
||
// white-space:pre-wrap;
|
||
overflow: hidden;
|
||
// text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.qa-bottom {
|
||
font-size: 30upx;
|
||
margin-top: 10upx;
|
||
color: #7f7f7f;
|
||
display: -webkit-box;
|
||
// white-space:pre-wrap;
|
||
overflow: hidden;
|
||
// text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.qa-data{
|
||
font-size: 28upx;
|
||
color: #999999;
|
||
margin-top: 20upx;
|
||
padding-bottom: 30upx;
|
||
border-bottom: 1px solid #EBEBEB;
|
||
}
|
||
}
|
||
|
||
.hottest {
|
||
background: #DFEBF4;
|
||
color: #5BA2FC;
|
||
}
|
||
.big-box_top{
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 10px;
|
||
margin-bottom: 20upx;
|
||
margin-left: 16upx;
|
||
}
|
||
/deep/.u-icon__icon{
|
||
width: 30upx;
|
||
height: 28upx;
|
||
color: #FFFFFF;
|
||
}
|
||
.scroll-Y {
|
||
height: 100vh;
|
||
}
|
||
</style>
|