Home Explore Help
Register Sign In
iot
/
web
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

增加设置

caner 1 year ago
parent
9ca385f21c
commit
a52a65df5a
13 changed files with 171 additions and 37 deletions
Unified View Show Diff Stats
  1. BIN
      .DS_Store
  2. 1 1
      index.html
  3. BIN
      public/favicon.ico
  4. BIN
      public/iot.png
  5. 1 11
      src/assets/icons/1.svg
  6. 6 3
      src/assets/native-plugin.ts
  7. 7 7
      src/pages/device/index.vue
  8. 2 2
      src/pages/index.vue
  9. 2 2
      src/pages/room/index.vue
  10. 9 5
      src/pages/room/room-create.vue
  11. 6 1
      src/pages/room/room-device-detail.vue
  12. 25 2
      src/pages/room/room-device-list.vue
  13. 112 3
      src/pages/seting/index.vue

BIN
.DS_Store
View File


+ 1 - 1
index.html
View File 

@@ -3,7 +3,7 @@
 
   <head>
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>并联</title>
 
+    <title>万物皆Link</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

BIN
public/favicon.ico
View File


BIN
public/iot.png
View File


+ 1 - 11
src/assets/icons/1.svg
View File 

@@ -1,11 +1 @@
 
-<svg width="240" height="26" viewBox="0 0 240 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 
-<g id="Vector">
 
-<path d="M176.107 25.4608C172.309 25.4608 169.085 24.2509 166.434 21.8311C163.783 19.4099 162.458 16.4624 162.458 12.9887C162.458 9.51361 163.78 6.56339 166.425 4.13803C169.071 1.71268 172.292 0.5 176.089 0.5C179.887 0.5 183.111 1.7099 185.762 4.12971C188.413 6.55091 189.738 9.49836 189.738 12.9721C189.738 16.4472 188.416 19.3974 185.771 21.8227C183.125 24.2481 179.903 25.4608 176.107 25.4608ZM192.011 25.2528V23.1727C194.663 22.6874 196.842 21.4913 198.547 19.5846C200.252 17.6779 201.105 15.4765 201.105 12.9804C201.105 10.4843 200.252 8.28291 198.547 6.37618C196.842 4.46946 194.663 3.27342 192.011 2.78807V0.708006C195.311 1.19335 198.029 2.5967 200.168 4.91806C202.308 7.23941 203.378 9.92685 203.378 12.9804C203.378 16.0339 202.308 18.7214 200.168 21.0427C198.029 23.3641 195.311 24.7674 192.011 25.2528ZM176.098 23.3807C179.243 23.3807 181.924 22.3663 184.141 20.3376C186.358 18.3088 187.466 15.8564 187.465 12.9804C187.465 10.103 186.356 7.64988 184.139 5.62112C181.921 3.59236 179.241 2.57868 176.098 2.58006C172.953 2.58006 170.272 3.59444 168.055 5.6232C165.838 7.65196 164.73 10.1044 164.731 12.9804C164.731 15.8578 165.84 18.3109 168.057 20.3397C170.274 22.3684 172.955 23.3821 176.098 23.3807Z" fill="#E25319"/>
 
-<path d="M22.3567 10.9086C29.1085 10.9086 29.7577 16.2431 29.7577 18.0082V18.3612C29.7577 20.3224 29.0652 22.0091 27.7668 23.3819C26.4251 24.794 24.867 25.4608 23.0059 25.4608H1.10593C0.759684 25.4608 0.5 25.2254 0.5 24.8724V21.8522C0.5 21.4991 0.759684 21.2246 1.14921 21.2246H22.3567C24.9968 21.2246 25.17 18.3612 25.1267 17.7336C25.0401 17.1453 24.6073 15.1841 22.5731 15.1841H7.59802C3.65949 15.1841 0.5 12.0461 0.5 8.16296V7.61382C0.5 3.73064 3.65949 0.592711 7.59802 0.592711H29.1085C29.4547 0.592711 29.7577 0.867279 29.7577 1.2203V4.20132C29.7144 4.59357 29.4547 4.86813 29.0652 4.86813H8.24723C6.55929 4.86813 5.21759 6.20175 5.21759 7.88839C5.21759 9.57502 6.55929 10.9086 8.24723 10.9086H22.3567Z" fill="white"/>
 
-<path d="M60.4569 4.43667C60.4569 4.43667 62.9671 21.303 63.3567 24.7547C63.3999 25.147 63.097 25.4608 62.6642 25.4608H59.2883C58.942 25.4608 58.6391 25.2647 58.5958 24.9901L55.6527 6.16253C55.5229 5.65262 55.1766 5.26037 54.5274 5.26037C53.8782 5.26037 53.532 5.65262 53.4021 6.16253L50.0695 22.7935C49.9397 23.3427 49.4203 23.7349 48.8144 23.7349H45.828C45.2221 23.7349 44.746 23.3427 44.6161 22.7935L41.2403 6.16253C41.1104 5.65262 40.7642 5.26037 40.115 5.26037C39.4657 5.26037 39.1195 5.65262 38.9897 6.16253L37.1286 24.9901C37.0853 25.2647 36.7824 25.4608 36.4361 25.4608H33.1468C32.714 25.4608 32.411 25.147 32.4543 24.7547C32.7573 21.6168 34.1855 4.43667 34.1855 4.43667C34.575 2.2009 36.6958 0.592711 39.2061 0.592711H41.0238C43.5341 0.592711 45.6549 2.2009 46.0444 4.43667L47.1264 11.6931L48.5547 4.43667C48.9875 2.2009 51.1082 0.592711 53.5752 0.592711H55.4363C57.9466 0.592711 60.0673 2.2009 60.4569 4.43667Z" fill="white"/>
 
-<path d="M98.0917 24.9509C98.2216 25.2254 98.0484 25.5 97.7455 25.5H93.4174C92.9846 25.5 92.5951 25.2254 92.422 24.8332L85.2807 7.73149C84.5882 6.08408 82.9868 4.98581 81.169 4.98581C79.2646 4.98581 77.62 6.08408 76.9275 7.77072L69.9593 24.8332C69.7862 25.2254 69.3967 25.5 68.9639 25.5H64.7656C64.506 25.5 64.3328 25.1862 64.4194 24.9509L73.0322 5.96641C75.0231 1.57331 80.3899 -0.740909 85.3672 1.41642C87.488 2.31857 89.1326 4.12288 90.0415 6.24098L98.0917 24.9509Z" fill="white"/>
 
-<path d="M122.597 19.2241L128.137 24.794C128.397 25.0293 128.181 25.4608 127.834 25.4608H123.03C122.511 25.4608 121.991 25.2647 121.645 24.9116L115.889 19.4595C115.629 19.1849 115.283 19.0673 114.893 19.028H104.852C104.506 19.028 104.246 19.3026 104.246 19.6164V24.9116C104.246 25.2254 103.943 25.5 103.597 25.5H100.135C99.7885 25.5 99.5288 25.2254 99.5288 24.9116V19.1849C99.5288 16.753 101.693 14.7526 104.419 14.7526H120.953C123.593 14.7526 124.155 11.1832 124.155 9.81037C124.155 6.90779 123.16 4.86813 121.169 4.86813H100.265C99.8317 4.86813 99.5288 4.59357 99.5288 4.20132V1.2203C99.5288 0.867279 99.7885 0.592711 100.135 0.592711H121.602C125.714 0.592711 128.786 4.20132 128.786 9.81037C128.786 12.1638 127.704 17.9298 122.684 18.8711C122.554 18.9496 122.467 19.1065 122.597 19.2241Z" fill="white"/>
 
-<path d="M137.242 0.553485C137.589 0.553485 137.892 0.828055 137.892 1.18107V4.24055C137.892 4.59357 137.589 4.86813 137.242 4.86813H130.75C130.404 4.86813 130.144 4.59357 130.144 4.24055V1.18107C130.144 0.828055 130.404 0.553485 130.75 0.553485H137.242ZM158.753 0.553485C159.099 0.553485 159.402 0.828055 159.402 1.18107V4.24055C159.402 4.59357 159.099 4.86813 158.796 4.86813H147.889C147.543 4.86813 147.284 5.1427 147.284 5.4565V24.8724C147.284 25.1862 146.981 25.4608 146.678 25.4608H143.215C142.869 25.4608 142.609 25.1862 142.609 24.8724V5.2996C142.609 2.67159 144.903 0.553485 147.803 0.553485H158.753Z" fill="white"/>
 
-<path d="M238.894 0.592711C239.197 0.592711 239.5 0.828055 239.5 1.18107V20.0871C239.5 23.0681 237.033 25.4608 234.003 25.4608H232.575C229.762 25.4608 227.208 23.931 225.91 21.4991L217.6 5.77029C217.427 5.45649 217.081 5.22115 216.691 5.22115H216.215C215.523 5.22115 214.96 5.80951 214.96 6.51555V24.8724C214.96 25.2254 214.657 25.4608 214.311 25.4608H210.848C210.502 25.4608 210.242 25.2254 210.242 24.8724V5.96641C210.242 2.98538 212.666 0.592711 215.696 0.592711H216.951C219.504 0.592711 221.885 1.96555 223.097 4.20132L231.753 19.9694C231.926 20.3224 232.272 20.5185 232.662 20.5185L233.484 20.4793C234.22 20.4793 234.782 19.9302 234.782 19.2241V1.18107C234.782 0.828055 235.042 0.592711 235.388 0.592711H238.894Z" fill="white"/>
 
-</g>
 
-</svg>
 
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745547793649" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3166" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256"><path d="M938.6 720.4h-846c-12.8 0-23.1-10.4-23.1-23.1s10.4-23.1 23.1-23.1h846.1c12.8 0 23.1 10.4 23.1 23.1s-10.4 23.1-23.2 23.1zM166.4 295.2c-2.4 16.7-3.2 32.9-3.2 59.9v210.2c0 23.8 0.8 38.9 3.2 59.9H83.5c2.4-17.8 3.2-31.3 3.2-59.9V355.1c0-28.2-0.8-44.8-3.2-59.9h82.9zM310.8 383.3c-2.4 16.3-3.2 32.1-3.2 59.9v122.1c0 21.4 1.2 42.8 3.2 59.9h-82.9c2.4-19.4 3.2-34.5 3.2-59.9V443.1c0-25.8-0.8-42-3.2-59.9h82.9z m-1.2-88.1v59.5h-80.5v-59.5h80.5zM372.6 625.2c2.4-18.6 3.2-35.3 3.2-59.9V443.1c0-27.4-0.8-44-3.2-59.9h78.9v16.7c0 2.4-0.4 8.3-0.4 11.1 25-23.8 49.2-33.7 81.7-33.7 27.4 0 49.2 7.5 63.8 22.2 15.9 15.9 22.6 35.3 22.6 66.6v99.5c0 23 1.2 42.8 3.2 59.5H540c2.4-19 3.2-35.7 3.2-59.9V484c0-15.9-1.6-22.6-6.3-29.4-5.2-7.1-14.3-11.1-26.2-11.1-22.2 0-42 13.9-59.1 41.6v80.1c0 22.6 0.8 39.3 3.2 59.9h-82.2zM764 295.2c-2.4 16.3-3.2 33.3-3.2 59.9v111.4l43.6-43.2c18.2-18.2 27-28.6 34.5-40.1h105.5c-15.5 13.5-20.2 17.8-41.6 38.9l-57.5 55.5 66.2 96.8c24.2 34.9 25.8 37.3 36.9 50.8H847.3c-6-16.7-14.7-34.1-26.2-53.1L791 522.9l-29.7 28.5v15.9c0 32.5 0.4 42 3.2 57.9h-80.9c2.4-17.8 3.2-33.7 3.2-59.9V355.1c0-27-1.2-45.2-3.2-59.9H764z" fill="#0FCEA0" p-id="3167" data-spm-anchor-id="a313x.search_index.0.i0.67303a810OxbZ0" class=""></path></svg>

+ 6 - 3
src/assets/native-plugin.ts
View File 

@@ -16,7 +16,9 @@ import {
 
   NFormItem,
 
   NFormItem,
 
   NBreadcrumb,
 
   NBreadcrumb,
 
   NBreadcrumbItem,
 
   NBreadcrumbItem,
 
-  NSwitch
 
+  NSwitch,
 
+  NTabs,
 
+  NTabPane
 
 } from 'naive-ui'
 
 } from 'naive-ui'
 
 
 
 const naive = create({
 
 const naive = create({
 
@@ -37,8 +39,9 @@ const naive = create({
 
     NFormItem,
 
     NFormItem,
 
     NBreadcrumb,
 
     NBreadcrumb,
 
     NBreadcrumbItem,
 
     NBreadcrumbItem,
 
-    NSwitch
 
-
 
+    NSwitch,
 
+    NTabs,
 
+    NTabPane
 
   ]
 
   ]
 
 })
 
 })

+ 7 - 7
src/pages/device/index.vue
View File 

@@ -11,7 +11,7 @@
 
         <div
 
         <div
 
           class="device-content-item"
 
           class="device-content-item"
 
           :class="{active:item.check}"
 
           :class="{active:item.check}"
 
-          @click="item.check=!item.check && showBar"
 
+          @click="item.check= !item.check && showBar"
 
         >
 
         >
 
           <n-image
 
           <n-image
 
             width="50"
 
             width="50"
 
@@ -59,16 +59,16 @@ const deviceList = ref([
 
   { check: false, url: new URL('./img/1.png', import.meta.url).href },
 
   { check: false, url: new URL('./img/1.png', import.meta.url).href },
 
   { check: false, url: new URL('./img/1.png', import.meta.url).href }
 
   { check: false, url: new URL('./img/1.png', import.meta.url).href }
 
 ])
 
 ])
 
-const showBar = computed(() => router.options.history.state.back === '/create')
 
+const backRoute:{[key:string]:string} = { '/list': '/list', '/create': '/room' }
 
+const showBar = computed(() => !!(backRoute[router.options.history.state.back as string]))
 
 
 
 function change() {
 
 function change() {
 
-  console.log('跳转到设备list')
 
-  router.push('/room')
 
+  router.push(backRoute[router.options.history.state.back as string])
 
   store.setRoomData(null)
 
   store.setRoomData(null)
 
 }
 
 }
 
 
 
 onMounted(() => {
 
 onMounted(() => {
 
-  console.log(123, store.newRoomData)
 
+  console.log(123, store.newRoomData, router.options.history.state)
 
 })
 
 })
 
 </script>
 
 </script>
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
@@ -87,7 +87,7 @@ onMounted(() => {
 
     display: flex;
 
     display: flex;
 
     flex-wrap: wrap;
 
     flex-wrap: wrap;
 
     align-content: flex-start;
 
     align-content: flex-start;
 
-    height: calc(100% - 86px);
 
+    height: calc(100% - 96px);
 
     overflow-y: auto;
 
     overflow-y: auto;
 
     gap: 15px;
 
     gap: 15px;
 
 
 
@@ -137,7 +137,7 @@ onMounted(() => {
 
 
 
   &-bar {
 
   &-bar {
 
     width: 100%;
 
     width: 100%;
 
-    height: 40px;
 
+    height: 50px;
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;
 
     justify-content: space-between;
 
     justify-content: space-between;

+ 2 - 2
src/pages/index.vue
View File 

@@ -45,8 +45,8 @@ const menuOptions = [
 
   {
 
   {
 
     icon: () => h('img', {
 
     icon: () => h('img', {
 
       src: new URL('@/assets/icons/3.svg', import.meta.url).href,
 
       src: new URL('@/assets/icons/3.svg', import.meta.url).href,
 
-      width: (isTrigger.value ? '24px' : '60px'),
 
-      height: (isTrigger.value ? '24px' : '60px'),
 
+      width: (isTrigger.value ? '0px' : '60px'),
 
+      height: (isTrigger.value ? '0px' : '60px'),
 
       style: {
 
       style: {
 
         transition: '0.2s'
 
         transition: '0.2s'
 
       }
 
       }

+ 2 - 2
src/pages/room/index.vue
View File 

@@ -72,7 +72,7 @@ function change(url:string) {
 
     display: flex;
 
     display: flex;
 
     flex-wrap: wrap;
 
     flex-wrap: wrap;
 
     align-content: flex-start;
 
     align-content: flex-start;
 
-    height: calc(100% - 86px);
 
+    height: calc(100% - 96px);
 
     overflow-y: auto;
 
     overflow-y: auto;
 
     gap: 15px;
 
     gap: 15px;
 
 
 
@@ -109,7 +109,7 @@ function change(url:string) {
 
 
 
   &-bar {
 
   &-bar {
 
     width: 100%;
 
     width: 100%;
 
-    height: 40px;
 
+    height: 50px;
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;
 
     justify-content: space-between;
 
     justify-content: space-between;

+ 9 - 5
src/pages/room/room-create.vue
View File 

@@ -13,8 +13,8 @@
 
           :src="data.erUrl"
 
           :src="data.erUrl"
 
         />
 
         />
 
       </n-upload>
 
       </n-upload>
 
-      <n-form size="large">
 
-        <n-form-item label="取个好名字先">
 
+      <n-form>
 
+        <n-form-item label="取个好名字">
 
           <n-input
 
           <n-input
 
             v-model:value="data.name"
 
             v-model:value="data.name"
 
             placeholder="输入房间名称"
 
             placeholder="输入房间名称"
 
@@ -58,7 +58,7 @@ function change() {
 
   height: 100%;
 
   height: 100%;
 
 
 
   &-content {
 
   &-content {
 
-    height: calc(100% - 40px);
 
+    height: calc(100% - 50px);
 
     text-align: center;
 
     text-align: center;
 
     padding: 0 5%;
 
     padding: 0 5%;
 
 
 
@@ -71,12 +71,16 @@ function change() {
 
         cursor: pointer;
 
         cursor: pointer;
 
       }
 
       }
 
     }
 
     }
 
-
 
+    :deep(.n-form) {
 
+      min-width: 300px;
 
+      max-width: 50%;
 
+      margin: 0 auto;
 
+    }
 
   }
 
   }
 
 
 
   &-bar {
 
   &-bar {
 
     width: 100%;
 
     width: 100%;
 
-    height: 40px;
 
+    height: 50px;
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;
 
     justify-content: space-between;
 
     justify-content: space-between;

+ 6 - 1
src/pages/room/room-device-detail.vue
View File 

@@ -25,7 +25,7 @@
 
           :preview-disabled="true"
 
           :preview-disabled="true"
 
           :src="device.url"
 
           :src="device.url"
 
         />
 
         />
 
-        <n-form size="large">
 
+        <n-form>
 
           <n-form-item
 
           <n-form-item
 
             label="状态"
 
             label="状态"
 
             label-placement="left"
 
             label-placement="left"
 
@@ -92,6 +92,11 @@ const device = reactive({ check: false, url: new URL('./img/3.png', import.meta.
 
         margin: 0 auto;
 
         margin: 0 auto;
 
       }
 
       }
 
 
 
+      :deep(.n-form) {
 
+        min-width: 300px;
 
+        max-width: 50%;
 
+        margin: 0 auto;
 
+      }
 
     }
 
     }
 
 
 
   }
 
   }

+ 25 - 2
src/pages/room/room-device-list.vue
View File 

@@ -34,6 +34,15 @@
 
         </div>
 
         </div>
 
       </template>
 
       </template>
 
     </div>
 
     </div>
 
+    <div class="list-bar">
 
+      <span>缺个设备？</span>
 
+      <n-button
 
+        type="warning"
 
+        @click="change"
 
+      >
 
+        继续
 
+      </n-button>
 
+    </div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 <script setup lang="ts">
 
 <script setup lang="ts">
 
@@ -63,7 +72,7 @@ const deviceList = ref([
 
   { check: false, url: new URL('./img/3.png', import.meta.url).href }
 
   { check: false, url: new URL('./img/3.png', import.meta.url).href }
 
 ])
 
 ])
 
 function change() {
 
 function change() {
 
-  router.push('/detail')
 
+  router.push('/device')
 
 }
 
 }
 
 </script>
 
 </script>
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
@@ -82,7 +91,7 @@ function change() {
 
     display: flex;
 
     display: flex;
 
     flex-wrap: wrap;
 
     flex-wrap: wrap;
 
     align-content: flex-start;
 
     align-content: flex-start;
 
-    height: calc(100% - 47px);
 
+    height: calc(100% - 97px);
 
     overflow-y: auto;
 
     overflow-y: auto;
 
     gap: 15px;
 
     gap: 15px;
 
 
 
@@ -109,5 +118,19 @@ function change() {
 
     }
 
     }
 
 
 
   }
 
   }
 
+
 
+  &-bar {
 
+    width: 100%;
 
+    height: 50px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+
 
+    :deep(.n-button) {
 
+      --n-width: 30%;
 
+      max-width: 200px;
 
+      --n-border-radius: 10px;
 
+    }
 
+  }
 
 }
 
 }
 
 </style>
 
 </style>

+ 112 - 3
src/pages/seting/index.vue
View File 

@@ -1,8 +1,117 @@
 
 <template>
 
 <template>
 
-  <div>seting</div>
 
+  <div class="seting">
 
+    <div class="seting-title">
 
+      个人资料
 
+    </div>
 
+    <div class="seting-content">
 
+      <n-tabs
 
+        type="line"
 
+        animated
 
+        justify-content="center"
 
+      >
 
+        <n-tab-pane
 
+          name="user"
 
+          tab="账户信息"
 
+        >
 
+          <n-upload
 
+            action="#"
 
+            :max="1"
 
+            :show-file-list="false"
 
+          >
 
+            <n-image
 
+              width="100%"
 
+              height="200px"
 
+              :preview-disabled="true"
 
+              :src="userData.url"
 
+            />
 
+          </n-upload>
 
+          <n-form>
 
+            <n-form-item label="名称">
 
+              <n-input
 
+                v-model:value="userData.name"
 
+                placeholder="称呼"
 
+              />
 
+            </n-form-item>
 
+          </n-form>
 
+        </n-tab-pane>
 
+        <n-tab-pane
 
+          name="pass"
 
+          tab="更改密码"
 
+        >
 
+          <n-form>
 
+            <n-form-item label="原密码">
 
+              <n-input />
 
+            </n-form-item>
 
+            <n-form-item label="新密码">
 
+              <n-input />
 
+            </n-form-item>
 
+            <n-form-item label="重复新密码">
 
+              <n-input />
 
+            </n-form-item>
 
+          </n-form>
 
+        </n-tab-pane>
 
+      </n-tabs>
 
+    </div>
 
+    <div class="seting-bar">
 
+      <span>编辑你的账号信息</span>
 
+      <n-button type="warning">
 
+        更新
 
+      </n-button>
 
+    </div>
 
+  </div>
 
 </template>
 
 </template>
 
-<script setup lang="ts">
 
+
 
+<script setup lang='ts'>
 
+import { ref } from 'vue'
 
+
 
+const userData = ref({
 
+  url: new URL('@/assets/icons/3.svg', import.meta.url).href,
 
+  name: ''
 
+})
 
 </script>
 
 </script>
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
+.seting {
 
+  padding: 40px 4% 0 4%;
 
+  min-width: 327px;
 
+  height: 100%;
 
+
 
+  &-title {
 
+    font-size: 18px;
 
+  }
 
+
 
+  &-content {
 
+    height: calc(100% - 75px);
 
+    text-align: center;
 
+    padding: 0 5%;
 
+
 
+    :deep(.n-tabs) {
 
+      --n-pane-padding-top: 20px;
 
+    }
 
+
 
+    :deep(.n-tabs-tab) {
 
+      padding-left: 20px;
 
+      padding-right: 20px;
 
+    }
 
+
 
+    :deep(.n-form) {
 
+      min-width: 300px;
 
+      max-width: 50%;
 
+      margin: 0 auto;
 
+    }
 
+  }
 
+
 
+  &-bar {
 
+    width: 100%;
 
+    height: 50px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
 
 
-</style>
 
+    :deep(.n-button) {
 
+      --n-width: 30%;
 
+      max-width: 200px;
 
+      --n-border-radius: 10px;
 
+    }
 
+  }
 
+}
 
+</style>