feat: 新增签到功能模块并优化详情页样式
- 添加签到功能相关HTML/CSS/JS文件 - 在详情页增加图片预览组件 - 调整详情页文本行高和标题样式 - 修复评论时间显示问题 - 优化本地开发环境授权处理
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -156,7 +156,7 @@
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 24px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 66px;
|
||||
}
|
||||
#details .matter .matter-left .html a {
|
||||
@@ -177,6 +177,13 @@
|
||||
#details .matter .matter-left .html video {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#details .matter .matter-left .html h2 {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
#details .matter .matter-left .last-time {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
@@ -1124,6 +1131,7 @@
|
||||
height: 80vh;
|
||||
border-radius: 8px;
|
||||
background-color: #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
.detail-image-mask .detail-image .detail-img {
|
||||
max-width: 100%;
|
||||
|
||||
@@ -180,7 +180,7 @@
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 24px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 66px;
|
||||
|
||||
a {
|
||||
@@ -204,6 +204,14 @@
|
||||
video {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.last-time {
|
||||
@@ -1316,6 +1324,7 @@
|
||||
height: 80vh;
|
||||
border-radius: 8px;
|
||||
background-color: #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-image-mask .detail-image .detail-img {
|
||||
|
||||
112
css/signIn.css
Normal file
112
css/signIn.css
Normal file
@@ -0,0 +1,112 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
}
|
||||
body {
|
||||
background-color: #eef2f5;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.signInBox-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10005;
|
||||
}
|
||||
.signInBox-mask .signInBox {
|
||||
width: 1060px;
|
||||
height: 658px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
filter: drop-shadow(0 -5px 0 #f7c308);
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-head {
|
||||
position: relative;
|
||||
height: 64px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-head .header-bi {
|
||||
width: 83px;
|
||||
height: 99px;
|
||||
position: absolute;
|
||||
top: -61px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-head .header-halo {
|
||||
width: 160px;
|
||||
height: 154px;
|
||||
position: absolute;
|
||||
top: -89px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-head .header-cross {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box {
|
||||
width: 538px;
|
||||
padding: 20px 30px;
|
||||
border-right: 1px dotted #d7d7d7;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header {
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: 40px;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-img {
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-value {
|
||||
font-family: Arial-Black, "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #000000;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-text {
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: normal;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-rule {
|
||||
margin-left: auto;
|
||||
}
|
||||
135
css/signIn.less
Normal file
135
css/signIn.less
Normal file
@@ -0,0 +1,135 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgba(238, 242, 245, 1);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.signInBox-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 10005;
|
||||
|
||||
.signInBox {
|
||||
width: 1060px;
|
||||
height: 658px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
filter: drop-shadow(0 -5px 0 rgba(247, 195, 8, 1));
|
||||
|
||||
.signInBox-head {
|
||||
position: relative;
|
||||
height: 64px;
|
||||
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
|
||||
.header-bi {
|
||||
width: 83px;
|
||||
height: 99px;
|
||||
position: absolute;
|
||||
top: -61px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header-halo {
|
||||
width: 160px;
|
||||
height: 154px;
|
||||
position: absolute;
|
||||
top: -89px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.header-cross {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.signInBox-content {
|
||||
.left-box {
|
||||
width: 538px;
|
||||
padding: 20px 30px;
|
||||
border-right: 1px dotted #d7d7d7;
|
||||
|
||||
.content-header {
|
||||
font-size: 15px;
|
||||
color: rgb(85, 85, 85);
|
||||
line-height: 40px;
|
||||
|
||||
.bi-img {
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.bi-value {
|
||||
font-family: Arial-Black, "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: rgb(0, 0, 0);
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.bi-text {
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
line-height: normal;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.bi-rule {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user