Files
learning-system-mobile/pages/index/index.vue
2022-11-09 14:28:20 +08:00

1053 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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" :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 }}
<!-- <text v-if="item.coverurl==''" style="font-size: 14px;line-height: 40upx; color: #BBBBBB;font-weight: 400; float: right;padding-top: 0rpx;">
{{item.sysCreateTime.substring(0,10)}}
</text> -->
</view>
<view style="display: flex;justify-content: space-between;">
<view>
<view class="article-author" style="display: flex;">
<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="margin-top: 7upx;">
<view class="article-summary" >{{ item.summary }}</view>
</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="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="item-author" style="display: flex;" @click="toQaDetail(item)">
<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
<text style="padding-top: 8rpx;padding-left: 9rpx;line-height: 40upx; color: #999; font-size: 26rpx; ">
{{item.sysCreateTime.substring(0,10)}}
</text>
</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 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: 1,
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-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: 10px;
margin-top: 5px;
padding: 20upx 28upx 10upx 28upx;
.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: 30rpx;
color: #454545;
line-height: 45upx;
font-family: Source Han Sans CN;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break:break-all;
margin-bottom: 10rpx;
}
.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: 86%;
background-color: #387DF7;
border-radius: 4upx;
}
}
}
.item-author{
font-size: 0.9em;
// 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>