优化：用户列表样式优化，增加关系绑定信息显示
This commit is contained in:
parent
c3adc31148
commit
81dcd5541b
|
|
@ -3,12 +3,12 @@ ENV = 'development'
|
|||
# http://192.168.1.43:8324/admin
|
||||
# http://mer.crmeb.net/admin
|
||||
# base api
|
||||
#VUE_APP_BASE_API = 'https://bt.test.cdlfjy.com'
|
||||
VUE_APP_BASE_API = 'https://mp.scwmbh.cn'
|
||||
VUE_APP_BASE_API = 'https://bt.test.cdlfjy.com'
|
||||
#VUE_APP_BASE_API = 'https://mp.scwmbh.cn'
|
||||
|
||||
# socket 连接地址
|
||||
#VUE_APP_WS_URL = 'ws://bt.test.cdlfjy.com'
|
||||
VUE_APP_WS_URL = 'ws://mp.scwmbh.cn'
|
||||
VUE_APP_WS_URL = 'ws://bt.test.cdlfjy.com'
|
||||
#VUE_APP_WS_URL = 'ws://mp.scwmbh.cn'
|
||||
|
||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="divBox">
|
||||
<div class="divBox">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-tabs v-model="user_type" @tab-click="getList(1)">
|
||||
|
|
@ -120,8 +120,11 @@
|
|||
</template>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right userFrom">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="small" @click="userSearchs">搜索</el-button>
|
||||
<el-button class="ResetSearch mr10" size="small" type="reset" @click="reset('userFrom')">重置</el-button>
|
||||
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="small" @click="userSearchs">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button class="ResetSearch mr10" size="small" type="reset" @click="reset('userFrom')">重置
|
||||
</el-button>
|
||||
<a class="ivu-ml-8" @click="collapse = !collapse">
|
||||
<template v-if="!collapse">
|
||||
展开 <i class="el-icon-arrow-down" />
|
||||
|
|
@ -140,13 +143,15 @@
|
|||
<el-button v-show="user_type === 'wechat'" size="mini" class="mr10" @click="sendNews">发送图文消息</el-button>
|
||||
<el-button v-show="checkedIds.length != 0" size="mini" class="mr10" @click="batchGroup">批量设置分组</el-button>
|
||||
<el-button v-show="checkedIds.length != 0" size="mini" @click="batchlabel">批量设置标签</el-button>
|
||||
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="mini" @click="sendCoupon">发送优惠券</el-button>
|
||||
<el-button type="primary" icon="ios-search" label="default" class="mr15" size="mini" @click="sendCoupon">
|
||||
发送优惠券
|
||||
</el-button>
|
||||
</div>
|
||||
<el-alert v-if="checkedIds.length>0 || allCheck" :title="allCheck ? `已选择 ${tableData.total} 项` : `已选择 ${checkedIds.length} 项`" type="info" show-icon />
|
||||
<!-- <el-alert v-if="multipleSelection.length>0" :title="`已选择 ${multipleSelection.length} 项`" type="info" show-icon /> -->
|
||||
</div>
|
||||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row @selection-change="handleSelectionChange">
|
||||
<el-table-column type="expand">
|
||||
<el-table-column type="expand" width="60">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="首次访问：">
|
||||
|
|
@ -179,8 +184,6 @@
|
|||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column type="selection" width="55" /> -->
|
||||
|
||||
<el-table-column width="50">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<el-popover placement="top-start" width="100" trigger="hover" class="tabPop">
|
||||
|
|
@ -195,70 +198,105 @@
|
|||
<el-checkbox :disabled="scope.row.cancel_time" :value="!scope.row.cancel_time && (checkedIds.indexOf(scope.row.uid) > -1 || (chkName === 'duo' && noChecked.indexOf(scope.row.uid) === -1))" @change="(v)=>changeOne(v,scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="uid" label="ID" min-width="60" />
|
||||
<el-table-column label="头像" min-width="50">
|
||||
<el-table-column label="用户信息" min-width="230" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div class="demo-image__preview">
|
||||
<el-image style="width: 36px; height: 36px" :src="scope.row.avatar ? scope.row.avatar : moren" :preview-src-list="[scope.row.avatar || moren]" />
|
||||
<div class="user-content">
|
||||
<div class="user-avatar">
|
||||
<el-image calss="avatar" :src="scope.row.avatar ? scope.row.avatar : moren" :preview-src-list="[scope.row.avatar || moren]" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="nickname">
|
||||
<i v-show="scope.row.sex===1" class="el-icon-male mr5" style="font-size: 15px; margin-top: 3px; color:#2db7f5;" />
|
||||
<i v-show="scope.row.sex===2" class="el-icon-female mr5" style="font-size: 15px; margin-top: 3px; color:#ed4014;" />
|
||||
{{ scope.row.nickname }}
|
||||
</div>
|
||||
<div class="agent-type-text">
|
||||
<el-tag type="info" effect="dark" size="small">{{ scope.row.uid }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" min-width="150">
|
||||
<el-table-column prop="is_svip" label="付费会员" min-width="80" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<div class="acea-row">
|
||||
<i v-show="row.sex===1" class="el-icon-male mr5" style="font-size: 15px; margin-top: 3px; color:#2db7f5;" />
|
||||
<i v-show="row.sex===2" class="el-icon-female mr5" style="font-size: 15px; margin-top: 3px; color:#ed4014;" />
|
||||
<div v-text="row.nickname" />
|
||||
<span>{{ row.is_svip > 0 ? "是" : "否" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" min-width="120" align="center"/>
|
||||
<el-table-column label="等级" min-width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.member ? row.member.brokerage_name : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分组" min-width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.group ? row.group.group_name : '' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="140" align="center">
|
||||
<template slot="header" slot-scope="scope">
|
||||
推荐人<br />
|
||||
推荐人UID
|
||||
</template>
|
||||
<template slot-scope="{row}">
|
||||
<div v-if="row.spread">
|
||||
{{ row.spread.nickname }}<br />
|
||||
{{ row.spread.uid }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="is_svip" label="付费会员" min-width="120">
|
||||
<el-table-column min-width="140" align="center">
|
||||
<template slot="header" slot-scope="scope">
|
||||
关系绑定状态<br />
|
||||
预计解绑时间
|
||||
</template>
|
||||
<template slot-scope="{row}">
|
||||
<span>{{row.is_svip > 0 ? "是" : "否"}}</span>
|
||||
<div v-if="row.spread">
|
||||
{{ row.is_temporary == 1 ? '临时绑定' : '永久绑定'}}
|
||||
<br />
|
||||
{{ row.is_temporary == 1 ? row.spread_limit : '' }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" min-width="120" />
|
||||
<el-table-column label="等级" min-width="100">
|
||||
<el-table-column label="用户类型" min-width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.member?row.member.brokerage_name:'-' }}</span>
|
||||
<span v-if="row.user_type === 'routine'">小程序</span>
|
||||
<span v-else-if="row.user_type === 'wechat'">公众号</span>
|
||||
<span v-else-if="row.user_type === 'app' || row.user_type === 'App'">App</span>
|
||||
<span v-else-if="row.user_type === 'pc'">PC</span>
|
||||
<span v-else>H5</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分组" min-width="100">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.group?row.group.group_name:'无' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="推荐人" min-width="140">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.spread ? row.spread.nickname + ' / ' + row.spread.uid : '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户类型" min-width="100">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.user_type === 'routine' ? '小程序' : row.user_type === 'wechat' ? '公众号' : row.user_type === 'app' || row.user_type === 'App' ? 'App' : row.user_type === 'pc' ? 'PC' : 'H5' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="now_money" label="余额" sortable min-width="100" :sort-method="(a,b)=>{return a.now_money - b.now_money}"/>
|
||||
<el-table-column prop="integral" label="当前可用积分" min-width="100" />
|
||||
<el-table-column prop="now_money" label="余额" sortable min-width="100" :sort-method="(a,b)=>{return a.now_money - b.now_money}" align="center"/>
|
||||
<el-table-column prop="integral" label="当前可用积分" min-width="100" align="center"/>
|
||||
<el-table-column label="操作" min-width="130" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="!scope.row.cancel_time" type="text" size="small" class="mr10" @click="onEdit(scope.row.uid)">编辑</el-button>
|
||||
<el-button v-if="!scope.row.cancel_time" type="text" size="small" class="mr10" @click="onEdit(scope.row.uid)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
更多<i class="el-icon-arrow-down el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="onDetails(scope.row.uid)">用户详情</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setMoney(scope.row)">设置余额</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="changeIntegral(scope.row)">设置积分</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setMoney(scope.row)">设置余额
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="changeIntegral(scope.row)">设置积分
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="scope.row.vip_name && !scope.row.cancel_time">清除等级</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setGroup(scope.row)">设置分组</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setLabel(scope.row)">设置标签</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setModify(scope.row)">修改推荐人</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setPassword(scope.row)">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setMember(scope.row)">编辑会员等级</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="giveMember(scope.row)">付费会员设置</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setGroup(scope.row)">设置分组
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setLabel(scope.row)">设置标签
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setModify(scope.row)">修改推荐人
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setPassword(scope.row)">修改密码
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="setMember(scope.row)">编辑会员等级
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.cancel_time" @click.native="giveMember(scope.row)">付费会员设置
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
|
@ -289,12 +327,11 @@
|
|||
:isUser="true"
|
||||
ref="userDetails"
|
||||
:cancel-time="cancel_time" />
|
||||
|
||||
<!-- 选择优惠券 -->
|
||||
<el-dialog v-if="visibleCoupon" title="优惠券列表" :visible.sync="visibleCoupon" width="1000px">
|
||||
<coupon-List v-if="visibleCoupon" ref="couponList" :couponForm="couponForm" :checkedIds="checkedIds" :allCheck="allCheck" :userFrom="userFrom" @sendSuccess="sendSuccess" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -549,26 +586,34 @@ export default {
|
|||
if (index > -1) this.checkedIds.splice(index, 1)
|
||||
}
|
||||
}
|
||||
console.log("分开选择",this.checkedIds)
|
||||
console.log("分开选择", this.checkedIds)
|
||||
|
||||
},
|
||||
// 发送优惠券
|
||||
sendCoupon(){
|
||||
if(this.checkedIds.length == 0 && this.allCheck == false){
|
||||
sendCoupon() {
|
||||
if (this.checkedIds.length == 0 && this.allCheck == false) {
|
||||
this.$message.warning('请选择用户')
|
||||
}else{
|
||||
} else {
|
||||
this.visibleCoupon = true;
|
||||
}
|
||||
},
|
||||
sendSuccess(){
|
||||
sendSuccess() {
|
||||
this.visibleCoupon = false;
|
||||
},
|
||||
getCoupounParmas(){
|
||||
getCoupounParmas() {
|
||||
let label_id = this.userFrom.label_id == '' ? '' : this.getLabelValue(),
|
||||
user_type = this.findKey(this.userFrom.user_type,{'':'','微信用户':'wechat','小程序用户':'routine','H5用户':'h5'}),
|
||||
sex = this.findKey(this.userFrom.sex,{'男':'1','女':'2','保密':'0','':''}),
|
||||
pay_count = this.findKey(this.userFrom.sex,{'0次':'-1','1次以上':'0','2次以上':'1','3次以上':'2','4次以上':'3','5次以上':'4','': ''}),
|
||||
is_promoter = this.findKey(this.userFrom.is_promoter,{'推广员':'1','普通用户':'0','':''}),
|
||||
user_type = this.findKey(this.userFrom.user_type, {'': '', '微信用户': 'wechat', '小程序用户': 'routine', 'H5用户': 'h5'}),
|
||||
sex = this.findKey(this.userFrom.sex, {'男': '1', '女': '2', '保密': '0', '': ''}),
|
||||
pay_count = this.findKey(this.userFrom.sex, {
|
||||
'0次': '-1',
|
||||
'1次以上': '0',
|
||||
'2次以上': '1',
|
||||
'3次以上': '2',
|
||||
'4次以上': '3',
|
||||
'5次以上': '4',
|
||||
'': ''
|
||||
}),
|
||||
is_promoter = this.findKey(this.userFrom.is_promoter, {'推广员': '1', '普通用户': '0', '': ''}),
|
||||
user_time_type = this.userFrom.user_time_type == 'visit' ? '最后访问' : this.userFrom.user_time_type == 'add_time' ? '首次访问' : ''
|
||||
this.couponForm = {
|
||||
用户标签: label_id,
|
||||
|
|
@ -581,13 +626,13 @@ export default {
|
|||
昵称: this.userFrom.nickname
|
||||
}
|
||||
},
|
||||
findKey(value,data, compare = (a, b) => a === b) {
|
||||
findKey(value, data, compare = (a, b) => a === b) {
|
||||
return Object.keys(data).find(k => compare(data[k], value))
|
||||
},
|
||||
getLabelValue(){
|
||||
getLabelValue() {
|
||||
let labelName = ''
|
||||
for(let i = 0; i < this.labelLists.length; i ++) {
|
||||
if(this.labelLists[i]['label_id'] === this.userFrom.label_id) {
|
||||
for (let i = 0; i < this.labelLists.length; i++) {
|
||||
if (this.labelLists[i]['label_id'] === this.userFrom.label_id) {
|
||||
labelName = this.labelLists[i]['label_name']
|
||||
return labelName
|
||||
}
|
||||
|
|
@ -605,11 +650,11 @@ export default {
|
|||
this.userFrom.user_time = e ? this.timeVal.join('-') : ''
|
||||
},
|
||||
userSearchs() {
|
||||
if(this.userFrom.user_time_type && (!this.userFrom.user_time)){
|
||||
if (this.userFrom.user_time_type && (!this.userFrom.user_time)) {
|
||||
this.$message.error('请选择访问时间')
|
||||
}else if(!this.userFrom.user_time_type && (this.userFrom.user_time)){
|
||||
} else if (!this.userFrom.user_time_type && (this.userFrom.user_time)) {
|
||||
this.$message.error('请选择访问情况')
|
||||
}else{
|
||||
} else {
|
||||
this.getList(1)
|
||||
}
|
||||
},
|
||||
|
|
@ -663,18 +708,18 @@ export default {
|
|||
this.visible = false
|
||||
},
|
||||
/**获取选中的微信用户Id */
|
||||
getWechatUsers(arr1, arr2){
|
||||
getWechatUsers(arr1, arr2) {
|
||||
let newArr = [];
|
||||
if(this.allCheck){
|
||||
if (this.allCheck) {
|
||||
for (let i = 0; i < arr1.length; i++) {
|
||||
if(arr1[i]['wechat_user_id']){
|
||||
if (arr1[i]['wechat_user_id']) {
|
||||
newArr.push(arr1[i]['wechat_user_id']);
|
||||
}
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
for (let i = 0; i < arr1.length; i++) {
|
||||
for (let j = 0; j < arr2.length; j++) {
|
||||
if(arr1[i]['uid'] === arr2[j] && arr1[i]['wechat_user_id']){
|
||||
if (arr1[i]['uid'] === arr2[j] && arr1[i]['wechat_user_id']) {
|
||||
newArr.push(arr2[j]);
|
||||
}
|
||||
}
|
||||
|
|
@ -724,13 +769,13 @@ export default {
|
|||
this.$modalForm(giveMemberApi(row.uid)).then(() => this.getList(''))
|
||||
},
|
||||
// 修改推荐人
|
||||
setModify(row){
|
||||
this.$modalForm(modifyUserReferrer(row.uid)).then(({ message }) => {
|
||||
setModify(row) {
|
||||
this.$modalForm(modifyUserReferrer(row.uid)).then(({message}) => {
|
||||
this.getList('');
|
||||
});
|
||||
},
|
||||
// 修改密码
|
||||
setPassword(row){
|
||||
setPassword(row) {
|
||||
this.$modalForm(modifyUserPassword(row.uid)).then(() => this.getList(''));
|
||||
},
|
||||
// 修改余额
|
||||
|
|
@ -738,7 +783,7 @@ export default {
|
|||
this.$modalForm(changeNowMoneyApi(row.uid)).then(() => this.getList(''))
|
||||
},
|
||||
// 修改积分余额
|
||||
changeIntegral(row){
|
||||
changeIntegral(row) {
|
||||
this.$modalForm(changeNowIntegralApi(row.uid)).then(() => this.getList(''))
|
||||
},
|
||||
// 列表
|
||||
|
|
@ -791,7 +836,7 @@ export default {
|
|||
limit: 20,
|
||||
group_id: ''
|
||||
}
|
||||
this.timeVal=[]
|
||||
this.timeVal = []
|
||||
this.getList(1)
|
||||
}
|
||||
}
|
||||
|
|
@ -802,6 +847,7 @@ export default {
|
|||
.check {
|
||||
color: #00a2d4;
|
||||
}
|
||||
|
||||
.selWidth {
|
||||
// width: 100% !important;
|
||||
}
|
||||
|
|
@ -819,11 +865,11 @@ export default {
|
|||
.container {
|
||||
min-width: 821px;
|
||||
|
||||
/deep/.el-form-item {
|
||||
/deep/ .el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/.el-form-item__content {
|
||||
/deep/ .el-form-item__content {
|
||||
width: 72%;
|
||||
}
|
||||
}
|
||||
|
|
@ -857,10 +903,98 @@ export default {
|
|||
width: 33.33%;
|
||||
}
|
||||
|
||||
/deep/[type=reset],
|
||||
/deep/ [type=reset],
|
||||
[type=submit],
|
||||
button,
|
||||
html [type=button] {
|
||||
-webkit-appearance: none !important;
|
||||
}
|
||||
|
||||
//重写表格部分样式
|
||||
/deep/ .el-table .cell{
|
||||
padding: 0!important;
|
||||
}
|
||||
/deep/ .el-table .el-table__expand-icon {
|
||||
width: 50px !important;
|
||||
height: 50px;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
line-height: 50px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.el-icon{
|
||||
position: unset!important;
|
||||
}
|
||||
}
|
||||
.user-content{
|
||||
--user-content-height-: 80px;
|
||||
|
||||
height: var(--user-content-height-);
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.user-avatar{
|
||||
height: var(--user-content-height-);
|
||||
width: var(--user-content-height-);
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/deep/ .el-image{
|
||||
height: 80%!important;
|
||||
width: 80%!important;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
}
|
||||
.user-info{
|
||||
max-width: calc(100% - var(--user-content-height-));
|
||||
height: var(--user-content-height-);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
.nickname{
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.user-id{
|
||||
color: #fff;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
height: 18px;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
padding: 0 5px;
|
||||
border-radius: 5px;
|
||||
margin-left: 10px;
|
||||
width: max-content!important;
|
||||
}
|
||||
}
|
||||
.user-id{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
line-height: calc(var(--user-content-height- * 35%));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue