mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
💄 美化米游社咨讯页面
This commit is contained in:
BTMuli
@@ -117,7 +117,7 @@ export function getActivityCard(
|
|||||||
const startTime = new Date(Number(item.news_meta.start_at_sec) * 1000).toLocaleDateString();
|
const startTime = new Date(Number(item.news_meta.start_at_sec) * 1000).toLocaleDateString();
|
||||||
const endTime = new Date(Number(item.news_meta.end_at_sec) * 1000).toLocaleDateString();
|
const endTime = new Date(Number(item.news_meta.end_at_sec) * 1000).toLocaleDateString();
|
||||||
const statusInfo = getActivityStatus(item.news_meta.activity_status);
|
const statusInfo = getActivityStatus(item.news_meta.activity_status);
|
||||||
let commonCard = getCommonCard(item);
|
const commonCard = getCommonCard(item);
|
||||||
commonCard.subtitle = `${startTime} - ${endTime}`;
|
commonCard.subtitle = `${startTime} - ${endTime}`;
|
||||||
commonCard.status = statusInfo;
|
commonCard.status = statusInfo;
|
||||||
return activityCard.push(commonCard);
|
return activityCard.push(commonCard);
|
||||||
|
|||||||
@@ -15,6 +15,7 @@
|
|||||||
<v-icon>mdi-view-list</v-icon>
|
<v-icon>mdi-view-list</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
|
class="news-search"
|
||||||
v-show="appStore.devMode"
|
v-show="appStore.devMode"
|
||||||
v-model="search"
|
v-model="search"
|
||||||
append-icon="mdi-magnify"
|
append-icon="mdi-magnify"
|
||||||
@@ -33,26 +34,58 @@
|
|||||||
<img :src="item.cover" alt="cover" />
|
<img :src="item.cover" alt="cover" />
|
||||||
</div>
|
</div>
|
||||||
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
|
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
|
||||||
<v-card-actions>
|
<div class="news-card-info">
|
||||||
<v-btn class="news-btn" @click="toPost(item)">
|
<div class="news-card-user">
|
||||||
<img src="../assets/icons/circle-check.svg" alt="check" />
|
<div class="ncu-left">
|
||||||
<span>查看</span>
|
<div class="ncu-icon">
|
||||||
|
<img :src="item.user.icon" alt="userIcon" />
|
||||||
|
</div>
|
||||||
|
<div class="ncu-pendant" v-if="item.user.pendant !== ''">
|
||||||
|
<img :src="item.user.pendant" alt="userPendant" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ncu-right">
|
||||||
|
<span>{{ item.user.nickname }}</span>
|
||||||
|
<span>{{ item.user.label }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-btn class="news-card-btn" variant="outlined" @click="toPost(item)"> 查看详情 </v-btn>
|
||||||
|
<v-btn v-show="appStore.devMode" class="news-dev-btn" @click="toJson(item)">
|
||||||
|
<img src="../assets/icons/arrow-right.svg" alt="right" />
|
||||||
|
<span>JSON</span>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-card-subtitle>id:{{ item.postId }}</v-card-subtitle>
|
<div class="news-card-forum">
|
||||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
<img :src="item.forum.icon" alt="forumIcon" />
|
||||||
<template #prepend>
|
<span>{{ item.forum.name }}</span>
|
||||||
<img src="../assets/icons/arrow-right.svg" alt="right" />
|
</div>
|
||||||
</template>
|
<div class="news-card-data">
|
||||||
JSON
|
<!-- grid 布局，展示收藏、评论、点赞、转发、浏览 数-->
|
||||||
</v-btn>
|
<div class="ncd-item">
|
||||||
</v-card-actions>
|
<v-icon>mdi-eye</v-icon>
|
||||||
|
<span>{{ item.data.view }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-star</v-icon>
|
||||||
|
<span>{{ item.data.mark }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-comment</v-icon>
|
||||||
|
<span>{{ item.data.reply }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-heart</v-icon>
|
||||||
|
<span>{{ item.data.like }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-share-variant</v-icon>
|
||||||
|
<span>{{ item.data.forward }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="load-news">
|
<div class="load-news">
|
||||||
<v-btn :loading="loadingSub" @click="loadMore('notice')">
|
<v-btn :loading="loadingSub" @click="loadMore('notice')">
|
||||||
<template #append>
|
|
||||||
<img src="../assets/icons/arrow-left.svg" alt="right" />
|
|
||||||
</template>
|
|
||||||
已加载：{{ rawData.notice.lastId }}，加载更多
|
已加载：{{ rawData.notice.lastId }}，加载更多
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
@@ -62,41 +95,64 @@
|
|||||||
<v-card v-for="item in postData.activity" :key="item.postId" class="news-card">
|
<v-card v-for="item in postData.activity" :key="item.postId" class="news-card">
|
||||||
<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-act-process" :style="{ color: item.status?.colorCss }">
|
||||||
|
{{ item.status?.status }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
|
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
|
||||||
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
|
||||||
<v-card-actions>
|
<div class="news-card-info">
|
||||||
<v-btn class="news-btn" @click="toPost(item)">
|
<div class="news-card-user">
|
||||||
<template #prepend>
|
<div class="ncu-left">
|
||||||
<img src="../assets/icons/circle-check.svg" alt="check" />
|
<div class="ncu-icon">
|
||||||
<span>查看</span>
|
<img :src="item.user.icon" alt="userIcon" />
|
||||||
</template>
|
</div>
|
||||||
</v-btn>
|
<div class="ncu-pendant" v-if="item.user.pendant !== ''">
|
||||||
<v-card-subtitle>id:{{ item.postId }}</v-card-subtitle>
|
<img :src="item.user.pendant" alt="userPendant" />
|
||||||
<div v-show="!appStore.devMode">
|
</div>
|
||||||
<v-btn
|
</div>
|
||||||
:style="{
|
<div class="ncu-right">
|
||||||
background: item.status?.colorCss,
|
<span>{{ item.user.nickname }}</span>
|
||||||
color: '#faf7e8 !important',
|
<span>{{ item.user.label }}</span>
|
||||||
}"
|
</div>
|
||||||
>
|
|
||||||
{{ item.status?.status }}
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
</div>
|
||||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
<v-btn class="news-card-btn" variant="outlined" @click="toPost(item)"> 查看详情 </v-btn>
|
||||||
<template #prepend>
|
<v-btn v-show="appStore.devMode" class="news-dev-btn" @click="toJson(item)">
|
||||||
<img src="../assets/icons/arrow-right.svg" alt="right" />
|
<img src="../assets/icons/arrow-right.svg" alt="right" />
|
||||||
</template>
|
<span>JSON</span>
|
||||||
JSON
|
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-actions>
|
<div class="news-card-forum">
|
||||||
|
<img :src="item.forum.icon" alt="forumIcon" />
|
||||||
|
<span>{{ item.forum.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="news-card-data">
|
||||||
|
<!-- grid 布局，展示收藏、评论、点赞、转发、浏览 数-->
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-eye</v-icon>
|
||||||
|
<span>{{ item.data.view }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-star</v-icon>
|
||||||
|
<span>{{ item.data.mark }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-comment</v-icon>
|
||||||
|
<span>{{ item.data.reply }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-heart</v-icon>
|
||||||
|
<span>{{ item.data.like }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-share-variant</v-icon>
|
||||||
|
<span>{{ item.data.forward }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="load-news">
|
<div class="load-news">
|
||||||
<v-btn :loading="loadingSub" @click="loadMore('activity')">
|
<v-btn :loading="loadingSub" @click="loadMore('activity')">
|
||||||
<template #append>
|
|
||||||
<img src="../assets/icons/arrow-left.svg" alt="right" />
|
|
||||||
</template>
|
|
||||||
已加载:{{ rawData.activity.lastId }}，加载更多
|
已加载:{{ rawData.activity.lastId }}，加载更多
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
@@ -108,28 +164,58 @@
|
|||||||
<img :src="item.cover" alt="cover" />
|
<img :src="item.cover" alt="cover" />
|
||||||
</div>
|
</div>
|
||||||
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
|
<v-card-title class="news-card-title">{{ item.title }}</v-card-title>
|
||||||
<v-card-actions>
|
<div class="news-card-info">
|
||||||
<v-btn class="news-btn" @click="toPost(item)">
|
<div class="news-card-user">
|
||||||
<template #prepend>
|
<div class="ncu-left">
|
||||||
<img src="../assets/icons/circle-check.svg" alt="check" />
|
<div class="ncu-icon">
|
||||||
<span>查看</span>
|
<img :src="item.user.icon" alt="userIcon" />
|
||||||
</template>
|
</div>
|
||||||
|
<div class="ncu-pendant" v-if="item.user.pendant !== ''">
|
||||||
|
<img :src="item.user.pendant" alt="userPendant" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ncu-right">
|
||||||
|
<span>{{ item.user.nickname }}</span>
|
||||||
|
<span>{{ item.user.label }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<v-btn class="news-card-btn" variant="outlined" @click="toPost(item)"> 查看详情 </v-btn>
|
||||||
|
<v-btn v-show="appStore.devMode" class="news-dev-btn" @click="toJson(item)">
|
||||||
|
<img src="../assets/icons/arrow-right.svg" alt="right" />
|
||||||
|
<span>JSON</span>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-card-subtitle>id:{{ item.postId }}</v-card-subtitle>
|
<div class="news-card-forum">
|
||||||
<v-btn v-show="appStore.devMode" class="card-dev-btn" @click="toJson(item)">
|
<img :src="item.forum.icon" alt="forumIcon" />
|
||||||
<template #prepend>
|
<span>{{ item.forum.name }}</span>
|
||||||
<img src="../assets/icons/arrow-right.svg" alt="right" />
|
</div>
|
||||||
</template>
|
<div class="news-card-data">
|
||||||
JSON
|
<!-- grid 布局，展示收藏、评论、点赞、转发、浏览 数-->
|
||||||
</v-btn>
|
<div class="ncd-item">
|
||||||
</v-card-actions>
|
<v-icon>mdi-eye</v-icon>
|
||||||
|
<span>{{ item.data.view }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-star</v-icon>
|
||||||
|
<span>{{ item.data.mark }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-comment</v-icon>
|
||||||
|
<span>{{ item.data.reply }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-heart</v-icon>
|
||||||
|
<span>{{ item.data.like }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ncd-item">
|
||||||
|
<v-icon>mdi-share-variant</v-icon>
|
||||||
|
<span>{{ item.data.forward }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="load-news">
|
<div class="load-news">
|
||||||
<v-btn :loading="loadingSub" @click="loadMore('news')">
|
<v-btn :loading="loadingSub" @click="loadMore('news')">
|
||||||
<template #append>
|
|
||||||
<img src="../assets/icons/arrow-left.svg" alt="right" />
|
|
||||||
</template>
|
|
||||||
已加载：{{ rawData.news.lastId }}，加载更多
|
已加载：{{ rawData.news.lastId }}，加载更多
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
@@ -156,7 +242,7 @@ import { createTGWindow } from "../utils/TGWindow";
|
|||||||
|
|
||||||
// 路由
|
// 路由
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const gid = useRoute().params.gid;
|
const gid = <string>useRoute().params.gid;
|
||||||
const showNews = ref<boolean>(gid !== "5");
|
const showNews = ref<boolean>(gid !== "5");
|
||||||
|
|
||||||
// Store
|
// Store
|
||||||
@@ -275,24 +361,25 @@ async function loadMore(data: "notice" | "activity" | "news"): Promise<void> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function toPost(item: TGApp.Plugins.Mys.News.RenderCard | string) {
|
async function toPost(item: TGApp.Plugins.Mys.News.RenderCard | string) {
|
||||||
if (typeof item === "string") {
|
console.log(item);
|
||||||
const path = router.resolve({
|
// if (typeof item === "string") {
|
||||||
name: "帖子详情",
|
// const path = router.resolve({
|
||||||
params: {
|
// name: "帖子详情",
|
||||||
// eslint-disable-next-line camelcase
|
// params: {
|
||||||
post_id: item,
|
// // eslint-disable-next-line camelcase
|
||||||
},
|
// post_id: item,
|
||||||
}).href;
|
// },
|
||||||
createTGWindow(path, "帖子-Dev", item, 960, 720, false, false);
|
// }).href;
|
||||||
} else {
|
// createTGWindow(path, "帖子-Dev", item, 960, 720, false, false);
|
||||||
const path = router.resolve({
|
// } else {
|
||||||
name: "帖子详情",
|
// const path = router.resolve({
|
||||||
params: {
|
// name: "帖子详情",
|
||||||
post_id: item.postId.toString(),
|
// params: {
|
||||||
},
|
// post_id: item.postId.toString(),
|
||||||
}).href;
|
// },
|
||||||
createTGWindow(path, "帖子", item.title, 960, 720, false, false);
|
// }).href;
|
||||||
}
|
// createTGWindow(path, "帖子", item.title, 960, 720, false, false);
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
async function toJson(item: TGApp.Plugins.Mys.News.RenderCard | string) {
|
async function toJson(item: TGApp.Plugins.Mys.News.RenderCard | string) {
|
||||||
@@ -349,6 +436,10 @@ async function searchPost() {
|
|||||||
font-family: var(--font-title);
|
font-family: var(--font-title);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.news-search {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.news-grid {
|
.news-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
@@ -404,23 +495,167 @@ async function searchPost() {
|
|||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-btn {
|
/* news item info */
|
||||||
|
.news-card-info {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
margin: 0 10px 10px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-card-user {
|
||||||
|
display: flex;
|
||||||
|
max-width: 200px;
|
||||||
|
height: 50px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncu-left {
|
||||||
|
position: relative;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncu-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncu-icon img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncu-pendant {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncu-pendant img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncu-right {
|
||||||
|
display: flex;
|
||||||
|
height: 50px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncu-right :nth-child(1) {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: start;
|
||||||
border-radius: 5px;
|
font-size: 16px;
|
||||||
background: var(--common-btn-bg-2);
|
|
||||||
color: var(--common-btn-bgt-2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-btn img {
|
.ncu-right :nth-child(2) {
|
||||||
|
display: flex;
|
||||||
|
height: 20px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
border-top: 2px solid var(--common-shadow-2);
|
||||||
|
font-size: 8px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-card-forum {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 5px;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
background: rgb(0 0 0/20%);
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
box-shadow: 0 0 10px rgb(0 0 0);
|
||||||
|
color: #faf7e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-card-forum img {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-card-btn {
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-dev-btn {
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-left: auto;
|
||||||
|
background: var(--common-bg-1);
|
||||||
|
box-shadow: 0 0 10px var(--common-shadow-4);
|
||||||
|
color: var(--common-bgt-1);
|
||||||
|
font-family: var(--font-title);
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-dev-btn img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 5px;
|
||||||
|
background: var(--common-shadow-2);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.news-card-data {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 20px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 5px;
|
||||||
|
column-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ncd-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
color: var(--common-text-quote);
|
||||||
|
font-size: 12px;
|
||||||
|
gap: 5px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 活动页 */
|
||||||
|
.news-act-process {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 5px;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
background: rgb(0 0 0/20%);
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
box-shadow: 0 0 10px rgb(0 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
/* load more */
|
/* load more */
|
||||||
.load-news {
|
.load-news {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user