738 lines
18 KiB
Plaintext
738 lines
18 KiB
Plaintext
section.vh-container {
|
|
&>article.vh-article-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
|
|
&>header {
|
|
box-sizing: border-box;
|
|
padding: 2rem 1rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: max-content;
|
|
background-color: #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;
|
|
}
|
|
|
|
&>span {
|
|
&.count {
|
|
color: #3FA67F;
|
|
}
|
|
|
|
&.time {
|
|
color: #E9B740;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&>main {
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: max-content;
|
|
background-color: #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: var(--vh-color-default-88);
|
|
transition: background 0.16s ease-in-out, transform 0.16s ease-in-out;
|
|
|
|
&:hover {
|
|
background-color: var(--vh-color-default);
|
|
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,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
margin: 1.688rem 0 0.36rem;
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
word-break: break-all;
|
|
|
|
&:hover {
|
|
&::before {
|
|
color: #60a5fa7f;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
padding-right: 0.56rem;
|
|
content: "#";
|
|
color: #33333388;
|
|
transition: color 0.16s ease-in-out;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
padding-bottom: 1rem;
|
|
font-size: 1.58rem;
|
|
|
|
&.error-title {
|
|
font-size: 1.88rem;
|
|
}
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
// p标签样式
|
|
// ul标签样式
|
|
p,
|
|
ul:not(.vh-vhMusic ul),
|
|
ol:not(.vh-vhMusic ol) {
|
|
margin: 0;
|
|
padding: 0.618rem 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
|
|
li {
|
|
color: #9A9A9A;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
// 其下面的 a 标签样式
|
|
a {
|
|
box-shadow: inset 0 -.12em #60a5fa;
|
|
transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 -1.5em #60a5fa7f
|
|
}
|
|
}
|
|
|
|
// 其下面的code标签样式
|
|
code {
|
|
background-color: var(--vh-color-default);
|
|
padding: .125rem .375rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
ul:not(.vh-vhMusic ul),
|
|
ol:not(.vh-vhMusic ol) {
|
|
box-sizing: border-box;
|
|
padding-left: 1.25rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
blockquote {
|
|
padding: 0.188rem 0.58rem;
|
|
border-left: 5px solid #eee;
|
|
border-left-color: #929292;
|
|
background-color: #f3f5f7;
|
|
|
|
&>p {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
/* 全局表格样式 */
|
|
table {
|
|
box-sizing: border-box;
|
|
margin: 1rem 0;
|
|
width: 100%;
|
|
// border-collapse: collapse;
|
|
border-spacing: 0;
|
|
font-size: 0.9rem;
|
|
background-color: #fff;
|
|
border: 1px solid #EEEEEE;
|
|
border-radius: 0.38rem;
|
|
overflow: hidden;
|
|
|
|
a {
|
|
color: #49B1F5;
|
|
}
|
|
|
|
th {
|
|
text-align: center;
|
|
background-color: #f8f9fa;
|
|
padding: 0.75rem;
|
|
border-bottom: solid 1px #EEEEEE;
|
|
border-right: solid 1px #EEEEEE;
|
|
|
|
&:nth-last-of-type(1) {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
td {
|
|
padding: 0.618rem 0.75rem;
|
|
vertical-align: top;
|
|
border-bottom: solid 1px #EEEEEE;
|
|
border-right: solid 1px #EEEEEE;
|
|
|
|
&:nth-last-of-type(1) {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
tr {
|
|
transition: background-color 0.16s ease-in-out;
|
|
|
|
&:nth-last-of-type(1) {
|
|
td {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #f2f2f2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 自定义组件样式
|
|
.vh-node {
|
|
margin: 0.618rem 0;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: max-content;
|
|
overflow: hidden;
|
|
|
|
p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
// :::note
|
|
&.vh-note {
|
|
padding: 0.888rem;
|
|
border-left: 5px solid #eee;
|
|
border-left-color: #777;
|
|
border-radius: 3px;
|
|
background-color: #f7f7f7;
|
|
|
|
&.note-success {
|
|
border-color: #01C4B6;
|
|
border-left: 5px solid #01C4B6;
|
|
border-left-color: #01C4B6;
|
|
background-color: #01C4B618;
|
|
}
|
|
|
|
&.note-info {
|
|
border-color: #3253b4;
|
|
border-left: 5px solid #3253b4;
|
|
border-left-color: #3253b4;
|
|
background-color: #3253b418;
|
|
}
|
|
|
|
&.note-warning {
|
|
border-color: #DD8636;
|
|
border-left: 5px solid #DD8636;
|
|
border-left-color: #DD8636;
|
|
background-color: #DD863618;
|
|
}
|
|
|
|
&.note-error {
|
|
border-color: #DE3C3D;
|
|
border-left: 5px solid #DE3C3D;
|
|
border-left-color: #DE3C3D;
|
|
background-color: #DE3C3D18;
|
|
}
|
|
|
|
&.note-import {
|
|
border-left: 5px solid #B984DF;
|
|
border-left-color: #B984DF;
|
|
background-color: #B984DF18;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.875rem;
|
|
line-height: 2;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
// ::btn
|
|
&.vh-btn {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.618rem;
|
|
padding: 0 1.18rem;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
height: 2.28rem;
|
|
border: solid 1px #333;
|
|
border-radius: 0.28rem;
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
transition: background-color 0.18s ease-in-out;
|
|
z-index: 1;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
&::after {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
&::before {
|
|
flex-shrink: 0;
|
|
content: '';
|
|
background-color: #000;
|
|
mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
|
background-size: contain;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
background-color: var(--vh-color-default-66);
|
|
transition: height 0.16s ease-in-out;
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
&>span {
|
|
box-sizing: border-box;
|
|
color: #000;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
&.btn-success {
|
|
border-color: #01C4B6;
|
|
|
|
&>span {
|
|
color: #01C4B6;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #01C4B6;
|
|
}
|
|
}
|
|
|
|
&.btn-info {
|
|
border-color: #3253b4;
|
|
|
|
&>span {
|
|
color: #3253b4;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #3253b4;
|
|
}
|
|
}
|
|
|
|
&.btn-warning {
|
|
border-color: #DD8636;
|
|
|
|
&>span {
|
|
color: #DD8636;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #DD8636;
|
|
}
|
|
}
|
|
|
|
&.btn-error {
|
|
border-color: #DE3C3D;
|
|
|
|
&>span {
|
|
color: #DE3C3D;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #DE3C3D;
|
|
}
|
|
}
|
|
|
|
&.btn-import {
|
|
border-color: #B984DF;
|
|
|
|
&>span {
|
|
color: #B984DF;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #B984DF;
|
|
}
|
|
}
|
|
}
|
|
|
|
// :::picture
|
|
&.vh-picture {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
|
|
gap: .36rem;
|
|
|
|
// 其下面的图片
|
|
&>img.vh-article-img {
|
|
width: 100%;
|
|
aspect-ratio: 3 / 2;
|
|
border: solid 1px #E8E8E8;
|
|
border-radius: 5px;
|
|
object-fit: cover;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
// ::vhVideo
|
|
&.vh-vhVideo {
|
|
margin: 1.188rem 0;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border: solid 1px #E8E8E8;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// ::vhMusic
|
|
&.vh-vhMusic {
|
|
margin: 1.188rem 0;
|
|
width: 100%;
|
|
height: max-content;
|
|
min-height: 1rem;
|
|
|
|
&:not(.aplayer) {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 1.66rem;
|
|
height: 1.66rem;
|
|
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M304%2048a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zm0%20416a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM48%20304a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zm464-48a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM142.9%20437A48%2048%200%201%200%2075%20369.1%2048%2048%200%201%200%20142.9%20437zm0-294.2A48%2048%200%201%200%2075%2075a48%2048%200%201%200%2067.9%2067.9zM369.1%20437A48%2048%200%201%200%20437%20369.1%2048%2048%200%201%200%20369.1%20437z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
|
background-size: cover;
|
|
animation: vhRotate 1.66s linear infinite;
|
|
}
|
|
}
|
|
|
|
|
|
.aplayer-body {
|
|
.aplayer-info {
|
|
.aplayer-lrc {
|
|
.aplayer-lrc-contents {
|
|
p {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页面图片样式
|
|
img.vh-article-img {
|
|
box-sizing: border-box;
|
|
padding: .36rem;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
max-height: 36rem;
|
|
border: solid 1px #E8E8E8;
|
|
border-radius: 5px;
|
|
cursor: zoom-in;
|
|
cursor: -moz-zoom-in;
|
|
cursor: -webkit-zoom-in;
|
|
|
|
&:not(.loaded) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// 文章内代码块
|
|
section.vh-code-box {
|
|
margin: 1.188rem 0;
|
|
position: relative;
|
|
|
|
&>span.vh-code-copy {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right: 0.66rem;
|
|
top: 0.6rem;
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
border: solid 1px rgba(125, 125, 125, .2);
|
|
border-radius: 0.5rem;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
opacity: 0.66;
|
|
transition: all .16s;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(125, 125, 125, .2) url('data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23808080%22%20d%3D%22M368.37-237.37q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48%2024.26-58.74%2024.26-24.26%2058.74-24.26h378.26q34.48%200%2058.74%2024.26%2024.26%2024.26%2024.26%2058.74v474.26q0%2034.48-24.26%2058.74-24.26%2024.26-58.74%2024.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155%20238q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45%2011.96-29.48%2011.97-12.02%2029.33-12.02t29.54%2012.02q12.17%2012.03%2012.17%2029.48v515.76h419.76q17.45%200%2029.48%2011.96%2012.02%2011.97%2012.02%2029.33t-12.02%2029.54q-12.03%2012.17-29.48%2012.17H213.37Zm155-238v-474.26%20474.26Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
|
background-size: 1.16rem 1.16rem;
|
|
opacity: 0;
|
|
transition: opacity 0.16s;
|
|
}
|
|
|
|
&::after {
|
|
background: #01C4B6 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
|
background-size: 1.16rem 1.16rem;
|
|
}
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.success {
|
|
opacity: 1;
|
|
|
|
&::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
&>pre.astro-code {
|
|
box-sizing: border-box;
|
|
padding: 0.888rem;
|
|
border-radius: 0.618rem;
|
|
height: max-content;
|
|
max-height: 888px;
|
|
background-color: var(--vh-color-default-99) !important;
|
|
|
|
code {
|
|
box-sizing: border-box;
|
|
counter-reset: line;
|
|
|
|
&>span {
|
|
box-sizing: border-box;
|
|
font-size: 0.875rem;
|
|
line-height: 1.66;
|
|
|
|
&::before {
|
|
counter-increment: line;
|
|
content: counter(line);
|
|
display: inline-block;
|
|
width: 1rem;
|
|
padding-right: 0.618rem;
|
|
margin-right: 0.888rem;
|
|
border-right: 1px solid #e2e2e3;
|
|
color: #939296;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 文章内容样式结束=========================
|
|
}
|
|
}
|
|
|
|
// 滚动条样式
|
|
.os-theme-dark.os-scrollbar {
|
|
&>.os-scrollbar-track {
|
|
&>.os-scrollbar-handle {
|
|
background-color: #A3A8AF88;
|
|
|
|
&:hover {
|
|
background-color: #A3A8AF66;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 右侧滚动条
|
|
&.os-scrollbar-vertical {
|
|
&>.os-scrollbar-track {
|
|
&>.os-scrollbar-handle {
|
|
&:hover {
|
|
width: 0.56rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 底部滚动条
|
|
&.os-scrollbar-horizontal {
|
|
&>.os-scrollbar-track {
|
|
&>.os-scrollbar-handle {
|
|
&:hover {
|
|
height: 0.56rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 999px) {
|
|
section.vh-container {
|
|
&>article.vh-article-main {
|
|
&>header {
|
|
&>h1 {
|
|
font-size: 1.36rem;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.36rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.26rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.18rem;
|
|
}
|
|
|
|
|
|
.vh-node {
|
|
&.vh-picture {
|
|
grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 旋转动画
|
|
@keyframes vhRotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
/* 起始角度 */
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
/* 结束角度 */
|
|
}
|
|
} |