我的问答样式修改

This commit is contained in:
zhaofang
2022-10-18 18:53:01 +08:00
parent 442d41f366
commit 18d31fffb0
6 changed files with 65 additions and 65 deletions

View File

@@ -2,14 +2,10 @@
<div>
<div class="article-list" v-for="(item, idx) in items" :key="idx" @click="jumpDetail(item)">
<div class="article-info">
<div class="article-info-title one-line-ellipsis"
>
<!-- <span v-if="item.enabled" :class="classFilter(item.status).className">{{classFilter(item.status).text}}</span> -->
<!-- <span v-else class="article-status8">已下架</span> -->
<span class="titleContent " >
<div class="article-info-title one-line-ellipsis">
<span class="titleContent" >
{{ item.title }}
</span>
</div>
<div class="art-head two-line-ellipsis">
<div class="article-info-summary">
@@ -19,34 +15,11 @@
<div class="art-img">
<img :src="fileBaseUrl + item.coverurl" alt="">
</div>
</div>
<!-- <div class="article-info-tools"> -->
<!-- <div class="article-info-tools-auth"> -->
<!-- <el-avatar size="small" :src="item.avatar ? fileBaseUrl + item.avatar : '/temp/index/male.jpg'"></el-avatar>
<span>{{item.name}}{{(item.orgInfo)}}</span> -->
<!-- <el-tag v-if="status === 0" type="success">已发布</el-tag>
<el-tag type="warning" v-else>未发布</el-tag> -->
<!-- <span class="article-time">
<span> 时间{{item.sysCreateTime|sysCreateTimeFilter}}</span>
</span> -->
<!-- <span v-if="!item.enabled">已下架</span> -->
<!-- </div> -->
<!-- <div class="article-info-tools-btns" v-if="item.status == 9"> -->
<!-- <el-link icon="el-icon-chat-line-round" class="article-info-tools-btn" >评论57</el-link>
<el-link icon="el-icon-s-promotion" class="article-info-tools-btn" >分享57</el-link>
<el-link icon="el-icon-star-on" class="article-info-tools-btn">收藏12</el-link>
<el-link icon="el-icon-thumb" class="article-info-tools-btn" >点赞20</el-link > -->
<!-- </div> -->
<!-- </div> -->
</div>
<div class="article-info-date">
<authorInfo :aid="item.sysCreateAid" :avatar="item.avatar" :name="item.sysCreateBy" :sex="item.sex" :info="item.orgInfo"></authorInfo>
<interactBar :data="item" :type="2" :shares="false" :views="false"></interactBar>
<!-- <el-button class="edit" @click.stop="editItem(item.id)" type="text" icon="el-icon-edit">编辑</el-button>
<el-button class="del" @click.stop="delItem(item)" type="text" icon="el-icon-delete">删除</el-button> -->
</div>
</div>
<el-dialog title="编辑文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
@@ -60,9 +33,10 @@ import { mapGetters } from "vuex";
import interactBar from '@/components/Portal/interactBar.vue';
import apiArticle from '@/api/modules/article.js';
import editItems from '@/components/Article/editItems.vue';
import authorInfo from '@/components/Portal/authorInfo.vue';
export default {
components: {
interactBar,editItems
interactBar,editItems,authorInfo
},
computed: {
...mapGetters(["userInfo"]),
@@ -206,6 +180,12 @@ export default {
box-sizing: border-box;
}
.article-info-date {
display: flex;
justify-content: space-between;
::v-deep .interact-bar-btn{
min-width: 70px !important;
text-align: right;
}
.del{
color: #8590A6;
font-size: 14px;
@@ -266,8 +246,7 @@ export default {
position: relative;
margin: 0px 0;
border-bottom: 1px solid #E8E8E8;
padding-top: 15px;
padding-bottom: 15px;
padding: 32px 0;
cursor: pointer;
}
@@ -275,7 +254,7 @@ export default {
.article-info {
.article-info-title {
color: #333;
width: 100%;
width: 100%;
font-size: 18px;
margin-top: 7px;
.titleContent{
@@ -294,7 +273,7 @@ width: 100%;
flex: 1;
color: #333333;
margin-left: 5px;
margin-top: 10px;
margin-top: 26px;
font-size: 14px;
}
.art-img{

View File

@@ -116,7 +116,7 @@
</div>
<div class="person-action-item">
<div class="person-action-index" :style="{color:textColor}" @click="logout()">
<div class="person-action-index pointer" :style="{color:textColor}" @click="logout()">
<svg-icon style="margin-right: 4px;font-size:16px;" icon-class="white-out"></svg-icon>登出
</div>
</div>

View File

@@ -6,11 +6,11 @@
<li>这里的路由传参存在问题</li>
</ul>
</Remark>
<div class="article-list" v-for="(item, idx) in items" :key="idx" @click="routerJump(item)">
<div class="article-list" v-for="(item, idx) in items" :key="idx">
<div class="article-info">
<div class="article-info-title">
<div style="line-height: 30px;font-size: 18px" >
<div class="one-line-ellipsis art-tit" >
<div class="one-line-ellipsis art-tit" @click="routerJump(item)">
<!-- <span v-if="item.isResolve == true" class="qa-basic qa-solve">已解决</span>
<span v-if="item.isResolve == false" class="qa-basic qa-unSolve">待解决</span> -->
<span v-html="$keywordActiveShow(item.title,keyWord)"></span>
@@ -24,17 +24,18 @@
我的回答
<div class="article-info-date">
<!-- <el-button @click="shareItem(item)" type="text" icon="el-icon-share">分享</el-button> -->
<el-button class="edit" @click.stop="editItem(item)" type="text" icon="el-icon-edit" >编辑</el-button>
<el-button class="del" @click.stop="delItem(item)" type="text" icon="el-icon-delete">删除</el-button>
<el-button class="edit" @click.stop="editItem(item)" type="text"><svg-icon style="font-size:14px;margin-right:5px" icon-class="edit-icon"></svg-icon>编辑</el-button>
<el-button class="del" @click.stop="delItem(item)" type="text"> <svg-icon style="font-size:14px;margin-right:5px" icon-class="del-icon"></svg-icon>删除</el-button>
</div>
</div>
</div>
</div>
<div class="reply-content two-line-ellipsis">
<span v-html="$keywordActiveShow(item.answercontent,keyWord)"></span>
<div class="reply-content">
<!-- 1111 <span v-html="$keywordActiveShow(item.answercontent,keyWord)"></span> -->
<span v-html="displayAll(item)"></span>
<span style="color:#2C68FF" v-if="item.answercontent.length > 170" @click="changeIsAll(item)">
{{ item.isAll ? '收起' : '展开全文' }}
</span>
</div>
<div class="article-info-tools">
<div class="article-info-tools-auth">
@@ -42,7 +43,6 @@
<span style=" font-size: 13px; color: #7b7b7b;padding-right: 15px;">回复时间{{ item.sysCreateTimeA }}</span>
</div>
<interactBar :readonly="true" :type="4" :data="item" :shares="false" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar>
</div>
</div>
</div>
@@ -100,6 +100,19 @@ export default {
};
},
methods: {
//展示全部
displayAll(item) {
let content = '';
content = item.answercontent.replace(/(\n){2,}/,'<br>');
item.answercontent = content;
if (!item.isAll && item.answercontent.length > 170) {
return item.answercontent.slice(0, 170) + "...";
}
return item.answercontent;
},
changeIsAll(item) {
item.isAll = !item.isAll;
},
// deleteData(item){
// console.log(item,"我拿到准备删除的数据")
// apiQa.delAnswer()
@@ -160,6 +173,7 @@ export default {
color: #333330;
font-weight: 400;
margin-bottom: 10px;
word-break:break-all;
}
.titcontent{
font-size: 14px;
@@ -293,6 +307,10 @@ export default {
.article-info-tools {
height: 30px;
position: relative;
::v-deep .interact-bar-btn{
min-width: 80px !important;
text-align: right;
}
.article-info-tools-auth {
float: left;
height: 30px;

View File

@@ -6,7 +6,7 @@
<!-- <span v-if="item.isResolve ==true" class="qa-basic qa-solve">已解决</span>
<span v-if="item.isResolve == false" class="qa-basic qa-unSolve">待解决</span> -->
<span class="uc-center-one-title one-line-ellipsis" v-html="$keywordActiveShow(item.title,keyWord)"></span>
<div class="button-cla" style="margin-right:70px">
<div class="button-cla" style="margin-right:52px">
<el-button class="edit" @click.stop="editItem(item)" type="text" size="mini"><svg-icon style="margin-right: 6px;font-size: 14px;" icon-class="edit-icon"></svg-icon>编辑</el-button>
<el-button class="del" @click.stop="delItem(item)" type="text" size="mini"><svg-icon style="margin-right: 6px;font-size: 14px;" icon-class="del-icon"></svg-icon>删除</el-button>
</div>
@@ -35,12 +35,6 @@
<div class="button-cla"><interactBar nodeWidth="60px" :readonly="true" :type="4" :data="item" :shares="false" :comments="false" :answers="true" :clickAnswer="true" :views="false"></interactBar></div>
</div>
<!-- <el-link icon="el-icon-chat-line-round" class="article-info-tools-btn" >回答57</el-link>
<el-link icon="el-icon-s-promotion" class="article-info-tools-btn" >分享57</el-link>
<el-link icon="el-icon-star-on" class="article-info-tools-btn">收藏12</el-link>
<el-link icon="el-icon-thumb" class="article-info-tools-btn" >点赞20</el-link > -->
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
@@ -234,11 +228,15 @@ export default {
.button-cla{
position: absolute;
right:0px;
::v-deep .interact-bar-btn{
min-width: 90px !important;
text-align: right;
}
}
.edit{
color: #8590A6;
font-size: 14px;
margin-right: 10px;
margin-right: 45px;
}
.del{
color: #8590A6;

View File

@@ -46,9 +46,10 @@
:total="total"
></el-pagination></div>
<div v-else>
<div v-if="pageData.list.length == 0">
<div v-if="pageData.list.length == 0" class="home-no-list">
<img class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset=""/>
<div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
<div v-else class="zan-wu">暂无数据</div>
<div v-else class="zan-wu">你还没有发布文章</div>
</div>
</div>

View File

@@ -36,9 +36,10 @@
></el-pagination>
</div>
<div v-else>
<div v-if="qaList.length == 0">
<div v-if="qaList.length == 0" class="home-no-list">
<img class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset=""/>
<div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
<div v-else class="zan-wu">暂无数据</div>
<div v-else class="zan-wu">你还没有回答问题哦</div>
</div>
</div>
</div>
@@ -78,6 +79,7 @@ export default {
};
},
methods: {
getList() {
this.queryObj.pageIndex = 1;
this.isSearh = true;
@@ -90,8 +92,10 @@ export default {
.then(res => {
if (res.status == 200) {
this.total = res.result.count;
res = res.result.list;
this.qaList = res;
res.result.list.forEach(item => {
item.isAll = false;
});
this.qaList = res.result.list;
}
})
.catch(err => {