ld9_web.git - Gitblit

parent: 288c1cf6 | 补丁 | 提交 | ignore whitespace

whychdw

2019-07-31 902f1cf4d57c2076ecba66074cb2120b6c6f53c5

第一次提交

19个文件已添加

	.gitignore	21 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	babel.config.js	5 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package-lock.json	11676 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package.json	48 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/favicon.ico	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/index.html	17 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/App.vue	126 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/css/common.css	213 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/images/bg.gif	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/logo.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/HTabPane.vue	21 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/HeaderDecorateLeft.vue	34 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/HeaderDecorateRight.vue	34 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/HelloWorld.vue	58 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/ParallelQuadrangle.vue	30 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/libs/util.js	6 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main.js	38 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/router.js	13 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/index.vue	10 ●●●●● 补丁 \| 查看 \| 原始文档 \| 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/app'
  ]
}

 package-lock.json

New file
Diff too large

 package.json

New file
@@ -0,0 +1,48 @@
{
  "name": "ld9",
  "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": "^2.6.5",
    "iview": "^3.4.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.7"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

 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>ld9</title>
  </head>
  <body class="science-page">
    <noscript>
      <strong>We're sorry but ld9 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,126 @@
<template>
  <div id="app">
    <div class="science-header">
      <Row>
        <i-col span="6">
            <div class="blade-card" style="height: 40px;">
                <div class="blade-card-mask" style="left:0; right: 40px;"></div>
                <div class="blade-card-mask-after"></div>
                <div class="blade-card-content">
                  <Tooltip content="菜单">
                    <div class="menu-btn" @click="menu = true">
                      <Icon type="md-menu" />
                    </div>
                  </Tooltip>
                </div>
            </div>
        </i-col>
        <i-col span="12">
            <div style="text-align: center; line-height: 40px;font-size: 20px;font-weight: bold; color: #73D8FE">蓄电池监控平台</div>
        </i-col>
        <i-col span="6">
            <div class="blade-card" style="height: 40px;">
                <div class="blade-card-mask" style="left:40px; right: 0;"></div>
                <div class="blade-card-mask-before"></div>
                <div class="blade-card-content"></div>
            </div>
        </i-col>
      </Row>
      <Row style="margin-top: 8px;">
          <i-col offset="1" span="4">
              <header-decorate-left></header-decorate-left>
          </i-col>
          <i-col offset="14" span="4" >
              <header-decorate-right></header-decorate-right>
          </i-col>
      </Row>
    </div>
    <div class="science-content">
      <Row>
        <i-col span="24">
          <Tabs type="card">
            <TabPane label="首页">
              <div class="page-view">
                <router-view></router-view>
              </div>
            </TabPane>
          </Tabs>
        </i-col>
      </Row>
    </div>
    <Drawer :closable="false" placement="left" v-model="menu" class="main-menu">
        <Menu theme="dark" active-name="1-2" :open-names="['1']" width="auto" style="height:100vh">
          <Submenu name="1">
            <template slot="title">
                <Icon type="ios-paper" />
                内容管理
            </template>
            <MenuItem name="1-1">文章管理</MenuItem>
            <MenuItem name="1-2">评论管理</MenuItem>
            <MenuItem name="1-3">举报管理</MenuItem>
          </Submenu>
          <Submenu name="2">
              <template slot="title">
                  <Icon type="ios-people" />
                  用户管理
              </template>
              <MenuItem name="2-1">新增用户</MenuItem>
              <MenuItem name="2-2">活跃用户</MenuItem>
          </Submenu>
          <Submenu name="3">
              <template slot="title">
                  <Icon type="ios-stats" />
                  统计分析
              </template>
              <MenuGroup title="使用">
                  <MenuItem name="3-1">新增和启动</MenuItem>
                  <MenuItem name="3-2">活跃分析</MenuItem>
                  <MenuItem name="3-3">时段分析</MenuItem>
              </MenuGroup>
              <MenuGroup title="留存">
                  <MenuItem name="3-4">用户留存</MenuItem>
                  <MenuItem name="3-5">流失用户</MenuItem>
              </MenuGroup>
          </Submenu>
        </Menu>
    </Drawer>
  </div>
</template>

<script>
import HeaderDecorateLeft from './components/HeaderDecorateLeft'
import HeaderDecorateRight from './components/HeaderDecorateRight'
import HTabPane from './components/HTabPane'
export default {
  name: 'app',
  components: {
    HeaderDecorateLeft,
    HeaderDecorateRight,
    HTabPane
  },
  data() {
    return {
      menu: false
    }
  }
}
</script>
<style scoped>
  .menu-btn {
    font-size: 20px;
    line-height: 40px;
    margin-left: 16px;
    color: #CCCCCC;
  }
  .menu-btn:hover {
    color: #FFFFFF;
    cursor: pointer;
  }
  .science-content {
    margin-top: 16px;
  }
  .page-view {
    height: calc(100vh - 115px);
    overflow-y: auto;
  }
</style>

 src/assets/css/common.css

New file
@@ -0,0 +1,213 @@
/* 滚动条整体样式 */
::-webkit-scrollbar {
    width:8px;
    height: 8px;
    background-color: rgba(255,255,255,.1);
}
::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/
    background: rgba(0, 0, 0, .30);
    border-radius: 50px;
}
body.science-page {
    background-image: url("../images/bg.gif");
    background-size: cover;
    font-size: 14px;
    color: #FFFFFF;
}
.science-header {
    height: 50px;
    background-color: none;
}


/* science-card */
.science-card {
    position: relative;
}
.science-card .science-card-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #1D2D4F;
    opacity: .6;
    z-index: -1;
}

/* parallel-quadrangle */
.parallel-quadrangle {
    transform: skew(45deg);
}

/* blade-card */
.blade-card {
    position: relative;
}
.blade-card .blade-card-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(81, 139, 255, .6);
    z-index: -1; 
}
.blade-card .blade-card-mask-after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent;
    border-top-color: rgb(81, 139, 255, .6);
    border-left-color: rgb(81, 139, 255, .6);
    z-index: -1;
}

.blade-card .blade-card-mask-before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent;
    border-top-color: rgb(81, 139, 255, .6);
    border-right-color: rgb(81, 139, 255, .6);
    z-index: 0;
}
/* science-panel */
.science-panel {
    position: relative;
    border: 1px solid #387391;
}
.science-panel .science-panel-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #182B4A;
    opacity: .6;
    z-index: -1;
}
.science-panel .science-panel-content {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

/* science-block */
.science-block {
    position: relative;
}
.science-block .science-block-v {
    position: absolute;

}
.science-block .science-block-top-left {
    top: 0;
    left:0;
    width: 20px;
    height: 20px;
    border-top: 2px solid #2E6F96;
    border-left: 2px solid #2E6F96;
}
.science-block .science-block-top-left-tip {
    top: 0;
    left:0;
    width: 0;
    height: 0;
    border-width: 7px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #2E6F96;
    border-left-color: #2E6F96;
}
.science-block .science-block-top-right {
    top: 0;
    right:0;
    width: 10px;
    height: 10px;
    border-top: 1px solid #2E6F96;
    border-right: 1px solid #2E6F96;
}
.science-block .science-block-bottom-left {
    bottom: 0;
    left:0;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid #2E6F96;
    border-left: 1px solid #2E6F96;
}
.science-block .science-block-bottom-right {
    bottom: 0;
    right:0;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid #2E6F96;
    border-right: 2px solid #2E6F96;
}
.science-block .science-block-bottom-right-tip {
    bottom: 0;
    right:0;
    width: 0;
    height: 0;
    border-width: 7px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #2E6F96;
    border-right-color: #2E6F96;
}
.science-block .science-block-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #1C2C4E;
    opacity: .6;
    z-index: -1;
}

.science-block .science-block-content {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}
.science-block .science-block-content .science-block-content-inner {
    padding: 16px;
}
/* iview style */
.science-page .ivu-select {
    color: #FFFFFF;
}
.science-page .ivu-select-selection {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #1495E7;
}
.science-page .ivu-select-input {
    color: #FFFFFF;
}
.science-page .ivu-select-arrow {
    color: #FFFFFF;
}
.science-page .ivu-tree-title {
    color: #FFFFFF;
}
.science-page .ivu-tree-title.ivu-tree-title-selected {
    color: #000000;
}
.science-page .ivu-tree-title:hover {
    color: #1495E7;
}
.main-menu .ivu-drawer-body {
    padding: 0 !important;
}
.view-root {
    padding:0 8px;
}

 src/assets/images/bg.gif


 src/assets/logo.png


 src/components/HTabPane.vue

New file
@@ -0,0 +1,21 @@
<template>
    <TabPane :label="label">
        <div class="page-view">
            <router-view :name="name"></router-view>
        </div>
    </TabPane>
</template>
<script>
export default {
    props:{
        label:{
            type: String,
            required: true
        },
        name: {
            type: String,
            required: true
        }
    }
}
</script>

 src/components/HeaderDecorateLeft.vue

New file
@@ -0,0 +1,34 @@
<template>
    <Row :gutter="10">
        <i-col span="5">
            <parallel-quadrangle 
            width="100%" 
            height="10px"></parallel-quadrangle>
        </i-col>
        <i-col span="5">
            <parallel-quadrangle 
            width="100%" 
            height="10px"></parallel-quadrangle>
        </i-col>
        <i-col span="8">
            <parallel-quadrangle 
            width="100%" 
            height="5px"
            bgcolor="#FFA773"></parallel-quadrangle>
        </i-col>
        <i-col span="6">
            <parallel-quadrangle 
            width="100%" 
            height="5px"
            bgcolor="#228ADE"></parallel-quadrangle>
        </i-col>
    </Row>
</template>
<script>
import ParallelQuadrangle from './ParallelQuadrangle'
export default {
    components:{
        ParallelQuadrangle
    }
}
</script>

 src/components/HeaderDecorateRight.vue

New file
@@ -0,0 +1,34 @@
<template>
    <Row :gutter="10">
        <i-col span="6">
            <parallel-quadrangle 
            width="100%" 
            height="5px"
            bgcolor="#228ADE"></parallel-quadrangle>
        </i-col>
        <i-col span="8">
            <parallel-quadrangle 
            width="100%" 
            height="5px"
            bgcolor="#BD5B5C"></parallel-quadrangle>
        </i-col>
        <i-col span="5">
            <parallel-quadrangle 
            width="100%" 
            height="10px"></parallel-quadrangle>
        </i-col>
        <i-col span="5">
            <parallel-quadrangle 
            width="100%" 
            height="10px"></parallel-quadrangle>
        </i-col>
    </Row>
</template>
<script>
import ParallelQuadrangle from './ParallelQuadrangle'
export default {
    components:{
        ParallelQuadrangle
    }
}
</script>

 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/ParallelQuadrangle.vue

New file
@@ -0,0 +1,30 @@
<template>
    <div class="parallel-quadrangle" :style="styles"></div>
</template>
<script>
export default {
    props:{
        width: {
            type: String,
            default:'20px'
        },
        height: {
            type: String,
            default:'20px'
        },
        bgcolor: {
            type: String,
            default: '#73D8FE'
        }
    },
    data() {
        return{
            styles: {
                width: this.width,
                height: this.height,
                backgroundColor: this.bgcolor
            }
        }
    }
}
</script>

 src/libs/util.js

New file
@@ -0,0 +1,6 @@
let util = {};
util.title = function(title) {
    title = title?title:"蓄电池监控平台";
    window.document.title = title;
};
export default util;

 src/main.js

New file
@@ -0,0 +1,38 @@
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routers from './router'
import iView from 'iview'
import Util from './libs/util'
import 'iview/dist/styles/iview.css'
import './assets/css/common.css';

Vue.config.productionTip = false;

Vue.use(VueRouter);
Vue.use(iView);

const RouteConfig = {
  mode: 'hash',
  routes: Routers
};

const router = new VueRouter(RouteConfig);

// 进入路由页面前
router.beforeEach((to, from, next)=>{
  iView.LoadingBar.start();
  Util.title(to.meta.title);
  next();
})

// 进入路由页面后
router.afterEach((to, from, next)=>{
  iView.LoadingBar.finish();
  window.scrollTo(0, 0);
});

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

 src/router.js

New file
@@ -0,0 +1,13 @@
const routers = [
    {
        path: '',
        meta: {
            title: ''
        },
        components: {
            default: (resolve)=>require(['./views/index.vue'], resolve)
        }
    }
];

export default routers;

 src/views/index.vue

New file
@@ -0,0 +1,10 @@
<template>
    <div class="view-root">
        <h1>首页</h1>
    </div>
</template>
<script>
export default {
    
}
</script>

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/app'
			]
			}

New file
			@@ -0,0 +1,48 @@
			{
			"name": "ld9",
			"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": "^2.6.5",
			"iview": "^3.4.2",
			"vue": "^2.6.10",
			"vue-router": "^3.0.7"
			},
			"devDependencies": {
			"@vue/cli-plugin-babel": "^3.9.0",
			"@vue/cli-plugin-eslint": "^3.9.0",
			"@vue/cli-service": "^3.9.0",
			"babel-eslint": "^10.0.1",
			"eslint": "^5.16.0",
			"eslint-plugin-vue": "^5.0.0",
			"vue-template-compiler": "^2.6.10"
			},
			"eslintConfig": {
			"root": true,
			"env": {
			"node": true
			},
			"extends": [
			"plugin:vue/essential",
			"eslint:recommended"
			],
			"rules": {},
			"parserOptions": {
			"parser": "babel-eslint"
			}
			},
			"postcss": {
			"plugins": {
			"autoprefixer": {}
			}
			},
			"browserslist": [
			"> 1%",
			"last 2 versions"
			]
			}

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>ld9</title>
			</head>
			<body class="science-page">
			<noscript>
			<strong>We're sorry but ld9 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,126 @@
			<template>
			<div id="app">
			<div class="science-header">
			<Row>
			<i-col span="6">
			<div class="blade-card" style="height: 40px;">
			<div class="blade-card-mask" style="left:0; right: 40px;"></div>
			<div class="blade-card-mask-after"></div>
			<div class="blade-card-content">
			<Tooltip content="菜单">
			<div class="menu-btn" @click="menu = true">
			<Icon type="md-menu" />
			</div>
			</Tooltip>
			</div>
			</div>
			</i-col>
			<i-col span="12">
			<div style="text-align: center; line-height: 40px;font-size: 20px;font-weight: bold; color: #73D8FE">蓄电池监控平台</div>
			</i-col>
			<i-col span="6">
			<div class="blade-card" style="height: 40px;">
			<div class="blade-card-mask" style="left:40px; right: 0;"></div>
			<div class="blade-card-mask-before"></div>
			<div class="blade-card-content"></div>
			</div>
			</i-col>
			</Row>
			<Row style="margin-top: 8px;">
			<i-col offset="1" span="4">
			<header-decorate-left></header-decorate-left>
			</i-col>
			<i-col offset="14" span="4" >
			<header-decorate-right></header-decorate-right>
			</i-col>
			</Row>
			</div>
			<div class="science-content">
			<Row>
			<i-col span="24">
			<Tabs type="card">
			<TabPane label="首页">
			<div class="page-view">
			<router-view></router-view>
			</div>
			</TabPane>
			</Tabs>
			</i-col>
			</Row>
			</div>
			<Drawer :closable="false" placement="left" v-model="menu" class="main-menu">
			<Menu theme="dark" active-name="1-2" :open-names="['1']" width="auto" style="height:100vh">
			<Submenu name="1">
			<template slot="title">
			<Icon type="ios-paper" />
			内容管理
			</template>
			<MenuItem name="1-1">文章管理</MenuItem>
			<MenuItem name="1-2">评论管理</MenuItem>
			<MenuItem name="1-3">举报管理</MenuItem>
			</Submenu>
			<Submenu name="2">
			<template slot="title">
			<Icon type="ios-people" />
			用户管理
			</template>
			<MenuItem name="2-1">新增用户</MenuItem>
			<MenuItem name="2-2">活跃用户</MenuItem>
			</Submenu>
			<Submenu name="3">
			<template slot="title">
			<Icon type="ios-stats" />
			统计分析
			</template>
			<MenuGroup title="使用">
			<MenuItem name="3-1">新增和启动</MenuItem>
			<MenuItem name="3-2">活跃分析</MenuItem>
			<MenuItem name="3-3">时段分析</MenuItem>
			</MenuGroup>
			<MenuGroup title="留存">
			<MenuItem name="3-4">用户留存</MenuItem>
			<MenuItem name="3-5">流失用户</MenuItem>
			</MenuGroup>
			</Submenu>
			</Menu>
			</Drawer>
			</div>
			</template>

			<script>
			import HeaderDecorateLeft from './components/HeaderDecorateLeft'
			import HeaderDecorateRight from './components/HeaderDecorateRight'
			import HTabPane from './components/HTabPane'
			export default {
			name: 'app',
			components: {
			HeaderDecorateLeft,
			HeaderDecorateRight,
			HTabPane
			},
			data() {
			return {
			menu: false
			}
			}
			}
			</script>
			<style scoped>
			.menu-btn {
			font-size: 20px;
			line-height: 40px;
			margin-left: 16px;
			color: #CCCCCC;
			}
			.menu-btn:hover {
			color: #FFFFFF;
			cursor: pointer;
			}
			.science-content {
			margin-top: 16px;
			}
			.page-view {
			height: calc(100vh - 115px);
			overflow-y: auto;
			}
			</style>

New file
			@@ -0,0 +1,213 @@
			/* 滚动条整体样式 */
			::-webkit-scrollbar {
			width:8px;
			height: 8px;
			background-color: rgba(255,255,255,.1);
			}
			::-webkit-scrollbar-thumb{/滚动条里面的小方块/
			background: rgba(0, 0, 0, .30);
			border-radius: 50px;
			}
			body.science-page {
			background-image: url("../images/bg.gif");
			background-size: cover;
			font-size: 14px;
			color: #FFFFFF;
			}
			.science-header {
			height: 50px;
			background-color: none;
			}


			/* science-card */
			.science-card {
			position: relative;
			}
			.science-card .science-card-mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: #1D2D4F;
			opacity: .6;
			z-index: -1;
			}

			/* parallel-quadrangle */
			.parallel-quadrangle {
			transform: skew(45deg);
			}

			/* blade-card */
			.blade-card {
			position: relative;
			}
			.blade-card .blade-card-mask {
			position: absolute;
			top: 0;
			bottom: 0;
			background: rgb(81, 139, 255, .6);
			z-index: -1;
			}
			.blade-card .blade-card-mask-after {
			position: absolute;
			top: 0;
			right: 0;
			content: "";
			width: 0;
			height: 0;
			border-width: 20px;
			border-style: solid;
			border-color: transparent;
			border-top-color: rgb(81, 139, 255, .6);
			border-left-color: rgb(81, 139, 255, .6);
			z-index: -1;
			}

			.blade-card .blade-card-mask-before {
			position: absolute;
			top: 0;
			left: 0;
			content: "";
			width: 0;
			height: 0;
			border-width: 20px;
			border-style: solid;
			border-color: transparent;
			border-top-color: rgb(81, 139, 255, .6);
			border-right-color: rgb(81, 139, 255, .6);
			z-index: 0;
			}
			/* science-panel */
			.science-panel {
			position: relative;
			border: 1px solid #387391;
			}
			.science-panel .science-panel-mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: #182B4A;
			opacity: .6;
			z-index: -1;
			}
			.science-panel .science-panel-content {
			width: 100%;
			max-height: 100%;
			overflow-y: auto;
			}

			/* science-block */
			.science-block {
			position: relative;
			}
			.science-block .science-block-v {
			position: absolute;

			}
			.science-block .science-block-top-left {
			top: 0;
			left:0;
			width: 20px;
			height: 20px;
			border-top: 2px solid #2E6F96;
			border-left: 2px solid #2E6F96;
			}
			.science-block .science-block-top-left-tip {
			top: 0;
			left:0;
			width: 0;
			height: 0;
			border-width: 7px;
			border-style: solid;
			border-color: transparent;
			border-top-color: #2E6F96;
			border-left-color: #2E6F96;
			}
			.science-block .science-block-top-right {
			top: 0;
			right:0;
			width: 10px;
			height: 10px;
			border-top: 1px solid #2E6F96;
			border-right: 1px solid #2E6F96;
			}
			.science-block .science-block-bottom-left {
			bottom: 0;
			left:0;
			width: 10px;
			height: 10px;
			border-bottom: 1px solid #2E6F96;
			border-left: 1px solid #2E6F96;
			}
			.science-block .science-block-bottom-right {
			bottom: 0;
			right:0;
			width: 20px;
			height: 20px;
			border-bottom: 2px solid #2E6F96;
			border-right: 2px solid #2E6F96;
			}
			.science-block .science-block-bottom-right-tip {
			bottom: 0;
			right:0;
			width: 0;
			height: 0;
			border-width: 7px;
			border-style: solid;
			border-color: transparent;
			border-bottom-color: #2E6F96;
			border-right-color: #2E6F96;
			}
			.science-block .science-block-mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: #1C2C4E;
			opacity: .6;
			z-index: -1;
			}

			.science-block .science-block-content {
			width: 100%;
			max-height: 100%;
			overflow-y: auto;
			}
			.science-block .science-block-content .science-block-content-inner {
			padding: 16px;
			}
			/* iview style */
			.science-page .ivu-select {
			color: #FFFFFF;
			}
			.science-page .ivu-select-selection {
			background-color: rgba(0, 0, 0, 0);
			border: 1px solid #1495E7;
			}
			.science-page .ivu-select-input {
			color: #FFFFFF;
			}
			.science-page .ivu-select-arrow {
			color: #FFFFFF;
			}
			.science-page .ivu-tree-title {
			color: #FFFFFF;
			}
			.science-page .ivu-tree-title.ivu-tree-title-selected {
			color: #000000;
			}
			.science-page .ivu-tree-title:hover {
			color: #1495E7;
			}
			.main-menu .ivu-drawer-body {
			padding: 0 !important;
			}
			.view-root {
			padding:0 8px;
			}

New file
			@@ -0,0 +1,34 @@
			<template>
			<Row :gutter="10">
			<i-col span="5">
			<parallel-quadrangle
			width="100%"
			height="10px"></parallel-quadrangle>
			</i-col>
			<i-col span="5">
			<parallel-quadrangle
			width="100%"
			height="10px"></parallel-quadrangle>
			</i-col>
			<i-col span="8">
			<parallel-quadrangle
			width="100%"
			height="5px"
			bgcolor="#FFA773"></parallel-quadrangle>
			</i-col>
			<i-col span="6">
			<parallel-quadrangle
			width="100%"
			height="5px"
			bgcolor="#228ADE"></parallel-quadrangle>
			</i-col>
			</Row>
			</template>
			<script>
			import ParallelQuadrangle from './ParallelQuadrangle'
			export default {
			components:{
			ParallelQuadrangle
			}
			}
			</script>

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,30 @@
			<template>
			<div class="parallel-quadrangle" :style="styles"></div>
			</template>
			<script>
			export default {
			props:{
			width: {
			type: String,
			default:'20px'
			},
			height: {
			type: String,
			default:'20px'
			},
			bgcolor: {
			type: String,
			default: '#73D8FE'
			}
			},
			data() {
			return{
			styles: {
			width: this.width,
			height: this.height,
			backgroundColor: this.bgcolor
			}
			}
			}
			}
			</script>

New file
			@@ -0,0 +1,6 @@
			let util = {};
			util.title = function(title) {
			title = title?title:"蓄电池监控平台";
			window.document.title = title;
			};
			export default util;

New file
			@@ -0,0 +1,38 @@
			import Vue from 'vue'
			import App from './App.vue'
			import VueRouter from 'vue-router'
			import Routers from './router'
			import iView from 'iview'
			import Util from './libs/util'
			import 'iview/dist/styles/iview.css'
			import './assets/css/common.css';

			Vue.config.productionTip = false;

			Vue.use(VueRouter);
			Vue.use(iView);

			const RouteConfig = {
			mode: 'hash',
			routes: Routers
			};

			const router = new VueRouter(RouteConfig);

			// 进入路由页面前
			router.beforeEach((to, from, next)=>{
			iView.LoadingBar.start();
			Util.title(to.meta.title);
			next();
			})

			// 进入路由页面后
			router.afterEach((to, from, next)=>{
			iView.LoadingBar.finish();
			window.scrollTo(0, 0);
			});

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

New file
			@@ -0,0 +1,13 @@
			const routers = [
			{
			path: '',
			meta: {
			title: ''
			},
			components: {
			default: (resolve)=>require(['./views/index.vue'], resolve)
			}
			}
			];

			export default routers;

New file
			@@ -0,0 +1,10 @@
			<template>
			<div class="view-root">
			<h1>首页</h1>
			</div>
			</template>
			<script>
			export default {

			}
			</script>