🍊
This commit is contained in:
Han
@@ -0,0 +1,48 @@
|
||||
.vh-about {
|
||||
gap: 1.25rem;
|
||||
|
||||
&>main {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
width: 100%;
|
||||
min-height: 5.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
&>h3 {
|
||||
box-sizing: border-box;
|
||||
padding: 0.88rem 0;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
&>.language-tool {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.56rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: max-content;
|
||||
|
||||
&>a {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
height: max-content;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
transition: transform 0.16s ease-in-out;
|
||||
|
||||
&>img {
|
||||
border-bottom: 1px solid #2563eb;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.12rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
section.vh-container {
|
||||
&>section.vh-archive-main {
|
||||
flex: 1;
|
||||
padding: 2rem 1rem;
|
||||
border-radius: 1rem;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
&>.archive-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
&>.archive-list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&>p,
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 1rem;
|
||||
transition: background .16s;
|
||||
|
||||
|
||||
&:not(.title) {
|
||||
|
||||
&:hover {
|
||||
background: #F5F6F8;
|
||||
|
||||
&>i {
|
||||
&::before {
|
||||
height: 50.66%;
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
padding-left: 0.28rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>em {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #00000080;
|
||||
}
|
||||
|
||||
&>i {
|
||||
|
||||
&::before {
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background: #4E667F;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.125rem;
|
||||
height: 1rem;
|
||||
left: calc(50% - 0.0625rem);
|
||||
transform: translateY(-50%);
|
||||
border-left: 2px dashed rgba(0, 0, 0, .1);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>span {
|
||||
font-size: 1rem;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>em {
|
||||
flex-shrink: 0;
|
||||
width: 5.05rem;
|
||||
height: 3.75rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 3.75rem;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&>i {
|
||||
position: relative;
|
||||
width: 2.5rem;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: block;
|
||||
width: 0.36rem;
|
||||
height: 0.36rem;
|
||||
border: solid 0.28rem #0000006D;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #0000004D;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
transition: all .16s;
|
||||
}
|
||||
|
||||
&>cite {
|
||||
margin-left: auto;
|
||||
width: 7.8rem;
|
||||
font-size: 0.875rem;
|
||||
color: #0000004D;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1198px) {
|
||||
section.vh-container {
|
||||
&>section.vh-archive-main {
|
||||
&>.archive-list {
|
||||
&>.archive-list-item {
|
||||
|
||||
&>p,
|
||||
a {
|
||||
&>cite {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
section.vh-container {
|
||||
&>section.vh-archive-main {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
&>.archive-list {
|
||||
&>.archive-list-item {
|
||||
|
||||
&>p,
|
||||
a {
|
||||
|
||||
&:not(.title) {
|
||||
&>em {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&>span {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>em {
|
||||
width: 3rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
&>i {
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
&>span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,630 @@
|
||||
section.vh-container {
|
||||
&>article.vh-article-main {
|
||||
flex: 1;
|
||||
padding: 1rem 0;
|
||||
min-width: 0;
|
||||
|
||||
// 文章内容样式开始=========================
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
box-sizing: border-box;
|
||||
margin: 1.188rem 0 0.36rem;
|
||||
font-size: 1rem;
|
||||
width: max-content;
|
||||
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;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
// p标签样式
|
||||
// ul标签样式
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0.618rem 0;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
|
||||
li {
|
||||
color: #33333388;
|
||||
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: #edeef3;
|
||||
padding: .125rem .375rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
/* 全局表格样式 */
|
||||
table {
|
||||
box-sizing: border-box;
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
// border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
font-size: 0.9rem;
|
||||
background: #fff;
|
||||
border: 1px solid #EEEEEE;
|
||||
border-radius: 0.38rem;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
color: #49B1F5;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// table {
|
||||
// box-sizing: border-box;
|
||||
// display: table;
|
||||
// width: 100%;
|
||||
// border-radius: 5px;
|
||||
// border-spacing: 0;
|
||||
// border-collapse: separate;
|
||||
// border-top: 1px solid var(--light-grey);
|
||||
// border-left: 1px solid var(--light-grey);
|
||||
// empty-cells: show;
|
||||
|
||||
|
||||
// thead {
|
||||
// background: rgba(153, 169, 191, .1);
|
||||
|
||||
// &>tr:first-child th:first-child {
|
||||
// border-top-left-radius: 5px
|
||||
// }
|
||||
|
||||
// &>tr:first-child th:last-child {
|
||||
// border-top-right-radius: 5px
|
||||
// }
|
||||
// }
|
||||
|
||||
// tbody {
|
||||
// &>tr:last-child td:first-child {
|
||||
// border-bottom-left-radius: 5px
|
||||
// }
|
||||
|
||||
// &>tr:last-child td:last-child {
|
||||
// border-bottom-right-radius: 5px
|
||||
// }
|
||||
// }
|
||||
|
||||
// td,
|
||||
// table th {
|
||||
// padding: 6px 12px;
|
||||
// border: 1px solid var(--light-grey);
|
||||
// border-top: none;
|
||||
// border-left: none;
|
||||
// vertical-align: middle
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
&>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.88rem;
|
||||
|
||||
&>.article-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.56rem;
|
||||
|
||||
&>svg {
|
||||
height: 0.86rem;
|
||||
width: 0.86rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义组件样式
|
||||
.vh-node {
|
||||
margin: 0.36rem 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// :::note
|
||||
&.vh-note {
|
||||
padding: 0.888rem;
|
||||
border-left: 5px solid #eee;
|
||||
border-left-color: #777;
|
||||
border-radius: 3px;
|
||||
background: #f7f7f7;
|
||||
|
||||
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: #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: #EDEEF366;
|
||||
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;
|
||||
}
|
||||
|
||||
&.success {
|
||||
border-color: #01C4B6;
|
||||
|
||||
&>span {
|
||||
color: #01C4B6;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #01C4B6;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
border-color: #3275B4;
|
||||
|
||||
&>span {
|
||||
color: #3275B4;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #3275B4;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: #DD8636;
|
||||
|
||||
&>span {
|
||||
color: #DD8636;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #DD8636;
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #DE3C3D;
|
||||
|
||||
&>span {
|
||||
color: #DE3C3D;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #DE3C3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// :::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: #EDEEF399 !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: #A3A8AF88;
|
||||
|
||||
&:hover {
|
||||
background: #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 {
|
||||
padding-top: 0;
|
||||
|
||||
&>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);
|
||||
/* 结束角度 */
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
@import url('/assets/font/index.css');
|
||||
|
||||
:root {
|
||||
--vh-animation-delay: 0ms;
|
||||
--vh-padding-top: calc(66px + 1rem);
|
||||
--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), 1388px)) / 2 + 1rem);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'SF Mono' !important;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
* {
|
||||
// IOS 点击阴影
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
// 隐藏滚动条
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
// 消除边框
|
||||
outline: none; // 隐藏滚动条
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
||||
&>body {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
padding: var(--vh-padding-top) 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: max-content;
|
||||
font-family: 'MiSans', serif;
|
||||
font-weight: 400;
|
||||
cursor: url(/assets/images/default.cur), default;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// 其他页面Header 封装
|
||||
header.vh-page-header {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
overflow: hidden;
|
||||
|
||||
&>h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 动画效果
|
||||
.vh-animation {
|
||||
opacity: 0;
|
||||
animation: 300ms fade-in-up;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
0% {
|
||||
transform: translateY(2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置图片懒加载样式
|
||||
main>.vh-container {
|
||||
img[data-vh-lz-src] {
|
||||
transition: all 0.18s ease-in;
|
||||
|
||||
&:not(.loaded) {
|
||||
filter: blur(0.88rem) brightness(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 加载进度条样式
|
||||
#nprogress {
|
||||
.bar {
|
||||
height: 0.28rem !important;
|
||||
background: #01C4B6 !important;
|
||||
}
|
||||
|
||||
.peg {
|
||||
box-shadow: 0 0 10px #01C4B6, 0 0 5px #01C4B6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
// 手机端 禁止选择
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
body {
|
||||
&::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='8' height='8' fill='none' stroke='rgb(0 0 0 / 0.1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&>main.vh-main {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 1388px;
|
||||
height: max-content;
|
||||
|
||||
&>section.vh-container {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 5.66rem;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
gap: 1.8rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
&>section:not(.article-list) {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
body {
|
||||
&>main.vh-main {
|
||||
&>section.vh-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
// 说说页评论
|
||||
.vh-links {
|
||||
gap: 1.25rem;
|
||||
|
||||
&>main {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
overflow: hidden;
|
||||
min-height: 5.5rem;
|
||||
|
||||
&>a {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
height: 5.5rem;
|
||||
border-radius: 0.88rem;
|
||||
transition: background-color 0.16s ease-in-out;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
background: #EDEEF3;
|
||||
|
||||
&>.avatar {
|
||||
transform: scale(1.2) rotate(8deg);
|
||||
}
|
||||
}
|
||||
|
||||
&>.avatar {
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.18rem;
|
||||
width: 3.36rem;
|
||||
height: 3.36rem;
|
||||
border-radius: 50%;
|
||||
border: solid 1px #E8E8E8;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition: all .16s;
|
||||
}
|
||||
|
||||
&>.link-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.388rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&>span {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
&>p {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
font-size: 0.81rem;
|
||||
color: #858585;
|
||||
line-height: 1rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1088px) {
|
||||
.vh-links {
|
||||
&>main {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 568px) {
|
||||
.vh-links {
|
||||
&>main {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
// 说说页评论
|
||||
.vh-talking {
|
||||
min-height: 56vh;
|
||||
|
||||
&>main {
|
||||
margin: 1.25rem 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
|
||||
&>article {
|
||||
box-sizing: border-box;
|
||||
padding: 2.188rem 1.875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
overflow: hidden;
|
||||
|
||||
&>header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.626rem;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
|
||||
&>img {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&>.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 1.26rem;
|
||||
overflow: hidden;
|
||||
|
||||
&>span {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&>time {
|
||||
font-size: 0.7rem;
|
||||
color: #858585;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 说说内容样式
|
||||
&>.main {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 3 / 2;
|
||||
border-radius: 0.375rem;
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
cursor: zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: -webkit-zoom-in;
|
||||
}
|
||||
|
||||
&>.vh-img-flex {
|
||||
box-sizing: border-box;
|
||||
padding: 0.8rem 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
|
||||
gap: 0.66rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
max-height: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
&>img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// 说说定位样式
|
||||
&>.geographical-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #49c7cc;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: url('/public/assets/images/local.svg') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
|
||||
&>span {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
width: max-content;
|
||||
line-height: 1.46rem;
|
||||
border: 1px solid #49b1f5;
|
||||
border-radius: 2rem;
|
||||
color: #49b1f5;
|
||||
font-size: 0.72rem;
|
||||
transition: all .2s ease-in-out;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
animation: talking-tag-active 0.16s ease-in-out infinite;
|
||||
color: #fff;
|
||||
background-color: #49b1f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
.vh-talking {
|
||||
&>main {
|
||||
&>article {
|
||||
padding: 1.06rem 0.88rem;
|
||||
|
||||
&>.main {
|
||||
&>.vh-img-flex {
|
||||
grid-template-columns: repeat(auto-fit, minmax(46%, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes talking-tag-active {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translateX(-1.66px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(1.66px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(-1.66px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
section.article-list {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding-bottom: 6rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
gap: 1.6rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&>.vh-article-item {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 1px #eee;
|
||||
border-radius: 1rem;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
&>a.vh-article-link {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.618rem;
|
||||
overflow: hidden;
|
||||
transition: background 0.16s;
|
||||
|
||||
&:hover {
|
||||
&>.vh-article-banner {
|
||||
&>img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-article-banner {
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 12rem;
|
||||
overflow: hidden;
|
||||
|
||||
&>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
// transition公共区域有动画效果
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>.vh-article-desc {
|
||||
box-sizing: border-box;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.36rem;
|
||||
|
||||
&>.vh-article-categories {
|
||||
box-sizing: border-box;
|
||||
width: max-content;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
/* 默认渐变色起始 */
|
||||
--gradient-color-1: #a32cc4;
|
||||
/* 默认渐变色中间 */
|
||||
--gradient-color-2: #b65fcf;
|
||||
/* 默认渐变色结束 */
|
||||
--gradient-color-3: #e39ff6;
|
||||
background: linear-gradient(118deg, var(--gradient-color-1), var(--gradient-color-2) 26%, var(--gradient-color-3));
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
|
||||
&.vh-categories-Code {
|
||||
/* 默认渐变色起始 */
|
||||
--gradient-color-1: #f48600;
|
||||
/* 默认渐变色中间 */
|
||||
--gradient-color-2: #ffa12e;
|
||||
/* 默认渐变色结束 */
|
||||
--gradient-color-3: #ffe9c9;
|
||||
}
|
||||
|
||||
&.vh-categories-Daily {
|
||||
/* 默认渐变色起始 */
|
||||
--gradient-color-1: #6270ee;
|
||||
/* 默认渐变色中间 */
|
||||
--gradient-color-2: #2b90d9;
|
||||
/* 默认渐变色结束 */
|
||||
--gradient-color-3: #37dede;
|
||||
}
|
||||
|
||||
&.vh-categories-Software {
|
||||
/* 默认渐变色起始 */
|
||||
--gradient-color-1: #006633;
|
||||
/* 默认渐变色中间 */
|
||||
--gradient-color-2: #00cc66;
|
||||
/* 默认渐变色结束 */
|
||||
--gradient-color-3: #66ff99;
|
||||
}
|
||||
}
|
||||
|
||||
&>.title {
|
||||
margin: 0;
|
||||
font-size: 1.18rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.36;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-article-excerpt {
|
||||
margin: 0.88rem 0 0.625rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.28rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&>footer {
|
||||
margin-top: auto;
|
||||
font-size: 0.875rem;
|
||||
color: #6E6E6E;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-article-pagination {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,343 @@
|
||||
aside.vh-aside {
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: var(--vh-padding-top);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 288px;
|
||||
height: max-content;
|
||||
|
||||
&>.vh-aside-item {
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-radius: 1rem;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&>h3 {
|
||||
padding-bottom: 0.618rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.68rem;
|
||||
width: 100%;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 0.25rem;
|
||||
height: 1.16rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #EDEEF3;
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
&.user {
|
||||
padding: 1.88rem 0;
|
||||
|
||||
&>.vh-aside-avatar {
|
||||
position: relative;
|
||||
width: 6.36rem;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 1rem;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
&>img {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
&>svg {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&>img,
|
||||
&>svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.28s, opacity 0.18s;
|
||||
}
|
||||
|
||||
&>img {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&>svg {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
transform: translate(-50%, 100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-aside-auther {
|
||||
position: relative;
|
||||
font-size: 1.25rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: -0.16rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 36%;
|
||||
height: 0.26rem;
|
||||
border-radius: 3px;
|
||||
background: #EDEEF3;
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-aside-motto {
|
||||
font-size: 0.86rem;
|
||||
color: #A3A3A3;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&>.vh-aside-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&>.vh-aside-links-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.88rem;
|
||||
height: 1.88rem;
|
||||
border: solid 1px #333;
|
||||
background: #fff;
|
||||
border-radius: 0.38rem;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background: #EDEEF366;
|
||||
transition: height 0.16s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&>img {
|
||||
width: 1.18rem;
|
||||
height: 1.18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分类
|
||||
&.categories {
|
||||
&>.vh-aside-categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
max-height: 15.56rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&>a {
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5rem 0.28rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 2.36rem;
|
||||
border-radius: 0.38rem;
|
||||
background: #fff;
|
||||
transition: all 0.16s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
padding-left: 0.66rem;
|
||||
background: #EDEEF388;
|
||||
|
||||
&>i {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&>i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 1.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
border-radius: 0.38rem;
|
||||
background: #EDEEF388;
|
||||
transition: background 0.16s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 最新文章
|
||||
&.articles {
|
||||
&>.vh-aside-articles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>a {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
border-bottom: 1px dashed #f3f2f2;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&>p {
|
||||
&>img {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
&.cover {
|
||||
flex-shrink: 0;
|
||||
width: 3.88rem;
|
||||
height: 3.88rem;
|
||||
border-radius: 0.288rem;
|
||||
overflow: hidden;
|
||||
|
||||
&>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.16s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
&>span {
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&>time {
|
||||
color: #858585;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标签
|
||||
&.tags {
|
||||
&>.vh-aside-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>a {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
|
||||
&:hover {
|
||||
&>span {
|
||||
background: #EDEEF3;
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.618rem;
|
||||
width: max-content;
|
||||
height: 1.75rem;
|
||||
border-radius: 0.38rem;
|
||||
background: #EDEEF388;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
line-height: 1.75rem;
|
||||
transition: background 0.16s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
aside.vh-aside {
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
section.vh-back-top {
|
||||
position: fixed;
|
||||
right: var(--vh-back-top);
|
||||
bottom: 2rem;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: #fff;
|
||||
transform: translateX(1rem);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
transition: transform .188s, opacity .18s;
|
||||
z-index: 9;
|
||||
|
||||
&.active {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&>svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(100% + 1px);
|
||||
height: calc(100% + 1px);
|
||||
|
||||
&.icon {
|
||||
width: 66%;
|
||||
height: 66%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
.vh-comment {
|
||||
box-sizing: border-box;
|
||||
padding: 2rem 1rem 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
overflow: hidden;
|
||||
|
||||
// 评论样式
|
||||
.twikoo {
|
||||
font-size: 0.88rem;
|
||||
|
||||
&:not(.tk-admin-container) {
|
||||
|
||||
// p标签样式
|
||||
// ul标签样式
|
||||
ul:not(.OwO-items):not(.OwO-packages),
|
||||
ol {
|
||||
margin: 0.618rem 0;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
|
||||
li {
|
||||
color: #33333388;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// 其下面的code标签样式
|
||||
code {
|
||||
background-color: #edeef3;
|
||||
padding: .125rem .375rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul:not(.OwO-items):not(.OwO-packages),
|
||||
ol {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #4c4948;
|
||||
font-weight: 500;
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 评论输入框Focus边框颜色
|
||||
.el-input__inner:focus,
|
||||
.el-textarea__inner:focus {
|
||||
border-color: #9999ff !important;
|
||||
}
|
||||
|
||||
// 及背景颜色
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
background-color: #F5F6F8 !important;
|
||||
}
|
||||
|
||||
// 评论内容样式
|
||||
.tk-comments {
|
||||
|
||||
// 评论输入框样式
|
||||
.tk-submit {
|
||||
&>.tk-row {
|
||||
&>.tk-col {
|
||||
&>.tk-input.el-textarea {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 0 26px;
|
||||
border: 1px solid #f0f0f0;
|
||||
|
||||
&>textarea {
|
||||
border: none;
|
||||
min-height: 188px !important;
|
||||
|
||||
&::placeholder {
|
||||
line-height: 1.88;
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tk-comments-container {
|
||||
.tk-comment {
|
||||
|
||||
// 作者的UI
|
||||
&.tk-master {
|
||||
&>.tk-main {
|
||||
&>.tk-row {
|
||||
&>.tk-meta {
|
||||
&>.tk-nick {
|
||||
position: relative;
|
||||
color: #9999ff;
|
||||
line-height: 1.18rem;
|
||||
|
||||
&.tk-nick-link {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: #9999ff;
|
||||
transition: all 0.28s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tk-avatar {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
|
||||
user-select: none;
|
||||
|
||||
&>img.tk-avatar-img {
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -0.4rem;
|
||||
bottom: -0.4rem;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background: #fff;
|
||||
background: url("/public/assets/images/admin.svg") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
.tk-main {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tk-main {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
|
||||
// 头部
|
||||
.tk-row {
|
||||
.tk-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.36rem;
|
||||
|
||||
&>.tk-nick {
|
||||
position: relative;
|
||||
color: #4c4948;
|
||||
line-height: 1.18rem;
|
||||
|
||||
&.tk-nick-link {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: #4c4948;
|
||||
transition: all 0.28s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tk-tag {
|
||||
color: #000;
|
||||
border-color: #000;
|
||||
background: transparent;
|
||||
border-radius: 2px;
|
||||
font-size: 0.72rem;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tk-time {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内容
|
||||
.tk-content {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-height: 66px;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.tk-owo-emotion {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// UA信息
|
||||
.tk-extras {
|
||||
padding-bottom: 0.28rem;
|
||||
font-size: 0.68rem;
|
||||
|
||||
.tk-extra {
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-radius: 0.2rem;
|
||||
background-color: #F5F6F8;
|
||||
}
|
||||
}
|
||||
|
||||
// 主体
|
||||
&>.tk-replies {
|
||||
padding-left: 1rem;
|
||||
border-left: 0.25rem solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 评论表情框样式
|
||||
.OwO .OwO-body {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
|
||||
.OwO-bar {
|
||||
.OwO-packages {
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
.vh-copyright {
|
||||
position: relative;
|
||||
margin: 1.868rem 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 0.618rem;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
box-sizing: border-box;
|
||||
padding: 1.88px;
|
||||
position: relative;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
color: #33333388;
|
||||
box-shadow: none !important;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: #60a5fa;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&>p {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
font-size: 0.875rem !important;
|
||||
|
||||
&>span {
|
||||
color: #9CC5FB;
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
position: absolute;
|
||||
right: 3.66rem;
|
||||
top: 0;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
opacity: 0.06;
|
||||
transform: scale(1.8);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 666px) {
|
||||
.vh-copyright {
|
||||
&>svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
header.vh-header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 3.6rem;
|
||||
background: #ffffff66;
|
||||
backdrop-filter: blur(2rem);
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
z-index: 9;
|
||||
|
||||
&>section.main {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
max-width: 1388px;
|
||||
|
||||
a,
|
||||
span.nav-btn-item {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: max-content;
|
||||
height: 80%;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
z-index: 1;
|
||||
transition: all 0.08s ease-in-out;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.5rem;
|
||||
background: #EDEEF3;
|
||||
opacity: 0;
|
||||
transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.search-btn {
|
||||
&>svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&.index {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>.link-list,
|
||||
&>.nav-btn {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding-right: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.88rem;
|
||||
height: 100%;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&>a,
|
||||
&>span {
|
||||
&.active {
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
display: flex;
|
||||
width: 1.08rem;
|
||||
height: 1.08rem;
|
||||
|
||||
&>svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&>.nav-btn {
|
||||
flex: none;
|
||||
width: max-content;
|
||||
|
||||
&>.menu-btn {
|
||||
display: none;
|
||||
|
||||
&>svg {
|
||||
box-sizing: border-box;
|
||||
padding: 0.36rem;
|
||||
width: 1.88rem;
|
||||
height: 1.88rem;
|
||||
border: 1px solid #EDEEF3;
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
header.vh-header {
|
||||
padding: 0;
|
||||
|
||||
&>section.main {
|
||||
a {
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
width: 1.18rem;
|
||||
height: 1.18rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>.link-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
header.vh-header {
|
||||
&>section.main {
|
||||
&>.nav-btn {
|
||||
&>.menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
// main.vh-main {
|
||||
|
||||
// &>header.main-header {
|
||||
// box-sizing: border-box;
|
||||
// width: 100%;
|
||||
// height: 10rem;
|
||||
// overflow: hidden;
|
||||
// transition: all 2s ease-in-out;
|
||||
// }
|
||||
|
||||
|
||||
// &.vh-index {
|
||||
// &>header.main-header {
|
||||
// height: 20rem;
|
||||
// transition: all 2s ease-in-out;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,115 @@
|
||||
.vh-mobilesidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
overflow: hidden;
|
||||
transition: opacity 0.16s ease-in-out, z-index 0.16s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
||||
&>.main {
|
||||
transform: translateX(0);
|
||||
|
||||
&>.vh-mobilesidebar-list {
|
||||
&>a {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>.main {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 17.6rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
transform: translateX(-1rem);
|
||||
transition: transform 0.16s ease-in;
|
||||
overflow: hidden;
|
||||
|
||||
&>.vh-mobilesidebar-list {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 0.618rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.26rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-radius: 0.75rem;
|
||||
background: #F8F9FA;
|
||||
overflow: hidden;
|
||||
|
||||
&.user-panel {
|
||||
&>h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&>a {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.618rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
font-size: 1rem;
|
||||
color: #66758c;
|
||||
font-weight: 600;
|
||||
border-radius: 0.375rem;
|
||||
transform: translateX(-1rem);
|
||||
overflow: hidden;
|
||||
transition: all 0.36s ease-in-out;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
transition: all 0.26s ease-in-out;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #3366FF;
|
||||
|
||||
&>span {
|
||||
&>svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
|
||||
&>svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
section.vh-article-pagination {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
&>a.vh-pagination-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
font-size: 0.875rem;
|
||||
color: #99a9bf;
|
||||
user-select: none;
|
||||
transition: background 0.16s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: rgba(129, 146, 174, 0.36);
|
||||
|
||||
&>svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #8192AE;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
||||
&>svg {
|
||||
fill: #E8E8E8;
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
fill: #99a9bf;
|
||||
transition: fill 0.16s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
.vh-search {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 3.75rem 1rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
overflow: hidden;
|
||||
transition: opacity 0.16s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
||||
&>main {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>main {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 888px;
|
||||
height: max-content;
|
||||
max-height: 88vh;
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
transform: translateY(-1rem);
|
||||
transition: transform 0.16s;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&>.search-input {
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.28rem;
|
||||
width: 100%;
|
||||
height: 2.425rem;
|
||||
background: #F6F6F6;
|
||||
border-radius: 0.66rem;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&>svg {
|
||||
flex-shrink: 0;
|
||||
width: 1.28rem;
|
||||
height: 1.28rem;
|
||||
}
|
||||
|
||||
&>input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
color: #9CA3AF;
|
||||
font-size: 0.875rem;
|
||||
background: transparent;
|
||||
transition: width 0.16s ease-in-out;
|
||||
|
||||
&::placeholder {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>.vh-search-list {
|
||||
margin-top: 1rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background: #fff;
|
||||
user-select: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
&>.vh-search-item {
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.38rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
width: 100%;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #000000E6;
|
||||
line-height: 1.16;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&>p {
|
||||
width: 100%;
|
||||
font-size: 0.875rem;
|
||||
color: #00000080;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
|
||||
&>span {
|
||||
color: #60a5fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user