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

refactor(commentList): 使用el-popover重构表情选择框，优化样式和交互逻辑

Browse Source 
- 将表情选择框改为使用el-popover组件实现
- 调整表情选择框的样式和定位
- 增加表情图标宽度和对齐方式
- 更新表情数据列表
- 优化相关CSS样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-09-01 14:44:02 +08:00
parent 44c34d043d
commit d8f5b53e4a
35 changed files with 3957 additions and 1150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/index.css
View File

@@ -831,20 +831,19 @@ a {
position: relative;
z-index: 1;
}
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item.pitch .emoji-box {
display: flex;
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item .emoji-popover {
box-sizing: border-box;
}
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item.pitch::after {
content: "";
width: 28px;
height: 28px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item .emoji-popover * {
box-sizing: border-box;
}
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item .emoji-popover .el-popper__arrow {
z-index: 1;
}
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item .emoji-popover .el-popper__arrow:before {
background-color: #fff;
border-radius: 5px;
z-index: -1;
border-top-color: #fff !important;
border-left-color: #fff !important;
}
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item .icon {
width: 16px;
@@ -857,30 +856,16 @@ a {
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: -14px;
border: 1px solid #ebebeb;
display: none;
flex-wrap: wrap;
font-size: 22px;
padding: 8px;
}
#answer-app .main .details-area-box .details-box .answer-discuss .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;
}
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item .emoji-box .emoji-icon {
margin: 5px;
cursor: pointer;
width: 30px;
text-align: center;
}
#answer-app .main .details-area-box .details-box .answer-discuss .input-box .bottom .operate .item .file {
opacity: 0;