diff --git a/css/details.css b/css/details.css
index 235ea08..46711ea 100644
--- a/css/details.css
+++ b/css/details.css
@@ -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;
diff --git a/css/details.less b/css/details.less
index 01ebc93..b4f3f18 100644
--- a/css/details.less
+++ b/css/details.less
@@ -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;
diff --git a/css/edit.css b/css/edit.css
new file mode 100644
index 0000000..1b5b2bc
--- /dev/null
+++ b/css/edit.css
@@ -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;
+}
diff --git a/css/edit.less b/css/edit.less
new file mode 100644
index 0000000..b33bf7a
--- /dev/null
+++ b/css/edit.less
@@ -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);
+ }
+ }
+ }
+ }
+}
diff --git a/css/index.css b/css/index.css
index 07e0652..0746044 100644
--- a/css/index.css
+++ b/css/index.css
@@ -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;
diff --git a/css/index.less b/css/index.less
index ebb4f4f..5109d20 100644
--- a/css/index.less
+++ b/css/index.less
@@ -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;
diff --git a/css/public.css b/css/public.css
index 6799ed7..27c57d5 100644
--- a/css/public.css
+++ b/css/public.css
@@ -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 {
diff --git a/css/public.less b/css/public.less
index 14097be..e458ec2 100644
--- a/css/public.less
+++ b/css/public.less
@@ -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,
diff --git a/css/section-index.css b/css/section.css
similarity index 79%
rename from css/section-index.css
rename to css/section.css
index d8ba7b2..5a1ae9b 100644
--- a/css/section-index.css
+++ b/css/section.css
@@ -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%);
+}
diff --git a/css/section-index.less b/css/section.less
similarity index 89%
rename from css/section-index.less
rename to css/section.less
index a9b344e..52547af 100644
--- a/css/section-index.less
+++ b/css/section.less
@@ -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%);
+ }
}
+ // }
}
}
}
diff --git a/edit.html b/edit.html
new file mode 100644
index 0000000..e36dfd4
--- /dev/null
+++ b/edit.html
@@ -0,0 +1,86 @@
+
+
+
+
+
+
发布帖子 - 轻论坛
+
+
+
+
+
+
+
+
+
+
+
+
+
发帖
+
发帖奖励 3 个寄托币/篇，每天最高奖励3篇
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/copy-black-icon.png b/img/copy-black-icon.png
new file mode 100644
index 0000000..dd2f033
Binary files /dev/null and b/img/copy-black-icon.png differ
diff --git a/img/draft-icon.png b/img/draft-icon.png
new file mode 100644
index 0000000..f0346f1
Binary files /dev/null and b/img/draft-icon.png differ
diff --git a/img/edit-logo-icon.png b/img/edit-logo-icon.png
new file mode 100644
index 0000000..3658796
Binary files /dev/null and b/img/edit-logo-icon.png differ
diff --git a/img/essence.png b/img/essence.png
new file mode 100644
index 0000000..f9c8fa0
Binary files /dev/null and b/img/essence.png differ
diff --git a/img/img-icon.png b/img/img-icon.png
new file mode 100644
index 0000000..33d6552
Binary files /dev/null and b/img/img-icon.png differ
diff --git a/img/mj-index-icon.png b/img/mj-index-icon.png
new file mode 100644
index 0000000..fedbfd8
Binary files /dev/null and b/img/mj-index-icon.png differ
diff --git a/img/newest-icon.png b/img/newest-icon.png
new file mode 100644
index 0000000..c7bb51e
Binary files /dev/null and b/img/newest-icon.png differ
diff --git a/img/offer-index-icon.png b/img/offer-index-icon.png
new file mode 100644
index 0000000..c2446b1
Binary files /dev/null and b/img/offer-index-icon.png differ
diff --git a/img/smiling-face-round-black.png b/img/smiling-face-round-black.png
new file mode 100644
index 0000000..06bf727
Binary files /dev/null and b/img/smiling-face-round-black.png differ
diff --git a/img/t-icon.png b/img/t-icon.png
new file mode 100644
index 0000000..5ad6f1f
Binary files /dev/null and b/img/t-icon.png differ
diff --git a/img/tick-box.svg b/img/tick-box.svg
new file mode 100644
index 0000000..b7d74f4
--- /dev/null
+++ b/img/tick-box.svg
@@ -0,0 +1,6 @@
+
+
\ No newline at end of file
diff --git a/img/vote-index-icon.png b/img/vote-index-icon.png
new file mode 100644
index 0000000..d760b54
Binary files /dev/null and b/img/vote-index-icon.png differ
diff --git a/img/weixin-icon.png b/img/weixin-icon.png
new file mode 100644
index 0000000..3a25cc0
Binary files /dev/null and b/img/weixin-icon.png differ
diff --git a/index.html b/index.html
index 0c5adf8..650bd86 100644
--- a/index.html
+++ b/index.html
@@ -1,291 +1,273 @@
+
+
+
+
论坛首页
+
+
+
+
+
-
-
-
-
论坛首页
-
-
-
-
-
+
+
已签到，明天再来 
签到领寄托币 
GO 
热门搜索 
热门标签 
+ 最新
+ 
+ 精华阅读
+ 
+ 段落标题
+ 
+ 图片
+
+ 
+ 表情
+
+ 
+
+ 
+ 存草稿
+ 
- 
- 
我要发帖
- 
-
-
- 
-
-
- 
- 
-
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
- 
- 
+ 
+ 
+