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

feat: 新增编辑页面和分享功能，优化链接跳转和样式

Browse Source 
- 添加edit.html编辑页面及相关CSS样式
- 实现内容编辑区的富文本功能
- 为item-bottom组件添加分享功能，包括复制链接和微信转发
- 更新多个组件的链接跳转地址
- 优化CSS样式，包括圆角、阴影和hover效果
- 修复部分样式问题和布局错位
- 移除不再使用的section-index.html文件
This commit is contained in:
A1300399510
2025-11-03 00:42:30 +08:00
parent 38028167c0
commit 7bdeff17f6
51 changed files with 2414 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
css/details.css
View File

@@ -44,6 +44,9 @@
font-size: 13px;
color: #aaaaaa;
}
#details .matter .matter-left .matter-head .operate {
position: relative;
}
#details .matter .matter-left .matter-head .operate .view {
font-size: 12px;
color: #aaaaaa;
@@ -65,6 +68,53 @@
width: 18px;
height: 18px;
}
#details .matter .matter-left .matter-head .operate .mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
}
#details .matter .matter-left .matter-head .operate .operate {
position: absolute;
top: 23px;
right: 0;
width: 100px;
background-color: #f2f2f2;
border-radius: 8px;
padding: 5px;
z-index: 2;
}
#details .matter .matter-left .matter-head .operate .operate::after {
content: "";
width: calc(100% - 10px);
height: calc(100% - 10px);
position: absolute;
top: 50%;
left: 50%;
display: block;
transform: translate(-50%, -50%);
background-color: #fbfbfb;
z-index: -1;
}
#details .matter .matter-left .matter-head .operate .operate .item {
text-align: center;
font-size: 18px;
color: #333333;
padding: 14px 0;
cursor: pointer;
}
#details .matter .matter-left .matter-head .operate .operate .item:first-of-type {
padding-top: 24px;
}
#details .matter .matter-left .matter-head .operate .operate .item:last-of-type {
padding-bottom: 24px;
}
#details .matter .matter-left .matter-head .operate .operate .item:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7;
}
#details .matter .matter-left .label {
padding: 20px 30px 20px;
flex-wrap: wrap;
@@ -140,6 +190,67 @@
#details .matter .matter-left .action-bar .action-bar-item:not(:last-child) {
margin-right: 60px;
}
#details .matter .matter-left .action-bar .action-bar-item.share {
position: relative;
}
#details .matter .matter-left .action-bar .action-bar-item.share:hover .share-box {
display: flex;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box {
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 42px;
width: 130px;
height: 100px;
background-color: #ffffff;
border-radius: 6px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
flex-direction: column;
display: none;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item {
width: 100%;
height: 40px;
color: #555555;
font-size: 14px;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item:hover {
background-color: #f0fafd;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .share-icon {
width: 18px;
height: 18px;
margin-right: 13px;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item.wenxin:hover .QRcode-box {
display: flex;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box {
z-index: 1;
display: none;
position: absolute;
top: 48px;
left: 100%;
width: 140px;
height: 166px;
background-color: #ffffff;
border-radius: 6px;
padding: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
flex-direction: column;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .QRcode {
width: 100px;
height: 100px;
margin-bottom: 4px;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item .QRcode-box .text {
color: #555555;
font-size: 14px;
line-height: normal;
}
#details .matter .matter-left .related .related-head {
padding-left: 30px;
padding-top: 20px;
@@ -320,6 +431,7 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
#details .coins-area .coins-box {
width: 624px;

130
css/details.less
View File

@@ -50,6 +50,7 @@
}
.operate {
position: relative;
.view {
.icon {
width: 13px;
@@ -74,6 +75,60 @@
height: 18px;
}
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
background-color: rgba(0, 0, 0, 0.1);
}
.operate {
position: absolute;
top: 23px;
right: 0;
width: 100px;
background-color: rgba(242, 242, 242, 1);
border-radius: 8px;
padding: 5px;
z-index: 2;
&::after {
content: "";
width: calc(100% - 10px);
height: calc(100% - 10px);
position: absolute;
top: 50%;
left: 50%;
display: block;
transform: translate(-50%, -50%);
background-color: rgba(251, 251, 251, 1);
z-index: -1;
}
.item {
text-align: center;
font-size: 18px;
color: #333333;
padding: 14px 0;
cursor: pointer;
&:first-of-type {
padding-top: 24px;
}
&:last-of-type {
padding-bottom: 24px;
}
&:not(:last-of-type) {
border-bottom: 1px dotted #d7d7d7;
}
}
}
}
}
@@ -161,6 +216,80 @@
&:not(:last-child) {
margin-right: 60px;
}
&.share {
position: relative;
&:hover {
.share-box {
display: flex;
}
}
}
.share-box {
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 42px;
width: 130px;
height: 100px;
background-color: rgba(255, 255, 255, 1);
border-radius: 6px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392);
flex-direction: column;
display: none;
.share-item {
width: 100%;
height: 40px;
color: #555555;
font-size: 14px;
&:hover {
background-color: rgba(240, 250, 253, 1);
}
.share-icon {
width: 18px;
height: 18px;
margin-right: 13px;
}
&.wenxin:hover {
.QRcode-box {
display: flex;
}
}
.QRcode-box {
z-index: 1;
display: none;
position: absolute;
top: 48px;
left: 100%;
width: 140px;
height: 166px;
background-color: #ffffff;
border-radius: 6px;
padding: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
flex-direction: column;
.QRcode {
width: 100px;
height: 100px;
margin-bottom: 4px;
}
.text {
color: #555555;
font-size: 14px;
line-height: normal;
}
}
}
}
}
}
@@ -380,6 +509,7 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
.coins-box {
width: 624px;

266
css/edit.css Normal file
View File

@@ -0,0 +1,266 @@
#edit {
margin: 0 auto;
}
#edit a {
text-decoration: none;
}
#edit .edit-head {
width: 100%;
height: 60px;
background: linear-gradient(180deg, #ffffff -41%, #eef8f9 96%);
margin-bottom: 20px;
}
#edit .edit-head .edit-head-container {
width: 1200px;
margin: 0 auto;
}
#edit .edit-head .edit-head-container .icon {
width: 135px;
height: 33px;
margin-right: 20px;
}
#edit .edit-head .edit-head-container .dot {
width: 6px;
height: 6px;
background-color: #d35110;
border-radius: 50%;
margin-right: 20px;
}
#edit .edit-head .edit-head-container .title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 18px;
color: #000000;
margin-right: 20px;
}
#edit .edit-head .edit-head-container .hint {
font-size: 13px;
color: #aaaaaa;
}
#edit .edit-head .edit-head-container .avatar {
width: 32px;
height: 32px;
border-radius: 50%;
}
#edit .edit-container {
width: 890px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
margin: 0 auto;
}
#edit .edit-container .title-input {
width: 100%;
height: 100px;
border: none;
outline: none;
border-radius: 10px 10px 0 0;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 24px;
padding: 0 36px;
border-bottom: 1px solid #ebebeb;
}
#edit .edit-container .editor-toolbar {
height: 36px;
background-color: #fbfbfb;
padding-left: 35px;
}
#edit .edit-container .editor-toolbar .toolbar-item {
cursor: pointer;
height: 100%;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #000000;
line-height: 23px;
margin-right: 50px;
position: relative;
}
#edit .edit-container .editor-toolbar .toolbar-item .icon {
width: 16px;
height: 16px;
margin-right: 5px;
}
#edit .edit-container .editor-toolbar .toolbar-item .file {
opacity: 0;
/* 隐藏输入框 */
background: transparent;
border: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
#edit .edit-container .editor-toolbar .toolbar-item .file::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box-mask {
display: block;
}
#edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box {
display: flex;
}
#edit .edit-container .editor-toolbar .toolbar-item .emoji-box-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.20392157);
display: none;
}
#edit .edit-container .editor-toolbar .toolbar-item .emoji-box {
width: 582px;
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: 50%;
transform: translateX(-50%);
border: 1px solid #ebebeb;
display: none;
flex-wrap: wrap;
font-size: 22px;
padding: 8px;
}
#edit .edit-container .editor-toolbar .toolbar-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: 50%;
transform: translateX(-50%);
}
#edit .edit-container .editor-toolbar .toolbar-item .emoji-box .emoji-icon {
margin: 5px;
cursor: pointer;
}
#edit .edit-container .content-input {
min-height: 509px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-size: 15px;
color: #555555;
line-height: 26px;
outline: none;
padding: 36px 36px 20px;
white-space: break-spaces;
position: relative;
}
#edit .edit-container .content-input.empty:before {
content: "输入正文";
pointer-events: none;
position: absolute;
top: 36px;
left: 36px;
color: #757575;
}
#edit .edit-container .content-input img {
display: block;
max-width: 100%;
height: 220px;
}
#edit .edit-container .content-input h2 {
color: #000000;
font-size: 18px;
line-height: 30px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
}
#edit .edit-container .content-input .blue {
color: #026277;
margin: 0 4px;
}
#edit .edit-container .content-input .fill {
width: 100%;
height: 26px;
}
#edit .edit-container .tags-list {
padding: 0 36px;
margin-bottom: 10px;
flex-wrap: wrap;
}
#edit .edit-container .tags-list .tag-item {
margin-bottom: 10px;
height: 32px;
line-height: 32px;
background-color: #f6f6f6;
border-radius: 73px;
padding: 0 14px;
font-size: 14px;
color: #606060;
margin-right: 10px;
cursor: pointer;
}
#edit .edit-container .action-buttons {
border-top: 1px solid #ebebeb;
padding: 0 36px;
justify-content: space-between;
}
#edit .edit-container .action-buttons .left-section {
font-size: 14px;
color: #333;
cursor: pointer;
}
#edit .edit-container .action-buttons .left-section .icon-pitch {
width: 16px;
height: 16px;
margin-right: 5px;
}
#edit .edit-container .action-buttons .left-section .icon {
width: 16px;
height: 16px;
border: 1px solid #797979;
margin-right: 5px;
}
#edit .edit-container .action-buttons .right-section {
height: 102px;
}
#edit .edit-container .action-buttons .right-section .draft-btn,
#edit .edit-container .action-buttons .right-section .publish-btn {
font-size: 14px;
border-radius: 8px;
cursor: pointer;
}
#edit .edit-container .action-buttons .right-section .draft-btn {
width: 100px;
height: 42px;
line-height: 42px;
background-color: rgba(242, 242, 242, 0.69803922);
color: #7f7f7f;
font-size: 14px;
margin-right: 15px;
}
#edit .edit-container .action-buttons .right-section .draft-btn .icon {
width: 20px;
height: 20px;
margin-right: 6px;
}
#edit .edit-container .action-buttons .right-section .publish-btn {
width: 150px;
height: 40px;
line-height: 40px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
background-color: #50e3c2;
}

302
css/edit.less Normal file
View File

@@ -0,0 +1,302 @@
#edit {
margin: 0 auto;
a {
text-decoration: none;
}
.edit-head {
width: 100%;
height: 60px;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) -41%, rgba(238, 248, 249, 1) 96%);
margin-bottom: 20px;
.edit-head-container {
width: 1200px;
margin: 0 auto;
.icon {
width: 135px;
height: 33px;
margin-right: 20px;
}
.dot {
width: 6px;
height: 6px;
background-color: #d35110;
border-radius: 50%;
margin-right: 20px;
}
.title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 18px;
color: #000000;
margin-right: 20px;
}
.hint {
font-size: 13px;
color: #aaaaaa;
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
;
}
}
}
.edit-container {
width: 890px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
margin: 0 auto;
.title-input {
width: 100%;
height: 100px;
border: none;
outline: none;
border-radius: 10px 10px 0 0;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 24px;
padding: 0 36px;
border-bottom: 1px solid #ebebeb;
}
.editor-toolbar {
height: 36px;
background-color: rgba(251, 251, 251, 1);
padding-left: 35px;
.toolbar-item {
.icon {
width: 16px;
height: 16px;
margin-right: 5px;
}
cursor: pointer;
height: 100%;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #000000;
line-height: 23px;
margin-right: 50px;
position: relative;
.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;
}
}
&.expression.pitch {
.emoji-box-mask {
display: block;
}
.emoji-box {
display: flex;
}
}
.emoji-box-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.20392157);
display: none;
}
.emoji-box {
width: 582px;
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: 50%;
transform: translateX(-50%);
border: 1px solid #ebebeb;
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: 50%;
transform: translateX(-50%);
}
.emoji-icon {
margin: 5px;
cursor: pointer;
}
}
}
}
.content-input {
min-height: 509px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-size: 15px;
color: #555555;
line-height: 26px;
outline: none;
padding: 36px 36px 20px;
white-space: break-spaces;
position: relative;
&.empty:before {
content: "输入正文";
pointer-events: none;
position: absolute;
top: 36px;
left: 36px;
color: rgba(117, 117, 117, 1);
}
img {
display: block;
max-width: 100%;
height: 220px;
}
h2 {
color: #000000;
font-size: 18px;
line-height: 30px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
}
.blue {
color: #026277;
margin: 0 4px;
}
.fill {
width: 100%;
height: 26px;
}
}
.tags-list {
padding: 0 36px;
margin-bottom: 10px;
flex-wrap: wrap;
.tag-item {
margin-bottom: 10px;
height: 32px;
line-height: 32px;
background-color: rgba(246, 246, 246, 1);
border-radius: 73px;
padding: 0 14px;
font-size: 14px;
color: #606060;
margin-right: 10px;
cursor: pointer;
}
}
.action-buttons {
border-top: 1px solid #ebebeb;
padding: 0 36px;
justify-content: space-between;
.left-section {
.icon-pitch {
width: 16px;
height: 16px;
margin-right: 5px;
}
.icon {
width: 16px;
height: 16px;
border: 1px solid #797979;
margin-right: 5px;
}
font-size: 14px;
color: #333;
cursor: pointer;
}
.right-section {
height: 102px;
.draft-btn,
.publish-btn {
font-size: 14px;
border-radius: 8px;
cursor: pointer;
}
.draft-btn {
width: 100px;
height: 42px;
line-height: 42px;
background-color: rgba(242, 242, 242, 0.698039215686274);
color: #7f7f7f;
font-size: 14px;
margin-right: 15px;
.icon {
width: 20px;
height: 20px;
margin-right: 6px;
}
}
.publish-btn {
width: 150px;
height: 40px;
line-height: 40px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
background-color: rgba(80, 227, 194, 1);
}
}
}
}
}

43
css/index.css
View File

@@ -304,10 +304,8 @@
margin-bottom: 10px;
}
#appIndex .header-content-box .header-content-right .group-box .group {
background-color: #f6f6f6;
flex-wrap: wrap;
height: 100%;
border-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item {
width: 50%;
@@ -316,10 +314,23 @@
color: #333;
text-decoration: none;
flex-direction: column;
overflow: hidden;
background-color: #f6f6f6;
font-size: 14px;
text-align: center;
line-height: 22px;
position: relative;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(1) {
border-top-left-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(2) {
border-top-right-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(3) {
border-bottom-left-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(4) {
border-bottom-right-radius: 8px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(odd) {
border-right: 1px solid #ebebeb;
@@ -343,6 +354,31 @@
#appIndex .header-content-box .header-content-right .group-box .group .group-item .subtitle {
color: #555555;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item:hover .QRcode-box {
display: flex;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box {
z-index: 1;
display: none;
position: absolute;
top: 64px;
width: 140px;
height: 166px;
background-color: #ffffff;
border-radius: 6px;
padding: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
flex-direction: column;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box .QRcode {
width: 100px;
height: 100px;
margin-bottom: 4px;
}
#appIndex .header-content-box .header-content-right .group-box .group .group-item .QRcode-box .text {
color: #555555;
font-size: 14px;
}
#appIndex .header-content-box .header-content-right .offer-box {
width: 240px;
height: 214px;
@@ -447,7 +483,6 @@
border-radius: 10px;
}
#appIndex .matter .sidebar .side-box {
width: 100%;
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;

50
css/index.less
View File

@@ -362,10 +362,8 @@
margin-bottom: 10px;
.group {
background-color: rgba(246, 246, 246, 1);
flex-wrap: wrap;
height: 100%;
border-radius: 8px;
.group-item {
width: 50%;
@@ -375,7 +373,22 @@
color: #333;
text-decoration: none;
flex-direction: column;
overflow: hidden;
background-color: rgba(246, 246, 246, 1);
&:nth-child(1) {
border-top-left-radius: 8px;
}
&:nth-child(2) {
border-top-right-radius: 8px;
}
&:nth-child(3) {
border-bottom-left-radius: 8px;
}
&:nth-child(4) {
border-bottom-right-radius: 8px;
}
// overflow: hidden;
&:nth-child(odd) {
border-right: 1px solid #ebebeb;
@@ -399,6 +412,7 @@
text-align: center;
line-height: 22px;
position: relative;
.title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
@@ -408,6 +422,34 @@
.subtitle {
color: #555555;
}
&:hover .QRcode-box {
display: flex;
}
.QRcode-box {
z-index: 1;
display: none;
position: absolute;
top: 64px;
width: 140px;
height: 166px;
background-color: rgba(255, 255, 255, 1);
border-radius: 6px;
padding: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392);
flex-direction: column;
.QRcode {
width: 100px;
height: 100px;
margin-bottom: 4px;
}
.text {
color: #555555;
font-size: 14px;
}
}
}
}
}
@@ -537,7 +579,7 @@
}
.side-box {
width: 100%;
width: 291px;
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;

85
css/public.css
View File

@@ -6,6 +6,9 @@
font-weight: 400;
font-style: normal;
}
a {
text-decoration: none;
}
body {
background-color: #eef2f5;
}
@@ -53,6 +56,7 @@ body {
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 18px 20px 0;
display: block;
}
.item-box .item-head {
margin-bottom: 14px;
@@ -529,7 +533,9 @@ body {
justify-content: flex-end;
}
.item-box .bottom .bottom-item {
height: 100%;
cursor: pointer;
position: relative;
}
.item-box .bottom .bottom-item:not(:last-child) {
margin-right: 60px;
@@ -547,6 +553,63 @@ body {
width: 18px;
height: 18px;
}
.item-box .bottom .bottom-item.share:hover .share-box {
display: flex;
}
.item-box .bottom .bottom-item .share-box {
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 42px;
width: 130px;
height: 100px;
background-color: #ffffff;
border-radius: 6px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
flex-direction: column;
display: none;
}
.item-box .bottom .bottom-item .share-box .share-item {
width: 100%;
height: 40px;
color: #555555;
font-size: 14px;
}
.item-box .bottom .bottom-item .share-box .share-item:hover {
background-color: #f0fafd;
}
.item-box .bottom .bottom-item .share-box .share-item .share-icon {
width: 18px;
height: 18px;
margin-right: 13px;
}
.item-box .bottom .bottom-item .share-box .share-item.wenxin:hover .QRcode-box {
display: flex;
}
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box {
z-index: 1;
display: none;
position: absolute;
top: 48px;
left: 100%;
width: 140px;
height: 166px;
background-color: #ffffff;
border-radius: 6px;
padding: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
flex-direction: column;
}
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box .QRcode {
width: 100px;
height: 100px;
margin-bottom: 4px;
}
.item-box .bottom .bottom-item .share-box .share-item .QRcode-box .text {
color: #555555;
font-size: 14px;
}
/* offer 录取结果 */
.results.r1 {
background-color: #76c45e;
@@ -1200,6 +1263,27 @@ body {
.box-interviewexperience .slideshow-box .tab-list .tab-item.pitch::before {
background-color: #789feb;
}
.posts-box .box-newest-head {
font-weight: 650;
font-size: 16px;
color: #000000;
padding: 0;
height: auto;
line-height: normal;
padding: 20px 16px 0;
}
.posts-box .box-newest-head .icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.posts-box .slideshow-content {
margin-left: 10px;
transition: all 0.3s;
}
.posts-box.box-essence .slideshow-content {
margin-left: -263px;
}
.box-newest .slideshow-box .tab-list .tab-item.pitch::before {
background: linear-gradient(to right, #6ac83e, #6ad2cb);
}
@@ -1227,6 +1311,7 @@ body {
background: #ffffff;
position: relative;
margin-bottom: 12px;
overflow: hidden;
}
.box-essence .newest-side-box .bounding,
.box-newest .essence-side-box .bounding {

109
css/public.less
View File

@@ -7,6 +7,10 @@
font-style: normal;
}
a {
text-decoration: none;
}
body {
background-color: rgba(238, 242, 245, 1);
}
@@ -63,6 +67,7 @@ body {
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
padding: 18px 20px 0;
display: block;
.item-head {
margin-bottom: 14px;
@@ -633,6 +638,7 @@ body {
justify-content: flex-end;
.bottom-item {
height: 100%;
cursor: pointer;
&:not(:last-child) {
margin-right: 60px;
@@ -655,6 +661,80 @@ body {
height: 18px;
}
}
position: relative;
&.share {
&:hover {
.share-box {
display: flex;
}
}
}
.share-box {
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 42px;
width: 130px;
height: 100px;
background-color: rgba(255, 255, 255, 1);
border-radius: 6px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392);
flex-direction: column;
display: none;
.share-item {
width: 100%;
height: 40px;
color: #555555;
font-size: 14px;
&:hover {
background-color: rgba(240, 250, 253, 1);
}
.share-icon {
width: 18px;
height: 18px;
margin-right: 13px;
}
&.wenxin:hover {
.QRcode-box {
display: flex;
}
}
.QRcode-box {
z-index: 1;
display: none;
position: absolute;
top: 48px;
left: 100%;
width: 140px;
height: 166px;
background-color: #ffffff;
border-radius: 6px;
padding: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745);
flex-direction: column;
.QRcode {
width: 100px;
height: 100px;
margin-bottom: 4px;
}
.text {
color: #555555;
font-size: 14px;
}
}
}
}
}
}
}
@@ -1426,6 +1506,34 @@ body {
background-color: #789feb;
}
.posts-box {
.box-newest-head {
font-weight: 650;
font-size: 16px;
color: #000000;
padding: 0;
height: auto;
line-height: normal;
padding: 20px 16px 0;
.icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
}
.slideshow-content {
margin-left: 10px;
transition: all 0.3s;
}
&.box-essence {
.slideshow-content {
margin-left: -263px;
}
}
}
.box-newest .slideshow-box .tab-list .tab-item.pitch::before {
background: linear-gradient(to right, #6ac83e, #6ad2cb);
}
@@ -1458,6 +1566,7 @@ body {
background: #ffffff;
position: relative;
margin-bottom: 12px;
overflow: hidden;
}
.box-essence .newest-side-box .bounding,

53
css/section-index.css → css/section.css
View File

@@ -71,7 +71,7 @@
border-radius: 16px;
z-index: -1;
}
#sectionIndex .matter .matter-content .info {
#sectionIndex .matter .matter-content .info-box {
width: 1035px;
background: -webkit-linear-gradient(270.53908529deg, #ffffff 2%, #ebf8f9 98%);
background: -moz-linear-gradient(179.46091471deg, #ffffff 2%, #ebf8f9 98%);
@@ -83,13 +83,13 @@
padding-bottom: 34px;
margin-bottom: 20px;
}
#sectionIndex .matter .matter-content .info .img {
#sectionIndex .matter .matter-content .info-box .img {
width: 80px;
height: 80px;
border-radius: 10px;
margin-right: 20px;
}
#sectionIndex .matter .matter-content .info .right .title {
#sectionIndex .matter .matter-content .info-box .right .title {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
@@ -98,7 +98,7 @@
margin-bottom: 15px;
margin-top: 4px;
}
#sectionIndex .matter .matter-content .info .right .link {
#sectionIndex .matter .matter-content .info-box .right .link {
flex-wrap: wrap;
border-top: 1px dotted #d7d7d7;
border-bottom: 1px dotted #d7d7d7;
@@ -106,38 +106,38 @@
margin-bottom: 28px;
width: fit-content;
}
#sectionIndex .matter .matter-content .info .right .link .item {
#sectionIndex .matter .matter-content .info-box .right .link .item {
padding: 12px 0;
}
#sectionIndex .matter .matter-content .info .right .link .item:not(:last-child) {
#sectionIndex .matter .matter-content .info-box .right .link .item:not(:last-child) {
margin-right: 72px;
}
#sectionIndex .matter .matter-content .info .right .link .item .text {
#sectionIndex .matter .matter-content .info-box .right .link .item .text {
font-size: 14px;
color: #333333;
margin-right: 8px;
}
#sectionIndex .matter .matter-content .info .right .link .item .icon {
#sectionIndex .matter .matter-content .info-box .right .link .item .icon {
width: 12px;
height: 12px;
}
#sectionIndex .matter .matter-content .info .right .bottom {
#sectionIndex .matter .matter-content .info-box .right .bottom {
justify-content: space-between;
margin-right: 20px;
}
#sectionIndex .matter .matter-content .info .right .bottom .data {
#sectionIndex .matter .matter-content .info-box .right .bottom .data {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
color: #555555;
font-size: 13px;
}
#sectionIndex .matter .matter-content .info .right .bottom .data .sum {
#sectionIndex .matter .matter-content .info-box .right .bottom .data .sum {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
color: #000000;
margin: 0 5px;
}
#sectionIndex .matter .matter-content .info .right .bottom .btn {
#sectionIndex .matter .matter-content .info-box .right .bottom .btn {
width: 125px;
height: 32px;
background-color: #50e3c2;
@@ -146,7 +146,7 @@
color: #333;
cursor: pointer;
}
#sectionIndex .matter .matter-content .info .right .bottom .btn .icon {
#sectionIndex .matter .matter-content .info-box .right .bottom .btn .icon {
width: 16px;
height: 16px;
margin-right: 3px;
@@ -258,9 +258,30 @@
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box {
margin-bottom: 12px;
}
#sectionIndex .matter .matter-content .details-box .side-box {
#sectionIndex .matter .matter-content .details-box .adv {
display: block;
width: 291px;
height: 300px;
background-color: #ecf9fa;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
}
#sectionIndex .matter .matter-content .details-box .adv .adv-icon {
width: 291px;
height: 220px;
border-radius: 10px;
}
#sectionIndex .matter .matter-content .details-box .side-box {
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px;
}
#sectionIndex .matter .matter-content .details-box .side-box.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
#sectionIndex .matter .matter-content .details-box .side-box.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
#sectionIndex .matter .matter-content .details-box .side-box.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}

40
css/section-index.less → css/section.less
View File

@@ -77,7 +77,7 @@
}
.matter-content {
.info {
.info-box {
width: 1035px;
background: -webkit-linear-gradient(270.539085289936deg, rgba(255, 255, 255, 1) 2%, rgba(235, 248, 249, 1) 98%);
background: -moz-linear-gradient(179.460914710064deg, rgba(255, 255, 255, 1) 2%, rgba(235, 248, 249, 1) 98%);
@@ -287,12 +287,46 @@
}
}
// .side-box {
// width: 291px;
// height: 300px;
// background-color: rgba(236, 249, 250, 1);
// border-radius: 10px;
// }
.adv {
display: block;
width: 291px;
height: 220px;
margin-bottom: 12px;
cursor: pointer;
.adv-icon {
width: 291px;
height: 220px;
border-radius: 10px;
}
}
// .sidebar {
.side-box {
width: 291px;
height: 300px;
background-color: rgba(236, 249, 250, 1);
padding: 17px 10px 10px;
margin-bottom: 12px;
width: 291px;
border-radius: 10px;
&.offer-side-box {
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
}
&.vote-side-box {
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
}
&.interviewexperience-side-box {
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
}
}
// }
}
}
}