nwdh.git - Gitblit

parent: 993c3eb6 | 补丁 | 提交 | ignore whitespace

whychdw

2020-04-13 2675660646e6a52bb8b3c17a9a8de08364bbd937

nwdh第一次提交

27个文件已添加

	.gitignore	21 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	babel.config.js	5 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package-lock.json	11890 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package.json	42 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/favicon.ico	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/index.html	17 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/App.vue	79 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/css/common.css	34 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/demo.css	539 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/demo_index.html	239 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/iconfont.css	29 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/iconfont.eot	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/iconfont.js	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/iconfont.json	30 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/iconfont.svg	35 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/iconfont.ttf	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/iconfont.woff	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/iconfont/iconfont.woff2	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/images/dw_bg.jpg	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/logo.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/ContentBox.vue	87 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/HelloWorld.vue	58 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/PageHeader.vue	45 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/PageNav.vue	70 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/tree/Index.vue	75 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/tree/TreeItem.vue	88 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main.js	25 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 .gitignore

New file
@@ -0,0 +1,21 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 package-lock.json

New file
Diff too large

 package.json

New file
@@ -0,0 +1,42 @@
{
  "name": "nwdh",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.3.0",
    "@vue/cli-plugin-eslint": "^4.3.0",
    "@vue/cli-service": "^4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

 public/favicon.ico


 public/index.html

New file
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 src/App.vue

New file
@@ -0,0 +1,79 @@
<template>
    <div id="app">
        <div class="page-container">
            <page-header></page-header>
            <page-nav></page-nav>
            <div class="page-content">
                <div class="page-content-container">
                    <div class="page-content-left">
                        <content-box
                        title="站点管理">
                            <my-tree></my-tree>
                        </content-box>
                    </div>
                    <div class="page-content-right">
                        <content-box
                        :title-left=true>
                            <div class="whyc-breadcrumb" slot="title">当前位置：首页 > 站点查询</div>
                        </content-box>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PageHeader from './components/PageHeader'
import PageNav from './components/PageNav'
import ContentBox from './components/ContentBox'
import MyTree from './components/tree/Index'

export default {
    name: 'App',
    components: {
        PageHeader,
        PageNav,
        ContentBox,
        MyTree
    }
}
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background: url('./assets/images/dw_bg.jpg') no-repeat;
        background-size: 100% 100%;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }
    .page-container {
        display: flex;
        height: 100vh;
        flex-direction: column;
    }
    .page-content {
        flex: 1;
    }
    .page-content-container {
        height: 100%;
        box-sizing: border-box;
        padding-top: 0.08rem;
        padding-bottom: 0.08rem;
    }
    .page-content-left,
    .page-content-right {
        height: 100%;
    }
    .page-content-left {
        float: left;
        width: 3.8rem;
    }
    .page-content-right {
        float: right;
        width: calc(100vw - 4.06rem);
    }
</style>

 src/assets/css/common.css

New file
@@ -0,0 +1,34 @@
* {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
}
html, body {
    overflow-y: hidden;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.txt-bold {
    font-weight: bold;
}

/* home state */
.home-state {
    color: #47F030;
}
.home-state-normal {
    color: #47F030;
}
.home-state-jianxiu {
    color: #7030A0;
}
.home-state-warning {
    color: #FFFF00;
}
.home-state-danger {
    color: #FF0000;
}

 src/assets/iconfont/demo.css

New file
@@ -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/iconfont/demo_index.html

New file
@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <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>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</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=1744381" 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">&#xe607;</span>
                <div class="name">减号</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">菱形</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用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.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</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-jianhao"></span>
            <div class="name">
              减号
            </div>
            <div class="code-name">.icon-jianhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lingxing"></span>
            <div class="name">
              菱形
            </div>
            <div class="code-name">.icon-lingxing
            </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>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</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-jianhao"></use>
                </svg>
                <div class="name">减号</div>
                <div class="code-name">#icon-jianhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lingxing"></use>
                </svg>
                <div class="name">菱形</div>
                <div class="code-name">#icon-lingxing</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/iconfont/iconfont.css

New file
@@ -0,0 +1,29 @@
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1586422632510'); /* IE9 */
  src: url('iconfont.eot?t=1586422632510#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMMAAsAAAAABwwAAAK/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqBUIFHATYCJAMQCwoABCAFhG0HRRsuBsiusCnD9Qghe+ecyY8fJceAEjiGxcP/7/dtn3vPkzFNklT7eJ8kkGgeGiGRoDQWJU3prK6W/31rv/miCWmk6V+soZ5UTmb3L6dvb7EmVklktUQnFEKE0Cy0W28PyYuxaUkJ+kdSmj+rqKoROqFogCBgc7ABlwdKg49SAwSYmfd5Dpc2fYHMD5TT2hsn9QKMAwp0rEGR1B3JAfgpHM54ZR4nMGxJXuRycHwK0pI1LhAvBNcgnQtJKWR7oa1ZmuINJPTlVfQDeB3+fnyFaqQpmsqaer0BE7qfnMV2w11LPgHCIGB1g4ptIIlHtamHYkJgxgzvF7cLtFIoH1KzMGROYWhin66eMf94hWhZlaPgGOnKh6QrStUpGATUDBUK/AxNj7JD4IqlW5inuKhNM5vY5vGZVHbfrZJwL9IfeOlArpwrx6Mcu0WE8cfxbPOSTEaMUwNxFgbnhtJuTvVHmRbgVw1r/8SF95M9E3lxwJp7RxXbVjwQriO0jnADH/5cXYkbAOpp9ANgUC0mRBC8jeWEsP1/b4L375nDwKCknwf0h3YHX1Tcsy11qWXOVGWuyKhMS2JcXs2wYQywfNO+59DM9U4Q+pxYQNFZRNVbJiZ1G40Rx2j1TjBsy9DqETOkmMghbDoiCJPeUIy7RzXpk5jULzTm/aA1GTEMu6l5yxGrIbJ9kjRFJuo7KAzPZY5VZaPqCeIbtiaz0pA1QzIQUawUy8XsELkk55gRbPKqUgyZ9BwcJKeRbXvoS2+dDFWsK+W3lkqs7k1Fw3Mg64JENAoxId0OJBg8LuZ3V7Kln59AuA02jWxpqfHPIFJA9I8qiso9iEMqt1fLvbwS2MRVKQqDGMnjQINkELHZPMivH7SOGJSi+oiEr1XJ7sT6qorra5wv3APDrF0yStTIaHTPhObWNS8ZCriCtC1cvu0aAQAA') format('woff2'),
  url('iconfont.woff?t=1586422632510') format('woff'),
  url('iconfont.ttf?t=1586422632510') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1586422632510#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-jianhao:before {
  content: "\e607";
}

.icon-jiahao:before {
  content: "\e666";
}

.icon-lingxing:before {
  content: "\e606";
}


 src/assets/iconfont/iconfont.eot

Binary files differ

 src/assets/iconfont/iconfont.js

New file
@@ -0,0 +1 @@
!function(d){var e,a='<svg><symbol id="icon-jianhao" viewBox="0 0 1024 1024"><path d="M512 524.123c-6.696 0-12.123-5.428-12.123-12.123s5.428-12.123 12.123-12.123 12.123 5.428 12.123 12.123-5.428 12.123-12.123 12.123zM512 501.177c-5.978 0-10.823 4.846-10.823 10.823s4.846 10.823 10.823 10.823 10.823-4.846 10.823-10.823-4.846-10.823-10.823-10.823z" fill="#FFADA0" ></path><path d="M256 475.428571h512a36.571429 36.571429 0 1 1 0 73.142858H256a36.571429 36.571429 0 1 1 0-73.142858z" fill="#FF9787" ></path></symbol><symbol id="icon-jiahao" viewBox="0 0 1024 1024"><path d="M192 480h640v64H192z" fill="#388FFF" ></path><path d="M544 192v640h-64V192z" fill="#388FFF" ></path></symbol><symbol id="icon-lingxing" viewBox="0 0 1024 1024"><path d="M511.901 85.025l426.367 426.367L511.901 937.76 85.534 511.392z" fill="#1D1718" ></path><path d="M511.9 958.99L64.31 511.4 511.9 63.81 959.49 511.4 511.9 958.99zM106.74 511.4L511.9 916.56 917.06 511.4 511.9 106.24 106.74 511.4z" fill="#FFFFFF" ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!d.__iconfont__svg__cssinject__){d.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(i=e,o=d.document,l=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}n()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,n())});function n(){l||(l=!0,i())}var i,o,l,a}(function(){var e,t,n,i,o,l;(e=document.createElement("div")).innerHTML=a,a=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(i=document.body).firstChild?(o=n,(l=i.firstChild).parentNode.insertBefore(o,l)):i.appendChild(n))})}(window);

 src/assets/iconfont/iconfont.json

New file
@@ -0,0 +1,30 @@
{
  "id": "1744381",
  "name": "nwdh",
  "font_family": "iconfont",
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
    {
      "icon_id": "1517524",
      "name": "减号",
      "font_class": "jianhao",
      "unicode": "e607",
      "unicode_decimal": 58887
    },
    {
      "icon_id": "9978276",
      "name": "加号",
      "font_class": "jiahao",
      "unicode": "e666",
      "unicode_decimal": 58982
    },
    {
      "icon_id": "12888882",
      "name": "菱形",
      "font_class": "lingxing",
      "unicode": "e606",
      "unicode_decimal": 58886
    }
  ]
}

 src/assets/iconfont/iconfont.svg

New file
@@ -0,0 +1,35 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>

<font id="iconfont" horiz-adv-x="1024" >
  <font-face
    font-family="iconfont"
    font-weight="500"
    font-stretch="normal"
    units-per-em="1024"
    ascent="896"
    descent="-128"
  />
    <missing-glyph />
    
    <glyph glyph-name="jianhao" unicode="&#58887;" d="M512 371.877c-6.696 0-12.123 5.428-12.123 12.123s5.428 12.123 12.123 12.123 12.123-5.428 12.123-12.123-5.428-12.123-12.123-12.123zM512 394.823c-5.978 0-10.823-4.846-10.823-10.823s4.846-10.823 10.823-10.823 10.823 4.846 10.823 10.823-4.846 10.823-10.823 10.823zM256 420.571h512c0 0 0 0 0 0 20.198 0 36.571-16.374 36.571-36.571 0-20.198-16.374-36.571-36.571-36.571-0 0-0 0-0 0h-512c-0 0-0 0-0 0-20.198 0-36.571 16.374-36.571 36.571 0 20.198 16.374 36.571 36.571 36.571 0 0 0 0 0 0z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="jiahao" unicode="&#58982;" d="M192 416h640v-64H192zM544 704v-640h-64V704z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="lingxing" unicode="&#58886;" d="M511.901 810.975l426.367-426.367L511.901-41.76 85.534 384.608zM511.9-62.99L64.31 384.6 511.9 832.19 959.49 384.6 511.9-62.99zM106.74 384.6L511.9-20.56 917.06 384.6 511.9 789.76 106.74 384.6z"  horiz-adv-x="1024" />

    


  </font>
</defs></svg>

 src/assets/iconfont/iconfont.ttf

Binary files differ

 src/assets/iconfont/iconfont.woff

Binary files differ

 src/assets/iconfont/iconfont.woff2

Binary files differ

 src/assets/images/dw_bg.jpg


 src/assets/logo.png


 src/components/ContentBox.vue

New file
@@ -0,0 +1,87 @@
<template>
    <div class="content-box">
        <div class="content-box-title" :class="getTitlePos">
            <slot name="title">{{title}}</slot>
        </div>
        <div class="content-box-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'contentBox',
    props: {
        titleLeft: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '头部信息'
        }
    },
    computed: {
        getTitlePos: function() {
            return this.titleLeft?'txt-left': '';
        }
    },
    mounted(){
        //console.log(this.titleLeft);
    }
}
</script>

<style scoped>
.content-box {
    position: relative;
    height: 100%;
    border: 1px solid #FFFFFF;
    border-radius: 0.08rem;
    font-size: 0.16rem;
}
.content-box-title {
    position: absolute;
    top: 0.04rem;
    left: 0.04rem;
    right: 0.04rem;
    padding-left: 0.1rem;
    border-radius: 0.06rem;
    font-size: 0.14rem;
    text-align: center;
    background-image: linear-gradient(rgb(62, 189, 201), #016A95,#00638D, #006999, #009EE3);
    line-height: 0.32rem;
    font-weight: bold;
}
.content-box-title.txt-left {
    text-align: left;
}
.content-box-content {
    position: absolute;
    top: 0.4rem;
    left: 0.04rem;
    right: 0.04rem;
    bottom: 0;
    overflow-y: auto;
}
.content-box-content::-webkit-scrollbar {
    /* 滚动条整体样式 */
    width: 0.1rem;
    height: 0.01;
}
.content-box-content::-webkit-scrollbar-thumb {
    /* 滚动条里面小方块 */
    border-radius: 0.1rem;
    -webkit-box-shadow: inset 0 0 0.05rem rgba(0,0,0,0.2);
    background: #535353;
}
.content-box-content::-webkit-scrollbar-track {
    /* 滚动条里面轨道 */
    -webkit-box-shadow: inset 0 0 0.05rem rgba(0,0,0,0.2);
    border-radius: 0.1rem;
    background: #EDEDED;
}
</style>



 src/components/HelloWorld.vue

New file
@@ -0,0 +1,58 @@
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 src/components/PageHeader.vue

New file
@@ -0,0 +1,45 @@
<template>
    <div class="page-header">
        <div class="page-left">
            <span class="txt-bold">FPMS </span>|<span class="txt-bold"> 动环综合管理系统</span>
        </div>
        <div class="page-right">
            <span>admin </span>|
            <span>修改密码 </span>| 
            <span>退出登录</span>
        </div>
    </div>
</template>

<script>

export default {
    name: 'PageHeader',
}
</script>
<style scoped>
.page-header {
    font-size: 0.18rem;
}
.page-header::after {
    clear: both;
    content: "";
    display: block;
    width: 0;
    height: 0;
}
.page-header .page-left,
.page-header .page-right {
    padding-top: 0.1rem;
    line-height: 0.4rem;
}
.page-header .page-left {
    float: left;
}
.page-header .page-right {
    float: right;
    font-size: 0.15rem;
}
</style>



 src/components/PageNav.vue

New file
@@ -0,0 +1,70 @@
<template>
    <div class="page-nav">
        <div class="page-nav-list">
            <ul>
                <li class="active-nav">
                    <a href="javascript:;">首页</a>
                </li>
                <li>
                    <a href="javascript:;">动环监控中心</a>
                </li>
                <li>
                    <a href="javascript:;">动力设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">环境设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">安防设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">报警管理</a>
                </li>
                <li>
                    <a href="javascript:;">统计分析</a>
                </li>
                <li>
                    <a href="javascript:;">系统管理</a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'PageNav'
}
</script>
<style scoped>
    .page-nav {
        background-color: none; /* 浏览器不支持时显示 */
        border-radius: 0.08rem;
        background-image: linear-gradient(#49DFED, #016A95,#00638D, #006999, #009EE3);
        font-size: 0.15rem;
        text-align: center;
    }
    .page-nav::after {
        clear: both;
        content: "";
        display: block;
        width: 0;
        height: 0;
    }
    .page-nav li {
        float: left;
        width: 12.5%;
    }
    .page-nav li.active-nav {
        background-color: #15E3F3;
    }
    .page-nav li a {
        display: block;
        text-align: center;
        min-width: 1rem;
        line-height: 0.45rem;
        padding-left: 0.18rem;
        padding-right: 0.18rem;
    }
</style>



 src/components/tree/Index.vue

New file
@@ -0,0 +1,75 @@
<template>
    <div class="my-tree">
        <tree-item 
        v-for="(data, key) in treeData" :key="key"
        :tree-data="data"
        :level=0></tree-item>
    </div>
</template>

<script>
import TreeItem from './TreeItem'

export default {
    name: 'MyTree',
    components: {
        TreeItem
    },
    data() {
        return {
            treeData: [
                {
                    txt: '广东省',
                    state: 'danger',
                    open: true,
                    children: [
                        {
                            txt: '广东市',
                            state: 'danger',
                            open: true,
                            children: [
                                {
                                    txt: '白云220kw变电站',
                                    state: 'danger',
                                },
                                {
                                    txt: '天河220kw变电站',
                                    state: 'warning',
                                },
                                {
                                    txt: '海珠220KV变电站',
                                    state: 'jianxiu',
                                },
                                {
                                    txt: '荔湾220KV变电站',
                                    state: 'normal',
                                },
                            ]
                        }
                    ]
                },
                {
                    txt: '广西省',
                    state: 'normal',
                    open: false,
                    children: []
                },
                {
                    txt: '云南省',
                    state: 'normal',
                    open: false,
                    children: []
                }
            ]
        }
    }
}
</script>

<style scoped>
    .my-tree {
        padding-left: 0.1rem;
    }
</style>



 src/components/tree/TreeItem.vue

New file
@@ -0,0 +1,88 @@
<template>
    <div class="tree-item">
        <div class="tree-title" :style="getPadding">
            <span class="iconfont" v-if="getChildren" :class="getOpen"></span>
            <span class="iconfont icon-lingxing home-state" :class="getHomeState"></span>
            <span class="tree-title-txt">{{treeData.txt}}</span>
        </div>
        <div class="tree-child" v-if="getChildren">
            <tree-item
            v-for="(data, key) in treeData.children" :key="key"
            :tree-data='data'
            :level='getLevel'></tree-item>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TreeItem',
    props: {
        treeData: {
            type: Object,
            default() {
                return {};
            }
        },
        level: {
            type: Number
        }
    },
    data() {
        return {}
    },
    computed: {
        getOpen: function() {
            return this.treeData.open?'icon-jianhao': 'icon-jiahao';
        },
        getLevel: function() {
            var level = this.level+1;
            return level;
        },
        getPadding: function() {
            return {
                paddingLeft: this.level*0.18+'rem'
            };
        },
        getHomeState: function() {
            var state = this.treeData.state;
            var rs = 'home-state-normal';
            switch(state) {
                case 'jianxiu':
                    rs = 'home-state-jianxiu';
                break;
                case 'warning':
                    rs = 'home-state-warning';
                break;
                case 'danger':
                    rs = 'home-state-danger';
                break;
                default:
                    rs = 'home-state-normal';
            }
            // 返回状态值
            return rs;
        },
        getChildren: function() {
            var rs = false;
            var children = this.treeData.children;
            if(children) {
                rs = true;
            }
            return rs;
        }
    }
}
</script>

<style scoped>
.tree-title {
    line-height: 0.3rem;
}
.home-state {
    margin-right: 0.06rem;
    margin-right: 0.06rem;
}
</style>



 src/main.js

New file
@@ -0,0 +1,25 @@
import Vue from 'vue'
import App from './App.vue'
import './assets/css/common.css'
import './assets/iconfont/iconfont.css'

Vue.config.productionTip = false


const setHtmlFontSize = () => {
    const htmlDom = document.getElementsByTagName('html')[0];
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (htmlWidth >= 750) {
        htmlWidth = 750;
    }
    if (htmlWidth <= 320) {
        htmlWidth = 320;
    }
    htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();

new Vue({
    render: h => h(App),
}).$mount('#app')

New file
			@@ -0,0 +1,21 @@
			.DS_Store
			node_modules
			/dist

			# local env files
			.env.local
			.env.*.local

			# Log files
			npm-debug.log*
			yarn-debug.log*
			yarn-error.log*

			# Editor directories and files
			.idea
			.vscode
			*.suo
			.ntvs
			*.njsproj
			*.sln
			*.sw?

New file
			@@ -0,0 +1,5 @@
			module.exports = {
			presets: [
			'@vue/cli-plugin-babel/preset'
			]
			}

New file
			@@ -0,0 +1,42 @@
			{
			"name": "nwdh",
			"version": "0.1.0",
			"private": true,
			"scripts": {
			"serve": "vue-cli-service serve",
			"build": "vue-cli-service build",
			"lint": "vue-cli-service lint"
			},
			"dependencies": {
			"core-js": "^3.6.4",
			"vue": "^2.6.11"
			},
			"devDependencies": {
			"@vue/cli-plugin-babel": "^4.3.0",
			"@vue/cli-plugin-eslint": "^4.3.0",
			"@vue/cli-service": "^4.3.0",
			"babel-eslint": "^10.1.0",
			"eslint": "^6.7.2",
			"eslint-plugin-vue": "^6.2.2",
			"vue-template-compiler": "^2.6.11"
			},
			"eslintConfig": {
			"root": true,
			"env": {
			"node": true
			},
			"extends": [
			"plugin:vue/essential",
			"eslint:recommended"
			],
			"parserOptions": {
			"parser": "babel-eslint"
			},
			"rules": {}
			},
			"browserslist": [
			"> 1%",
			"last 2 versions",
			"not dead"
			]
			}

New file
			@@ -0,0 +1,17 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width,initial-scale=1.0">
			<link rel="icon" href="<%= BASE_URL %>favicon.ico">
			<title><%= htmlWebpackPlugin.options.title %></title>
			</head>
			<body>
			<noscript>
			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			</noscript>
			<div id="app"></div>
			<!-- built files will be auto injected -->
			</body>
			</html>

New file
			@@ -0,0 +1,79 @@
			<template>
			<div id="app">
			<div class="page-container">
			<page-header></page-header>
			<page-nav></page-nav>
			<div class="page-content">
			<div class="page-content-container">
			<div class="page-content-left">
			<content-box
			title="站点管理">
			<my-tree></my-tree>
			</content-box>
			</div>
			<div class="page-content-right">
			<content-box
			:title-left=true>
			<div class="whyc-breadcrumb" slot="title">当前位置：首页 > 站点查询</div>
			</content-box>
			</div>
			</div>
			</div>
			</div>
			</div>
			</template>

			<script>
			import PageHeader from './components/PageHeader'
			import PageNav from './components/PageNav'
			import ContentBox from './components/ContentBox'
			import MyTree from './components/tree/Index'

			export default {
			name: 'App',
			components: {
			PageHeader,
			PageNav,
			ContentBox,
			MyTree
			}
			}
			</script>

			<style>
			#app {
			font-family: Avenir, Helvetica, Arial, sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			background: url('./assets/images/dw_bg.jpg') no-repeat;
			background-size: 100% 100%;
			padding-left: 0.1rem;
			padding-right: 0.1rem;
			}
			.page-container {
			display: flex;
			height: 100vh;
			flex-direction: column;
			}
			.page-content {
			flex: 1;
			}
			.page-content-container {
			height: 100%;
			box-sizing: border-box;
			padding-top: 0.08rem;
			padding-bottom: 0.08rem;
			}
			.page-content-left,
			.page-content-right {
			height: 100%;
			}
			.page-content-left {
			float: left;
			width: 3.8rem;
			}
			.page-content-right {
			float: right;
			width: calc(100vw - 4.06rem);
			}
			</style>

New file
			@@ -0,0 +1,34 @@
			* {
			margin: 0;
			padding: 0;
			color: #FFFFFF;
			}
			html, body {
			overflow-y: hidden;
			}
			li {
			list-style: none;
			}
			a {
			text-decoration: none;
			}
			.txt-bold {
			font-weight: bold;
			}

			/* home state */
			.home-state {
			color: #47F030;
			}
			.home-state-normal {
			color: #47F030;
			}
			.home-state-jianxiu {
			color: #7030A0;
			}
			.home-state-warning {
			color: #FFFF00;
			}
			.home-state-danger {
			color: #FF0000;
			}

New file
			@@ -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;
			}

New file
			@@ -0,0 +1,239 @@
			<!DOCTYPE html>
			<html>
			<head>
			<meta charset="utf-8"/>
			<title>IconFont Demo</title>
			<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
			<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>
			</head>
			<body>
			<div class="main">
			<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></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=1744381" 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"></span>
			<div class="name">减号</div>
			<div class="code-name">&#xe607;</div>
			</li>

			<li class="dib">
			<span class="icon iconfont"></span>
			<div class="name">加号</div>
			<div class="code-name">&#xe666;</div>
			</li>

			<li class="dib">
			<span class="icon iconfont"></span>
			<div class="name">菱形</div>
			<div class="code-name">&#xe606;</div>
			</li>

			</ul>
			<div class="article markdown">
			<h2 id="unicode-">Unicode 引用</h2>
			<hr>

			<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
			<ul>
			<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
			<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
			<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
			</ul>
			<blockquote>
			<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用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.eot');
			src: url('iconfont.eot?#iefix') format('embedded-opentype'),
			url('iconfont.woff2') format('woff2'),
			url('iconfont.woff') format('woff'),
			url('iconfont.ttf') format('truetype'),
			url('iconfont.svg#iconfont') format('svg');
			}
			</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"
			><span class="iconfont">&#x33;</span>
			</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-jianhao"></span>
			<div class="name">
			减号
			</div>
			<div class="code-name">.icon-jianhao
			</div>
			</li>

			<li class="dib">
			<span class="icon iconfont icon-jiahao"></span>
			<div class="name">
			加号
			</div>
			<div class="code-name">.icon-jiahao
			</div>
			</li>

			<li class="dib">
			<span class="icon iconfont icon-lingxing"></span>
			<div class="name">
			菱形
			</div>
			<div class="code-name">.icon-lingxing
			</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>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
			<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
			<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
			<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
			</ul>
			<p>使用步骤如下：</p>
			<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
			<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
			</code></pre>
			<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
			<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
			</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-jianhao"></use>
			</svg>
			<div class="name">减号</div>
			<div class="code-name">#icon-jianhao</div>
			</li>

			<li class="dib">
			<svg class="icon svg-icon" aria-hidden="true">
			<use xlink:href="#icon-jiahao"></use>
			</svg>
			<div class="name">加号</div>
			<div class="code-name">#icon-jiahao</div>
			</li>

			<li class="dib">
			<svg class="icon svg-icon" aria-hidden="true">
			<use xlink:href="#icon-lingxing"></use>
			</svg>
			<div class="name">菱形</div>
			<div class="code-name">#icon-lingxing</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"><script src="./iconfont.js"></script>
			</code></pre>
			<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
			<pre><code class="language-html"><style>
			.icon {
			width: 1em;
			height: 1em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
			}
			</style>
			</code></pre>
			<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
			<pre><code class="language-html"><svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-xxx"></use>
			</svg>
			</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>

New file
			@@ -0,0 +1,29 @@
			@font-face {font-family: "iconfont";
			src: url('iconfont.eot?t=1586422632510'); /* IE9 */
			src: url('iconfont.eot?t=1586422632510#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMMAAsAAAAABwwAAAK/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqBUIFHATYCJAMQCwoABCAFhG0HRRsuBsiusCnD9Qghe+ecyY8fJceAEjiGxcP/7/dtn3vPkzFNklT7eJ8kkGgeGiGRoDQWJU3prK6W/31rv/miCWmk6V+soZ5UTmb3L6dvb7EmVklktUQnFEKE0Cy0W28PyYuxaUkJ+kdSmj+rqKoROqFogCBgc7ABlwdKg49SAwSYmfd5Dpc2fYHMD5TT2hsn9QKMAwp0rEGR1B3JAfgpHM54ZR4nMGxJXuRycHwK0pI1LhAvBNcgnQtJKWR7oa1ZmuINJPTlVfQDeB3+fnyFaqQpmsqaer0BE7qfnMV2w11LPgHCIGB1g4ptIIlHtamHYkJgxgzvF7cLtFIoH1KzMGROYWhin66eMf94hWhZlaPgGOnKh6QrStUpGATUDBUK/AxNj7JD4IqlW5inuKhNM5vY5vGZVHbfrZJwL9IfeOlArpwrx6Mcu0WE8cfxbPOSTEaMUwNxFgbnhtJuTvVHmRbgVw1r/8SF95M9E3lxwJp7RxXbVjwQriO0jnADH/5cXYkbAOpp9ANgUC0mRBC8jeWEsP1/b4L375nDwKCknwf0h3YHX1Tcsy11qWXOVGWuyKhMS2JcXs2wYQywfNO+59DM9U4Q+pxYQNFZRNVbJiZ1G40Rx2j1TjBsy9DqETOkmMghbDoiCJPeUIy7RzXpk5jULzTm/aA1GTEMu6l5yxGrIbJ9kjRFJuo7KAzPZY5VZaPqCeIbtiaz0pA1QzIQUawUy8XsELkk55gRbPKqUgyZ9BwcJKeRbXvoS2+dDFWsK+W3lkqs7k1Fw3Mg64JENAoxId0OJBg8LuZ3V7Kln59AuA02jWxpqfHPIFJA9I8qiso9iEMqt1fLvbwS2MRVKQqDGMnjQINkELHZPMivH7SOGJSi+oiEr1XJ7sT6qorra5wv3APDrF0yStTIaHTPhObWNS8ZCriCtC1cvu0aAQAA') format('woff2'),
			url('iconfont.woff?t=1586422632510') format('woff'),
			url('iconfont.ttf?t=1586422632510') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			url('iconfont.svg?t=1586422632510#iconfont') format('svg'); /* iOS 4.1- */
			}

			.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			}

			.icon-jianhao:before {
			content: "\e607";
			}

			.icon-jiahao:before {
			content: "\e666";
			}

			.icon-lingxing:before {
			content: "\e606";
			}

New file
			@@ -0,0 +1 @@
			!function(d){var e,a='<svg><symbol id="icon-jianhao" viewBox="0 0 1024 1024"><path d="M512 524.123c-6.696 0-12.123-5.428-12.123-12.123s5.428-12.123 12.123-12.123 12.123 5.428 12.123 12.123-5.428 12.123-12.123 12.123zM512 501.177c-5.978 0-10.823 4.846-10.823 10.823s4.846 10.823 10.823 10.823 10.823-4.846 10.823-10.823-4.846-10.823-10.823-10.823z" fill="#FFADA0" ></path><path d="M256 475.428571h512a36.571429 36.571429 0 1 1 0 73.142858H256a36.571429 36.571429 0 1 1 0-73.142858z" fill="#FF9787" ></path></symbol><symbol id="icon-jiahao" viewBox="0 0 1024 1024"><path d="M192 480h640v64H192z" fill="#388FFF" ></path><path d="M544 192v640h-64V192z" fill="#388FFF" ></path></symbol><symbol id="icon-lingxing" viewBox="0 0 1024 1024"><path d="M511.901 85.025l426.367 426.367L511.901 937.76 85.534 511.392z" fill="#1D1718" ></path><path d="M511.9 958.99L64.31 511.4 511.9 63.81 959.49 511.4 511.9 958.99zM106.74 511.4L511.9 916.56 917.06 511.4 511.9 106.24 106.74 511.4z" fill="#FFFFFF" ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!d.__iconfont__svg__cssinject__){d.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(i=e,o=d.document,l=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}n()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,n())});function n(){l\|\|(l=!0,i())}var i,o,l,a}(function(){var e,t,n,i,o,l;(e=document.createElement("div")).innerHTML=a,a=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(i=document.body).firstChild?(o=n,(l=i.firstChild).parentNode.insertBefore(o,l)):i.appendChild(n))})}(window);

New file
			@@ -0,0 +1,30 @@
			{
			"id": "1744381",
			"name": "nwdh",
			"font_family": "iconfont",
			"css_prefix_text": "icon-",
			"description": "",
			"glyphs": [
			{
			"icon_id": "1517524",
			"name": "减号",
			"font_class": "jianhao",
			"unicode": "e607",
			"unicode_decimal": 58887
			},
			{
			"icon_id": "9978276",
			"name": "加号",
			"font_class": "jiahao",
			"unicode": "e666",
			"unicode_decimal": 58982
			},
			{
			"icon_id": "12888882",
			"name": "菱形",
			"font_class": "lingxing",
			"unicode": "e606",
			"unicode_decimal": 58886
			}
			]
			}

New file
			@@ -0,0 +1,35 @@
			<?xml version="1.0" standalone="no"?>
			<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
			<!--
			2013-9-30: Created.
			-->
			<svg>
			<metadata>
			Created by iconfont
			</metadata>
			<defs>

			<font id="iconfont" horiz-adv-x="1024" >
			<font-face
			font-family="iconfont"
			font-weight="500"
			font-stretch="normal"
			units-per-em="1024"
			ascent="896"
			descent="-128"
			/>
			<missing-glyph />

			<glyph glyph-name="jianhao" unicode="" d="M512 371.877c-6.696 0-12.123 5.428-12.123 12.123s5.428 12.123 12.123 12.123 12.123-5.428 12.123-12.123-5.428-12.123-12.123-12.123zM512 394.823c-5.978 0-10.823-4.846-10.823-10.823s4.846-10.823 10.823-10.823 10.823 4.846 10.823 10.823-4.846 10.823-10.823 10.823zM256 420.571h512c0 0 0 0 0 0 20.198 0 36.571-16.374 36.571-36.571 0-20.198-16.374-36.571-36.571-36.571-0 0-0 0-0 0h-512c-0 0-0 0-0 0-20.198 0-36.571 16.374-36.571 36.571 0 20.198 16.374 36.571 36.571 36.571 0 0 0 0 0 0z" horiz-adv-x="1024" />


			<glyph glyph-name="jiahao" unicode="" d="M192 416h640v-64H192zM544 704v-640h-64V704z" horiz-adv-x="1024" />


			<glyph glyph-name="lingxing" unicode="" d="M511.901 810.975l426.367-426.367L511.901-41.76 85.534 384.608zM511.9-62.99L64.31 384.6 511.9 832.19 959.49 384.6 511.9-62.99zM106.74 384.6L511.9-20.56 917.06 384.6 511.9 789.76 106.74 384.6z" horiz-adv-x="1024" />




			</font>
			</defs></svg>

New file
			@@ -0,0 +1,87 @@
			<template>
			<div class="content-box">
			<div class="content-box-title" :class="getTitlePos">
			<slot name="title">{{title}}</slot>
			</div>
			<div class="content-box-content">
			<slot></slot>
			</div>
			</div>
			</template>

			<script>
			export default {
			name: 'contentBox',
			props: {
			titleLeft: {
			type: Boolean,
			default: false
			},
			title: {
			type: String,
			default: '头部信息'
			}
			},
			computed: {
			getTitlePos: function() {
			return this.titleLeft?'txt-left': '';
			}
			},
			mounted(){
			//console.log(this.titleLeft);
			}
			}
			</script>

			<style scoped>
			.content-box {
			position: relative;
			height: 100%;
			border: 1px solid #FFFFFF;
			border-radius: 0.08rem;
			font-size: 0.16rem;
			}
			.content-box-title {
			position: absolute;
			top: 0.04rem;
			left: 0.04rem;
			right: 0.04rem;
			padding-left: 0.1rem;
			border-radius: 0.06rem;
			font-size: 0.14rem;
			text-align: center;
			background-image: linear-gradient(rgb(62, 189, 201), #016A95,#00638D, #006999, #009EE3);
			line-height: 0.32rem;
			font-weight: bold;
			}
			.content-box-title.txt-left {
			text-align: left;
			}
			.content-box-content {
			position: absolute;
			top: 0.4rem;
			left: 0.04rem;
			right: 0.04rem;
			bottom: 0;
			overflow-y: auto;
			}
			.content-box-content::-webkit-scrollbar {
			/* 滚动条整体样式 */
			width: 0.1rem;
			height: 0.01;
			}
			.content-box-content::-webkit-scrollbar-thumb {
			/* 滚动条里面小方块 */
			border-radius: 0.1rem;
			-webkit-box-shadow: inset 0 0 0.05rem rgba(0,0,0,0.2);
			background: #535353;
			}
			.content-box-content::-webkit-scrollbar-track {
			/* 滚动条里面轨道 */
			-webkit-box-shadow: inset 0 0 0.05rem rgba(0,0,0,0.2);
			border-radius: 0.1rem;
			background: #EDEDED;
			}
			</style>

New file
			@@ -0,0 +1,58 @@
			<template>
			<div class="hello">
			<h1>{{ msg }}</h1>
			<p>
			For a guide and recipes on how to configure / customize this project,<br>
			check out the
			<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
			</p>
			<h3>Installed CLI Plugins</h3>
			<ul>
			<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
			<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
			</ul>
			<h3>Essential Links</h3>
			<ul>
			<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
			<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
			<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
			<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
			<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
			</ul>
			<h3>Ecosystem</h3>
			<ul>
			<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
			<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
			<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
			<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
			<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
			</ul>
			</div>
			</template>

			<script>
			export default {
			name: 'HelloWorld',
			props: {
			msg: String
			}
			}
			</script>

			<!-- Add "scoped" attribute to limit CSS to this component only -->
			<style scoped>
			h3 {
			margin: 40px 0 0;
			}
			ul {
			list-style-type: none;
			padding: 0;
			}
			li {
			display: inline-block;
			margin: 0 10px;
			}
			a {
			color: #42b983;
			}
			</style>

New file
			@@ -0,0 +1,45 @@
			<template>
			<div class="page-header">
			<div class="page-left">
			<span class="txt-bold">FPMS </span>\|<span class="txt-bold"> 动环综合管理系统</span>
			</div>
			<div class="page-right">
			<span>admin </span>\|
			<span>修改密码 </span>\|
			<span>退出登录</span>
			</div>
			</div>
			</template>

			<script>

			export default {
			name: 'PageHeader',
			}
			</script>
			<style scoped>
			.page-header {
			font-size: 0.18rem;
			}
			.page-header::after {
			clear: both;
			content: "";
			display: block;
			width: 0;
			height: 0;
			}
			.page-header .page-left,
			.page-header .page-right {
			padding-top: 0.1rem;
			line-height: 0.4rem;
			}
			.page-header .page-left {
			float: left;
			}
			.page-header .page-right {
			float: right;
			font-size: 0.15rem;
			}
			</style>

New file
			@@ -0,0 +1,70 @@
			<template>
			<div class="page-nav">
			<div class="page-nav-list">
			<ul>
			<li class="active-nav">
			<a href="javascript:;">首页</a>
			</li>
			<li>
			<a href="javascript:;">动环监控中心</a>
			</li>
			<li>
			<a href="javascript:;">动力设备监控</a>
			</li>
			<li>
			<a href="javascript:;">环境设备监控</a>
			</li>
			<li>
			<a href="javascript:;">安防设备监控</a>
			</li>
			<li>
			<a href="javascript:;">报警管理</a>
			</li>
			<li>
			<a href="javascript:;">统计分析</a>
			</li>
			<li>
			<a href="javascript:;">系统管理</a>
			</li>
			</ul>
			</div>
			</div>
			</template>
			<script>
			export default {
			name: 'PageNav'
			}
			</script>
			<style scoped>
			.page-nav {
			background-color: none; /* 浏览器不支持时显示 */
			border-radius: 0.08rem;
			background-image: linear-gradient(#49DFED, #016A95,#00638D, #006999, #009EE3);
			font-size: 0.15rem;
			text-align: center;
			}
			.page-nav::after {
			clear: both;
			content: "";
			display: block;
			width: 0;
			height: 0;
			}
			.page-nav li {
			float: left;
			width: 12.5%;
			}
			.page-nav li.active-nav {
			background-color: #15E3F3;
			}
			.page-nav li a {
			display: block;
			text-align: center;
			min-width: 1rem;
			line-height: 0.45rem;
			padding-left: 0.18rem;
			padding-right: 0.18rem;
			}
			</style>

New file
			@@ -0,0 +1,75 @@
			<template>
			<div class="my-tree">
			<tree-item
			v-for="(data, key) in treeData" :key="key"
			:tree-data="data"
			:level=0></tree-item>
			</div>
			</template>

			<script>
			import TreeItem from './TreeItem'

			export default {
			name: 'MyTree',
			components: {
			TreeItem
			},
			data() {
			return {
			treeData: [
			{
			txt: '广东省',
			state: 'danger',
			open: true,
			children: [
			{
			txt: '广东市',
			state: 'danger',
			open: true,
			children: [
			{
			txt: '白云220kw变电站',
			state: 'danger',
			},
			{
			txt: '天河220kw变电站',
			state: 'warning',
			},
			{
			txt: '海珠220KV变电站',
			state: 'jianxiu',
			},
			{
			txt: '荔湾220KV变电站',
			state: 'normal',
			},
			]
			}
			]
			},
			{
			txt: '广西省',
			state: 'normal',
			open: false,
			children: []
			},
			{
			txt: '云南省',
			state: 'normal',
			open: false,
			children: []
			}
			]
			}
			}
			}
			</script>

			<style scoped>
			.my-tree {
			padding-left: 0.1rem;
			}
			</style>

New file
			@@ -0,0 +1,88 @@
			<template>
			<div class="tree-item">
			<div class="tree-title" :style="getPadding">
			<span class="iconfont" v-if="getChildren" :class="getOpen"></span>
			<span class="iconfont icon-lingxing home-state" :class="getHomeState"></span>
			<span class="tree-title-txt">{{treeData.txt}}</span>
			</div>
			<div class="tree-child" v-if="getChildren">
			<tree-item
			v-for="(data, key) in treeData.children" :key="key"
			:tree-data='data'
			:level='getLevel'></tree-item>
			</div>
			</div>
			</template>

			<script>
			export default {
			name: 'TreeItem',
			props: {
			treeData: {
			type: Object,
			default() {
			return {};
			}
			},
			level: {
			type: Number
			}
			},
			data() {
			return {}
			},
			computed: {
			getOpen: function() {
			return this.treeData.open?'icon-jianhao': 'icon-jiahao';
			},
			getLevel: function() {
			var level = this.level+1;
			return level;
			},
			getPadding: function() {
			return {
			paddingLeft: this.level*0.18+'rem'
			};
			},
			getHomeState: function() {
			var state = this.treeData.state;
			var rs = 'home-state-normal';
			switch(state) {
			case 'jianxiu':
			rs = 'home-state-jianxiu';
			break;
			case 'warning':
			rs = 'home-state-warning';
			break;
			case 'danger':
			rs = 'home-state-danger';
			break;
			default:
			rs = 'home-state-normal';
			}
			// 返回状态值
			return rs;
			},
			getChildren: function() {
			var rs = false;
			var children = this.treeData.children;
			if(children) {
			rs = true;
			}
			return rs;
			}
			}
			}
			</script>

			<style scoped>
			.tree-title {
			line-height: 0.3rem;
			}
			.home-state {
			margin-right: 0.06rem;
			margin-right: 0.06rem;
			}
			</style>

New file
			@@ -0,0 +1,25 @@
			import Vue from 'vue'
			import App from './App.vue'
			import './assets/css/common.css'
			import './assets/iconfont/iconfont.css'

			Vue.config.productionTip = false


			const setHtmlFontSize = () => {
			const htmlDom = document.getElementsByTagName('html')[0];
			let htmlWidth = document.documentElement.clientWidth \|\| document.body.clientWidth;
			if (htmlWidth >= 750) {
			htmlWidth = 750;
			}
			if (htmlWidth <= 320) {
			htmlWidth = 320;
			}
			htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
			};
			window.onresize = setHtmlFontSize;
			setHtmlFontSize();

			new Vue({
			render: h => h(App),
			}).$mount('#app')