Skip to content

C
company_app
提交 378e8fc9 作者: 毛细亚
操作

修改样式

上级 d3a27e0c
正在显示 包含 190 行增加 和 15 行删除
src/views/userInfo/components/Info.vue
......@@ -137,17 +137,40 @@
"
class="tags rowFlex columnCenter flexWarp"
>
<div
v-for="(item, index) in chatUserDetails.tag_group"
:key="index"
class="tagsItem rowFlex columnCenter flexWarp"
>
<!-- 第一个标签组的所有标签 -->
<div class="tagsItem rowFlex columnCenter flexWarp">
<span
v-for="(items, indexs) in item.tag"
v-for="(items, indexs) in chatUserDetails.tag_group[0].tag"
:key="indexs"
class="tag hidden"
>{{ items.name }}</span>
</div>
<!-- 如果有多个标签组，显示+n -->
<el-popover
v-if="chatUserDetails.tag_group.length > 1"
placement="top"
trigger="hover"
popper-class="tag-popover"
>
<div class="groups-popover-content" style="height: 600px;overflow-y: auto;">
<div
v-for="(group, groupIndex) in chatUserDetails.tag_group.slice(1)"
:key="groupIndex"
class="group-item"
>
<span
v-for="(tagItem, tagIndex) in group.tag"
:key="tagIndex"
class="tag-item"
>{{ tagItem.name }}</span>
</div>
</div>
<span
slot="reference"
class="tag-more"
>+{{ chatUserDetails.tag_group.length - 1 }}</span>
</el-popover>
</div>
</div>
<i class="el-icon-edit icon" style="font-size: 14px;margin-right: 10px;"
......@@ -549,4 +572,73 @@ import watchMember from '@/mixins/watchMember'
.flexWarp {
flex-wrap: wrap;
}
.tag-more {
display: inline-block;
background-color: #E8F7FF;
color: #3491FA;
padding: 2px 8px;
border-radius: 2px;
margin-left: 5px;
font-size: 12px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background-color: #d0edff;
}
}
.tags-popover-content {
display: flex;
flex-wrap: wrap;
max-width: 200px;
.tag-item {
background-color: #f5f5f5;
color: #666;
padding: 2px 8px;
border-radius: 2px;
margin-right: 5px;
margin-bottom: 5px;
font-size: 12px;
}
}
.groups-popover-content {
display: flex;
flex-direction: column;
max-width: 300px;
.group-item {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px dashed #eee;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.tag-item {
background-color: #f5f5f5;
color: #666;
padding: 2px 8px;
border-radius: 2px;
margin-right: 5px;
margin-bottom: 5px;
font-size: 12px;
}
}
}
</style>
<style>
.tag-popover {
min-width: 200px;
max-width: 300px;
}
</style>
\ No newline at end of file
src/views/userInfo/components/shareInfo.vue
<template>
<div class="newPage">
<!-- 共享信息 -->
<div v-if="userList.length > 0" class="item columnFlex spaceBetween">
<div v-if="userList.length > 0" class="item rowFlex columnCenter">
<!-- <div class="rowFlex columnCenter">
<span class="label">共享信息:</span>
<i style="margin-left: 10px; font-size: 20px; color: #0ac358; cursor: pointer" class="el-icon-circle-plus-outline" type="primary" @click="addGroupText"></i>
</div> -->
<div v-for="(i,k) in userList" :key="k" class="userList rowFlex ">
<p class="label hidden">{{ i.zq_user_name }} -- {{ i.name }}</p>
<!-- 显示第一个用户的共享信息 -->
<div v-if="userList.length > 0" class="userList rowFlex">
<p class="label hidden">{{ userList[0].zq_user_name }} -- {{ userList[0].name }}</p>
<div style="margin-bottom:10px;" class="columnFlex ">
<div v-for="(item,index) in i.text" :key="index+'1'" class="keyWordsItem rowFlex columnCenter">
<el-input v-model="item.text" type="textarea" :disabled="chatUserDetails.userid !== i.userid || i.zq_user_id!== userInfo.id" placeholder="请输入共享信息" @change="inputBlur(k,index)"> </el-input>
<div v-if="chatUserDetails.userid == i.userid && i.zq_user_id=== userInfo.id">
<i v-if="index==0" style="margin-left:10px;font-size:20px;color:#0AC358;cursor: pointer;" class="el-icon-circle-plus-outline" type="primary" @click="addInputItem(k,index)"></i>
<i v-else style="margin-left:10px;font-size:20px;color:#0AC358;cursor: pointer;" class="el-icon-remove-outline" type="primary" @click="removeInput(k,index)"></i>
<div v-for="(item,index) in userList[0].text" :key="index+'1'" class="keyWordsItem rowFlex columnCenter">
<el-input v-model="item.text" type="textarea" :disabled="chatUserDetails.userid !== userList[0].userid || userList[0].zq_user_id!== userInfo.id" placeholder="请输入共享信息" @change="inputBlur(0,index)"> </el-input>
<div v-if="chatUserDetails.userid == userList[0].userid && userList[0].zq_user_id=== userInfo.id">
<i v-if="index==0" style="margin-left:10px;font-size:20px;color:#0AC358;cursor: pointer;" class="el-icon-circle-plus-outline" type="primary" @click="addInputItem(0,index)"></i>
<i v-else style="margin-left:10px;font-size:20px;color:#0AC358;cursor: pointer;" class="el-icon-remove-outline" type="primary" @click="removeInput(0,index)"></i>
</div>
</div>
</div>
</div>
<!-- 如果有多个用户，显示+n -->
<el-popover
v-if="userList.length > 1"
placement="bottom"
trigger="hover"
popper-class="share-info-popover"
>
<div class="share-info-popover-content" style="max-height: 400px; overflow-y: auto;">
<div v-for="(user, userIndex) in userList.slice(1)" :key="userIndex" class="share-info-user">
<p class="share-info-username">{{ user.zq_user_name }} -- {{ user.name }}</p>
<div class="share-info-items">
<div v-for="(item, itemIndex) in user.text" :key="itemIndex" class="share-info-item">
<el-input
v-model="item.text"
type="textarea"
:disabled="chatUserDetails.userid !== user.userid || user.zq_user_id !== userInfo.id"
placeholder="请输入共享信息"
@change="inputBlur(userIndex + 1, itemIndex)"
></el-input>
<div v-if="chatUserDetails.userid == user.userid && user.zq_user_id === userInfo.id">
<i v-if="itemIndex==0" style="margin-left:10px;font-size:20px;color:#0AC358;cursor: pointer;" class="el-icon-circle-plus-outline" @click="addInputItem(userIndex + 1, itemIndex)"></i>
<i v-else style="margin-left:10px;font-size:20px;color:#0AC358;cursor: pointer;" class="el-icon-remove-outline" @click="removeInput(userIndex + 1, itemIndex)"></i>
</div>
</div>
</div>
</div>
</div>
<div slot="reference" class="more-users-button">+{{ userList.length - 1 }}</div>
</el-popover>
</div>
</div>
</template>
......@@ -200,7 +230,6 @@
}
.userList{
width: 100%;
height: auto;
margin-top: 20px;
.label{
......@@ -211,6 +240,58 @@
margin-bottom: 20px;
}
}
.more-users-button {
display: inline-block;
background-color: #E8F7FF;
color: #3491FA;
padding: 4px 8px;
border-radius: 4px;
margin-top: 10px;
margin-left: 16px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background-color: #d0edff;
}
}
}
</style>
<style>
.share-info-popover {
min-width: 300px;
max-width: 360px;
}
.share-info-popover-content .share-info-user {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed #eee;
}
.share-info-popover-content .share-info-user:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.share-info-popover-content .share-info-username {
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
.share-info-popover-content .share-info-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.share-info-popover-content .share-info-item:last-child {
margin-bottom: 0;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论