<template>
	<view>
		<u-toast ref="messager"></u-toast>
		<!--页面头部-->
		<view class="top" style="padding-top: 6px;">
			<view class="top-bar"> 
			<!-- 	<view style="position: relative" @click="toMessage()" >
					<view v-if="msgNum>0" style="position: absolute;top:12px;right: 16px;z-index: 999;">
						<u-badge :isDot="true" :offset="[30,30]" type="error"></u-badge>
					</view>
					<u-icon class="top-bar-icon" :size="26" name="bell"></u-icon>
				</view> -->
				<view class="top-bar-center">
					<u-search
						placeholder="搜索"
						:clearabled="true"
						:showAction="false"
						:height="36"
						@focus="toSearch()"
						bgColor="#F7F7F7">
					</u-search>
					<!-- <view class="top-bar-tab" @click="clicktab(1)" :class="{'active':tabIndex==1}">最热</view>
					<view class="top-bar-tab" @click="clicktab(0)" :class="{'active':tabIndex==0}">最新</view> -->
				</view>
				<!-- <view>
					<u-icon @click="toSearch()" class="top-bar-icon" name="search" :size="26"></u-icon>
				</view> -->
			</view>
		</view>
		<!--内容切换区-->
		<view class="con-top">
			<view class="con-tab">
				<view class="con-tab-item" v-for="(item,index) in conTypeList" :key="index" @click="changeConType(item)"
					:class="{'active':conType==item.type,}" >{{item.con}}
					<view class="border-dw" v-show="conType==item.type">
						
					</view>
				</view>
			</view>
			<view style="line-height: 40upx;height: 40upx; padding-top: 14upx;font-size: 16px; ">
				<data-filter v-if="conType == 1" filterWidth="100%" :noOrder="false" :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
			</view>
		</view>
		<view class="" v-show="conType == 0">
			<recommend-index></recommend-index>
		</view>
		
		<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
	    <view v-if="conType == 1" style="background-color: #fff;padding: 0 30upx;">
				<!-- <view class="tags" v-if="dataFilter.courseTags.length>0">
					 <u-scroll-list :indicator="false">
						<view v-for="(tag, tagIdx) in dataFilter.courseTags" :key="tagIdx" >
							<view class="tag-item">{{tag.text}} </view>
						</view>
					</u-scroll-list>
				</view> -->
				<!-- u 选小课堂 -->
			<!-- 	<view class="uxclass" @click="toNewLink">
					<view class="ux_tab">
						<view class="ux-image">
							<image src="../../static/images/utop-course.png" mode=""></image>
						</view>
						<view class="uxtext">
							<view class="">
								<text class="ux-tit">U选小课堂</text>
							</view>
							<view class="ux-cont">千门U选好课,涵盖：前沿趋势、商业财经、职场技能、专业提升，免费持续开放中！BOEer,快来学习吧！</view>
						</view>
					</view>
				</view> -->
	    		<!-- 课程列表 -->
				<course-list :items="courseList"></course-list>
		</view>
	    <!-- 文章 -->
	    <view>
	    	<view v-if="conType == 2">
				<view class="tab-article">
					<text class="article-tab-text" :class="{'article-active':tabIndex==1}" @click="clicktab(1)">最热</text>
					<text class="article-tab-text" :class="{'article-active':tabIndex==0}" @click="clicktab(0)">最新</text>
				</view>
	    		<view class="article" v-for="(item,irs) in articleList" :key="irs" @click="toArticleDetail(item)">
	    			<div class="article-content">
						<div class="article-info">
							<view class="article-title">
								{{ item.title }} 
							</view>
							<view class="article-author" style="display: flex;justify-content: space-between;">
								<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
								<text style="padding-top: 8rpx;padding-left: 9rpx;font-size: 26rpx;line-height: 40upx; color: #999999;font-weight: 400; float: right;">
									{{item.sysCreateTime.substring(0,10)}}
								</text>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view style="margin-top: 32upx;">
									<view class="article-summary" >{{ item.summary }}</view>
								</view>
								<view v-if="item.coverurl!=''" class="article-img">
									<image :src="fileUrl+item.coverurl" style="width: 184rpx;height: 124rpx;border-radius: 15rpx;"></image>
								</view> 
							</view>
						</div>
					</div>
	    		</view>
	    	</view>
	    </view>
	    <!-- 问答 -->
		<view v-if="conType == 4">
			<!-- <view class="tags" v-if="dataFilter.qaTags.length>0">
				 <u-scroll-list :indicator="false">
					<view v-for="(tag, tagIdx) in dataFilter.qaTags" :key="tagIdx" >
						<view class="tag-item">{{tag.text}} </view>
					</view>
				</u-scroll-list>
			</view> -->
			<view class="tab-qa">   		
				<text class="qa-tab-text" :class="{'qa-active':tabIndex==1}" @click="clicktab(1)">最热</text>   		
				<text class="qa-tab-text" :class="{'qa-active':tabIndex==0}" @click="clicktab(0)">最新</text>   		
			</view>
			<view class="qa" v-for="(item,irs) in qaList" :key="irs">
				<view class="content">
					<view class="content-list"  @click="toQaDetail(item)">
						<view class="content-title">
							<!-- qa-basic -->
							<text v-if="item.isResolve" class="qa-solve">【已解决】</text>
							<text v-else class="qa-unSolve">【待解决】</text>
						    {{ item.title }}
						</view>
					</view>
					
					<view class="content-listtwo"  @click="toQaDetail(item)">
						<view class="list-details">
							<view class="list-text" >{{item.content }}</view>
							<!-- <view class="list-best" v-if="item.isResolve" > -->
					<!-- 			<text style="color:#FFB30F">最佳回答：</text>
							{{item.bestAnswer}}</view> -->
						</view>
					<!-- 	<view style="margin-top: 10rpx;margin-left: 10rpx;" v-if="item.images != ''"  @click="toQaDetail(item)">
							<image :src="fileUrl+item.images" style="width: 157rpx;height: 118rpx;border-radius: 15rpx;"></image>
						</view> -->
					</view>
					<view class="item-author" style="display: flex;justify-content: space-between;" @click="toQaDetail(item)">
						<view class="" style="display: flex;">
							<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
								<text style="padding-top: 8rpx;padding-left: 12rpx;line-height: 40upx; color: #999; font-size: 26rpx; ">
									{{item.sysCreateTime.substring(0,10)}}
								</text>
						</view>
						<view class="qa-info-bar">
							<text>{{item.praises}} 赞同</text>
							<text style="margin: 0 16upx;">·</text>
							
							<text>{{item.answers}} 回答</text>
						</view>
					</view>
				<!-- 	<view style="margin-top: 0px;">
						<interact-bar :data="item" :comments="false" :answers="true"></interact-bar>
					</view> -->
				</view>
			</view>
		</view>
	    <view v-show="conType != 0">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<u-overlay :show="signInShow">
			<view style="padding-top: 180upx;">
				<view style="margin-top: 180upx;width:624upx;margin: 0px auto;position: relative;">
					<img usemap="#HotMap" src="/mobile/static/images/dlg.png" style="width:624upx;height: 864upx;">
					<text @click="signInShow=false" style="position: absolute;right: 15upx;top: 0upx;color: #ffffff;font-size: 40px;">×</text>
					<mapelement></mapelement>
				</view>
			</view>
		</u-overlay>
	</view>
</template>
<script>
	
	import apiArticle from '@/api/modules/article.js'
    import apiCourse from '@/api/modules/course.js'
	// import apiOldCourse from '@/api/boe/course.js'
	import apiCoursePortal from '@/api/modules/coursePortal.js'
	import apiIndex from '@/api/modules/index.js'
	import apiUser from '@/api/system/user.js'
	import apiQa from '@/api/modules/qa.js'
	import apiMessage from '@/api/system/message.js'
	import {toScore} from '@/utils/tools.js'
	import apiBoeCourse from '@/api/boe/course.js'
	import { mapGetters,mapActions} from 'vuex';
	export default {
		data(){
			return {
				noPageList: true,//判断接口是否还有数据
				noDataList: true,//判断接口是否还有数据
				msgNum:0,
				signInShow:false,
				signLocalTimesKey:'xboe_sign_dlg_times',
				courseList:[],//课程列表数据
				articleList: [],//文章列表数据
				qaList: [],//问答列表数据
				tabIndex: 1,
				conType: 0,
				loadStatus: 'more',
				pageSize:20,//统一每页多少条
				converToScore:toScore,
				conTypeList: [
				    {type: 0,con: '推荐'},
					{type: 1,con: '课程'},
					{type: 2,con: '文章'},
					{type: 4,con: '问答'},
				],
				fileUrl:this.$config.fileUrl,
				dataFilter:{
					courseTags:[],
					courseParams:{},
					qaTags:[],
					qaParams:{}
				},
				dataList:{
					list00:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more', list:[]},
					list01:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
					list02:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
					list04:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
					list10:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
					list11:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
					list12:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]},
					list14:{pageIndex:1,tags:[],params:{},hasMore:true,loadText:'more',list:[]}
				},
				dataName:'list01',
				totalPages:1,
			}	
		},
		computed: {
		    ...mapGetters(['userInfo','sysTypeMap'])
		},
		onPullDownRefresh() {
			this.onReachBottom();
		},
		onReachBottom() {
			//this.loadStatus='loading';//more,loading,noMore
			this.dataName='list'+this.tabIndex+this.conType;
			//this.dataList[this.dataName].pageIndex++;
			let curData=this.dataList[this.dataName];
			if(curData.hasMore){
				curData.pageIndex++;
				if(this.conType== 1) {// 课程
					this.findCourseData();
				} else if(this.conType == 2) {// 文章
					this.findArticleData();
				} else if(this.conType == 4) {// 问答
					this.findQaData();
				}
			}
		},
		onLoad() {
			//this.$watermark.set('');
		},
		onShow() {
			this.countNoReadMsg();
		},
		components:{
		    'mapelement': {
			  render: function(createElement) {
				
		        var pElem1 = createElement('area', {
		            attrs:{
		                shape: "circle",
		                coords: "280,30,30",
		                href:"javascript:;",
		            },
		            on: {
		                click: function() {
		                    //$this.signInShow=false;
					    },
		            }
		        });
				var pElem2 = createElement('area', {
				    attrs:{
				        shape: "rectangle",
				        coords: "30,300,400,400",
				        href:"https://boehrsurvey.wjx.cn/vm/PmreuFN.aspx",
				    }
				});
		        return createElement('map',  {attrs: {
		            name: "HotMap",
		            id: "HotMap"
		          }},[
					  pElem2  //想要添加更多area,可在数组中继续添加。如[pElem1,pElem2,…]
		          ])
		      },
		    },
		},
		mounted() {
			//控制弹出窗口的代码
			let now = new Date() //当前时间
			let end = new Date('2022/06/29 00:00:00') //对比时间
			if(now.getTime() < end.getTime()){
			    let times = uni.getStorageSync(this.signLocalTimesKey);
			    let isNewLogin=uni.getStorageSync("boe_new_login");
			    //let isNewLogin='1';
			    if(isNewLogin && isNewLogin=='1'){
			      if(!times){
			        this.signInShow = true;//显示
			        uni.setStorageSync(this.signLocalTimesKey,1);
			      }else{
			        //console.log(times,'times');
			        let intTimes=parseInt(times);
			        if(intTimes<3){
			           this.signInShow = true;//显示
			           intTimes++;
			           uni.setStorageSync(this.signLocalTimesKey,intTimes);
			        }
			      }
			      uni.setStorageSync("boe_new_login",0);
			    }
			
			}
			this.getSysTypeTree();
			this.findCourseData();
			this.loadSysTypes();
		},
		methods: {
			...mapActions({
			      // getResOwnerTree:'resOwner/getResOwnerTree',
			      // loadResOwners:'resOwner/loadResOwners',
			      getSysTypeTree:'sysType/getSysTypeTree',
			      loadSysTypes:'sysType/loadSysTypes'
			    }),
			sysTypeName(code){
			  if(code=='' || code==0){return '';}
			  return this.sysTypeMap.get(code);
			},
			closeSignDlg(){
				 this.signInShow=false;
			},
			toNewLink(){
				location.href='https://m.qingxuetang.com/x/?appId=qxtcorp306130';
			},
			countNoReadMsg(){
				apiMessage.isRead().then(rs=>{
					if(rs.status==200){
						this.msgNum=rs.result;
					}else{
						console.log('加载未读消息数量失败:'+rs.message);
					}
				})
			},
			reLoad(){
				this.dataName='list'+this.tabIndex+this.conType;
				let curData=this.dataList[this.dataName];
				curData.list=[];
				curData.pageIndex=1;
				if(this.conType== 1) {// 课程
					this.findCourseData();
				} else if(this.conType == 2) {// 文章
					this.findArticleData();
				} else if(this.conType == 4) {// 问答
					this.findQaData();
				}
			},
			resetFilters(){
				this.dataName='list'+this.tabIndex+this.conType;
				let curData=this.dataList[this.dataName];
				if(this.conType==1){
					this.dataFilter.courseTags=[];
					this.dataFilter.courseParams={};
					this.reLoad();
				}else if(this.conType==4){
					this.dataFilter.qaTags=[];
					this.dataFilter.qaParams={};
					this.reLoad();
				}
				
			},
			submitFilters(tags,params){
				this.dataName='list'+this.tabIndex+this.conType;
				let curData=this.dataList[this.dataName];
				curData.pageIndex=1;
				this.noDataList=true;
				this.noPageList=true;
				if(this.conType==1){
					this.dataFilter.courseTags=tags;
					this.dataFilter.courseParams=params;
					this.reLoad();
				}else if(this.conType==4){
					this.dataFilter.qaTags=tags;
					this.dataFilter.qaParams=params;
					this.reLoad();
				}
			},
			findQaData(){
				//pageIndex,pageSize,keyWord(关键词)，isResolve(待解决和已解决，false,true),
				//isEssence(是否是精华问题,true或者false,),orderField 排序字段，前端给什么字段，根据什么字段查询
				//排序顺序 orderAsc(顺序或者倒叙),true顺序，
				let curData=this.dataList[this.dataName];
				let queryObj={
					pageIndex: curData.pageIndex,
					orderField:'',
					orderAsc:false,
					isEssence:'',
					isResolve:'',
					status:1
				};
				if(this.tabIndex==0){
					queryObj.orderField='id';
				}else{
					queryObj.orderField='answers';
				}
				if(this.dataFilter.qaParams.isEssence){
					queryObj.isEssence=this.dataFilter.qaParams.isEssence;
				}
				// if(this.dataFilter.qaParams.isResolve){
					queryObj.isResolve=this.dataFilter.qaParams.isResolve;
				// }
				uni.showLoading({title:'加载中...'});
				apiQa.pageList(queryObj).then(res=>{
					setTimeout(function(){ uni.hideLoading() },100);
					if(res.status==200){
					
						let userIds=[];
						res.result.list.forEach(item=>{
							item.authorInfo={avatar:'',name:'',code:'',sex:null};
							curData.list.push(item);
							userIds.push(item.sysCreateAid);
						});
						if(curData.pageIndex>=res.result.totalPages){
							curData.hasMore=false;
							curData.loadText='noMore';
						}else{
							curData.hasMore=true;
							curData.loadText='more';
						}
						this.loadUserInfos(res.result.list,userIds);
						this.qaList=curData.list;
						if(curData.hasMore){
							this.loadStatus='more';
						}else{
							this.loadStatus='noMore';
						}
					}else{
						uni.showToast({icon: 'none',title:"获取数据失败"});
					}
				})
				
			},
			//拿到课程数据列表方法
		async findCourseData(){
				this.dataName='list'+this.tabIndex+this.conType;
				let curData=this.dataList[this.dataName];
				let isTopList = [];// 置顶数据
				let data = [];
				let query = {
					pageIndex:curData.pageIndex,
					pageSize:10,
					orderField:'',
					topOrder:true,
					orderAsc:false,
					device:2,
					publish:true,
					sysType1:'',
					sysType2:'',
					sysType3:'',
					scenes:'',
					type:''
				}
				query.type=this.dataFilter.courseParams.type;
				if(this.tabIndex==0){
					query.orderField='id';
				}else{
					query.orderField='studys';
				}
				if(this.dataFilter.courseParams.scenes){
					query.scenes=this.dataFilter.courseParams.scenes;
				}
				if(this.dataFilter.courseParams.sysType1){
					query.sysType1=this.dataFilter.courseParams.sysType1;
				}
				if(this.dataFilter.courseParams.sysType2){
					query.sysType2=this.dataFilter.courseParams.sysType2;
				}
				if(this.dataFilter.courseParams.sysType3){
					query.sysType3=this.dataFilter.courseParams.sysType3;
				}
		
				//从新课程库中取10条，从老库中取10条 keyword:this.course.keyword
				uni.showLoading({title:'加载中...'});
				await apiCoursePortal.courseSearch(query).then(res=>{
					setTimeout(function(){ uni.hideLoading() },100);
					if(res.status==200 && res.result.list.length>0){
						curData.list.push(...res.result.list);
						this.loadStatus='more';
					}else{
						this.loadStatus='noMore';
					}
				})
				this.courseList=curData.list;
				},
			//拿到文章数据列表方法
			findArticleData(){
				//console.log('查询文章');
				let curData=this.dataList[this.dataName];
				let artdata = {
					pageIndex:curData.pageIndex,
					pageSize:20,
					order:this.tabIndex==0? 1:2
				}
				uni.showLoading({title:'加载中...'});
				apiArticle.findPortal(artdata).then(res=>{
					setTimeout(function(){ uni.hideLoading() },100);
					if(res.status==200){
				       let userIds=[];
				       res.result.list.forEach(item=>{
						    item.authorInfo={avatar:'',name:'',code:'',sex:null};
							curData.list.push(item);
							userIds.push(item.sysCreateAid);
				       });
				       if(curData.pageIndex>=res.result.totalPages){
							curData.hasMore=false;
					   }else{
							curData.hasMore=true;
					   }
				       this.loadUserInfos(res.result.list,userIds);
					   this.articleList=curData.list;
					   if(curData.hasMore){
					   	this.loadStatus='more';
					   }else{
					   	this.loadStatus='noMore';
					   }
					}
					else{
						//this.$refs.message.show({message:'加载文章数据失败',type:'error'});
						console.log(res.message,res.error);
					}
				})
			},
			// 
			//文章跳转详情
			toArticleDetail(item) {
				uni.navigateTo({
					url: '/pages/resource/articeDetail?id=' + item.id
				});
			},
			toQaDetail(item) {
				uni.navigateTo({
					url: '/pages/resource/qaDetail?id=' + item.id
				});
			},
			toMessage() {
				uni.navigateTo({
					url: '/pages/my/message'
				})
			},
			toSearch(){
				let pageUrl='/pages/resource/search';
				uni.navigateTo({
					url:pageUrl
				})
			},
			changeList(){
				this.dataName='list'+this.tabIndex+this.conType;
				let curData=this.dataList[this.dataName];
				if(curData.list.length==0){
					if(this.conType== 1) {// 课程
						this.findCourseData();
					} else if(this.conType == 2) {// 文章
						this.findArticleData();
					} else if(this.conType == 4) {// 问答
						this.findQaData();
					}
				}else{
					if(this.conType== 1) {//课程
						this.courseList=curData.list;
					} else if(this.conType == 2) {// 文章
						this.articleList=curData.list;
					} else if(this.conType == 4) {// 问答
						this.qaList=curData.list;
					}
				}
			},
			clicktab(idx) {
				this.tabIndex = idx;
				this.noPageList= true,//判断接口是否还有数据
                this.noDataList= true,//判断接口是否还有数据
				this.changeList();
			},
			changeConType(item) {
				this.conType = item.type;
				this.changeList();	
			},
			loadCouserTeacher(list,ids){ //临时解决方案，单独的查询课程教师
			  let that = this;
			  //先查课程关联教师iD
			  apiCoursePortal.getTeacherByCourseIDs(ids).then(cres => {
			    if(cres.status==200){
			      let userIds = [];
			      list.forEach((item,index)=>{
			        cres.result.some(courseTeahcer=>{
			          if(courseTeahcer.courseId==item.id){
			            if(courseTeahcer.teacherIds){
			              // userIds.push(courseTeahcer.teacherIds[0]);                  
			              // item.authorInfo.aid=courseTeahcer.teacherIds[0];
						  item.teachersName = courseTeahcer.names[0];
						  item.teachersId = courseTeahcer.teacherIds[0];
			            }
			            return true;
			          }else{
			            return false;
			          }
			        })
			      });
			      // that.loadCourseAuthorInfo(list,userIds);
			    }
			  })
			},
			loadCourseAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
			  if(ids.length==0){
			    return;
			  }
			  const noReapetIds=[...new Set(ids)]
			  apiUser.getByIds(ids).then(res=>{
			    if(res.status==200){
			      list.forEach((item,index)=>{
			        res.result.some(author=>{
			          if(author.aid==item.authorInfo.aid){
			            // item.authorInfo=author;
						if(author.avatar != '') {
							item.authorInfo.avatar = this.$config.fileUrl + author.avatar;
						}
						item.authorInfo.name = author.name;
						item.authorInfo.sex = author.sex;
			            return true;
			          }else{
			            return false;
			          }
			        })
			      });
			    }else{
			      console.log('查询课程教师用户信息失败:'+res.error);
			      //this.$message.error(res.message);
			    }
			  });
			},
			toProductAgree(){
				uni.navigateTo({
					url: '/pages/plus/feedback'
				})
			},
			loadUserInfos(list,userIds){
				let $this=this;
				const noReapetIds=[...new Set(userIds)]
				apiUser.getByIds(noReapetIds).then(res=>{
				  if(res.status==200){
				    list.forEach(item=>{
						res.result.some(author=>{
							if(author.aid==item.sysCreateAid){
								
								item.authorInfo={
									avatar:author.avatar,
									code:author.code,
									name:author.name,
									sex:author.sex
								};
								if(author.avatar!=''){
									item.authorInfo.avatar=$this.fileUrl+author.avatar;
								}
								
								return true;
							}
							return false;
						})
				    })
				  }else{
					  console.log('查询用户信息失败:'+res.error);
					}
				})
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.uxclass{
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.ux_tab{
			display: flex;
			padding: 10px 15px;
            .ux-image{
				width: 265upx;
				height: 144upx;
				margin-top: 6upx;
				margin-right: 10rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 16upx;
				}
			}
			.uxtext{
				flex: 1;
				// padding-left: 5px;
				// padding-top: 8rpx;
				margin-left: 10px;
				.ux-tit{
					
					font-size: 32upx;
					color: #333;
					font-weight: bold;
				}
				.ux-cont{
					margin-top: 8rpx;
					font-size: 24rpx;
					line-height: 35rpx;
					color: #333;
					
				}
			}
		}
	}
	.tags{
		padding: 10upx;
		line-height: 30upx;
		.u-scroll-list{
			padding-bottom: 0px;
		}
		.tag-item{
			display: inline-block;
			padding: 10upx 35upx;
			white-space:nowrap;
			margin: 10upx;
			background-color: #FFFFFF;
			border: 1px solid #e7e7e7;
			font-size: 26upx;
			border-radius: 28upx;
		}
	}
	.qalabel{
		//border: 1px solid #d7d7d7;
		line-height: 16upx;
		font-size: 32rpx;
		text-align: center;
		padding: 5upx 10upx 0upx 0upx;
	}
	.tab-qa{
		padding: 30upx;
		padding-bottom: 10upx;
		background-color: #fff;
		.qa-tab-text{
			display: inline-block;
			font-size: 28upx;
			font-weight: 500;
			color: #666666;
			margin-right: 36upx;
		}
		.qa-active{
			width: 88upx;
			height: 48upx;
			background: linear-gradient(180deg, #FD8D0C 0%, #F9800C 100%);
			border-radius: 8upx;
			line-height: 48upx;
			text-align: center;
			color: #fff;
		}
	}
	.tab-article{
		padding: 30upx;
		padding-bottom: 10upx;
		background-color: #fff;
		.article-tab-text{
			display: inline-block;
			font-size: 28upx;
			font-weight: 500;
			color: #666666;
			margin-right: 36upx;
		}
		.article-active{
			width: 88upx;
			height: 48upx;
			background: linear-gradient(180deg, #FC635C 0%, #EF4844 100%);
			border-radius: 8upx;
			line-height: 48upx;
			text-align: center;
			color: #fff;
		}
	}
	.article {
		margin-bottom: 20upx;
		background-color: #FFFFFF;
		padding: 40upx 36upx 46upx 36upx;
		.article-content{
			display: flex;
			justify-content: space-between;
			.article-info{
				flex: 1;
				.article-title{
					font-size: 36upx;
					color: #333333;
					font-weight: 600;
					// letter-spacing: 0.5px;
					//line-height: 42px;
					margin-bottom: 20rpx;
					word-break:break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;-webkit-line-clamp: 2; 
				}
				.article-author{
					display: flex;
					padding-top: 0upx;
				}
				.article-summary{
					word-break:break-all;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					color: #666666;
					line-height: 40upx;
					// height: 80upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			.article-img{
				// width: 100px;
				// height: 75px;
				// margin: 0px 10px;
				padding-left: 20rpx;
				margin-top: 18rpx;
				
				image{
					border-radius: 6rpx;
				}
			}
		}
	}
	.qa {
		// height: 264upx;
		background: #FFFFFF;
		margin-bottom: 20upx;
		// margin-top: 5px;
		padding: 18upx 30upx 28upx 30upx;
		.content{
			padding: 0px;
			.content-list{
				display: flex;
				width: 100%;
				padding: 10upx 0upx;
				margin-right: 8upx;
				.content-title{
					font-weight: 610;
					font-size: 30rpx;
					color: #040404;
					word-break:break-all;
					//line-height: 42px;
					margin-bottom: 15rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;
					-webkit-line-clamp: 2; 
				}
				.content-time{
					flex: 1;
					margin-left: 5rpx;
					font-size: 15rpx;
					padding-top: 8rpx;
				}
				
			}
			.content-listtwo{
				display: flex;
				justify-content: space-between;
				// margin-top: 10upx;
				// height: upx;
				// margin-left: 8upx;
				margin-right: 8upx;
				.list-details{
					
					.list-text{
						font-size: 28upx;
						color: #666666;
					    line-height: 40upx;
						font-family: Source Han Sans CN;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break:break-all;
						margin-bottom: 28upx;
						
					}
					.list-best{
						font-size:30rpx;
						color: #454545;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						word-break:break-all;
						-webkit-line-clamp: 2;
						line-height: 45rpx;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
	.top {
		background: #FFFFFF;
		position: relative;
		.top-bar {
			display: flex;
			justify-content: space-between;
			// height: 50px;
			// line-height: 50px;
			.top-bar-alert{
				position: absolute;
				left:30px;
				top:-6px; 
				color:#ff5500;
				font-size: 12rpx;
			}
			.top-bar-icon {
				margin-left: 14px;
				margin-right: 14px;
				margin-top: 12px;
			}
			/deep/ .top-bar-center {
				display: flex;
				font-size: 35upx;
				flex: 1;
				padding: 0 30upx;
				// margin-right: 15px;
				margin-top: 18rpx;
				.top-bar-tab {
					margin: 0upx 50upx;
					color: #666666;
					font-size: 30upx;
				}
				.active {
					border-bottom: 2px solid #588AFC;
					color: #333333;
					font-size: 36upx;
				}
				
				.u-search__content{
					// border-radius: 999px!important;
					height: 28px;
				}
			}
		}
	}
    .con-top{
		display: flex;
		position: relative;
		justify-content: space-between;
		height: 50upx;
		line-height: 50upx;
		padding: 20upx 0upx;
		background-color: #fff;
		.con-tab{
			display: flex;
			padding: 5upx 20upx;
			
			.con-tab-item {
				font-size: 32upx;
				padding: 0upx 0upx;
				margin: 0 20rpx;
				color: #0D233A;
				text-align: center;
				font-weight: 500;
				// height: 45px;
				// line-height: 45px;
				// height: 33px;
				box-sizing: border-box;
				position: relative;
			}
			.active {
				font-weight: 600;
				padding-bottom: 5rpx;
				font-size: 44upx;
				height: 80upx;
				box-sizing: border-box;
				color: #387DF7;
				 // border-bottom: 2px solid #007AFF;
			}
			.border-dw{
				height: 6upx;
				width: 32upx;
				position: absolute;
			//	position: relative;
				left: 25%;
				top: 76%;
				background-color: #387DF7;
				border-radius: 4upx;
			}
		}
		
	}
	
	.item-author{
		font-size: 0.9em;
		.qa-info-bar{
			font-size: 24upx;
			color: #999999;
			margin-top: 10upx;
		}
		// margin-bottom: 10rpx;
	}
    .items{
		margin-bottom: 30upx;
		.item{
			
			margin-bottom: 20upx;
			background: #ffffff;
			position: relative;
			padding: 20upx;
			.item-title{
				line-height: 48upx;
				font-size: 1.1em;
			}
			.item-info{
				display: flex;
				justify-content: space-between;
				height: 50upx;
				line-height: 50upx;
				padding: 10upx 0upx;
				color: #8f8f8f;
				
				.item-score{
					
				}
				.item-time{
					font-size: 0.8em;
					color: #828282;
				}
			}
			.item-image{
				
			}
			.item-con{
				line-height: 40upx;
				font-size: 0.9em;
				color: #333333;
				.item-con-img{
					float: right;
					width:320upx;
					height: 180upx;
				}
			}
			.item-foot{
				display: flex;
				padding-top: 26upx;
				.item-foot-num{
					margin-left: 15upx;
				}
			}
		}
	}
	.empty{
		text-align: center;
		padding-top: 100px;
		color: #999999;
		/deep/ .items{
			.u-empty{
				.u-empty__text{
					display: none;
				}
			}
		}
		.agreeTip{
			text-align: center;
			font-size: 14px;
			color: rgb(192, 196, 204);
			.productAgree{
				font-size: 18px;
				color: black;
			}
		}
	}
</style>
