mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 10:56:44 +08:00
评论样式
This commit is contained in:
zhaofang
189
src/components/Portal/commentAuthor.vue
Normal file
189
src/components/Portal/commentAuthor.vue
Normal file
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user