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

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

@ -30,7 +30,7 @@
background-color: var(--color-dark-light);
}
.nav li.active::after {
content: '';
content: "";
display: block;
width: 4px;
height: 60%;
@ -73,3 +73,15 @@
flex-shrink: 0;
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