<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>
