mirror of
https://github.com/imsyy/SPlayer.git
synced 2025-11-25 11:29:26 +08:00
🌈 style: 修复部分样式显示错误
This commit is contained in:
@@ -148,20 +148,6 @@ const menuOptions = computed(() => [
|
||||
key: "record",
|
||||
icon: renderIcon("record"),
|
||||
},
|
||||
{
|
||||
label: () =>
|
||||
h(
|
||||
RouterLink,
|
||||
{
|
||||
to: {
|
||||
name: "videos",
|
||||
},
|
||||
},
|
||||
() => ["视频"],
|
||||
),
|
||||
key: "videos",
|
||||
icon: renderIcon("video"),
|
||||
},
|
||||
{
|
||||
key: "divider-1",
|
||||
type: "divider",
|
||||
|
||||
@@ -87,6 +87,7 @@ const changeThemeColor = (val, isCover = false) => {
|
||||
themeOverrides.value = {
|
||||
common:
|
||||
isCover && Object.keys(val)?.length
|
||||
? themeType.value === "dark"
|
||||
? {
|
||||
primaryColor,
|
||||
primaryColorHover,
|
||||
@@ -101,6 +102,12 @@ const changeThemeColor = (val, isCover = false) => {
|
||||
modalColor: `rgb(${coverAutobgCover})`,
|
||||
popoverColor: `rgb(${coverAutobgCover})`,
|
||||
}
|
||||
: {
|
||||
primaryColor,
|
||||
primaryColorHover,
|
||||
primaryColorPressed,
|
||||
primaryColorSuppl,
|
||||
}
|
||||
: mainColorData,
|
||||
Icon: { color: isCover ? primaryColor : null },
|
||||
};
|
||||
|
||||
@@ -139,6 +139,25 @@
|
||||
</n-text>
|
||||
<n-text v-else class="album">未知专辑</n-text>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<div class="action">
|
||||
<!-- 喜欢歌曲 -->
|
||||
<n-icon
|
||||
:depth="dataStore.getSongIsLike(item?.id) ? 0 : 3"
|
||||
class="favorite"
|
||||
size="20"
|
||||
@click.stop="
|
||||
dataStore.changeLikeList(item?.id, !dataStore.getSongIsLike(item?.id), item?.path)
|
||||
"
|
||||
@dblclick.stop
|
||||
>
|
||||
<SvgIcon
|
||||
:icon="
|
||||
dataStore.getSongIsLike(item?.id) ? 'favorite-rounded' : 'favorite-outline-rounded'
|
||||
"
|
||||
/>
|
||||
</n-icon>
|
||||
</div>
|
||||
<!-- 时长 -->
|
||||
<n-text v-if="item.duration" class="duration" depth="3">{{ item.duration }}</n-text>
|
||||
<n-text v-else class="duration"> -- </n-text>
|
||||
@@ -483,6 +502,23 @@ onBeforeUnmount(() => {
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
.action {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
.favorite {
|
||||
padding-top: 1px;
|
||||
transition: transform 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&:active {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.duration {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
|
||||
@@ -80,23 +80,6 @@ const routes = [
|
||||
},
|
||||
],
|
||||
},
|
||||
// 视频
|
||||
{
|
||||
path: "/videos",
|
||||
name: "videos",
|
||||
meta: {
|
||||
title: "视频",
|
||||
},
|
||||
component: () => import("@/views/Videos/index.vue"),
|
||||
redirect: "/videos/list",
|
||||
children: [
|
||||
{
|
||||
path: "list",
|
||||
name: "video-list",
|
||||
component: () => import("@/views/Videos/list.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
// 视频播放
|
||||
{
|
||||
path: "/videos-player",
|
||||
@@ -104,7 +87,7 @@ const routes = [
|
||||
meta: {
|
||||
title: "视频播放器",
|
||||
},
|
||||
component: () => import("@/views/Videos/player.vue"),
|
||||
component: () => import("@/views/player.vue"),
|
||||
},
|
||||
// 评论
|
||||
{
|
||||
|
||||
@@ -8,8 +8,7 @@
|
||||
v-for="item in artistInitials"
|
||||
:key="item"
|
||||
:bordered="false"
|
||||
:type="item.key == artistInitialChoose ? 'primary' : 'default'"
|
||||
class="tag"
|
||||
:class="['tag', { choose: item.key == artistInitialChoose }]"
|
||||
round
|
||||
@click="artistInitialChange(item.key)"
|
||||
>
|
||||
@@ -21,10 +20,12 @@
|
||||
<n-tag
|
||||
v-for="(item, index) in artistTypeNames"
|
||||
:key="item"
|
||||
:class="['tag', item.length > 2 ? 'hidden' : 'show']"
|
||||
:class="[
|
||||
'tag',
|
||||
item.length > 2 ? 'hidden' : 'show',
|
||||
{ choose: index == artistTypeNamesChoose },
|
||||
]"
|
||||
:bordered="false"
|
||||
:type="index == artistTypeNamesChoose ? 'primary' : 'default'"
|
||||
class="tag"
|
||||
round
|
||||
@click="artistTypeChange(index)"
|
||||
>
|
||||
@@ -199,6 +200,10 @@ onMounted(() => {
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
&.choose {
|
||||
background-color: var(--main-second-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
.category {
|
||||
margin-top: 18px;
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div class="videos">114514</div>
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div class="videos-list">111</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user