Browse Source

add:调整设置样式

master
tiantian 5 months ago
parent
commit
9b18148c99
  1. 50
      frontend/src/components/setting/Setting.vue
  2. 14
      frontend/src/components/setting/setStyle.css

50
frontend/src/components/setting/Setting.vue

@ -1,10 +1,7 @@
<template> <template>
<div <div class="window-outer" :class="{
class="window-outer" focus: focusState && currentRouter !== 'main',
:class="{ }">
focus: focusState && currentRouter !== 'main',
}"
>
<div class="upbar" v-dragable> <div class="upbar" v-dragable>
<div class="upbar-left"> <div class="upbar-left">
<div class="back-arr" v-if="currentRouter !== 'main'" @click="back"></div> <div class="back-arr" v-if="currentRouter !== 'main'" @click="back"></div>
@ -12,7 +9,7 @@
{{ t("setting") }} {{ t("setting") }}
</div> </div>
</div> </div>
<div class="upbar-right"> <div class="upbar-right" v-if="!isMobileDevice()">
<WinUpButtonGroup :browser-window="browserWindow"></WinUpButtonGroup> <WinUpButtonGroup :browser-window="browserWindow"></WinUpButtonGroup>
</div> </div>
</div> </div>
@ -28,16 +25,10 @@
</div> </div>
<div class="outer_main"> <div class="outer_main">
<div class="main_uper"> <div class="main_uper">
<div <div class="set_item" v-for="item in setList" :key="item.title" @click="openSet(item.key)" v-glowing="{
class="set_item" color: '#3c3c3ce4',
v-for="item in setList" scale: 0.6,
:key="item.title" }">
@click="openSet(item.key)"
v-glowing="{
color: '#3c3c3ce4',
scale: 0.6,
}"
>
<div class="set_item-img"> <div class="set_item-img">
<!-- <img class="set_item-img-img" :src="item.icon" /> --> <!-- <img class="set_item-img-img" :src="item.icon" /> -->
<svg class="icon" aria-hidden="true" style="font-size: 2em"> <svg class="icon" aria-hidden="true" style="font-size: 2em">
@ -64,6 +55,7 @@ import { useSystem } from "@/system";
import { vDragable } from "@/system/window/MakeDragable"; import { vDragable } from "@/system/window/MakeDragable";
import { vGlowing } from "@/util/glowingBorder"; import { vGlowing } from "@/util/glowingBorder";
import { stepComponent } from "@/util/stepComponent"; import { stepComponent } from "@/util/stepComponent";
import { isMobileDevice } from "@/util/device";
const browserWindow = inject<BrowserWindow>("browserWindow")!; const browserWindow = inject<BrowserWindow>("browserWindow")!;
const sys = useSystem(); const sys = useSystem();
const currentRouter = ref(browserWindow.config?.router || "main"); const currentRouter = ref(browserWindow.config?.router || "main");
@ -126,6 +118,7 @@ const setList = ref([
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/assets/main.scss"; @import "@/assets/main.scss";
.window-outer { .window-outer {
background-color: white; background-color: white;
width: 100%; width: 100%;
@ -141,6 +134,7 @@ const setList = ref([
background-color: rgba(255, 255, 255, 0.704); background-color: rgba(255, 255, 255, 0.704);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.upbar { .upbar {
height: 40px; height: 40px;
width: 100%; width: 100%;
@ -148,11 +142,13 @@ const setList = ref([
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
user-select: none; user-select: none;
.upbar-left { .upbar-left {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
height: 100%; height: 100%;
.back-arr { .back-arr {
padding: 0 6px; padding: 0 6px;
margin-right: 3px; margin-right: 3px;
@ -163,15 +159,18 @@ const setList = ref([
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.back-arr:hover { .back-arr:hover {
color: var(--color-ui-gray); color: var(--color-ui-gray);
background-color: var(--color-dark); background-color: var(--color-dark);
} }
.upbar-text { .upbar-text {
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
} }
} }
.upbar-right { .upbar-right {
width: calc(100% - 200px); width: calc(100% - 200px);
display: flex; display: flex;
@ -225,10 +224,12 @@ const setList = ref([
width: 30px; width: 30px;
margin: 10px 16px; margin: 10px 16px;
flex-shrink: 0; flex-shrink: 0;
img { img {
width: 100%; width: 100%;
} }
} }
.set_item-right { .set_item-right {
flex: 1; flex: 1;
} }
@ -242,10 +243,12 @@ const setList = ref([
color: #999999; color: #999999;
} }
} }
.set_item:hover { .set_item:hover {
border: 1px solid #99999954; border: 1px solid #99999954;
box-shadow: 0 0 0 1px #999999 inset; box-shadow: 0 0 0 1px #999999 inset;
} }
.uper_tab { .uper_tab {
/* width: 90%; */ /* width: 90%; */
margin: 10px 10px -1px 10px; margin: 10px 10px -1px 10px;
@ -318,8 +321,21 @@ const setList = ref([
.fade-leave-from { .fade-leave-from {
opacity: 1; opacity: 1;
} }
.fade-enter-from, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
@media screen and (max-width: 768px) {
.window-outer {
width: 100%;
height: 100%;
border: none;
box-sizing: border-box;
// box-shadow: inset -599px 0px 0px 0px #ffffff;
transition: background-color 0.1s;
overflow: hidden;
}
}
</style> </style>

14
frontend/src/components/setting/setStyle.css

@ -30,7 +30,7 @@
background-color: var(--color-dark-light); background-color: var(--color-dark-light);
} }
.nav li.active::after { .nav li.active::after {
content: ''; content: "";
display: block; display: block;
width: 4px; width: 4px;
height: 60%; height: 60%;
@ -73,3 +73,15 @@
flex-shrink: 0; flex-shrink: 0;
text-align: right; text-align: right;
} }
@media screen and (max-width: 768px) {
.nav {
width: 25%;
}
.setting-item:first-child {
margin-top: 0px !important;
}
.setting-item label {
width: 80px;
text-align: left;
}
}

Loading…
Cancel
Save