1116

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "aos": "^2.3.4",
     "axios": "^1.6.1",
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",
@@ -15,13 +16,17 @@
     "js-md5": "^0.8.3",
     "qs": "^6.11.2",
     "register-service-worker": "^1.7.2",
+    "three": "^0.158.0",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.3",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
+    "@types/aos": "^3.0.7",
     "@types/node": "^20.9.0",
+    "@types/three": "^0.158.2",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-pwa": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",

src/App.vue

@@ -1,15 +1,16 @@
 <template>
-  <router-view/>
+  <router-view />
 </template>
 <script lang="ts" setup>
-
-
+import * as AOS from "aos";
+AOS.init();
 </script>
 <style lang="scss">
 @import url('@/assets/css/scrolls.css');
 @import url('@/assets/css/font.css');
 @import url('@/assets/scss/config.scss');
-
+@import url('@/assets/icons/iconfont.css');
+@import "../node_modules/aos/dist/aos.css";
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -18,7 +19,9 @@
   height: 100%;
 
 }
-body,html{
+
+body,
+html {
   height: 100%;
   // background: linear-gradient( #d7e4f4,#afd1fe);
   background: #fff;
@@ -28,7 +31,8 @@ body,html{
   // background: url('@/assets/img/bg-5.jpg') no-repeat bottom center;
   // background-size:cover;
 }
-*{
+
+* {
   margin: 0;
   padding: 0;
 }

src/assets/css/login.scss

@@ -4,29 +4,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: url('@/assets/img/bg.png') no-repeat bottom center;
-    background-size: cover;
+    background: gradient(radial, 50% 50%, 0, 50% 50%, 100, from(green), to(white));
     &-main {
-        min-width: 40px;
-        min-height: 400px;
-        margin-left: 50%;
-        background: #fff;
-        border-radius: 10px;
+        min-width: 400px;
+        min-height: 300px;
+        background: rgba($color: #13194b, $alpha: .2);
+        z-index: 2;
+        padding: 20px 50px;
         display: flex;
-        box-shadow: 0 0 20px 0px rgba(12, 1, 4, 0.1);
-        &-left {
-            flex: 1;
-            flex-shrink: 0;
-            background: url('@/assets/img/login-bg.png') no-repeat center center;
-            background-size: 80%;
-        }
-
-        &-right {
-            flex: 1;
-            padding: 20px 50px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
+        flex-direction: column;
+        justify-content: center;
+        border-radius: 4px;
     }
 }

src/assets/icons/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icons/demo_index.html

@@ -0,0 +1,671 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4333703" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#x100d9;</span>
+                <div class="name">标签</div>
+                <div class="code-name">&amp;#x100d9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">调拨出库</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe640;</span>
+                <div class="name">基本信息设置</div>
+                <div class="code-name">&amp;#xe640;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">订单</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62c;</span>
+                <div class="name">销售管理</div>
+                <div class="code-name">&amp;#xe62c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">出库流程</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e9;</span>
+                <div class="name">_库存</div>
+                <div class="code-name">&amp;#xe6e9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe806;</span>
+                <div class="name">库存</div>
+                <div class="code-name">&amp;#xe806;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ad;</span>
+                <div class="name">分析项目库</div>
+                <div class="code-name">&amp;#xe7ad;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">其他-设置</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">其他-消息</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xebe8;</span>
+                <div class="name">入库</div>
+                <div class="code-name">&amp;#xebe8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">主页</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe644;</span>
+                <div class="name">主页</div>
+                <div class="code-name">&amp;#xe644;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe637;</span>
+                <div class="name">标签2</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6fc;</span>
+                <div class="name">icon_me</div>
+                <div class="code-name">&amp;#xe6fc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">我的患者</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">首页_主页灰</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe672;</span>
+                <div class="name">手术外科</div>
+                <div class="code-name">&amp;#xe672;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe701;</span>
+                <div class="name">高血压</div>
+                <div class="code-name">&amp;#xe701;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe612;</span>
+                <div class="name">手术安排</div>
+                <div class="code-name">&amp;#xe612;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1700121886027') format('woff2'),
+       url('iconfont.woff?t=1700121886027') format('woff'),
+       url('iconfont.ttf?t=1700121886027') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-biaoqian1"></span>
+            <div class="name">
+              标签
+            </div>
+            <div class="code-name">.icon-biaoqian1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tiaobochuku"></span>
+            <div class="name">
+              调拨出库
+            </div>
+            <div class="code-name">.icon-tiaobochuku
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-navicon-jbxxsz"></span>
+            <div class="name">
+              基本信息设置
+            </div>
+            <div class="code-name">.icon-navicon-jbxxsz
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dingdan"></span>
+            <div class="name">
+              订单
+            </div>
+            <div class="code-name">.icon-dingdan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiaoshouguanli"></span>
+            <div class="name">
+              销售管理
+            </div>
+            <div class="code-name">.icon-xiaoshouguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chukuliucheng"></span>
+            <div class="name">
+              出库流程
+            </div>
+            <div class="code-name">.icon-chukuliucheng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-_kucun"></span>
+            <div class="name">
+              _库存
+            </div>
+            <div class="code-name">.icon-_kucun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-kucun"></span>
+            <div class="name">
+              库存
+            </div>
+            <div class="code-name">.icon-kucun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fenxixiangmuku"></span>
+            <div class="name">
+              分析项目库
+            </div>
+            <div class="code-name">.icon-fenxixiangmuku
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qita-shezhi"></span>
+            <div class="name">
+              其他-设置
+            </div>
+            <div class="code-name">.icon-qita-shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qita-xiaoxi"></span>
+            <div class="name">
+              其他-消息
+            </div>
+            <div class="code-name">.icon-qita-xiaoxi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ruku"></span>
+            <div class="name">
+              入库
+            </div>
+            <div class="code-name">.icon-ruku
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhuye"></span>
+            <div class="name">
+              主页
+            </div>
+            <div class="code-name">.icon-zhuye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhuye1"></span>
+            <div class="name">
+              主页
+            </div>
+            <div class="code-name">.icon-zhuye1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-biaoqian"></span>
+            <div class="name">
+              标签2
+            </div>
+            <div class="code-name">.icon-biaoqian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon-"></span>
+            <div class="name">
+              icon_me
+            </div>
+            <div class="code-name">.icon-icon-
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wodehuanzhe"></span>
+            <div class="name">
+              我的患者
+            </div>
+            <div class="code-name">.icon-wodehuanzhe
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouye_zhuyehui"></span>
+            <div class="name">
+              首页_主页灰
+            </div>
+            <div class="code-name">.icon-shouye_zhuyehui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shoushuwaike"></span>
+            <div class="name">
+              手术外科
+            </div>
+            <div class="code-name">.icon-shoushuwaike
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tubiao_-"></span>
+            <div class="name">
+              高血压
+            </div>
+            <div class="code-name">.icon-tubiao_-
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-iconku-"></span>
+            <div class="name">
+              手术安排
+            </div>
+            <div class="code-name">.icon-iconku-
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biaoqian1"></use>
+                </svg>
+                <div class="name">标签</div>
+                <div class="code-name">#icon-biaoqian1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tiaobochuku"></use>
+                </svg>
+                <div class="name">调拨出库</div>
+                <div class="code-name">#icon-tiaobochuku</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-navicon-jbxxsz"></use>
+                </svg>
+                <div class="name">基本信息设置</div>
+                <div class="code-name">#icon-navicon-jbxxsz</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dingdan"></use>
+                </svg>
+                <div class="name">订单</div>
+                <div class="code-name">#icon-dingdan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiaoshouguanli"></use>
+                </svg>
+                <div class="name">销售管理</div>
+                <div class="code-name">#icon-xiaoshouguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chukuliucheng"></use>
+                </svg>
+                <div class="name">出库流程</div>
+                <div class="code-name">#icon-chukuliucheng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-_kucun"></use>
+                </svg>
+                <div class="name">_库存</div>
+                <div class="code-name">#icon-_kucun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kucun"></use>
+                </svg>
+                <div class="name">库存</div>
+                <div class="code-name">#icon-kucun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fenxixiangmuku"></use>
+                </svg>
+                <div class="name">分析项目库</div>
+                <div class="code-name">#icon-fenxixiangmuku</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qita-shezhi"></use>
+                </svg>
+                <div class="name">其他-设置</div>
+                <div class="code-name">#icon-qita-shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qita-xiaoxi"></use>
+                </svg>
+                <div class="name">其他-消息</div>
+                <div class="code-name">#icon-qita-xiaoxi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ruku"></use>
+                </svg>
+                <div class="name">入库</div>
+                <div class="code-name">#icon-ruku</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhuye"></use>
+                </svg>
+                <div class="name">主页</div>
+                <div class="code-name">#icon-zhuye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhuye1"></use>
+                </svg>
+                <div class="name">主页</div>
+                <div class="code-name">#icon-zhuye1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-biaoqian"></use>
+                </svg>
+                <div class="name">标签2</div>
+                <div class="code-name">#icon-biaoqian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon-"></use>
+                </svg>
+                <div class="name">icon_me</div>
+                <div class="code-name">#icon-icon-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wodehuanzhe"></use>
+                </svg>
+                <div class="name">我的患者</div>
+                <div class="code-name">#icon-wodehuanzhe</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouye_zhuyehui"></use>
+                </svg>
+                <div class="name">首页_主页灰</div>
+                <div class="code-name">#icon-shouye_zhuyehui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shoushuwaike"></use>
+                </svg>
+                <div class="name">手术外科</div>
+                <div class="code-name">#icon-shoushuwaike</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tubiao_-"></use>
+                </svg>
+                <div class="name">高血压</div>
+                <div class="code-name">#icon-tubiao_-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-iconku-"></use>
+                </svg>
+                <div class="name">手术安排</div>
+                <div class="code-name">#icon-iconku-</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/icons/iconfont.css

@@ -0,0 +1,99 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4333703 */
+  src: url('iconfont.woff2?t=1700121886027') format('woff2'),
+       url('iconfont.woff?t=1700121886027') format('woff'),
+       url('iconfont.ttf?t=1700121886027') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-biaoqian1:before {
+  content: "\100d9";
+}
+
+.icon-tiaobochuku:before {
+  content: "\e609";
+}
+
+.icon-navicon-jbxxsz:before {
+  content: "\e640";
+}
+
+.icon-dingdan:before {
+  content: "\e602";
+}
+
+.icon-xiaoshouguanli:before {
+  content: "\e62c";
+}
+
+.icon-chukuliucheng:before {
+  content: "\e613";
+}
+
+.icon-_kucun:before {
+  content: "\e6e9";
+}
+
+.icon-kucun:before {
+  content: "\e806";
+}
+
+.icon-fenxixiangmuku:before {
+  content: "\e7ad";
+}
+
+.icon-qita-shezhi:before {
+  content: "\e60a";
+}
+
+.icon-qita-xiaoxi:before {
+  content: "\e60b";
+}
+
+.icon-ruku:before {
+  content: "\ebe8";
+}
+
+.icon-zhuye:before {
+  content: "\e600";
+}
+
+.icon-zhuye1:before {
+  content: "\e644";
+}
+
+.icon-biaoqian:before {
+  content: "\e637";
+}
+
+.icon-icon-:before {
+  content: "\e6fc";
+}
+
+.icon-wodehuanzhe:before {
+  content: "\e617";
+}
+
+.icon-shouye_zhuyehui:before {
+  content: "\e608";
+}
+
+.icon-shoushuwaike:before {
+  content: "\e672";
+}
+
+.icon-tubiao_-:before {
+  content: "\e701";
+}
+
+.icon-iconku-:before {
+  content: "\e612";
+}
+

src/assets/icons/iconfont.json

@@ -0,0 +1,156 @@
+{
+  "id": "4333703",
+  "name": "出入库",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "29959511",
+      "name": "标签",
+      "font_class": "biaoqian1",
+      "unicode": "100d9",
+      "unicode_decimal": 65753
+    },
+    {
+      "icon_id": "3239734",
+      "name": "调拨出库",
+      "font_class": "tiaobochuku",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "3702624",
+      "name": "基本信息设置",
+      "font_class": "navicon-jbxxsz",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "4464997",
+      "name": "订单",
+      "font_class": "dingdan",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "6241680",
+      "name": "销售管理",
+      "font_class": "xiaoshouguanli",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "6752784",
+      "name": "出库流程",
+      "font_class": "chukuliucheng",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "12748584",
+      "name": "_库存",
+      "font_class": "_kucun",
+      "unicode": "e6e9",
+      "unicode_decimal": 59113
+    },
+    {
+      "icon_id": "13850973",
+      "name": "库存",
+      "font_class": "kucun",
+      "unicode": "e806",
+      "unicode_decimal": 59398
+    },
+    {
+      "icon_id": "25747438",
+      "name": "分析项目库",
+      "font_class": "fenxixiangmuku",
+      "unicode": "e7ad",
+      "unicode_decimal": 59309
+    },
+    {
+      "icon_id": "32348312",
+      "name": "其他-设置",
+      "font_class": "qita-shezhi",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "32348321",
+      "name": "其他-消息",
+      "font_class": "qita-xiaoxi",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "36159124",
+      "name": "入库",
+      "font_class": "ruku",
+      "unicode": "ebe8",
+      "unicode_decimal": 60392
+    },
+    {
+      "icon_id": "653951",
+      "name": "主页",
+      "font_class": "zhuye",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "1107047",
+      "name": "主页",
+      "font_class": "zhuye1",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "4251704",
+      "name": "标签2",
+      "font_class": "biaoqian",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
+      "icon_id": "5699794",
+      "name": "icon_me",
+      "font_class": "icon-",
+      "unicode": "e6fc",
+      "unicode_decimal": 59132
+    },
+    {
+      "icon_id": "6560990",
+      "name": "我的患者",
+      "font_class": "wodehuanzhe",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "7318055",
+      "name": "首页_主页灰",
+      "font_class": "shouye_zhuyehui",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "11043235",
+      "name": "手术外科",
+      "font_class": "shoushuwaike",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "11344008",
+      "name": "高血压",
+      "font_class": "tubiao_-",
+      "unicode": "e701",
+      "unicode_decimal": 59137
+    },
+    {
+      "icon_id": "13326838",
+      "name": "手术安排",
+      "font_class": "iconku-",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    }
+  ]
+}

src/components/breadcrumb.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="y-breadcrumb">
+        <el-breadcrumb :separator-icon="ArrowRight">
+            <el-breadcrumb-item>宝智达</el-breadcrumb-item>
+            <el-breadcrumb-item>系统首页</el-breadcrumb-item>
+            <el-breadcrumb-item>{{data.isRouter}}</el-breadcrumb-item>
+        </el-breadcrumb>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import router from '@/router/index'
+import { ArrowRight } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router';
+import { reactive, watch } from 'vue'
+// let router = useRouter()
+//当前路由
+const data = reactive({
+    isRouter:''
+})
+watch(() =>router , (toPath:any) => {
+    data.isRouter = toPath.currentRoute._value.meta.title
+}, {immediate:true,deep: true })
+
+</script>
+<style lang="scss">
+.y-breadcrumb{
+    padding-bottom:var(--y-padding);
+}
+</style>

src/components/card.vue

@@ -1,29 +1,38 @@
 <!--  -->
 <template>
-    <div class="y-card">
-        <div class="y-card-headers">
-            <h4><slot name="card-tit"></slot>  </h4>
-        </div>
-        <div class="y-card-item">
-            <slot name="card-content"></slot>  
-        </div>
-    </div>
+    <el-card class="box-card">
+    <template #header>
+      <div class="card-header">
+        <el-text><slot name="card-tit"></slot></el-text>
+        <el-text tag="b"><slot name="card-subhead"></slot></el-text>
+      </div>
+    </template>
+    <slot name="card-content"></slot>
+  </el-card>
 </template>
 
 <script setup>
 </script>
 <style lang="scss">
-.y-card {
-    background: var(--y-card-background);
-    border-radius: var(--y-radius);
-    margin-bottom: var(--y-margin);
-    &-headers {
-        border-bottom: var(--y-border);
-        box-sizing: border-box;
-        padding: var(--y-padding);
-    }
-    &-item{
-        padding: var(--y-padding);
-    }
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+.el-card__header {
+    padding:var(--y-padding);
+    border-bottom: 1px solid var(--el-card-border-color);
+    box-sizing: border-box;
+}
+.box-card {
+    border:none;
 }
 </style>

src/components/echart/echart-bar-LR.vue

@@ -1,6 +1,6 @@
 <!-- 柱图 -->
 <template>
-    <div style="height:100%;" :id="props.id" class="myChart"></div>
+    <div style="height:100%;min-height: 300px;" :id="props.id" class="myChart"></div>
 </template>
 
 <script setup lang="ts">

src/components/echart/echart-bar.vue

@@ -1,6 +1,6 @@
 <!-- 柱图 -->
 <template>
-    <div style="height:100%;" :id="props.id" class="myChart"></div>
+    <div style="height:100%;min-height: 300px;" :id="props.id" class="myChart"></div>
 </template>
 <script setup lang="ts">
 import { onMounted, inject, watch, reactive } from "vue";
@@ -80,17 +80,28 @@ const initEcharts = () => {
         },
         xAxis: {
             type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu']
+            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
         },
         yAxis: {
             type: 'value'
         },
         series: [
             {
-                data: [Math.random(), Math.random(), Math.random(), Math.random()],
+                data: [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()],
                 type: 'bar',
                 barMaxWidth:'10%',//宽度
                 itemStyle: { //面积图颜色设置
+                    // normal: {//柱状图上方显示数值
+                    //     label: {
+                    //         show: true, //开启显示
+                    //         position: 'top', //顶部显示
+                    //         textStyle: {
+                    //             //数值样式
+                    //             color: 'black',
+                    //             fontSize: 12,
+                    //         },
+                    //     },
+                    // },
                     color: {
                         type: 'linear',
                         x: 0,
@@ -104,11 +115,11 @@ const initEcharts = () => {
                         ],
                         globalCoord: false // 缺省为 false
                     },
-                    barBorderRadius: [30, 30, 0, 0] //圓角
+                    barBorderRadius: [30, 30,30,30] //圓角
                 },
             },
             {
-                data: [Math.random(), Math.random(), Math.random(), Math.random()],
+                data: [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()],
                 type: 'bar',
                 barMaxWidth:'10%',//宽度
                 itemStyle: { //面积图颜色设置
@@ -125,7 +136,7 @@ const initEcharts = () => {
                         ],
                         globalCoord: false // 缺省为 false
                     },
-                    barBorderRadius: [30, 30, 0, 0] //圓角
+                    barBorderRadius: [30, 30,30,30] //圓角
                 },
             }
         ]

src/components/echart/echart-line.vue

@@ -1,6 +1,6 @@
 <!-- 柱图 -->
 <template>
-    <div style="height:150px;" :id="props.id" class="myChart"></div>
+    <div style="height:100%;min-height: 300px;" :id="props.id" class="myChart"></div>
 </template>
 
 <script setup lang="ts">

src/components/popover.vue

@@ -1,51 +1,32 @@
 <!--  -->
 <template>
-    <div class="">
-        <el-popover :width="300"
-            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
-            <template #reference>
-                <img src="@/assets/img/userInfo.gif" style="width: 40px;height: 40px;border-radius: 50%;cursor: pointer">
-            </template>
-            <template #default>
-                <div class="demo-rich-conent" style="display: flex; gap: 16px; flex-direction: column">
-                    <img src="@/assets/img/userInfo.gif" style="width: 40px;height: 40px;border-radius: 50%;">
-                    <div>
-                        <p class="demo-rich-content__name" style="margin: 0; font-weight: 500">
-                            你好，管理员
-                        </p>
-                        <p class="demo-rich-content__mention" style="color: var(--el-color-info)">
-                            @element-plus
-                        </p>
-                    </div>
-                    <div class="demo-ico__desc">
-                        <div class="demo-ico__desc_item" @click="exitFun(1)">
-                            <el-icon size="20" color="#fff">
-                                <FullScreen />
-                            </el-icon>
-                            <p class="demo-ico__desc_item_p">全屏</p>
-                        </div>
-                        <div class="demo-ico__desc_item" @click="exitFun(2)">
-                            <el-icon size="20" color="#fff">
-                                <Setting />
-                            </el-icon>
-                            <p class="demo-ico__desc_item_p">设置</p>
-                        </div>
-                        <div class="demo-ico__desc_item" @click="exitFun(3)">
-                            <el-icon size="20" color="#fff">
-                                <Bell />
-                            </el-icon>
-                            <p class="demo-ico__desc_item_p">系统消息</p>
-                        </div>
-                        <div class="demo-ico__desc_item" @click="exitFun(4)">
-                            <el-icon size="20" color="#fff">
-                                <SwitchButton />
-                            </el-icon>
-                            <p class="demo-ico__desc_item_p">退出账号</p>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </el-popover>
+    <div class="demo-ico__desc">
+        <div class="demo-ico__desc_item" @click="exitFun(3)">
+            <img src="@/assets/img/userInfo.gif" style="width: 30px;height: 30px;border-radius: 50%;cursor: pointer">
+                    <p class="demo-ico__desc_item_p">管理员，你好</p>
+        </div>
+
+        <el-divider direction="vertical" />
+        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(3)">
+            <el-icon size="16">
+                <Bell />
+            </el-icon>
+            <p class="demo-ico__desc_item_p">消息</p>
+        </div>
+        <el-divider direction="vertical" />
+        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(3)">
+            <el-icon size="16">
+                <FullScreen />
+            </el-icon>
+            <p class="demo-ico__desc_item_p">全屏</p>
+        </div>
+        <el-divider direction="vertical" />
+        <div class="demo-ico__desc_item demo-ico__desc_hover" @click="exitFun(4)">
+            <el-icon size="16">
+                <SwitchButton />
+            </el-icon>
+            <p class="demo-ico__desc_item_p">退出</p>
+        </div>
     </div>
 </template>
 <script lang="ts" setup>
@@ -53,60 +34,25 @@ import { exitFun } from "@/plugins/setFun";
 </script>
 <style lang="scss">
 .demo-ico__desc {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 10px;
     user-select: none;
+    display: flex;
+    align-items: center;
 
     &_item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
         padding: 10px 0;
         border-radius: 2px;
         cursor: pointer;
+        display: flex;
+        align-items: center;
 
         &_p {
-            color: #fff;
-            margin-top: 5px;
             font-size: 12px;
+            padding-left: 5px;
         }
     }
 
-    &_item:nth-child(1) {
-        background: #ee954d;
-    }
-
-    &_item:nth-child(1):hover {
-        background: rgba(#ee954d, 0.6) !important;
-    }
-
-    &_item:nth-child(2) {
-        background: #32b67a;
-    }
-
-    &_item:nth-child(2):hover {
-        background: rgba(#32b67a, 0.6) !important;
+    &_hover:hover {
+        color: var(--el-color-primary);;
     }
 
-    &_item:nth-child(3) {
-        background: #349ac1;
-    }
-
-    &_item:nth-child(3):hover {
-        background: rgba(#349ac1, 0.6) !important;
-    }
-
-    &_item:nth-child(4) {
-        background: #ff8b8b;
-    }
-
-    &_item:nth-child(4):hover {
-        background: rgba(#ff8b8b, 0.6) !important;
-    }
-
-    &_item:nth-child(5) {
-        background: #e54b4b;
-    }
 }</style>

src/components/routerMenu.vue

@@ -1,35 +1,36 @@
 <template>
   <div>
-    <el-menu background-color="none" :default-active="router.options.history.location" mode="horizontal" :ellipsis="false" v-if="screenWidth>=1000" router>
-      <el-menu-item :index="item.path" v-for="item, index in routerData" :key="index">
-        <span>{{ item.meta.title }}</span>
+    <el-menu background-color="none" :default-active="data.isRouter" :ellipsis="false" router>
+      <el-menu-item :index="item.path" v-for="item, index in routerData" :key="index" @click="setTag(item)">
+        <span class="iconfont" :class="item.icon" style="font-size: 17px;font-weight: 600;"></span>
+        <span style="padding:0 15px;">{{ item.meta.title }}</span>
       </el-menu-item>
     </el-menu>
-    <el-popover v-else>
-      <template #reference>
-        <el-icon size="30" style="cursor: pointer;">
-          <More />
-        </el-icon>
-      </template>
-      <template #default>
-        <div class="demo-rich-conent" style="display: flex; gap: 16px; flex-direction: column">
-          <el-menu :default-active="router.options.history.location" :ellipsis="false" router>
-            <el-menu-item :index="item.path" v-for="item, index in routerData" :key="index">
-              <span>{{ item.meta.title }}</span>
-            </el-menu-item>
-          </el-menu>
-        </div>
-      </template>
-    </el-popover>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { watch,reactive } from "vue";
 import { useRouter } from 'vue-router';
+import { useStore } from 'vuex'
+
 import { ref } from 'vue'
 
 
+const store = useStore()
 let router = useRouter()
+
+//当前路由
+const data = reactive({
+  isRouter:router.options.history.location
+})
+let isRouter = 
+
+watch(() =>router , (toPath:any) => {
+  data.isRouter = toPath.options.history.location
+}, {immediate:true,deep: true })
+
+
 const screenWidth = ref()
 const routerData: any = ref([])
 routerData.value = router.options.routes[0].children
@@ -37,15 +38,31 @@ screenWidth.value = document.body.clientWidth
 window.onresize = () => (() => {
   screenWidth.value = document.body.clientWidth
 })();
+
+
+const setTag = (data: any) => {
+  store.commit('addTab', {
+    title: data.meta.title,
+    path: data.path,
+    name: data.name
+  })
+
+}
+
 </script>
 
 <style scoped lang="scss">
 /*去掉左侧菜单自带的右侧边框*/
 .el-menu--horizontal.el-menu {
-    border: none !important;
+  border: none !important;
+  user-select: none;
+}
+.el-menu-item.is-active {
+    color: var(--el-menu-active-color);
+    background: #f6f8fa;
 }
 .el-menu {
   border: none !important;
-  --el-menu-hover-bg-color: none !important;//解决去掉导航背景色后鼠标放上去颜色为黑色
+  --el-menu-hover-bg-color: none !important; //解决去掉导航背景色后鼠标放上去颜色为黑色
 }
 </style>

src/components/tag.vue

@@ -0,0 +1,65 @@
+<template>
+    <el-tabs v-model="data.editableTabsValue" type="card" class="demo-tabs" @tab-change="changeRouter(data.editableTabsValue)" @tab-remove="removeTab">
+        <el-tab-pane v-for="item in editableTabs" :key="item.path" :closable="item.path != '/home'" :icon="item.icon" :label="item.title" :name="item.path">
+            <slot name="reouters"></slot>
+        </el-tab-pane>
+    </el-tabs>  
+</template>
+
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+import { reactive, watch } from 'vue'
+import { useStore } from 'vuex'
+
+const store = useStore()
+let router = useRouter()
+
+//当前路由
+const isRouter = router.options.history.location
+const data = reactive({
+    editableTabsValue:'/home'
+})
+const editableTabs = store.state.routerTag
+
+watch(() =>router , (toPath:any) => {
+    data.editableTabsValue = toPath.options.history.location
+}, {immediate:true,deep: true })
+
+const removeTab = (data: any) => {
+    store.commit('delTab', data)
+}
+const changeRouter = (data: any) => {
+    router.push(data)
+}
+</script>
+<style>
+.demo-tabs>.el-tabs__content {
+    padding: 32px;
+    color: #6b778c;
+    font-size: 32px;
+    font-weight: 600;
+}
+.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+    border-bottom-color: #fefefe !important;
+}
+.demo-tabs>.el-tabs__content {
+    padding: 0;
+    height: -1px;
+}
+/* .el-tabs--border-card {
+    background: none !important;
+    border-top: none !important;
+    border-bottom: none !important;
+
+}
+.is-active {
+    background-color: #f6f8fa !important;
+}
+.el-tabs--border-card>.el-tabs__header {
+    background-color: rgb(239,241,245)!important;
+    border-bottom: none !important;
+    margin: 0;
+} */
+</style>
+  

src/components/threes.vue

@@ -0,0 +1,194 @@
+<template>
+  <div id="iviewBg"></div>
+</template>
+
+<script setup>
+import * as THREE from "three";
+// import Stats from "./stats.module";
+import { onMounted } from "vue";
+const props = defineProps({
+  //控制x轴波浪的长度
+  amountX: {
+    type: Number,
+    default: 50,
+  },
+  //控制y轴波浪的长度
+  amountY: {
+    type: Number,
+    default: 50,
+  },
+  //控制点颜色
+  color: {
+    type: String,
+    default: "#097bdb",
+  },
+  //控制波浪的位置
+  top: {
+    type: Number,
+    default: 350,
+  },
+})
+const SEPARATION = 100;
+
+// let stats;
+let container, camera, scene, renderer;
+
+let particles,
+  count = 0;
+
+let mouseX = 0;
+
+let windowHalfX = window.innerWidth / 2;
+const init = () => {
+  container = document.createElement("div");
+  document.getElementById("iviewBg").appendChild(container);
+
+  //创建透视相机
+  camera = new THREE.PerspectiveCamera(
+    75, //摄像机视锥体垂直视野角度
+    window.innerWidth / window.innerHeight, //摄像机视锥体长宽比
+    1, //摄像机视锥体近端面
+    10000 //摄像机视锥体远端面
+  );
+
+  //设置相机z轴视野
+  camera.position.z = 1000;
+
+  //创建场景
+  scene = new THREE.Scene();
+
+  const numParticles = props.amountX * props.amountY;
+
+  const positions = new Float32Array(numParticles * 3);
+  const scales = new Float32Array(numParticles);
+
+  let i = 0,
+    j = 0;
+
+  // 初始化粒子位置和大小
+  for (let ix = 0; ix < props.amountX; ix++) {
+    for (let iy = 0; iy < props.amountY; iy++) {
+      positions[i] = ix * SEPARATION - (props.amountX * SEPARATION) / 2; // x
+      positions[i + 1] = 0; // y
+      positions[i + 2] = iy * SEPARATION - (props.amountY * SEPARATION) / 2; // z
+      scales[j] = 1;
+      i += 3;
+      j++;
+    }
+  }
+
+  //是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute(
+    "position",
+    new THREE.BufferAttribute(positions, 3)
+  );
+  geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));
+
+  //着色器材质(ShaderMaterial),设置球的大小，颜色，等
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      //设置球的颜色
+      color: { value: new THREE.Color(props.color) },
+    },
+    //控制球的大小
+    vertexShader:
+      "attribute float scale; void main() {vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_PointSize = scale * ( 300.0 / - mvPosition.z );gl_Position = projectionMatrix * mvPosition;}",
+    fragmentShader:
+      "uniform vec3 color;void main() {if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;gl_FragColor = vec4( color, 1.0 );}",
+  });
+
+  //一个用于显示点的类。
+  particles = new THREE.Points(geometry, material);
+  //往场景中添加点
+  scene.add(particles);
+
+  //alpha - canvas是否包含alpha (透明度)。默认为 false。
+  //渲染器的背景色默认为黑色，设置渲染器的背景色为透明
+  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setClearAlpha(0);
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  container.appendChild(renderer.domElement);
+
+  //显示右上角fps框
+  // stats = new Stats();
+  //   container.appendChild(stats.dom);
+
+  container.style.touchAction = "none";
+  //监听鼠标移动事件
+  container.addEventListener("pointermove", onPointerMove);
+
+  //调整波浪的位置
+  container.style.position = "relative";
+  container.style.top = `${props.top}px`;
+
+  window.addEventListener("resize", onWindowResize);
+}
+const render = () => {
+  camera.position.x += (mouseX - camera.position.x) * 0.05;
+  camera.position.y = 400;
+  camera.lookAt(scene.position);
+
+  const positions = particles.geometry.attributes.position.array;
+  const scales = particles.geometry.attributes.scale.array;
+
+  // 设置粒子位置和大小
+  let i = 0,
+    j = 0;
+  for (let ix = 0; ix < props.amountX; ix++) {
+    for (let iy = 0; iy < props.amountY; iy++) {
+      positions[i + 1] =
+        Math.sin((ix + count) * 0.3) * 50 +
+        Math.sin((iy + count) * 0.5) * 50;
+
+      scales[j] =
+        (Math.sin((ix + count) * 0.3) + 1) * 10 +
+        (Math.sin((iy + count) * 0.5) + 1) * 10;
+
+      i += 3;
+      j++;
+    }
+  }
+
+  particles.geometry.attributes.position.needsUpdate = true;
+  particles.geometry.attributes.scale.needsUpdate = true;
+
+  renderer.render(scene, camera);
+
+  count += 0.1;
+}
+onMounted(() => {
+  init();
+  animate();
+});
+function onWindowResize() {
+      windowHalfX = window.innerWidth / 2;
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+//监听鼠标移动事件
+const onPointerMove = (event) => {
+  if (event.isPrimary === false) return;
+  mouseX = event.clientX - windowHalfX;
+}
+
+const animate = () => {
+  requestAnimationFrame(animate);
+  render();
+  //fps 实时更新
+  // stats.update();
+}
+</script>
+
+<style lang="scss" scoped>
+#iviewBg {
+  width: 100%;
+  height: 100vh;
+  // background: url("../assets/img/202112161501019.png") no-repeat;
+  background: radial-gradient(ellipse at center, #164688 0%, #13194b 100%);
+  overflow: hidden;
+}
+</style>

src/main.ts

@@ -5,6 +5,7 @@ import router from './router'
 import store from './store'
 const app = createApp(App)
 
+
 import 'element-plus/theme-chalk/index.css'  // 引入组件样式
 import ElementPlus from 'element-plus'
 app.use(ElementPlus)
@@ -14,7 +15,6 @@ app.use(ElementPlus)
 //     app.component(key.name, key)
 // }
 
-
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'// 全部引入 Icon 图标 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {// 全部引入 Icon 图标 ，并注册iocn图标
     app.component(key, component)

src/plugins/login.ts

@@ -0,0 +1,23 @@
+/**
+ * 
+ * @param rlue 是否选择记住密码
+ * @param data 账号密码
+ */
+export function loginsetItem(rlue:any,data:any){
+    console.log('111',rlue,data)
+    if (rlue.length==0) {
+        sessionStorage.setItem('infos',JSON.stringify({bzd_username:'',bzd_password:'',type:[]}))
+    }else{
+        sessionStorage.setItem('infos',JSON.stringify({bzd_username:data.bzd_username,bzd_password:data.bzd_password,type:rlue}))
+    }
+}
+/**
+ * 
+ * @param data 
+ * @returns 返回结果 true账号密码存在
+ */
+export function JudgmentStatus(data:any){
+    return Object.keys(data).every((item,index,arr)=>{ 
+        return data[item]!=''
+    })
+ }

src/plugins/setFun.ts

@@ -1,5 +1,5 @@
 import router from '@/router';
-
+import { ElMessageBox,ElMessage } from "element-plus";
 /**
  * 
  * @param key 操作顶部头像按钮
@@ -14,8 +14,22 @@ export function exitFun (key:any) {
         case 3:
             break;
         default:
-            sessionStorage.setItem('User_tokey','')
-            router.replace('/')
+            ElMessageBox.confirm(
+                '登录账号操作，是否退出当前登录账号?',
+                '警告',
+                {
+                  confirmButtonText: '退出登录',
+                  cancelButtonText: '在想一想',
+                  type: 'warning',
+                  center: true,
+                }
+              ).then(() => {
+                sessionStorage.setItem('User_tokey','')
+                router.replace('/')
+                })
+                .catch(() => {
+                    ElMessage.info('已取消退出')
+                })
             break;
     } 
 }

src/router/index.ts

@@ -1,9 +1,9 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import { dynamicRoutes } from "./module/dynamicRoutes";
 import { globalRoutes } from "./module/globalRoutes";
-
 import { useStore } from 'vuex'
 
+
 const routes: Array<RouteRecordRaw> = [
 	...dynamicRoutes,
 	...globalRoutes
@@ -24,7 +24,15 @@ router.afterEach((to, from) => {
 
 router.beforeEach((to, from, next) => {
 	const token = sessionStorage.getItem('User_tokey')
-	console.log('拦截',token)
+	// console.log('拦截',to)
+	const store = useStore()
+	if(to.path!='/'){
+		store.commit('addTab', {
+			title: to.meta.title,
+			path: to.path,
+			name: to.name
+		})
+	}
 	if (token) {//直接放行
 		next()
 	} else {

src/router/module/dynamicRoutes.ts

@@ -7,7 +7,7 @@ export const dynamicRoutes = [{
     children: [{
         path: '/home',
         name: 'home', 
-        icon: "icon-zhuye1",
+        icon: "icon-zhuye",
         component: () => import('@/views/home/index.vue'),
         meta: {
             roles:false,
@@ -16,7 +16,7 @@ export const dynamicRoutes = [{
     },{
         path: '/user',
         name: 'user', 
-        icon: "icon-zhuye1",
+        icon: "icon-icon-",
         component: () => import('@/views/user/index.vue'),
         meta: {
             roles:false,
@@ -25,7 +25,7 @@ export const dynamicRoutes = [{
     },{
         path: '/storageInquire',
         name: 'storageInquire', 
-        icon: "icon-zhuye1",
+        icon: "icon-fenxixiangmuku",
         component: () => import('@/views/storageInquire/index.vue'),
         meta: {
             roles:false,
@@ -34,7 +34,7 @@ export const dynamicRoutes = [{
     },{
         path: '/storagePut',
         name: 'storagePut', 
-        icon: "icon-zhuye1",
+        icon: "icon-_kucun",
         component: () => import('@/views/storagePut/index.vue'),
         meta: {
             roles:false,
@@ -43,7 +43,7 @@ export const dynamicRoutes = [{
     },{
         path: '/storageFrom',
         name: 'storageFrom', 
-        icon: "icon-zhuye1",
+        icon: "icon-ruku",
         component: () => import('@/views/storageFrom/index.vue'),
         meta: {
             roles:false,
@@ -52,7 +52,7 @@ export const dynamicRoutes = [{
     },{
         path: '/sellManage',
         name: 'sellManage', 
-        icon: "icon-zhuye1",
+        icon: "icon-chukuliucheng",
         component: () => import('@/views/sellManage/index.vue'),
         meta: {
             roles:false,
@@ -61,7 +61,7 @@ export const dynamicRoutes = [{
     },{
         path: '/storageOrderGoods',
         name: 'storageOrderGoods', 
-        icon: "icon-zhuye1",
+        icon: "icon-dingdan",
         component: () => import('@/views/storageOrderGoods/index.vue'),
         meta: {
             roles:false,
@@ -70,7 +70,7 @@ export const dynamicRoutes = [{
     },{
         path: '/personalInfo',
         name: 'personalInfo', 
-        icon: "icon-zhuye1",
+        icon: "icon-biaoqian1",
         component: () => import('@/views/personalInfo/index.vue'),
         meta: {
             roles:false,

src/store/index.ts

@@ -1,13 +1,48 @@
 import { createStore } from 'vuex'
-
+import createPersistedState from 'vuex-persistedstate'
+import router from '@/router/index'
 export default createStore({
+  plugins: [
+    createPersistedState({
+      key: 'stort',
+      paths: ['routerTag'] //, 'Tags'
+    })
+  ],
   state: {
+    routerTag: [{
+      title: '工作首页',
+      path: '/home',
+      name: 'home'
+    }],
   },
   getters: {
+    routerTag:state=>state.routerTag,
   },
   mutations: {
+    addTab: (state, tab:any) => {
+			var tabrlue = state.routerTag.some(item => item.path === tab.path)
+      console.log('tabrlue',tabrlue)
+			if(!tabrlue){
+				state.routerTag.push(tab)
+			}
+		},
+    delTab: (state, tab) => {
+      console.log('删除',tab)
+			state.routerTag.forEach(function(item,index) {
+				if(item.path === tab){
+					state.routerTag.splice(index,1)
+          router.push('/home')
+				}
+			})
+		}
   },
   actions: {
+    addTab({commit},data){
+			commit('addTab',data)
+		},
+    delTab({commit},data){
+			commit('delTab',data)
+		},
   },
   modules: {
   }

src/views/home/index.vue

@@ -1,27 +1,25 @@
 <!--  -->
 <template>
   <div class="home">
-    <div class="home-main">
-      <div class="home-main-left">
-        <div class="home-main-left-item">
-          <titles name="电池租用量/库存量统计"></titles>
-          <!-- <echartline id="bar1"></echartline> -->
+    <cards>
+      <template #card-tit>
+        <div style="display: flex;align-items: center;">
+          <p>单位（栋）</p>
+        <div style="display: flex;align-items: center;margin:0 30px ;">
+          <div style="width: 15px;height: 15px;border-radius: 50%;background: #2251f7;"></div>
+          <p style="margin-left: 10px;">楼宇数量</p>
         </div>
-      </div>
-      <div class="home-main-conter">
-        <!-- <echartbarlR id="bar2"></echartbarlR> -->
-      </div>
-      <div class="home-main-right">
-        <div style="flex: .4;">
-          <titles name="电池租用量/库存量统计"></titles>
-          <echartbar id="bar3"></echartbar>
+        <div style="display: flex;align-items: center;">
+          <div style="width: 15px;height: 15px;border-radius: 50%;background: #fd8c38;"></div>
+          <p style="margin-left: 10px;">写字楼数量</p>
         </div>
-        <div style="flex: .4;">
-          <titles name="电池租用量/库存量统计"></titles>
-          <echartbar id="bar4"></echartbar>
         </div>
-      </div>
-    </div>
+      </template>
+      <template #card-subhead>行政区划选择</template>
+      <template #card-content>
+        <echartbar id="bar0"></echartbar>
+      </template>
+    </cards>
   </div>
 </template>
 
@@ -29,11 +27,9 @@
 import { reactive, provide, ref } from "vue";
 import echartbar from '@/components/echart/echart-bar.vue'
 import echartbarlR from '@/components/echart/echart-bar-LR.vue'
-
 import echartline from '@/components/echart/echart-line.vue'
 
 import cards from '@/components/card.vue'
-import tabs from '@/components/tabs.vue'
 import tables from '@/components/table.vue'
 import titles from '@/components/titles.vue'
 
@@ -57,43 +53,8 @@ const data = reactive({
 </script>
 <style lang="scss">
 .home {
-  height: 100%;
   overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  // background: url(@/assets/img/home-bg1.png) no-repeat center center;
-  //   background-size: cover;
-  &-main {
-    flex: 1;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
-    grid-gap: 10px;
-
-    &-left {
-      // border: 5px solid red;
-      // box-sizing: border-box;
-      // padding: 40px;
-    }
-
-    &-conter {
-      // border: 5px solid #000;
-      // box-sizing: border-box;
-      // padding: 40px;
-
-    }
-
-    &-right {
-      // border: 5px solid red;
-      // box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      grid-gap: 80px 0;
-      // padding: 40px;
-
-    }
-  }
-
+}
 
 
-}
 </style>

src/views/layout/index.vue

@@ -1,18 +1,33 @@
 <!--  -->
 <template>
     <div class="layout">
-        <el-affix :offset="0">
-            <menus class="menus"></menus>
-        </el-affix>
+        <menus class="menus"></menus>
         <div class="layout-route">
-            <router-view></router-view>
-            <backTop></backTop>
+            <div class="layout-route-Menu">
+                <routerMenu></routerMenu>
+            </div>
+            <div class="layout-route-views">
+                <!-- <tag>
+                    <template #reouters>
+                        <router-view style="flex: 1;overflow-y: auto;"></router-view>
+                    </template>
+                </tag> -->
+                <breadcrumb></breadcrumb>
+                <router-view style="flex: 1;overflow-y: auto;" data-aos="fade-left" data-aos-easing="linear" data-aos-duration="0"></router-view>
+            </div>
+
         </div>
     </div>
+    <backTop></backTop>
 </template>
 <script setup lang="ts">
 import menus from "./menu.vue";
 import backTop from "@/components/backTop.vue";
+import routerMenu from "@/components/routerMenu.vue";
+import tag from "@/components/tag.vue";
+import breadcrumb from "@/components/breadcrumb.vue";
+
+
 
 </script>
 <style lang="scss">
@@ -21,13 +36,25 @@ import backTop from "@/components/backTop.vue";
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    // background: rgb(241, 249, 255);
-    // background: rgb(255, 255, 255);
+    background: #f6f8fa;
+    .menus{
+        z-index: 999;
+    }
 
     &-route {
         flex: 1;
         overflow-y: auto;
-        margin: var(--y-margin);
+        display: flex;
+        &-Menu{
+            flex-shrink: 0;
+            background: #fefefe;
+            border-radius: 0 0 100px 0;
+        }
+        &-views{
+            flex: 1;
+            padding:var(--y-padding);
+            overflow-x: hidden;
+        }
     }
 }
 </style>

src/views/layout/menu.vue

@@ -2,7 +2,6 @@
     <div class="menus">
         <div><logo></logo></div>
         <div class="menus-main">
-            <routerMenu></routerMenu>
         </div>
         <div>
             <popover />
@@ -12,7 +11,7 @@
   
 <script lang="ts" setup>
 import popover from "@/components/popover.vue";
-import routerMenu from "@/components/routerMenu.vue";
+
 
 import logo from "@/components/logo.vue";
 
@@ -22,7 +21,7 @@ import logo from "@/components/logo.vue";
 .menus {
     height: 60px;
     padding: 0 20px;
-    background:rgba(#fff,.5);
+    background:#fff;
     user-select: none;
     display: flex;
     justify-content: space-between;

src/views/login/index.vue

@@ -1,55 +1,70 @@
 <template>
     <div class="login">
         <div class="login-main">
-            <!-- <div class="login-main-left"></div> -->
-            <div class="login-main-right">
-                <div style="margin-bottom: 40px;">
-                    <el-text tag="b" style="font-size: 20px;">宝智达药品出入库管理平台</el-text>
-                    <el-text tag="p">Warehouse management platform</el-text>
-                </div>
-                <el-form :model="data.form">
-                    <el-form-item>
-                        <el-input v-model="data.form.bzd_username" prefix-icon="Key" />
-                    </el-form-item>
-                    <el-form-item>
-                        <el-input v-model="data.form.bzd_password" prefix-icon="Unlock" type="password" show-password />
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox-group v-model="data.type">
-                            <el-checkbox label="记住密码" name="type" />
-                        </el-checkbox-group>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button type="primary" style="width: 100%;" @click="submitForm()">
-                            登录
-                        </el-button>
-                    </el-form-item>
-                </el-form>
+            <div style="margin-bottom: 40px;">
+                <el-text tag="b" style="font-size: 20px;color: #fff;padding-bottom: 10px;">宝智达药品出入库管理平台</el-text>
+                <el-text tag="p" style="color: #fff;">Baozhida drug import and export management platform</el-text>
             </div>
+            <el-form :model="data.form">
+                <el-form-item>
+                    <el-input v-model="data.form.bzd_username" prefix-icon="Key" />
+                </el-form-item>
+                <el-form-item>
+                    <el-input v-model="data.form.bzd_password" prefix-icon="Unlock" type="password" show-password />
+                </el-form-item>
+                <el-form-item>
+                    <el-checkbox-group v-model="data.type">
+                        <el-checkbox label="记住密码" name="type" />
+                    </el-checkbox-group>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" style="width: 100%;" @click="submitForm()">
+                        登录
+                    </el-button>
+                </el-form-item>
+            </el-form>
         </div>
+        <threes style="position: absolute;top: 0;left: 0;z-index: 1;"></threes>
     </div>
 </template>
 
 <script setup lang="ts">
 import router from "@/router";
-import { reactive } from "vue";
-import {login} from "@/api/index";
-import md5 from 'js-md5'
+import { reactive,onMounted } from "vue";
+import { login } from "@/api/index";
+import md5 from "js-md5";
+import threes from "@/components/threes.vue";
+import {loginsetItem,JudgmentStatus} from "@/plugins/login";
+import { el } from "element-plus/es/locale";
+import { ElMessage, ElNotification } from 'element-plus'
 const data = reactive({
-    form:{
+    form: {
         bzd_username: '',
         bzd_password: '',
     },
     type: []
 })
+onMounted(()=>{
+    const info:any = sessionStorage.getItem('infos')
+    if(data.type){
+        data.form.bzd_username = JSON.parse(info).bzd_username
+        data.form.bzd_password = JSON.parse(info).bzd_password
+        data.type = JSON.parse(info).type
+    }
+})
 const submitForm = async () => {
-    const froms = {...data.form}
+    const Jud = await JudgmentStatus(data.form)
+    if (!Jud) {
+        ElMessage.error('账号或者密码不能为空');
+        return
+    }
+    const froms = { ...data.form }
     froms.bzd_password = md5(froms.bzd_password)
-    const result:any = await login(froms)
-
+    const result: any = await login(froms)
     console.log(result)
-    if(result.Code==200){
+    if (result.Code == 200) {
         sessionStorage.setItem('User_tokey', result.Data)
+        loginsetItem(data.type,data.form)
         router.push('/home')
     }
 }