顶部部分

package-lock.json

@@ -1266,8 +1266,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://r2.cnpmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -2037,6 +2036,14 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://r.cnpmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://r2.cnpmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -3524,8 +3531,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://r2.cnpmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -3564,7 +3570,6 @@
       "version": "0.1.8",
       "resolved": "https://r2.cnpmjs.org/errno/-/errno-0.1.8.tgz",
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -4466,8 +4471,7 @@
     "graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://r.cnpmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "growly": {
       "version": "1.3.0",
@@ -4900,6 +4904,12 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://r2.cnpmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://r2.cnpmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -5363,6 +5373,11 @@
         "call-bind": "^1.0.2"
       }
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://r2.cnpmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://r2.cnpmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -5491,6 +5506,58 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "less": {
+      "version": "4.1.3",
+      "resolved": "https://r.cnpmjs.org/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://r2.cnpmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://r2.cnpmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "4.1.0",
+      "resolved": "https://r2.cnpmjs.org/less-loader/-/less-loader-4.1.0.tgz",
+      "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^3.0.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://r2.cnpmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+        }
+      }
+    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://r2.cnpmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -5530,7 +5597,6 @@
       "version": "1.4.2",
       "resolved": "https://r.cnpmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
       "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -5541,7 +5607,6 @@
           "version": "1.0.2",
           "resolved": "https://r.cnpmjs.org/json5/-/json5-1.0.2.tgz",
           "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -5968,8 +6033,7 @@
     "mime": {
       "version": "1.6.0",
       "resolved": "https://r2.cnpmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
     },
     "mime-db": {
       "version": "1.52.0",
@@ -6016,8 +6080,7 @@
     "minimist": {
       "version": "1.2.8",
       "resolved": "https://r.cnpmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
     },
     "mississippi": {
       "version": "2.0.0",
@@ -6135,6 +6198,43 @@
         }
       }
     },
+    "needle": {
+      "version": "3.2.0",
+      "resolved": "https://r.cnpmjs.org/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://r2.cnpmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://r2.cnpmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://r2.cnpmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "optional": true
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://r.cnpmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -6625,6 +6725,11 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://r2.cnpmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://r2.cnpmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -6722,8 +6827,7 @@
     "pify": {
       "version": "3.0.0",
       "resolved": "https://r2.cnpmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
-      "dev": true
+      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg=="
     },
     "pinkie": {
       "version": "2.0.4",
@@ -9194,8 +9298,7 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://r2.cnpmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
     },
     "pseudomap": {
       "version": "1.0.2",
@@ -9747,14 +9850,12 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://r2.cnpmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://r2.cnpmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "schema-utils": {
       "version": "0.3.0",
@@ -9783,8 +9884,7 @@
     "semver": {
       "version": "5.7.1",
       "resolved": "https://r2.cnpmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
     },
     "send": {
       "version": "0.18.0",
@@ -10722,6 +10822,11 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "tslib": {
+      "version": "2.5.3",
+      "resolved": "https://r.cnpmjs.org/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w=="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://r2.cnpmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",

package.json

@@ -10,6 +10,8 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "less": "^4.1.3",
+    "less-loader": "^4.1.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

src/components/index/index.vue

@@ -1,6 +1,24 @@
 <template>
     <div class="hello">
-      <div style="color: red;border: 1px solid red;" >sdfdsf</div>
+      <div class="main" >
+
+        <div class="topCard">
+          <div class="item">
+            <div style="margin-left: 2%;" class="topTitle">累计进馆人数：3,435,123万人</div>
+            <img class="topImg" src="../../assets/index/顶部文字.png"/>
+            <div style="margin-right: 2%;" class="topTitle">星期四 16:33:33 天气：晴</div>
+          </div>
+
+          <div class="selectItem">
+            <div @click="clickItme(1)" class="tiyuchang guan" :class="selectVal == 1 ? 'tiyuchangBackS' : 'tiyuguanBackD'"><div class="txt">体育场</div></div>
+            <div @click="clickItme(2)" class="tiyuguan guan" :class="selectVal == 2 ? 'tiyuguanBackS' : 'tiyuguanBackD'"><div class="txt">体育馆</div></div>
+            <div @click="clickItme(3)" class="zonglan guan" :class="selectVal == 3 ? 'zonglanBackS' : 'zonglanBackD'"><div class="txt">总览</div></div>
+            <div @click="clickItme(4)" class="youyong guan" :class="selectVal == 4 ? 'youyongBackS' : 'youyongBackD'"><div class="txt">游泳场馆</div></div>
+            <div @click="clickItme(5)" class="bowu guan" :class="selectVal == 5 ? 'bowuS' : 'bowuD'"><div class="txt">博物馆</div></div>
+          </div>
+        </div>
+
+      </div>
     </div>
   </template>
   
@@ -8,13 +26,143 @@
   export default {
     data () {
       return {
-        msg: 'Welcome to Your Vue.js App'
+        msg: 'Welcome to Your Vue.js App',
+        selectVal: ''
+
+      }
+    },
+    methods: {
+      clickItme(val){
+        this.selectVal = val
       }
     }
   }
   </script>
   
-  <style scoped>
-
+  <style lang="less" scoped>
+    .main{
+      width: 100vw;
+      height: 100vh;
+      background-image: url('../../assets/index/背景.jpg');
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      .topCard{
+        width: 100%;
+        height: 20%;
+        background-image: url('../../assets/index/顶部.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        
+        position: relative;
+        // padding-top: 20px;
+        .item{
+          display: flex;
+          justify-content: space-between;
+        }
+        .topImg{
+          margin-top: 1%;
+          width: 35%;
+          height: 15%;
+        }
+        .topTitle{
+          margin-top: 1%;
+          color: #00C6FF;
+          font-size: 14px;
+          font-weight: bold;
+        }
+        .selectItem{
+          width: 39%;
+          height: 38%;
+          // border: 1px solid red;
+          margin: 0 auto;
+          margin-top: 1.8%;
+          display: flex;
+          justify-content: space-between;
+          .guan{
+            width: 20%;
+            height: 84%;
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            text-align: center;
+            color: #00BDF9;
+            font-weight: bold;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            cursor:pointer
+          }
+          .tiyuchangBackD{
+            background-image: url('../../assets/index/体育场1.png');
+          }
+          .tiyuchangBackS{
+            color: white;
+            background-image: url('../../assets/index/体育场.png');
+          }
+          .tiyuguanBackD{
+            background-image: url('../../assets/index/体育馆1.png');
+          }
+          .tiyuguanBackS{
+            color: white;
+            background-image: url('../../assets/index/体育馆.png');
+          }
+          .zonglanBackD{
+            background-image: url('../../assets/index/总览1.png');
+          }
+          .zonglanBackS{
+            color: white;
+            background-image: url('../../assets/index/总览.png');
+          }
+          .youyongBackD{
+            background-image: url('../../assets/index/游泳场馆1.png');
+          }
+          .youyongBackS{
+            color: white;
+            background-image: url('../../assets/index/游泳场馆.png');
+          }
+          .bowuD{
+            background-image: url('../../assets/index/图书馆1.png');
+          }
+          .bowuS{
+            color: white;
+            background-image: url('../../assets/index/图书馆.png');
+          }
+          .tiyuchang{
+            .txt{
+              transform: rotate(3deg);
+              margin-top: -7px;
+            }
+          }
+          .tiyuguan{
+            margin-top: 1.4%;
+            
+            .txt{
+              transform: rotate(3deg);
+              margin-top: -7px;
+            }
+          }
+          .zonglan{
+            margin-top: 2.8%;
+            
+            height: 77%;
+            .txt{
+              margin-top: -2px;
+            }
+          }
+          .youyong{
+            margin-top: 1.4%;
+            .txt{
+              margin-top: -7px;
+              transform: rotate(-3deg);
+            }
+          }
+          .bowu{
+            .txt{
+              transform: rotate(-3deg);
+              margin-top: -7px;
+            }
+          }
+        }
+      }
+    }
   </style>
   

src/main.js

@@ -3,9 +3,11 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-
+import less from 'less'
 Vue.config.productionTip = false
 
+
+Vue.use(less)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',