style: 运营监控左上角

1 year ago · 7b91c9096c
parent ca45c2d5e8
commit 7b91c9096c
27 changed files with 961 additions and 39 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,17 +1,15 @@
 module.exports = {
  root: true,
  env: {
-    node: true
+    node: true,
  },
-  'extends': [
-    'plugin:vue/essential',
-    'eslint:recommended'
-  ],
+  extends: ['plugin:vue/essential', 'eslint:recommended'],
  parserOptions: {
-    parser: '@babel/eslint-parser'
+    parser: '@babel/eslint-parser',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
-}
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off',
+  },
+};
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
      "version": "0.1.0",
      "dependencies": {
        "core-js": "^3.8.3",
+        "dayjs": "^1.11.10",
        "vue": "^2.6.14",
        "vue-router": "^3.5.1",
        "vuex": "^3.6.2"
@ -21,10 +22,13 @@
        "@vue/cli-plugin-router": "~5.0.0",
        "@vue/cli-plugin-vuex": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
+        "autoprefixer": "^10.4.17",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
+        "postcss": "^8.4.35",
        "sass": "^1.32.7",
        "sass-loader": "^12.0.0",
+        "tailwindcss": "^3.4.1",
        "vue-template-compiler": "^2.6.14"
      }
    },
@ -51,6 +55,18 @@
        "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19 || 20 || 21"
      }
    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/@ampproject/remapping": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@ -1919,6 +1935,102 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
      "dev": true
    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.4",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.4.tgz",
@ -2039,6 +2151,16 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/@polka/url": {
      "version": "1.0.0-next.24",
      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
@ -3488,6 +3610,12 @@
        }
      ]
    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
    "node_modules/argparse": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@ -3931,6 +4059,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/caniuse-api": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -4816,6 +4953,11 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
    "node_modules/de-indent": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@ -5070,6 +5212,12 @@
      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
      "dev": true
    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
    "node_modules/dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@ -5082,6 +5230,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
    "node_modules/dns-packet": {
      "version": "5.6.1",
      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
@ -5210,6 +5364,12 @@
      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
      "dev": true
    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
    "node_modules/easy-stack": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/easy-stack/-/easy-stack-1.0.1.tgz",
@ -6328,6 +6488,93 @@
        }
      }
    },
+    "node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/foreground-child/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/foreground-child/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/foreground-child/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -7187,6 +7434,24 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
    "node_modules/javascript-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
@ -7231,6 +7496,15 @@
        "url": "https://github.com/chalk/supports-color?sponsor=1"
      }
    },
+    "node_modules/jiti": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
    "node_modules/joi": {
      "version": "17.12.2",
      "resolved": "https://registry.npmjs.org/joi/-/joi-17.12.2.tgz",
@ -8229,6 +8503,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/object-inspect": {
      "version": "1.13.1",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@ -8623,6 +8906,40 @@
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "dev": true
    },
+    "node_modules/path-scurry": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
+      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "dev": true,
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/path-scurry/node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
    "node_modules/path-to-regexp": {
      "version": "0.1.7",
      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@ -8655,6 +8972,24 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/pkg-dir": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -8812,6 +9147,101 @@
        "postcss": "^8.2.15"
      }
    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
+      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/yaml": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.0.tgz",
+      "integrity": "sha512-j9iR8g+/t0lArF4V6NE/QCfT+CO7iLqrXAHZbJdo+LfjqP1vR8Fg5bSiaq6Q2lOD1AUEVrEVIgABvBFYojJVYQ==",
+      "dev": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/postcss-loader": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@ -9024,6 +9454,25 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
    "node_modules/postcss-normalize-charset": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@ -9445,6 +9894,15 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
    "node_modules/read-pkg": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@ -10335,6 +10793,21 @@
        "node": ">=8"
      }
    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@ -10347,6 +10820,19 @@
        "node": ">=8"
      }
    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/strip-eof": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@ -10402,6 +10888,92 @@
        "postcss": "^8.2.15"
      }
    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -10500,6 +11072,43 @@
      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
      "dev": true
    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
+      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.19.1",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@ -10718,6 +11327,12 @@
      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
      "dev": true
    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
    "node_modules/tslib": {
      "version": "2.6.2",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@ -11669,6 +12284,57 @@
        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
      }
    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
    "node_modules/wrap-ansi/node_modules/ansi-styles": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
  },
  "dependencies": {
    "core-js": "^3.8.3",
+    "dayjs": "^1.11.10",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
@ -21,10 +22,13 @@
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.17",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.4.35",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
+    "tailwindcss": "^3.4.1",
    "vue-template-compiler": "^2.6.14"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -1,10 +1,12 @@
 <template>
-  <div id="app">
+  <section id="app">
+    <div class="wrapper">
      <comHeader></comHeader>
-    <main class="contentBox" @click="enterFullscreen">
+      <main class="mt-[4.8vh]" @click="enterFullscreen">
        <router-view></router-view>
      </main>
    </div>
+  </section>
 </template>

 <script>
@ -12,7 +14,7 @@ import comHeader from '@/components/comHeader/comHeader.vue';
 export default {
  data: () => {
    return {
-      isLoding: false,
+      isLoding: true,
    };
  },
  methods: {
@ -51,18 +53,33 @@ export default {
  src: url('@/assets/fonts/YouSheBiaoTiHei.ttf') format('opentype');
 }

+.panmen {
+  font-family: 'PanMen';
+}
+
+.youshe {
+  font-family: 'YouSheBiaoTiHei';
+}
 * {
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-  list-style: none;
  color: #fff;
-  font-family: 'YouSheBiaoTiHei', Microsoft YaHei;
+  // 思源黑体 微软雅黑 无衬线字体
+  font-family: 'Source Han Sans', 'Microsoft YaHei', Arial, sans-serif;
 }
-html,
-body,
+
 #app {
+  padding-top: 56.26%;
+  position: relative;
+}
+
+.wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
  width: 100%;
  height: 100%;
+  background-image: url('@/assets/img/bg.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 </style>
--- a/src/assets/img/bg.png
+++ b/src/assets/img/bg.png
--- a/src/assets/style/tailwind.css
+++ b/src/assets/style/tailwind.css
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/assets/svg/Cloud.svg
+++ b/src/assets/svg/Cloud.svg
--- a/src/assets/svg/Monitor/PointPurple.svg
+++ b/src/assets/svg/Monitor/PointPurple.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="17" height="20.5" viewBox="0 0 17 20.5"><defs><filter id="master_svg0_600_05379" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-4" width="18" height="18"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_185_23098"><stop offset="0%" stop-color="#D58DFF" stop-opacity="1"/><stop offset="100%" stop-color="#D58DFF" stop-opacity="0"/></linearGradient><filter id="master_svg2_600_05380" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-8" y="-4" width="21" height="21"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4" dx="0"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><g><g filter="url(#master_svg0_600_05379)"><ellipse cx="8.5" cy="8" rx="5" ry="5" fill="url(#master_svg1_185_23098)" fill-opacity="1"/></g><g filter="url(#master_svg2_600_05380)"><ellipse cx="8.5" cy="8" rx="2.5" ry="2.5" fill="#D58DFF" fill-opacity="1"/></g></g></svg>
--- a/src/assets/svg/Monitor/TopLeftBox.svg
+++ b/src/assets/svg/Monitor/TopLeftBox.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="554" height="433" viewBox="0 0 554 433"><defs><clipPath id="master_svg0_600_05265"><rect x="0" y="0" width="554" height="433" rx="0"/></clipPath><filter id="master_svg1_600_05267" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="554" height="427.8908386230469"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="0" dx="0"/><feGaussianBlur stdDeviation="33"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="0 0 0 0 0.49803921580314636 0 0 0 0 0.33725491166114807 0 0 0 0 0.8509804010391235 0 0 0 0.30000001192092896 0"/><feBlend mode="normal" in2="shape" result="effect1_innerShadow"/></filter><linearGradient x1="0.012568394653499126" y1="0.2873583436012268" x2="0.9811341762542725" y2="1" id="master_svg2_201_02516"><stop offset="0%" stop-color="#8C64E2" stop-opacity="1"/><stop offset="10.360609740018845%" stop-color="#8C64E2" stop-opacity="0"/><stop offset="47.14285731315613%" stop-color="#8C64E2" stop-opacity="0"/><stop offset="73.57142567634583%" stop-color="#8C64E2" stop-opacity="0.699999988079071"/><stop offset="85.00000238418579%" stop-color="#8C64E2" stop-opacity="0.2199999988079071"/><stop offset="100%" stop-color="#8C64E2" stop-opacity="0"/></linearGradient><linearGradient x1="6.661338147750939e-16" y1="0.5" x2="1.017080545425415" y2="0.5000399947166443" id="master_svg3_555_29651"><stop offset="0%" stop-color="#5D49AF" stop-opacity="1"/><stop offset="100%" stop-color="#7E65E5" stop-opacity="0"/></linearGradient><linearGradient x1="6.661338147750939e-16" y1="0.5" x2="1.017080545425415" y2="0.5000399947166443" id="master_svg4_555_29651"><stop offset="0%" stop-color="#5D49AF" stop-opacity="1"/><stop offset="100%" stop-color="#7E65E5" stop-opacity="0"/></linearGradient><linearGradient x1="0" y1="61.3095703125" x2="0" y2="61.3095703125" gradientUnits="userSpaceOnUse" id="master_svg5_201_00003"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="50%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient><linearGradient x1="552.96630859375" y1="61.3095703125" x2="552.96630859375" y2="61.3095703125" gradientUnits="userSpaceOnUse" id="master_svg6_201_00003"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="50%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#master_svg0_600_05265)"><g filter="url(#master_svg1_600_05267)"><g><path d="M0,0L231.522,0L238.757,10.2183L554,10.2183L554,427.891L0,427.891L0,0Z" fill="#01152A" fill-opacity="0.4000000059604645"/><path d="M-1.5,-1.5L-1.5,429.391L555.5,429.391L555.5,8.71829L239.533,8.71829L232.298,-1.5L-1.5,-1.5ZM1.5,426.391L552.5,426.391L552.5,11.7183L237.982,11.7183L230.747,1.5L1.5,1.5L1.5,426.391Z" fill-rule="evenodd" fill="url(#master_svg2_201_02516)" fill-opacity="1"/></g></g><g><path d="M236.6904296875,0L451.6754296875,0L454.7764296875,3.83186L239.7911796875,3.83186L236.6904296875,0Z" fill="url(#master_svg3_555_29651)" fill-opacity="1"/></g><g><path d="M459.94384765625,0L547.79834765625,0L550.89904765625,3.83186L463.04459765625,3.83186L459.94384765625,0Z" fill="url(#master_svg4_555_29651)" fill-opacity="1"/></g><g><path d="M513.6904296875,430.4453125L524.0262296875,430.4453125L524.0262296875,432.9998825L513.6904296875,432.9998825L513.6904296875,430.4453125ZM526.0934296875,430.4453125L532.2949296875,430.4453125L532.2949296875,432.9998825L526.0934296875,432.9998825L526.0934296875,430.4453125ZM539.5300296875,430.4453125L534.3620296875,430.4453125L534.3620296875,432.9998825L539.5300296875,432.9998825L539.5300296875,430.4453125Z" fill-rule="evenodd" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M5.16796875,421.50410578125L5.16796875,415.11767578125L10.33587875,421.50410578125L5.16796875,421.50410578125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g><path d="M547.798769375,421.50410578125L547.798769375,415.11767578125L542.630859375,421.50410578125L547.798769375,421.50410578125Z" fill="#8C64E2" fill-opacity="0.8392156958580017"/></g><g transform="matrix(0,1,-1,0,61.3095703125,61.3095703125)"><line x1="0" y1="60.8095703125" x2="366.5810852050781" y2="60.8095703125" stroke="url(#master_svg5_201_00003)" fill-opacity="0" fill="none" stroke-width="1"/></g><g transform="matrix(0,1,-1,0,614.27587890625,-491.65673828125)"><line x1="552.96630859375" y1="60.8095703125" x2="919.5473937988281" y2="60.8095703125" stroke="url(#master_svg6_201_00003)" fill-opacity="0" fill="none" stroke-width="1"/></g></g></svg>
--- a/src/assets/svg/Monitor/TopLeftItemBox.svg
+++ b/src/assets/svg/Monitor/TopLeftItemBox.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="142" height="162" viewBox="0 0 142 162"><g><g transform="matrix(-1,0,0,1,282,0)"><path d="M194.9719,0.5L189.0525,7.031L183.4307,13.2336L149.77391,13.2336L140.5,26.3078L140.5,161.5L273.695,161.5L281.5,152.888L281.5,0.5L194.9719,0.5ZM183.874,14.2336L189.7934,7.70256L195.4152,1.5L280.5,1.5L280.5,152.503L273.251,160.5L141.5,160.5L141.5,26.6265L150.29061,14.2336L183.874,14.2336Z" fill-rule="evenodd" fill="#2D126F" fill-opacity="1"/></g><g><g><path d="M97,1C97,1,102,1,102,1C102,1,109,8.15967,109,8.15967C109,8.15967,104,8.15967,104,8.15967C104,8.15967,97,1,97,1Z" fill="#5D49AF" fill-opacity="1"/></g><g><path d="M106,1C106,1,111,1,111,1C111,1,118,8.15967,118,8.15967C118,8.15967,113,8.15967,113,8.15967C113,8.15967,106,1,106,1Z" fill="#5D49AF" fill-opacity="1"/></g><g><path d="M115,1C115,1,120,1,120,1C120,1,127,8.15967,127,8.15967C127,8.15967,122,8.15967,122,8.15967" fill="#5D49AF" fill-opacity="1"/></g></g><g><g><path d="M2,2L13,2L13,0L0,0L0,13L2,13L2,2Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,282,322)"><path d="M142,162L153,162L153,160L140,160L140,173L142,173L142,162Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g><g><path d="M8.08579,162L16.5,162L16.5,160L8.91421,160L2,153.08579L2,145L0,145L0,153.91421L8.08579,162Z" fill-rule="evenodd" fill="#5D49AF" fill-opacity="1"/></g></g></g></svg>
--- a/src/assets/svg/Monitor/TopLeftItemBoxPurple.svg
+++ b/src/assets/svg/Monitor/TopLeftItemBoxPurple.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="490" height="162" viewBox="0 0 490 162"><g><g transform="matrix(-1,0,0,1,978,0)"><path d="M552.8462,0.5L546.9233,6.41614L541.2931,12.0398L497.79805,12.0398L488.5,23.907L488.5,161.5L969.672,161.5L977.5,153.681L977.5,0.5L552.8462,0.5ZM541.7069,13.0398L547.63,7.12366L553.26,1.5L976.5,1.5L976.5,153.267L969.258,160.5L489.5,160.5L489.5,24.2521L498.28493,13.0398L541.7069,13.0398Z" fill-rule="evenodd" fill="#72278D" fill-opacity="0.699999988079071"/></g><g><g><path d="M434,1C434,1,439,1,439,1C439,1,446,8.15967,446,8.15967C446,8.15967,441,8.15967,441,8.15967C441,8.15967,434,1,434,1Z" fill="#B53FDF" fill-opacity="1"/></g><g><path d="M443,1C443,1,448,1,448,1C448,1,455,8.15967,455,8.15967C455,8.15967,450,8.15967,450,8.15967C450,8.15967,443,1,443,1Z" fill="#B53FDF" fill-opacity="1"/></g><g><path d="M461,1C461,1,466,1,466,1C466,1,473,8.15967,473,8.15967C473,8.15967,468,8.15967,468,8.15967C468,8.15967,461,1,461,1Z" fill="#B53FDF" fill-opacity="1"/></g><g><path d="M452,1C452,1,457,1,457,1C457,1,464,8.15967,464,8.15967C464,8.15967,459,8.15967,459,8.15967" fill="#B53FDF" fill-opacity="1"/></g></g><g><g transform="matrix(-1,0,0,-1,978,322)"><path d="M490,162L501,162L501,160L488,160L488,173L490,173L490,162Z" fill-rule="evenodd" fill="#B53FDF" fill-opacity="1"/></g><g><path d="M2,2L13,2L13,0L0,0L0,13L2,13L2,2Z" fill-rule="evenodd" fill="#B53FDF" fill-opacity="1"/></g><g><path d="M8.08579,162L16.5,162L16.5,160L8.91421,160L2,153.08579L2,145L0,145L0,153.91421L8.08579,162Z" fill-rule="evenodd" fill="#B53FDF" fill-opacity="1"/></g></g></g></svg>
--- a/src/assets/svg/Monitor/TriangleBlue.svg
+++ b/src/assets/svg/Monitor/TriangleBlue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="22" viewBox="0 0 20 22"><defs><linearGradient x1="0.02499999664723873" y1="0.04545453190803528" x2="0.9749999642372131" y2="0.9999999403953552" id="master_svg0_185_26784"><stop offset="0%" stop-color="#7651D0" stop-opacity="1"/><stop offset="100%" stop-color="#DCCFFC" stop-opacity="1"/></linearGradient><linearGradient x1="0.02499999664723873" y1="0.04545453563332558" x2="0.875" y2="1" id="master_svg1_185_26792"><stop offset="0%" stop-color="#130043" stop-opacity="1"/><stop offset="100%" stop-color="#A583FA" stop-opacity="1"/></linearGradient></defs><g><g><path d="M0,0C0,0,20,11,20,11C20,11,7,11,7,11C7,11,0,0,0,0Z" fill="url(#master_svg0_185_26784)" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,44)"><path d="M0,22C0,22,20,33,20,33C20,33,7,33,7,33C7,33,0,22,0,22Z" fill="url(#master_svg1_185_26792)" fill-opacity="1"/></g></g></svg>
--- a/src/assets/svg/Monitor/TrianglePurple.svg
+++ b/src/assets/svg/Monitor/TrianglePurple.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="22" viewBox="0 0 20 22"><defs><linearGradient x1="0.02499999664723873" y1="0.04545453190803528" x2="0.9749999642372131" y2="0.9999999403953552" id="master_svg0_185_23806"><stop offset="0%" stop-color="#FFA5D6" stop-opacity="1"/><stop offset="100%" stop-color="#F3DDFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.02499999664723873" y1="0.04545453563332558" x2="0.875" y2="1" id="master_svg1_185_26888"><stop offset="0%" stop-color="#582641" stop-opacity="1"/><stop offset="100%" stop-color="#DFA7FF" stop-opacity="1"/></linearGradient></defs><g><g><path d="M0,0C0,0,20,11,20,11C20,11,7,11,7,11C7,11,0,0,0,0C0,0,0,0,0,0Z" fill="url(#master_svg0_185_23806)" fill-opacity="0.800000011920929"/></g><g transform="matrix(1,0,0,-1,0,44)"><path d="M0,22C0,22,20,33,20,33C20,33,7,33,7,33C7,33,0,22,0,22C0,22,0,22,0,22Z" fill="url(#master_svg1_185_26888)" fill-opacity="0.800000011920929"/></g></g></svg>
--- a/src/components/comHeader/comHeader.vue
+++ b/src/components/comHeader/comHeader.vue
@ -1,9 +1,67 @@
 <template>
-  <div></div>
+  <header class="pt-[4.5vh]">
+    <div class="text-[3.5vh] text-center youshe leading-none">{{ $route.meta.title }}</div>
+    <div class="flex justify-between items-center px-[5vh] mt-[-1.6vh]">
+      <div class="flex items-end">
+        <img src="@/assets/svg/Cloud.svg" />
+        <span class="text[1.6vh] ml-[0.3vh]">多云转阴 17-34°C</span>
+      </div>
+      <div class="text[1.48vh]">{{ curTime }}</div>
+    </div>
+  </header>
 </template>

 <script>
-export default {};
+import dayjs from 'dayjs';
+export default {
+  data() {
+    return {
+      curTime: '',
+      dayOfWeekText: '',
+    };
+  },
+  methods: {
+    // 获取星期
+    getWeek() {
+      const dayOfWeek = dayjs().day();
+      switch (dayOfWeek) {
+        case 0:
+          this.dayOfWeekText = '星期日';
+          break;
+        case 1:
+          this.dayOfWeekText = '星期一';
+          break;
+        case 2:
+          this.dayOfWeekText = '星期二';
+          break;
+        case 3:
+          this.dayOfWeekText = '星期三';
+          break;
+        case 4:
+          this.dayOfWeekText = '星期四';
+          break;
+        case 5:
+          this.dayOfWeekText = '星期五';
+          break;
+        case 6:
+          this.dayOfWeekText = '星期六';
+          break;
+      }
+    },
+    // 更新当前时间
+    updateTime() {
+      this.curTime = dayjs().format(`YYYY-MM-DD HH:mm:ss ${this.dayOfWeekText}`);
+    },
+  },
+  created() {
+    this.getWeek();
+    this.updateTime();
+    this.timer = setInterval(this.updateTime, 1000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+};
 </script>

-<style></style>
+<style lang="scss" scoped></style>
--- a/src/main.js
+++ b/src/main.js
@ -1,12 +1,13 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import '@/assets/style/tailwind.css';

-Vue.config.productionTip = false
+Vue.config.productionTip = false;

 new Vue({
  router,
  store,
-  render: h => h(App)
-}).$mount('#app')
+  render: h => h(App),
+}).$mount('#app');
--- a/src/router/index.js
+++ b/src/router/index.js
@ -12,26 +12,26 @@ const routes = [
  {
    path: '/monitor',
    name: 'monitor',
-    meta: { title: '运营监控' },
-    component: () => import('@/views/pageMonitor/MonitorIndex.vue'),
+    meta: { title: '运营监控数据可视化' },
+    component: () => import('@/views/pageMonitor/index.vue'),
  },
  {
    path: '/scheduling',
    name: 'scheduling',
    meta: { title: '护理人员排班' },
-    component: () => import('@/views/pageScheduling/SchedulingIndex.vue'),
+    component: () => import('@/views/pageScheduling/index.vue'),
  },
  {
    path: '/operation',
    name: 'operation',
    meta: { title: '首台率' },
-    component: () => import('@/views/pageOperation/OperationIndex.vue'),
+    component: () => import('@/views/pageOperation/index.vue'),
  },
  {
    path: '/room',
    name: 'room',
    meta: { title: '手术间利用率' },
-    component: () => import('@/views/pageRoom/RoomIndex.vue'),
+    component: () => import('@/views/pageRoom/index.vue'),
  },
 ];

--- a/src/views/pageScheduling/SchedulingIndex.vue
+++ b/src/views/pageScheduling/SchedulingIndex.vue
@ -1,5 +1,5 @@
 <template>
-  <div></div>
+  <div class="w-[51.29vh]"></div>
 </template>

 <script>
--- a/src/views/pageMonitor/bottomMiddle/index.vue
+++ b/src/views/pageMonitor/bottomMiddle/index.vue
@ -0,0 +1,9 @@
+<template>
+  <div class="w-[71.57vh]"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
--- a/src/views/pageMonitor/bottomRight/index.vue
+++ b/src/views/pageMonitor/bottomRight/index.vue
@ -0,0 +1,9 @@
+<template>
+  <div class="w-[41.75vh]"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
--- a/src/views/pageMonitor/index.vue
+++ b/src/views/pageMonitor/index.vue
@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="flex justify-evenly">
+      <topLeft></topLeft>
+      <topRight></topRight>
+    </div>
+    <div class="flex justify-evenly">
+      <bottomLeft></bottomLeft>
+      <div class="w-[116.94vh] flex justify-between">
+        <bottomMiddle></bottomMiddle>
+        <bottomRight></bottomRight>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topLeft from './topLeft/index.vue';
+import topRight from './topRight/index.vue';
+import bottomLeft from './bottomLeft/index.vue';
+import bottomMiddle from './bottomMiddle/index.vue';
+import bottomRight from './bottomRight/index.vue';
+export default {
+  components: {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomMiddle,
+    bottomRight,
+  },
+};
+</script>
+
+<style></style>
--- a/src/views/pageMonitor/topLeft/index.vue
+++ b/src/views/pageMonitor/topLeft/index.vue
@ -0,0 +1,92 @@
+<template>
+  <div class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border">
+    <section class="flex justify-between">
+      <template v-for="(item, index) in overviewData">
+        <div class="w-[12.96vh] h-[14.81vh] bgTopLeftItemBox bg-contain bg-no-repeat pl-[1.48vh] py-[0.92vh]" :key="index">
+          <img src="@/assets/svg/Monitor/TriangleBlue.svg" />
+          <p class="tracking-[0.27vh] text-[1.48vh] leading-none mt-[2vh] mb-[2vh] opacity-80">{{ item['itemName'] }}</p>
+          <p class="">
+            <span class="text-[4.25vh] youshe text-[#733FF3] leading-none">{{ item['itemVal'] }}</span>
+            <span class="text-[2.22vh] youshe text-[#733FF3] leading-none">{{ item['itemUnit'] }}</span>
+          </p>
+        </div>
+      </template>
+    </section>
+    <div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBoxPurple bg-contain bg-no-repeat mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
+      <section>
+        <div class="flex">
+          <img src="@/assets/svg/Monitor/TrianglePurple.svg" />
+          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
+        </div>
+        <p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none">350</p>
+      </section>
+      <section>
+        <template v-for="(item, index) in peopleData">
+          <div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
+            <div class="flex items-end">
+              <img src="@/assets/svg/Monitor/PointPurple.svg" />
+              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
+            </div>
+            <div class="flex items-center">
+              <span class="text-[#B53FDF] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
+              <span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
+            </div>
+          </div>
+        </template>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      overviewData: [
+        {
+          itemName: '首台准点率',
+          itemVal: '80',
+          itemUnit: '%',
+        },
+        {
+          itemName: '手术间利用率',
+          itemVal: '86',
+          itemUnit: '%',
+        },
+        {
+          itemName: '急诊患者',
+          itemVal: '180',
+          itemUnit: '个',
+        },
+      ],
+      peopleData: [
+        {
+          itemName: '进行中',
+          itemVal: '50',
+        },
+        {
+          itemName: '待进行',
+          itemVal: '300',
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style>
+.bgTopLeftBox {
+  background-image: url('@/assets/svg/Monitor/TopLeftBox.svg');
+}
+.bgTopLeftItemBox {
+  background-image: url('@/assets/svg/Monitor/TopLeftItemBox.svg');
+}
+.bgTopLeftItemBoxPurple {
+  background-image: url('@/assets/svg/Monitor/TopLeftItemBoxPurple.svg');
+}
+.peopleItemBox {
+  background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
+  border: 1.5px solid;
+  border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
+}
+</style>
--- a/src/views/pageMonitor/topRight/index.vue
+++ b/src/views/pageMonitor/topRight/index.vue
@ -0,0 +1,9 @@
+<template>
+  <div class="w-[116.94vh]"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
--- a/src/views/pageMonitor/MonitorIndex.vue
+++ b/src/views/pageMonitor/MonitorIndex.vue
--- a/src/views/pageOperation/OperationIndex.vue
+++ b/src/views/pageOperation/OperationIndex.vue
--- a/src/views/pageScheduling/index.vue
+++ b/src/views/pageScheduling/index.vue
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.vue"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="17" height="20.5" viewBox="0 0 17 20.5"><defs><filter id="master_svg0_600_05379" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-4" y="-4" width="18" height="18"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/></filter><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_185_23098"><stop offset="0%" stop-color="#D58DFF" stop-opacity="1"/><stop offset="100%" stop-color="#D58DFF" stop-opacity="0"/></linearGradient><filter id="master_svg2_600_05380" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-8" y="-4" width="21" height="21"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4" dx="0"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs><g><g filter="url(#master_svg0_600_05379)"><ellipse cx="8.5" cy="8" rx="5" ry="5" fill="url(#master_svg1_185_23098)" fill-opacity="1"/></g><g filter="url(#master_svg2_600_05380)"><ellipse cx="8.5" cy="8" rx="2.5" ry="2.5" fill="#D58DFF" fill-opacity="1"/></g></g></svg>