A1300399510/PC-vote
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(DetailsComments): 修复表情选择框样式及优化表情数据

Browse Source 
- 使用el-popover重构表情选择框，解决样式问题
- 调整表情选择框的宽度和位置
- 更新表情数据，移除部分不常用表情
- 优化表情选择框的交互体验
- 修复CSS样式冲突问题
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-01 14:44:06 +08:00
parent 1736b6310a
commit 9572eaa81f
64 changed files with 629 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
assets/css/DetailsComments.css
View File

@@ -219,21 +219,6 @@
.input-box .bottom .operate .item:not(:last-of-type) {
margin-right: 20px;
}
.input-box .bottom .operate .item.pitch .emoji-box {
display: flex;
}
.input-box .bottom .operate .item.pitch::after {
content: "";
width: 28px;
height: 28px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
z-index: -1;
}
.input-box .bottom .operate .item .icon {
width: 16px;
height: 16px;
@@ -241,34 +226,20 @@
/* 鼠标悬停时显示为可点击 */
}
.input-box .bottom .operate .item .emoji-box {
width: 501px;
border-radius: 8px;
background-color: #fff;
filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1));
top: 45px;
position: absolute;
z-index: 1;
left: -15px;
border: 1px solid #ebebeb;
display: none;
flex-wrap: wrap;
font-size: 22px;
padding: 8px;
}
.input-box .bottom .operate .item .emoji-box::after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #ffffff;
position: absolute;
top: -8px;
left: 15px;
display: flex;
}
.input-box .bottom .operate .item .emoji-box .emoji-icon {
margin: 5px;
cursor: pointer;
width: 30px;
text-align: center;
}
.input-box .bottom .operate .item .file {
opacity: 0;

67
assets/css/DetailsComments.less
View File

@@ -262,20 +262,20 @@
&.pitch {
.emoji-box {
display: flex;
}
&::after {
content: "";
width: 28px;
height: 28px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
z-index: -1;
// display: flex;
}
// &::after {
// content: "";
// width: 28px;
// height: 28px;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// background-color: #fff;
// border-radius: 5px;
// z-index: -1;
// }
}
.icon {
@@ -285,34 +285,39 @@
}
.emoji-box {
width: 501px;
// width: 581px;
// width: 501px;
border-radius: 8px;
background-color: #fff;
// box-shadow: 0 0 11px rgba(0, 0, 0, 0.1);
filter: drop-shadow(0 0 11px rgba(0, 0, 0, 0.1));
top: 45px;
position: absolute;
z-index: 1;
left: -15px;
border: 1px solid rgb(235, 235, 235);
display: none;
// position: absolute;
// z-index: 1;
// left: -15px;
// border: 1px solid rgb(235, 235, 235);
// display: none;
flex-wrap: wrap;
font-size: 22px;
padding: 8px;
&::after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #ffffff;
position: absolute;
top: -8px;
left: 15px;
}
display: flex;
// &::after {
// content: "";
// width: 0;
// height: 0;
// border-left: 8px solid transparent;
// border-right: 8px solid transparent;
// border-bottom: 8px solid #ffffff;
// position: absolute;
// top: -8px;
// left: 15px;
// }
.emoji-icon {
margin: 5px;
cursor: pointer;
width: 30px;
text-align: center;
}
}

1
assets/css/details.css
View File

@@ -247,6 +247,7 @@
}
.content .right {
flex: 1;
padding-bottom: 80px;
}
.content .right .respond {
padding: 22px 42px 30px;

1
assets/css/details.less
View File

@@ -278,6 +278,7 @@
.right {
flex: 1;
padding-bottom: 80px;
.respond {
padding: 22px 42px 30px;