添加下载页面

src/router/index.js

@@ -19,6 +19,15 @@ let router = new Router({
       meta: "首页",
     },
     {
+      path: '/uploadFile',
+      name: 'uploadFile',
+      component: () => import('@/views/uploadFile/index.vue'),
+      meta: {
+        title: "下载资料",
+        isLogin: true
+      },
+    },
+    {
       path: '/lineStudy',
       name: 'lineStudy',
       meta: {

src/views/home/home.vue

 <template>
   <div class="home">
-    <div class="banner"></div>
+    <div class="banner">
+      <div class="upload" @click="$router.push('/uploadFile')">
+        <h1>下载资料</h1>
+      </div>
+    </div>
     <div class="cont1 homePublic" @click="$router.push('/lineStudy')">
       <h1><img src="../../assets/img/home/icon_xuexi.png" alt=""></h1>
       <div class="other">
@@ -65,12 +69,37 @@
     height:100%;
     /*max-height: 100%;*/
     background: #03BCBE;
-
+    position: relative;
     .banner {
       width: 100%;
       height: 2.4rem;
       background: url("../../assets/img/home/banner.jpg") no-repeat;
       background-size: cover;
+      .upload{
+        position: absolute;
+        top:.2rem;
+        right: .1rem;
+        width: 1.1rem; height: .34rem; background: rgba(0,0,0,.4);
+        border-radius: .05rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        h1{
+          font-size: .14rem;
+          font-weight: normal;
+          color: #fff;
+        }
+        h1:before{
+          content: '';
+          background: url("../../../static/file/upload.png") no-repeat;
+          background-size: contain;
+          width: .17rem;
+          height: .16rem;
+          display: block;
+          float: left;
+          margin-right: .02rem;
+        }
+      }
     }
 
     .homePublic {

src/views/uploadFile/index.vue

+<template>
+  <!-- 下载资料-->
+    <div class="uploadFile">
+      <comHeader></comHeader>
+      <ul class="cont2">
+        <li v-for="(item,index) in list" :key="index" @click="upload(item)">
+          <h1>{{item.name}}</h1>
+          <!--<img src="./static/file/竞赛通知附件.docx" alt="">-->
+        </li>
+      </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'HelloWorld',
+        data() {
+            return {
+              list:[
+                {name:'竞赛通知附件.docx',link:'./static/file/竞赛通知附件.docx'},
+                {name:'公共就业服务专项业务竞赛前台需求说明书.doc',link:'公共就业服务专项业务竞赛前台需求说明书.doc'},
+              ]
+            }
+        },
+        created() {
+        },
+        watch: {},
+        methods: {
+          upload(item){
+            window.open(item.link);
+          }
+        },
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.uploadFile{
+  width: 3.75rem;
+  height: 100%;
+  background: #f3f3f3;
+  margin: 0;
+  padding: 0;
+  .cont2 {
+    padding-top: .55rem;
+    li {
+      width: 3.27rem;
+      background: #fff;
+      border-radius: .05rem;
+      padding: .12rem;
+      margin: 0 auto .1rem;
+      box-shadow: .02rem .01rem .08rem rgba(0,0,0,0.1);
+      h1{
+        font-size: .14rem;
+        color: #000000;
+        font-weight: normal;
+        line-height: .2rem;
+      }
+      .other{
+        display: flex;
+        justify-content: space-between;
+        padding-top: .1rem;
+        .indexCSS{
+          display: flex;
+          justify-content: flex-start;
+          h2{
+            font-size: .11rem;
+            font-weight: normal;
+            color: #999999;
+            span{
+              color: #000000;
+            }
+          }
+          h3{
+            color: #999999;
+            font-size: .11rem;
+            font-weight: normal;
+            padding-left: .1rem;
+          }
+        }
+        h4{
+          color: #999999;
+          font-size: .11rem;
+          font-weight: normal;
+          padding-left: .1rem;
+          span{
+            font-weight: bold;
+            color: #E9493E;
+          }
+        }
+      }
+    }
+  }
+}
+</style>