zls

package-lock.json

@@ -930,6 +930,11 @@
       "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
       "dev": true
     },
+    "@sindresorhus/is": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npm.taobao.org/@sindresorhus/is/download/@sindresorhus/is-0.7.0.tgz",
+      "integrity": "sha1-mgb08TfuhNffBGDB/bETX/psUP0="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -2348,6 +2353,13 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "http://registry.npm.taobao.org/asap/download/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true,
+      "optional": true
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "http://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz",
@@ -2486,6 +2498,43 @@
       "integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8=",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.19.0.tgz",
+      "integrity": "sha1-jgm/89kSLhM/e4EByPvdAO09Krg=",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz?cache=0&other_urls=http%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.1.0.tgz",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz",
+          "integrity": "sha1-e3qfmuov3/NnhqlP9kPtB/T/Xio=",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.3",
+          "resolved": "http://registry.npm.taobao.org/is-buffer/download/is-buffer-2.0.3.tgz",
+          "integrity": "sha1-Ts8/z3ScvR5HJonhCaxmJhol5yU="
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -3019,6 +3068,42 @@
         "schema-utils": "^1.0.0"
       }
     },
+    "cacheable-request": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npm.taobao.org/cacheable-request/download/cacheable-request-2.1.4.tgz",
+      "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=",
+      "requires": {
+        "clone-response": "1.0.2",
+        "get-stream": "3.0.0",
+        "http-cache-semantics": "3.8.1",
+        "keyv": "3.0.0",
+        "lowercase-keys": "1.0.0",
+        "normalize-url": "2.0.1",
+        "responselike": "1.0.2"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "http://registry.npm.taobao.org/get-stream/download/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+        },
+        "lowercase-keys": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npm.taobao.org/lowercase-keys/download/lowercase-keys-1.0.0.tgz",
+          "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY="
+        },
+        "normalize-url": {
+          "version": "2.0.1",
+          "resolved": "http://registry.npm.taobao.org/normalize-url/download/normalize-url-2.0.1.tgz",
+          "integrity": "sha1-g1qdoVUfom9w6SMpBpojqmV01+Y=",
+          "requires": {
+            "prepend-http": "^2.0.0",
+            "query-string": "^5.0.1",
+            "sort-keys": "^2.0.0"
+          }
+        }
+      }
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/call-me-maybe/download/call-me-maybe-1.0.1.tgz",
@@ -3308,6 +3393,14 @@
       "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true
     },
+    "clone-response": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/clone-response/download/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "http://registry.npm.taobao.org/coa/download/coa-2.0.2.tgz",
@@ -3662,11 +3755,15 @@
         }
       }
     },
+    "core-js": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.9.tgz",
+      "integrity": "sha1-a0shRiDINBUuF5Mjcn/Bl0GwhPI="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "http://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -4093,8 +4190,15 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "http://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+    },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npm.taobao.org/decompress-response/download/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
     },
     "deep-equal": {
       "version": "1.0.1",
@@ -4455,6 +4559,11 @@
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npm.taobao.org/duplexer3/download/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
     "duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npm.taobao.org/duplexify/download/duplexify-3.7.1.tgz",
@@ -5324,7 +5433,6 @@
       "version": "2.3.0",
       "resolved": "http://registry.npm.taobao.org/from2/download/from2-2.3.0.tgz",
       "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "dev": true,
       "requires": {
         "inherits": "^2.0.1",
         "readable-stream": "^2.0.0"
@@ -6012,6 +6120,42 @@
         "slash": "^2.0.0"
       }
     },
+    "got": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npm.taobao.org/got/download/got-8.3.2.tgz",
+      "integrity": "sha1-HSP2Q5Dpf3dsrFLluTbl9RTS6Tc=",
+      "requires": {
+        "@sindresorhus/is": "^0.7.0",
+        "cacheable-request": "^2.1.1",
+        "decompress-response": "^3.3.0",
+        "duplexer3": "^0.1.4",
+        "get-stream": "^3.0.0",
+        "into-stream": "^3.1.0",
+        "is-retry-allowed": "^1.1.0",
+        "isurl": "^1.0.0-alpha5",
+        "lowercase-keys": "^1.0.0",
+        "mimic-response": "^1.0.0",
+        "p-cancelable": "^0.4.0",
+        "p-timeout": "^2.0.1",
+        "pify": "^3.0.0",
+        "safe-buffer": "^5.1.1",
+        "timed-out": "^4.0.1",
+        "url-parse-lax": "^3.0.0",
+        "url-to-options": "^1.0.1"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "http://registry.npm.taobao.org/get-stream/download/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "http://registry.npm.taobao.org/pify/download/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+        }
+      }
+    },
     "graceful-fs": {
       "version": "4.2.2",
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.2.tgz",
@@ -6074,12 +6218,25 @@
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "has-symbol-support-x": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npm.taobao.org/has-symbol-support-x/download/has-symbol-support-x-1.4.2.tgz",
+      "integrity": "sha1-FAn5i8ACR9pF2mfO4KNvKC/yZFU="
+    },
     "has-symbols": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/has-symbols/download/has-symbols-1.0.0.tgz",
       "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=",
       "dev": true
     },
+    "has-to-string-tag-x": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npm.taobao.org/has-to-string-tag-x/download/has-to-string-tag-x-1.4.1.tgz",
+      "integrity": "sha1-oEWrOD17SyASoAFIqwql8pAETU0=",
+      "requires": {
+        "has-symbol-support-x": "^1.4.1"
+      }
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/has-value/download/has-value-1.0.0.tgz",
@@ -6318,6 +6475,11 @@
         }
       }
     },
+    "http-cache-semantics": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npm.taobao.org/http-cache-semantics/download/http-cache-semantics-3.8.1.tgz",
+      "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI="
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "http://registry.npm.taobao.org/http-deceiver/download/http-deceiver-1.2.7.tgz",
@@ -6446,6 +6608,13 @@
       "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -6523,8 +6692,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz?cache=0&sync_timestamp=1560975547815&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finherits%2Fdownload%2Finherits-2.0.4.tgz",
-      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=",
-      "dev": true
+      "integrity": "sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w="
     },
     "inquirer": {
       "version": "6.5.1",
@@ -6628,6 +6796,22 @@
         }
       }
     },
+    "into-stream": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/into-stream/download/into-stream-3.1.0.tgz",
+      "integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
+      "requires": {
+        "from2": "^2.1.1",
+        "p-is-promise": "^1.1.0"
+      },
+      "dependencies": {
+        "p-is-promise": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npm.taobao.org/p-is-promise/download/p-is-promise-1.1.0.tgz",
+          "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4="
+        }
+      }
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "http://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz",
@@ -6841,6 +7025,11 @@
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
+    "is-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/is-object/download/is-object-1.0.1.tgz",
+      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA="
+    },
     "is-path-cwd": {
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/is-path-cwd/download/is-path-cwd-2.2.0.tgz?cache=0&sync_timestamp=1562347283002&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-path-cwd%2Fdownload%2Fis-path-cwd-2.2.0.tgz",
@@ -6868,8 +7057,7 @@
     "is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/is-plain-obj/download/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-      "dev": true
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
     },
     "is-plain-object": {
       "version": "2.0.4",
@@ -6901,6 +7089,11 @@
       "integrity": "sha1-+xj4fOH+uSUWnJpAfBkxijIG7Yg=",
       "dev": true
     },
+    "is-retry-allowed": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/is-retry-allowed/download/is-retry-allowed-1.1.0.tgz",
+      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/is-stream/download/is-stream-1.1.0.tgz",
@@ -6946,8 +7139,7 @@
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz?cache=0&sync_timestamp=1562592096220&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fisarray%2Fdownload%2Fisarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
     },
     "isexe": {
       "version": "2.0.0",
@@ -6967,6 +7159,15 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "isurl": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/isurl/download/isurl-1.0.0.tgz",
+      "integrity": "sha1-sn9PSfPNqj6kSgpbfzRi5u3DnWc=",
+      "requires": {
+        "has-to-string-tag-x": "^1.2.0",
+        "is-object": "^1.0.1"
+      }
+    },
     "javascript-stringify": {
       "version": "1.6.0",
       "resolved": "https://registry.npm.taobao.org/javascript-stringify/download/javascript-stringify-1.6.0.tgz",
@@ -7022,6 +7223,11 @@
       "integrity": "sha1-gFZNLkg9rPbo7yCWUKZ98/DCg6Q=",
       "dev": true
     },
+    "json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/json-buffer/download/json-buffer-3.0.0.tgz",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
+    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "http://registry.npm.taobao.org/json-parse-better-errors/download/json-parse-better-errors-1.0.2.tgz",
@@ -7096,6 +7302,14 @@
         "verror": "1.10.0"
       }
     },
+    "keyv": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/keyv/download/keyv-3.0.0.tgz",
+      "integrity": "sha1-RJI7o55osSp87H32wyaMAx8u83M=",
+      "requires": {
+        "json-buffer": "3.0.0"
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@@ -7136,6 +7350,57 @@
         "invert-kv": "^2.0.0"
       }
     },
+    "less": {
+      "version": "3.10.3",
+      "resolved": "https://registry.npm.taobao.org/less/download/less-3.10.3.tgz",
+      "integrity": "sha1-QXoJddXu7MUs/0vPo8CdNXgeZ5I=",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.2",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "mime": "^1.4.1",
+        "mkdirp": "^0.5.0",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "http://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npm.taobao.org/mime/download/mime-1.6.0.tgz?cache=0&sync_timestamp=1560034758817&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime%2Fdownload%2Fmime-1.6.0.tgz",
+          "integrity": "sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npm.taobao.org/less-loader/download/less-loader-5.0.0.tgz",
+      "integrity": "sha1-SY3eOmxsT4h0WO6e0/CGoSrRtGY=",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^4.0.1"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "http://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        }
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "http://registry.npm.taobao.org/levn/download/levn-0.3.0.tgz",
@@ -7319,6 +7584,11 @@
       "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
       "dev": true
     },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/lowercase-keys/download/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha1-b54wtHCE2XGnyCD/FabFFnt0wm8="
+    },
     "lru-cache": {
       "version": "4.1.5",
       "resolved": "http://registry.npm.taobao.org/lru-cache/download/lru-cache-4.1.5.tgz",
@@ -7506,6 +7776,11 @@
       "integrity": "sha1-ftLCzMyvhNP/y3pptXcR/CCDQBs=",
       "dev": true
     },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/mimic-response/download/mimic-response-1.0.1.tgz",
+      "integrity": "sha1-SSNTiHju9CBjy4o+OweYeBSHqxs="
+    },
     "mini-css-extract-plugin": {
       "version": "0.6.0",
       "resolved": "https://registry.npm.taobao.org/mini-css-extract-plugin/download/mini-css-extract-plugin-0.6.0.tgz?cache=0&sync_timestamp=1563310319732&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmini-css-extract-plugin%2Fdownload%2Fmini-css-extract-plugin-0.6.0.tgz",
@@ -7869,8 +8144,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -8107,6 +8381,11 @@
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
+    "p-cancelable": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npm.taobao.org/p-cancelable/download/p-cancelable-0.4.1.tgz",
+      "integrity": "sha1-NfNj1n1SCByNlYXje8zrfgu8sqA="
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/p-defer/download/p-defer-1.0.0.tgz?cache=0&sync_timestamp=1559922734651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-defer%2Fdownload%2Fp-defer-1.0.0.tgz",
@@ -8116,8 +8395,7 @@
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/p-finally/download/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
     "p-is-promise": {
       "version": "2.1.0",
@@ -8175,6 +8453,14 @@
         "retry": "^0.12.0"
       }
     },
+    "p-timeout": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/p-timeout/download/p-timeout-2.0.1.tgz",
+      "integrity": "sha1-2N0ZeVldLcATnh/ka4tkbLPN8Dg=",
+      "requires": {
+        "p-finally": "^1.0.0"
+      }
+    },
     "p-try": {
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/p-try/download/p-try-1.0.0.tgz",
@@ -8917,8 +9203,7 @@
     "prepend-http": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/prepend-http/download/prepend-http-2.0.0.tgz",
-      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-      "dev": true
+      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
     },
     "prettier": {
       "version": "1.16.3",
@@ -8951,8 +9236,7 @@
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npm.taobao.org/process-nextick-args/download/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I=",
-      "dev": true
+      "integrity": "sha1-eCDZsWEgzFXKmud5JoCufbptf+I="
     },
     "progress": {
       "version": "2.0.3",
@@ -8960,6 +9244,16 @@
       "integrity": "sha1-foz42PW48jnBvGi+tOt4Vn1XLvg=",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "http://registry.npm.taobao.org/promise/download/promise-7.3.1.tgz",
+      "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz",
@@ -9063,7 +9357,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npm.taobao.org/query-string/download/query-string-5.1.1.tgz?cache=0&sync_timestamp=1564173124567&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquery-string%2Fdownload%2Fquery-string-5.1.1.tgz",
       "integrity": "sha1-p4wBK3HBfgXy4/ojGd0zBoLvs8s=",
-      "dev": true,
       "requires": {
         "decode-uri-component": "^0.2.0",
         "object-assign": "^4.1.0",
@@ -9155,7 +9448,6 @@
       "version": "2.3.6",
       "resolved": "https://registry.npm.taobao.org/readable-stream/download/readable-stream-2.3.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freadable-stream%2Fdownload%2Freadable-stream-2.3.6.tgz",
       "integrity": "sha1-sRwn2IuP8fvgcGQ8+UsMea4bCq8=",
-      "dev": true,
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -9169,14 +9461,12 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
-          "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
-          "dev": true
+          "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
         },
         "string_decoder": {
           "version": "1.1.1",
           "resolved": "https://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz",
           "integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=",
-          "dev": true,
           "requires": {
             "safe-buffer": "~5.1.0"
           }
@@ -9468,6 +9758,14 @@
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
       "dev": true
     },
+    "responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/responselike/download/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "requires": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
     "restore-cursor": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/restore-cursor/download/restore-cursor-2.0.0.tgz",
@@ -9568,8 +9866,7 @@
     "safe-buffer": {
       "version": "5.2.0",
       "resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.2.0.tgz",
-      "integrity": "sha1-t02uxJsRSPiMZLaNSbHoFcHy9Rk=",
-      "dev": true
+      "integrity": "sha1-t02uxJsRSPiMZLaNSbHoFcHy9Rk="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -9991,7 +10288,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/sort-keys/download/sort-keys-2.0.0.tgz?cache=0&sync_timestamp=1565864727994&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsort-keys%2Fdownload%2Fsort-keys-2.0.0.tgz",
       "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
-      "dev": true,
       "requires": {
         "is-plain-obj": "^1.0.0"
       }
@@ -10262,8 +10558,7 @@
     "strict-uri-encode": {
       "version": "1.1.0",
       "resolved": "http://registry.npm.taobao.org/strict-uri-encode/download/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
-      "dev": true
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
     "string-width": {
       "version": "2.1.1",
@@ -10604,6 +10899,11 @@
       "integrity": "sha1-9d9zJFNAewkZHa5z4qjMc/OBqCY=",
       "dev": true
     },
+    "timed-out": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npm.taobao.org/timed-out/download/timed-out-4.0.1.tgz",
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
+    },
     "timers-browserify": {
       "version": "2.0.11",
       "resolved": "https://registry.npm.taobao.org/timers-browserify/download/timers-browserify-2.0.11.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftimers-browserify%2Fdownload%2Ftimers-browserify-2.0.11.tgz",
@@ -10994,6 +11294,19 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/url-parse-lax/download/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "requires": {
+        "prepend-http": "^2.0.0"
+      }
+    },
+    "url-to-options": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/url-to-options/download/url-to-options-1.0.1.tgz",
+      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "http://registry.npm.taobao.org/use/download/use-3.1.1.tgz",
@@ -11020,8 +11333,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "http://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
       "version": "1.0.0",
@@ -11095,6 +11407,11 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-axios": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npm.taobao.org/vue-axios/download/vue-axios-2.1.4.tgz",
+      "integrity": "sha1-qdKY9+h2+ah/6zNrN63LzjT/n58="
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-5.0.0.tgz",
@@ -11169,6 +11486,14 @@
         }
       }
     },
+    "vue-resource": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/vue-resource/download/vue-resource-1.5.1.tgz",
+      "integrity": "sha1-Dz1oXjJU0hgAvr2Wbtz1bDSztuQ=",
+      "requires": {
+        "got": "^8.0.3"
+      }
+    },
     "vue-router": {
       "version": "3.1.2",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.2.tgz",

package.json

@@ -8,10 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "element-ui": "^2.11.1",
     "swiper": "^4.5.0",
     "vue": "^2.6.10",
+    "vue-axios": "^2.1.4",
+    "vue-resource": "^1.5.1",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },
@@ -22,6 +25,8 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {

public/iconfont.css

@@ -0,0 +1,33 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1567077690040'); /* IE9 */
+  src: url('iconfont.eot?t=1567077690040#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVQAAsAAAAACnwAAAUCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqIGIY9ATYCJAMUCwwABCAFhG0HSRvKCFGUTk6C7IvC2FgafadT2Zw4+5fiRr7QwWjyj6Owb/nwv6l/rkCoOzMjmanQBFISp3Si6cQyMfsS8cz9mX+9/k1QBrcDcOAJBoYd7a9/e02anUOCPphAhXRo30gmKis8/9mRWBRKim2RtvaYvLc7ujRN9QSsjp3FpZXNpbVirQCGAty1fm9WqvA/0APau7/qP8LraiAb+ML1QADEo1hDpFuPfsMggcPejQAgPsOtQirowTvoBJJKbDiWg6yCAIkuoQ8ArIy+n/yNJkkAhcBg7ztou7vQ6W1/RFnke8S4gADRfFYA4kkAA9AQwAFiNtp9WCJvGKH4pp/j6ASIhwQK+pvtt/TfmvwR/f6dTHoiPN75gwcwUHAQgIiwUSJSOyn4lRN5GDDgt3QMKPBbEww48EdUfF+QgMr4mYrIUIAsA2pNRJ6cIJ1mEYrsR1DSjHuvRry9ajI0psKqYex36MZpqIJO6FWsunV2yFLcf3A9p+1fPSexHtM3bgTY9dRv6jsBukjW+gWTqaN3Ervx+Dwfuva8DHdRXftkKTlRzgbYSzo6jB2y9I1bKV1zVy4t0a4N3YRpxtSxICeZmz6LVj+Hf77svdm8vru/i27lmNdHZuqoxbVu6VwVWvUNlfP1YHZvjM5WykriT1Yhs72bc89sCdkxoyoPceKXBiGVyU2IOjOqazENueuV8Y7NdOqXX5HKzy1LiNJu+2Pve270sXOh8tplv3gxrPJle7P7yusaX18j6iq/olx59LWoSVVhfIdOj/vltzxRIBGTry39P+2/27ZqpkaY98u/H6+ks9OV0HQ2pPhRzdrDH7Frd6Vai7r67UYvQf19wZo0Fq19qjugu6Vt0dmZbIe/JN676x4G7cXfme7OewlfI67atPM1CWnUbaYyrvXgcGXge//rHEcumsGzkDMxR+r0um/i7I5dunSLDP/f1oR9DwvslOpocHZlSW5a7ibFDvLFsWaJIigcoF3sqCg2wcORO0WxQenCHTFtUGxQNfGOUN1WkoSkWCKS7iQhMaboirROekxIl1ePeECV18SSUo7GrqYk7clrtN4Rq4E8bbwzXSoZh98hGQs1wAfNY5TkTv542tXY0c/DNzZl6m1HWbsWddW+fdW6Lbps3+L89vbOLSfV7de3jtqifWPjVYfjk2gkQic1rTd60PjxY8eG6o1hhSeIVKq05SRHYlVV4kQHpgKA79kJ+h8AMJ3+LLGxXazY+YqN+LRuw4KFWasnprSrkhK+wCNvl79qHXm/46AhfOSUIIs+myJiDzcktkHgWr0n1AoFLIIEvM7ij2HNJ9Kd7tM8pixzJgkkZGVAYUMRMEioSeTUhiAgAc1AhISOEI8Gep6cgAwmBsLjANS3gAFBqiNAkYwrwJDqIZFTP4KAbP+CiNQYxGNEGedMQO2M+K6mplqaSy6dJhvOYEB3TVZ8XDpEc1f4VDMviRgjNLPcCMmNFUc51VMLaOYcB5RPdjexLF3WzaBf7sFupvl8QTlkBj2a01LKLCvUxm7Xm15IcQb9iEdXJo3KonGRlZpGZnAKCtCD4Zb4ytcPoXGr4KMyOxrq3CNoTOWM8WWNKRwEYk8UIDXcS3W5ydyasDCqk+licZCfrAdaNT4nHiQLNW/y0DhZFGUjoiFt2HGQTkXK+rj/MRb9MZra5xQIJYxwIhARNpehBsoqVNHtLQ2UGqJTNVxqgE1nOgAAAA==') format('woff2'),
+  url('iconfont.woff?t=1567077690040') format('woff'),
+  url('iconfont.ttf?t=1567077690040') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1567077690040#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dianhua:before {
+  content: "\e88b";
+}
+
+.icon-guanbi:before {
+  content: "\e612";
+}
+
+.icon-caidan:before {
+  content: "\e607";
+}
+
+.icon-zan:before {
+  content: "\e632";
+}
+

public/index.html

@@ -4,11 +4,16 @@
     <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">
     <link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />
     <script src="./static/js/jquery.min.js"></script>
+    <!-- <script src="./until/jquery-1.8.3.min.js"></script> -->
     <script src="./bootstrap/js/bootstrap.min.js"></script>
+    <script src="./swiper/dist/js/swiper.min.js"></script>
     <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./swiper/dist/css/swiper.min.css">
+    <link rel="stylesheet" href="./iconfont.css">
     <title>foyo</title>
   </head>
   <body>

public/swiper/dist/css/swiper.css

@@ -0,0 +1,618 @@
+/**
+ * Swiper 4.5.0
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * http://www.idangero.us/swiper/
+ *
+ * Copyright 2014-2019 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: February 22, 2019
+ */
+.swiper-container {
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+.swiper-container-no-flexbox .swiper-slide {
+  float: left;
+}
+.swiper-container-vertical > .swiper-wrapper {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  -o-transition-property: transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.swiper-container-android .swiper-slide,
+.swiper-wrapper {
+  -webkit-transform: translate3d(0px, 0, 0);
+  transform: translate3d(0px, 0, 0);
+}
+.swiper-container-multirow > .swiper-wrapper {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.swiper-container-free-mode > .swiper-wrapper {
+  -webkit-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+.swiper-slide {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  -o-transition-property: transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+}
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+/* Auto Height */
+.swiper-container-autoheight,
+.swiper-container-autoheight .swiper-slide {
+  height: auto;
+}
+.swiper-container-autoheight .swiper-wrapper {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  -webkit-transition-property: height, -webkit-transform;
+  transition-property: height, -webkit-transform;
+  -o-transition-property: transform, height;
+  transition-property: transform, height;
+  transition-property: transform, height, -webkit-transform;
+}
+/* 3D Effects */
+.swiper-container-3d {
+  -webkit-perspective: 1200px;
+  perspective: 1200px;
+}
+.swiper-container-3d .swiper-wrapper,
+.swiper-container-3d .swiper-slide,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-cube-shadow {
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+.swiper-container-3d .swiper-slide-shadow-left {
+  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-right {
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-top {
+  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+.swiper-container-3d .swiper-slide-shadow-bottom {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+/* IE10 Windows Phone 8 Fixes */
+.swiper-container-wp8-horizontal,
+.swiper-container-wp8-horizontal > .swiper-wrapper {
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+}
+.swiper-container-wp8-vertical,
+.swiper-container-wp8-vertical > .swiper-wrapper {
+  -ms-touch-action: pan-x;
+  touch-action: pan-x;
+}
+.swiper-button-prev,
+.swiper-button-next {
+  position: absolute;
+  top: 50%;
+  width: 27px;
+  height: 44px;
+  margin-top: -22px;
+  z-index: 10;
+  cursor: pointer;
+  background-size: 27px 44px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0.35;
+  cursor: auto;
+  pointer-events: none;
+}
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+  left: 10px;
+  right: auto;
+}
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+  right: 10px;
+  left: auto;
+}
+.swiper-button-prev.swiper-button-white,
+.swiper-container-rtl .swiper-button-next.swiper-button-white {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-next.swiper-button-white,
+.swiper-container-rtl .swiper-button-prev.swiper-button-white {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-prev.swiper-button-black,
+.swiper-container-rtl .swiper-button-next.swiper-button-black {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-next.swiper-button-black,
+.swiper-container-rtl .swiper-button-prev.swiper-button-black {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
+}
+.swiper-button-lock {
+  display: none;
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  -webkit-transition: 300ms opacity;
+  -o-transition: 300ms opacity;
+  transition: 300ms opacity;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination.swiper-pagination-hidden {
+  opacity: 0;
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-container-horizontal > .swiper-pagination-bullets {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
+  overflow: hidden;
+  font-size: 0;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  -webkit-transform: scale(0.33);
+  -ms-transform: scale(0.33);
+  transform: scale(0.33);
+  position: relative;
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+  -webkit-transform: scale(0.66);
+  -ms-transform: scale(0.66);
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+  -webkit-transform: scale(0.33);
+  -ms-transform: scale(0.33);
+  transform: scale(0.33);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+  -webkit-transform: scale(0.66);
+  -ms-transform: scale(0.66);
+  transform: scale(0.66);
+}
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+  -webkit-transform: scale(0.33);
+  -ms-transform: scale(0.33);
+  transform: scale(0.33);
+}
+.swiper-pagination-bullet {
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  border-radius: 100%;
+  background: #000;
+  opacity: 0.2;
+}
+button.swiper-pagination-bullet {
+  border: none;
+  margin: 0;
+  padding: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.swiper-pagination-clickable .swiper-pagination-bullet {
+  cursor: pointer;
+}
+.swiper-pagination-bullet-active {
+  opacity: 1;
+  background: #007aff;
+}
+.swiper-container-vertical > .swiper-pagination-bullets {
+  right: 10px;
+  top: 50%;
+  -webkit-transform: translate3d(0px, -50%, 0);
+  transform: translate3d(0px, -50%, 0);
+}
+.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 6px 0;
+  display: block;
+}
+.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 8px;
+}
+.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  display: inline-block;
+  -webkit-transition: 200ms top, 200ms -webkit-transform;
+  transition: 200ms top, 200ms -webkit-transform;
+  -o-transition: 200ms transform, 200ms top;
+  transition: 200ms transform, 200ms top;
+  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+  margin: 0 4px;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  -webkit-transition: 200ms left, 200ms -webkit-transform;
+  transition: 200ms left, 200ms -webkit-transform;
+  -o-transition: 200ms transform, 200ms left;
+  transition: 200ms transform, 200ms left;
+  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
+}
+.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  -webkit-transition: 200ms right, 200ms -webkit-transform;
+  transition: 200ms right, 200ms -webkit-transform;
+  -o-transition: 200ms transform, 200ms right;
+  transition: 200ms transform, 200ms right;
+  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
+}
+/* Progress */
+.swiper-pagination-progressbar {
+  background: rgba(0, 0, 0, 0.25);
+  position: absolute;
+}
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  background: #007aff;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform-origin: left top;
+}
+.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  -webkit-transform-origin: right top;
+  -ms-transform-origin: right top;
+  transform-origin: right top;
+}
+.swiper-container-horizontal > .swiper-pagination-progressbar,
+.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 100%;
+  height: 4px;
+  left: 0;
+  top: 0;
+}
+.swiper-container-vertical > .swiper-pagination-progressbar,
+.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+  width: 4px;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.swiper-pagination-white .swiper-pagination-bullet-active {
+  background: #ffffff;
+}
+.swiper-pagination-progressbar.swiper-pagination-white {
+  background: rgba(255, 255, 255, 0.25);
+}
+.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
+  background: #ffffff;
+}
+.swiper-pagination-black .swiper-pagination-bullet-active {
+  background: #000000;
+}
+.swiper-pagination-progressbar.swiper-pagination-black {
+  background: rgba(0, 0, 0, 0.25);
+}
+.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
+  background: #000000;
+}
+.swiper-pagination-lock {
+  display: none;
+}
+/* Scrollbar */
+.swiper-scrollbar {
+  border-radius: 10px;
+  position: relative;
+  -ms-touch-action: none;
+  background: rgba(0, 0, 0, 0.1);
+}
+.swiper-container-horizontal > .swiper-scrollbar {
+  position: absolute;
+  left: 1%;
+  bottom: 3px;
+  z-index: 50;
+  height: 5px;
+  width: 98%;
+}
+.swiper-container-vertical > .swiper-scrollbar {
+  position: absolute;
+  right: 3px;
+  top: 1%;
+  z-index: 50;
+  width: 5px;
+  height: 98%;
+}
+.swiper-scrollbar-drag {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  left: 0;
+  top: 0;
+}
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+.swiper-scrollbar-lock {
+  display: none;
+}
+.swiper-zoom-container {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+}
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg,
+.swiper-zoom-container > canvas {
+  max-width: 100%;
+  max-height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+.swiper-slide-zoomed {
+  cursor: move;
+}
+/* Preloader */
+.swiper-lazy-preloader {
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -21px;
+  margin-top: -21px;
+  z-index: 10;
+  -webkit-transform-origin: 50%;
+  -ms-transform-origin: 50%;
+  transform-origin: 50%;
+  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
+  animation: swiper-preloader-spin 1s steps(12, end) infinite;
+}
+.swiper-lazy-preloader:after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  background-position: 50%;
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+.swiper-lazy-preloader-white:after {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+@-webkit-keyframes swiper-preloader-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes swiper-preloader-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+/* a11y */
+.swiper-container .swiper-notification {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+}
+.swiper-container-fade.swiper-container-free-mode .swiper-slide {
+  -webkit-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.swiper-container-fade .swiper-slide {
+  pointer-events: none;
+  -webkit-transition-property: opacity;
+  -o-transition-property: opacity;
+  transition-property: opacity;
+}
+.swiper-container-fade .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-fade .swiper-slide-active,
+.swiper-container-fade .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube {
+  overflow: visible;
+}
+.swiper-container-cube .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 1;
+  visibility: hidden;
+  -webkit-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+  width: 100%;
+  height: 100%;
+}
+.swiper-container-cube .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-cube.swiper-container-rtl .swiper-slide {
+  -webkit-transform-origin: 100% 0;
+  -ms-transform-origin: 100% 0;
+  transform-origin: 100% 0;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-next,
+.swiper-container-cube .swiper-slide-prev,
+.swiper-container-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+.swiper-container-cube .swiper-slide-shadow-top,
+.swiper-container-cube .swiper-slide-shadow-bottom,
+.swiper-container-cube .swiper-slide-shadow-left,
+.swiper-container-cube .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.swiper-container-cube .swiper-cube-shadow {
+  position: absolute;
+  left: 0;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.6;
+  -webkit-filter: blur(50px);
+  filter: blur(50px);
+  z-index: 0;
+}
+.swiper-container-flip {
+  overflow: visible;
+}
+.swiper-container-flip .swiper-slide {
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 1;
+}
+.swiper-container-flip .swiper-slide .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-flip .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active .swiper-slide-active {
+  pointer-events: auto;
+}
+.swiper-container-flip .swiper-slide-shadow-top,
+.swiper-container-flip .swiper-slide-shadow-bottom,
+.swiper-container-flip .swiper-slide-shadow-left,
+.swiper-container-flip .swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.swiper-container-coverflow .swiper-wrapper {
+  /* Windows 8 IE 10 fix */
+  -ms-perspective: 1200px;
+}

src/App.vue

@@ -1,38 +1,39 @@
 <template>
   <div id="app">
     <div>
-      <nav class="navbar navbar-default navbar-fixed-top">
-        <div class="container-fluid">
-         
+      <nav class="navbar navbar-default navbar-fixed-top" :class="{ 'scroll': scrolled }">
+        <div class="container-fluid con">
           <!-- Brand and toggle get grouped for better mobile display -->
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
+              <span class="iconfont icon-caidan"></span>
             </button>
-            <p class="navbar-text" style="color:red">
-              FOYO
-              <a style="color:black">福予传媒</a>
-            </p>
+            <a class="navbar-brand" href="#">
+              <!-- <img alt="Brand" src="./assets/logo1.png" /> -->
+              <div alt="Brand" class="logo"></div>
+            </a>
           </div>
 
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav navbar-right">
-              <li>
+              <!-- <router-link to="/">首页</router-link> 
+                        <router-link to="/case" class="a"  style="color:#000000;">案例</router-link>
+                        <router-link to="/dynamic" class="a" style="color:#000000;">动态</router-link>
+                        <router-link to="/about" class="a" style="color:#000000;">关于</router-link>
+              <router-link to="/contact" class="a" style="color:#000000;">联系</router-link>-->
+              <li class="a">
                 <a href="/">首页</a>
               </li>
-              <li>
+              <li class="a">
                 <a href="/case">案例</a>
               </li>
-              <li>
+              <li class="a">
                 <a href="/dynamic">动态</a>
               </li>
-              <li>
+              <li class="a">
                 <a href="/about">关于</a>
               </li>
-              <li>
+              <li class="a">
                 <a href="/contact">联系</a>
               </li>
             </ul>
@@ -61,26 +62,89 @@
            
                         </div>glyphicon glyphicon-menu-up
     <router-view/>-->
-    <div>
-      <a class="btn btn-default" href="#" role="button" style="position:fixed;right:0;bottom:80px">
-        <span class="glyphicon glyphicon-menu-up"></span>
-      </a>
-      <a class="btn btn-default" href="#" role="button" style="position:fixed;right:0;bottom:50px">
-        <span class="glyphicon glyphicon-menu-up"></span>
-      </a>
+
+    <div class="coll">
+      <div>
+        <div class="btn btn-default" href="#" role="button" v-if="!current1" @mouseenter="enter1()" @mouseleave="leave1()" style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 3;">
+          <img src="./assets/image/联系我们.jpg" alt style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 3;" />
+        </div>
+        <el-button class="btn btn-default" @click="open" v-if="current1" @mouseenter.stop="enter1()" style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 4;">
+          <img src="./assets/image/联系我们触发.png" @mouseleave="leave1()" alt style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 4;" />
+        </el-button>
+      </div>
+    </div>
+    <div class="coll">
+      <div>
+        <a href="#" role="button" @mouseenter="enter2()" @mouseleave="leave2()" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 3;">
+          <img src="./assets/image/返回顶层.jpg" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 3;" />
+        </a>
+      </div>
+      <div>
+        <a class="back-top" href="#" role="button" v-if="current2" @mouseenter.stop="enter2()" @mouseleave="leave2()" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 4;">
+          <img src="./assets/image/返回顶层触发.jpg" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 4;" />
+        </a>
+      </div>
     </div>
 
     <div class="page-footer" style="background-color:#1b1b1b">
-      
-      <div style="color:rgb(255,255,255)">© 2019 All rights reserved.</div>
+      <p class="footer-p" style="color:rgb(255,255,255)">© 2019 All rights reserved.</p>
     </div>
   </div>
 </template>
 
 
 <script>
+import ClickContact from "@/components/ClickContact.vue";
 
 export default {
+  data () {
+    return {
+      scrolled: false,
+      current1: false,
+      current2: false,
+    }
+  },
+  components: {
+    ClickContact,
+  },
+  methods: {
+    enter1 () {
+
+      this.current1 = true;
+      this.current2 = false;
+    },
+    leave1 () {
+
+      this.current1 = false;
+    },
+
+    enter2 () {
+      this.current2 = true;
+      this.current1 = false;
+    },
+    leave2 () {
+
+      this.current2 = false;
+    },
+
+    open () {
+      this.$alert('', {
+        dangerouslyUseHTMLString: true
+      });
+    }
+
+  },
+  created () {
+  },
+  mounted () {
+    window.addEventListener('scroll', () => {
+      this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 200
+    })
+
+
+  }
+
+
 
 }
 </script>
@@ -89,30 +153,42 @@ export default {
 
 <style>
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: Microsoft YaHei;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  background-color: fafafa;
   color: #2c3e50;
   margin-top: px;
   width: auto;
   margin: 0;
 }
-.container-fluid{
-  padding-left: 10%;
-  padding-right: 10%;
-  
-}
-.navbar {
-  /* padding-left: 10%;
-  padding-right: 10%; */
-  height: 116px;
+
+.coll {
+  display: none;
 }
-.navbar-text{
-  display: flex;
- align-items:center;
-  
+
+@media (min-width: 992px) {
+  .coll {
+    display: block;
+  }
+  .con {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+  /* .a:hover{
+ text-decoration:underline !important;
+ border: #000;
+} */
+  .page-footer {
+    margin-top: 94px;
+  }
+  .footer-p {
+    padding: 54px auto !important;
+    margin: 0;
+  }
 }
+
 /* #nav{
 
   display: flex;
@@ -124,13 +200,78 @@ export default {
   border: none;去边框
 } */
 
-.main {
-  padding-top: 100px;
+/* padding-right: 50px;
 }
-#abc {
-  padding-right: 50px;
+ */
+.main {
+  padding-bottom: 9.4rem;
 }
+</style>
+
+
+<style lang="less" scoped>
+@media (min-width: 992px) {
+  .navbar {
+    padding: 30px 0;
+    z-index: 50;
+    height: 116px;
+  }
+
+  .navbar {
+    padding: 30px 0;
+    // background-color: transparent;
+    border: none;
+
+    margin: 0;
+
+    .navbar-brand {
+      padding: 0;
+
+      img {
+        height: 100%;
+      }
+    }
+
+    .nav {
+      font-size: 2.6rem;
+      li {
+        margin-left: 40px;
+        a {
+          color: #000;
+
+          &:hover {
+            border-bottom: 3px solid #000;
+          }
+        }
+      }
+    }
+
+    .logo {
+      width: 300px;
+      height: 60px;
+      background: url("./assets/logo1.png");
+    }
+
+    // &.scroll {
+    //   transition: all 0.5s;
+    //   background: #fff;
+
+    //   .nav {
+    //     li {
+    //       a {
+    //         color: #000;
+
+    //         &:hover {
+    //           border-bottom: 3px solid #000;
+    //         }
+    //       }
+    //     }
+    //   }
 
-.navbar-nav {
+    //   .logo {
+    //     background: url("./assets/logo1.png");
+    //   }
+    // }
+  }
 }
 </style>

src/components/Business.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="business">
+    <div class="swiper-container" id="swiper2">
+      <div class="swiper-wrapper">
+
+
+
+        <div class="swiper-slide swiper-no-swiping sw" v-for="(item,index) in service" :key="index">
+          <div>
+            <img :src="item.serviceImageUrl"  />
+            <div>
+              <h4>{{item.labelName}}</h4>
+              <p class="text-left">
+                
+              </p>
+            </div>
+          </div>
+        </div>
+      
+    
+
+     
+      </div>
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+    </div>
+    <!-- <div class="contanier st">
+      <div class="col-xs-6 col-md-3">
+        <img src="../assets/image/home/service_brand.jpg" width="100%" height="100%" alt="..." />
+        <div>
+          <h4>品牌服务</h4>
+          <p class="text-left">
+            品牌咨询
+            <br />品牌策划
+            <br />CIS/VIS
+            <br />logo设计
+            <br />
+          </p>
+        </div>
+      </div>
+
+      <div class="col-xs-6 col-md-3">
+        <img src="../assets/image/home/service_plan.jpg" width="100%" height="100%" alt="..." />
+        <div class="caption">
+          <h4>营销与策划</h4>
+          <p class="text-left">
+            营销创意
+            <br />广告创意
+            <br />活动策划与执行
+          </p>
+        </div>
+      </div>
+      <div class="col-xs-6 col-md-3">
+        <img src="../assets/image/home/service_design.jpg" width="100%" height="100%" alt="..." />
+        <div class="caption">
+          <h4>创意设计</h4>
+          <p class="text-left">
+            平面设计
+            <br />平面设计
+            <small>(海报/展架/画册/包装...)</small>
+            <br />数字媒体
+            <small>(H5/短视频/小程序...)</small>
+            <br />动画制作
+            <br />视觉设计
+            <small>(app/网站)</small>
+            <br />空间设计
+            <small>(美陈/展厅/店面/导视)</small>
+            <br />视频包装
+          </p>
+        </div>
+      </div>
+      <div class="col-xs-6 col-md-3">
+        <img src="../assets/image/home/service_make.jpg" width="100%" height="100%" alt="..." />
+        <div class="caption">
+          <h4>制作与传播</h4>
+          <p class="text-left">
+            物料制作
+            <br />传统媒介
+            <br />网络制作
+          </p>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+//  import Swiper from "swiper";
+// import Swiper from "swiper";
+import "swiper/dist/css/swiper.min.css";
+import request from '../../utils/request'
+import apis from '../config/api';
+
+export default {
+  name: "business",
+  data () {
+    return {
+      show: true,
+      service:[]
+    };
+  },
+  components: {},
+
+  mounted () {
+    new Swiper("#swiper2", {
+      // loop: true,
+      slidesPerView: 4,
+      spaceBetween: 60,
+      // slidesOffsetBefore: 100,
+      // slidesOffsetAfter: 100,
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev"
+      }
+    });
+  },
+  created () {
+
+   
+   
+    
+//http://localhost:8080/pc/service/list
+    request({
+      ...apis.service.list,
+      
+      
+    }).then(con => {
+      console.log(con,"124")
+       this.service = con;
+      window.console.log(this.service, "543");
+    })
+
+   
+  }
+
+  
+
+ 
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.st {
+  padding-left: 10%;
+  padding-right: 10%;
+  margin: 0;
+}
+
+h4 {
+  font-size: 24px;
+  padding: 10px;
+  background-color: red;
+  color: #fff;
+  margin: 0;
+  height: 43px;
+}
+</style>

src/components/ClickContact.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="clickcontact">
+    <div class="contact-1">
+      <div class="contact-main">
+        <h1 style="margin-bottom:70px">联系我们</h1>
+
+        <div class="row">
+          <div class="col-md-6 col-xs-6 st1" style="border-right: 1px solid #aaa;">
+            <img class="img1" src="../assets/image/contact/weixin.jpg" />
+            <div>
+              <h2>微信咨询</h2>
+            </div>
+          </div>
+
+          <div class="col-md-6 col-xs-6 st2">
+            <img class="img1" src="../assets/image/contact/QQ.jpg" />
+            <div>
+              <h2>QQ咨询</h2>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <a href="tel:13585167730">
+            <img src="../assets/image/contact/photo.jpg" alt style="padding-top:100px;width:100%" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+/* .contact-box {
+  width: 80%;
+  margin: 0 auto - 120px;
+  
+  .contact-main {
+    width: 704px;
+    text-align: center;
+  }
+
+  .col-xs-6 {
+    &:last-child {
+      float: right;
+    }
+
+    & + .col-xs-6 {
+      
+    }
+  }
+
+} */
+@media (max-width: 992px) {
+  .st1 {
+  }
+}
+
+@media (min-width: 992px) {
+  .contact-1 {
+    width: 80%;
+    padding: 50px;
+    margin-top: -120px;
+
+    background-color: #fff;
+    display: inline-block;
+    border-radius: 0;
+    border: 1px solid #dcdcdc;
+  }
+
+  .contact-1 .contact-main {
+    width: 707px;
+    margin: 0 auto;
+    padding-top: 20px;
+  }
+  .st1 {
+    padding-right: 120px;
+  }
+  .st2 {
+    padding-left: 120px;
+  }
+
+  .contact-2 {
+    padding: 98px 98px 27px 98px;
+  }
+}
+h2 {
+  margin-bottom: -22px;
+}
+
+/* .contact {
+    padding-top: 116px;
+  }
+
+
+  .contact-1 {
+    width: 80%;
+    padding: 50px;
+    margin-top: -120px;
+
+    background-color: #fff;
+    display: inline-block;
+    border-radius: 0;
+    border: 1px solid #dcdcdc;
+  }
+  .contact-2 {
+    padding: 98px 98px 27px 98px;
+ 
+  }
+  .st {
+    padding: 0 100px;
+  }
+  
+  
+  .img1{
+    width: 100%;
+
+  }
+
+  
+
+  .contact-1 > div {
+    width: 704px;
+    margin: 0 auto;
+  }
+
+
+  @media (max-width: 768px) {
+    
+  .contact-1 > div {
+    width: 222px;
+    margin: 0 auto;
+  }
+    
+  } */
+</style>

src/components/HelloWorld.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="hello">
-    <div>
-      123
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Wheelplanting.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="wheelplanting">
+    <div class="swiper-container con-swiper">
+      <div class="swiper-wrapper">
+        <!-- <div class="col-md-2 col-xs-2" v-for="(item,index) in blogs" :key="index+'img'">
+            <img  :src="item.logoImg" alt class="ph-logo" />
+        </div>-->
+        <!-- <div v-for="item in blogs" :key="item">
+          <div class="swiper-slide">
+            <img :src="item.imageUrl" width="100%" height="" alt />
+          </div>
+        </div>-->
+        <div class="swiper-slide" v-for="(url,index) in blogs" :key="index+'url'">
+          <img :src="url.imageUrl" width="100%" height="100%" />
+        </div>
+        <!-- <div class="swiper-slide">
+          <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1566890344965.png?Expires=1568717732&OSSAccessKeyId=LTAIkc75dpkJw8Lb" width="100%" height="100%" />
+        </div>
+        <div class="swiper-slide">
+          <img src="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/1566890344965.png?Expires=1568717732&OSSAccessKeyId=LTAIkc75dpkJw8Lb" width="100%" height="100%" />
+        </div>-->
+      </div>
+      <div class="swiper-pagination"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Swiper from "swiper";
+import "swiper/dist/css/swiper.min.css";
+import request from '../../utils/request';
+import apis from '../config/api';
+
+export default {
+  name: "wheelplanting",
+  data () {
+    return {
+      data: '',
+      blogs: {},
+    };
+  },
+  components: {},
+
+  mounted () {
+
+
+    new Swiper(".swiper-container", {
+      loop: true,
+      autoplay: true,
+      direction: "vertical",
+      observer: true,
+      observeSlideChildren: true,
+
+      pagination: {
+        el: ".swiper-pagination",
+        hideOnClick: true
+      }
+    });
+
+
+
+
+
+  },
+  created () {
+    // axios.get('http://localhost:8080/pc/carousel/list')
+    request({
+      ...apis.carousel.list,
+    }).then(data => {
+
+      this.blogs = data;
+    })
+
+
+
+  }
+};
+</script>
+
+<style scoped>
+@media (min-width: 992px) {
+  .wheelplanting .con-swiper {
+    width: 100%;
+    height: 100vh;
+  }
+}
+@media (max-width: 992px){
+  
+  .wheelplanting .con-swiper {
+    width: 100%;
+   height: 300px;
+  }
+}
+</style>

src/components/mobnav.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="mobnav">
+    <div class="row">
+      <div>
+        <button type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">全部案例</button>
+        <button  v-for="cas in casetype" :key="cas" type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+   data () {
+    return {
+      cover: {},
+      casetype: [],
+      caselist: [],
+      num: 1,
+
+      allLoaded: false,//数据全部加载
+    }
+  },
+  components: {
+
+  },
+
+  created () {
+    // window.console.log(this.cover, "543");
+    // 封面
+    request({
+      ...apis.case.cover,
+
+    }).then(data => {
+      this.cover = data[0];
+    })
+
+
+    // axios.get('http://localhost:8080/pc/case/cover')
+
+    // 分类
+    // axios.get('http://localhost:8080/pc/caseType/list')
+    request({
+      ...apis.caseType.list,
+    })
+      .then(res => {
+
+        this.casetype = res.records;
+
+      })
+    // 内容http://localhost:8080/pc/case/{case}/list
+    request({
+      ...apis.case.list,
+      urlData: { type: 'case' },
+      params: { pageNum: this.num, pageSize: 8 }
+    }).then(con => {
+      // console.log(con,"124")
+      this.caselist = con.records;
+      // window.console.log(this.caselist, "543");
+    }).catch()
+
+
+  },
+
+  computed: {
+
+  },
+
+  methods: {
+    add (a) {
+     
+      console.log(this.num, "124")
+      request({
+        ...apis.case.list,
+        urlData: { type: 'case' },
+        params: { pageNum: a, pageSize: 8 }
+      }).then(con => {
+        console.log(con, "124")
+        this.caselist = this.caselist.concat(con.records);
+        if(con.total%8) this.allLoaded=true;
+      
+        // this.caselist = con.records;
+
+      })
+    },
+
+    classification (Type) {
+       request({
+        ...apis.case.list,
+        urlData: { type: 'case' },
+        params: { pageNum: a, pageSize: 8  }
+      }).then(con => {
+        console.log(con, "124")
+        this.caselist = this.caselist.concat(con.records);
+        
+      
+        // this.caselist = con.records;
+
+      })
+    }
+  }
+
+
+}
+
+</script>

src/config/api.js

@@ -0,0 +1,45 @@
+const commPrefix = '/pc'
+
+const apis = {
+  carousel:{
+    list:{
+      url:`${commPrefix}/carousel/list`
+    }
+  },
+  case: {
+    cover: {
+      url: `${commPrefix}/case/cover`,
+      method: 'get',
+    },
+
+
+    list: {
+      url: `${commPrefix}/case/:type/list`,
+      method: 'get',
+    },
+  },
+  caseType: {
+    list: {
+      url: `${commPrefix}/caseType/list`,
+      method: 'get',
+    },
+
+  },
+  partner:{
+    list:{
+      url: `${commPrefix}/partner/list`,
+      method: 'get',
+    },
+  },
+  service:{
+    list:{
+      url:`${commPrefix}/service/list`,
+    }
+  }
+
+
+
+ 
+}
+
+export default apis

src/main.js

@@ -4,7 +4,14 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import 'element-ui/lib/theme-chalk/index.css'
+import axios from "axios"
+import VueAxios from 'vue-axios'
+// import VueResource from 'vue-resource'
 
+Vue.use(VueAxios, axios);
+// Vue.use(VueResource)
+
+Vue.prototype.$axios = axios;
 Vue.config.productionTip = false
 
 Vue.use(ElementUI)
@@ -12,5 +19,6 @@ Vue.use(ElementUI)
 new Vue({
   router,
   store,
+  
   render: h => h(App)
 }).$mount('#app')

src/router.js

@@ -45,7 +45,39 @@ export default new Router({
       // which is lazy-loaded when the route is visited.
       component: () => import(/* webpackChunkName: "Contact" */ './views/Contact.vue')
     },
-  
+    {
+      path: '/details',
+      name: 'details',
+      // 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: "Details" */ './views/Details.vue')
+    },
+    {
+      path: '/business',
+      name: 'business',
+      // 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: "Business" */ './components/Business.vue')
+    },
+    {
+      path: '/wheelplanting',
+      name: 'wheelplanting',
+      // 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: "Wheelplanting" */ './components/Wheelplanting.vue')
+    },
+    {
+      path: '/mobnav',
+      name: 'mobnav',
+      // 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: "mobnav" */ './components/mobnav.vue')
+    },
     
+    // // 
   ]
 })

src/utils/comptype.js

@@ -1,6 +0,0 @@
-export const CTYP_GROUP = 'G-';
-export const CTYP_SINGLE_LINE = 'single-line';
-export const CTYP_MULTI_LINE = 'multi-line';
-export const CTYP_IMAGE = 'image';
-export const CTYP_MAP = 'map';
-export const CTYP_CONTACT_FORM = `${CTYP_GROUP}contact_form`;

src/utils/httpcode.js

@@ -1,6 +0,0 @@
-export default {
-  HTTP_OK: 200,
-  HTTP_MULTIPLECHOICES: 300,
-  HTTP_BADREQUEST: 400,
-  HTTP_UNAUTHORIZED: 401
-}

src/utils/request.js

@@ -1,61 +0,0 @@
-import axios from 'axios'
-
-// 远程请求, 返回 promise
-// 参数 api 与 axios 基本一致
-// 增加了一个 urlData 字段, 用来设置 url path 变量值
-function request(params = {}) {
-  const { urlData, data: rawData, url: rawURL, headers = {}, ...config } = params;
-  const url = replaceApiParams(rawURL, urlData)
-  // const data = (rawData instanceof FormData) ? rawData : JSON.stringify(rawData)
-  const token = localStorage.getItem('x-token') || ''
-  const contenType = (rawData instanceof FormData) ? 'multipart/form-data' : 'application/json'
-  
-  return new Promise((resolve, reject) => {
-    axios({
-      ...config,
-      url,
-      data: rawData,
-      headers: {
-        'Content-Type': contenType,
-        ...headers,
-        'Authorization': `Bearer ${token}`,
-      }
-    }).then(({ data: res }) => {
-
-      // 服务端返回包含 code, message, data 字段
-      const { code, data } = res
-
-      // 业务处理正确则返回 1000
-      if (code === 1000) {
-        resolve(data)
-      } else {
-        reject(res)
-      }
-
-    }).catch((error) => {
-      // 异常情况
-      if (error.response) {
-        reject({ message: error.response.statusText })
-      } else {
-        reject({ message: error.message })
-      }
-    })
-  })
-}
-
-function replaceApiParams (url, params) {
-  if (typeof params !== 'object') return url
-
-  return url.split('/').map((it) => {
-    if (it.indexOf(':') === 0) {
-      const theKey = it.substr(1)
-      return Object.prototype.hasOwnProperty.call(params, theKey)
-        ? params[theKey]
-        : it
-    }
-
-    return it
-  }).join('/')
-}
-
-export default request

src/utils/uploadImage.js

@@ -1,17 +0,0 @@
-import request from './request';
-import apis from '../config/api';
-
-export default (file) => {
-  return new Promise((resolve, reject) => {
-    const fm = new FormData()
-    fm.append('file', file)
-    request({
-      ...apis.file.upload,
-      data: fm,
-    }).then((data) => {
-      resolve(data)
-    }).catch((err) => {
-      reject(err.message || err)
-    })
-  })
-}

src/views/About.vue

@@ -1,177 +1,235 @@
 <template>
   <div class="about">
     <div class>
-      <img src="../assets/image/about/首屏banner.jpg" width="100%" height="500px" />
+      <img src="../assets/image/about/aboutbanner.jpg" width="100%" />
     </div>
 
-    <div class="st">
-      <div class="abc">
-        <p>
-          南京福予文化传媒有限公司成立于2018年6月，是一家崇尚服务与品质的广告创意公司，拥有多元化的团队体系及全案服务能
-          力。从品牌策略到营销策划、广告创意、设计成型、落地执行、一站式解决客户所需。
-        </p>
-        <img src="../assets/image/about/FOYO形象图.jpg" width="100%" height="100%" />
+    <div class="contanier st">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="sssss">
+            <p class="text-left" >
+              南京福予文化传媒有限公司成立于2018年6月，是一家崇尚服务与品质的广告创意公司，拥有多元化的团队体系及全案服务能
+              力。从品牌策略到营销策划、广告创意、设计成型、落地执行、一站式解决客户所需。
+            </p>
+            <br />
+            <div class="col-md-12">
+            <div class="abc">
+              <img src="../assets/image/about/FOYO.jpg" style="width:100%" />
+            </div>
+          </div>
+          </div>
+        </div>
       </div>
 
-      <br />
-
-      <div class="abc">
-        <div class="row">
-          <div class="col-xs-6 col-md-3">
-            <a href="#" class="thumbnail">
-              <img src="../assets/image/about/Advantage1.png" alt="..." />
-              <div class="caption">
-                <h4>多元化服务</h4>
-                <p>
-                  团队能力多元化
-                  <br />服务体系立体化
-                  <br />我们懂得多，
-                  <br />您就更省心！
-                </p>
-              </div>
-            </a>
+      <div class="row about-1">
+        <div class="col-xs-6 col-md-3">
+          <img src="../assets/image/about/Advantage1.png" class="about-1-img" alt="..." />
+          <div class="caption">
+            <h2>多元化服务</h2>
+            <p class="p1">
+              团队能力多元化
+              <br />服务体系立体化
+              <br />我们懂得多，
+              <br />您就更省心！
+            </p>
           </div>
+        </div>
 
-          <div class="col-xs-6 col-md-3">
-            <a href="#" class="thumbnail">
-              <img src="../assets/image/about/Advantage2.png" alt="..." />
-              <div class="caption">
-                <h4>注重创意</h4>
-                <p>
-                  不流于形式，
-                  <br />至始至终将服务放于首位！
-                  <br />用更好的创意，
-                  <br />助力客户创造品牌价值！
-                  <br />
-                </p>
-              </div>
-            </a>
+        <div class="col-xs-6 col-md-3">
+          <img src="../assets/image/about/Advantage2.png" class="about-1-img" alt="..." />
+          <div class="caption">
+            <h2>注重创意</h2>
+            <p class="p1">
+              不流于形式，
+              <br />至始至终将服务放于首位！
+              <br />用更好的创意，
+              <br />助力客户创造品牌价值！
+              <br />
+            </p>
           </div>
+        </div>
 
-          <div class="col-xs-6 col-md-3">
-            <a href="#" class="thumbnail">
-              <img src="../assets/image/about/Advantage3.png" alt="..." />
-              <div class="caption">
-                <h4>不违初心的服务</h4>
-                <p>
-                  态度+热情+能力
-                  <br />=FOYO
-                  <br />用心,才能心动
-                  <br />合作有保障！
-                </p>
-              </div>
-            </a>
+        <div class="col-xs-6 col-md-3">
+          <img src="../assets/image/about/Advantage3.png" class="about-1-img" alt="..." />
+          <div class="caption">
+            <h2>不违初心的服务</h2>
+            <p class="p1">
+              态度+热情+能力
+              <br />=FOYO
+              <br />用心,才能心动
+              <br />合作有保障！
+            </p>
           </div>
+        </div>
 
-          <div class="col-xs-6 col-md-3">
-            <a href="#" class="thumbnail">
-              <img src="../assets/image/about/Advantage4.png" alt="..." />
-              <div class="caption">
-                <h4>更舒心的价格</h4>
-                <p>
-                  部分服务支持先出预案
-                  <br />满意再付定金。
-                  <br />承诺比市面上同档次广告公司
-                  <br />的服务价位低20%以上！
-                </p>
-              </div>
-            </a>
+        <div class="col-xs-6 col-md-3">
+          <img src="../assets/image/about/Advantage4.png" class="about-1-img" alt="..." />
+          <div class="caption">
+            <h2>更舒心的价格</h2>
+            <p class="p1">
+              部分服务支持先出预案
+              <br />满意再付定金。
+              <br />承诺比市面上同档次广告公司
+              的服务价位低20%以上！
+            </p>
           </div>
         </div>
       </div>
 
-      <div class="">
-        <h1>我们的团队</h1>
-        <br />
-        <br />
-        <br />
-        <div class="row">
-          <div class="col-xs-6 col-md-2">
-            <img src="../assets/image/about/Photo_sfg.jpg" alt="..." />
-          </div>
-          <div class="col-xs-6 col-md-4">
-            <div class="text-left">
-              <h2>孙福高</h2>
-              <p>创始人兼艺术总监</p>
-              <p>
-                10多年视觉设计经验；
-                <br />8余年项目管理经验；
-                <br />擅长将多种媒体技术与新兴技术结合；
-                <br />带队服务于丰盛集团、中国船舶重工集团、银城地产等上市公司及国企。
-              </p>
-            </div>
-          </div>
+      <div class="row">
+        <h1 style="padding-top: 32px; font-size: 4.8rem">我们的团队</h1>
+      </div>
 
-          <div class="col-xs-6 col-md-3">
-            <img src="../assets/image/about/Photo_ly.jpg" alt="..." />
-          </div>
-          <div class="col-xs-6 col-md-3">
-            <div class="text-left">
-              <h2>李阳</h2>
-              <p>创意总监兼合伙人</p>
-              <p>
-                职业广告人；
-                <br />丰富的产品推广及活动策划经验；
-                <br />江苏省省级政府项目主策划；
-                <br />带领团队服务于华为，渣打（中国总部），德勤（中国）等重要项目。
-              </p>
-            </div>
+      <div class="row about-2">
+        <div class="col-xs-6 col-md-3">
+          <img src="../assets/image/about/Photo_sfg.jpg" class="about-ph1" alt="..." />
+        </div>
+        <div class="col-xs-6 col-md-3" style="padding: 0">
+          <div class="text-left">
+            <h1 style="margin-top: 0; font-size: 3.6rem">孙福高</h1>
+            <p style="font-size: 2.2rem;color: #595757;margin-bottom: 20px">创始人兼艺术总监</p>
+            <p style="font-size: 2.2rem">
+              10多年视觉设计经验；
+              <br />8余年项目管理经验；
+              <br />擅长将多种媒体技术与新兴技术结合；
+              <br />带队服务于丰盛集团、中国船舶重工集团、银城地产等上市公司及国企。
+            </p>
           </div>
         </div>
 
-        <div class="row">
-          <div class="col-xs-6 col-md-2 ph5">
-            <img src="../assets/image/about/Photo_1.jpg" alt="..." class="ph5" />
-          </div>
-          <div class="col-xs-6 col-md-2 ph5">
-            <img src="../assets/image/about/Photo_2.jpg" alt="..." class="ph5" />
-          </div>
-          <div class="col-xs-6 col-md-2 ph5">
-            <img src="../assets/image/about/Photo_3.jpg" alt="..." class="ph5" />
-          </div>
-          <div class="col-xs-6 col-md-2 ph5">
-            <img src="../assets/image/about/Photo_4.jpg" alt="..." class="ph5" />
-          </div>
-          <div class="col-xs-6 col-md-2 ph5">
-            <img src="../assets/image/about/Photo_5.jpg" alt="..." class="ph5" />
-          </div>
-          <div class="col-xs-6 col-md-2 ph5">
-            <img src="../assets/image/about/Photo_6.jpg" alt="..." class="ph5" />
+        <div class="col-xs-6 col-md-3">
+          <img src="../assets/image/about/Photo_ly.jpg" class="about-ph1" alt="..." />
+        </div>
+        <div class="col-xs-6 col-md-3" style="padding: 0">
+          <div class="text-left">
+            <h1 style="margin-top: 0; font-size: 3.6rem">李阳</h1>
+            <p style="font-size: 2.2rem;color: #595757;margin-bottom: 20px">创意总监兼合伙人</p>
+            <p style="font-size: 2.2rem">
+              职业广告人；
+              <br />丰富的产品推广及活动策划经验；
+              <br />江苏省省级政府项目主策划；
+              <br />带领团队服务于华为，渣打（中国总部），德勤（中国）等重要项目。
+            </p>
           </div>
         </div>
       </div>
+
+      <div class="row about-3">
+        <div class="col-xs-2 col-md-2">
+          <img src="../assets/image/about/Photo_1.jpg" alt="..." class="ph5" />
+        </div>
+        <div class="col-xs-2 col-md-2">
+          <img src="../assets/image/about/Photo_2.jpg" alt="..." class="ph5" />
+        </div>
+        <div class="col-xs-2 col-md-2">
+          <img src="../assets/image/about/Photo_3.jpg" alt="..." class="ph5" />
+        </div>
+        <div class="col-xs-2 col-md-2">
+          <img src="../assets/image/about/Photo_4.jpg" alt="..." class="ph5" />
+        </div>
+        <div class="col-xs-2 col-md-2">
+          <img src="../assets/image/about/Photo_5.jpg" alt="..." class="ph5" />
+        </div>
+        <div class="col-xs-2 col-md-2">
+          <img src="../assets/image/about/Photo_6.jpg" alt="..." class="ph5" />
+        </div>
+      </div>
     </div>
-    <br />
-    <br />
   </div>
 </template>
 
 
 
 <style scoped>
-.about{
-  
-}
-.abc {
-  padding-bottom: 50px;
 
-  border-bottom: 2px solid #e5e5e5;
+.sssss{
+  padding: 40px 20px;
 }
-.ph5 {
-  padding: 0px;
-  border-radius: 0;
-  border: none;
+
+.about-1-img {
+    width: 100%;
+    
+  }
+
+/* 小屏幕（平板，大于等于 768px） */
+@media (min-width: 768px) {
 }
-.st {
-  width: 80%;
-  padding: 97px 20px 63px 20px;
-  margin-top: -120px;
+
+/* 中等屏幕（桌面显示器，大于等于 992px） */
+@media (min-width: 992px) {
+  .st {
+    width: 80%;
+    padding: 97px 20px 63px 20px;
+    margin-top: -120px;
+
+    background-color: #fff;
+    border: 2px solid #dcdcdc;
+    display: inline-block;
+    border-radius: 0; /*去圆角 */
+  }
+  .about {
+    padding-top: 116px;
+  }
+  p{
+    font-size: 2.4rem;
+  }
+  .st div div .sssss{
+    padding: 0 79px;
+  }
+
+  h2{
+    padding-bottom: 30px;
+  }
+  .about-1-img {
+    width: 175px;
+    height: 175px;
+  }
+  .about-ph1 {
+    padding: 0 40px 0 40px;
+  }
+  
+
+  .abc {
+    border-bottom: 2px solid #e5e5e5;
+  }
+  .about-1 {
+    margin: 0 79px;
+    padding: 78px 0 84px 0;
+    border-bottom: 2px solid #e5e5e5;
+  }
+  .about-2 {
+    padding-top: 123px;
+  }
   
-  background-color: #fff;
-  border: 2px solid #dcdcdc;
-  display: inline-block;
-  border-radius: 0; /*去圆角 */
+  .ph5 {
+    width: 100%;
+    padding: 0px;
+    
+  }
 }
 
+/* 大屏幕（大桌面显示器，大于等于 1200px） */
+@media (min-width: 1200px) {
+}
+
+
+</style>
+
+<style lang="less" scoped>
+ .about-3{
+   margin: 0;
+    padding-top: 100px;
+    padding-left: 40px;
+    padding-right: 40px;
+    div{
+      margin: 0;
+      padding: 0;
+      img{
+        width: 100%;
+      }
+    }
+ }
+
 
 </style>

src/views/Case.vue

@@ -1,88 +1,250 @@
 <template>
   <div class="case">
-    <div class="head">
-      <img src="../assets/1.jpg" width="100%" height="300px" />
+    <div>
+      <img :src="cover.coverImg" width="100%" />
+      <!-- width="100%" height="300"> -->
     </div>
 
-    <div>
-      <div class="st">
-        <h2>1234</h2>
-        <a>客户：</a>
-        <a>wad</a>
-        <a>所属行业：</a>
-        <a></a>
-        <div class="border-top">
-          <img src="../assets/1.jpg" width="100%" height="100%" />
-        </div>
+    <div class="border-bottom">
+      <div id="bs-example-navbar-collapse-2">
+        <button type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">全部案例</button>
+        <button v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)" type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
       </div>
+    </div>
 
-      <div>
-        <ul>
-          <button type="button" class="btn btn-default">上个案例</button>
-          <button type="button" class="btn btn-default">返回</button>
-          <button type="button" class="btn btn-default">下个案例</button>
-        </ul>
+    <div class="row mobtype">
+      <div class="col-xs-6">
+        <div><p style="line-height:40px">选择想看的案例类型：</p></div>
+      </div>
+      <div class="col-xs-6">
+        <el-button class="btn-link" @click="drawer = true" type="button" style="margin-left: 16px;">全部案例</el-button>
       </div>
     </div>
+    <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose" :show-close="true" size="80%">
+      <div>
+        <el-row>
+          <el-col :span="24" :offset="6">
+            <button type="button" class="btn-link" style="color:black;font-size: 24px;">全部案例</button>
+          </el-col>
+          <el-col :span="24" :offset="6" v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)">
+            <button type="button" class="btn-link" style="color:black;font-size: 24px">{{cas.typeName}}</button>
+          </el-col>
+          <el-col :span="24" :offset="6">
+            <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;position:fixed;bottom:100px;">返回</button>
+          </el-col>
+        </el-row>
+      </div>
+    </el-drawer>
 
-    <div class="center-block" style="width: 80%">
-      <br />
-      <br />
-      <h6>更多好案例</h6>
-      <br />
+    <div class="contanier center-block dyn-main">
       <div class="row">
-        <div v-for="item in 4" :key="item">
-          <div class="col-xs-3 col-md-3">
-            <a href="#" class="thumbnail">
-              <img src="../assets/1.jpg" width="100%" height="100%" />
-            </a>
+        <div v-for="(item,index) in caselist" :key="index">
+          <div class="col-md-6 col-xs-6 ph">
+            <div class="ph-houver">
+              <a href="/details" style="text-decoration:none;">
+                <div :style="{background: `url(${item.caseCoverImg})`}" class="case-ph"></div>
+                <div class="text-left">
+                  <h2>{{item.caseTitle}}</h2>
+                  <P>{{item.caseSummary}}</P>
+                </div>
+              </a>
+            </div>
           </div>
         </div>
       </div>
     </div>
+
+    <div>
+      <button type="button" v-show="!allLoaded" class="btn btn-default" @click="add(++num)">加载更多</button>
+    </div>
+
+    <div v-show="allLoaded">
+      <p>已经到底了~更多案例尽请期待~</p>
+    </div>
   </div>
 </template>
 
+
 <script>
+// @ is an alias to /src
 
+import request from '../../utils/request'
+import apis from '../config/api'
 
 export default {
+  name: 'case',
+  data () {
+    return {
+      cover: {},
+      casetype: [],
+      caselist: [],
+      num: 1,
+
+      allLoaded: false,//数据全部加载
+      drawer: false,
+      direction: 'rtl',
+    }
+  },
+  components: {
 
-}
-</script>
+  },
 
+  created () {
+    // window.console.log(this.cover, "543");
+    // 封面
+    request({
+      ...apis.case.cover,
 
-<script scoped>
-// @ is an alias to /src
+    }).then(data => {
+      this.cover = data[0];
+    })
 
 
-export default {
-  name: 'case',
-  components: {
+    // axios.get('http://localhost:8080/pc/case/cover')
+
+    // 分类
+    // axios.get('http://localhost:8080/pc/caseType/list')
+    request({
+      ...apis.caseType.list,
+    })
+      .then(res => {
+
+        this.casetype = res.records;
+
+      })
+    // 内容http://localhost:8080/pc/case/{case}/list
+    request({
+      ...apis.case.list,
+      urlData: { type: 'case' },
+      params: { pageNum: this.num, pageSize: 8 }
+    }).then(con => {
+      // console.log(con,"124")
+      this.caselist = con.records;
+      // window.console.log(this.caselist, "543");
+    }).catch()
+
+
+  },
+
+  computed: {
+
+  },
+
+  methods: {
+    add (a) {
+
+      console.log(this.num, "124")
+      request({
+        ...apis.case.list,
+        urlData: { type: 'case' },
+        params: { pageNum: a, pageSize: 8 }
+      }).then(con => {
+        console.log(con, "124")
+        this.caselist = this.caselist.concat(con.records);
+        if (con.total % 8) this.allLoaded = true;
+
+        // this.caselist = con.records;
+
+      })
+    },
+
+    classification (Type) {
+      request({
+        ...apis.case.list,
+        urlData: { type: 'case' },
+        params: { pageNum: a, pageSize: 8 }
+      }).then(con => {
+        console.log(con, "124")
+        this.caselist = this.caselist.concat(con.records);
+
+
+
+
+      })
+    },
+
 
   }
+
+
 }
 </script>
 
-<style>
+<style scoped>
 
-
-.head {
+.mobtype{
+  margin-top: 20px;
 }
 
-.st {
-  width: 80%;
-  padding: 97px ;
-  margin-top: -120px;
+.case {
+  margin-top: 116px;
+}
+.border-bottom {
+  display: none;
+}
 
-  background-color: #fff;
-  display: inline-block;
-  border-radius: 0;
-  border-right: none;
+.ph {
+  padding: 4%;
 }
-.border-top {
-  padding-top: 50px;
+.text-left {
+  color: #000;
+}
+.case-ph {
+    bottom: 0;
+    width: 100%;
+
+    height: 0;
+    padding-bottom: 65%;
+    background-size: 100% 100% !important;
+  }
+
+@media (min-width: 992px) {
+  .main {
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
+    justify-content: center;
+  }
+  .case {
+    background-color: #fafafa;
+  }
 
-  border-top: 1px solid #aaa;
+  
+  .btn {
+    font-size: 24px;
+    margin-top: 88px;
+    padding: 12px 150px;
+    border-radius: 0px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid #aaaaaa;
+  }
+  .btn:hover {
+    color: #e03723;
+    border: 1px solid #e03723;
+  }
+  .ph {
+    padding: 12px 34px 0 34px;
+  }
+
+  .ph:hover .ph-houver {
+    transform: translate3d(0, -20px, 0);
+    /* margin-top: -20px; */
+    box-shadow: 0 20px 5px #888888;
+  }
+
+  .dyn-main {
+    padding-top: 55px;
+    width: 80%;
+  }
+
+  .border-bottom {
+    display: block;
+    font-size: 24px;
+    border-bottom: 1px solid #bfbfbf;
+    padding: 10px;
+  }
 }
 </style>

src/views/Contact.vue

@@ -1,63 +1,150 @@
 <template>
   <div class="contact">
     <div class>
-      <img src="../assets/image/contact/首屏banner.png" style="height:500px" />
+      <img src="../assets/image/contact/contactbanner.png" style="width:100%" />
       <!-- width="100%" height="300"> -->
     </div>
 
-    <div class="panel panel-default center-block">
-      <div class="panel-body">
-        <h1>联系我们</h1>
-        <br />
-        <br />
+    <div class="contact-1">
+      <div class="contact-main">
+        <h1 style="margin-bottom:70px">联系我们</h1>
+
         <div class="row">
-          <div class="col-xs-6 col-md-6 st" style="border-right:1px solid #aaa;">
-            <img src="../assets/image/contact/微信二维码.jpg" />
+          <div class="col-md-6 col-xs-6 st1" style="border-right: 1px solid #aaa;">
+            <img class="img1" src="../assets/image/contact/weixin.jpg" />
             <div>
-              <h1>微信咨询</h1>
+              <h2>微信咨询</h2>
             </div>
           </div>
 
-          <div class="col-xs-6 col-md-6 st">
-            <img src="../assets/image/contact/QQ二维码.jpg" />
-            <h1>QQ咨询</h1>
+          <div class="col-md-6 col-xs-6 st2">
+            <img class="img1" src="../assets/image/contact/QQ.jpg" />
+            <div>
+              <h2>QQ咨询</h2>
+            </div>
           </div>
         </div>
+
         <div>
-          <p>
-            电话咨询：
-            <em>
-              <strong>135 8516 7730</strong>
-            </em>
-          </p>
-
-          <br />
-          <br />
-          <br />
-          <strong>南京福予文化传媒有限公司</strong>
-          <p>地址：南京市江宁区秣周东路12号悠谷三号楼（砂之船奥特莱斯旁）</p>
+  
+          <a href="tel:13585167730">
+            <img src="../assets/image/contact/photo.jpg" alt style="padding-top:100px;width:100%" />
+          </a>
         </div>
       </div>
+      <div class style=" ">
+        <p style="padding-top: 70px;font-size: 3.6rem">
+          <strong>南京福予文化传媒有限公司</strong>
+        </p>
+
+        <p style="font-size: 3rem;padding-top: 14px;">地址：南京市江宁区秣周东路12号悠谷三号楼（砂之船奥特莱斯旁）</p>
+      </div>
     </div>
   </div>
 </template>
 
+
 <style scoped>
-.panel {
+/* .contact-box {
   width: 80%;
+  margin: 0 auto - 120px;
+  
+  .contact-main {
+    width: 704px;
+    text-align: center;
+  }
 
-  border-radius: 0;
-  margin-top: -100px;
-  background-color: #fff;
-  display: inline-block;
-}
+  .col-xs-6 {
+    &:last-child {
+      float: right;
+    }
+
+    & + .col-xs-6 {
+      
+    }
+  }
 
-.st {
-  padding: 50px;
+} */
+@media (max-width: 992px) {
+  .st1 {
+  }
 }
 
-img {
-  width: 100%;
-  height: 100%;
+@media (min-width: 992px) {
+  .contact-1 {
+    width: 80%;
+    padding: 50px;
+    margin-top: -120px;
+
+    background-color: #fff;
+    display: inline-block;
+    border-radius: 0;
+    border: 1px solid #dcdcdc;
+  }
+
+  .contact-1 .contact-main {
+    width: 707px;
+    margin: 0 auto;
+    padding-top: 20px;
+  }
+  .st1 {
+    padding-right: 120px;
+  }
+  .st2 {
+    padding-left: 120px;
+  }
+
+  .contact-2 {
+    padding: 98px 98px 27px 98px;
+  }
+}
+h2 {
+  margin-bottom: -22px;
 }
+
+.contact {
+    padding-top: 116px;
+  }
+
+
+ /*  .contact-1 {
+    width: 80%;
+    padding: 50px;
+    margin-top: -120px;
+
+    background-color: #fff;
+    display: inline-block;
+    border-radius: 0;
+    border: 1px solid #dcdcdc;
+  }
+  .contact-2 {
+    padding: 98px 98px 27px 98px;
+ 
+  }
+  .st {
+    padding: 0 100px;
+  }
+  
+  
+  .img1{
+    width: 100%;
+
+  }
+
+  
+
+  .contact-1 > div {
+    width: 704px;
+    margin: 0 auto;
+  }
+
+
+  @media (max-width: 768px) {
+    
+  .contact-1 > div {
+    width: 222px;
+    margin: 0 auto;
+  }
+    
+  } */
 </style>

src/views/Details.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="details">
+    <div class="head">
+      <img src="../assets/image/case/首屏banner.jpg" width="100%" height="100%" />
+    </div>
+
+    <div>
+      <div class="contanier st">
+        <div class="row">
+          <h1 style="font-size: 4.8em">1234</h1>
+        </div>
+        <div class="row">
+          <!-- <a style="font-size: 4.8em">客户：</a>
+        <img src="../assets/image/case2/客户logo.jpg" alt="">
+        <a>所属行业：</a>
+          <a>智能家居</a>-->
+          <p style="font-size: 24px; color: #3e3a39">
+            客户：
+            <img src="../assets/image/case2/客户logo.jpg" alt /> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 所属行业： 智能家居
+          </p>
+        </div>
+        <div class="row">
+          <div class="border-top"><img src="" width="100%" height= /></div>
+        </div>
+        <div class="row">
+          <div class="col-xs-6 col-md-6">
+            <div class="pull-left">
+              <a class="btn-default" href="#" role="button">
+                <img src="../assets/image/case2/赞.png" alt />
+              </a>赞 | 234
+            </div>
+          </div>
+          <div class="col-xs-6 col-md-6">
+            <div class="pull-right">
+              分享：
+              <a class="btn-default" href="#" role="button">
+                <img src="../assets/image/case2/微信icon.png" alt />
+              </a>
+              <a class="btn-default" href="#" role="button">
+                <img src="../assets/image/case2/微博icon.png" alt />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="contanier center-block" style="width: 80%;border-bottom: 1px solid #aaa;">
+        <div class="row case-2">
+          <div class="col-xs-4 col-md-4 case-3">
+            <button type="button" class="btn-link pull-left case-3 button-hover" style="font-size: 24px;color:black;border:none;">上一个案例</button>
+          </div>
+          <div class="col-xs-4 col-md-4 case-3">
+            <button type="button" class="btn btn-default button-hover">返回</button>
+          </div>
+          <div class="col-xs-4 col-md-4 case-3">
+            <button type="button" class="btn-link pull-right case-3 button-hover" style="font-size: 24px;color:black;border:none;">下一个案例</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="center-block" style="width: 80%">
+      <div class="row">
+        <h2 style="margin-top:64px;margin-bottom:30px">更多好案例</h2>
+      </div>
+      <div class="row">
+        <div v-for="item in 4" :key="item">
+          <div class="col-xs-6 col-md-3" style="padding:0">
+            <a href="#" class="st4">
+              <img src="../assets/image/home/Case2.jpg" style="margin: 0;width: 100%;" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+
+}
+</script>
+
+
+<script scoped>
+// @ is an alias to /src
+
+
+export default {
+  name: 'details',
+  components: {
+
+  }
+}
+</script>
+
+<style scoped>
+@media (min-width: 992px) {
+  .case {
+    padding-top: 116px;
+  }
+
+  .st {
+    width: 80%;
+    padding: 50px;
+    margin-top: -120px;
+    background-color: #fff;
+    display: inline-block;
+    border-radius: 0;
+    border: 2px solid #bcbcbc;
+  }
+  .border-top {
+    padding-top: 50px;
+
+    border-top: 1px solid #aaa;
+  }
+
+  .case-2 {
+    margin: 70px 0;
+    padding: 0;
+  }
+  .case-3 {
+    margin: 0;
+    padding: 0;
+  }
+  .btn {
+    width: 195px;
+    height: 49px;
+    font-size: 24px;
+    background-color: #fff;
+    border: 1px solid #aaaaaa;
+  }
+  .button-hover:hover {
+    color: #e03723;
+    border: 1px solid #e03723;
+  }
+}
+</style>

src/views/Dynamic.vue

@@ -1,32 +1,52 @@
 <template>
   <div class="dynamic">
     <div>
-      <img src="../assets/1.jpg" width="100%" height="500px" />
+      <img :src="cover.coverImg" width="100%" />
       <!-- width="100%" height="300"> -->
     </div>
 
-    <div>
-      <div class="border-bottom">
-        <ui v-for="item in 3" :key="item.id">
-          <button type="button" class="btn btn-link" style="color:black">全部动态</button>
-        </ui>
+    <div class="border-bottom">
+      <div>
+        <button type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">全部案例</button>
+        <button v-for="cas in casetype" :key="cas" type="button" class="btn-link" style="color:black;font-size: 24px;padding: 25px">{{cas.typeName}}</button>
       </div>
+    </div>
 
-      <br />
-
-      <div v-for=" item in 8" :key="item.id">
-        <div class="col-xs-6 col-md-6 st">
-          <a href="#" class="thumbnail">
-            <img src="../assets/1.jpg" alt="..." width="100%" height="100%" />
-          </a>
+    <div>
+      <div class="row">
+        <div class="col-xs-6">
+          <div>选择想看的案例类型：</div>
+        </div>
+        <div class="col-xs-6">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">全部案例</button>
         </div>
       </div>
-      <div>
-        <button type="button" class="btn btn-default">加载更多</button>
+    </div>
+
+    <div class="contanier center-block dyn-main">
+      <div class="row">
+        <div v-for="(item,index) in caselist" :key="index">
+          <div class="col-md-6 col-xs-6 ph">
+            <div class="ph-houver">
+              <a href="/details" style="text-decoration:none;">
+                <img :src="item.caseCoverImg" alt style="width:100%;" />
+                <div class="text-left">
+                  <h2>{{item.caseTitle}}</h2>
+                  <P>{{item.caseSummary}}</P>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
-      <br />
-      <br />
-      <br />
+    </div>
+
+    <div>
+      <button type="button" class="btn btn-default" @click="add">加载更多</button>
+    </div>
+
+    <div v-if="show">
+      <p>已经到底了~更多案例尽请期待~</p>
     </div>
   </div>
 </template>
@@ -35,39 +55,141 @@
 <script>
 // @ is an alias to /src
 
+import request from '../../utils/request'
+import apis from '../config/api'
 
 export default {
-  name: 'home',
+  name: 'dynamic',
+  data () {
+    return {
+      cover: {},
+      casetype: [],
+      caselist: [],
+      num: 1,
+      show: true,
+    }
+  },
   components: {
 
+  },
+
+  created () {
+    // window.console.log(this.cover, "543");
+    // 封面
+    request({
+      ...apis.case.cover,
+
+    }).then(data => {
+      this.cover = data[0];
+    })
+
+
+    // axios.get('http://localhost:8080/pc/case/cover')
+
+    // 分类
+    // axios.get('http://localhost:8080/pc/caseType/list')
+    request({
+      ...apis.caseType.list,
+    })
+      .then(res => {
+        
+        this.casetype = res.records;
+
+      })
+    // 内容http://localhost:8080/pc/case/{case}/list
+    request({
+      ...apis.case.list,
+      urlData: { type: 'case' },
+      params: { pageNum: 1, pageSize: 8 }
+    }).then(con => {
+      // console.log(con,"124")
+      this.caselist = con.records;
+      // window.console.log(this.caselist, "543");
+    }).catch()
+
+
+  },
+
+  computed: {
+
+  },
+
+  methods: {
+    add () {
+
+      // axios.get('http://localhost:8080/pc/case/case/list/?pageNum=2&pageSize=8')
+      //   .then(con => {
+      //     this.caselist = con.data.data.records;
+      //     window.console.log(this.caselist, "543");
+      //   })
+    }
   }
+
+
 }
 </script>
 
 <style scoped>
-.ph1 {
-  background-size: cover;
-  max-width: 100%;
-  height: 100%;
-}
-.ph {
-  font-weight: 900px;
-  height: 500;
-  margin: auto;
+.border-bottom {
+  display: none;
 }
 
-.main {
-  display: -webkit-flex; /* Safari */
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
-  justify-content: center;
+.ph {
+  padding: 4%;
 }
-.border-bottom {
-  border-bottom: 1px solid #aaa;
+.text-left {
+  color: #000;
 }
-.st {
-  padding: 50px;
+
+@media (min-width: 992px) {
+  .dynamic {
+    padding-top: 116px;
+  }
+  .main {
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
+    justify-content: center;
+  }
+  .dynamic {
+    background-color: #fafafa;
+  }
+
+  .btn {
+    font-size: 24px;
+    margin-top: 88px;
+    padding: 12px 150px;
+    border-radius: 0px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid #aaaaaa;
+  }
+  .btn:hover {
+    color: #e03723;
+    border: 1px solid #e03723;
+  }
+  .ph {
+    padding: 12px 34px 0 34px;
+  }
+
+  .ph:hover .ph-houver {
+    transform: translate3d(0, -20px, 0);
+    /* margin-top: -20px; */
+    box-shadow: 0 20px 5px #888888;
+  }
+
+  .dyn-main {
+    padding-top: 55px;
+    width: 80%;
+  }
+
+  .border-bottom {
+    display: block;
+    font-size: 24px;
+    border-bottom: 1px solid #bfbfbf;
+    padding: 10px;
+  }
 }
 </style>

src/views/Home.vue

@@ -1,27 +1,76 @@
 <template>
   <div class="home">
-    <div>
-      <img src="../assets/image/home/首屏banner.jpg" width="100%" height="800px" />
-    </div>
+    <nav class="navbar navbar-default navbar-fixed-top" :class="{ 'scroll': scrolled }">
+      <div class="container-fluid con">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">
+            <div alt="Brand" class="logo"></div>
+          </a>
+        </div>
 
-    <div>
-      <br />
-      <br />
-      <div>
-        <h2>多元化服务 一站式解决客户需求</h2>
-        <p>
-          核心团队拥有八年以上营销策划及创业设计经验，团队能力多元化，服务体系立体化
-          我们懂得多，您就更省心
-        </p>
-        <div></div>
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+          <ul class="nav navbar-nav navbar-right">
+            <li class="a">
+              <a href="/">首页</a>
+            </li>
+            <li class="a">
+              <a href="/case">案例</a>
+            </li>
+            <li class="a">
+              <a href="/dynamic">动态</a>
+            </li>
+            <li class="a">
+              <a href="/about">关于</a>
+            </li>
+            <li class="a">
+              <a href="/contact">联系</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <a href="#pos">
+      <div class="aarow_box animated aarowMove">
+        <div class="aarow"></div>
+      </div>
+    </a>
+
+    <div class="contanier next-page">
+      <div class="row">
+        <div class="col-md-12 home-wheel">
+          <Wheelplanting></Wheelplanting>
+        </div>
+      </div>
+      <div name="pos"></div>
+
+      <div class="row">
+        <div class="col-md-12" style="padding:0;width: 100%;">
+          <h2>多元化服务 一站式解决客户需求</h2>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-12" style="padding:0;width: 100%;">
+          <p>
+            核心团队拥有八年以上营销策划及创业设计经验，团队能力多元化，服务体系立体化。
+            <br />我们懂得多，您就更省心!
+          </p>
+        </div>
       </div>
 
       <div class="row st">
-        <div class="col-xs-6 col-md-3">
-          <img src="../assets/logo.png" alt="..." />
-          <div>
-            <h3>品牌服务</h3>
-            <p>
+        <div class="col-xs-6 col-md-3 sw">
+          <img src="../assets/image/home/service_brand.jpg" width="100%" height="100%" alt="..." />
+          <div class>
+            <h4>品牌服务</h4>
+            <p class="text-left business-text">
               品牌咨询
               <br />品牌策划
               <br />CIS/VIS
@@ -30,168 +79,350 @@
             </p>
           </div>
         </div>
-        <div class="col-xs-6 col-md-3">
-          <img src="../assets/logo.png" alt="..." />
-          <div class="caption">
-            <h3>111</h3>
-            <p>...</p>
+
+        <div class="col-xs-6 col-md-3 sw">
+          <img src="../assets/image/home/service_plan.jpg" width="100%" height="100%" alt="..." />
+          <div class>
+            <h4>营销与策划</h4>
+            <p class="text-left business-text">
+              营销创意
+              <br />广告创意
+              <br />活动策划与执行
+            </p>
           </div>
         </div>
-        <div class="col-xs-6 col-md-3">
-          <img src="../assets/logo.png" alt="..." />
-          <div class="caption">
-            <h3>111</h3>
-            <p>...</p>
+        <div class="col-xs-6 col-md-3 sw">
+          <img src="../assets/image/home/service_design.jpg" width="100%" height="100%" alt="..." />
+          <div class>
+            <h4>创意设计</h4>
+            <p class="text-left business-text">
+              平面设计
+              <br />平面设计
+              <small>(海报/展架/画册/包装...)</small>
+              <br />数字媒体
+              <small>(H5/短视频/小程序...)</small>
+              <br />动画制作
+              <br />视觉设计
+              <small>(app/网站)</small>
+              <br />空间设计
+              <small>(美陈/展厅/店面/导视)</small>
+              <br />视频包装
+            </p>
           </div>
         </div>
-        <div class="col-xs-6 col-md-3">
-          <img src="../assets/logo.png" alt="..." />
-          <div class="caption">
-            <h3>111</h3>
-            <p>...</p>
+        <div class="col-xs-6 col-md-3 sw">
+          <img src="../assets/image/home/service_make.jpg" width="100%" height="100%" alt="..." />
+          <div class>
+            <h4>制作与传播</h4>
+            <p class="text-left business-text">
+              物料制作
+              <br />传统媒介
+              <br />网络制作
+            </p>
           </div>
         </div>
       </div>
+    </div>
 
-      <br />
-      <br />
-
-      <div>
-        <div class="col-xs-6 col-md-3" style="padding:0">
-          <a href="#" class="thumbnail st4">
-            <img src="../assets/image/home/Case1.jpg" alt="..." width="25%" class="thumbnail st4" />
-          </a>
-        </div>
-
-        <div class="col-xs-6 col-md-3" style="padding:0">
-          <a href="#" class="thumbnail st4">
-            <img src="../assets/image/home/Case2.jpg" alt="..." width="25%" class="thumbnail st4" />
-          </a>
-        </div>
-
-        <div class="col-xs-6 col-md-3" style="padding:0">
-          <a href="#" class="thumbnail st4">
-            <img src="../assets/image/home/Case3.jpg" alt="..." width="25%" class="thumbnail st4" />
-          </a>
-        </div>
-
-        <div class="col-xs-6 col-md-3" style="padding:0">
-          <a href="#" class="thumbnail st4">
-            <img src="../assets/image/home/Case4.jpg" alt="..." width="25%" class="thumbnail st4" />
+    <div class="contanier home-case top-case">
+      <div class="row home-case" style="padding:0;width: 100%;">
+        <div class="col-xs-6 col-md-3 home-case" v-for="(item,index) in caselist" :key="index">
+          <a href="/details">
+            <div class="st4" :style="{background: `url(${item.caseCoverImg})`}">
+              <div class="casetitle">{{item.caseTitle}}</div>
+            </div>
           </a>
         </div>
+      </div>
+    </div>
 
-        <div class="col-xs-6 col-md-3" style="padding:0">
-          <a href="#" class="thumbnail st4">
-            <img src="../assets/image/home/Case5.jpg" alt="..." width="25%" class="thumbnail st4" />
-          </a>
-        </div>
+    <a class="btn btn-default btn-lg" href="/case" role="button">更多案例</a>
 
-        <div class="col-xs-6 col-md-3" style="padding:0">
-          <a href="#" class="thumbnail st4">
-            <img src="../assets/image/home/Case6.jpg" alt="..." width="25%" class="thumbnail st4" />
-          </a>
-        </div>
+    <div></div>
 
-        <div class="col-xs-6 col-md-3" style="padding:0">
-          <a href="#" class="thumbnail st4">
-            <img src="../assets/image/home/Case7.jpg" alt="..." width="25%" class="thumbnail st4" />
-          </a>
+    <div class="contanier">
+      <div class="row" style="padding:0;width: 100%;">
+        <div class="col-md-12" style="padding:0;width: 100%;">
+          <h1>以品质答谢信任</h1>
         </div>
-
-        <div class="col-xs-6 col-md-3" style="padding:0">
-          <a href="#" class="thumbnail st4">
-            <img src="../assets/image/home/Case8.jpg" alt="..." width="25%" class="thumbnail st4" />
-          </a>
+        <div class="col-md-12" style="padding:0;width: 100%;">
+          <p>
+            至始至终将服务放到首位！
+            <br class="br-logotop" />用更好的创意，助力客户创造品牌价值
+          </p>
         </div>
 
-        <a class="btn btn-default" href="/case" role="button">更多案例</a>
-      </div>
-      <div></div>
-
-      <div class="contanier">
-        <div class="row">
-          <div class="col-xs-12">
-            <h1>以品质答谢信任</h1>
-          </div>
-          <div class="col-xs-12">
-            <p>至始至终将服务放到首位！用更好的创意，助力客户创造品牌价值</p>
-          </div>
-          <div class="st">
-            <div v-for="item in 18" :key="item">
-              <div class="col-xs-3 col-md-2">
-                <img src="../assets/image/home/Customerlogo1.jpg" alt="..." class="ph-logo"/>
-              </div>
-            </div>
+        <div class="row st">
+          <!-- <div v></div> -->
+          <div class="col-md-2 col-xs-4" v-for="(item,index) in blogs" :key="index+'img'">
+            <!-- <img :src="item.logoImg" alt class="ph-logo" /> -->
+            <div class="ph-logo" :style="{background: `url(${item.logoImg})`}"></div>
           </div>
+        </div>
 
-          <div class="st">
-            <div class="row">
-              <div class="col-xs-6 col-md-6 home-news-hover home-news">
-                
-                <a href="#">
-                  <img src="../assets/image/home/News1.jpg" alt="..." width="100%"/>
-                  <div>
-                    <h3 class="text-left" style="background-color: black;">品牌服务</h3>
-                  </div>
-                </a>
-                
-              </div>
-
-              <div class="col-xs-6 col-md-6 home-news-hover home-news">
-                
-                <a href="#">
-                  <img src="../assets/image/home/News2.jpg" alt="..." width="100%"/>
-                  <div>
-                    <h3 class="text-left" style="background-color: black;">品牌服务</h3>
-                  </div>
-                </a>
-                
-              </div>
-
-              <div class="col-xs-6 col-md-6 home-news-hover home-news">
-                
-                <a href="#">
-                  <img src="../assets/image/home/News3.jpg" alt="..." width="100%"/>
-                  <div>
-                    <h3 class="text-left" style="background-color: black;">品牌服务</h3>
-                  </div>
-                </a>
-                
-              </div>
-
-              <div class="col-xs-6 col-md-6 home-news-hover home-news">
-                
-                <a href="#">
-                  <img src="../assets/image/home/News4.jpg" alt="..." width="100%"/>
-                  <div>
-                    <h3 class="text-left" style="background-color: black;">品牌服务</h3>
-                  </div>
-                </a>
-                
-              </div>
+        <div class="contanier st top-news">
+          <div class="row">
+            <div class="col-xs-6 col-md-6 home-news-hover home-news" v-for="(item,index) in dynamiclist" :key="index">
+              <a href="/details">
+                <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic"></div>
+                <h3 class="text-left" style>{{item.caseTitle}}</h3>
+              </a>
             </div>
+            <!-- item.caseCoverImg -->
           </div>
         </div>
       </div>
-      <a class="btn btn-default" href="/dynamic" role="button">更多动态</a>
     </div>
+    <a class="btn btn-default btn-lg" href="/dynamic" role="button">更多动态</a>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
+//  import Swiper from "swiper";
 
+// const times = x => '*'.repeat(x - 1).split('*')
 
+import Wheelplanting from "@/components/Wheelplanting.vue";
+// import Business from "@/components/Business.vue";
+
+import request from '../../utils/request'
+import apis from '../config/api';
 export default {
-  name: 'home',
+  name: "home",
+  data () {
+    return {
+      scrolled: false,
+      show: true,
+      data: '',
+      blogs: {},
+      phoneCols: 3,
+      deskCols: 6,
+      caselist: [],
+      dynamiclist: [],
+    };
+  },
+  computed: {
+    // rows () {
+    //   if (this.blogs && this.blogs.length) {
+    //     return times[Math.ceil(this.blogs.length / this.deskCols)]
+    //   } else {
+    //     return []
+    //   }
+    // }
+  },
   components: {
+    Wheelplanting,
+    // Business,
+  },
+  mounted () {
+    window.addEventListener('scroll', () => {
+      this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 300
+    })
+  },
+
+  created () {
+
+    //合作伙伴
+
 
+    // axios.get('http://localhost:8080/pc/partner/list/?pageNum=1&pageSize=18')
+    request({
+      ...apis.partner.list,
+      params: { pageNum: 1, pageSize: 18 }
+    })
+      .then(res => {
+
+        this.blogs = res.records;
+
+
+      })
+
+    // axios.get('http://localhost:8080/pc/case/case/list/?pageNum=1&pageSize=8')
+
+    request({
+      ...apis.case.list,
+      urlData: { type: 'case' },
+      params: { topping: 1 }
+    }).then(con => {
+      // console.log(con,"124")
+      this.caselist = con.records;
+      // window.console.log(this.caselist, "543");
+    })
+
+    request({
+      ...apis.case.list,
+      urlData: { type: 'movement' },
+      params: { pageNum: 1, pageSize: 4, topping: 1 }
+    }).then(con => {
+      console.log(con, "124")
+      this.dynamiclist = con.records;
+      window.console.log(this.dynamiclist, "543");
+    })
   }
-}
+};
 </script>
 
 <style scoped>
+.home {
+}
+@media (max-width: 992px) {
+  .business-text {
+    display: none;
+  }
+  h3 {
+    font-size: 2.4rem;
+    padding: 0px;
+    width: 100%;
+    height: 2.4rem;
+
+    background-color: black;
+    color: #fff;
+    margin: 0;
+  }
+  .st {
+    padding: 0 !important;
+  }
+  .sw {
+    padding: 2% !important;
+  }
+  .ph-logo {
+    width: 100%;
+    /* padding-bottom: 37px; */
+    /* height: 100%; */
+    height: 0;
+    padding-bottom: 45.8%;
+    background-size: 100% 100% !important;
+    margin: 3px auto;
+  }
+  .top-news {
+    margin-top: 30px;
+  }
+  .top-case {
+    margin-top: 40px;
+    padding: 0;
+
+    border: none;
+  }
+  .aarow_box {
+    display: none;
+  }
+  .aarow{
+    display: none;
+  }
+  .home-case {
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+
+  .home-wheel {
+    width: 100%;
+    height: 300px;
+    padding: 0;
+    z-index: 60;
+  }
+}
+@media (min-width: 992px) {
+  h3 {
+    font-size: 2.4rem;
+    padding: 30px;
+    height: 86px;
+
+    background-color: black;
+    color: #fff;
+    margin: 0;
+  }
+  .sw {
+    padding: 33px;
+  }
+
+  .st {
+    padding-left: 10%;
+    padding-right: 10%;
+    margin: 0;
+  }
+  .st .sw p {
+    font-size: 2.2rem;
+    padding-bottom: 0;
+  }
+  .ph-logo {
+    width: 100%;
+    /* padding-bottom: 37px; */
+    /* height: 100%; */
+    height: 0;
+    padding-bottom: 45.8%;
+    background-size: 100% 100% !important;
+    margin: 18px;
+  }
+  .home-case {
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+
+  .st4:hover .casetitle {
+    display: block;
+  }
+  .aarow_box {
+    width: 26px;
+    height: 26px;
+    margin: 0 auto;
+    position: absolute;
+    bottom: 90px;
+    left: 0;
+    right: 0;
+    display: block;
+    cursor: pointer;
+    z-index: 99;
+  }
+  .aarow {
+    width: 26px;
+    height: 26px;
+    border: 2px solid #fff;
+    border-left: none;
+    border-top: none;
+    transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+  }
+
+  .animated {
+    animation: animated 4s ease infinite;
+  }
+  @keyframes animated {
+    0%,
+    38%,
+    70%,
+    80%,
+    100% {
+      transform: translateY(0);
+    }
+    25% {
+      transform: translateY(20px);
+    }
+    50% {
+      transform: translateY(20px);
+    }
+  }
+}
+.row {
+  margin: 0;
+}
+
+.home-wheel {
+  width: 100%;
+
+  padding: 0;
+  z-index: 60;
+}
+/* .home-business {
+  widows: 1300px;
+  height: 600px;
+} */
+
 .main {
   display: -webkit-flex; /* Safari */
   display: flex;
@@ -201,65 +432,138 @@ export default {
   justify-content: center;
 }
 
-.btn{
-  width: 195px;
-  height: 49px;
+.btn {
+  font-size: 24px;
+  margin-top: 41px;
+  padding: 12px 50px;
+  border-radius: 0px;
+  color: #000;
   background-color: #fff;
-  border:1px solid #aaaaaa
+  border: 1px solid #aaaaaa;
 }
-.st {
-  padding-left: 10%;
-  padding-right: 10%;
+.btn:hover {
+  color: #e03723;
+  border: 1px solid #e03723;
 }
-h1{
+
+h1 {
   margin: 0;
   padding-top: 85px;
 }
-p{
-  padding-bottom: 65px;
-  padding-top: 28px;
+p {
+  padding: 28px 0 50px 0;
+  font-size: 2.4rem;
+  color: #595757;
 }
 
-h3 {
-  
-  height: 86px;
+h4 {
+  font-size: 2.4rem;
+  padding: 10px;
   background-color: red;
   color: #fff;
   margin: 0;
+  height: 43px;
 }
 .st4 {
-  border: 0px solid #fff;
   width: 100%;
-  height: 100%;
-  padding: 0;
+
+  padding-bottom: 100%;
+  background-size: 100% 100% !important;
+
   margin: 0;
 }
-.st4 :hover {
-  width: 100%;
-  height: 100%;
-  padding: 1px;
-  border: 1px solid #fff;
-}
-.btn {
-  margin: 50px;
-  border-radius: 0px;
-  color: #000;
+.casetitle {
+  display: none;
 }
 
-.ph-logo{
-  padding-bottom: 37px;
+.home-news {
+  padding: 0 6px;
+  margin-bottom: 12px;
 }
 
-img {
-  max-width: 100%;
-  max-height: 100%;
+.home-dynamic {
+  bottom: 0;
+  width: 100%;
+
+  height: 0;
+  padding-bottom: 48.5%;
+  background-size: 100% 100% !important;
 }
+</style>
 
-.home-news{
-  padding: 0 6px;
-  margin-bottom: 12px;
+
+<style lang="less" scoped>
+@media (max-width: 992px) {
+  .navbar {
+    display: none;
+  }
+
+  .st {
+    padding: 0 20px;
+
+    .sw {
+      padding: 20px;
+    }
+  }
 }
-.home-news-hover{   /* news动态 */
+@media (min-width: 992px) {
+  .br-logotop {
+    display: none;
+  }
+  .navbar {
+    z-index: 70;
+    padding: 30px 0;
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    .navbar-brand {
+      padding: 0;
+
+      img {
+        height: 100%;
+      }
+    }
 
+    .nav {
+      font-size: 2.6rem;
+      li {
+        margin-left: 40px;
+        a {
+          color: #fff;
+
+          &:hover {
+            border-bottom: 3px solid #fff;
+          }
+        }
+      }
+    }
+
+    .logo {
+      width: 300px;
+      height: 60px;
+      background: url("../assets/logo.png");
+    }
+
+    &.scroll {
+      transition: all 0.5s;
+      background: #fff;
+
+      .nav {
+        li {
+          a {
+            color: #000;
+
+            &:hover {
+              border-bottom: 3px solid #000;
+            }
+          }
+        }
+      }
+
+      .logo {
+        background: url("../assets/logo1.png");
+      }
+    }
+  }
 }
-</style>
+</style>

utils/request.js

@@ -25,8 +25,8 @@ function request(params = {}) {
       // 服务端返回包含 code, message, data 字段
       const { code, data } = res
 
-      // 业务处理正确则返回 1000
-      if (code === 1000) {
+      // 业务处理正确则返回 0
+      if (code - 0 === 0) {
         resolve(data)
       } else {
         reject(res)
@@ -43,6 +43,7 @@ function request(params = {}) {
   })
 }
 
+// /a/b/:id    {id:1}   ===> /a/b/1
 function replaceApiParams (url, params) {
   if (typeof params !== 'object') return url
 

vue.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  devServer: {
+    proxy:  {
+      '/api': {
+        target: 'http://localhost:8080',
+        ws: true,
+        changeOrigin: true
+      },
+      '/pc': {
+        target: 'http://localhost:8080',
+        ws: true,
+        changeOrigin: true
+      }
+    }
+  }
+}