Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ 完成大别野卡片样式渲染

Browse Source
This commit is contained in:
BTMuli
2023-10-11 23:45:33 +08:00
parent b484e745e0
commit 3b0bc4b1a5
2 changed files with 48 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/assets/css/post-parser.css
View File

@@ -182,45 +182,44 @@
/* 大别野卡片 */
:deep(.mys-post-villa-card) {
position: relative;
display: flex;
overflow: hidden;
width: 800px;
height: auto;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
border: 1px solid var(--common-shadow-1);
border: 1px solid var(--common-shadow-2);
border-radius: 10px;
gap: 10px;
}
:deep(.mys-post-villa-card-bg-before) {
position: absolute;
z-index: 2;
top: 120px;
right: 0;
width: 100%;
height: calc(100% - 120px);
background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 80px, #ffffff);
}
:deep(.mys-post-villa-card-bg) {
position: absolute;
z-index: 1;
top: -40px;
right: 0;
width: 100%;
border-radius: 10px;
object-fit: cover;
}
:deep(.mys-post-villa-card-bg-before) {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0) 40px, var(--box-bg-1) 140px);
}
:deep(.mys-post-villa-card-flex) {
position: relative;
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
padding: 10px;
border-radius: 10px;
background-position-y: 10px;
object-fit: cover;
gap: 10px;
}
:deep(.mys-post-villa-card-top) {
z-index: 3;
display: flex;
width: 100%;
height: 100px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
@@ -235,13 +234,17 @@
:deep(.mys-post-villa-card-content) {
display: flex;
height: 100px;
height: 80px;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
}
:deep(.mys-post-villa-card-title) {
padding: 0 5px;
border-radius: 5px;
backdrop-filter: blur(5px);
background: var(--common-shadow-t-4);
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
@@ -252,24 +255,28 @@
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 0 5px;
border-radius: 5px;
backdrop-filter: blur(5px);
background: var(--common-shadow-t-2);
gap: 5px;
}
:deep(.mys-post-villa-card-desc-icon) {
width: 20px;
height: 20px;
width: 30px;
height: 30px;
border-radius: 50%;
}
:deep(.mys-post-villa-card-desc-text) {
color: var(--common-text-content);
font-family: var(--font-text);
font-size: 14px;
}
:deep(.mys-post-villa-card-mid) {
z-index: 3;
display: flex;
width: 100%;
height: 80px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
@@ -277,23 +284,18 @@
}
:deep(.mys-post-villa-card-tag) {
width: auto;
height: 40px;
padding: 5px;
padding: 2px 5px;
border-radius: 5px;
margin: 5px;
background: #f4f4f4;
color: #999999;
background: var(--box-bg-2);
color: var(--box-text-2);
font-family: var(--font-text);
font-size: 12px;
}
:deep(.mys-post-villa-card-bottom) {
z-index: 3;
width: 100%;
height: auto;
font-family: var(--font-title);
font-size: 16px;
font-size: 20px;
text-align: left;
}