mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-03-19 04:29:45 +08:00
💄 调整UI
This commit is contained in:
@@ -22,7 +22,7 @@
|
||||
@click="onUserClick()"
|
||||
/>
|
||||
</div>
|
||||
<div class="tpc-bottom" v-if="card.data !== null">
|
||||
<div class="tpc-bottom">
|
||||
<div class="tpc-tags">
|
||||
<div v-for="(reason, idx) in card.reasons" :key="idx" class="tpc-reason" title="推荐理由">
|
||||
<v-icon size="12">mdi-lightbulb-on</v-icon>
|
||||
@@ -33,7 +33,7 @@
|
||||
<span>{{ topic.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tpc-data">
|
||||
<div class="tpc-data" v-if="card.data !== null">
|
||||
<div class="tpc-info-item" :title="`浏览数:${card.data.view}`">
|
||||
<v-icon size="12">mdi-eye</v-icon>
|
||||
<span>{{ card.data.view }}</span>
|
||||
@@ -60,7 +60,11 @@
|
||||
<v-icon size="12">mdi-calendar-clock</v-icon>
|
||||
<span>{{ card.meta.create_time }}</span>
|
||||
</div>
|
||||
<div class="tpc-info-item" :title="`更新时间: ${card.meta.update_time}`">
|
||||
<div
|
||||
v-if="card.meta.update_time"
|
||||
class="tpc-info-item"
|
||||
:title="`更新时间: ${card.meta.update_time}`"
|
||||
>
|
||||
<v-icon size="12">mdi-calendar-edit</v-icon>
|
||||
<span>{{ card.meta.update_time }}</span>
|
||||
</div>
|
||||
@@ -108,7 +112,7 @@ type TPostCardEmits = {
|
||||
type RenderForum = { name: string; icon: string; id: number };
|
||||
type RenderStatus = { stat: number; label: string; color: string };
|
||||
type RenderData = { mark: number; forward: number; like: number; reply: number; view: number };
|
||||
type RenderMeta = { create_time: string; update_time: string };
|
||||
type RenderMeta = { create_time: string; update_time?: string };
|
||||
export type RenderCard = {
|
||||
title: string;
|
||||
cover: string;
|
||||
@@ -173,7 +177,7 @@ function getPostCover(item: TGApp.BBS.Post.FullData): string {
|
||||
else if (item.post.images.length > 0) cover = item.post.images[0];
|
||||
if (cover === undefined) return "";
|
||||
if (cover.endsWith(".gif")) return cover;
|
||||
return `${cover}?x-oss-process=image/resize,m_fill,w_360,h_130,limit_0/format,png`;
|
||||
return `${cover}?x-oss-process=image/resize,m_fill,w_690,h_320,limit_0/format,png`;
|
||||
}
|
||||
|
||||
function getCommonCard(item: TGApp.BBS.Post.FullData): RenderCard {
|
||||
@@ -193,7 +197,8 @@ function getCommonCard(item: TGApp.BBS.Post.FullData): RenderCard {
|
||||
}
|
||||
const metaData: RenderMeta = {
|
||||
create_time: timestampToDate(Number(item.post.created_at) * 1000),
|
||||
update_time: timestampToDate(Number(item.post.updated_at) * 1000),
|
||||
update_time:
|
||||
item.post.updated_at === 0 ? undefined : timestampToDate(Number(item.post.updated_at) * 1000),
|
||||
};
|
||||
return {
|
||||
title: item.post.subject,
|
||||
@@ -289,7 +294,7 @@ function onUserClick(): void {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 36 / 13;
|
||||
aspect-ratio: 69 / 32;
|
||||
background: var(--common-shadow-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -227,7 +227,8 @@ function getWeaponTitle(): string {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
row-gap: 4px;
|
||||
border-radius: 4px;
|
||||
aspect-ratio: 21/10;
|
||||
}
|
||||
@@ -273,11 +274,11 @@ function getWeaponTitle(): string {
|
||||
:first-child {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--box-bg-4);
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="tur-ri-box">
|
||||
<div class="tur-ri-avatar">
|
||||
<TMiImg :ori="true" :src="role.avatar" alt="avatar" />
|
||||
</div>
|
||||
<div class="tur-ri-content">
|
||||
<div class="tur-ri-title">{{ role.nickname }}({{ uid }})</div>
|
||||
<div class="tur-ri-subtitle">Lv.{{ role.level }} {{ role.region }}</div>
|
||||
</div>
|
||||
<div class="tur-ri-avatar">
|
||||
<TMiImg :ori="true" :src="role.avatar" alt="avatar" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@@ -28,8 +28,8 @@ defineProps<TurRoleInfoProps>();
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
column-gap: 4px;
|
||||
padding: 4px;
|
||||
border-radius: 4px 24px 24px 4px;
|
||||
border-radius: 24px;
|
||||
padding: 4px 12px 4px 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ defineProps<TurRoleInfoProps>();
|
||||
.tur-ri-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -470,6 +470,10 @@ function handleSwitch(next: boolean): void {
|
||||
font-family: var(--font-text);
|
||||
}
|
||||
|
||||
.dark .uc-top-btn {
|
||||
border: 1px solid var(--common-shadow-2);
|
||||
}
|
||||
|
||||
.uc-grid {
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
|
||||
Reference in New Issue
Block a user