优化手机端样式
This commit is contained in:
Han
+108
-40
@@ -1,9 +1,116 @@
|
||||
section.vh-container {
|
||||
&>article.vh-article-main {
|
||||
flex: 1;
|
||||
padding: 1rem 0;
|
||||
min-width: 0;
|
||||
|
||||
|
||||
&>header {
|
||||
box-sizing: border-box;
|
||||
padding: 2rem 1rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background: #fff;
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
box-shadow: 0 -3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
overflow: hidden;
|
||||
|
||||
&>h1 {
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&>.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.18rem;
|
||||
font-size: 0.85rem;
|
||||
|
||||
&>.article-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
width: max-content;
|
||||
|
||||
&>svg {
|
||||
flex-shrink: 0;
|
||||
height: 0.86rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&>time {
|
||||
color: #9A9A9A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>main {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background: #fff;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
box-shadow: 0 12px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
overflow: hidden;
|
||||
|
||||
&>.tag-list {
|
||||
box-sizing: border-box;
|
||||
padding-top: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.58rem;
|
||||
width: 100%;
|
||||
|
||||
&>a {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0.28rem 0.68rem;
|
||||
padding-left: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.18rem;
|
||||
height: 1.68rem;
|
||||
width: max-content;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 1rem;
|
||||
background-color: #F5F6F8;
|
||||
transition: background 0.16s ease-in-out, transform 0.16s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #EEEFF3;
|
||||
transform: translateY(-0.18rem);
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
content: '';
|
||||
width: 1.38rem;
|
||||
height: 1.38rem;
|
||||
background: #fff url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M345%2039.1L472.8%20168.4c52.4%2053%2052.4%20138.2%200%20191.2L360.8%20472.9c-9.3%209.4-24.5%209.5-33.9%20.2s-9.5-24.5-.2-33.9L438.6%20325.9c33.9-34.3%2033.9-89.4%200-123.7L310.9%2072.9c-9.3-9.4-9.2-24.6%20.2-33.9s24.6-9.2%2033.9%20.2zM0%20229.5L0%2080C0%2053.5%2021.5%2032%2048%2032l149.5%200c17%200%2033.3%206.7%2045.3%2018.7l168%20168c25%2025%2025%2065.5%200%2090.5L277.3%20442.7c-25%2025-65.5%2025-90.5%200l-168-168C6.7%20262.7%200%20246.5%200%20229.5zM144%20144a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
||||
background-size: 0.88rem;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>footer {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
// 文章内容样式开始=========================
|
||||
h1,
|
||||
h2,
|
||||
@@ -153,42 +260,6 @@ section.vh-container {
|
||||
}
|
||||
}
|
||||
|
||||
&>header {
|
||||
padding: 2rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
&>h1 {
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&>.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.18rem;
|
||||
font-size: 0.85rem;
|
||||
|
||||
&>.article-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
width: max-content;
|
||||
|
||||
&>svg {
|
||||
flex-shrink: 0;
|
||||
height: 0.86rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&>time {
|
||||
color: #9A9A9A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义组件样式
|
||||
.vh-node {
|
||||
margin: 0.618rem 0;
|
||||
@@ -509,7 +580,6 @@ section.vh-container {
|
||||
}
|
||||
|
||||
// 文章内容样式结束=========================
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -554,8 +624,6 @@ section.vh-container {
|
||||
section.vh-container {
|
||||
&>article.vh-article-main {
|
||||
&>header {
|
||||
padding-top: 0;
|
||||
|
||||
&>h1 {
|
||||
font-size: 1.36rem;
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@ html {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding: var(--vh-padding-top) 1rem 0;
|
||||
padding: var(--vh-padding-top) 0.5rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user