评论样式

src/components/Portal/commentAuthor.vue

@@ -0,0 +1,189 @@
+<template>
+	<div class="item-author">
+        <el-tooltip :content="userInfo" placement="top" effect="light">
+            <div style="width:40px;height:40px;" @click="toHome()">
+                <el-avatar :size="40"  shape="circle"  :src="userAvatar" v-if="userAvatar"></el-avatar>
+                <div v-else class="uavatar">
+                    <div v-if="sex == null" style="border-radius: 50%;width: 40px;height: 40px;"></div>
+                    <div  v-else>
+                        <div class="mravat" v-if="sex === 1 "><img style="width:40px;height:40px;" src="../../../public/images/Avatarman.png" alt=""></div>
+                        <div class="mravat" v-else><img style="width:40px;height:40px;" src="../../../public/images/Avatarwoman.png" alt=""></div>
+                    </div>
+                </div>
+            </div>
+        </el-tooltip>
+   
+	<div class="author-right-infoName" v-if="!onlyAvatar" style="padding-left: 14px;font-size: 14px;">
+        <div>
+             <span style="color: #333333;font-weight: 400;font-size: 16px;">{{userName}}</span>
+             <el-tooltip :content="usersign" placement="top" effect="light" :disabled="usersign.length<10">
+               <span class="autname">{{handleInfo(usersign)}}</span>
+            </el-tooltip>
+             <!-- <span class="author-text" v-if="userInfo && userInfo!=''">({{userInfo}})</span> -->
+        </div>
+       
+    </div>
+	</div>
+</template>
+<script>
+  import {cutOrgNamePath} from "@/utils/tools.js";
+	export default {
+		props:{
+			avatar:{
+				type:String,
+				default:''
+			},
+      width:{
+        type:String,
+				default:'200px'
+      },
+      sex:{
+       	type:Number,
+      },
+	 name:{
+				type:String,
+				default:''
+		},
+    sign:{
+				type:String,
+				default:''
+		},
+
+      aid:{
+				type:String,
+				default:''
+			},
+			info:{
+				type:String,
+				default:''
+			},
+      onlyAvatar:{
+        type:Boolean,
+        default:false
+      }
+		},
+    data(){
+    	return {
+          baseUrl:process.env.VUE_APP_FILE_BASE_URL,
+          userAvatar:'',
+          userName:'',
+          userInfo:'',
+          usersex:null,
+          usersign:'',
+    	}
+    },
+    created() {
+      // this.userAvatar=require("@/assets/images/user/default.png");
+    },
+    mounted() {
+      this.userName=this.name;
+      if(this.avatar && this.avatar!=''){
+        this.userAvatar=this.avatar;
+      }
+      this.userInfo=cutOrgNamePath(this.info);
+      this.usersex = this.sex;
+      this.usersign = this.sign;
+    },
+    methods:{
+        handleInfo(info) {
+          let sign = '';
+          if(info.length > 10) {
+            sign = info.substring(0,10) + '...';
+          } else {
+            sign = info;
+          }
+          return sign;
+        },
+      toHome() {
+        // ,query:{id:item.objId || item.id}
+        if(this.aid){
+          this.$router.push({path:this.$xpage.getHomePath(this.aid)})
+        }else{
+          this.$message.error("参数错误");
+        }
+
+      }
+    },
+    watch:{
+      name(newVal,oldVal){
+        this.userName=newVal;
+      },
+      sign(newVal,oldVal){
+        this.usersign=newVal;
+      },
+      avatar(newVal,oldVal){
+        if(newVal){
+          this.userAvatar=this.baseUrl+newVal;
+        }
+      },
+      aid(newVal,oldVal){
+        if(newVal){
+          this.aid=newVal;
+        }
+      },
+      sex(newVal,oldVal){
+        this.usersex=newVal;
+      },
+      info(newVal,oldVal){
+        if(newVal){
+          this.userInfo=cutOrgNamePath(newVal);
+        }
+        
+      }
+    }
+	}
+</script>
+
+<style scoped lang="scss">
+
+.mravat{
+    width: 40px;
+    height: 40px;
+    img{
+        width: 100%;
+        height: 100%;
+    }
+}
+.author-right-infoName{
+    height: 40px;
+    line-height: 40px;
+}
+    .autname{
+       color: #666666;
+       font-size: 12px;
+       font-weight: 400;
+       line-height: 25px;
+       margin-left: 5px;
+    }
+
+	.item-author{
+		// font-size: 0.9em;
+    line-height: 18px;
+		display: flex;
+    .author-text{
+      font-size: 12px;
+      color: #999999;
+      font-weight: 300;
+      margin-left: 10px;
+    }
+    .uavatar{
+      // border: 1px solid #73adfe;
+    //   width: 28px;
+    //   height: 28px;
+      // background: #d9e9ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .uavatar-text{
+        transform: scale(0.8);
+        font-size: 12px;
+        color: #73adfe;
+      }
+      img{
+        border-radius: 50%;
+         width: 28px;
+      height: 28px;
+      }
+    }
+	}
+</style>

src/components/Portal/comments.vue

@@ -118,9 +118,10 @@
                                  <div class="comment-author">
                                    <authorInfo :aid="reply.sysCreateAid" :avatar="reply.avatar" :name="reply.sysCreateBy" :sex="reply.sex" :info="reply.orgInfo" :sign="reply.sign"></authorInfo>
                                    <span style="margin-left: 10px;color: #8590A6;font-size:14px; ">
-                                    <svg-icon style="font-size: 10px;margin-right: 0;" icon-class="triangle"></svg-icon>
+                                    <!-- <svg-icon style="font-size: 10px;margin-right: 0;" icon-class="triangle"></svg-icon> -->
+                                    <span>回复了</span>
                                   </span>
-                                   <span style="margin-left: 6px;font-size:14px;margin-top:5px" class="portal-title-tow" >{{reply.replyName || reply.toAname}}</span>
+                                   <span style="margin-left: 6px;font-size:14px;" class="portal-title-tow" >{{reply.replyName || reply.toAname}}</span>
                                  </div>
                               </div>
                               <div class="comment-body" @mouseover="showButtons(reply.id)" @mouseout="hideButtons()">
@@ -240,7 +241,7 @@
   import interactBar from "@/components/Portal/interactBar.vue";
   import apiComment from '@/api/modules/comments.js'
   import apiUser from '@/api/system/user.js'
-  import authorInfo from '@/components/Portal/artauthor.vue';
+  import authorInfo from '@/components/Portal/commentAuthor.vue';
   // import author from '@/components/Portal/author.vue';
   import { mapGetters } from 'vuex';
   export default {
@@ -935,6 +936,7 @@
           padding-left: 8px;
           white-space: pre-wrap;
           word-break:break-all;
+          letter-spacing:1px;
           span {
             color: #409eff;
             cursor: pointer;