Improve styles

This commit is contained in:
the1812 2025-04-04 11:49:08 +08:00
parent 9d5f1cb02e
commit fd02464c5e
2 changed files with 20 additions and 4 deletions

View File

@ -104,10 +104,12 @@ defineExpose({
.banner-game-card {
position: relative;
overflow: hidden;
background-color: #8882;
@include v-stretch();
@include round-corner();
img {
transition: transform 0.2s ease-out;
aspect-ratio: 15 / 8;
}
&:hover img {
transform: scale(1.05);
@ -130,6 +132,11 @@ defineExpose({
min-width: 0;
flex: 1;
transition: color 0.2s ease-out;
img {
background-color: #8882;
border-radius: 16px;
aspect-ratio: 1 / 1;
}
&:hover {
color: var(--theme-color) !important;
}
@ -150,9 +157,10 @@ defineExpose({
@include semi-bold();
}
.list-game-cards {
@include v-stretch(8px);
@include v-stretch();
.list-game-card {
@include single-line();
padding: 4px 0;
opacity: 0.6;
transition: all 0.2s ease-out;
&:hover {

View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue'
import { VLoading } from '@/ui'
import { bilibiliApi } from '@/core/ajax'
import { CustomNavbarItem } from '../custom-navbar-item'
import { usePopper } from '../mixins'
@ -91,8 +92,8 @@ defineExpose({
class="hot-manga-card"
:title="card.title"
:href="'https://manga.bilibili.com/detail/mc' + card.comic_id"
@mouseover="previewCard = card"
@mouseout="previewCard = undefined"
@mouseenter="previewCard = card"
@mouseleave="previewCard = undefined"
>
<div class="hot-manga-card-title">
{{ card.title }}
@ -135,6 +136,8 @@ defineExpose({
.recommend-manga-card-image {
@include v-stretch();
@include round-corner();
background: #8882;
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
}
@ -160,10 +163,11 @@ defineExpose({
@include semi-bold();
}
.custom-navbar-manga-hot-list {
@include v-stretch(8px);
@include v-stretch();
counter-reset: manga-item;
.hot-manga-card {
@include h-center(6px);
padding: 4px 0;
&-title {
@include single-line();
transition: color 0.2s ease-out, opacity 0.2s ease-out;
@ -206,8 +210,12 @@ defineExpose({
height: calc(100% - #{$gap});
background-image: linear-gradient(to left, #fff 75%, transparent);
padding: 18px 18px 18px 60px;
body.dark & {
background-image: linear-gradient(to left, #222 75%, transparent);
}
img {
display: flex;
background: #8882;
height: 100%;
aspect-ratio: 169 / 225;
@include round-corner();