A1300399510/min-offer-forum-issue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(编辑器): 优化移动端编辑器交互体验

Browse Source 
- 修复键盘弹出时底部操作栏遮挡问题，添加固定定位效果
- 改进光标定位逻辑，适配不同输入场景
- 增加内容预填充功能，便于测试和演示
- 调整底部间距和动画高度，适配不同设备
- 添加vConsole调试工具便于移动端调试
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-11 18:56:00 +08:00
parent ad975d5c25
commit 6f93f8cf17
5 changed files with 383 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
css/index.less
View File

@@ -57,8 +57,8 @@ editor {
.container {
min-height: 100vh;
background-color: rgba(245, 245, 245, 1);
padding-bottom: 3.2rem;
padding-bottom: 8.6667rem;
padding-bottom: 300px;
// padding-bottom: 8.6667rem;
padding-top: 0.4rem;
@@ -93,7 +93,7 @@ editor {
border-radius: 0.4rem;
.editor {
margin: 0.4rem;
margin: 0.4rem 0.4rem 0.2rem;
width: 8.6rem;
min-height: 10rem;
border: none;
@@ -146,98 +146,117 @@ editor {
}
}
.label {
white-space: nowrap;
/* height: 0.84rem; */
margin-bottom: 0.2rem;
width: 9.4rem;
overflow: auto;
padding-bottom: 0.2rem;
.operate-box {
display: flex;
flex-direction: column;
padding-top: 0.2rem;
transition: all 0.3s ease-in-out;
.item {
width: fit-content;
height: 0.64rem;
line-height: 0.64rem;
background-color: rgba(246, 246, 246, 1);
border-radius: 1.46rem;
font-size: 0.28rem;
color: #606060;
padding: 0 0.24rem;
display: inline-flex;
&:not(:last-of-type) {
margin-right: 0.2rem;
}
&:first-of-type {
margin-left: 0.4rem;
}
&:last-of-type {
margin-right: 0.4rem;
&.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
background-color: #fff;
z-index: 999;
.label {
width: 100vw;
}
}
}
.btn-list {
margin: 0 0.4rem 0.4rem;
.label {
white-space: nowrap;
/* height: 0.84rem; */
margin-bottom: 0.2rem;
width: 9.4rem;
overflow: auto;
padding-bottom: 0.2rem;
.item {
width: fit-content;
height: 0.72rem;
line-height: 0.72rem;
background-color: rgba(246, 246, 246, 1);
border: 0.0133rem solid rgba(235, 235, 235, 1);
border-radius: 1.46rem;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-size: 0.32rem;
color: #555555;
padding: 0 0.24rem;
margin-right: 0.2rem;
position: relative;
.item {
width: fit-content;
height: 0.64rem;
line-height: 0.64rem;
background-color: rgba(246, 246, 246, 1);
border-radius: 1.46rem;
font-size: 0.28rem;
color: #606060;
padding: 0 0.24rem;
display: inline-flex;
&.pitch {
background-color: rgba(246, 246, 189, 1);
}
&:not(:last-of-type) {
margin-right: 0.2rem;
}
.icon {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.14rem;
}
&:first-of-type {
margin-left: 0.4rem;
}
.file {
opacity: 0; /* 隐藏输入框 */
background: transparent;
border: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
&::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
&:last-of-type {
margin-right: 0.4rem;
}
}
}
.unfold {
width: 0.72rem;
height: 0.72rem;
background-color: rgba(246, 246, 246, 1);
border: 0.0133rem solid rgba(235, 235, 235, 1);
border-radius: 1.4667rem;
.btn-list {
margin: 0 0.4rem 0.4rem;
.icon {
width: 0.32rem;
height: 0.32rem;
.item {
width: fit-content;
height: 0.72rem;
line-height: 0.72rem;
background-color: rgba(246, 246, 246, 1);
border: 0.0133rem solid rgba(235, 235, 235, 1);
border-radius: 1.46rem;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-size: 0.32rem;
color: #555555;
padding: 0 0.24rem;
margin-right: 0.2rem;
position: relative;
&.pitch {
background-color: rgba(246, 246, 189, 1);
}
.icon {
width: 0.4rem;
height: 0.4rem;
margin-right: 0.14rem;
}
.file {
opacity: 0; /* 隐藏输入框 */
background: transparent;
border: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
&::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
.unfold {
width: 0.72rem;
height: 0.72rem;
background-color: rgba(246, 246, 246, 1);
border: 0.0133rem solid rgba(235, 235, 235, 1);
border-radius: 1.4667rem;
.icon {
width: 0.32rem;
height: 0.32rem;
}
}
}
}
@@ -341,7 +360,7 @@ editor {
}
100% {
height: 8.6667rem;
height: 300px;
}
}