mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
🎨 调整点击逻辑
This commit is contained in:
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :id="`anno_card_${props.modelValue.id}`" class="anno-card">
|
<div :id="`anno_card_${props.modelValue.id}`" class="anno-card">
|
||||||
<div class="anno-cover" :title="props.modelValue.title">
|
<div class="anno-cover" :title="props.modelValue.title" @click="createAnno">
|
||||||
<img :src="localBanner" alt="cover" @click="createAnno" v-if="localBanner" />
|
<img :src="localBanner" alt="cover" v-if="localBanner" />
|
||||||
<v-progress-circular
|
<v-progress-circular
|
||||||
color="primary"
|
color="primary"
|
||||||
:indeterminate="true"
|
:indeterminate="true"
|
||||||
v-else-if="props.modelValue.banner !== ''"
|
v-else-if="props.modelValue.banner !== ''"
|
||||||
/>
|
/>
|
||||||
<img src="/source/UI/defaultCover.webp" alt="cover" @click="createAnno" v-else />
|
<img src="/source/UI/defaultCover.webp" alt="cover" v-else />
|
||||||
<div class="anno-info">
|
<div class="anno-info">
|
||||||
<div class="anno-time">
|
<div class="anno-time">
|
||||||
<v-icon>mdi-clock-time-four-outline</v-icon>
|
<v-icon>mdi-clock-time-four-outline</v-icon>
|
||||||
@@ -109,6 +109,7 @@ async function shareAnno(): Promise<void> {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
aspect-ratio: 36 / 13;
|
aspect-ratio: 36 / 13;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.anno-cover img {
|
.anno-cover img {
|
||||||
@@ -177,7 +178,6 @@ async function shareAnno(): Promise<void> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.anno-cover img:hover {
|
.anno-cover img:hover {
|
||||||
cursor: pointer;
|
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
transition: all 0.3s linear;
|
transition: all 0.3s linear;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="card" :id="`post-card-${card.postId}`" class="tpc-card">
|
<div v-if="card" :id="`post-card-${card.postId}`" class="tpc-card">
|
||||||
<div class="tpc-cover">
|
<div class="tpc-cover" @click="createPost(card)">
|
||||||
<img :src="localCover" alt="cover" @click="createPost(card)" v-if="localCover" />
|
<img :src="localCover" alt="cover" v-if="localCover" />
|
||||||
<v-progress-circular color="primary" :indeterminate="true" v-else-if="card.cover !== ''" />
|
<v-progress-circular color="primary" :indeterminate="true" v-else-if="card.cover !== ''" />
|
||||||
<img src="/source/UI/defaultCover.webp" alt="cover" @click="createPost(card)" v-else />
|
<img src="/source/UI/defaultCover.webp" alt="cover" v-else />
|
||||||
<div v-if="isAct" class="tpc-act">
|
<div v-if="isAct" class="tpc-act">
|
||||||
<div class="tpc-status" :style="{ background: card.status?.colorCss }">
|
<div class="tpc-status" :style="{ background: card.status?.colorCss }">
|
||||||
{{ card.status?.status }}
|
{{ card.status?.status }}
|
||||||
@@ -251,6 +251,7 @@ async function shareCard(): Promise<void> {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
aspect-ratio: 36 / 13;
|
aspect-ratio: 36 / 13;
|
||||||
background: var(--common-shadow-2);
|
background: var(--common-shadow-2);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tpc-cover img {
|
.tpc-cover img {
|
||||||
@@ -319,7 +320,6 @@ async function shareCard(): Promise<void> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tpc-cover img:hover {
|
.tpc-cover img:hover {
|
||||||
cursor: pointer;
|
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
transition: all 0.3s linear;
|
transition: all 0.3s linear;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user