mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 09:26:45 +08:00
114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<template>
|
|
<view class="item-author" style="display: flex;">
|
|
<view>
|
|
<u-avatar shape="circle" v-if="data.avatar && data.avatar!=''" :size="size" :src="data.avatar"></u-avatar>
|
|
<view v-else :sex="data.sex" random-bg-color >
|
|
<view v-if="data.sex == null" class="peo"></view>
|
|
<view v-else>
|
|
<view :style="{width:width,height:height}" class="peo" v-if="data.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
|
|
<view :style="{width:width,height:height}" class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
|
|
</view>
|
|
</view>
|
|
<!-- <u-avatar v-else :size="25" random-bg-color :text="data.name" shape="square"></u-avatar> -->
|
|
<!-- <view v-else class="uavatar"><view class="uavatar-scale"> {{avatarText}}</view></view> -->
|
|
<!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> -->
|
|
</view>
|
|
<view style="padding-left:10upx;padding-top: 4upx;font-size: 28upx;color: #666666;">{{data.name || data.sysCreateBy}}</view>
|
|
<!-- <view v-if="showCode && data.code!=''" style="padding-left: 10upx;padding-top: 10upx;">({{data.code}})</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
data:{
|
|
type:Object,
|
|
default(){
|
|
return {
|
|
avatar:'',
|
|
name:'',
|
|
info:'',
|
|
code:'',
|
|
sex:null,
|
|
}
|
|
}
|
|
},
|
|
showCode:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
size:{
|
|
type:Number,
|
|
default:24
|
|
},
|
|
width:{
|
|
type:String,
|
|
default:'24px'
|
|
},
|
|
height:{
|
|
type:String,
|
|
default:'24px'
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
//avatarText:''
|
|
}
|
|
},
|
|
computed:{
|
|
avatarText(){
|
|
let text=this.data.name || this.data.sysCreateBy;
|
|
if(text){
|
|
let len=text.length;
|
|
if(len>2){
|
|
text=text.substring(len-2);
|
|
}
|
|
}
|
|
return text;
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods:{
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped >
|
|
.peo{
|
|
width: 100%;
|
|
height: 100%;
|
|
// width: 25px;
|
|
// height: 25px;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.uavatar{
|
|
border:1px solid #73adfe;
|
|
background-color: #d9e9ff;
|
|
color:#73adfe;
|
|
// text-align: center;
|
|
font-size: 12px;
|
|
// line-height: 25px;
|
|
// vertical-align: middle;
|
|
width: 25px;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.uavatar-scale{
|
|
transform:scale(0.8);
|
|
}
|
|
|
|
}
|
|
.item-author{
|
|
font-size: 14upx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|