feat(editor): 集成富文本编辑器并优化响应式布局
1. 添加wangEditor富文本编辑器替换原有简易编辑器 2. 新增编辑器相关CSS样式和功能按钮 3. 优化详情页和编辑页的响应式布局 4. 调整评论区域样式结构 5. 添加移动端适配样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
128
css/details.css
128
css/details.css
@@ -1,6 +1,7 @@
|
||||
#details {
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
min-width: 320px;
|
||||
}
|
||||
#details .matter {
|
||||
align-items: flex-start;
|
||||
@@ -338,6 +339,7 @@
|
||||
}
|
||||
#details .matter .matter-left .related .list .item .text {
|
||||
width: 352px;
|
||||
flex: 1;
|
||||
}
|
||||
#details .matter .sidebar-box {
|
||||
position: sticky;
|
||||
@@ -845,30 +847,29 @@
|
||||
border-top: 1px dotted #ebebeb;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left {
|
||||
.answer-discuss .comments-box .comments-item .comments-header {
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-avatar {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-username {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-username {
|
||||
color: #555;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-time {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-time {
|
||||
color: #aaaaaa;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-identity {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-identity {
|
||||
font-size: 12px;
|
||||
color: #7f7f7f;
|
||||
padding: 0 3px;
|
||||
@@ -877,18 +878,19 @@
|
||||
border: 1px solid #d7d7d7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box:hover .operate-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box:hover .operate-box {
|
||||
display: block;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .menu-icon {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .menu-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .operate-box {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
@@ -903,13 +905,13 @@
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #d7d7d7;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .operate-box .item {
|
||||
height: 24px;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item:not(:last-of-type) {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .operate-box .item:not(:last-of-type) {
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box::after {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .operate-box::after {
|
||||
content: "";
|
||||
width: 58px;
|
||||
height: 36px;
|
||||
@@ -918,7 +920,7 @@
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .report-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
@@ -932,7 +934,7 @@
|
||||
color: #7f7f7f;
|
||||
cursor: pointer;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box::after {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .report-box::after {
|
||||
content: "";
|
||||
width: 58px;
|
||||
height: 36px;
|
||||
@@ -940,23 +942,23 @@
|
||||
top: -14px;
|
||||
right: 0;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .comment-icon {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comment-icon {
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
margin-left: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .like-box {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
margin-left: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-icon {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .like-box .like-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-quantity {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .like-box .like-quantity {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.answer-discuss .comments-box .comments-item .comments-content {
|
||||
@@ -1251,3 +1253,89 @@
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.20392157);
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
#details {
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
#details .head-top {
|
||||
display: none;
|
||||
}
|
||||
#details .head-navigation {
|
||||
display: none;
|
||||
}
|
||||
#details .matter .matter-left {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
#details .matter .matter-left .action-bar {
|
||||
margin-right: 0 !important;
|
||||
justify-content: space-around;
|
||||
padding: 0 !important;
|
||||
}
|
||||
#details .matter .matter-left .action-bar .action-bar-item {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
#details .matter .matter-left .related .related-head {
|
||||
padding-left: 14px;
|
||||
}
|
||||
#details .matter .matter-left .related .list {
|
||||
padding: 14px;
|
||||
}
|
||||
#details .matter .matter-left .related .list .item {
|
||||
width: 100% !important;
|
||||
}
|
||||
#details .matter .matter-left .related .list .item:not(:last-child) {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
#details .matter .matter-left .related .list .item .text {
|
||||
width: calc(100vw - 100px);
|
||||
}
|
||||
#details .matter .sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
#details .answer-discuss {
|
||||
padding: 15px;
|
||||
}
|
||||
#details .answer-discuss .input-box .picture-box {
|
||||
width: calc(100vw - 68px);
|
||||
}
|
||||
#details .answer-discuss .input-box .bottom .operate .item .emoji-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
width: 100vw;
|
||||
height: 300px;
|
||||
top: auto;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
}
|
||||
#details .answer-discuss .input-box .bottom .operate .item .emoji-box::after {
|
||||
display: none;
|
||||
}
|
||||
#details .answer-discuss .comments-box .input-box .picture-box {
|
||||
width: calc(100vw - 88px);
|
||||
}
|
||||
#details .answer-discuss .comments-box .comments-item .comments-header {
|
||||
justify-content: inherit;
|
||||
}
|
||||
#details .answer-discuss .comments-box .comments-item .comments-header .menu-box {
|
||||
margin-left: auto;
|
||||
}
|
||||
#details .answer-discuss .comments-box .comments-item .child-comments .input-box .picture-box {
|
||||
width: calc(100vw - 128px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
#details .answer-discuss .comments-box .comments-item .comments-header {
|
||||
font-size: 12px;
|
||||
}
|
||||
#details .answer-discuss .comments-box .comments-item .comments-header .comments-title {
|
||||
height: 14px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#details .answer-discuss .comments-box .comments-item .comments-header .comment-icon,
|
||||
#details .answer-discuss .comments-box .comments-item .comments-header .like-box {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
188
css/details.less
188
css/details.less
@@ -1,6 +1,8 @@
|
||||
#details {
|
||||
width: 1200px;
|
||||
// width: 1200px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
min-width: 320px;
|
||||
|
||||
.matter {
|
||||
align-items: flex-start;
|
||||
@@ -204,7 +206,7 @@
|
||||
video {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
@@ -393,6 +395,7 @@
|
||||
|
||||
.text {
|
||||
width: 352px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -994,16 +997,16 @@
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header {
|
||||
justify-content: space-between;
|
||||
// justify-content: space-between;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left {
|
||||
.answer-discuss .comments-box .comments-item .comments-header {
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-avatar {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
@@ -1011,18 +1014,18 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-username {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-username {
|
||||
color: #555;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-time {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-time {
|
||||
color: #aaaaaa;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-left .comments-identity {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-identity {
|
||||
font-size: 12px;
|
||||
color: #7f7f7f;
|
||||
padding: 0 3px;
|
||||
@@ -1032,21 +1035,22 @@
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box:hover .operate-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box:hover .operate-box {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .menu-icon {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .menu-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .operate-box {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
@@ -1062,15 +1066,15 @@
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .operate-box .item {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box .item:not(:last-of-type) {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .operate-box .item:not(:last-of-type) {
|
||||
border-bottom: 1px solid rgba(215, 215, 215, 1);
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .operate-box::after {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .operate-box::after {
|
||||
content: "";
|
||||
width: 58px;
|
||||
height: 36px;
|
||||
@@ -1080,7 +1084,7 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .report-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
@@ -1095,7 +1099,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .menu-box .report-box::after {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .menu-box .report-box::after {
|
||||
content: "";
|
||||
width: 58px;
|
||||
height: 36px;
|
||||
@@ -1104,26 +1108,26 @@
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .comment-icon {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comment-icon {
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
margin-left: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .like-box {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
margin-left: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-icon {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .like-box .like-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.answer-discuss .comments-box .comments-item .comments-header .comments-header-right .like-box .like-quantity {
|
||||
.answer-discuss .comments-box .comments-item .comments-header .like-box .like-quantity {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
@@ -1458,3 +1462,145 @@
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, 0.20392157);
|
||||
}
|
||||
|
||||
// 媒体查询 最大宽度 850px 时
|
||||
@media screen and (max-width: 850px) {
|
||||
#details {
|
||||
padding: 10px 10px 0;
|
||||
.head-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.head-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.matter {
|
||||
.matter-left {
|
||||
margin-right: 0 !important;
|
||||
.action-bar {
|
||||
margin-right: 0 !important;
|
||||
justify-content: space-around;
|
||||
padding: 0 !important;
|
||||
|
||||
.action-bar-item {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.related {
|
||||
.related-head {
|
||||
padding-left: 14px;
|
||||
}
|
||||
.list {
|
||||
padding: 14px;
|
||||
.item {
|
||||
width: 100% !important;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: calc(100vw - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.answer-discuss {
|
||||
padding: 15px;
|
||||
|
||||
.input-box {
|
||||
.picture-box {
|
||||
width: calc(100vw - 68px);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
.operate {
|
||||
.item {
|
||||
.emoji-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
width: 100vw;
|
||||
height: 300px;
|
||||
top: auto;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments-box {
|
||||
.input-box {
|
||||
.picture-box {
|
||||
width: calc(100vw - 88px);
|
||||
}
|
||||
}
|
||||
|
||||
.comments-item {
|
||||
.comments-header {
|
||||
justify-content: inherit;
|
||||
|
||||
.menu-box {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.child-comments {
|
||||
.input-box {
|
||||
.picture-box {
|
||||
width: calc(100vw - 128px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
#details {
|
||||
.answer-discuss {
|
||||
.comments-box {
|
||||
.comments-item {
|
||||
.comments-header {
|
||||
font-size: 12px;
|
||||
.comments-title {
|
||||
height: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
#details {
|
||||
.answer-discuss {
|
||||
.comments-box {
|
||||
.comments-item {
|
||||
.comments-header {
|
||||
.comment-icon,
|
||||
.like-box {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
27
css/editor.css
Normal file
27
css/editor.css
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user