158 lines
4.3 KiB
Vue
158 lines
4.3 KiB
Vue
<template>
|
|
<div class="setting">
|
|
<el-collapse class="collapse" v-model="activeName" accordion>
|
|
<el-collapse-item title="个性壁纸" name="1">
|
|
<div class="bg-set">
|
|
<el-radio-group v-model="coverType" text-color="#ffffff" @change="radioChange">
|
|
<el-radio label="0" size="large" border>默认壁纸</el-radio>
|
|
<el-radio label="1" size="large" border>每日一图</el-radio>
|
|
<el-radio label="2" size="large" border>随机风景</el-radio>
|
|
<el-radio label="3" size="large" border>随机动漫</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="个性化调整" name="2">
|
|
<div class="item">
|
|
<span class="text">建站日期显示</span>
|
|
<el-switch
|
|
v-model="siteStartShow"
|
|
inline-prompt
|
|
:active-icon="CheckSmall"
|
|
:inactive-icon="CloseSmall"
|
|
/>
|
|
</div>
|
|
<div class="item">
|
|
<span class="text">音乐点击是否打开面板</span>
|
|
<el-switch
|
|
v-model="musicClick"
|
|
inline-prompt
|
|
:active-icon="CheckSmall"
|
|
:inactive-icon="CloseSmall"
|
|
/>
|
|
</div>
|
|
<div class="item">
|
|
<span class="text">底栏歌词显示</span>
|
|
<el-switch
|
|
v-model="playerLrcShow"
|
|
inline-prompt
|
|
:active-icon="CheckSmall"
|
|
:inactive-icon="CloseSmall"
|
|
/>
|
|
</div>
|
|
<div class="item">
|
|
<span class="text">底栏背景模糊</span>
|
|
<el-switch
|
|
v-model="footerBlur"
|
|
inline-prompt
|
|
:active-icon="CheckSmall"
|
|
:inactive-icon="CloseSmall"
|
|
/>
|
|
</div>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="播放器配置" name="3">
|
|
<div>设置内容待增加</div>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="其他设置" name="4">
|
|
<div>设置内容待增加</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { CheckSmall, CloseSmall, SuccessPicture } from "@icon-park/vue-next";
|
|
import { mainStore } from "@/store";
|
|
import { storeToRefs } from "pinia";
|
|
|
|
const store = mainStore();
|
|
const { coverType, siteStartShow, musicClick, playerLrcShow, footerBlur } = storeToRefs(store);
|
|
|
|
// 默认选中项
|
|
const activeName = ref("1");
|
|
|
|
// 壁纸切换
|
|
const radioChange = () => {
|
|
ElMessage({
|
|
message: "壁纸设置成功，刷新后生效",
|
|
icon: h(SuccessPicture, {
|
|
theme: "filled",
|
|
fill: "#efefef",
|
|
}),
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.setting {
|
|
.collapse {
|
|
border-radius: 8px;
|
|
--el-collapse-content-bg-color: #ffffff10;
|
|
border-color: transparent;
|
|
overflow: hidden;
|
|
|
|
:deep(.el-collapse-item__header) {
|
|
background-color: #ffffff30;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
padding-left: 18px;
|
|
border-color: transparent;
|
|
}
|
|
|
|
:deep(.el-collapse-item__wrap) {
|
|
border-color: transparent;
|
|
|
|
.el-collapse-item__content {
|
|
padding: 20px;
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
.el-switch__core {
|
|
border-color: transparent;
|
|
background-color: #ffffff30;
|
|
}
|
|
}
|
|
.bg-set {
|
|
.el-radio-group {
|
|
justify-content: space-between;
|
|
|
|
.el-radio {
|
|
margin: 10px 16px;
|
|
background: #ffffff26;
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
|
|
.el-radio__label {
|
|
color: #fff;
|
|
}
|
|
|
|
.el-radio__inner {
|
|
background: #ffffff06 !important;
|
|
border: 2px solid #eeeeee !important;
|
|
}
|
|
|
|
&.is-checked {
|
|
background: #ffffff06 !important;
|
|
border: 2px solid #eeeeee !important;
|
|
}
|
|
|
|
.is-checked {
|
|
.el-radio__inner {
|
|
background-color: #ffffff30 !important;
|
|
border-color: #fff !important;
|
|
}
|
|
|
|
& + .el-radio__label {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|