From 0b6d0950e9e92d767d23b6d9eeb4d3746c5c48a4 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Sat, 13 May 2023 14:05:05 +0800
Subject: [PATCH] settings panel style

---
 src/components/KUNGalgameSettingPanel.vue     | 267 ------------------
 src/components/KUNGalgameTopBar.vue           |   4 +-
 .../setting-panel/KUNGalgameSettingPanel.vue  | 134 +++++++++
 .../setting-panel/components/Background.vue   | 140 +++++++++
 .../setting-panel/components/Loli.vue         |  67 +++++
 .../setting-panel/components/SwitchButton.vue |  55 ++++
 6 files changed, 398 insertions(+), 269 deletions(-)
 delete mode 100644 src/components/KUNGalgameSettingPanel.vue
 create mode 100644 src/components/setting-panel/KUNGalgameSettingPanel.vue
 create mode 100644 src/components/setting-panel/components/Background.vue
 create mode 100644 src/components/setting-panel/components/Loli.vue
 create mode 100644 src/components/setting-panel/components/SwitchButton.vue

diff --git a/src/components/KUNGalgameSettingPanel.vue b/src/components/KUNGalgameSettingPanel.vue
deleted file mode 100644
index 92dd510f..00000000
--- a/src/components/KUNGalgameSettingPanel.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-/* 导入 loli 数据 */
-import {
-  loliBodyLeft,
-  loliBodyTop,
-  loliEyeLeft,
-  loliEyeTop,
-  loliBrowLeft,
-  loliBrowTop,
-  loliMouthLeft,
-  loliMouthTop,
-  loliFaceLeft,
-  loliFaceTop,
-  lass,
-  eye,
-  brow,
-  mouth,
-  face,
-} from '@/utils/loli'
-</script>
-
-<template>
-  <div class="root">
-    <div class="container">
-      <div class="title">设置面板</div>
-      <div class="mode">
-        <span>模式切换</span>
-        <div class="mode-container">
-          <li>
-            <Icon
-              class="sun"
-              icon="line-md:moon-filled-alt-to-sunny-filled-loop-transition"
-            />
-          </li>
-          <li>
-            <Icon
-              class="moon"
-              icon="line-md:sunny-outline-to-moon-loop-transition"
-            />
-          </li>
-        </div>
-      </div>
-      <div>
-        <span>主页页面宽度设置</span>
-        <div class="page-width">
-          <span>61.8%</span><input class="main" type="range" /><span>90%</span>
-        </div>
-      </div>
-
-      <div class="kungalgame-background">
-        背景设置
-        <ul class="kungalgame-background-container">
-          <li>
-            <span>使用我们的预设的背景</span>
-            <!-- 预设背景集 -->
-            <ul class="kungalgame-reset-bg">
-              <li><img src="@/assets/images/bg/bg1-m.png" /></li>
-              <li><img src="@/assets/images/bg/bg2-m.png" /></li>
-              <li><img src="@/assets/images/bg/bg3-m.png" /></li>
-              <li><img src="@/assets/images/bg/bg4-m.png" /></li>
-              <li><img src="@/assets/images/bg/bg5-m.png" /></li>
-              <li><img src="@/assets/images/bg/bg6-m.png" /></li>
-              <li><img src="@/assets/images/bg/bg7-m.png" /></li>
-              <li><img src="@/assets/images/bg/bg8-m.png" /></li>
-              <li><img src="@/assets/images/bg/bg9-m.png" /></li>
-            </ul>
-          </li>
-          <!-- 用户自定义背景 -->
-          <li>
-            <span>自定义背景</span>
-            <div class="kungalgamer-bg">
-              <span>请在这里粘贴图片url</span>
-              <div class="bg-url-input">
-                <input type="text" required />
-                <button>确定</button>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="fix-loli">是否固定看板娘</div>
-      <div class="reset">恢复默认设置</div>
-    </div>
-    <!-- 看板娘 -->
-    <div class="loli">
-      <!-- 身体 -->
-      <img class="lass" :src="lass" alt="ren" />
-      <img class="eye" :src="eye" alt="ren" />
-      <img class="brow" :src="brow" alt="ren" />
-      <img class="mouth" :src="mouth" alt="ren" />
-      <img class="face" :src="face" alt="ren" />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.root {
-  width: 300px;
-  height: 1100px;
-  top: 65px;
-  right: 0;
-  position: absolute;
-  background-color: @kungalgame-trans-white-5;
-  backdrop-filter: blur(5px);
-  border-radius: 10px;
-  z-index: 1007;
-}
-.container {
-  margin: 10px;
-  font-size: 17px;
-  & > div {
-    margin: 10px 0;
-  }
-}
-.title {
-  font-size: 23px;
-}
-.mode {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.mode-container {
-  font-size: 25px;
-  width: 60%;
-  display: flex;
-  justify-content: space-around;
-  li:nth-child(1) {
-    color: @kungalgame-red-4;
-  }
-  li:nth-child(2) {
-    color: @kungalgame-blue-4;
-  }
-}
-.page-width {
-  font-size: 15px;
-  display: flex;
-}
-.main {
-  width: 100%;
-}
-/* 背景设置 */
-.kungalgame-background-container {
-  display: block;
-  /* 背景菜单的高度 */
-  height: 300px;
-  top: 100%;
-  left: 0%;
-  background-color: @kungalgame-blue-0;
-  box-shadow: 1px 2px 1px 1px @kungalgame-trans-red-3;
-  font-size: 15px;
-  font-weight: normal;
-  color: @kungalgame-font-color-3;
-}
-/* 背景容器的标题字体 */
-.kungalgame-background-container span {
-  height: 30px;
-  /* 居中 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-/* 背景图片略缩图三行三列 grid */
-.kungalgame-reset-bg {
-  display: grid;
-  grid-template-columns: repeat(3, 80px);
-  grid-template-rows: repeat(3, 50px);
-  color: @kungalgame-font-color-3;
-  position: relative;
-  /* 距离下方区域的距离 */
-  margin-bottom: 17px;
-}
-/* 单个图片居中 */
-.kungalgame-reset-bg li {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-/* 单个图片的距离 */
-.kungalgame-reset-bg img {
-  width: 70px;
-}
-/* 图片的 hover */
-.kungalgame-reset-bg img:hover {
-  width: 200px;
-  transition: 0.2s;
-  z-index: 7;
-}
-.kungalgamer-bg {
-  display: flex;
-  flex-direction: column;
-}
-/* url 的粘贴框 */
-.bg-url-input {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.bg-url-input input {
-  padding-left: 5px;
-  height: 25px;
-  border: 1px solid @kungalgame-blue-4;
-}
-/* 粘贴框的 focus */
-.bg-url-input input:focus {
-  outline: none;
-  background-color: @kungalgame-trans-red-0;
-}
-/* 确定按钮 */
-.bg-url-input button {
-  padding: 0 10px;
-  height: 25px;
-  box-sizing: border-box;
-  border: 1px solid @kungalgame-blue-4;
-  border-left: none;
-  background-color: @kungalgame-trans-white-5;
-  cursor: pointer;
-}
-/* 确定按钮的 hover */
-.bg-url-input button:hover {
-  background-color: @kungalgame-trans-blue-0;
-}
-/* 确定按钮的 active */
-.bg-url-input button:active {
-  background-color: @kungalgame-trans-red-3;
-}
-.loli {
-  height: 100%;
-  margin: auto;
-  position: relative;
-  left: -148px;
-}
-.lass {
-  position: absolute;
-  left: v-bind(loliBodyLeft);
-  top: v-bind(loliBodyTop);
-}
-.eye {
-  position: absolute;
-  left: v-bind(loliEyeLeft);
-  top: v-bind(loliEyeTop);
-}
-.brow {
-  position: absolute;
-  left: v-bind(loliBrowLeft);
-  top: v-bind(loliBrowTop);
-}
-.mouth {
-  position: absolute;
-  left: v-bind(loliMouthLeft);
-  top: v-bind(loliMouthTop);
-}
-.face {
-  position: absolute;
-  left: v-bind(loliFaceLeft);
-  top: v-bind(loliFaceTop);
-}
-@media (max-height: 1100px) {
-  .loli {
-    display: none;
-  }
-  .root {
-    height: 400px;
-  }
-}
-</style>
diff --git a/src/components/KUNGalgameTopBar.vue b/src/components/KUNGalgameTopBar.vue
index 311fa02f..22d9a762 100644
--- a/src/components/KUNGalgameTopBar.vue
+++ b/src/components/KUNGalgameTopBar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import KUNGalgameSettingsPanel from './KUNGalgameSettingPanel.vue'
+import KUNGalgameSettingsPanel from './setting-panel/KUNGalgameSettingPanel.vue'
 import { Icon } from '@iconify/vue'
 import { onBeforeMount, ref } from 'vue'
 import 'animate.css'
@@ -104,7 +104,7 @@ onBeforeMount(() => {})
   transition: right 0.5s;
 }
 .kungalgame-panel-enter, .kungalgame-panel-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  right: -300px;
+  right: -600px;
 }
 /* 头部样式 */
 .header {
diff --git a/src/components/setting-panel/KUNGalgameSettingPanel.vue b/src/components/setting-panel/KUNGalgameSettingPanel.vue
new file mode 100644
index 00000000..6779d8da
--- /dev/null
+++ b/src/components/setting-panel/KUNGalgameSettingPanel.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import Loli from './components/Loli.vue'
+import Background from './components/Background.vue'
+import SwitchButton from './components/SwitchButton.vue'
+</script>
+
+<template>
+  <div class="root">
+    <div class="container">
+      <div class="title">
+        <span>设置面板</span><Icon class="settings-icon" icon="uiw:setting-o" />
+      </div>
+      <div class="mode">
+        <span>模式切换</span>
+        <div class="mode-container">
+          <li>
+            <Icon
+              class="sun"
+              icon="line-md:moon-filled-alt-to-sunny-filled-loop-transition"
+            />
+          </li>
+          <li>
+            <Icon
+              class="moon"
+              icon="line-md:sunny-outline-to-moon-loop-transition"
+            />
+          </li>
+        </div>
+      </div>
+      <div>
+        <span>主页页面宽度设置</span>
+        <div class="page-width">
+          <span>61.8%</span><input class="main" type="range" value="0" /><span
+            >90%</span
+          >
+        </div>
+      </div>
+      <!-- 背景设置组件 -->
+      <Background />
+      <div class="fix-loli"><span>是否固定看板娘</span><SwitchButton /></div>
+      <div><button class="reset">恢复所有设置为默认</button></div>
+    </div>
+    <!-- 看板娘组件 -->
+    <Loli />
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* 根容器 */
+.root {
+  width: 600px;
+  top: 65px;
+  right: 0;
+  position: absolute;
+  background-color: @kungalgame-trans-white-5;
+  backdrop-filter: blur(5px);
+  border-radius: 10px;
+  z-index: 1007;
+  display: flex;
+}
+.container {
+  position: relative;
+  margin: 20px;
+  font-size: 17px;
+}
+.title {
+  font-size: 23px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.settings-icon {
+  animation: settings 3s linear infinite;
+}
+@keyframes settings {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.mode {
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mode-container {
+  font-size: 25px;
+  width: 60%;
+  display: flex;
+  justify-content: space-around;
+  li:nth-child(1) {
+    color: @kungalgame-red-4;
+  }
+  li:nth-child(2) {
+    color: @kungalgame-blue-4;
+  }
+}
+.page-width {
+  font-size: 15px;
+  display: flex;
+  span {
+    margin-top: 15px;
+  }
+}
+/* 主页页面宽度滑动条 */
+.main {
+  width: 100%;
+  height: 10px;
+  margin: 20px 0;
+}
+/* 固定看板娘 */
+.fix-loli {
+  margin-top: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+.reset {
+  font-size: 15px;
+  cursor: pointer;
+  margin-top: 20px;
+  border: 1px solid @kungalgame-red-4;
+  background-color: @kungalgame-trans-red-1;
+  width: 100%;
+  height: 30px;
+  &:hover {
+    background-color: @kungalgame-red-3;
+    color: @kungalgame-white;
+  }
+}
+</style>
diff --git a/src/components/setting-panel/components/Background.vue b/src/components/setting-panel/components/Background.vue
new file mode 100644
index 00000000..f2ed0fa7
--- /dev/null
+++ b/src/components/setting-panel/components/Background.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="kungalgame-background">
+    <div class="bg-settings">背景设置</div>
+    <ul class="kungalgame-background-container">
+      <li>
+        <span>点击使用我们的预设的背景</span>
+        <!-- 预设背景集 -->
+        <ul class="kungalgame-reset-bg">
+          <li><img src="@/assets/images/bg/bg1-m.png" /></li>
+          <li><img src="@/assets/images/bg/bg2-m.png" /></li>
+          <li><img src="@/assets/images/bg/bg3-m.png" /></li>
+          <li><img src="@/assets/images/bg/bg4-m.png" /></li>
+          <li><img src="@/assets/images/bg/bg5-m.png" /></li>
+          <li><img src="@/assets/images/bg/bg6-m.png" /></li>
+          <li><img src="@/assets/images/bg/bg7-m.png" /></li>
+          <li><img src="@/assets/images/bg/bg8-m.png" /></li>
+          <li><img src="@/assets/images/bg/bg9-m.png" /></li>
+        </ul>
+      </li>
+      <!-- 用户自定义背景 -->
+      <li>
+        <span>自定义背景</span>
+        <div class="kungalgamer-bg">
+          <span>请在这里粘贴图片url</span>
+          <div class="bg-url-input">
+            <input type="text" required />
+            <button>确定</button>
+          </div>
+        </div>
+        <button class="reset-bg">恢复空白背景</button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* 背景设置 */
+.kungalgame-background-container {
+  display: block;
+  /* 背景菜单的高度 */
+  height: 300px;
+  top: 100%;
+  left: 0%;
+  font-size: 15px;
+  font-weight: normal;
+  color: @kungalgame-font-color-3;
+}
+/* 背景容器的标题字体 */
+.kungalgame-background-container span {
+  height: 30px;
+  /* 居中 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.bg-settings {
+  margin: 10px 0;
+}
+/* 背景图片略缩图三行三列 grid */
+.kungalgame-reset-bg {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(3, 80px);
+  grid-template-rows: repeat(3, 50px);
+  position: relative;
+  /* 距离下方区域的距离 */
+  margin-bottom: 17px;
+}
+/* 单个图片居中 */
+.kungalgame-reset-bg li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 单个图片的距离 */
+.kungalgame-reset-bg img {
+  cursor: pointer;
+  width: 70px;
+}
+/* 图片的 hover */
+.kungalgame-reset-bg img:hover {
+  width: 170px;
+  transition: 0.2s;
+  z-index: 7;
+}
+.kungalgamer-bg {
+  display: flex;
+  flex-direction: column;
+}
+/* url 的粘贴框 */
+.bg-url-input {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.bg-url-input input {
+  width: 100%;
+  padding-left: 5px;
+  height: 25px;
+  border: 1px solid @kungalgame-blue-4;
+}
+/* 粘贴框的 focus */
+.bg-url-input input:focus {
+  outline: none;
+  background-color: @kungalgame-trans-red-0;
+}
+/* 确定按钮 */
+.bg-url-input button {
+  flex-shrink: 0;
+  padding: 0 10px;
+  height: 25px;
+  box-sizing: border-box;
+  border: 1px solid @kungalgame-blue-4;
+  border-left: none;
+  background-color: @kungalgame-trans-white-5;
+  cursor: pointer;
+}
+/* 确定按钮的 hover */
+.bg-url-input button:hover {
+  background-color: @kungalgame-trans-blue-0;
+}
+/* 确定按钮的 active */
+.bg-url-input button:active {
+  background-color: @kungalgame-trans-red-3;
+}
+.reset-bg {
+  font-size: 15px;
+  cursor: pointer;
+  height: 30px;
+  width: 100%;
+  margin-top: 10px;
+  border: 1px solid @kungalgame-blue-4;
+  background-color: @kungalgame-trans-blue-1;
+  &:hover {
+    background-color: @kungalgame-trans-blue-2;
+  }
+}
+</style>
diff --git a/src/components/setting-panel/components/Loli.vue b/src/components/setting-panel/components/Loli.vue
new file mode 100644
index 00000000..77d674a0
--- /dev/null
+++ b/src/components/setting-panel/components/Loli.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/* 导入 loli 数据 */
+import {
+  loliBodyLeft,
+  loliBodyTop,
+  loliEyeLeft,
+  loliEyeTop,
+  loliBrowLeft,
+  loliBrowTop,
+  loliMouthLeft,
+  loliMouthTop,
+  loliFaceLeft,
+  loliFaceTop,
+  lass,
+  eye,
+  brow,
+  mouth,
+  face,
+} from '@/utils/loli'
+</script>
+
+<template>
+  <!-- 看板娘 -->
+  <div class="loli">
+    <!-- 身体 -->
+    <img class="lass" :src="lass" alt="ren" />
+    <img class="eye" :src="eye" alt="ren" />
+    <img class="brow" :src="brow" alt="ren" />
+    <img class="mouth" :src="mouth" alt="ren" />
+    <img class="face" :src="face" alt="ren" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* 看板娘 */
+.loli {
+  height: 100%;
+  position: absolute;
+  top: -250px;
+  left: 120px;
+}
+.lass {
+  position: absolute;
+  left: v-bind(loliBodyLeft);
+  top: v-bind(loliBodyTop);
+}
+.eye {
+  position: absolute;
+  left: v-bind(loliEyeLeft);
+  top: v-bind(loliEyeTop);
+}
+.brow {
+  position: absolute;
+  left: v-bind(loliBrowLeft);
+  top: v-bind(loliBrowTop);
+}
+.mouth {
+  position: absolute;
+  left: v-bind(loliMouthLeft);
+  top: v-bind(loliMouthTop);
+}
+.face {
+  position: absolute;
+  left: v-bind(loliFaceLeft);
+  top: v-bind(loliFaceTop);
+}
+</style>
diff --git a/src/components/setting-panel/components/SwitchButton.vue b/src/components/setting-panel/components/SwitchButton.vue
new file mode 100644
index 00000000..26e9ebbc
--- /dev/null
+++ b/src/components/setting-panel/components/SwitchButton.vue
@@ -0,0 +1,55 @@
+<!-- KUNGalgame 通用切换按钮 -->
+
+<script setup lang="ts"></script>
+
+<template>
+  <input type="checkbox" id="switch" /><label for="switch">Toggle</label>
+</template>
+
+<style lang="less" scoped>
+input {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+label {
+  cursor: pointer;
+  text-indent: -9999px;
+  width: 50px;
+  height: 27px;
+  background: @kungalgame-trans-blue-2;
+  display: block;
+  border-radius: 100px;
+  position: relative;
+}
+
+label:after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 23px;
+  height: 23px;
+  background: @kungalgame-white;
+  border-radius: 15px;
+  transition: 0.3s;
+}
+
+input:checked + label {
+  background: @kungalgame-blue-4;
+}
+
+input:checked + label:after {
+  left: calc(100% - 2px);
+  transform: translateX(-100%);
+}
+
+// centering
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+</style>