Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
shaogen1995
/
ShouBo
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Prechádzať zdrojové kódy

up

shaogen1995 3 rokov pred
rodič
5902922522
commit
d2dd770afd
31 zmenil súbory, kde vykonal 562 pridanie a 26299 odobranie
Rozdelené zobrazenie Ukázať štatistiku rozdielnych dát
  1. 0 19
      README.md
  2. 0 5
      babel.config.js
  3. 0 25959
      package-lock.json
  4. 0 27
      package.json
  5. BIN
      public/favicon.ico
  6. 0 17
      public/index.html
  7. 0 32
      src/App.vue
  8. BIN
      src/assets/logo.png
  9. 0 58
      src/components/HelloWorld.vue
  10. 0 10
      src/main.js
  11. 0 29
      src/router/index.js
  12. 0 5
      src/views/About.vue
  13. 0 18
      src/views/Home.vue
  14. 139 7
      web/package-lock.json
  15. 1 0
      web/package.json
  16. 125 21
      web/src/assets/css/base.css
  17. BIN
      web/src/assets/images/code.png
  18. BIN
      web/src/assets/images/dh1.png
  19. BIN
      web/src/assets/images/footer_bg.png
  20. BIN
      web/src/assets/images/game.png
  21. BIN
      web/src/assets/images/index_ewm.jpg
  22. BIN
      web/src/assets/images/index_ewm1.png
  23. BIN
      web/src/assets/images/swiper1.jpg
  24. BIN
      web/src/assets/images/swiper2.jpg
  25. BIN
      web/src/assets/images/swiper3.jpg
  26. BIN
      web/src/assets/images/swiper4.jpg
  27. 4 2
      web/src/main.js
  28. 1 0
      web/src/router/index.js
  29. 8 2
      web/src/views/Home/index.vue
  30. 86 0
      web/src/views/layout/data.js
  31. 198 88
      web/src/views/layout/index.vue

+ 0 - 19
README.md
Zobraziť súbor 

@@ -1,19 +0,0 @@
 
-# shou_bo
 
-
 
-## Project setup
 
-```
 
-npm install
 
-```
 
-
 
-### Compiles and hot-reloads for development
 
-```
 
-npm run serve
 
-```
 
-
 
-### Compiles and minifies for production
 
-```
 
-npm run build
 
-```
 
-
 
-### Customize configuration
 
-See [Configuration Reference](https://cli.vuejs.org/config/).

+ 0 - 5
babel.config.js
Zobraziť súbor 

@@ -1,5 +0,0 @@
 
-module.exports = {
 
-  presets: [
 
-    '@vue/cli-plugin-babel/preset'
 
-  ]
 
-}

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 0 - 25959
package-lock.json


+ 0 - 27
package.json
Zobraziť súbor 

@@ -1,27 +0,0 @@
 
-{
 
-  "name": "shou_bo",
 
-  "version": "0.1.0",
 
-  "private": true,
 
-  "scripts": {
 
-    "serve": "vue-cli-service serve",
 
-    "build": "vue-cli-service build"
 
-  },
 
-  "dependencies": {
 
-    "core-js": "^3.6.5",
 
-    "vue": "^2.6.11",
 
-    "vue-router": "^3.2.0"
 
-  },
 
-  "devDependencies": {
 
-    "@vue/cli-plugin-babel": "~4.5.13",
 
-    "@vue/cli-plugin-router": "~4.5.13",
 
-    "@vue/cli-service": "~4.5.13",
 
-    "less": "^3.0.4",
 
-    "less-loader": "^5.0.0",
 
-    "vue-template-compiler": "^2.6.11"
 
-  },
 
-  "browserslist": [
 
-    "> 1%",
 
-    "last 2 versions",
 
-    "not dead"
 
-  ]
 
-}

BIN
public/favicon.ico
Zobraziť súbor


+ 0 - 17
public/index.html
Zobraziť súbor 

@@ -1,17 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="">
 
-  <head>
 
-    <meta charset="utf-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title><%= htmlWebpackPlugin.options.title %></title>
 
-  </head>
 
-  <body>
 
-    <noscript>
 
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
-    </noscript>
 
-    <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
-  </body>
 
-</html>

+ 0 - 32
src/App.vue
Zobraziť súbor 

@@ -1,32 +0,0 @@
 
-<template>
 
-  <div id="app">
 
-    <div id="nav">
 
-      <router-link to="/">Home</router-link> |
 
-      <router-link to="/about">About</router-link>
 
-    </div>
 
-    <router-view/>
 
-  </div>
 
-</template>
 
-
 
-<style lang="less">
 
-#app {
 
-  font-family: Avenir, Helvetica, Arial, sans-serif;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  text-align: center;
 
-  color: #2c3e50;
 
-}
 
-
 
-#nav {
 
-  padding: 30px;
 
-
 
-  a {
 
-    font-weight: bold;
 
-    color: #2c3e50;
 
-
 
-    &.router-link-exact-active {
 
-      color: #42b983;
 
-    }
 
-  }
 
-}
 
-</style>

BIN
src/assets/logo.png
Zobraziť súbor


+ 0 - 58
src/components/HelloWorld.vue
Zobraziť súbor 

@@ -1,58 +0,0 @@
 
-<template>
 
-  <div class="hello">
 
-    <h1>{{ msg }}</h1>
 
-    <p>
 
-      For a guide and recipes on how to configure / customize this project,<br>
 
-      check out the
 
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 
-    </p>
 
-    <h3>Installed CLI Plugins</h3>
 
-    <ul>
 
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
 
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
 
-    </ul>
 
-    <h3>Essential Links</h3>
 
-    <ul>
 
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
 
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
 
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
 
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
 
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
 
-    </ul>
 
-    <h3>Ecosystem</h3>
 
-    <ul>
 
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
 
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
 
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
 
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
 
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
 
-    </ul>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-export default {
 
-  name: 'HelloWorld',
 
-  props: {
 
-    msg: String
 
-  }
 
-}
 
-</script>
 
-
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 
-<style scoped lang="less">
 
-h3 {
 
-  margin: 40px 0 0;
 
-}
 
-ul {
 
-  list-style-type: none;
 
-  padding: 0;
 
-}
 
-li {
 
-  display: inline-block;
 
-  margin: 0 10px;
 
-}
 
-a {
 
-  color: #42b983;
 
-}
 
-</style>

+ 0 - 10
src/main.js
Zobraziť súbor 

@@ -1,10 +0,0 @@
 
-import Vue from 'vue'
 
-import App from './App.vue'
 
-import router from './router'
 
-
 
-Vue.config.productionTip = false
 
-
 
-new Vue({
 
-  router,
 
-  render: h => h(App)
 
-}).$mount('#app')

+ 0 - 29
src/router/index.js
Zobraziť súbor 

@@ -1,29 +0,0 @@
 
-import Vue from 'vue'
 
-import VueRouter from 'vue-router'
 
-import Home from '../views/Home.vue'
 
-
 
-Vue.use(VueRouter)
 
-
 
-const routes = [
 
-  {
 
-    path: '/',
 
-    name: 'Home',
 
-    component: Home
 
-  },
 
-  {
 
-    path: '/about',
 
-    name: 'About',
 
-    // route level code-splitting
 
-    // this generates a separate chunk (about.[hash].js) for this route
 
-    // which is lazy-loaded when the route is visited.
 
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 
-  }
 
-]
 
-
 
-const router = new VueRouter({
 
-  mode: 'history',
 
-  base: process.env.BASE_URL,
 
-  routes
 
-})
 
-
 
-export default router

+ 0 - 5
src/views/About.vue
Zobraziť súbor 

@@ -1,5 +0,0 @@
 
-<template>
 
-  <div class="about">
 
-    <h1>This is an about page</h1>
 
-  </div>
 
-</template>

+ 0 - 18
src/views/Home.vue
Zobraziť súbor 

@@ -1,18 +0,0 @@
 
-<template>
 
-  <div class="home">
 
-    <img alt="Vue logo" src="../assets/logo.png">
 
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-// @ is an alias to /src
 
-import HelloWorld from '@/components/HelloWorld.vue'
 
-
 
-export default {
 
-  name: 'Home',
 
-  components: {
 
-    HelloWorld
 
-  }
 
-}
 
-</script>

+ 139 - 7
web/package-lock.json
Zobraziť súbor 

@@ -9,6 +9,7 @@
 
       "version": "0.1.0",
 
       "dependencies": {
 
         "core-js": "^3.6.5",
 
+        "element-ui": "^2.15.6",
 
         "vue": "^2.6.11",
 
         "vue-router": "^3.2.0"
 
       },
 
@@ -3020,6 +3021,14 @@
 
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
 
       "dev": true
 
     },
 
+    "node_modules/async-validator": {
 
+      "version": "1.8.5",
 
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
 
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
 
+      "dependencies": {
 
+        "babel-runtime": "6.x"
 
+      }
 
+    },
 
     "node_modules/asynckit": {
 
       "version": "0.4.0",
 
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
 
@@ -3071,6 +3080,11 @@
 
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
 
       "dev": true
 
     },
 
+    "node_modules/babel-helper-vue-jsx-merge-props": {
 
+      "version": "2.0.3",
 
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
 
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
 
+    },
 
     "node_modules/babel-loader": {
 
       "version": "8.2.4",
 
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.4.tgz",
 
@@ -3138,6 +3152,26 @@
 
         "@babel/core": "^7.0.0-0"
 
       }
 
     },
 
+    "node_modules/babel-runtime": {
 
+      "version": "6.26.0",
 
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
 
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
 
+      "dependencies": {
 
+        "core-js": "^2.4.0",
 
+        "regenerator-runtime": "^0.11.0"
 
+      }
 
+    },
 
+    "node_modules/babel-runtime/node_modules/core-js": {
 
+      "version": "2.6.12",
 
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
 
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
 
+      "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js."
 
+    },
 
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
 
+      "version": "0.11.1",
 
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
 
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
 
+    },
 
     "node_modules/balanced-match": {
 
       "version": "1.0.2",
 
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
 
@@ -5121,7 +5155,6 @@
 
       "version": "1.5.2",
 
       "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
 
       "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
 
-      "dev": true,
 
       "engines": {
 
         "node": ">=0.10.0"
 
       }
 
@@ -5596,6 +5629,22 @@
 
       "integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw==",
 
       "dev": true
 
     },
 
+    "node_modules/element-ui": {
 
+      "version": "2.15.6",
 
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.6.tgz",
 
+      "integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
 
+      "dependencies": {
 
+        "async-validator": "~1.8.1",
 
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
 
+        "deepmerge": "^1.2.0",
 
+        "normalize-wheel": "^1.0.1",
 
+        "resize-observer-polyfill": "^1.5.0",
 
+        "throttle-debounce": "^1.0.1"
 
+      },
 
+      "peerDependencies": {
 
+        "vue": "^2.5.17"
 
+      }
 
+    },
 
     "node_modules/elliptic": {
 
       "version": "6.5.4",
 
       "resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz",
 
@@ -8944,6 +8993,11 @@
 
         "node": ">=4"
 
       }
 
     },
 
+    "node_modules/normalize-wheel": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
 
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
 
+    },
 
     "node_modules/npm-run-path": {
 
       "version": "2.0.2",
 
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
 
@@ -10877,6 +10931,11 @@
 
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
 
       "dev": true
 
     },
 
+    "node_modules/resize-observer-polyfill": {
 
+      "version": "1.5.1",
 
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
 
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
 
+    },
 
     "node_modules/resolve": {
 
       "version": "1.22.0",
 
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz",
 
@@ -12405,6 +12464,14 @@
 
         "node": ">=4.0.0"
 
       }
 
     },
 
+    "node_modules/throttle-debounce": {
 
+      "version": "1.1.0",
 
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
 
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
 
+      "engines": {
 
+        "node": ">=4"
 
+      }
 
+    },
 
     "node_modules/through2": {
 
       "version": "2.0.5",
 
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",
 
@@ -15988,7 +16055,8 @@
 
       "version": "4.5.16",
 
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.16.tgz",
 
       "integrity": "sha512-cj9x7zaoc81Nz14cUUwQ3+niSJWBulTRPA5TeVIPyhxp0+Nk32xeBsc8JuVK9GmvLF6FQRizM94KvJWIyPAHVA==",
 
-      "dev": true
 
+      "dev": true,
 
+      "requires": {}
 
     },
 
     "@vue/cli-service": {
 
       "version": "4.5.16",
 
@@ -16125,7 +16193,8 @@
 
       "version": "1.1.2",
 
       "resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
 
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
 
-      "dev": true
 
+      "dev": true,
 
+      "requires": {}
 
     },
 
     "@vue/web-component-wrapper": {
 
       "version": "1.3.0",
 
@@ -16364,13 +16433,15 @@
 
       "version": "1.0.1",
 
       "resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz",
 
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
 
-      "dev": true
 
+      "dev": true,
 
+      "requires": {}
 
     },
 
     "ajv-keywords": {
 
       "version": "3.5.2",
 
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
 
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
 
-      "dev": true
 
+      "dev": true,
 
+      "requires": {}
 
     },
 
     "alphanum-sort": {
 
       "version": "1.0.2",
 
@@ -16576,6 +16647,14 @@
 
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
 
       "dev": true
 
     },
 
+    "async-validator": {
 
+      "version": "1.8.5",
 
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
 
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
 
+      "requires": {
 
+        "babel-runtime": "6.x"
 
+      }
 
+    },
 
     "asynckit": {
 
       "version": "0.4.0",
 
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
 
@@ -16615,6 +16694,11 @@
 
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
 
       "dev": true
 
     },
 
+    "babel-helper-vue-jsx-merge-props": {
 
+      "version": "2.0.3",
 
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
 
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
 
+    },
 
     "babel-loader": {
 
       "version": "8.2.4",
 
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.4.tgz",
 
@@ -16666,6 +16750,27 @@
 
         "@babel/helper-define-polyfill-provider": "^0.3.1"
 
       }
 
     },
 
+    "babel-runtime": {
 
+      "version": "6.26.0",
 
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
 
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
 
+      "requires": {
 
+        "core-js": "^2.4.0",
 
+        "regenerator-runtime": "^0.11.0"
 
+      },
 
+      "dependencies": {
 
+        "core-js": {
 
+          "version": "2.6.12",
 
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
 
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
 
+        },
 
+        "regenerator-runtime": {
 
+          "version": "0.11.1",
 
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
 
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
 
+        }
 
+      }
 
+    },
 
     "balanced-match": {
 
       "version": "1.0.2",
 
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
 
@@ -18349,8 +18454,7 @@
 
     "deepmerge": {
 
       "version": "1.5.2",
 
       "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
 
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
 
-      "dev": true
 
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
 
     },
 
     "default-gateway": {
 
       "version": "5.0.5",
 
@@ -18745,6 +18849,19 @@
 
       "integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw==",
 
       "dev": true
 
     },
 
+    "element-ui": {
 
+      "version": "2.15.6",
 
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.6.tgz",
 
+      "integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
 
+      "requires": {
 
+        "async-validator": "~1.8.1",
 
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
 
+        "deepmerge": "^1.2.0",
 
+        "normalize-wheel": "^1.0.1",
 
+        "resize-observer-polyfill": "^1.5.0",
 
+        "throttle-debounce": "^1.0.1"
 
+      }
 
+    },
 
     "elliptic": {
 
       "version": "6.5.4",
 
       "resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz",
 
@@ -21486,6 +21603,11 @@
 
         "sort-keys": "^1.0.0"
 
       }
 
     },
 
+    "normalize-wheel": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
 
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
 
+    },
 
     "npm-run-path": {
 
       "version": "2.0.2",
 
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
 
@@ -23124,6 +23246,11 @@
 
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
 
       "dev": true
 
     },
 
+    "resize-observer-polyfill": {
 
+      "version": "1.5.1",
 
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
 
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
 
+    },
 
     "resolve": {
 
       "version": "1.22.0",
 
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz",
 
@@ -24421,6 +24548,11 @@
 
         }
 
       }
 
     },
 
+    "throttle-debounce": {
 
+      "version": "1.1.0",
 
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
 
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
 
+    },
 
     "through2": {
 
       "version": "2.0.5",
 
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",

+ 1 - 0
web/package.json
Zobraziť súbor 

@@ -8,6 +8,7 @@
 
   },
 
   "dependencies": {
 
     "core-js": "^3.6.5",
 
+    "element-ui": "^2.15.6",
 
     "vue": "^2.6.11",
 
     "vue-router": "^3.2.0"
 
   },

+ 125 - 21
web/src/assets/css/base.css
Zobraziť súbor 

@@ -1,51 +1,155 @@
 
-html, body, div, span, applet, object, iframe,
 
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
-a, abbr, acronym, address, big, cite, code,
 
-del, dfn, em, img, ins, kbd, q, s, samp,
 
-small, strike, strong, sub, sup, tt, var,
 
-b, u, i, center,
 
-dl, dt, dd, ol, ul, li,
 
-fieldset, form, label, legend,
 
-table, caption, tbody, tfoot, thead, tr, th, td,
 
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
 
-time, mark, audio, video {
 
+html,
 
+body,
 
+div,
 
+span,
 
+applet,
 
+object,
 
+iframe,
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6,
 
+p,
 
+blockquote,
 
+pre,
 
+a,
 
+abbr,
 
+acronym,
 
+address,
 
+big,
 
+cite,
 
+code,
 
+del,
 
+dfn,
 
+em,
 
+img,
 
+ins,
 
+kbd,
 
+q,
 
+s,
 
+samp,
 
+small,
 
+strike,
 
+strong,
 
+sub,
 
+sup,
 
+tt,
 
+var,
 
+b,
 
+u,
 
+i,
 
+center,
 
+dl,
 
+dt,
 
+dd,
 
+ol,
 
+ul,
 
+li,
 
+fieldset,
 
+form,
 
+label,
 
+legend,
 
+table,
 
+caption,
 
+tbody,
 
+tfoot,
 
+thead,
 
+tr,
 
+th,
 
+td,
 
+article,
 
+aside,
 
+canvas,
 
+details,
 
+embed,
 
+figure,
 
+figcaption,
 
+footer,
 
+header,
 
+hgroup,
 
+menu,
 
+nav,
 
+output,
 
+ruby,
 
+section,
 
+summary,
 
+time,
 
+mark,
 
+audio,
 
+video {
 
     margin: 0;
 
     padding: 0;
 
     border: 0;
 
     font-size: 100%;
 
     font: inherit;
 
     vertical-align: baseline;
 
+    box-sizing: border-box;
 
 }
 
+
 
 /* HTML5 display-role reset for older browsers */
 
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
 
+article,
 
+aside,
 
+details,
 
+figcaption,
 
+figure,
 
+footer,
 
+header,
 
+hgroup,
 
+menu,
 
+nav,
 
+section {
 
     display: block;
 
 }
 
+
 
 body {
 
     line-height: 1;
 
 }
 
-ol, ul {
 
+
 
+ol,
 
+ul {
 
     list-style: none;
 
 }
 
-blockquote, q {
 
+
 
+blockquote,
 
+q {
 
     quotes: none;
 
 }
 
-blockquote:before, blockquote:after,
 
-q:before, q:after {
 
+
 
+blockquote:before,
 
+blockquote:after,
 
+q:before,
 
+q:after {
 
     content: '';
 
     content: none;
 
 }
 
+
 
 table {
 
     border-collapse: collapse;
 
     border-spacing: 0;
 
 }
 
-a{
 
+
 
+a {
 
     color: #000;
 
     text-decoration: none;
 
 }
 
-a:hover{
 
+
 
+a:hover {
 
     color: #000;
 
     text-decoration: none;
 
+}
 
+
 
+/* element 输入框样式 */
 
+.el-input {
 
+    height: 30px;
 
+}
 
+.el-input__inner{
 
+    height: 30px;
 
+    border-radius: 15px;
 
+    line-height: 30px;
 
+}
 
+
 
+.el-input.is-active .el-input__inner, .el-input__inner:focus{
 
+    border-color:#ca000a;
 
 }

BIN
web/src/assets/images/code.png
Zobraziť súbor


BIN
web/src/assets/images/dh1.png
Zobraziť súbor


BIN
web/src/assets/images/footer_bg.png
Zobraziť súbor


BIN
web/src/assets/images/game.png
Zobraziť súbor


BIN
web/src/assets/images/index_ewm.jpg
Zobraziť súbor


BIN
web/src/assets/images/index_ewm1.png
Zobraziť súbor


BIN
web/src/assets/images/swiper1.jpg
Zobraziť súbor


BIN
web/src/assets/images/swiper2.jpg
Zobraziť súbor


BIN
web/src/assets/images/swiper3.jpg
Zobraziť súbor


BIN
web/src/assets/images/swiper4.jpg
Zobraziť súbor


+ 4 - 2
web/src/main.js
Zobraziť súbor 

@@ -1,11 +1,13 @@
 
 import Vue from 'vue'
 
 import App from './App.vue'
 
 import router from './router'
 
-
 
-Vue.config.productionTip = false
 
+import ElementUI from 'element-ui';
 
+import 'element-ui/lib/theme-chalk/index.css';
 
 //引入初始化样式
 
 import './assets/css/base.css'
 
+Vue.use(ElementUI);
 
 
+Vue.config.productionTip = false
 
 new Vue({
 
   router,
 
   render: h => h(App)

+ 1 - 0
web/src/router/index.js
Zobraziť súbor 

@@ -14,6 +14,7 @@ const routes = [
 
         path:'Home',
 
         name:'Home',
 
         component: () => import( '../views/Home/index.vue'),
 
+        meta: { myName: 'Home' },
 
       }
 
     ]
 
   }

+ 8 - 2
web/src/views/Home/index.vue
Zobraziť súbor 

@@ -1,5 +1,7 @@
 
 <template>
 
-<div class='Home'>Home</div>
 
+<div class='Home'>
 
+
 
+</div>
 
 </template>
 
 
 <script>
 
@@ -38,6 +40,10 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 
 }
 
 </script>
 
 <style lang='less' scoped>
 
-//@import url(); 引入公共css类
 
+.Home{
 
+  width: 100%;
 
+  height: calc(100% - 45px);
 
+  background-color: black;
 
+}
 
 
 </style>

+ 86 - 0
web/src/views/layout/data.js
Zobraziť súbor 

@@ -0,0 +1,86 @@
 
+export const topData = [
 
+  { id: 1, name: "Home", url: "Home" },
 
+  {
 
+    id: 2,
 
+    name: "Visit",
 
+    url: "Visit",
 
+    children: [
 
+      { id: 2.1, name: "Hours, Direction & Admission" },
 
+      { id: 2.2, name: "Reservation" },
 
+      { id: 2.3, name: "Floor Plans" },
 
+      { id: 2.4, name: "Audio Guide & Tour" },
 
+      { id: 2.5, name: "Accessibility" },
 
+      { id: 2.6, name: "Café & Shop" },
 
+      { id: 2.7, name: "Visitor Guidelines" },
 
+    ],
 
+  },
 
+  {
 
+    id: 3,
 
+    name: "Exhibitions",
 
+    url: "Exhibitions",
 
+    children: [
 
+      { id: 3.1, name: "Current Exhibitions" },
 
+      { id: 3.2, name: "Permanent Exhibitions" },
 
+      { id: 3.3, name: "Past Exhibitions" },
 
+      { id: 3.4, name: "Overseas Exhibitions" },
 
+    ],
 
+  },
 
+  {
 
+    id: 4,
 
+    name: "Collections",
 
+    url: "Collections",
 
+    children: [
 
+      { id: 4.1, name: "Bronzes" },
 
+      { id: 4.2, name: "Ceramics" },
 
+      { id: 4.3, name: "Buddhist Statues" },
 
+      { id: 4.4, name: "Jadewares" },
 
+      { id: 4.5, name: "Calligraphies" },
 
+      { id: 4.6, name: "Paintings" },
 
+      { id: 4.7, name: "Gold & Silverwares" },
 
+      { id: 4.8, name: "Coins & Banknotes" },
 
+      { id: 4.9, name: "Brocades & Embroideries" },
 
+      { id: 4.10, name: "Cultural Supplies" },
 
+      { id: 4.11, name: "Miscellaneous" },
 
+    ],
 
+  },
 
+  {
 
+    id: 5,
 
+    name: "Learn & Engage",
 
+    url: "LearnEngage",
 
+    children: [
 
+      { id: 5.1, name: "For Students" },
 
+      { id: 5.2, name: "For Adults" },
 
+      { id: 5.3, name: "For Families & Children" },
 
+    ],
 
+  },
 
+  {
 
+    id: 6,
 
+    name: "Publications",
 
+    url: "Publications",
 
+    children: [
 
+      { id: 6.1, name: "Magazines" },
 
+      { id: 6.2, name: "Exhibition Catalogues" },
 
+      { id: 6.3, name: "Exhibition Brochures" },
 
+    ],
 
+  },
 
+  {
 
+    id: 7,
 
+    name: "Join & Support",
 
+    url: "JoinSupport",
 
+    children: [
 
+      { id: 7.1, name: "Ways to Volunteer" },
 
+      { id: 7.2, name: "Ways to Give" },
 
+    ],
 
+  },
 
+  {
 
+    id: 8,
 
+    name: "About",
 
+    url: "About",
 
+    children: [
 
+      { id: 8.1, name: "From the Director" },
 
+      { id: 8.2, name: "History" },
 
+      { id: 8.3, name: "Partners & Connections" },
 
+      { id: 8.4, name: "Contact" },
 
+    ],
 
+  },
 
+]

+ 198 - 88
web/src/views/layout/index.vue
Zobraziť súbor 

@@ -7,108 +7,83 @@
 
           <img src="@/assets/images/logo.png" alt="" />
 
         </h1>
 
         <ul class="mainbav">
 
-          <li class=""></li>
 
+          <li
 
+            :class="{ active: $route.meta.myName === item.name }"
 
+            v-for="item in topData"
 
+            :key="item.id"
 
+          >
 
+            <span>{{ item.name }}</span>
 
+            <ul class="mainbav_sub">
 
+              <li v-for="(val, index) in item.children" :key="index">
 
+                {{ val.name }}
 
+              </li>
 
+            </ul>
 
+          </li>
 
+          <!-- 中文网 -->
 
+          <li class="language">
 
+            <a href="http://www.capitalmuseum.org.cn/" target="_blank">中文</a>
 
+          </li>
 
+          <!-- 爱心模式 -->
 
+          <li class="love">
 
+            <span>Caring Mode</span>&nbsp;
 
+            <el-switch v-model="loveFalg" active-color="#AB3434"> </el-switch>
 
+          </li>
 
         </ul>
 
       </div>
 
+      <!-- 右侧的输入框 -->
 
+      <div class="search">
 
+        <el-input
 
+          placeholder="search..."
 
+          suffix-icon="el-icon-search"
 
+          v-model="searchTxt"
 
+        >
 
+        </el-input>
 
+      </div>
 
+    </div>
 
+    <!-- 固定的二维码和游戏 -->
 
+    <div class="rightNav">
 
+      <ul class="rightIco">
 
+        <li title="game">
 
+          <img src="@/assets/images/game.png" alt="" />
 
+        </li>
 
+        <li>
 
+          <img src="@/assets/images/code.png" alt="" />
 
+          <div>
 
+            <img src="@/assets/images/index_ewm1.png" alt="" />
 
+            <img src="@/assets/images/index_ewm.jpg" alt="" />
 
+          </div>
 
+        </li>
 
+      </ul>
 
     </div>
 
     <!-- 嵌套路由 -->
 
     <Router-view />
 
+    <!-- 底部固定栏 -->
 
+    <div class="footer">
 
+      <div>
 
+        <span v-for="item in footerData" :key="item.name" v-html="item.name"></span>
 
+      </div>
 
+      <p>Capital Museum. China 16 Fuxingmenwai Street, Xicheng District, Beijing 100045, P.R.China.</p>
 
+    </div>
 
   </div>
 
 </template>
 
 
 <script>
 
+import { topData } from "./data";
 
 export default {
 
   name: "Layout",
 
   components: {},
 
   data() {
 
     //这里存放数据
 
     return {
 
-      topData: [
 
-        { id: 1, name: "Home", url: "Home" },
 
-        {
 
-          id: 2,
 
-          name: "Visit",
 
-          url: "Visit",
 
-          children: [
 
-            { id: 2.1, name: "Hours, Direction & Admission" },
 
-            { id: 2.2, name: "Reservation" },
 
-            { id: 2.3, name: "Floor Plans" },
 
-            { id: 2.4, name: "Audio Guide & Tour" },
 
-            { id: 2.5, name: "Accessibility" },
 
-            { id: 2.6, name: "Café & Shop" },
 
-            { id: 2.7, name: "Visitor Guidelines" },
 
-          ],
 
-        },
 
-        {
 
-          id: 3,
 
-          name: "Exhibitions",
 
-          url: "Exhibitions",
 
-          children: [
 
-            { id: 3.1, name: "Current Exhibitions" },
 
-            { id: 3.2, name: "Permanent Exhibitions" },
 
-            { id: 3.3, name: "Past Exhibitions" },
 
-            { id: 3.4, name: "Overseas Exhibitions" },
 
-          ],
 
-        },
 
-        {
 
-          id: 4,
 
-          name: "Collections",
 
-          url: "Collections",
 
-          children: [
 
-            { id: 4.1, name: "Bronzes" },
 
-            { id: 4.2, name: "Ceramics" },
 
-            { id: 4.3, name: "Buddhist Statues" },
 
-            { id: 4.4, name: "Jadewares" },
 
-            { id: 4.5, name: "Calligraphies" },
 
-            { id: 4.6, name: "Paintings" },
 
-            { id: 4.7, name: "Gold & Silverwares" },
 
-            { id: 4.8, name: "Coins & Banknotes" },
 
-            { id: 4.9, name: "Brocades & Embroideries" },
 
-            { id: 4.1, name: "Cultural Supplies" },
 
-            { id: 4.11, name: "Miscellaneous" },
 
-          ],
 
-        },
 
-        {
 
-          id: 5,
 
-          name: "Learn & Engage",
 
-          url: "LearnEngage",
 
-          children: [
 
-            { id: 5.1, name: "For Students" },
 
-            { id: 5.2, name: "For Adults" },
 
-            { id: 5.3, name: "For Families & Children" },
 
-          ],
 
-        },
 
-        {
 
-          id: 6,
 
-          name: "Publications",
 
-          url: "Publications",
 
-          children: [
 
-            { id: 6.1, name: "Magazines" },
 
-            { id: 6.2, name: "Exhibition Catalogues" },
 
-            { id: 6.3, name: "Exhibition Brochures" },
 
-          ],
 
-        },
 
-        {
 
-          id: 7,
 
-          name: "Join & Support",
 
-          url: "JoinSupport",
 
-          children: [
 
-            { id: 7.1, name: "Ways to Volunteer" },
 
-            { id: 7.2, name: "Ways to Give" },
 
-          ],
 
-        },
 
-        {
 
-          id: 8,
 
-          name: "About",
 
-          url: "About",
 
-          children: [
 
-            { id: 8.1, name: "From the Director" },
 
-            { id: 8.2, name: "History" },
 
-            { id: 8.3, name: "Partners & Connections" },
 
-            { id: 8.4, name: "Contact" },
 
-          ],
 
-        },
 
-      ],
 
+      topData,
 
+      loveFalg: false,
 
+      searchTxt: "",
 
+      footerData:[
 
+        {name:'|&emsp; Site Index',path:''},
 
+        {name:'|&emsp; Terms of Use',path:''},
 
+        {name:'|&emsp; Events',path:''},
 
+        {name:'|&emsp; Employment',path:''},
 
+      ]
 
     };
 
   },
 
   //监听属性 类似于data概念
 
@@ -145,7 +120,7 @@ export default {
 
   left: 0;
 
   z-index: 999;
 
   .mainbav_wrap {
 
-    width: 1200px;
 
+    width: 1300px;
 
     margin: 0 auto;
 
     & > h1 {
 
       float: left;
 
@@ -156,6 +131,141 @@ export default {
 
         vertical-align: top;
 
       }
 
     }
 
+    .mainbav {
 
+      font-size: 14px;
 
+      color: #fff;
 
+      line-height: 60px;
 
+      & > li {
 
+        cursor: pointer;
 
+        float: left;
 
+        display: inline;
 
+        margin-right: 25px;
 
+        position: relative;
 
+        &:hover {
 
+          & > span {
 
+            border-bottom: 2px solid #ca000a;
 
+          }
 
+          .mainbav_sub {
 
+            display: block;
 
+          }
 
+        }
 
+        .mainbav_sub {
 
+          display: none;
 
+          position: absolute;
 
+
 
+          & > li {
 
+            border-left: 2px solid #660005;
 
+            font-size: 14px;
 
+            color: #fff;
 
+            line-height: 40px;
 
+            background-color: rgba(0, 0, 0, 0.8);
 
+            white-space: nowrap;
 
+            float: none;
 
+            display: block;
 
+            margin: 0;
 
+            padding: 0 20px 0 10px;
 
+            &:hover {
 
+              background-color: rgba(204, 0, 3, 0.8);
 
+              border-left: 2px solid #cc0003;
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .language {
 
+        background: url("../../assets/images/dh1.png") no-repeat 0 18px;
 
+        width: 73px;
 
+        text-indent: 41px;
 
+        & > a {
 
+          color: #fff;
 
+          text-decoration: none;
 
+          &:hover {
 
+            border-bottom: 2px solid #ca000a;
 
+          }
 
+        }
 
+      }
 
+      .love {
 
+        margin-right: 0;
 
+        &:hover {
 
+          & > span {
 
+            border-bottom: none;
 
+          }
 
+        }
 
+      }
 
+      .active {
 
+        & > span {
 
+          border-bottom: 2px solid #ca000a;
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .search {
 
+    width: 240px;
 
+    height: 30px;
 
+    position: absolute;
 
+    top: 50%;
 
+    right: 40px;
 
+    transform: translateY(-50%);
 
+    ::-webkit-input-placeholder {
 
+      color: #000000;
 
+    }
 
+    /deep/.el-input__icon {
 
+      font-size: 20px;
 
+      line-height: 30px;
 
+      color: #ca000a;
 
+    }
 
+  }
 
+}
 
+.rightNav {
 
+  width: 60px;
 
+  height: 164px;
 
+  position: fixed;
 
+  bottom: 150px;
 
+  right: 0;
 
+  z-index: 999;
 
+  .rightIco {
 
+    width: 100%;
 
+    height: 100%;
 
+    & > li {
 
+      background-color: rgba(0, 0, 0, 0.8);
 
+      text-align: center;
 
+      width: 60px;
 
+      padding: 10px 0;
 
+      position: relative;
 
+      cursor: pointer;
 
+      & > div {
 
+        display: none;
 
+        width: 252px;
 
+        position: absolute;
 
+        top: 0;
 
+        right: 0;
 
+        & > img {
 
+          float: left;
 
+        }
 
+      }
 
+      &:hover {
 
+        background-color: #c20e11;
 
+        & > div {
 
+          display: block;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+.footer {
 
+  padding: 0 100px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  width: 100%;
 
+  height: 45px;
 
+  font-size: 14px;
 
+  color: #fff;
 
+  line-height: 45px;
 
+  background: url(../../assets/images/footer_bg.png) center top;
 
+  &>div{
 
+    &>span{
 
+      cursor: pointer;
 
+      margin-right: 15px;
 
+    }
 
   }
 
 }
 
 </style>