Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
pm
/
ISCS_Big_Sreen_GoView
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

fix: 修改首页代码

MTrun 3 жил өмнө
parent
0b326c4e76
commit
d699206cd9
16 өөрчлөгдсөн 176 нэмэгдсэн , 290 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 0 5
      build/constant.ts
  2. 0 35
      build/vite/plugin/compress.ts
  3. 2 2
      index.html
  4. BIN
      public/favicon.ico
  5. 14 6
      src/App.vue
  6. 0 127
      src/assets/images/login.svg
  7. BIN
      src/assets/images/login/one.png
  8. BIN
      src/assets/images/login/three.png
  9. BIN
      src/assets/images/login/two.png
  10. 2 0
      src/plugins/naive.ts
  11. 2 1
      src/router/router-guards.ts
  12. 5 4
      src/settings/designSetting.ts
  13. 2 2
      src/store/modules/designStore/designStore.ts
  14. 9 0
      src/styles/common/theme.scss
  15. 10 5
      src/styles/common/var.scss
  16. 130 103
      src/views/login/index.vue

+ 0 - 5
build/constant.ts
Файл харах 

@@ -1,6 +1 @@
 
-/**
 
- * The name of the configuration file entered in the production environment
 
- */
 
-export const GLOB_CONFIG_FILE_NAME = 'app.config.js';
 
-
 
 export const OUTPUT_DIR = 'dist';
 
 export const OUTPUT_DIR = 'dist';

+ 0 - 35
build/vite/plugin/compress.ts
Файл харах 

@@ -1,35 +0,0 @@
 
-/**
 
- * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
 
- * https://github.com/anncwb/vite-plugin-compression
 
- */
 
-import type { Plugin } from 'vite';
 
-
 
-import compressPlugin from 'vite-plugin-compression';
 
-
 
-export function configCompressPlugin(
 
-  compress: 'gzip' | 'brotli' | 'none',
 
-  deleteOriginFile = false
 
-): Plugin | Plugin[] {
 
-  const compressList = compress.split(',');
 
-
 
-  const plugins: Plugin[] = [];
 
-
 
-  if (compressList.includes('gzip')) {
 
-    plugins.push(
 
-      compressPlugin({
 
-        ext: '.gz',
 
-        deleteOriginFile,
 
-      })
 
-    );
 
-  }
 
-  if (compressList.includes('brotli')) {
 
-    plugins.push(
 
-      compressPlugin({
 
-        ext: '.br',
 
-        algorithm: 'brotliCompress',
 
-        deleteOriginFile,
 
-      })
 
-    );
 
-  }
 
-  return plugins;
 
-}

+ 2 - 2
index.html
Файл харах 

@@ -8,9 +8,9 @@
 
     name="viewport"
 
     name="viewport"
 
     content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
 
     content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
 
   />
 
   />
 
-  <link rel="icon" href="/favicon.ico"/>
 
+  <link rel="icon" href="./favicon.ico"/>
 
   <title>GoView</title>
 
   <title>GoView</title>
 
-  <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
 
+  <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;height:100vh;background-color: #17171a;}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <div id="appProvider" style="display: none"></div>
 
 <div id="appProvider" style="display: none"></div>

BIN
public/favicon.ico
Файл харах


+ 14 - 6
src/App.vue
Файл харах 

@@ -1,22 +1,29 @@
 
 <template>
 
 <template>
 
-  <NConfigProvider
 
+  <n-config-provider
 
     :locale="zhCN"
 
     :locale="zhCN"
 
     :theme="getDarkTheme"
 
     :theme="getDarkTheme"
 
     :theme-overrides="getThemeOverrides"
 
     :theme-overrides="getThemeOverrides"
 
     :date-locale="dateZhCN"
 
     :date-locale="dateZhCN"
 
   >
 
   >
 
-    <AppProvider>
 
+    <app-provider>
 
       <router-view />
 
       <router-view />
 
-    </AppProvider>
 
-  </NConfigProvider>
 
+    </app-provider>
 
+  </n-config-provider>
 
 </template>
 
 </template>
 
 
 
 <script lang="ts" setup>
 
 <script lang="ts" setup>
 
 import { computed } from 'vue'
 
 import { computed } from 'vue'
 
-import { zhCN, dateZhCN, darkTheme, GlobalThemeOverrides } from 'naive-ui'
 
+import {
 
+  zhCN,
 
+  dateZhCN,
 
+  darkTheme,
 
+  NConfigProvider,
 
+  GlobalThemeOverrides
 
+} from 'naive-ui'
 
 import { AppProvider } from '@/components/Application'
 
 import { AppProvider } from '@/components/Application'
 
 import { useRoute } from 'vue-router'
 
 import { useRoute } from 'vue-router'
 
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 
+import { borderRadius } from '@/settings/designSetting'
 
 
 
 const route = useRoute()
 
 const route = useRoute()
 
 const designStore = useDesignStore()
 
 const designStore = useDesignStore()
 
@@ -25,7 +32,8 @@ const getThemeOverrides = computed(
 
   (): GlobalThemeOverrides => {
 
   (): GlobalThemeOverrides => {
 
     return {
 
     return {
 
       common: {
 
       common: {
 
-        primaryColor: designStore.appTheme
 
+        primaryColor: designStore.appTheme,
 
+        borderRadius
 
       },
 
       },
 
       LoadingBar: {
 
       LoadingBar: {
 
         colorLoading: designStore.appTheme
 
         colorLoading: designStore.appTheme

+ 0 - 127
src/assets/images/login.svg
Файл харах 

@@ -1,127 +0,0 @@
 
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1361px"
 
-     height="609px" viewBox="0 0 1361 609" version="1.1">
 
-    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
 
-    <title>Group 21</title>
 
-    <desc>Created with Sketch.</desc>
 
-    <defs/>
 
-    <g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 
-        <g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
 
-            <g id="Group-21" transform="translate(77.000000, 73.000000)">
 
-                <g id="Group-18" opacity="0.8"
 
-                   transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
 
-                    <ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367"
 
-                             rx="21.7830479" ry="21.766008"/>
 
-                    <ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601"
 
-                             rx="5.2173913" ry="5.21330997"/>
 
-                    <path
 
-                            d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z"
 
-                            id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"/>
 
-                    <path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6"
 
-                          stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"/>
 
-                    <path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7"
 
-                          stroke-width="0.702678964" opacity="0.7" stroke-linecap="round"
 
-                          stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"/>
 
-                    <path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9"
 
-                          stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round"
 
-                          stroke-dasharray="1.405357899873153,2.108036953469981"/>
 
-                    <g id="Group-17"
 
-                       transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)"
 
-                       fill="#CFDAE6">
 
-                        <ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653"
 
-                                 ry="9.12768076"/>
 
-                        <path
 
-                                d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z"
 
-                                id="Oval-4"
 
-                                transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "/>
 
-                    </g>
 
-                </g>
 
-                <g id="Group-14"
 
-                   transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
 
-                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439"
 
-                             rx="29.1176471" ry="29.1402439"/>
 
-                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439"
 
-                             rx="21.5686275" ry="21.5853659"/>
 
-                    <ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341"
 
-                             rx="23.7254902" ry="23.7439024"/>
 
-                    <ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439"
 
-                             rx="10.7843137" ry="10.7926829"/>
 
-                    <path
 
-                            d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z"
 
-                            id="Oval-2" fill="#BACAD9"/>
 
-                    <g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)"
 
-                       fill="#E6A1A6">
 
-                        <ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824"
 
-                                 ry="6.47560976"/>
 
-                        <path
 
-                                d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z"
 
-                                id="Oval-2-Copy-2"
 
-                                transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "/>
 
-                    </g>
 
-                    <ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706"
 
-                             ry="1.61890244"/>
 
-                    <ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098"
 
-                             rx="1.61764706" ry="1.61890244"/>
 
-                    <ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488"
 
-                             rx="2.15686275" ry="2.15853659"/>
 
-                    <path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6"
 
-                          opacity="0.8"/>
 
-                </g>
 
-                <g id="Group-10" opacity="0.799999952"
 
-                   transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
 
-                    <ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32"
 
-                             rx="11.1864407" ry="11.2941176"/>
 
-                    <g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
 
-                        <ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627"
 
-                                 ry="8.55614973"/>
 
-                        <path
 
-                                d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z"
 
-                                id="Oval-7"/>
 
-                    </g>
 
-                    <path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6"
 
-                          stroke-width="0.941176471"/>
 
-                    <ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186"
 
-                             cy="3.29411765" rx="3.26271186" ry="3.29411765"/>
 
-                    <ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017"
 
-                             ry="2.82352941"/>
 
-                    <path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6"
 
-                          stroke-width="0.941176471"/>
 
-                </g>
 
-                <g id="Group-19" opacity="0.33"
 
-                   transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
 
-                    <g id="Group-17"
 
-                       transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)"
 
-                       fill="#BACAD9">
 
-                        <circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"/>
 
-                        <path
 
-                                d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z"
 
-                                id="Oval-4"
 
-                                transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "/>
 
-                    </g>
 
-                    <circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"/>
 
-                    <path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9"
 
-                          stroke-width="1.16666667"/>
 
-                    <path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9"
 
-                          stroke-width="1.16666667"/>
 
-                    <polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667"
 
-                              points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"/>
 
-                    <path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7"
 
-                          stroke-width="1.16666667" opacity="0.6"/>
 
-                    <path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9"
 
-                          stroke-width="1.16666667"/>
 
-                    <path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6"
 
-                          stroke-width="1.16666667"/>
 
-                    <circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"/>
 
-                    <circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"/>
 
-                    <circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25"
 
-                            r="8.75"/>
 
-                    <circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333"
 
-                            cy="30.3333333" r="5.83333333"/>
 
-                    <circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"/>
 
-                </g>
 
-            </g>
 
-        </g>
 
-    </g>
 
-    <div xmlns="" id="divScriptsUsed" style="display: none"/>
 
-    <script xmlns="" id="globalVarsDetection"
 
-            src="chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/wrs_env.js"/>
 
-</svg>

BIN
src/assets/images/login/one.png
Файл харах


BIN
src/assets/images/login/three.png
Файл харах


BIN
src/assets/images/login/two.png
Файл харах


+ 2 - 0
src/plugins/naive.ts
Файл харах 

@@ -66,6 +66,7 @@ import {
 
   NTimePicker,
 
   NTimePicker,
 
   NBackTop,
 
   NBackTop,
 
   NSkeleton,
 
   NSkeleton,
 
+  NCarousel
 
 } from 'naive-ui';
 
 } from 'naive-ui';
 
 
 
 const naive = create({
 
 const naive = create({
 
@@ -135,6 +136,7 @@ const naive = create({
 
     NTimePicker,
 
     NTimePicker,
 
     NBackTop,
 
     NBackTop,
 
     NSkeleton,
 
     NSkeleton,
 
+    NCarousel
 
   ],
 
   ],
 
 });
 
 });

+ 2 - 1
src/router/router-guards.ts
Файл харах 

@@ -16,8 +16,9 @@ export function createRouterGuards(router: Router) {
 
   })
 
   })
 
 
 
   router.afterEach((to, _, failure) => {
 
   router.afterEach((to, _, failure) => {
 
-    document.title = (to?.meta?.title as string) || document.title;
 
     const Loading = window['$loading'] || null;
 
     const Loading = window['$loading'] || null;
 
+    Loading && Loading.start();
 
+    document.title = (to?.meta?.title as string) || document.title;
 
     Loading && Loading.finish();
 
     Loading && Loading.finish();
 
   })
 
   })

+ 5 - 4
src/settings/designSetting.ts
Файл харах 

@@ -20,13 +20,14 @@ export const appThemeList: string[] = [
 
   '#FC5404',
 
   '#FC5404',
 
 ];
 
 ];
 
 
 
-const setting = {
 
+export const theme = {
 
   //深色主题
 
   //深色主题
 
-  darkTheme: false,
 
+  darkTheme: true,
 
   //系统主题色
 
   //系统主题色
 
-  appTheme: '#2d8cf0',
 
+  appTheme: '#63e2b7',
 
   //系统内置主题色列表
 
   //系统内置主题色列表
 
   appThemeList,
 
   appThemeList,
 
 };
 
 };
 
 
 
-export default setting;
 
+// 修改边框圆角
 
+export const borderRadius = '8px'

+ 2 - 2
src/store/modules/designStore/designStore.ts
Файл харах 

@@ -1,7 +1,7 @@
 
 import { defineStore } from 'pinia';
 
 import { defineStore } from 'pinia';
 
 import { store } from '@/store';
 
 import { store } from '@/store';
 
-import designSetting from '@/settings/designSetting';
 
-const { darkTheme, appTheme, appThemeList } = designSetting;
 
+import { theme, borderRadius } from '@/settings/designSetting';
 
+const { darkTheme, appTheme, appThemeList } = theme;
 
 import { DesignStateType } from './designStore.d'
 
 import { DesignStateType } from './designStore.d'
 
 
 
 export const useDesignStore = defineStore({
 
 export const useDesignStore = defineStore({

+ 9 - 0
src/styles/common/theme.scss
Файл харах 

@@ -0,0 +1,9 @@
 
+
 
+// 黑色
 
+$--color-black: #000;
 
+$--color-border: #333335;
 
+$--color-bg-1: #17171a;
 
+$--color-bg-2: #232324;
 
+$--color-bg-3: #2a2a2b;
 
+$--color-bg-4: #313132;
 
+$--color-bg-5: #373739;

+ 10 - 5
src/styles/common/var.scss
Файл харах 

@@ -1,10 +1,15 @@
 
+@import './theme.scss';
 
+// 颜色
 
+$--color-red: #fc625d;
 
+$--color-warn: #fcbc40;
 
+$--color-success: #34c749;
 
+
 
+// 顶部距离
 
+$--header-height: 60px;
 
 // 模糊
 
 // 模糊
 
 $--filter-blur-base: blur(2px);
 
 $--filter-blur-base: blur(2px);
 
 // 毛玻璃
 
 // 毛玻璃
 
 $--filter-color-base: rgba(0, 0, 0, 0.07);
 
 $--filter-color-base: rgba(0, 0, 0, 0.07);
 
 // 边框
 
 // 边框
 
-$--border-radius-base: 5px;
 
-/// 阴影
 
-$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
 
-$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
 
-$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
+$--border-radius-base: 8px;
 
+$--border-bottom-style: 1px solid $--color-border;

+ 130 - 103
src/views/login/index.vue
Файл харах 

@@ -1,69 +1,84 @@
 
 <template>
 
 <template>
 
-  <div class="go-login">
 
-    <div class="login-account">
 
-      <div class="login-account-header"></div>
 
-      <div class="login-account-container">
 
-        <div class="login-account-top">
 
-          <div class="login-account-top-logo">
 
-            <img src="~@/assets/images/logo.png" alt="" />
 
-          </div>
 
-          <div class="login-account-top-desc">
 
-            GoView
 
-          </div>
 
-        </div>
 
-        <div class="login-account-form">
 
-          <n-form
 
-            ref="formRef"
 
-            label-placement="left"
 
-            size="large"
 
-            :model="formInline"
 
-            :rules="rules"
 
-          >
 
-            <n-form-item path="username">
 
-              <n-input
 
-                v-model:value="formInline.username"
 
-                placeholder="请输入用户名"
 
-              >
 
-                <template #prefix>
 
-                  <n-icon size="18" color="#808695">
 
-                    <PersonOutline />
 
-                  </n-icon>
 
-                </template>
 
-              </n-input>
 
-            </n-form-item>
 
-            <n-form-item path="password">
 
-              <n-input
 
-                v-model:value="formInline.password"
 
-                type="password"
 
-                show-password-toggle
 
-                placeholder="请输入密码"
 
-              >
 
-                <template #prefix>
 
-                  <n-icon size="18" color="#808695">
 
-                    <LockClosedOutline />
 
-                  </n-icon>
 
-                </template>
 
-              </n-input>
 
-            </n-form-item>
 
-            <n-form-item class="default-color">
 
-              <div class="flex justify-between">
 
-                <div class="flex-initial">
 
-                  <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
 
-                </div>
 
+  <div class="go-login-box">
 
+    <n-divider class="go-login-box-header" />
 
+    <div class="go-login">
 
+      <div class="go-login-carousel">
 
+        <n-carousel autoplay>
 
+          <img
 
+            v-for="(e, i) in imgList"
 
+            :key="i"
 
+            class="go-login-carousel-img"
 
+            :src="e"
 
+            alt="展示图片"
 
+          />
 
+        </n-carousel>
 
+      </div>
 
+      <div class="login-account">
 
+        <div class="login-account-container">
 
+          <n-card title="登录">
 
+            <div class="login-account-top">
 
+              <div class="login-account-top-logo">
 
+                <img src="~@/assets/images/logo.png" alt="" />
 
               </div>
 
               </div>
 
-            </n-form-item>
 
-            <n-form-item>
 
-              <n-button
 
-                type="primary"
 
-                @click="handleSubmit"
 
-                size="large"
 
-                :loading="loading"
 
-                block
 
-              >
 
-                登录
 
-              </n-button>
 
-            </n-form-item>
 
-          </n-form>
 
+              <div class="login-account-top-desc">
 
+                欢迎使用 GoView !
 
+              </div>
 
+            </div>
 
+            <n-form
 
+              ref="formRef"
 
+              label-placement="left"
 
+              size="large"
 
+              :model="formInline"
 
+              :rules="rules"
 
+            >
 
+              <n-form-item path="username">
 
+                <n-input
 
+                  v-model:value="formInline.username"
 
+                  placeholder="请输入用户名"
 
+                >
 
+                  <template #prefix>
 
+                    <n-icon size="18">
 
+                      <PersonOutline />
 
+                    </n-icon>
 
+                  </template>
 
+                </n-input>
 
+              </n-form-item>
 
+              <n-form-item path="password">
 
+                <n-input
 
+                  v-model:value="formInline.password"
 
+                  type="password"
 
+                  show-password-toggle
 
+                  placeholder="请输入密码"
 
+                >
 
+                  <template #prefix>
 
+                    <n-icon size="18">
 
+                      <LockClosedOutline />
 
+                    </n-icon>
 
+                  </template>
 
+                </n-input>
 
+              </n-form-item>
 
+              <n-form-item>
 
+                <div class="flex justify-between">
 
+                  <div class="flex-initial">
 
+                    <n-checkbox v-model:checked="autoLogin">
 
+                      自动登录
 
+                    </n-checkbox>
 
+                  </div>
 
+                </div>
 
+              </n-form-item>
 
+              <n-form-item>
 
+                <n-button
 
+                  type="primary"
 
+                  @click="handleSubmit"
 
+                  size="large"
 
+                  :loading="loading"
 
+                  block
 
+                >
 
+                  登录
 
+                </n-button>
 
+              </n-form-item>
 
+            </n-form>
 
+          </n-card>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
@@ -75,6 +90,9 @@ import { reactive, ref } from 'vue'
 
 import { useRoute, useRouter } from 'vue-router'
 
 import { useRoute, useRouter } from 'vue-router'
 
 import { useMessage } from 'naive-ui'
 
 import { useMessage } from 'naive-ui'
 
 import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
 
 import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
 
+import imgOne from '@/assets/images/login/one.png'
 
+import imgTwo from '@/assets/images/login/two.png'
 
+import imgThree from '@/assets/images/login/three.png'
 
 
 
 interface FormState {
 
 interface FormState {
 
   username: string
 
   username: string
 
@@ -96,6 +114,8 @@ const rules = {
 
   password: { required: true, message: '请输入密码', trigger: 'blur' }
 
   password: { required: true, message: '请输入密码', trigger: 'blur' }
 
 }
 
 }
 
 
 
+const imgList = [imgOne, imgTwo, imgThree]
 
+
 
 const router = useRouter()
 
 const router = useRouter()
 
 const route = useRoute()
 
 const route = useRoute()
 
 
 
@@ -116,55 +136,62 @@ const handleSubmit = (e: Event) => {
 
 </script>
 
 </script>
 
 
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
-@include go(login) {
 
-  .login-account {
 
+$width: 450px;
 
+@include go(login-box) {
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  background-image: linear-gradient(120deg, #17171a 0%, #232324 100%);
 
+  &-header {
 
+    margin: 0px;
 
+    margin-top: $--header-height;
 
+  }
 
+  @include go(login) {
 
     display: flex;
 
     display: flex;
 
-    flex-direction: column;
 
-    height: 100vh;
 
-    overflow: auto;
 
-    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
 
-
 
-    &-container {
 
-      flex: 1;
 
-      padding: 32px 0;
 
-      width: 384px;
 
-      margin: 0 auto;
 
-      margin-top: 100px;
 
-    }
 
-
 
-    &-top {
 
-      padding: 32px 0;
 
-      text-align: center;
 
-
 
-      &-desc {
 
-        font-size: 14px;
 
-        color: #808695;
 
+    justify-content: space-evenly;
 
+    align-items: center;
 
+    margin-top: -$--header-height;
 
+    &-carousel {
 
+      width: 50%;
 
+      &-img {
 
+        height: 70vh;
 
       }
 
       }
 
     }
 
     }
 
+    .login-account {
 
+      z-index: 1;
 
+      display: flex;
 
+      flex-direction: column;
 
+      height: 100vh;
 
+      overflow: auto;
 
+      &-container {
 
+        flex: 1;
 
+        padding: 32px 0;
 
+        width: $width;
 
+        margin: 0 auto;
 
+        margin-top: 100px;
 
+      }
 
 
 
-    &-other {
 
-      width: 100%;
 
-    }
 
-
 
-    .default-color {
 
-      color: #515a6e;
 
+      &-top {
 
+        padding: 32px 0;
 
+        text-align: center;
 
 
 
-      .ant-checkbox-wrapper {
 
-        color: #515a6e;
 
+        &-desc {
 
+          font-size: 16px;
 
+          color: #fff;
 
+        }
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }
 
-}
 
 
 
-@media (min-width: 768px) {
 
-  .login-account {
 
-    background-repeat: no-repeat;
 
-    background-position: 50%;
 
-    background-size: 100%;
 
-  }
 
+  @media (min-width: 768px) {
 
+    .login-account {
 
+      background-repeat: no-repeat;
 
+      background-position: 50%;
 
+      background-size: 100%;
 
+    }
 
 
 
-  .page-account-container {
 
-    padding: 32px 0 24px 0;
 
+    .page-account-container {
 
+      padding: 32px 0 24px 0;
 
+    }
 
   }
 
   }
 
 }
 
 }
 
 </style>
 
 </style>