update tools |dialog|store

src/components/Base/Container.vue

@@ -51,7 +51,7 @@ const props = defineProps({
       <div class="cube" :class="[`cube-${cubeCorner}`]"></div>
       <div class="container-header">
         <Icon :name="icon" />
-        <span>{{ title }}</span>
+        <span class="container-header__title">{{ title }}</span>
       </div>
       <div class="container-body">
         <slot />
@@ -105,6 +105,10 @@ const props = defineProps({
   padding: 8px 12px;
 }
 
+.container-header__title {
+  font-size: 24px;
+}
+
 .container-body {
   background: #ffffff11;
   backdrop-filter: blur(2px);

src/components/Base/Header.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { ref, computed } from 'vue';
 </script>
 
 <template>
   <header class="header">
     <div>
-      <Icon htmlRole="logo" icon="logo" />
+      <div class="icon"></div>
       <h1 class="header__title">郴州旗滨光伏光电玻璃有限公司</h1>
     </div>
   </header>
@@ -18,18 +17,29 @@ import { ref, computed } from 'vue';
   background: url(../../assets/header-bg@2x.png) 100% / 100% no-repeat;
 }
 
+
+header .icon {
+  background: url(../../assets/logo.png) 100% / contain no-repeat;
+  width: 52px;
+  height: 40px;
+}
+
 .header > div {
   position: absolute;
   left: 0;
   right: 0;
   margin: 0 auto;
   /** width: 520px; **/
-  width: 480px;
+  width: 520px;
   top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 .header__title {
   font-weight: 400;
+  font-size: 30px;
   letter-spacing: 2px;
   color: #fff;
   user-select: none;

src/components/Base/Icon.vue

@@ -41,9 +41,8 @@ const icon = computed(() => {
 
 <style scoped>
 .icon {
-  height: 16px;
-  width: 16px;
-  background: #fff3;
+  height: 24px;
+  width: 24px;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/SettingDialog.vue

@@ -0,0 +1,198 @@
+<script setup>
+import { ref } from 'vue';
+const emit = defineEmits(["close"]);
+const setting = ref({
+    resolution: {
+        width: null,
+        height: null
+    },
+    carousel: null,
+    fullscreen: false,
+    status: false,
+});
+
+function handleCancel() {
+    emit('close')
+}
+
+function handleConfirm() { }
+</script>
+
+<template>
+    <div class="setting-dialog">
+        <h1>设置</h1>
+        <div class="main-content">
+            <div class="form-item">
+                <label for="carousel">轮播时间</label>
+                <input id="carousel" type="number" v-model="setting.carousel" />
+                <span>秒</span>
+            </div>
+            <div class="form-item">
+                <label for="resolution1">分辨率</label>
+                <input id="resolution1" type="number" v-model="setting.resolution.width" />
+                <span>X</span>
+                <input id="resolution2" type="number" v-model="setting.resolution.height" />
+                <span>px</span>
+            </div>
+            <div class="form-item selector">
+                <div class="opt opt1">
+                    <input type="checkbox" id="fullscreen" name="fullscreen" :class="[setting.fullscreen ? 'checked' : '']"
+                        v-model="setting.fullscreen" />
+                    <label for="fullscreen">全屏显示</label>
+                </div>
+                <div class="opt opt2">
+                    <input type="checkbox" id="status" name="status" :class="[setting.status ? 'checked' : '']"
+                        v-model="setting.status" />
+                    <label for="status">设备状态</label>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <button @click="handleCancel" class="btn btn-cancel">取消</button>
+            <button @click="handleConfirm" class="btn btn-confirm">确认</button>
+        </div>
+    </div>
+    <div class="modal"></div>
+</template>
+
+<style scoped>
+* {
+    user-select: none;
+}
+
+.setting-dialog {
+    position: fixed;
+    margin: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 577px;
+    height: 422px;
+    background: url(../assets/dialog-bg.png) 100% / contain no-repeat;
+    z-index: 1000;
+    transition: all .3s ease-out;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    padding: 24px 80px;
+}
+
+.main-content {
+    flex: 1;
+    padding-top: 10px;
+}
+
+.form-item {
+    margin: 32px 0;
+    display: flex;
+    gap: 8px;
+    color: #fff;
+    font-size: 28px;
+    letter-spacing: 2px;
+    padding: 0 12px;
+}
+
+.form-item.selector {
+    gap: 32px;
+}
+
+.opt {
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.form-item input {
+    flex: 1;
+    border: none;
+    appearance: none;
+    outline: none;
+    border-radius: 4px;
+    padding: 4px 12px;
+    font-size: 18px;
+}
+
+input#resolution1,
+input#resolution2 {
+    width: 10px;
+}
+
+input[type="checkbox"] {
+    appearance: initial;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    flex: unset;
+    padding: unset;
+    font-size: unset;
+    cursor: pointer;
+}
+
+input[type="checkbox"].checked {
+    background: #0049ff;
+    position: relative;
+}
+
+input[type="checkbox"].checked::after {
+    content: '\2713';
+    color: #fff;
+    font-size: 22px;
+    line-height: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+label {
+    cursor: pointer;
+    user-select: none;
+}
+
+.footer {
+    display: flex;
+    gap: 12px;
+}
+
+.btn {
+    flex: 1;
+    padding: 18px;
+    font-size: 28px;
+    cursor: pointer;
+    letter-spacing: 12px;
+    background: url(../assets/dialog-button.png) 0 0 / 100% 100% no-repeat;
+}
+
+button {
+    appearance: none;
+    outline: none;
+    background: none;
+    border: none;
+    color: #fff;
+}
+
+.modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 1080px;
+    width: 1920px;
+    background: #0003;
+    backdrop-filter: blur(3px);
+    z-index: 999;
+    transition: all .3s ease-out;
+}
+
+.setting-dialog>h1 {
+    text-align: center;
+    letter-spacing: 24px;
+    font-weight: 400;
+    text-shadow: 0 5px 1px #001124;
+    user-select: none;
+    color: #fff;
+}
+</style>

src/components/Tools.vue

@@ -4,17 +4,24 @@ import IconBack from "../assets/menu_icon/IconBack.vue";
 import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
 
+import SettingDialogVue from "./SettingDialog.vue";
+
+const visible = ref(false);
 function toHome() {
   document.location.href = '/1-1'
 }
+function showDialog(){
+  visible.value = true;
+}
 </script>
 
 <template>
   <div class="tools">
     <button @click="toHome"><IconBack /></button>
-    <button><IconSetting /></button>
+    <button @click="showDialog"><IconSetting /></button>
     <button><IconExchange /></button>
   </div>
+  <SettingDialogVue v-if="visible" @close="visible = false;"/>
 </template>
 
 <style scoped>