添加跳转模块

src/router/index.js

@@ -21,6 +21,8 @@ import addTask from '@/views/task/addTask'
 import standingManage from '@/views/standingManage/index'
 // 计划
 import plan from '@/views/plan/plan'
+// 选择
+import choose from '@/views/choose/choose'
 // 启用路由
 Vue.use(Router);
 
@@ -65,6 +67,10 @@ export default new Router({
             path: '/plan',
             name: '计划管理',
             component: plan
+        }, {
+            path: '/choose',
+            name: '计划管理',
+            component: choose
         }]
     }]
 })

src/views/choose/choose.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <div class="mainBg" ref="mainBg" :style="{'height':mainHeight+'px'}">
+      <img src="../../assets/img/choose_title.png" class="mainTitle" :style="{'margin-top':mainHeight*0.36+'px'}"/>
+    </div>
+    <div class="boxIcon">
+      <img src="../../assets/img/icon0.png" class="mainIcon" :style="{'margin-top':-mainHeight*0.2+'px'}"/>
+      <img src="../../assets/img/icon1.png" class="mainIcon" :style="{'margin-top':-mainHeight*0.2+'px'}"/>
+      <img src="../../assets/img/icon2.png" class="mainIcon" :style="{'margin-top':-mainHeight*0.2+'px'}"/>
+      <img src="../../assets/img/icon3.png" class="mainIcon" :style="{'margin-top':-mainHeight*0.2+'px'}"/>
+      <img src="../../assets/img/icon4.png" class="mainIcon" :style="{'margin-top':-mainHeight*0.2+'px'}"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "choose",
+    components: {
+      
+    },
+    data() {
+      return {
+        mainHeight:0
+      }
+    },
+    created() {
+      
+    },
+    onload(){
+      
+    },
+    mounted() {
+      //立即执行
+      window.onresize = () => {
+        return (() => {
+          this.resizeWin();
+        })();
+      };
+      this.resizeWin();
+    },
+    methods:{
+      resizeWin(){
+        const mainWidth = this.$refs.mainBg.clientWidth;
+       this.mainHeight=mainWidth*0.28125
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .mainBg {
+    width: 100%;
+    background-image: url("../../assets/img/choose_bg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+  .mainTitle {
+    width: 32%;
+    margin-left:34%;
+  }
+  .mainIcon{
+    width: 12%;
+    margin-left: 6.4%;
+  }
+  .boxIcon{
+    width:100%;
+  }
+</style>