mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 02:46:46 +08:00
860 lines
20 KiB
Vue
860 lines
20 KiB
Vue
<template>
|
||
<view>
|
||
<page-title :showBack="true">分享给我的</page-title>
|
||
<view class="top-tab">
|
||
<view class="top-bar-center">
|
||
<view class="top-bar-tab" @click="clicktab(1)" :class="{ active: conType == 1 }">课程</view>
|
||
<view class="top-bar-tab" @click="clicktab(2)" :class="{ active: conType == 2 }">文章</view>
|
||
<view class="top-bar-tab" @click="clicktab(4)" :class="{ active: conType == 4 }">问答</view>
|
||
</view>
|
||
</view>
|
||
<view class="top-content-options">
|
||
<!-- 是否已查看 -->
|
||
<view style="margin-right: 20upx;">
|
||
<!-- <u-picker :show="statusSelectShow" @cancel="statusSelectShow = false" @confirm="chooseStatus" :columns="selectData" keyName="label"></u-picker> -->
|
||
<!-- <text class="textbtn" @click="statusSelectShow = true">{{ statusBtn }}</text> -->
|
||
<text class="textbtn" @click="statusSelectShow = !statusSelectShow">状态</text>
|
||
</view>
|
||
<!--课程-->
|
||
<view class="input-search">
|
||
<u-search
|
||
|
||
:clearabled="true"
|
||
v-model="query.keyword"
|
||
placeholder="输入关键词"
|
||
@search="findData(true)"
|
||
@clear="findData(true)"
|
||
:showAction="false"
|
||
shape="square"
|
||
bgColor="#ffffff"
|
||
>
|
||
<!-- <template slot="suffix">
|
||
<u-icon @click="findData(true)" name="search"></u-icon>
|
||
</template> -->
|
||
</u-search>
|
||
</view>
|
||
</view>
|
||
<view class="sea-show" v-show="statusSelectShow">
|
||
<text @click="chooseStatus(null)" :class="[isRead == null?'sea-active':'','sea-index' ]">全部</text>
|
||
<text @click="chooseStatus(true)" :class="[isRead == true?'sea-active':'','sea-index' ]">已查看</text>
|
||
<text @click="chooseStatus(false)" :class="[isRead == false?'sea-active':'','sea-index' ]">未查看</text>
|
||
</view>
|
||
<view v-if="conType == 1">
|
||
<view v-for="(item, idx) in courseList" :key="idx" class="course_box">
|
||
<view class="course" @click="toCourseDetail(item)">
|
||
<view><course-image :course="item" width="262upx" height="147upx"></course-image></view>
|
||
<view class="course-content">
|
||
<view><span class="common" :class="contentTypeFilter(item.contentType).class">{{ contentTypeFilter(item.contentType).text }}</span><span style="font-weight: bold;font-size: 32upx;" v-html="$keywordActiveShow(item.title,query.keyword)"></span></view>
|
||
<view class="course-con_source">分享日期：{{ item.time }}</view>
|
||
<view class="course-author">
|
||
{{ item.authorName }}分享给我
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view><interact-bar :data="item" :shares="false" :views="false"></interact-bar></view> -->
|
||
<!-- <view class="">
|
||
<text class="isread" v-if="!item.isRead">
|
||
<image style="height: 26rpx;" src="../../static/images/icon/noread.png" mode=""></image>
|
||
未查看</text>
|
||
<text class="isread" v-else>
|
||
<image style="margin-top: -5rpx;" src="../../static/images/icon/isread.png" mode=""></image>
|
||
已查看</text>
|
||
</view> -->
|
||
<view class="rowbtn-right">
|
||
<view class="rowbtn rowbtn-info" v-if="item.isRead">
|
||
<u-icon name="eye-fill" color="#767676" labelColor="#767676" label="已查看" size="16" labelSize="12"></u-icon>
|
||
</view>
|
||
<view class="rowbtn rowbtn-info" v-else>
|
||
<u-icon name="eye-off" color="#767676" labelColor="#767676" label="未查看" size="16" labelSize="12"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="conType == 2">
|
||
<view class="article_one" v-for="(item, idx) in articleList" :key="idx" @click="toArticleDetail(item)">
|
||
|
||
<view class="articla_tit">
|
||
<text v-if="item.isRead" style="color:#3e7fff;margin-right: 8upx">
|
||
[已查看]
|
||
</text>
|
||
<text v-else style="color:#FF3E3E;margin-right: 8upx">
|
||
[未查看]
|
||
</text>
|
||
{{ $keywordActiveShow(item.title,query.keyword) }}
|
||
</view>
|
||
<text class="articla_text" v-html="$keywordActiveShow(item.summary,query.keyword)"></text>
|
||
<author-info :avatar="item.avatar" :name="item.sysCreateBy" :info="item.orgInfo" :sex="item.sex"></author-info>
|
||
<view class="artical_text_bottom">
|
||
<text style="font-size: 26rpx;color: #9d9d9d;">{{item.time}}</text>
|
||
<text style="font-size: 26rpx;color: #666666;margin-right: 35upx;">{{ item.sysCreateBy }}分享给我</text>
|
||
</view>
|
||
<!-- <view style="margin-top: 8px;"><interact-bar :data="item" :shares="false"></interact-bar></view> -->
|
||
<!-- <view class=""> -->
|
||
<!-- <text class="isread" v-if="item.isRead">
|
||
<image style="height: 26rpx;" src="../../static/images/icon/noread.png" mode=""></image>
|
||
未查看</text>
|
||
<text class="isread" v-else>
|
||
<image style="margin-top: -5rpx;" src="../../static/images/icon/isread.png" mode=""></image>
|
||
已查看</text> -->
|
||
<!-- </view> -->
|
||
|
||
|
||
</view>
|
||
</view>
|
||
<view v-if="conType == 4">
|
||
<view v-for="(item, idx) in qaList" :key="idx" class="qa" @click="toQaDetail(item)">
|
||
<view class="qa-body" >
|
||
<text v-if="item.question.isResolve" style="color:#08A890;margin-right: 8upx">[已解决]</text>
|
||
<text v-else style="color:#588afc;margin-right: 8upx">
|
||
[待解决]
|
||
</text>
|
||
<text v-html="$keywordActiveShow(item.question.title,query.keyword)"></text>
|
||
</view>
|
||
<view class="qa-bottom" v-html="$keywordActiveShow(item.question.content,query.keyword)"></view>
|
||
<!-- <author-info :avatar="item.avatar" :name="item.question.sysCreateBy" :info="item.orgInfo"></author-info> -->
|
||
|
||
<view class="qa-answers" v-if="item.question.isResolve">
|
||
|
||
<view class="answer-two"
|
||
style="word-break:break-all;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
display: -webkit-box;-webkit-line-clamp: 2;
|
||
line-height: 35rpx;
|
||
overflow: hidden;text-overflow: ellipsis;
|
||
font-size: 28rpx;
|
||
">
|
||
|
||
<text style="color: #FFB30F;" >最佳回答：</text>
|
||
{{ item.question.bestAnswer }}
|
||
</view>
|
||
|
||
</view>
|
||
<text class="qa-text">{{item.time}}</text>
|
||
<text style="font-size: 26rpx;color: #666666">{{ item.sysCreateBy }}分享给我</text>
|
||
<!-- <view class="qa-bar"><interact-bar :data="item.question" :praises="false" :views="false"></interact-bar></view> -->
|
||
<!-- <view class="">
|
||
<text class="isread" v-if="item.isRead">
|
||
<image style="height: 26rpx;" src="../../static/images/icon/noread.png" mode=""></image>
|
||
已查看</text>
|
||
<text class="isread" v-else>
|
||
<image style="margin-top: -5rpx;" src="../../static/images/icon/isread.png" mode=""></image>
|
||
未查看</text>
|
||
</view> -->
|
||
<view class="rowbtn-right">
|
||
<view class="rowbtn rowbtn-info" v-if="item.isRead">
|
||
<u-icon name="eye-fill" color="#767676" labelColor="#767676" label="已查看" size="16" labelSize="12"></u-icon>
|
||
</view>
|
||
<view class="rowbtn rowbtn-info" v-else>
|
||
<u-icon name="eye-off" color="#767676" labelColor="#767676" label="未查看" size="16" labelSize="12"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-show="count>query.pageSize"><uni-load-more :status="loadStatus"></uni-load-more></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapActions } from 'vuex';
|
||
import apiShares from '@/api/modules/shares.js';
|
||
import apiUser from '@/api/system/user.js';
|
||
// import apiShares from '@/api/modules/shares.js';
|
||
export default {
|
||
computed: mapState(['resourceTab']),
|
||
data() {
|
||
return {
|
||
isRead:null,
|
||
statusBtn: '全部',
|
||
selectData: [
|
||
[
|
||
{ label: '全部', value: null },
|
||
{ label: '已查看', value: true },
|
||
{ label: '未查看', value: false },
|
||
|
||
]
|
||
],
|
||
statusSelectShow: false,
|
||
conType: 1,
|
||
query:{
|
||
pageIndex: 1,
|
||
pageSize: 4,
|
||
keyword:'',
|
||
isRead:null
|
||
},
|
||
courseList:[],
|
||
articleList:[],
|
||
qaList:[],
|
||
count:0,
|
||
loadStatus: 'more', //more,loading,noMore, 应该划分出三个
|
||
running:false,
|
||
};
|
||
},
|
||
onLoad: function(options) {
|
||
this.findData(true);
|
||
},
|
||
onPullDownRefresh() {
|
||
this.onReachBottom();
|
||
},
|
||
async onReachBottom() {
|
||
if(this.conType==1){
|
||
if(this.courseList.length<this.count){
|
||
this.loadStatus='loading';
|
||
this.query.pageIndex++;
|
||
await this.findData(false);
|
||
this.loadStatus='more';
|
||
}else{
|
||
this.loadStatus='noMore';
|
||
}
|
||
}
|
||
if(this.conType==2){
|
||
if(this.articleList.length<this.count){
|
||
this.loadStatus='loading';
|
||
this.query.pageIndex++;
|
||
await this.findData(false);
|
||
this.loadStatus='more';
|
||
}else{
|
||
this.loadStatus='noMore';
|
||
}
|
||
}
|
||
if(this.conType==4){
|
||
if(this.qaList.length<this.count){
|
||
this.loadStatus='loading';
|
||
this.query.pageIndex++;
|
||
await this.findData(false);
|
||
this.loadStatus='more';
|
||
}else{
|
||
this.loadStatus='noMore';
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
//点击切换类别时请求数据
|
||
clicktab(val) {
|
||
this.conType=val;
|
||
this.query.pageIndex=1;
|
||
this.query.keyword='';
|
||
this.isRead = null;
|
||
this.query.isRead = null;
|
||
this.statusBtn = '全部'
|
||
this.findData(true);
|
||
},
|
||
//查找数据
|
||
findData(flag) {
|
||
if(this.running){
|
||
return;
|
||
}
|
||
this.running=true;
|
||
let $this = this;
|
||
//是否重置列表
|
||
if (flag) {
|
||
if(this.conType==1){
|
||
this.courseList=[]
|
||
}
|
||
if(this.conType==2){
|
||
this.articleList=[]
|
||
}
|
||
if(this.conType==4){
|
||
this.qaList=[]
|
||
}
|
||
}
|
||
this.query.isRead = this.isRead;
|
||
//生成查询条件
|
||
uni.showLoading({ title: '加载中...' });
|
||
//查询条件
|
||
const conList = {
|
||
1: 'mymecourselist',
|
||
2: 'mymearticlelist',
|
||
4: 'mymeqalist'
|
||
};
|
||
apiShares[conList[this.conType]](this.query).then(rs => {
|
||
if (rs.status == 200) {
|
||
this.count=rs.result.count
|
||
|
||
if(this.conType==1){
|
||
|
||
rs.result.list.forEach(item=>{
|
||
$this.courseList.push(item)
|
||
})
|
||
|
||
}else if(this.conType==2){
|
||
let userIds = [];
|
||
rs.result.list.forEach(item=>{
|
||
item.avatar=''
|
||
item.orgInfo='';
|
||
item.sex=null;
|
||
userIds.push(item.sysCreateAid);
|
||
$this.articleList.push(item)
|
||
});
|
||
$this.loadUserInfos(rs.result.list,userIds);
|
||
}else if(this.conType==4){
|
||
let userIds = [];
|
||
rs.result.list.forEach(item=>{
|
||
item.avatar=''
|
||
item.orgInfo='';
|
||
item.sex=null;
|
||
userIds.push(item.question.sysCreateAid);
|
||
$this.qaList.push(item)
|
||
});
|
||
$this.loadQaUserInfos(rs.result.list,userIds);
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: "获取数据失败",
|
||
icon:'none'
|
||
});
|
||
}
|
||
this.running=false;
|
||
});
|
||
setTimeout(function() {
|
||
uni.hideLoading();
|
||
}, 100);
|
||
},
|
||
loadUserInfos(list, userIds) {
|
||
let $this = this;
|
||
const noReapetIds = [...new Set(userIds)];
|
||
if(noReapetIds.length==0){
|
||
return;
|
||
}
|
||
if(noReapetIds[0]==null){
|
||
return;
|
||
}
|
||
apiUser.getByIds(noReapetIds).then(res => {
|
||
if (res.status == 200) {
|
||
|
||
list.forEach(item => {
|
||
res.result.some(author => {
|
||
if (author.aid == item.sysCreateAid) {
|
||
if (author.avatar != '') {
|
||
item.avatar = $this.$config.fileUrl + author.avatar;
|
||
//实际上根本没有拿到fileUrl
|
||
}else{
|
||
item.avatar=''
|
||
}
|
||
item.sex = author.sex;
|
||
item.orgInfo = author.orgInfo;
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
});
|
||
|
||
}
|
||
});
|
||
},
|
||
loadQaUserInfos(list, userIds) {
|
||
let $this = this;
|
||
const noReapetIds = [...new Set(userIds)];
|
||
if(noReapetIds.length==0){
|
||
return;
|
||
}
|
||
if(noReapetIds[0]==null){
|
||
return;
|
||
}
|
||
apiUser.getByIds(noReapetIds).then(res => {
|
||
if (res.status == 200) {
|
||
list.forEach(item => {
|
||
res.result.some(author => {
|
||
if (author.aid == item.question.sysCreateAid) {
|
||
if (author.avatar != '') {
|
||
item.avatar = $this.$config.fileUrl + author.avatar;
|
||
//实际上根本没有拿到fileUrl
|
||
}else{
|
||
item.avatar=''
|
||
}
|
||
item.sex = author.sex;
|
||
item.orgInfo = author.orgInfo;
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
});
|
||
}
|
||
|
||
});
|
||
},
|
||
chooseStatus(e) {
|
||
// this.statusSelectShow = false;
|
||
// this.statusBtn = e.value[0].label;
|
||
this.isRead = e;
|
||
//console.log(this.isRead)
|
||
this.findData(true);
|
||
|
||
},
|
||
toCourseDetail(citem) {
|
||
if(!citem.isRead){
|
||
apiShares.updateIsRead(citem.id).then(res=>{
|
||
if(res.status==200){
|
||
}
|
||
})
|
||
}
|
||
if (citem.contentType == 10) {
|
||
uni.navigateTo({
|
||
url: '/pages/resource/microDetail?id=' + citem.objId
|
||
});
|
||
} else if (citem.contentType == 20 || citem.contentType == 21) {
|
||
uni.navigateTo({
|
||
url: '/pages/resource/courseDetail?id=' + citem.objId
|
||
});
|
||
}
|
||
},
|
||
toArticleDetail(item) {
|
||
if(!item.isRead){
|
||
apiShares.updateIsRead(item.id).then(res=>{
|
||
if(res.status==200){
|
||
}
|
||
})
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/resource/articeDetail?id=' + item.objId
|
||
});
|
||
},
|
||
toQaDetail(item) {
|
||
if(!item.isRead){
|
||
apiShares.updateIsRead(item.id).then(res=>{
|
||
if(res.status==200){
|
||
}
|
||
})
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/resource/qaDetail?id=' + item.question.id
|
||
});
|
||
},
|
||
contentTypeFilter(value) {
|
||
let obj = {};
|
||
switch (value) {
|
||
case '10': {
|
||
obj.class = 'uc-course-type2';
|
||
obj.text = '录播';
|
||
break;
|
||
}
|
||
case '21': {
|
||
obj.class = 'uc-course-type2';
|
||
obj.text = '直播';
|
||
break;
|
||
}
|
||
case '20': {
|
||
obj.class = 'uc-course-type2';
|
||
obj.text = '录播';
|
||
break;
|
||
}
|
||
case '30': {
|
||
obj.class = 'uc-course-type2';
|
||
obj.text = '面授';
|
||
break;
|
||
}
|
||
case '90': {
|
||
obj.class = 'uc-course-type2';
|
||
obj.text = '混合';
|
||
break;
|
||
}
|
||
}
|
||
return obj;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.rowbtn-right{
|
||
margin-top: 10upx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.rowbtn{
|
||
padding: 5px 8px 0px 8px;
|
||
height: 20px;
|
||
border-radius: 10upx;
|
||
}
|
||
.rowbtn-primary{
|
||
background-color: #ebf3fe;
|
||
}
|
||
.rowbtn-info{
|
||
background-color: #f7f7f7;
|
||
}
|
||
/deep/.filter .btn-box > uni-view {
|
||
border: solid 0.5px #ffb30f;
|
||
}
|
||
|
||
/deep/.filter .btn-box .submit {
|
||
background-color: #ffb30f;
|
||
}
|
||
|
||
/deep/.filter .btn-box > uni-view {
|
||
border: solid 0.5px #ffb30f;
|
||
}
|
||
|
||
/deep/.filter .btn-box .reset {
|
||
color: #ffb30f;
|
||
}
|
||
|
||
/deep/.filter .menu-box .box .labels .on {
|
||
border-color: #ffb30f;
|
||
background-color: #ffb30f;
|
||
}
|
||
|
||
/deep/.filter .menu-box .box .labels > uni-view {
|
||
width: 125px;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
/deep/.sub-menu-list .sub-menu > .menu-name > .iconfont {
|
||
color: #ffb30f;
|
||
}
|
||
|
||
/deep/.sub-menu-list.alone .sub-menu {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
/deep/.nav .first-menu.on {
|
||
color: #ffb30f;
|
||
}
|
||
|
||
/deep/.sub-menu-list.alone .sub-menu.on {
|
||
color: #ffb30f;
|
||
}
|
||
|
||
/deep/.u-tabs__wrapper__nav {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
.sea-show{
|
||
padding: 20rpx 30upx;
|
||
padding-bottom: 0;
|
||
.sea-active{
|
||
border: 1rpx solid #679cfc !important;
|
||
color: #679cfc;
|
||
}
|
||
.sea-index{
|
||
font-size: 26rpx;
|
||
padding: 6rpx 16rpx;
|
||
border: 1rpx solid #ccc;
|
||
border-radius: 20rpx;
|
||
margin-right: 16rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
}
|
||
.isread{
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
line-height: 35rpx;
|
||
image{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 10rpx;
|
||
padding-top: 10rpx;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
.top-content-options{
|
||
// height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
// line-height: 40px;
|
||
padding: 20upx 30upx 0upx 30upx;
|
||
|
||
/deep/ .input-search {
|
||
margin-top: 4upx;
|
||
flex: 1;
|
||
.u-search {
|
||
height: 34px;
|
||
background: #ffffff;
|
||
border-radius: 8upx;
|
||
.u-search__content{
|
||
// border-width:0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.textbtn {
|
||
background-color: #ffffff;
|
||
padding: 18upx 20upx;
|
||
color: #666;
|
||
border-radius: 8upx;
|
||
font-size: 28upx;
|
||
}
|
||
|
||
.top-tab {
|
||
height: 50px;
|
||
// background: linear-gradient(to bottom, #6BA0FC, #6297FD);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 60px;
|
||
color: #373737;
|
||
.top-bar-center {
|
||
display: flex;
|
||
font-size: 30upx;
|
||
// margin-left: 40upx;
|
||
.top-bar-tab {
|
||
margin: 0upx 50upx;
|
||
}
|
||
.active {
|
||
border-bottom: 2px solid #588afc;
|
||
// color: #5282eb;
|
||
font-size: 35upx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.top-tab-left {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.top-tab-line {
|
||
width: 50px;
|
||
height: 3px;
|
||
background: #ffffff;
|
||
margin-top: -5px;
|
||
}
|
||
}
|
||
|
||
.input-search{
|
||
// padding:28upx 20upx;
|
||
.u-input{
|
||
background: #ffffff;
|
||
}
|
||
// /deep/.u-icon{
|
||
// span{
|
||
// font-size: 50upx;
|
||
// color: #588afc;
|
||
// }
|
||
// }
|
||
// /deep/.uni-input-placeholder{
|
||
// color: #588afc!important;
|
||
// }
|
||
}
|
||
.course_box {
|
||
// margin-bottom: 10px;
|
||
margin-top: 20upx;
|
||
background-color: #ffffff;
|
||
padding: 20upx 30upx;
|
||
|
||
/deep/ .course {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
uni-image{
|
||
border-radius:8px;
|
||
}
|
||
.course-img {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 120px;
|
||
height: 70px;
|
||
margin-right: 5upx;
|
||
}
|
||
|
||
.course-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin-left: 20upx;
|
||
height: 74px;
|
||
margin-top:-12upx;
|
||
.course-con_source{
|
||
font-size: 26upx;
|
||
color: #787878;
|
||
}
|
||
.course-author {
|
||
font-size: 26upx;
|
||
color: #666;
|
||
}
|
||
.common{
|
||
padding: 3upx 20upx;
|
||
border-radius: 2px;
|
||
font-size: 26upx;
|
||
color: #fff;
|
||
margin-right: 20upx;
|
||
}
|
||
.uc-course-type1{
|
||
background: #588afc;
|
||
}
|
||
.uc-course-type2{
|
||
background: #ffb30f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-center {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
margin-right: 5%;
|
||
}
|
||
|
||
.article {
|
||
background: #f8fbfd;
|
||
}
|
||
|
||
.article_one {
|
||
// padding-top: 10px;
|
||
margin-top: 20upx;
|
||
background-color: #fff;
|
||
padding: 20upx 30upx;
|
||
.articla_tit {
|
||
line-height: 50rpx;
|
||
font-weight: bold;
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 30upx;
|
||
word-break:break-all;
|
||
}
|
||
|
||
.articla_text {
|
||
word-break:break-all;
|
||
font-size: 28rpx;
|
||
color: #797979;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
margin-bottom: 10rpx;
|
||
|
||
}
|
||
.artical_text_bottom{
|
||
margin-top: 10rpx;
|
||
text{
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.qa {
|
||
padding: 20upx 30upx;
|
||
// margin-top: 20upx;
|
||
// padding: 10px;
|
||
box-shadow: #f7f7f7 0px 6px 5px;
|
||
border-radius: 4px;
|
||
background: #ffffff;
|
||
margin-top: 10px;
|
||
// padding-bottom: 10rpx;
|
||
|
||
.qa-header {
|
||
height: 26px;
|
||
line-height: 50rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.qa-user {
|
||
display: flex;
|
||
|
||
img {
|
||
height: 25px;
|
||
width: 25px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.qa-body {
|
||
line-height: 26px;
|
||
// overflow: hidden;
|
||
// text-overflow:ellipsis;
|
||
// white-space: nowrap;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-box-orient: vertical;
|
||
word-break:break-all;
|
||
-webkit-line-clamp: 2;
|
||
|
||
}
|
||
|
||
.qa-bottom {
|
||
|
||
font-size: 15px;
|
||
color: #454545;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
word-break:break-all;
|
||
}
|
||
|
||
.qa-answers {
|
||
|
||
font-size: 30rpx;
|
||
color: #5b5b5b;
|
||
display: flex;
|
||
overflow: hidden;
|
||
line-height: 20upx;
|
||
width: 100%;
|
||
// height: 70upx;
|
||
margin: 10upx 0upx;
|
||
padding: 10upx 0;
|
||
|
||
}
|
||
|
||
.qa-text{
|
||
font-size: 26rpx;
|
||
color: #9d9d9d;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.details {
|
||
height: 127px;
|
||
border-bottom: 1px solid #e3e3e3;
|
||
}
|
||
.newest {
|
||
width: 60px;
|
||
height: 31px;
|
||
background: #ffffff;
|
||
font-size: 11px;
|
||
border-radius: 4px;
|
||
color: #505050;
|
||
text-align: center;
|
||
line-height: 31px;
|
||
margin-top: 2px;
|
||
margin-left: 9px;
|
||
}
|
||
|
||
.hottest {
|
||
background: #dfebf4;
|
||
color: #5ba2fc;
|
||
}
|
||
|
||
.big_top {
|
||
height: 37px;
|
||
}
|
||
|
||
.big_box_top {
|
||
display: flex;
|
||
height: 80upx;
|
||
padding: 30upx 0;
|
||
}
|
||
|
||
.big-box_center {
|
||
height: 173px;
|
||
margin-top: 9px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.llef {
|
||
width: 168px;
|
||
height: 172px;
|
||
border-radius: 4px;
|
||
background: #ffffff;
|
||
box-shadow: #f1f6fe 0px 6px 5px;
|
||
}
|
||
|
||
.llef img {
|
||
width: 168px;
|
||
height: 96px;
|
||
}
|
||
</style>
|