我的问答样式修改

src/components/Article/ucItems.vue

@@ -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"
+        <div class="article-info-title one-line-ellipsis">
-        >
+          <span  class="titleContent"  >
-          <!-- <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 "  >
             {{ 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: 32px 0;
-  padding-bottom: 15px;
   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{
@@ -326,7 +305,7 @@ width: 100%;
       }
       .article-time{
         margin-left: -5px;
-		border:0px;
+		    border:0px;
         span{
           font-size: 14px;
         }

src/components/PortalHeader.vue

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

src/components/Qa/replyList.vue

@@ -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="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" icon="el-icon-delete">删除</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>
-         <div class="reply-content two-line-ellipsis">
+         <div class="reply-content">
-               <span  v-html="$keywordActiveShow(item.answercontent,keyWord)"></span>
+              <!-- 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;

src/components/Qa/ucList.vue

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

src/views/article/MyList.vue

@@ -46,11 +46,12 @@
         :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">
-              <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
+            <img class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset=""/>
-              <div v-else class="zan-wu">暂无数据</div>
+            <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
-              </div>
+            <div v-else class="zan-wu">你还没有发布文章～</div>
-            </div> 
+          </div>
+        </div> 
 
     </div>
 	<el-dialog title="创建文章" :visible.sync="diagSync" :close-on-click-modal="false" width="900px" custom-class="g-dialog">

src/views/qa/MyReplys.vue

@@ -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;
+            res.result.list.forEach(item => {
-            this.qaList = res;
+              item.isAll = false;
+            });
+            this.qaList = res.result.list;
           }
         })
         .catch(err => {