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

♻️ 换了种实现方式

Browse Source
This commit is contained in:
BTMuli
2023-06-28 21:47:18 +08:00
parent 40ae3ffca5
commit 3f5b7a370e
1 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/t-news.vue
View File

@@ -107,15 +107,6 @@
<div class="news-cover" @click="toPost(item)"> <div class="news-cover" @click="toPost(item)">
<img :src="item.cover" alt="cover" /> <img :src="item.cover" alt="cover" />
<div class="news-card-act"> <div class="news-card-act">
<!-- 底层过渡 -->
<div
class="nca-status-bg"
:style="{
background: item.status?.colorCss,
}"
>
{{ item.status?.status }}
</div>
<div <div
class="nca-status" class="nca-status"
:style="{ :style="{
@@ -703,24 +694,31 @@ async function searchPost() {
font-size: 12px; font-size: 12px;
} }
.nca-status-bg { .nca-status {
position: absolute; position: relative;
top: 0; display: flex;
left: 0;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding: 5px 30px 5px 5px; padding: 5px 30px 5px 5px;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%); clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
opacity: 0.6;
}
.nca-status {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 20px 5px 5px;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
color: #faf7e8; color: #faf7e8;
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(255 255 255/40%);
clip-path: polygon(
calc(100% - 25px) 0,
100% 0,
100% 100%,
calc(100% - 25px) 100%,
calc(100% - 10px) 50%
);
content: "";
}
} }
.nca-time { .nca-time {