Browse Source

路由页面初始化

zhulizhen1111 4 years ago
parent
commit
90da925896

+ 12 - 15
.eslintrc.js

@@ -1,17 +1,14 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/essential',
-    'eslint:recommended'
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
+    root: true,
+    env: {
+        node: true
+    },
+    extends: ["plugin:vue/essential", "eslint:recommended"],
+    rules: {
+        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    },
+    parserOptions: {
+        parser: "babel-eslint"
+    }
 }

+ 40 - 40
src/App.vue

@@ -1,7 +1,7 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+    <div id='app'>
+        <router-view />
+    </div>
 </template>
 
 <style lang="less">
@@ -30,8 +30,8 @@ input,
 textarea,
 th,
 td {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 body,
@@ -39,7 +39,7 @@ button,
 input,
 select,
 textarea {
-  font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
+    font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
 }
 
 h1,
@@ -48,7 +48,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-size: 100%;
+    font-size: 100%;
 }
 
 address,
@@ -58,93 +58,93 @@ var,
 em,
 i,
 u {
-  font-style: normal;
+    font-style: normal;
 }
 
 ol,
 ul {
-  list-style: none;
+    list-style: none;
 }
 
 a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 a:hover {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 img {
-  border: none;
-  vertical-align: middle;
+    border: none;
+    vertical-align: middle;
 }
 
 :focus {
-  outline: 0;
+    outline: 0;
 }
 
 button,
 input,
 select,
 textarea {
-  font-size: 100%;
+    font-size: 100%;
 }
 
 table {
-  border-collapse: collapse;
-  border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 /* 滚动条样式 */
 
 body ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+    width: 5px;
+    height: 5px;
 }
 
 body ::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0);
-  border-radius: 3px;
+    background-color: rgba(0, 0, 0, 0);
+    border-radius: 3px;
 }
 
 body ::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: #e6e6e6;
-  border: 1px solid #e6e6e6;
+    border-radius: 3px;
+    background: #e6e6e6;
+    border: 1px solid #e6e6e6;
 }
 
 body ::-webkit-scrollbar-thumb:vertical:hover {
-  background: #e6e6e6;
-  border: 1px solid #e6e6e6;
+    background: #e6e6e6;
+    border: 1px solid #e6e6e6;
 }
 
 .clearfix::after {
-  content: '.';
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
+    content: '.';
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
 }
 .clearfix {
-  zoom: 1;
+    zoom: 1;
 }
 
 .left {
-  float: left;
+    float: left;
 }
 
 .right {
-  float: right;
+    float: right;
 }
 html,
 body {
-  width: 100%;
-  height: 100%;
-  // min-width: 1920px;
-  background: url('./assets/images/back.jpg') no-repeat;
+    width: 100%;
+    height: 100%;
+    // min-width: 1920px;
+    //   background: url('./assets/images/back.jpg') no-repeat;
 }
 #app {
-  height: 100%;
-  width: 100%;
+    height: 100%;
+    width: 100%;
 }
 </style>

File diff suppressed because it is too large
+ 18 - 0
src/assets/imgs/clock.svg


File diff suppressed because it is too large
+ 16 - 0
src/assets/imgs/drafts.svg


File diff suppressed because it is too large
+ 17 - 0
src/assets/imgs/favorites.svg


File diff suppressed because it is too large
+ 19 - 0
src/assets/imgs/file.svg


File diff suppressed because it is too large
+ 30 - 0
src/assets/imgs/open.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/place.svg


+ 101 - 73
src/components/menuList.vue

@@ -1,88 +1,116 @@
 <template>
-  <div class="menu">
-    <div class="home" @click="$emit('update:modelNum', 0)"></div>
-    <div>
-      <div
-        v-for="(item, index) in list"
-        :key="index"
-        :class="{ 'is-active': item.state }"
-        @click="clickEventAcitve(item, index)"
-      >{{ item.name }}</div>
+    <div class='menu'>
+        <div class='home' @click='$emit("update:modelNum", 0)'>福建三明万达广场</div>
+        <div>
+            <div
+                v-for='(item, index) in list'
+                :key='index'
+                :class='{ "is-active": item.state }'
+                @click='clickEventAcitve(item, index)'
+            >{{ item.name }}</div>
+        </div>
+        <div class='home-right'>
+            <img class='img1' src='../assets/imgs/favorites.svg' alt />
+            <img class='img2' src='../assets/imgs/file.svg' alt />
+            <img class='img3' src='../assets/imgs/clock.svg' alt />
+            <span>{{times}}</span>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
+import { formatTime } from '@/utils/format.js'
 export default {
-  props: ["modelNum"],
-  data() {
-    return {
-      list: [
-        { name: "项目概况", state: false, route: "overview" },
-        { name: "楼层功能", state: false, route: "floorFunc" }, //楼层功能
-        { name: "设备设施", state: false, route: "equipment" }, //设备设施
-        { name: "其他事项", state: false, route: "other" } //其他
-      ]
-    };
-  },
-  computed: {},
-  created() {},
-  mounted() {},
-  watch: {
-    modelNum(val) {
-      this.list = this.list.map((item, index) => {
-        if (val == index + 1) {
-          item.state = true;
-        } else {
-          item.state = false;
+    props: ['modelNum'],
+    data() {
+        return {
+            list: [
+                { name: '首页', state: false, route: 'first' },
+                { name: '项目概况', state: false, route: 'overview' },
+                { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
+                { name: '设备设施', state: false, route: 'equipment' }, //设备设施
+                { name: '其他事项', state: false, route: 'other' }, //其他
+                { name: '分析 | 报表', state: false, route: 'analysis' }
+            ],
+            times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
+                new Date().getHours()
+            )}:${formatTime(new Date().getMinutes())}`
         }
-        return item;
-      });
-    }
-  },
-  methods: {
-    clickEventAcitve(item) {
-      this.list.forEach(ele => {
-        ele.state = false;
-      });
-      item.state = true;
-      this.$router.push({ path: `/home/${item.route}` });
-    }
-  },
-  components: {}
-};
+    },
+    computed: {},
+    created() {},
+    mounted() {},
+    watch: {
+        modelNum(val) {
+            this.list = this.list.map((item, index) => {
+                if (val == index + 1) {
+                    item.state = true
+                } else {
+                    item.state = false
+                }
+                return item
+            })
+        }
+    },
+    methods: {
+        clickEventAcitve(item) {
+            this.list.forEach(ele => {
+                ele.state = false
+            })
+            item.state = true
+            this.$router.push({ path: `/home/${item.route}` })
+        }
+    },
+    components: {}
+}
 </script>
 
 <style scoped lang="less">
 .menu {
-  height: 42px;
-  padding-top: 33px;
-  padding-left: 500px;
-  color: #fff;
-  font-size: 16px;
-  position: relative;
-  .home {
-    width: 430px;
-    height: 75px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    cursor: pointer;
-  }
-  & > div:nth-of-type(2) {
-    & > div {
-      line-height: 42px;
-      text-align: center;
-      background: url("../assets/images/topbar1.png") no-repeat;
-      float: left;
-      width: 132px;
-      height: 42px;
-      cursor: pointer;
-      transition: all 0.2s;
+    min-width: 1366px;
+    height: 48px;
+    color: #1f2429;
+    font-size: 16px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
+    .home {
+        width: 430px;
+        height: 48px;
+        font-size: 20px;
+        line-height: 48px;
+        text-align: center;
+        cursor: pointer;
+        color: #ffffff;
+        float: left;
+        margin-right: 83px;
+        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
     }
-    .is-active {
-      background: url("../assets/images/topbar2.png") no-repeat;
+    & > div:nth-of-type(2) {
+        & > div {
+            line-height: 48px;
+            text-align: center;
+            //background: url('../assets/images/topbar1.png') no-repeat;
+            float: left;
+            width: 88px;
+            height: 48px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .is-active {
+            // background: url('../assets/images/topbar2.png') no-repeat;
+            color: #025baa;
+            background: linear-gradient(180deg, rgba(2, 91, 170, 1) 0%, rgba(2, 91, 170, 0) 100%);
+        }
+    }
+    .home-right {
+        float: right;
+        margin-right: 20px;
+        line-height: 48px;
+        color: #646c73;
+        font-size: 14px;
+        img {
+            margin-right: 16px;
+        }
     }
-  }
 }
 </style>

+ 29 - 25
src/router/index.js

@@ -1,55 +1,59 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import Vue from "vue"
+import VueRouter from "vue-router"
 
 Vue.use(VueRouter)
 
 const routes = [
     // 登陆页面
     {
-        path: '/',
-        name: 'login',
-        component: () =>
-            import('../views/login')
+        path: "/",
+        name: "login",
+        component: () => import("../views/login")
     },
     // home
     {
-        path: '/home',
-        name: 'home',
-        component: () =>
-            import('../views/index'),
+        path: "/home",
+        name: "home",
+        component: () => import("../views/index"),
         children: [
+            //手语舞
+            {
+                path: "first",
+                component: () => import("../views/first")
+            },
             //概览
             {
-                path: 'overview',
-                component: () =>
-                    import('../views/overview')
+                path: "overview",
+                component: () => import("../views/overview")
             },
             // 楼层功能
             {
-                path: 'floorFunc',
-                component: () =>
-                    import('../views/floorFunc')
+                path: "floorFunc",
+                component: () => import("../views/floorFunc")
             },
             // 设备设施
             {
-                path: 'equipment',
-                component: () =>
-                    import('../views/equipment')
+                path: "equipment",
+                component: () => import("../views/equipment")
             },
             // 其他功能
             {
-                path: 'other',
-                component: () =>
-                    import('../views/other')
+                path: "other",
+                component: () => import("../views/other")
             },
+            // 分析
+            {
+                path: "analysis",
+                component: () => import("../views/analysis")
+            }
         ]
-    },
+    }
 ]
 
 const router = new VueRouter({
-    mode: 'history',
+    mode: "history",
     base: process.env.BASE_URL,
     routes
 })
 
-export default router
+export default router

+ 6 - 0
src/utils/format.js

@@ -0,0 +1,6 @@
+const formatTime = (time) => {
+    return time > 10 ? time : "0" + time
+}
+module.exports = {
+    formatTime,
+}

+ 10 - 0
src/views/analysis/index.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>fenxi</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

+ 1 - 2
src/views/equipment/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div id="equipment">设备设施</div>
+    <div id='equipment'>设备设施</div>
 </template>
 <style lang="less">
 #equipment {
-  color: #fff;
 }
 </style>

+ 13 - 0
src/views/first/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class='first-demo'>首页</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+.first-demo {
+    background: rgba(242, 245, 247);
+}
+</style>

+ 1 - 2
src/views/floorFunc/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div id="floorFunc">楼层功能</div>
+    <div id='floorFunc'>楼层功能</div>
 </template>
 <style lang="less">
 #floorFunc {
-  color: #fff;
 }
 </style>

+ 1 - 2
src/views/other/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div id="other_thing">其他事项</div>
+    <div id='other_thing'>其他事项</div>
 </template>
 <style lang="less">
 #other_thing {
-  color: #fff;
 }
 </style>

+ 7 - 4
src/views/overview/index.vue

@@ -1,10 +1,13 @@
 <template>
-    <div id="overview">
-        项目概况
+    <div id='overview'>
+        <p>项目基本参数</p>
     </div>
 </template>
 <style lang="less">
-    #overview{
-        color: #fff
+#overview {
+    color: #1f2429;
+    p {
+        font-size: 16px;
     }
+}
 </style>