feat: 新增详情页和个人主页功能及组件优化
- 添加详情页(details.html)和个人主页(homepage-me.html)的完整功能实现 - 新增多个图片资源用于UI展示 - 优化item-head、item-bottom等组件的数据绑定和交互逻辑 - 添加公共工具函数(public.js)包括时间处理和网络请求 - 完善CSS样式文件，增加响应式布局和交互效果 - 实现用户信息展示、帖子详情、相关帖子推荐等功能模块 - 添加签到、投币等交互功能 - 优化组件模板结构和数据传递方式
This commit is contained in:
DESKTOP-RQ919RC\Pc
496
css/details.css
Normal file
496
css/details.css
Normal file
@@ -0,0 +1,496 @@
|
||||
#details {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#details .head-top {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#details .head-top .logo {
|
||||
height: 52px;
|
||||
}
|
||||
#details .head-top .input-box {
|
||||
width: 370px;
|
||||
height: 40px;
|
||||
background-color: #ebebeb;
|
||||
border: 2px solid #d7d7d7;
|
||||
border-radius: 11px;
|
||||
padding: 0 15px;
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#details .head-top .input-box .input {
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
#details .head-top .input-box .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 15rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .head-top .post-list .post-item {
|
||||
width: 84px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .head-top .post-list .post-item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#details .head-navigation {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#details .head-navigation .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
#details .head-navigation .arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#details .head-navigation .text {
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .head-navigation .text:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#details .matter {
|
||||
align-items: flex-start;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
#details .matter .matter-left {
|
||||
width: 890px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#details .matter .matter-left .block {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head {
|
||||
height: 80px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .content {
|
||||
flex-direction: column;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .content .name {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .content .name .icon {
|
||||
height: 14px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .content .time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .view .icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 150px;
|
||||
}
|
||||
#details .matter .matter-left .matter-head .operate .btn .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
#details .matter .matter-left .label {
|
||||
padding: 20px 30px 20px;
|
||||
}
|
||||
#details .matter .matter-left .label .item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#details .matter .matter-left .label .item.icon {
|
||||
padding: 0;
|
||||
}
|
||||
#details .matter .matter-left .label .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#details .matter .matter-left .label .item.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
#details .matter .matter-left .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
padding: 0 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#details .matter .matter-left .html {
|
||||
padding: 0 30px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 24px;
|
||||
margin-bottom: 66px;
|
||||
}
|
||||
#details .matter .matter-left .last-time {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
padding: 0 30px 20px;
|
||||
}
|
||||
#details .matter .matter-left .bottom {
|
||||
border-top: 1px solid #ebebeb;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
justify-content: flex-end;
|
||||
padding-right: 30px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: #ffff;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
#details .matter .matter-left .bottom .bottom-item {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
#details .matter .matter-left .bottom .bottom-item .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#details .matter .matter-left .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
#details .matter .matter-left .related .related-head {
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
#details .matter .matter-left .related .related-head .text {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-right: 14px;
|
||||
}
|
||||
#details .matter .matter-left .related .related-head .time {
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
letter-spacing: normal;
|
||||
color: #333333;
|
||||
}
|
||||
#details .matter .matter-left .related .list {
|
||||
padding: 14px 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#details .matter .matter-left .related .list .item {
|
||||
width: 50%;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .matter .matter-left .related .list .item:hover {
|
||||
color: #000000;
|
||||
}
|
||||
#details .matter .matter-left .related .list .item .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#details .matter .matter-left .related .list .item:not(:nth-last-child(-n + 2)) {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
#details .matter .matter-left .related .list .item .text {
|
||||
width: 352px;
|
||||
}
|
||||
#details .matter .sidebar-box .adv {
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .matter .sidebar-box .adv .adv-img {
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item {
|
||||
width: 291px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-header {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content {
|
||||
flex-direction: column;
|
||||
padding: 20px 0;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .sidebar-QRCode {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .hint {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .hint .saoma-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box {
|
||||
padding: 16px 5px 30px 16px;
|
||||
width: 100%;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 22px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .author-content .author-name {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .author-content .author-info {
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .author-content .author-info .amount {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .medal {
|
||||
width: calc(100% - 16px);
|
||||
padding-bottom: 22px;
|
||||
margin-left: 16px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .medal .medal-title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .medal .medal-list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .medal .medal-list .medal-item {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .recently {
|
||||
width: 100%;
|
||||
padding: 30px 16px 10px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list .recently-item {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
margin-bottom: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list .recently-item .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#details .coins-area {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#details .coins-area .coins-box {
|
||||
width: 624px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 11px;
|
||||
flex-direction: column;
|
||||
padding: 40px 30px 35px;
|
||||
position: relative;
|
||||
}
|
||||
#details .coins-area .coins-box .fork {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-head {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-head .icon {
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-head .text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-head .text .sum {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-input {
|
||||
width: 333px;
|
||||
height: 36px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d7d7d7;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-input .input {
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-input .btn {
|
||||
width: 84px;
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
background-color: #50e3c2;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-info {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-info .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-info .sum {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-info .strategy {
|
||||
margin-left: 5px;
|
||||
color: #026277;
|
||||
cursor: pointer;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area {
|
||||
max-height: 347px;
|
||||
background-color: #fbfbfb;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
padding: 20px 20px 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .coins-total {
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .coins-total .sum {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .list {
|
||||
overflow: auto;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .list .item {
|
||||
height: 65px;
|
||||
padding: 0 35px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .list .item:not(:last-child) {
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .list .item .serial {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #ffb600;
|
||||
margin-right: 114px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .list .item .user {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .list .item .user .avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .list .item .amount {
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
}
|
||||
#details .coins-area .coins-box .coins-list-area .list .item .amount .text {
|
||||
font-size: 13px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
585
css/details.less
Normal file
585
css/details.less
Normal file
@@ -0,0 +1,585 @@
|
||||
#details {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
.head-top {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.logo {
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 370px;
|
||||
height: 40px;
|
||||
background-color: rgba(235, 235, 235, 1);
|
||||
border: 2px solid rgba(215, 215, 215, 1);
|
||||
border-radius: 11px;
|
||||
padding: 0 15px;
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 15rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
.post-item {
|
||||
width: 84px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-navigation {
|
||||
margin-bottom: 20px;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.matter {
|
||||
align-items: flex-start;
|
||||
margin-bottom: 50px;
|
||||
|
||||
.matter-left {
|
||||
width: 890px;
|
||||
margin-right: 20px;
|
||||
|
||||
.block {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.matter-head {
|
||||
height: 80px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-direction: column;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
margin-bottom: 2px;
|
||||
|
||||
.icon {
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
.view {
|
||||
.icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 150px;
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 20px 30px 20px;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
padding: 0 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.html {
|
||||
padding: 0 30px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 24px;
|
||||
margin-bottom: 66px;
|
||||
}
|
||||
|
||||
.last-time {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
padding: 0 30px 20px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: 1px solid #ebebeb;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
justify-content: flex-end;
|
||||
padding-right: 30px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: #ffff;
|
||||
border-radius: 0 0 10px 10px;
|
||||
|
||||
.bottom-item {
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related {
|
||||
.related-head {
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
.text {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
letter-spacing: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 14px 30px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:not(:nth-last-child(-n + 2)) {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 352px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
.adv {
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
||||
.adv-img {
|
||||
width: 291px;
|
||||
height: 220px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
width: 291px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.sidebar-header {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex-direction: column;
|
||||
padding: 20px 0;
|
||||
|
||||
.sidebar-QRCode {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
.saoma-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.author-box {
|
||||
padding: 16px 5px 30px 16px;
|
||||
width: 100%;
|
||||
.avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 22px;
|
||||
}
|
||||
|
||||
.author-content {
|
||||
.author-name {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.author-info {
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
.amount {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.medal {
|
||||
width: calc(100% - 16px);
|
||||
padding-bottom: 22px;
|
||||
margin-left: 16px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
.medal-title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.medal-list {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.medal-item {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recently {
|
||||
width: 100%;
|
||||
padding: 30px 16px 10px;
|
||||
|
||||
.recently-title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.recently-list {
|
||||
flex-direction: column;
|
||||
|
||||
.recently-item {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
margin-bottom: 9px;
|
||||
cursor: pointer;
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coins-area {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.coins-box {
|
||||
width: 624px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 11px;
|
||||
flex-direction: column;
|
||||
padding: 40px 30px 35px;
|
||||
position: relative;
|
||||
|
||||
.fork {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.coins-head {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
.sum {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coins-input {
|
||||
width: 333px;
|
||||
height: 36px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 31px;
|
||||
|
||||
.input {
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 84px;
|
||||
height: 100%;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.coins-info {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-bottom: 43px;
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.sum {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.strategy {
|
||||
margin-left: 5px;
|
||||
color: #026277;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.coins-list-area {
|
||||
max-height: 347px;
|
||||
background-color: rgba(251, 251, 251, 1);
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
padding: 20px 20px 0;
|
||||
flex-direction: column;
|
||||
|
||||
.coins-total {
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
.sum {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
overflow: auto;
|
||||
|
||||
.item {
|
||||
height: 65px;
|
||||
padding: 0 35px;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
.serial {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #ffb600;
|
||||
margin-right: 114px;
|
||||
}
|
||||
|
||||
.user {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
.text {
|
||||
font-size: 13px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
464
css/homepage-me.css
Normal file
464
css/homepage-me.css
Normal file
@@ -0,0 +1,464 @@
|
||||
#homepage-me {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#homepage-me .head-top {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#homepage-me .head-top .logo {
|
||||
height: 52px;
|
||||
}
|
||||
#homepage-me .head-top .input-box {
|
||||
width: 370px;
|
||||
height: 40px;
|
||||
background-color: #ebebeb;
|
||||
border: 2px solid #d7d7d7;
|
||||
border-radius: 11px;
|
||||
padding: 0 15px;
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#homepage-me .head-top .input-box .input {
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
#homepage-me .head-top .input-box .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 15rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage-me .head-top .sign-in {
|
||||
width: 192px;
|
||||
height: 40px;
|
||||
border-radius: 83px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-already {
|
||||
background-color: #ffffff;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-already .sign-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 8px;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .sign-in-bj {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .coin-bj {
|
||||
position: absolute;
|
||||
width: 157px;
|
||||
height: 33px;
|
||||
top: 4px;
|
||||
left: 29px;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .coin-icon {
|
||||
width: 43px;
|
||||
height: 51px;
|
||||
align-self: flex-end;
|
||||
z-index: 1;
|
||||
margin-left: -2px;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .text {
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 2px #a63603;
|
||||
-webkit-text-shadow: 1px 1px 2px #a63603;
|
||||
-moz-text-shadow: 1px 1px 2px #a63603;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .sign-go {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: #710600;
|
||||
position: relative;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .sign-go .sign-go-bj {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .petal1,
|
||||
#homepage-me .head-top .sign-in.sign-in-no .petal2,
|
||||
#homepage-me .head-top .sign-in.sign-in-no .petal3 {
|
||||
position: absolute;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .petal1 {
|
||||
width: 24px;
|
||||
height: 10px;
|
||||
top: 3px;
|
||||
left: 55px;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .petal2 {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
top: 25px;
|
||||
left: 92px;
|
||||
}
|
||||
#homepage-me .head-top .sign-in.sign-in-no .petal3 {
|
||||
width: 17px;
|
||||
height: 12px;
|
||||
top: 25px;
|
||||
left: 136px;
|
||||
}
|
||||
#homepage-me .head-navigation {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#homepage-me .head-navigation .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
#homepage-me .head-navigation .arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#homepage-me .head-navigation .text {
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage-me .head-navigation .text:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#homepage-me .matter {
|
||||
align-items: flex-start;
|
||||
}
|
||||
#homepage-me .matter .card-user {
|
||||
width: 320px;
|
||||
background: -webkit-linear-gradient(270.06444514deg, #ffffff 0%, #eef8f9 100%);
|
||||
background: -moz-linear-gradient(179.93555486deg, #ffffff 0%, #eef8f9 100%);
|
||||
background: linear-gradient(179.93555486deg, #ffffff 0%, #eef8f9 100%);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 38px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#homepage-me .matter .card-user .avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#homepage-me .matter .card-user .name-area {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#homepage-me .matter .card-user .name-area .username {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#homepage-me .matter .card-user .name-area .uid {
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
}
|
||||
#homepage-me .matter .card-user .name-area .uid .icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage-me .matter .card-user .bi-box {
|
||||
position: relative;
|
||||
width: 260px;
|
||||
height: 65px;
|
||||
background: linear-gradient(255.75deg, #ffbd15 0%, #fff5d1 99%);
|
||||
border-radius: 12px;
|
||||
z-index: 1;
|
||||
justify-content: space-between;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#homepage-me .matter .card-user .bi-box .bi-masking {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 260px;
|
||||
height: 65px;
|
||||
z-index: -1;
|
||||
}
|
||||
#homepage-me .matter .card-user .bi-box .bi-icon {
|
||||
width: 50px;
|
||||
height: 56px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
#homepage-me .matter .card-user .bi-box .bi-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
#homepage-me .matter .card-user .bi-box .bi-content .bi-sum {
|
||||
font-family: Arial-Black, "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
}
|
||||
#homepage-me .matter .card-user .bi-box .bi-content .bi-text {
|
||||
font-size: 13px;
|
||||
letter-spacing: normal;
|
||||
color: #333333;
|
||||
}
|
||||
#homepage-me .matter .card-user .bi-box .bi-btn {
|
||||
width: 98px;
|
||||
height: 26px;
|
||||
background-color: #fff6d8;
|
||||
border-radius: 60px;
|
||||
box-shadow: rgba(0, 0, 0, 0.145) 0px 0px 5px;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
font-size: 13px;
|
||||
color: #ab7713;
|
||||
}
|
||||
#homepage-me .matter .card-user .bi-box .bi-btn .bi-question {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#homepage-me .matter .card-user .medal-area {
|
||||
margin: 0 30px;
|
||||
align-self: self-start;
|
||||
}
|
||||
#homepage-me .matter .card-user .medal-area .title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
#homepage-me .matter .card-user .medal-area .list {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#homepage-me .matter .card-user .medal-area .list .item {
|
||||
height: 30px;
|
||||
max-width: 30px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 31px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .header {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
padding-top: 46px;
|
||||
padding-bottom: 19px;
|
||||
position: relative;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .header .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: -55px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .header .username {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .header .icon {
|
||||
height: 40px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .info-list {
|
||||
flex-flow: wrap;
|
||||
padding-top: 20px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .info-list .item {
|
||||
width: 50%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .info-list .item .label {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
width: 87px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .info-list .item .value {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .info-list .item .status {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
padding: 0 6px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: #f0f1ec;
|
||||
border-radius: 23px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .info-list .item .status.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .stats {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 21px;
|
||||
font-size: 14px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .stats .item .text {
|
||||
color: #7f7f7f;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .stats .item .num {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #04b0d5;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .stats .line {
|
||||
color: #d7d7d7;
|
||||
margin: 0 14px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .tags {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .tags .item {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
height: 24px;
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #f0f1ec;
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .message-box .tags .item .icon {
|
||||
height: 13px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area {
|
||||
width: 860px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .operation-box {
|
||||
padding-top: 40px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 18px;
|
||||
font-size: 18px;
|
||||
color: #7f7f7f;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .operation-box .operation-item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .operation-box .operation-item:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .operation-box .operation-item.pitch {
|
||||
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .operation-box .operation-item.pitch::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background-color: #50e3c2;
|
||||
border-radius: 26px;
|
||||
position: absolute;
|
||||
bottom: -21px;
|
||||
display: block;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .classify {
|
||||
padding-top: 37px;
|
||||
padding-bottom: 23px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .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;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .classify .item.pitch {
|
||||
background-color: #d35110;
|
||||
color: #ffffff;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .classify .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .issue-data {
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .issue-data .num {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .list-box {
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .list-box .item-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .empty {
|
||||
width: 725px;
|
||||
height: 360px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 95px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .empty .empty-icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .empty .empty-text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#homepage-me .matter .matter-content .list-area .load-more {
|
||||
padding: 20px 0 40px;
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
}
|
||||
535
css/homepage-me.less
Normal file
535
css/homepage-me.less
Normal file
@@ -0,0 +1,535 @@
|
||||
#homepage-me {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
.head-top {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.logo {
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 370px;
|
||||
height: 40px;
|
||||
background-color: rgba(235, 235, 235, 1);
|
||||
border: 2px solid rgba(215, 215, 215, 1);
|
||||
border-radius: 11px;
|
||||
padding: 0 15px;
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
outline: none;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 15rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.sign-in {
|
||||
width: 192px;
|
||||
height: 40px;
|
||||
border-radius: 83px;
|
||||
cursor: pointer;
|
||||
|
||||
&.sign-in-already {
|
||||
background-color: #ffffff;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
.sign-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.sign-in-no {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: 8px;
|
||||
.sign-in-bj {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.coin-bj {
|
||||
position: absolute;
|
||||
width: 157px;
|
||||
height: 33px;
|
||||
top: 4px;
|
||||
left: 29px;
|
||||
}
|
||||
|
||||
.coin-icon {
|
||||
width: 43px;
|
||||
height: 51px;
|
||||
align-self: flex-end;
|
||||
z-index: 1;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 2px #a63603;
|
||||
-webkit-text-shadow: 1px 1px 2px #a63603;
|
||||
-moz-text-shadow: 1px 1px 2px #a63603;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sign-go {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: #710600;
|
||||
position: relative;
|
||||
|
||||
.sign-go-bj {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.petal1,
|
||||
.petal2,
|
||||
.petal3 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.petal1 {
|
||||
width: 24px;
|
||||
height: 10px;
|
||||
top: 3px;
|
||||
left: 55px;
|
||||
}
|
||||
|
||||
.petal2 {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
top: 25px;
|
||||
left: 92px;
|
||||
}
|
||||
.petal3 {
|
||||
width: 17px;
|
||||
height: 12px;
|
||||
top: 25px;
|
||||
left: 136px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-navigation {
|
||||
margin-bottom: 20px;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.matter {
|
||||
align-items: flex-start;
|
||||
.card-user {
|
||||
width: 320px;
|
||||
background: -webkit-linear-gradient(270.064445137829deg, rgba(255, 255, 255, 1) 0%, rgba(238, 248, 249, 1) 100%);
|
||||
background: -moz-linear-gradient(179.935554862171deg, rgba(255, 255, 255, 1) 0%, rgba(238, 248, 249, 1) 100%);
|
||||
background: linear-gradient(179.935554862171deg, rgba(255, 255, 255, 1) 0%, rgba(238, 248, 249, 1) 100%);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 38px;
|
||||
margin-right: 20px;
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.name-area {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.username {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.uid {
|
||||
color: #7f7f7f;
|
||||
font-size: 13px;
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bi-box {
|
||||
width: 260px;
|
||||
height: 65px;
|
||||
position: relative;
|
||||
width: 260px;
|
||||
height: 65px;
|
||||
background: linear-gradient(255.75deg, rgb(255, 189, 21) 0%, rgb(255, 245, 209) 99%);
|
||||
border-radius: 12px;
|
||||
z-index: 1;
|
||||
justify-content: space-between;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.bi-masking {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 260px;
|
||||
height: 65px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bi-icon {
|
||||
width: 50px;
|
||||
height: 56px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.bi-content {
|
||||
flex-direction: column;
|
||||
|
||||
.bi-sum {
|
||||
font-family: Arial-Black, "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.bi-text {
|
||||
font-size: 13px;
|
||||
letter-spacing: normal;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.bi-btn {
|
||||
width: 98px;
|
||||
height: 26px;
|
||||
background-color: rgb(255, 246, 216);
|
||||
border-radius: 60px;
|
||||
box-shadow: rgba(0, 0, 0, 0.145) 0px 0px 5px;
|
||||
font-size: 15px;
|
||||
color: rgb(171, 119, 19);
|
||||
line-height: 26px;
|
||||
|
||||
font-size: 13px;
|
||||
color: rgb(171, 119, 19);
|
||||
.bi-question {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.medal-area {
|
||||
margin: 0 30px;
|
||||
align-self: self-start;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
height: 30px;
|
||||
max-width: 30px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.matter-content {
|
||||
.message-box {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 31px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.header {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
padding-top: 46px;
|
||||
padding-bottom: 19px;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: -55px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
flex-flow: wrap;
|
||||
padding-top: 20px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
margin-bottom: 15px;
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
width: 87px;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
padding: 0 6px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: rgba(240, 241, 236, 1);
|
||||
border-radius: 23px;
|
||||
margin-left: 10px;
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: rgba(4, 176, 213, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 21px;
|
||||
font-size: 14px;
|
||||
|
||||
.item {
|
||||
.text {
|
||||
color: #7f7f7f;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
color: #04b0d5;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
color: #d7d7d7;
|
||||
margin: 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
height: 24px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border: 1px solid rgba(240, 241, 236, 1);
|
||||
border-radius: 5px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.icon {
|
||||
height: 13px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-area {
|
||||
width: 860px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
|
||||
.operation-box {
|
||||
padding-top: 40px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 18px;
|
||||
font-size: 18px;
|
||||
color: rgb(127, 127, 127);
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
|
||||
.operation-item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
&.pitch {
|
||||
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background-color: rgb(80, 227, 194);
|
||||
border-radius: 26px;
|
||||
position: absolute;
|
||||
bottom: -21px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.classify {
|
||||
padding-top: 37px;
|
||||
padding-bottom: 23px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.issue-data {
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
|
||||
.num {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
padding-left: 95px;
|
||||
padding-right: 40px;
|
||||
.item-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 725px;
|
||||
height: 360px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 95px;
|
||||
margin-right: 40px;
|
||||
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
padding: 20px 0 40px;
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,44 +1,3 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
body {
|
||||
background-color: #eef2f5;
|
||||
}
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#homepage-other {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
@@ -222,7 +181,7 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage-other .matter .card-user .medal-area {
|
||||
margin: 0 30px 44px;
|
||||
margin: 0 30px 36px;
|
||||
align-self: self-start;
|
||||
}
|
||||
#homepage-other .matter .card-user .medal-area .title {
|
||||
@@ -237,6 +196,7 @@ body {
|
||||
height: 30px;
|
||||
max-width: 30px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#homepage-other .matter .card-user .btn-area .item {
|
||||
width: 200px;
|
||||
@@ -398,3 +358,25 @@ body {
|
||||
#homepage-other .matter .matter-content .list-area .list-box .item-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .empty {
|
||||
width: 725px;
|
||||
height: 360px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .empty .empty-icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .empty .empty-text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .list-area .load-more {
|
||||
padding: 20px 0 40px;
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -1,53 +1,3 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgba(238, 242, 245, 1);
|
||||
}
|
||||
|
||||
/* 公共的 css 样式 */
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.one-line-display {
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#homepage-other {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
@@ -251,7 +201,7 @@ body {
|
||||
}
|
||||
|
||||
.medal-area {
|
||||
margin: 0 30px 44px;
|
||||
margin: 0 30px 36px;
|
||||
align-self: self-start;
|
||||
|
||||
.title {
|
||||
@@ -266,6 +216,7 @@ body {
|
||||
height: 30px;
|
||||
max-width: 30px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -461,6 +412,31 @@ body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
width: 725px;
|
||||
height: 360px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 94px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
padding: 20px 0 40px;
|
||||
color: #7f7f7f;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,6 +39,13 @@ body {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.two-line-display {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.item-box {
|
||||
max-width: 897px;
|
||||
width: 100%;
|
||||
@@ -91,7 +98,7 @@ body {
|
||||
height: 18px;
|
||||
}
|
||||
.item-box .label {
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.item-box .label .item {
|
||||
font-size: 14px;
|
||||
@@ -101,6 +108,7 @@ body {
|
||||
line-height: 24px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-box .label .item.icon {
|
||||
padding: 0;
|
||||
@@ -395,6 +403,60 @@ body {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
}
|
||||
.item-box.item-tenement .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-box.item-tenement .site-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-box.item-tenement .site-box .site-item {
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
}
|
||||
.item-box.item-tenement .site-box .site-item .site-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.item-box.item-tenement .price-section {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 21px;
|
||||
}
|
||||
.item-box.item-tenement .price-section .unit {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.item-box.item-tenement .price-section .price {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
color: #f95d5d;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.item-box.item-tenement .price-section .text {
|
||||
color: #555555;
|
||||
margin-right: 21px;
|
||||
}
|
||||
.item-box.item-tenement .picture {
|
||||
overflow: auto;
|
||||
}
|
||||
.item-box.item-tenement .picture .picture-item {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.item-box.item-tenement .picture .picture-item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box .comment {
|
||||
height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
@@ -48,6 +48,14 @@ body {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.two-line-display {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
max-width: 897px;
|
||||
width: 100%;
|
||||
@@ -108,7 +116,7 @@ body {
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
@@ -118,6 +126,7 @@ body {
|
||||
line-height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.icon {
|
||||
padding: 0;
|
||||
@@ -476,6 +485,71 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
&.item-tenement {
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.site-box {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.site-item {
|
||||
.site-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
|
||||
.price-section {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 21px;
|
||||
.unit {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
color: #f95d5d;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #555555;
|
||||
margin-right: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
.picture {
|
||||
overflow: auto;
|
||||
.picture-item {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
height: 40px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
|
||||
@@ -140,9 +140,11 @@
|
||||
#sectionIndex .head-navigation .text:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#sectionIndex .matter {
|
||||
align-items: flex-start;
|
||||
}
|
||||
#sectionIndex .matter .sidebar {
|
||||
width: 150px;
|
||||
height: 1225px;
|
||||
background-color: #08353e;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
@@ -166,14 +168,18 @@
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#sectionIndex .matter .sidebar .list:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.24705882);
|
||||
#sectionIndex .matter .sidebar .list .line {
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.24705882);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#sectionIndex .matter .sidebar .list .item {
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sectionIndex .matter .sidebar .list .item .text {
|
||||
z-index: 1;
|
||||
@@ -276,6 +282,7 @@
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .info .right .bottom .btn .icon {
|
||||
width: 16px;
|
||||
@@ -388,131 +395,8 @@
|
||||
width: 732px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .name {
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .group {
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .view .icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 150px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .btn .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item.icon {
|
||||
padding: 0;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .title {
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment {
|
||||
height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment .text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom {
|
||||
height: 55px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item .text {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item.like .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
#sectionIndex .matter .matter-content .details-box .side-box {
|
||||
width: 291px;
|
||||
height: 300px;
|
||||
@@ -159,9 +159,9 @@
|
||||
}
|
||||
|
||||
.matter {
|
||||
align-items: flex-start;
|
||||
.sidebar {
|
||||
width: 150px;
|
||||
height: 1225px;
|
||||
background-color: rgba(8, 53, 62, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
@@ -185,14 +185,19 @@
|
||||
padding-bottom: 10px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.24705882);
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.24705882);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
|
||||
.text {
|
||||
z-index: 1;
|
||||
@@ -305,6 +310,7 @@
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -433,155 +439,7 @@
|
||||
width: 732px;
|
||||
|
||||
.item-box {
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.item-head {
|
||||
margin-bottom: 14px;
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.group {
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
|
||||
.icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 150px;
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
border-radius: 6px;
|
||||
|
||||
&.icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
line-height: 36px;
|
||||
margin-bottom: 7px;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.comment {
|
||||
height: 40px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 55px;
|
||||
justify-content: flex-end;
|
||||
|
||||
.bottom-item {
|
||||
cursor: pointer;
|
||||
&:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.like {
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user