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

feat: 新增抱团组件和申请助手弹窗组件

Browse Source 
新增huddle-box和helper-pop组件，包含相关图片资源和样式调整
修复item-mj组件中itemBottom导入错误
优化移动端样式适配
更新sectionV2页面引入新组件
补充公共样式和动画效果
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-19 19:04:34 +08:00
parent 7e830d9dcb
commit acf03efaf0
34 changed files with 2788 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
css/public.css
View File

@@ -57,7 +57,6 @@ body {
border-radius: 10px;
padding: 18px 20px 0;
display: block;
overflow: hidden;
}
.item-box .item-head {
margin-bottom: 14px;
@@ -2184,3 +2183,342 @@ td {
padding: 0 5px;
}
}
.huddle-box {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.70588235);
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
animation: slidebj 0.5s forwards;
z-index: 10002;
}
.huddle-box .box {
width: 100vw;
height: 719px;
border-radius: 20px 20px 0 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.10196078);
animation: slideUp 0.5s forwards;
background: linear-gradient(0.0796881deg, #c1a75a 0%, #15a3dc 100%);
position: relative;
flex-direction: column;
align-items: center;
padding-top: 32px;
z-index: 1;
}
.huddle-box .box .code {
width: 100vw;
}
.huddle-box .box .bj {
width: 100vw;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
.huddle-box .box .bj-bottom {
width: 126px;
height: 134px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.huddle-box .box .top {
width: 199px;
height: 36px;
margin-bottom: 13px;
}
.huddle-box .box .title {
width: 311px;
height: 86px;
margin-bottom: 4px;
}
.huddle-box .box .text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 30px;
margin-bottom: 25px;
}
.huddle-box .box .case {
width: 360px;
height: 400px;
background: linear-gradient(180deg, #f2f2f2 0%, #ebebeb 100%);
border-radius: 15px;
flex-direction: column;
align-items: center;
padding-top: 50px;
margin: 0 auto;
}
.huddle-box .box .case .QRcode {
width: 240px;
height: 240px;
background-color: #ffffff;
border-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.18431373);
margin-bottom: 26px;
}
.huddle-box .box .case .QRcode .img {
width: 218px;
height: 218px;
}
.huddle-box .box .case .hint .img {
width: 32px;
height: 32px;
}
.huddle-box .box .case .hint .img.img-left {
transform: rotate(180deg);
}
.huddle-box .box .case .hint .hint-text {
font-size: 18px;
color: #000000;
text-align: center;
line-height: 28px;
margin: 0 15px;
}
@media screen and (max-width: 600px) {
.huddle-box .box {
width: 100vw;
height: calc(719 / 600 * 100vw);
padding-top: calc(32 / 600 * 100vw);
box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.10196078);
animation-name: slideUp;
}
.huddle-box .box .code {
width: 100vw;
}
.huddle-box .box .bj-bottom {
width: calc(126 / 600 * 100vw);
height: calc(134 / 600 * 100vw);
}
.huddle-box .box .top {
width: calc(199 / 600 * 100vw);
height: calc(36 / 600 * 100vw);
margin-bottom: calc(13 / 600 * 100vw);
}
.huddle-box .box .title {
width: calc(311 / 600 * 100vw);
height: calc(86 / 600 * 100vw);
margin-bottom: calc(4 / 600 * 100vw);
}
.huddle-box .box .text {
font-size: calc(20 / 600 * 100vw);
line-height: calc(30 / 600 * 100vw);
margin-bottom: calc(25 / 600 * 100vw);
}
.huddle-box .box .case {
width: calc(360 / 600 * 100vw);
height: calc(400 / 600 * 100vw);
padding-top: calc(50 / 600 * 100vw);
border-radius: calc(15 / 600 * 100vw);
}
.huddle-box .box .case .QRcode {
width: calc(240 / 600 * 100vw);
height: calc(240 / 600 * 100vw);
margin-bottom: calc(26 / 600 * 100vw);
border-radius: calc(10 / 600 * 100vw);
box-shadow: 0 0 calc(5 / 600 * 100vw) rgba(0, 0, 0, 0.18431373);
}
.huddle-box .box .case .QRcode .img {
width: calc(218 / 600 * 100vw);
height: calc(218 / 600 * 100vw);
}
.huddle-box .box .case .hint .img {
width: calc(32 / 600 * 100vw);
height: calc(32 / 600 * 100vw);
}
.huddle-box .box .case .hint .hint-text {
font-size: calc(18 / 600 * 100vw);
line-height: calc(28 / 600 * 100vw);
margin: 0 calc(15 / 600 * 100vw);
}
}
@keyframes slidebj {
0% {
background-color: rgba(0, 0, 0, 0);
}
100% {
background-color: rgba(0, 0, 0, 0.71764706);
}
}
.helper-pop {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.71764706);
position: fixed;
top: 0;
left: 0;
z-index: 1004;
align-items: flex-end;
box-sizing: border-box;
animation: slidebj 0.5s forwards;
display: flex;
justify-content: center;
overflow: hidden;
}
.helper-pop .helper-box {
animation: slideUp 0.5s forwards;
box-sizing: border-box;
flex-direction: column;
width: 100vw;
background: linear-gradient(179.80708565deg, #c1cefa 0%, #e2edfb 28%, #ffffff 60%);
border: none;
border-radius: 20px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10196078);
position: relative;
padding-top: 59px;
display: flex;
align-items: center;
}
.helper-pop .helper-box .cross-grey {
width: 16px;
height: 16px;
position: absolute;
top: 13px;
right: 13px;
padding: 7px;
cursor: pointer;
}
.helper-pop .helper-box .helper-text {
box-sizing: border-box;
height: 103px;
margin: 0 auto 24px;
}
.helper-pop .helper-box .helper-box-box {
box-sizing: border-box;
width: 280px;
background: linear-gradient(139.427577deg, #6589f2 0%, #74b1f0 100%);
border: none;
border-radius: 20px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.17647059);
flex-direction: column;
align-items: center;
padding: 20px 0;
z-index: 1;
margin-bottom: 80px;
display: flex;
}
.helper-pop .helper-box .helper-box-box .helper-box-text {
box-sizing: border-box;
font-size: 16px;
color: #ffffff;
text-align: center;
line-height: 28px;
margin-top: 20px;
}
.helper-pop .helper-box .helper-QRcode-box {
box-sizing: border-box;
width: 240px;
height: 240px;
background-color: #ffffff;
border-radius: 6px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-box-icon {
width: 24px;
height: 24px;
position: absolute;
}
.helper-pop .helper-box .helper-QRcode-box .left-top {
top: 0;
left: 0;
transform: rotate(-90deg);
}
.helper-pop .helper-box .helper-QRcode-box .left-bottom {
bottom: 0;
left: 0;
transform: rotate(180deg);
}
.helper-pop .helper-box .helper-QRcode-box .right-top {
right: 0;
top: 0;
}
.helper-pop .helper-box .helper-QRcode-box .right-bottom {
right: 0;
bottom: 0;
transform: rotate(90deg);
}
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-img {
width: 220px;
height: 220px;
box-sizing: border-box;
}
.helper-pop .helper-box .helper-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 151px;
}
@media screen and (max-width: 600px) {
.helper-pop .helper-box {
width: 100vw;
padding-top: calc(59 / 600 * 100vw);
border-radius: calc(20 / 600 * 100vw);
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
box-shadow: 0px 0px calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.10196078);
}
.helper-pop .helper-box .cross-grey {
width: calc(16 / 600 * 100vw);
height: calc(16 / 600 * 100vw);
top: calc(13 / 600 * 100vw);
right: calc(13 / 600 * 100vw);
padding: calc(7 / 600 * 100vw);
}
.helper-pop .helper-box .helper-text {
height: calc(103 / 600 * 100vw);
margin: 0 auto calc(24 / 600 * 100vw);
}
.helper-pop .helper-box .helper-box-box {
width: calc(280 / 600 * 100vw);
border-radius: calc(20 / 600 * 100vw);
box-shadow: 0px 0px calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.17647059);
padding: calc(20 / 600 * 100vw) 0;
margin-bottom: calc(80 / 600 * 100vw);
}
.helper-pop .helper-box .helper-box-box .helper-box-text {
font-size: calc(16 / 600 * 100vw);
line-height: calc(28 / 600 * 100vw);
margin-top: calc(20 / 600 * 100vw);
}
.helper-pop .helper-box .helper-QRcode-box {
width: calc(240 / 600 * 100vw);
height: calc(240 / 600 * 100vw);
border-radius: calc(6 / 600 * 100vw);
}
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-box-icon {
width: calc(24 / 600 * 100vw);
height: calc(24 / 600 * 100vw);
}
.helper-pop .helper-box .helper-QRcode-box .helper-QRcode-img {
width: calc(220 / 600 * 100vw);
height: calc(220 / 600 * 100vw);
}
.helper-pop .helper-box .helper-bottom {
height: calc(151 / 600 * 100vw);
}
}
@keyframes slideUp {
0% {
top: 100%;
}
100% {
top: 0;
}
}

396
css/public.less
View File

@@ -2629,3 +2629,399 @@ td {
padding: 0 5px;
}
}
.huddle-box {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.705882352941177);
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
animation: slidebj 0.5s forwards;
z-index: 10002;
.box {
width: 100vw;
height: 719px;
border-radius: 20px 20px 0 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.101960784313725);
animation: slideUp 0.5s forwards;
background: linear-gradient(0.0796881deg, #c1a75a 0%, #15a3dc 100%);
position: relative;
flex-direction: column;
align-items: center;
padding-top: 32px;
z-index: 1;
.code {
width: 100vw;
}
.bj {
width: 100vw;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
.bj-bottom {
width: 126px;
height: 134px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.top {
width: 199px;
height: 36px;
margin-bottom: 13px;
}
.title {
width: 311px;
height: 86px;
margin-bottom: 4px;
}
.text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 30px;
margin-bottom: 25px;
}
.case {
width: 360px;
height: 400px;
background: linear-gradient(180deg, rgba(242, 242, 242, 1) 0%, rgba(235, 235, 235, 1) 100%);
border-radius: 15px;
flex-direction: column;
align-items: center;
padding-top: 50px;
margin: 0 auto;
.QRcode {
width: 240px;
height: 240px;
background-color: rgba(255, 255, 255, 1);
border-color: rgba(242, 242, 242, 1);
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.184313725490196);
margin-bottom: 26px;
.img {
width: 218px;
height: 218px;
}
}
.hint {
.img {
width: 32px;
height: 32px;
&.img-left {
transform: rotate(180deg);
}
}
.hint-text {
font-size: 18px;
color: #000000;
text-align: center;
line-height: 28px;
margin: 0 15px;
}
}
}
}
@media screen and (max-width: 600px) {
.box {
width: 100vw;
height: calc(719 / 600 * 100vw);
padding-top: calc(32 / 600 * 100vw);
// border-radius: calc(30 / 600 * 100vw) calc(30 / 600 * 100vw) 0 0;
box-shadow: 0 0 calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.101960784313725);
animation-name: slideUp;
.code {
width: 100vw;
}
.bj-bottom {
width: calc(126 / 600 * 100vw);
height: calc(134 / 600 * 100vw);
}
.top {
width: calc(199 / 600 * 100vw);
height: calc(36 / 600 * 100vw);
margin-bottom: calc(13 / 600 * 100vw);
}
.title {
width: calc(311 / 600 * 100vw);
height: calc(86 / 600 * 100vw);
margin-bottom: calc(4 / 600 * 100vw);
}
.text {
font-size: calc(20 / 600 * 100vw);
line-height: calc(30 / 600 * 100vw);
margin-bottom: calc(25 / 600 * 100vw);
}
.case {
width: calc(360 / 600 * 100vw);
height: calc(400 / 600 * 100vw);
padding-top: calc(50 / 600 * 100vw);
border-radius: calc(15 / 600 * 100vw);
.QRcode {
width: calc(240 / 600 * 100vw);
height: calc(240 / 600 * 100vw);
margin-bottom: calc(26 / 600 * 100vw);
border-radius: calc(10 / 600 * 100vw);
box-shadow: 0 0 calc(5 / 600 * 100vw) rgba(0, 0, 0, 0.184313725490196);
.img {
width: calc(218 / 600 * 100vw);
height: calc(218 / 600 * 100vw);
}
}
.hint {
.img {
width: calc(32 / 600 * 100vw);
height: calc(32 / 600 * 100vw);
}
.hint-text {
font-size: calc(18 / 600 * 100vw);
line-height: calc(28 / 600 * 100vw);
margin: 0 calc(15 / 600 * 100vw);
}
}
}
}
}
}
@keyframes slidebj {
0% {
background-color: rgba(0, 0, 0, 0);
}
100% {
background-color: rgba(0, 0, 0, 0.717647058823529);
}
}
.helper-pop {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.717647058823529);
position: fixed;
top: 0;
left: 0;
z-index: 1004;
align-items: flex-end;
box-sizing: border-box;
animation: slidebj 0.5s forwards;
display: flex;
justify-content: center;
overflow: hidden;
.helper-box {
animation: slideUp 0.5s forwards;
box-sizing: border-box;
flex-direction: column;
width: 100vw;
background: linear-gradient(179.807085646467deg, rgba(193, 206, 250, 1) 0%, rgba(226, 237, 251, 1) 28%, rgba(255, 255, 255, 1) 60%);
border: none;
border-radius: 20px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
position: relative;
padding-top: 59px;
display: flex;
align-items: center;
.cross-grey {
width: 16px;
height: 16px;
position: absolute;
top: 13px;
right: 13px;
padding: 7px;
cursor: pointer;
}
.helper-text {
box-sizing: border-box;
height: 103px;
margin: 0 auto 24px;
}
.helper-box-box {
box-sizing: border-box;
width: 280px;
background: linear-gradient(139.427576997557deg, rgba(101, 137, 242, 1) 0%, rgba(116, 177, 240, 1) 100%);
border: none;
border-radius: 20px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.176470588235294);
flex-direction: column;
align-items: center;
padding: 20px 0;
z-index: 1;
margin-bottom: 80px;
display: flex;
.helper-box-text {
box-sizing: border-box;
font-size: 16px;
color: #ffffff;
text-align: center;
line-height: 28px;
margin-top: 20px;
}
}
.helper-QRcode-box {
box-sizing: border-box;
width: 240px;
height: 240px;
background-color: rgba(255, 255, 255, 1);
border-radius: 6px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.helper-QRcode-box-icon {
width: 24px;
height: 24px;
position: absolute;
}
.left-top {
top: 0;
left: 0;
transform: rotate(-90deg);
}
.left-bottom {
bottom: 0;
left: 0;
transform: rotate(180deg);
}
.right-top {
right: 0;
top: 0;
}
.right-bottom {
right: 0;
bottom: 0;
transform: rotate(90deg);
}
.helper-QRcode-img {
width: 220px;
height: 220px;
box-sizing: border-box;
}
}
.helper-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 151px;
}
}
@media screen and (max-width: 600px) {
.helper-box {
width: 100vw;
padding-top: calc(59 / 600 * 100vw);
border-radius: calc(20 / 600 * 100vw);
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
box-shadow: 0px 0px calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.101960784313725);
.cross-grey {
width: calc(16 / 600 * 100vw);
height: calc(16 / 600 * 100vw);
top: calc(13 / 600 * 100vw);
right: calc(13 / 600 * 100vw);
padding: calc(7 / 600 * 100vw);
}
.helper-text {
height: calc(103 / 600 * 100vw);
margin: 0 auto calc(24 / 600 * 100vw);
}
.helper-box-box {
width: calc(280 / 600 * 100vw);
border-radius: calc(20 / 600 * 100vw);
box-shadow: 0px 0px calc(15 / 600 * 100vw) rgba(0, 0, 0, 0.176470588235294);
padding: calc(20 / 600 * 100vw) 0;
margin-bottom: calc(80 / 600 * 100vw);
.helper-box-text {
font-size: calc(16 / 600 * 100vw);
line-height: calc(28 / 600 * 100vw);
margin-top: calc(20 / 600 * 100vw);
}
}
.helper-QRcode-box {
width: calc(240 / 600 * 100vw);
height: calc(240 / 600 * 100vw);
border-radius: calc(6 / 600 * 100vw);
.helper-QRcode-box-icon {
width: calc(24 / 600 * 100vw);
height: calc(24 / 600 * 100vw);
}
.helper-QRcode-img {
width: calc(220 / 600 * 100vw);
height: calc(220 / 600 * 100vw);
}
}
.helper-bottom {
height: calc(151 / 600 * 100vw);
}
}
}
}
@keyframes slideUp {
0% {
top: 100%;
}
100% {
top: 0;
}
}

86
css/search-tag.css
View File

@@ -7,7 +7,6 @@
}
#search-tag .label-title .icon {
width: 25px;
height: 20px;
margin-right: 12px;
}
#search-tag .label-title .text {
@@ -65,6 +64,63 @@
color: #000000;
margin: 0 10px;
}
#search-tag .quantity .sort-area {
margin-left: auto;
position: relative;
z-index: 1;
}
#search-tag .quantity .sort-area .sort-head {
cursor: pointer;
}
#search-tag .quantity .sort-area .sort-head .text {
font-size: 14px;
color: #555555;
line-height: 26px;
margin-right: 6px;
}
#search-tag .quantity .sort-area .sort-head .icon {
width: 8px;
height: 5px;
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
}
#search-tag .quantity .sort-area .sort-head .icon.rotate {
transform: rotate(180deg);
}
#search-tag .quantity .sort-area .sort-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
#search-tag .quantity .sort-area .sort-box {
position: absolute;
top: 28px;
right: 0;
width: 140px;
padding: 0 10px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.16862745);
}
#search-tag .quantity .sort-area .sort-box .item {
font-size: 16px;
color: #555555;
text-align: center;
height: 60px;
line-height: 60px;
cursor: pointer;
}
#search-tag .quantity .sort-area .sort-box .item.pitch {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
color: #d35110;
}
#search-tag .quantity .sort-area .sort-box .item:not(:last-child) {
border-bottom: 1px dotted #d7d7d7;
}
#search-tag .matter {
align-items: flex-start;
}
@@ -131,3 +187,31 @@
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
#search-tag .matter .sidebar-box .recommend-and-essence {
width: 291px;
height: 64px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 0 10px;
justify-content: space-between;
margin-bottom: 12px;
}
#search-tag .matter .sidebar-box .recommend-and-essence .item {
width: 130px;
height: 40px;
background-color: #f6f6f6;
border: 1px solid #f2f2f2;
border-radius: 65px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
cursor: pointer;
}
#search-tag .matter .sidebar-box .recommend-and-essence .item .icon {
width: 20px;
height: 24px;
margin-right: 8px;
}

101
css/search-tag.less
View File

@@ -7,7 +7,7 @@
.icon {
width: 25px;
height: 20px;
// height: 20px;
margin-right: 12px;
}
@@ -74,6 +74,74 @@
color: #000000;
margin: 0 10px;
}
.sort-area {
margin-left: auto;
position: relative;
z-index: 1;
.sort-head {
cursor: pointer;
.text {
font-size: 14px;
color: #555555;
line-height: 26px;
margin-right: 6px;
}
.icon {
width: 8px;
height: 5px;
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
&.rotate {
transform: rotate(180deg);
}
}
}
.sort-mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.sort-box {
position: absolute;
top: 28px;
right: 0;
width: 140px;
padding: 0 10px;
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.168627450980392);
.item {
font-size: 16px;
color: #555555;
text-align: center;
height: 60px;
line-height: 60px;
cursor: pointer;
&.pitch {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
color: #d35110;
}
&:not(:last-child) {
border-bottom: 1px dotted #d7d7d7;
}
}
}
}
}
.matter {
@@ -154,6 +222,37 @@
right: calc((100% - 1200px) / 2);
bottom: 10px;
}
.recommend-and-essence {
width: 291px;
height: 64px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
padding: 0 10px;
justify-content: space-between;
margin-bottom: 12px;
.item {
width: 130px;
height: 40px;
background-color: rgba(246, 246, 246, 1);
border: 1px solid rgba(242, 242, 242, 1);
border-radius: 65px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
cursor: pointer;
.icon {
width: 20px;
height: 24px;
margin-right: 8px;
}
}
}
}
}
}

44
css/search.css
View File

@@ -15,6 +15,7 @@
border: none;
outline: none;
height: 100%;
font-size: 16px;
}
#search .search-box .search-icon {
width: 20px;
@@ -126,3 +127,46 @@
width: 291px;
position: sticky;
}
#search .matter .sidebar-box .recommend-and-essence {
width: 291px;
height: 64px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 10px;
padding: 0 10px;
justify-content: space-between;
margin-bottom: 12px;
}
#search .matter .sidebar-box .recommend-and-essence .item {
width: 130px;
height: 40px;
background-color: #f6f6f6;
border: 1px solid #f2f2f2;
border-radius: 65px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
cursor: pointer;
}
#search .matter .sidebar-box .recommend-and-essence .item .icon {
width: 20px;
height: 24px;
margin-right: 8px;
}
#search .search-no .earth-icon {
width: 239px;
height: 180px;
margin: 0 auto;
}
#search .search-no .input-box {
width: 903px;
height: 60px;
background-color: #ffffff;
border: 1px solid #e9eef2;
border-radius: 6px;
}
#search .search-no .input-box .input {
font-size: 16px;
}

53
css/search.less
View File

@@ -15,6 +15,7 @@
border: none;
outline: none;
height: 100%;
font-size: 16px;
}
.search-icon {
@@ -161,6 +162,58 @@
// left: calc((100% - 1200px) / 2 + 909px);
// bottom: 10px;
// }
.recommend-and-essence {
width: 291px;
height: 64px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
padding: 0 10px;
justify-content: space-between;
margin-bottom: 12px;
.item {
width: 130px;
height: 40px;
background-color: rgba(246, 246, 246, 1);
border: 1px solid rgba(242, 242, 242, 1);
border-radius: 65px;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
cursor: pointer;
.icon {
width: 20px;
height: 24px;
margin-right: 8px;
}
}
}
}
}
.search-no {
.earth-icon {
width: 239px;
height: 180px;
margin: 0 auto;
}
.input-box {
width: 903px;
height: 60px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 6px;
.input {
font-size: 16px;
}
}
}
}

26
css/section.css
View File

@@ -399,4 +399,30 @@
#sectionIndex .matter .sidebar {
display: none;
}
#sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list {
padding-right: 0;
}
#sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item {
width: 100%;
}
#sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item .text {
flex: 1;
}
#sectionIndex .matter .matter-content .info-box .right .link .item {
width: 50%;
}
#sectionIndex .matter .matter-content .info-box .right .link .item:not(:last-child) {
margin: 0;
}
}
@media screen and (max-width: 500px) {
#sectionIndex .matter .matter-content .info-box {
padding-top: 15px;
padding-left: 15px;
}
#sectionIndex .matter .matter-content .info-box .img-box {
width: 70px;
height: 70px;
margin-right: 15px;
}
}

37
css/section.less
View File

@@ -83,6 +83,8 @@
}
.matter-content {
min-width: 0;
.info-box {
width: 100%;
background: -webkit-linear-gradient(270.539085289936deg, rgba(255, 255, 255, 1) 2%, rgba(235, 248, 249, 1) 98%);
@@ -234,6 +236,7 @@
margin-right: 12px;
position: sticky;
z-index: 1;
min-width: 0;
.selectives-box {
width: 100%;
@@ -473,4 +476,38 @@
#sectionIndex .matter .sidebar {
display: none;
}
#sectionIndex .matter .matter-content {
.details-box .content-box .selectives-box .list {
padding-right: 0;
.item {
width: 100%;
.text {
flex: 1;
}
}
}
.info-box .right .link .item {
width: 50%;
&:not(:last-child) {
margin: 0;
}
}
}
}
@media screen and (max-width: 500px) {
#sectionIndex .matter .matter-content .info-box {
padding-top: 15px;
padding-left: 15px;
.img-box {
width: 70px;
height: 70px;
margin-right: 15px;
}
}
}