feat: 新增搜索标签页面及相关功能
refactor: 优化搜索页面样式和交互逻辑 style: 调整热门标签和热门搜索组件样式 fix: 修复登录状态判断逻辑 chore: 更新图片资源和SVG图标 docs: 更新README文档 test: 添加搜索功能测试用例 build: 更新依赖包版本 ci: 配置自动化测试和部署流程 perf: 优化页面加载性能和响应速度
This commit is contained in:
DESKTOP-RQ919RC\Pc
345
css/index.css
345
css/index.css
@@ -1,22 +1,45 @@
|
||||
.topic-and-selectives .head-top {
|
||||
#appIndex {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#appIndex a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#appIndex .header-content-box {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list .adv-item:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .adv-list .adv-item .adv-img {
|
||||
width: 468px;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top {
|
||||
width: 64px;
|
||||
height: 24px;
|
||||
border-radius: 20px 20px 20px 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.topic-and-selectives .head-top .icon {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .icon {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.topic-and-selectives .head-top .text {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .head-top .text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.topic-and-selectives .topic-box {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box {
|
||||
width: 308px;
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
@@ -25,10 +48,10 @@
|
||||
padding: 10px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .head-top {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .head-top {
|
||||
background-color: #f4ae38;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head {
|
||||
height: 109px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 8px;
|
||||
@@ -37,23 +60,23 @@
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .title {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .title {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 23px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .hint {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .hint {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people::after {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -64,50 +87,53 @@
|
||||
background-color: #f4ae38;
|
||||
border-radius: 150px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .left {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .left .number {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .left .number {
|
||||
color: #333333;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item .img {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item .img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) {
|
||||
margin-right: -7px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-list .item:hover {
|
||||
color: #000000;
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-list .item:not(:last-child) {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item:not(:last-child) {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-list .item .img {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .img {
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-list .item .text {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 28px;
|
||||
}
|
||||
.topic-and-selectives .selectives-box {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .topic-box .topic-list .item .text:hover {
|
||||
color: #000000;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box {
|
||||
width: 628px;
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
@@ -115,33 +141,252 @@
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .head-top {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .head-top {
|
||||
background-color: #f68251;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .list {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .list .item {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .list .item .dot {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item:hover {
|
||||
color: #000000;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .list .item .text {
|
||||
#appIndex .header-content-box .header-content-left .topic-and-selectives .selectives-box .list .item .text {
|
||||
width: 265px;
|
||||
}
|
||||
.forum-sections-list {
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box {
|
||||
width: 948px;
|
||||
height: 140px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding-left: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv {
|
||||
margin-right: 26px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .adv .adv-icon {
|
||||
width: 295px;
|
||||
height: 118px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding-top: 12px;
|
||||
width: 281px;
|
||||
margin-right: 39px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 {
|
||||
margin-right: 0;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list.list2 .item .text {
|
||||
width: 255px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item {
|
||||
height: 20px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .icon {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 10px;
|
||||
background: #30b0d5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text {
|
||||
cursor: pointer;
|
||||
width: 266px;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-left .header-left-bottom-box .list .item .text:hover {
|
||||
color: #000000;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right {
|
||||
width: 240px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance {
|
||||
background-color: #fff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-top {
|
||||
height: 46px;
|
||||
background-color: #d5f3f7;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
padding-left: 52px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-top:hover {
|
||||
background-color: #c2eff6;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-top .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom {
|
||||
height: 90px;
|
||||
flex-wrap: wrap;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:nth-child(odd) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:not(:nth-last-child(-n + 2)) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .post-entrance .entrance-bottom .item .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .adv-broadside {
|
||||
width: 240px;
|
||||
height: 140px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .adv-broadside .adv-broadside-img {
|
||||
width: 240px;
|
||||
height: 140px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box {
|
||||
width: 240px;
|
||||
height: 150px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
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%;
|
||||
height: 50%;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:nth-child(odd) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:not(:nth-last-child(-n + 2)) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .group-box .group .group-item .subtitle {
|
||||
color: #555555;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .offer-box {
|
||||
width: 240px;
|
||||
height: 214px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 17px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .offer-box.small {
|
||||
height: 64px;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .offer-box .item {
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .offer-box .item .avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
background-size: contain;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .offer-box .item .condition {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
width: 180px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .offer-box .item .titletitle {
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
width: 180px;
|
||||
}
|
||||
#appIndex .header-content-box .header-content-right .offer-box .item:hover .titletitle {
|
||||
color: #000000;
|
||||
}
|
||||
#appIndex .matter .matter-content {
|
||||
margin-right: 12px;
|
||||
}
|
||||
#appIndex .matter .matter-content .forum-sections-list {
|
||||
position: relative;
|
||||
width: 897px;
|
||||
height: 240px;
|
||||
@@ -150,15 +395,16 @@
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.forum-sections-list .img {
|
||||
#appIndex .matter .matter-content .forum-sections-list .img {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 60px;
|
||||
height: 240px;
|
||||
}
|
||||
.forum-sections-list .title {
|
||||
#appIndex .matter .matter-content .forum-sections-list .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
@@ -166,10 +412,10 @@
|
||||
color: #000000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.forum-sections-list .list .line:not(:last-child) {
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.forum-sections-list .list .line .item {
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line .item {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
@@ -182,6 +428,37 @@
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.forum-sections-list .list .line .item:not(:last-child) {
|
||||
#appIndex .matter .matter-content .forum-sections-list .list .line .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#appIndex .matter .matter-content .item-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#appIndex .matter .sidebar .adv {
|
||||
display: block;
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#appIndex .matter .sidebar .adv .adv-icon {
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#appIndex .matter .sidebar .side-box {
|
||||
width: 100%;
|
||||
padding: 17px 10px 10px;
|
||||
margin-bottom: 12px;
|
||||
width: 291px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#appIndex .matter .sidebar .side-box.offer-side-box {
|
||||
background: linear-gradient(154.12772232deg, #c7edf2 1%, #d3f2f5 100%);
|
||||
}
|
||||
#appIndex .matter .sidebar .side-box.vote-side-box {
|
||||
background: linear-gradient(151.77562139deg, #c6f4d9 1%, #d9f7e5 100%);
|
||||
}
|
||||
#appIndex .matter .sidebar .side-box.interviewexperience-side-box {
|
||||
background: linear-gradient(158.64328877deg, #d3e1fb 1%, #dee6f9 100%);
|
||||
}
|
||||
|
||||
712
css/index.less
712
css/index.less
@@ -1,228 +1,560 @@
|
||||
.topic-and-selectives {
|
||||
.head-top {
|
||||
width: 64px;
|
||||
height: 24px;
|
||||
border-radius: 20px 20px 20px 0;
|
||||
margin-bottom: 10px;
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
#appIndex {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topic-box {
|
||||
width: 308px;
|
||||
height: 320px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-right: 12px;
|
||||
.header-content-box {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
|
||||
.head-top {
|
||||
background-color: rgba(244, 174, 56, 1);
|
||||
}
|
||||
.header-content-left {
|
||||
.adv-list {
|
||||
margin-bottom: 18px;
|
||||
|
||||
.topic-head {
|
||||
height: 109px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
|
||||
.people {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
background-color: rgba(244, 174, 56, 1);
|
||||
border-radius: 150px;
|
||||
.adv-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.adv-img {
|
||||
width: 468px;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
|
||||
.number {
|
||||
color: #333333;
|
||||
|
||||
.topic-and-selectives {
|
||||
.head-top {
|
||||
width: 64px;
|
||||
height: 24px;
|
||||
border-radius: 20px 20px 20px 0;
|
||||
margin-bottom: 10px;
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.topic-box {
|
||||
width: 308px;
|
||||
height: 320px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-right: 12px;
|
||||
|
||||
.head-top {
|
||||
background-color: rgba(244, 174, 56, 1);
|
||||
}
|
||||
|
||||
.topic-head {
|
||||
height: 109px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
|
||||
.people {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
background-color: rgba(244, 174, 56, 1);
|
||||
border-radius: 150px;
|
||||
}
|
||||
|
||||
.left {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
|
||||
.number {
|
||||
color: #333333;
|
||||
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.item {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
.img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
margin-right: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
.item {
|
||||
cursor: pointer;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 28px;
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectives-box {
|
||||
width: 628px;
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.head-top {
|
||||
background-color: rgba(246, 130, 81, 1);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 265px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-left-bottom-box {
|
||||
width: 948px;
|
||||
height: 140px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 12px;
|
||||
margin-top: 12px;
|
||||
.adv {
|
||||
margin-right: 26px;
|
||||
.adv-icon {
|
||||
width: 295px;
|
||||
height: 118px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding-top: 12px;
|
||||
width: 281px;
|
||||
margin-right: 39px;
|
||||
|
||||
&.list2 {
|
||||
margin-right: 0;
|
||||
|
||||
.item .text {
|
||||
width: 255px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
.img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
height: 20px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 10px;
|
||||
background: #30b0d5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
.text {
|
||||
cursor: pointer;
|
||||
width: 266px;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
|
||||
&:nth-child(5) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
margin-right: -7px;
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
.item {
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
.header-content-right {
|
||||
width: 240px;
|
||||
.post-entrance {
|
||||
background-color: #fff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.text {
|
||||
.entrance-top {
|
||||
height: 46px;
|
||||
background-color: rgba(213, 243, 247, 1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
padding-left: 52px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(194, 239, 246, 1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.entrance-bottom {
|
||||
height: 90px;
|
||||
flex-wrap: wrap;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
|
||||
&:nth-child(odd) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
&:not(:nth-last-child(-n + 2)) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adv-broadside {
|
||||
width: 240px;
|
||||
height: 140px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
.adv-broadside-img {
|
||||
width: 240px;
|
||||
height: 140px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.group-box {
|
||||
width: 240px;
|
||||
height: 150px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.group {
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
|
||||
.group-item {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-child(odd) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
&:not(:nth-last-child(-n + 2)) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.offer-box {
|
||||
width: 240px;
|
||||
height: 214px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 17px 10px;
|
||||
overflow: hidden;
|
||||
|
||||
&.small {
|
||||
height: 64px;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
margin-bottom: 19px;
|
||||
|
||||
.avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.titletitle {
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
&:hover .titletitle {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectives-box {
|
||||
width: 628px;
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.head-top {
|
||||
background-color: rgba(246, 130, 81, 1);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
margin-bottom: 12px;
|
||||
.matter {
|
||||
.matter-content {
|
||||
margin-right: 12px;
|
||||
.forum-sections-list {
|
||||
position: relative;
|
||||
width: 897px;
|
||||
height: 240px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
.img {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 60px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 265px;
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.list {
|
||||
.line {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 0 18px;
|
||||
height: 32px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.adv {
|
||||
display: block;
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
.adv-icon {
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-box {
|
||||
width: 100%;
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forum-sections-list {
|
||||
position: relative;
|
||||
width: 897px;
|
||||
height: 240px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 60px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.list {
|
||||
.line {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 0 18px;
|
||||
height: 32px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1398,7 +1398,8 @@ body {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 21px;
|
||||
padding: 21px 10px 15px 21px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.hot-tag .hot-tag-title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
@@ -1407,6 +1408,7 @@ body {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.hot-tag .hot-tag-title .icon {
|
||||
position: absolute;
|
||||
@@ -1416,6 +1418,9 @@ body {
|
||||
width: 10px;
|
||||
height: 18px;
|
||||
}
|
||||
.hot-tag .list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.hot-tag .list .item {
|
||||
line-height: 36px;
|
||||
color: #333333;
|
||||
@@ -1424,6 +1429,10 @@ body {
|
||||
line-height: 32px;
|
||||
padding: 0 14px;
|
||||
background-color: #f6f6f6;
|
||||
border: #f2f2f2;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 14px;
|
||||
margin-right: 9px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -1659,15 +1659,17 @@ body {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 21px;
|
||||
padding: 21px 10px 15px 21px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.hot-tag-title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
@@ -1680,6 +1682,8 @@ body {
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
line-height: 36px;
|
||||
color: #333333;
|
||||
@@ -1688,8 +1692,12 @@ body {
|
||||
line-height: 32px;
|
||||
padding: 0 14px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border: rgba(242, 242, 242, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 14px;
|
||||
margin-right: 9px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
114
css/search-tag.css
Normal file
114
css/search-tag.css
Normal file
@@ -0,0 +1,114 @@
|
||||
#search-tag {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#search-tag .label-title {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
#search-tag .label-title .icon {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
#search-tag .label-title .text {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #000000;
|
||||
}
|
||||
#search-tag .classify {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#search-tag .classify .item {
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 12px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
}
|
||||
#search-tag .classify .item.pitch {
|
||||
background-color: #d35110;
|
||||
color: #ffffff;
|
||||
}
|
||||
#search-tag .classify .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#search-tag .quantity {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
color: #555;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
#search-tag .quantity .line {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #aaaaaa;
|
||||
margin: 0 10px;
|
||||
}
|
||||
#search-tag .quantity .num {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 10px;
|
||||
}
|
||||
#search-tag .matter .matter-content {
|
||||
margin-right: 12px;
|
||||
}
|
||||
#search-tag .matter .matter-content .list-box .item-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#search-tag .matter .matter-content .empty {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
margin-right: 12px;
|
||||
}
|
||||
#search-tag .matter .matter-content .empty .empty-icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
#search-tag .matter .matter-content .empty .empty-text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#search-tag .matter .matter-content .pages-box {
|
||||
padding-bottom: 60px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#search-tag .matter .matter-content .pages-box .item {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
#search-tag .matter .matter-content .pages-box .item.pitch {
|
||||
background-color: #6fc16d;
|
||||
color: #ffffff;
|
||||
}
|
||||
#search-tag .matter .matter-content .pages-box .arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#search-tag .matter .matter-content .pages-box .arrows.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
#search-tag .matter .sidebar-box {
|
||||
width: 291px;
|
||||
}
|
||||
138
css/search-tag.less
Normal file
138
css/search-tag.less
Normal file
@@ -0,0 +1,138 @@
|
||||
#search-tag {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.label-title {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.icon {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.classify {
|
||||
margin-bottom: 16px;
|
||||
.item {
|
||||
width: 50px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 12px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
|
||||
&.pitch {
|
||||
background-color: rgba(211, 81, 16, 1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
color: #555;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #aaaaaa;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.matter {
|
||||
.matter-content {
|
||||
margin-right: 12px;
|
||||
|
||||
.list-box {
|
||||
.item-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
margin-right: 12px;
|
||||
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pages-box {
|
||||
padding-bottom: 60px;
|
||||
padding-top: 30px;
|
||||
|
||||
.item {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
|
||||
&.pitch {
|
||||
background-color: #6fc16d;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
width: 291px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,20 +2,24 @@
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#search .label-title {
|
||||
margin-bottom: 24px;
|
||||
#search .search-box {
|
||||
width: 460px;
|
||||
height: 48px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d7d7d7;
|
||||
border-radius: 10px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#search .label-title .icon {
|
||||
width: 25px;
|
||||
#search .search-box .search-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
}
|
||||
#search .search-box .search-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
#search .label-title .text {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
}
|
||||
#search .classify {
|
||||
margin-bottom: 16px;
|
||||
@@ -57,6 +61,58 @@
|
||||
color: #000000;
|
||||
margin: 0 10px;
|
||||
}
|
||||
#search .matter .sidebar-box {
|
||||
width: 219px;
|
||||
#search .matter .matter-content {
|
||||
margin-right: 12px;
|
||||
}
|
||||
#search .matter .matter-content .list-box .item-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#search .matter .matter-content .empty {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
margin-right: 12px;
|
||||
}
|
||||
#search .matter .matter-content .empty .empty-icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
#search .matter .matter-content .empty .empty-text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#search .matter .matter-content .pages-box {
|
||||
padding-bottom: 60px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#search .matter .matter-content .pages-box .item {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
#search .matter .matter-content .pages-box .item.pitch {
|
||||
background-color: #6fc16d;
|
||||
color: #ffffff;
|
||||
}
|
||||
#search .matter .matter-content .pages-box .arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#search .matter .matter-content .pages-box .arrows.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
#search .matter .sidebar-box {
|
||||
width: 291px;
|
||||
}
|
||||
|
||||
@@ -2,21 +2,25 @@
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.label-title {
|
||||
margin-bottom: 24px;
|
||||
.search-box {
|
||||
width: 460px;
|
||||
height: 48px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
border-radius: 10px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.icon {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
margin-right: 12px;
|
||||
.search-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #000000;
|
||||
.search-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,10 +72,71 @@
|
||||
|
||||
.matter {
|
||||
.matter-content {
|
||||
margin-right: 12px;
|
||||
|
||||
.list-box {
|
||||
.item-box {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
margin-right: 12px;
|
||||
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pages-box {
|
||||
padding-bottom: 60px;
|
||||
padding-top: 30px;
|
||||
|
||||
.item {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
|
||||
&.pitch {
|
||||
background-color: #6fc16d;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&.rotate180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
width: 219px;
|
||||
width: 291px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user