feat: 添加业务框架, 背景, 盒子组件等

README.md

@@ -93,6 +93,10 @@ yarn build
   - https://github.com/TangSY/echarts-map-demo
   - https://datav.aliyun.com/portal/school/atlas/area_selector
   - https://geojson.cn/
+- 图标
+  - https://icon-sets.iconify.design/?query=weather
+- 天气
+  - https://lbs.amap.com/api/webservice/guide/api/weatherinfo
 
 - [（上）Vue+Echarts构建可视化大数据平台实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-prev-section)
 - [（下）Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-next-section)

package.json

@@ -13,29 +13,37 @@
   "dependencies": {
     "axios": "^1.7.7",
     "core-js": "^3.6.4",
+    "dayjs": "^1.11.13",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vue-seamless-scroll": "^1.1.21",
     "vuex": "^3.2.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.3.0",
+    "@iconify-json/mdi": "^1.2.1",
+    "@unocss/preset-icons": "^0.57.6",
+    "@unocss/preset-uno": "^0.57.6",
+    "@unocss/reset": "^0.57.6",
+    "@unocss/transformer-directives": "^0.57.6",
+    "@unocss/webpack": "^0.57.6",
+    "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "^4.3.0",
-    "@vue/cli-service": "^4.3.0",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^6.2.2",
     "less": "^4.2.0",
     "less-loader": "6.x",
     "mockm": "^1.1.27-alpha.9",
     "node-sass": "^4.13.1",
+    "prettier": "^2.2.1",
     "sass-loader": "^8.0.2",
+    "unocss": "^0.57.6",
     "vue-count-to": "^1.0.13",
     "vue-particles": "^1.0.9",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "prettier": "^2.2.1",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.7.14"
   },
   "eslintConfig": {
     "root": true,

src/App.vue

@@ -17,8 +17,9 @@ export default {
   -ms-user-select: none;
   -webkit-font-smoothing: antialiased;
   -webkit-user-select: none;
-  height: 100%;
+  height: 100vh;
+  width: 100vw;
   user-select: none;
-  width: 100%;
+  overflow: hidden;
 }
 </style>

src/assets/icon2/font/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/icon2/font/demo_index.html

@@ -0,0 +1,349 @@
+<!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=4754327" 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">&#xe602;</span>
+                <div class="name">雾</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">雨</div>
+                <div class="code-name">&amp;#xe603;</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">&#xe601;</span>
+                <div class="name">雪</div>
+                <div class="code-name">&amp;#xe601;</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">&#xe6f4;</span>
+                <div class="name">雷电</div>
+                <div class="code-name">&amp;#xe6f4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f5;</span>
+                <div class="name">晴</div>
+                <div class="code-name">&amp;#xe6f5;</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=1732172383774') format('woff2'),
+       url('iconfont.woff?t=1732172383774') format('woff'),
+       url('iconfont.ttf?t=1732172383774') 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-wu"></span>
+            <div class="name">
+              雾
+            </div>
+            <div class="code-name">.icon-wu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yu"></span>
+            <div class="name">
+              雨
+            </div>
+            <div class="code-name">.icon-yu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-duoyun"></span>
+            <div class="name">
+              多云
+            </div>
+            <div class="code-name">.icon-duoyun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xue"></span>
+            <div class="name">
+              雪
+            </div>
+            <div class="code-name">.icon-xue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-feng"></span>
+            <div class="name">
+              风
+            </div>
+            <div class="code-name">.icon-feng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-leidian"></span>
+            <div class="name">
+              雷电
+            </div>
+            <div class="code-name">.icon-leidian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qing"></span>
+            <div class="name">
+              晴
+            </div>
+            <div class="code-name">.icon-qing
+            </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-wu"></use>
+                </svg>
+                <div class="name">雾</div>
+                <div class="code-name">#icon-wu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yu"></use>
+                </svg>
+                <div class="name">雨</div>
+                <div class="code-name">#icon-yu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-duoyun"></use>
+                </svg>
+                <div class="name">多云</div>
+                <div class="code-name">#icon-duoyun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xue"></use>
+                </svg>
+                <div class="name">雪</div>
+                <div class="code-name">#icon-xue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-feng"></use>
+                </svg>
+                <div class="name">风</div>
+                <div class="code-name">#icon-feng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-leidian"></use>
+                </svg>
+                <div class="name">雷电</div>
+                <div class="code-name">#icon-leidian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qing"></use>
+                </svg>
+                <div class="name">晴</div>
+                <div class="code-name">#icon-qing</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/icon2/font/iconfont.css

@@ -0,0 +1,43 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4754327 */
+  src: url('iconfont.woff2?t=1732172383774') format('woff2'),
+       url('iconfont.woff?t=1732172383774') format('woff'),
+       url('iconfont.ttf?t=1732172383774') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-wu:before {
+  content: "\e602";
+}
+
+.icon-yu:before {
+  content: "\e603";
+}
+
+.icon-duoyun:before {
+  content: "\e600";
+}
+
+.icon-xue:before {
+  content: "\e601";
+}
+
+.icon-feng:before {
+  content: "\e640";
+}
+
+.icon-leidian:before {
+  content: "\e6f4";
+}
+
+.icon-qing:before {
+  content: "\e6f5";
+}
+

src/assets/icon2/font/iconfont.json

@@ -0,0 +1,58 @@
+{
+  "id": "4754327",
+  "name": "天气",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "145154",
+      "name": "雾",
+      "font_class": "wu",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "145157",
+      "name": "雨",
+      "font_class": "yu",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "145151",
+      "name": "多云",
+      "font_class": "duoyun",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "145155",
+      "name": "雪",
+      "font_class": "xue",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "538488",
+      "name": "风",
+      "font_class": "feng",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "685503",
+      "name": "雷电",
+      "font_class": "leidian",
+      "unicode": "e6f4",
+      "unicode_decimal": 59124
+    },
+    {
+      "icon_id": "685504",
+      "name": "晴",
+      "font_class": "qing",
+      "unicode": "e6f5",
+      "unicode_decimal": 59125
+    }
+  ]
+}

src/components/bgBox/index.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="container-box" ref="editor">
+    <div class="box">
+      <div class="top">
+        <div class="logo">
+          <div>
+            <img
+              src="@/assets/img2/综合总览/编组.png"
+              alt=""
+              class="mt-20px ml-36px"
+            />
+          </div>
+          <div>
+            <img
+              src="@/assets/img2/综合总览/编组 23备份.png"
+              alt=""
+              class="ml-36px"
+            />
+          </div>
+        </div>
+        <div class="tabsBox mt-36px ml-50px">
+          <div class="tabs">
+            <div
+              :class="[`tab-item`, { cur: index === tabs.index }]"
+              :key="item"
+              @click="tabs.index = index"
+              v-for="(item, index) in tabs.list"
+            >
+              {{ item }}
+            </div>
+          </div>
+        </div>
+        <div class="tipsBox">
+          <div class="dateBox center">
+            <div class="time font-size-22px">{{ dateBox.time }}</div>
+            <div class="date font-size-16px">{{ dateBox.date }}</div>
+          </div>
+          <div class="line"></div>
+          <div class="weather">
+            <i :class="[`iconfont`, weather.天气图标]"></i>
+          </div>
+          <div class="temperature">
+            <img
+              class="pl-20px"
+              src="@/assets/img2/综合总览/编组 6.png"
+              alt=""
+            />
+            <span class="font-size-30px pl-20px">{{ weather.温度 }}</span>
+            <img src="@/assets/img2/综合总览/编组 8.png" alt="" />
+          </div>
+          <div class="line"></div>
+          <div class="headPortrait">
+            <img src="https://httpbin.org/image/png" class="w-44px" alt="" />
+          </div>
+        </div>
+      </div>
+      <slot>内容区</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { screenSize } from '@/assets/js/utils'
+
+const apiList = [
+  {
+    key: `currentWeather`,
+    fn(data, arg) {
+      const item =
+        [
+          {
+            name: `云`,
+            icon: `icon-duoyun`,
+          },
+
+          {
+            name: `雪`,
+            icon: `icon-xue`,
+          },
+
+          {
+            name: `晴`,
+            icon: `icon-qing`,
+          },
+
+          {
+            name: `雨`,
+            icon: `icon-yu`,
+          },
+
+          {
+            name: `雪`,
+            icon: `icon-xue`,
+          },
+
+          {
+            name: `雾`,
+            icon: `icon-wu`,
+          },
+
+          {
+            name: `雷`,
+            icon: `icon-leidian`,
+          },
+
+          {
+            name: `风`,
+            icon: `icon-feng`,
+          },
+        ].find((item) => data.天气.includes(item.name)) || {}
+
+      this.weather = data
+      this.weather.天气图标 = item.icon || `icon-duoyun`
+    },
+  },
+  {
+    key: `currentTime`,
+    fn(data, arg) {
+      this.dateBox = data
+    },
+  },
+]
+
+export default {
+  components: {},
+  data() {
+    return {
+      tabs: {
+        index: 0,
+        list: [`综合总览`, `移栽分析`],
+      },
+      dateBox: {
+        time: ``,
+        date: ``,
+      },
+      weather: {
+        温度: ``,
+        天气: ``,
+        天气图标: ``,
+      },
+    }
+  },
+  props: [`tabChange`],
+  watch: {
+    'tabs.index'(val) {
+      this.tabChange && this.tabChange(val)
+    },
+  },
+  computed: {},
+  async created() {
+    apiList.forEach((item) => {
+      this.$bus.$on(item.key, (data) => {
+        item.fn.call(this, data)
+      })
+    })
+  },
+  mounted() {
+    screenSize(this.$refs.editor)
+  },
+  beforeDestroy() {
+    apiList.forEach((item) => {
+      this.$bus.$off(item.key)
+    })
+  },
+  methods: {},
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  transform-origin: 0 0 0;
+  background-image: url('~@/assets/img2/综合总览/编组 16.png'),
+    url('~@/assets/img2/综合总览/背景左线条.png'),
+    url('~@/assets/img2/综合总览/背景线条上.png'),
+    url('~@/assets/img2/综合总览/背景.png');
+  background-position: right 10px bottom 10px, 10px center, left 510px top 13px,
+    center;
+  background-size: auto;
+  background-repeat: no-repeat;
+  width: 1920px;
+  height: 1080px;
+  color: #fff;
+  font-family: PingFang SC, PingFang SC-Regular;
+  & > .box {
+    padding: 10px;
+    .top {
+      display: flex;
+      .line {
+        width: 0px;
+        height: 41px;
+        margin: 0 20px;
+        border: 1px solid rgba(255, 255, 255, 0.3);
+      }
+      .tabs {
+        font-size: 25px;
+        text-align: center;
+        display: flex;
+        background-image: url('~@/assets/img2/综合总览/编组 9.png');
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        width: 766px;
+        .tab-item {
+          line-height: 56px;
+          margin-right: 32px;
+          color: rgba(255, 255, 255, 0.6);
+          position: relative;
+          cursor: pointer;
+          &.cur {
+            color: #fbfdff;
+            &::before {
+              content: '';
+              display: block;
+              position: absolute;
+              width: 100%;
+              height: 4px;
+              background: linear-gradient(333deg, #158d8c 11%, #29f0f0 90%);
+              bottom: 0px;
+            }
+          }
+          &:first-child {
+            margin-left: 40px;
+          }
+          &:not(:last-child)::after {
+            content: '';
+            display: block;
+            width: 2px;
+            height: 25px;
+            background-color: rgba(255, 255, 255, 0.3);
+            position: absolute;
+            top: 28%;
+            right: -16px;
+          }
+        }
+      }
+      .tipsBox {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 100%;
+        padding-right: 77px;
+        .dateBox {
+          .date {
+            color: rgba(255, 255, 255, 0.6);
+          }
+        }
+        .weather {
+          i {
+            font-size: 44px;
+          }
+        }
+        .temperature {
+          // img {
+          //   padding: 0 20px;
+          // }
+        }
+        .headPortrait {
+          width: 44px;
+          height: 44px;
+          border-radius: 50%;
+          overflow: hidden;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>

src/http/index.js

@@ -1,5 +1,6 @@
 import config from '@/config.js'
 import util from '@/util/index.js'
+import dayjs from 'dayjs'
 
 const api = window.axios.create({
   timeout: 10000, // 请求超时
@@ -39,6 +40,42 @@ const install = (Vue) => {
 
 export { api }
 
+/**
+key 是监听的键
+
+api 是 get 请求的地址
+当 api 是函数时直接运行函数
+
+arg 是 get 请求参数
+可以通过 this.$apiObj.键名.arg = {} 修改参数
+
+
+time 是更新频率
+
+
+*/
+const apiObj = {
+  // 当前天气
+  currentWeather: {
+    api: `/api/currentWeather`,
+    // 1小时
+    // time: 1000 * 60 * 60,
+    time: 1000 * 5,
+  },
+  // 当前时间
+  currentTime: {
+    api: async (arg) => {
+      const dateBox = {
+        date: dayjs(Date.now()).format(`YYYY/MM/DD`),
+        time: dayjs(Date.now()).format(`HH:mm:ss`),
+      }
+      return dateBox
+    },
+    time: 1000,
+  },
+}
+
 export default {
+  apiObj,
   install,
 }

src/main.js

@@ -1,3 +1,4 @@
+import 'uno.css'
 import Vue from 'vue'
 import http from '@/http/index.js'
 import App from './App.vue'
@@ -10,6 +11,7 @@ import Toast from './components/toast'
 import '@/assets/styles/base.scss'
 import '@/assets/styles/common.scss'
 import '@/assets/iconfont/iconfont.css'
+import '@/assets/icon2/font/iconfont.css'
 
 Vue.use(http)
 Vue.use(vueParticles)
@@ -30,4 +32,27 @@ window.$this = new Vue({
   router,
   store,
   render: (h) => h(App),
+  beforeCreate() {
+    Vue.prototype.$bus = this
+    Vue.prototype.$apiObj = http.apiObj
+    Object.entries(http.apiObj).forEach(([key, item]) => {
+      const fn = () => {
+        if (typeof item.api === `string`) {
+          this.$http
+            .get(item.api, {
+              params: item.arg,
+            })
+            .then((res) => {
+              this.$bus.$emit(key, res, item.arg)
+            })
+        } else {
+          item.api(item.arg).then((res) => {
+            this.$bus.$emit(key, res, item.arg)
+          })
+        }
+      }
+      fn()
+      setInterval(fn, item.time)
+    })
+  },
 }).$mount(`#app`)

src/views/page2/index.vue

@@ -1,66 +1,31 @@
 <template>
-  <div class="home-container">
-    <div class="wrap" ref="editor">
-      <div class="top"></div>
-      <div class="box">一些内容</div>
-    </div>
-  </div>
+  <bgBox :tabChange="tabChange">
+    <div>hello</div>
+  </bgBox>
 </template>
 
 <script>
-import { screenSize } from '@/assets/js/utils'
+import bgBox from '@/components/bgBox/index.vue'
 
 export default {
-  name: `Home`,
-  components: {},
+  components: {
+    bgBox,
+  },
   data() {
     return {}
   },
   computed: {},
-  created() {},
-  mounted() {
-    screenSize(this.$refs.editor)
+  async created() {},
+  mounted() {},
+  methods: {
+    tabChange(val) {
+      console.log(`val`, val)
+    },
   },
-  methods: {},
 }
 </script>
 
 <style lang="less" scoped>
-.home-container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  .wrap {
-    transform-origin: 0px 0px 0px;
-    background: url(../../assets/img/bj.jpg) no-repeat;
-    background-size: contain;
-    background-position: 50% 0;
-    background-color: rgb(0, 0, 0);
-    min-width: auto;
-    width: 1920px;
-    min-height: auto;
-    height: 1080px;
-    overflow: auto;
-    .top {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 80px;
-      background-color: transparent;
-      background: url(../../assets/img/top_nav.png) no-repeat;
-      background-position: 65% 0;
-      border: none;
-      overflow: hidden;
-    }
-    .box {
-      color: #fff;
-      line-height: 100vh;
-      text-align: center;
-      font-size: 40px;
-    }
-  }
+.box {
 }
 </style>

vue.config.js

@@ -1,4 +1,28 @@
-module.exports = {
+const { defineConfig } = require(`@vue/cli-service`)
+const UnoCSS = require(`@unocss/webpack`).default
+const presetUno = require(`@unocss/preset-uno`).default
+const presetIcons = require(`@unocss/preset-icons`).default
+const transformerDirectives = require(`@unocss/transformer-directives`).default
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  configureWebpack: {
+    // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
+    externals: {
+      jquery: `$`,
+      echarts: `echarts`,
+      axios: `axios`,
+    },
+    plugins: [
+      UnoCSS({
+        presets: [presetUno(), presetIcons()],
+        transformers: [transformerDirectives()],
+      }),
+    ],
+    optimization: {
+      realContentHash: true,
+    },
+  },
   publicPath: process.env.NODE_ENV === `production` ? `/vueDataV/` : `/`,
   productionSourceMap: false,
   lintOnSave: false,
@@ -15,12 +39,4 @@ module.exports = {
     //   }
     // }
   },
-  configureWebpack: {
-    // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
-    externals: {
-      jquery: `$`,
-      echarts: `echarts`,
-      axios: `axios`,
-    },
-  },
-}
+})