添加页面（使用图片）

src/components/header.vue

@@ -65,27 +65,30 @@ export default {
         },
         {
           index: "5",
-          title: "综合管理"
+          title: "综合管理",
+          path: "/05"
         }
       ],
       menuList1: [
         {
           index: "6",
           title: "财务",
-          path: "/"
+          path: "/06"
         },
         {
           index: "7",
           title: "人力资源",
-          path: "/cult"
+          path: "/07"
         },
         {
           index: "8",
-          title: "活动管理"
+          title: "活动管理",
+          path: "/08"
         },
         {
           index: "9",
-          title: "智能设备"
+          title: "智能设备",
+          path: "/09"
         }
       ]
     };
@@ -140,6 +143,7 @@ export default {
       };
     },
     jumpPage(item) {
+      console.log("index", item.index, this.headerObj.index);
       if (item.index != this.headerObj.index) {
         this.headerObj.index = item.index
         this.$router.push({ path: item.path });

src/pages/elder/home.vue

@@ -21,12 +21,12 @@
           </div>
         </div>
         <div class="box_content echart5">
-          <div v-for="(item,index) in echartObj5.title">
+          <div v-for="(item,index) in echartObj5.title" :key="index">
             <div style="flex-shrink: 0;margin-left: 10px;width: 30%;">{{item}}</div>
             <div style="width: 5%;height: 1px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);"></div>
             <div style="display: flex;justify-content: center;align-items: center;width: 100%;">
               <div :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;height: 1px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);flex: 1;margin-right: 10px;'"></div>
-              <div :style="'width: '+ echartObj5.data[index]/echartObj5Max*100 + '%;height: 20px;border-radius: 2px;text-align: center;' + 'background:' + echartObj5.colors[index]">
+              <div :style="'width: '+ echartObj5.data[index]/echartObj5Max*100 + '%;min-width: 15%;height: 20px;border-radius: 2px;text-align: center;' + 'background:' + echartObj5.colors[index]">
                 <span style="font-size: 14px; font-weight: bold">{{echartObj5.data[index]}}</span>
               </div>
               <div :style="'width:' + (100 - (echartObj5.data[index]/echartObj5Max*100)) / 2 + '%;height: 1px;border-bottom: 1px dashed rgba(230, 247, 255, 0.5);flex: 1;margin-left: 10px;'"></div>
@@ -1416,16 +1416,14 @@ export default {
     }
   }
   .echart5{
+    padding: 1rem 0;
     > div{
       font-size: 1rem;
       color: #FFFFFF;
       width: 100%;
       display: flex;
       align-items: center;
-      margin-bottom: 0.8rem;
+      justify-content: space-around;
-      &:last-child{
-        margin: 0;
-      }
     }
   }
 }

src/pages/live/index.vue

@@ -3,7 +3,7 @@
     <!--    <userStatus />-->
     <!-- <h1>首页</h1> -->
     <!--    <img class="h1" src="../../assets/img/h1.png" />-->
-    <Header :headerObj="{title:'深圳颐居养老大数据分析平台', index: '3'}"/>
+    <Header :headerObj="{title:'深圳颐居养老大数据分析平台', index: '4'}"/>
     <home></home>
     <!--    <Nav />-->
     <!--    <img class="b" src="../../assets/img/1.png" alt="" />-->

src/pages/marketing/home.vue

@@ -116,7 +116,7 @@
         </div>
       </div>
     </div>
-    <div class="home_center">
+    <div class="home_center" v-if="0">
       <!--数据概况-->
       <div class="inner_box">
         <div class="inner_header">
@@ -273,8 +273,10 @@
         </div>
       </div>
     </div>
-    <div class="home_right">
+    <div class="home_right" v-if="0">
     </div>
+
+    <img src="@/assets/img/page2/02营销.png" alt="" style="width: 74%;height: calc(100vh - 5vw);margin-left: 1%;">
   </div>
 </template>
 

src/pages/page/05.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="main">
+    <Header :headerObj="{title:'深圳颐居养老大数据分析平台', index: '5'}"/>
+    <img src="@/assets/img/page2/05综合管理.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
+  </div>
+</template>
+<script>
+import Header from '@/components/header'
+
+export default {
+  name: "index",
+  data: function () {
+    return {
+      param: {
+        startYear: "",
+        endYear: "",
+      },
+    };
+  },
+  created() {
+    this.param = {
+      startYear: "",
+      endYear: "",
+    };
+    // this.init();
+  },
+  components: {
+    Header,
+  },
+  methods: {
+     init() {
+      this.getData();
+    },
+    getData() {
+      Index(this.param).then((res) => {
+        console.log(res);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.main {
+  height: 100%;
+  background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  /deep/ .modal,
+  /deep/ .el-icon-close {
+    display: none;
+  }
+  h1 {
+    font-size: 50px;
+    font-weight: 600;
+    padding-top: 50px;
+    text-align: center;
+    -webkit-line-clamp: 2;
+    background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .h1 {
+    position: absolute;
+    left: 50%;
+    margin-left: -509px;
+  }
+  //.b {
+  //  position: absolute;
+  //  bottom: 0;
+  //  width: 100%;
+  //  // animation:turn 10s linear infinite;
+  //}
+  @keyframes turn {
+    0% {
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+    }
+  }
+}
+</style>

src/pages/page/06.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="main">
+    <Header :headerObj="{title:'深圳颐居养老大数据分析平台', index: '6'}"/>
+    <img src="@/assets/img/page2/06财务.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
+  </div>
+</template>
+<script>
+import Header from '@/components/header'
+
+export default {
+  name: "index",
+  data: function () {
+    return {
+      param: {
+        startYear: "",
+        endYear: "",
+      },
+    };
+  },
+  created() {
+    this.param = {
+      startYear: "",
+      endYear: "",
+    };
+    // this.init();
+  },
+  components: {
+    Header,
+  },
+  methods: {
+     init() {
+      this.getData();
+    },
+    getData() {
+      Index(this.param).then((res) => {
+        console.log(res);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.main {
+  height: 100%;
+  background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  /deep/ .modal,
+  /deep/ .el-icon-close {
+    display: none;
+  }
+  h1 {
+    font-size: 50px;
+    font-weight: 600;
+    padding-top: 50px;
+    text-align: center;
+    -webkit-line-clamp: 2;
+    background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .h1 {
+    position: absolute;
+    left: 50%;
+    margin-left: -509px;
+  }
+  //.b {
+  //  position: absolute;
+  //  bottom: 0;
+  //  width: 100%;
+  //  // animation:turn 10s linear infinite;
+  //}
+  @keyframes turn {
+    0% {
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+    }
+  }
+}
+</style>

src/pages/page/07.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="main">
+    <Header :headerObj="{title:'深圳颐居养老大数据分析平台', index: '7'}"/>
+    <img src="@/assets/img/page2/07人力.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
+  </div>
+</template>
+<script>
+import Header from '@/components/header'
+
+export default {
+  name: "index",
+  data: function () {
+    return {
+      param: {
+        startYear: "",
+        endYear: "",
+      },
+    };
+  },
+  created() {
+    this.param = {
+      startYear: "",
+      endYear: "",
+    };
+    // this.init();
+  },
+  components: {
+    Header,
+  },
+  methods: {
+     init() {
+      this.getData();
+    },
+    getData() {
+      Index(this.param).then((res) => {
+        console.log(res);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.main {
+  height: 100%;
+  background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  /deep/ .modal,
+  /deep/ .el-icon-close {
+    display: none;
+  }
+  h1 {
+    font-size: 50px;
+    font-weight: 600;
+    padding-top: 50px;
+    text-align: center;
+    -webkit-line-clamp: 2;
+    background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .h1 {
+    position: absolute;
+    left: 50%;
+    margin-left: -509px;
+  }
+  //.b {
+  //  position: absolute;
+  //  bottom: 0;
+  //  width: 100%;
+  //  // animation:turn 10s linear infinite;
+  //}
+  @keyframes turn {
+    0% {
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+    }
+  }
+}
+</style>

src/pages/page/08.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="main">
+    <Header :headerObj="{title:'深圳颐居养老大数据分析平台', index: '8'}"/>
+    <img src="@/assets/img/page2/08活动管理.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
+  </div>
+</template>
+<script>
+import Header from '@/components/header'
+
+export default {
+  name: "index",
+  data: function () {
+    return {
+      param: {
+        startYear: "",
+        endYear: "",
+      },
+    };
+  },
+  created() {
+    this.param = {
+      startYear: "",
+      endYear: "",
+    };
+    // this.init();
+  },
+  components: {
+    Header,
+  },
+  methods: {
+     init() {
+      this.getData();
+    },
+    getData() {
+      Index(this.param).then((res) => {
+        console.log(res);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.main {
+  height: 100%;
+  background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  /deep/ .modal,
+  /deep/ .el-icon-close {
+    display: none;
+  }
+  h1 {
+    font-size: 50px;
+    font-weight: 600;
+    padding-top: 50px;
+    text-align: center;
+    -webkit-line-clamp: 2;
+    background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .h1 {
+    position: absolute;
+    left: 50%;
+    margin-left: -509px;
+  }
+  //.b {
+  //  position: absolute;
+  //  bottom: 0;
+  //  width: 100%;
+  //  // animation:turn 10s linear infinite;
+  //}
+  @keyframes turn {
+    0% {
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+    }
+  }
+}
+</style>

src/pages/page/09.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="main">
+    <Header :headerObj="{title:'深圳颐居养老大数据分析平台', index: '9'}"/>
+    <img src="@/assets/img/page2/09智能设备.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
+  </div>
+</template>
+<script>
+import Header from '@/components/header'
+
+export default {
+  name: "index",
+  data: function () {
+    return {
+      param: {
+        startYear: "",
+        endYear: "",
+      },
+    };
+  },
+  created() {
+    this.param = {
+      startYear: "",
+      endYear: "",
+    };
+    // this.init();
+  },
+  components: {
+    Header,
+  },
+  methods: {
+     init() {
+      this.getData();
+    },
+    getData() {
+      Index(this.param).then((res) => {
+        console.log(res);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.main {
+  height: 100%;
+  background: url(../../assets/img/bigScreen/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  /deep/ .modal,
+  /deep/ .el-icon-close {
+    display: none;
+  }
+  h1 {
+    font-size: 50px;
+    font-weight: 600;
+    padding-top: 50px;
+    text-align: center;
+    -webkit-line-clamp: 2;
+    background-image: -webkit-linear-gradient(bottom, #eefcff, #51dcfe);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .h1 {
+    position: absolute;
+    left: 50%;
+    margin-left: -509px;
+  }
+  //.b {
+  //  position: absolute;
+  //  bottom: 0;
+  //  width: 100%;
+  //  // animation:turn 10s linear infinite;
+  //}
+  @keyframes turn {
+    0% {
+      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
+    }
+  }
+}
+</style>

src/router.js

@@ -56,6 +56,46 @@ export default new Router({
         index: 0,
       }
     },
+    {
+      path: '/05',
+      name: '05',
+      component: () => import('@/pages/page/05'),
+      meta: {
+        index: 0,
+      }
+    },
+    {
+      path: '/06',
+      name: '06',
+      component: () => import('@/pages/page/06'),
+      meta: {
+        index: 0,
+      }
+    },
+    {
+      path: '/07',
+      name: '07',
+      component: () => import('@/pages/page/07'),
+      meta: {
+        index: 0,
+      }
+    },
+    {
+      path: '/08',
+      name: '08',
+      component: () => import('@/pages/page/08'),
+      meta: {
+        index: 0,
+      }
+    },
+    {
+      path: '/09',
+      name: '09',
+      component: () => import('@/pages/page/09'),
+      meta: {
+        index: 0,
+      }
+    },
     // 首页
     {
       path: '/home',