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

💄 调整帖子卡片颜色，对于宽度不低于690的图片进行铺满

Browse Source
This commit is contained in:
目棃
2024-09-07 10:55:15 +08:00
parent 3517f9182a
commit 5bc687109b
2 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/main/t-postcard.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<v-card rounded v-if="card"> <v-card :rounded="true" v-if="card">
<div class="tpc-cover"> <div class="tpc-cover">
<img :src="card.cover" alt="cover" @click="createPost(card)" /> <img :src="card.cover" alt="cover" @click="createPost(card)" />
<div v-if="isAct" class="tpc-act"> <div v-if="isAct" class="tpc-act">
@@ -100,19 +100,19 @@ onBeforeMount(() => {
const EnumStatus = { const EnumStatus = {
STARTED: { STARTED: {
status: "进行中", status: "进行中",
colorCss: "#1EE2BA", colorCss: "var(--tgc-od-green)",
}, },
FINISHED: { FINISHED: {
status: "已结束", status: "已结束",
colorCss: "#C0C5C8", colorCss: "var(--tgc-od-white)",
}, },
SELECTION: { SELECTION: {
status: "评选中", status: "评选中",
colorCss: "#FF983B", colorCss: "var(--tgc-od-orange)",
}, },
UNKNOWN: { UNKNOWN: {
status: "未知", status: "未知",
colorCss: "#F03F24", // 胭脂红 colorCss: "var(--tgc-od-red)",
}, },
}; };

11
src/components/post/tp-image.vue
View File

@@ -3,13 +3,13 @@
<img :src="localUrl" :alt="props.data.insert.image" :title="getImageTitle()" /> <img :src="localUrl" :alt="props.data.insert.image" :title="getImageTitle()" />
</div> </div>
<div v-else class="tp-image-load" :title="getImageUrl()"> <div v-else class="tp-image-load" :title="getImageUrl()">
<v-progress-circular indeterminate color="primary" size="small" /> <v-progress-circular :indeterminate="true" color="primary" size="small" />
<span>加载中...</span> <span>加载中...</span>
</div> </div>
<TpoImage :image="props.data" v-model="showOverlay" /> <TpoImage :image="props.data" v-model="showOverlay" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue"; import { computed, ref, onMounted, onUnmounted } from "vue";
import { saveImgLocal } from "../../utils/TGShare.js"; import { saveImgLocal } from "../../utils/TGShare.js";
import { bytesToSize } from "../../utils/toolFunc.js"; import { bytesToSize } from "../../utils/toolFunc.js";
@@ -37,6 +37,12 @@ const props = defineProps<TpImageProps>();
const showOverlay = ref(false); const showOverlay = ref(false);
const localUrl = ref<string | undefined>(undefined); const localUrl = ref<string | undefined>(undefined);
const imgWidth = computed<string>(() => {
if (props.data.attributes === undefined) return "auto";
if (props.data.attributes.width >= 690) return "100%";
return `${props.data.attributes.width}px`;
});
console.log("tp-image", props.data.insert.image, props.data.attributes); console.log("tp-image", props.data.insert.image, props.data.attributes);
onMounted(async () => { onMounted(async () => {
@@ -79,6 +85,7 @@ function getImageUrl(): string {
} }
.tp-image-box img { .tp-image-box img {
width: v-bind(imgWidth);
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 10px; border-radius: 10px;