feat(zm)初始化

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.idea/.gitignore

@@ -0,0 +1,5 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/zm.iml" filepath="$PROJECT_DIR$/.idea/zm.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

.idea/zm.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

README.md

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

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
+}

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "hsay",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^0.21.0",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.14.1",
+    "jquery": "^3.5.1",
+    "swiper": "^3.4.2",
+    "viewport-units-buggyfill": "^0.6.2",
+    "vue": "^2.6.11",
+    "vue-awesome-swiper": "^3.1.3",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-plugin-component": "^1.1.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

public/bootstrap3/css/bootstrap-theme.css

@@ -0,0 +1,587 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+}
+.btn-default:active,
+.btn-primary:active,
+.btn-success:active,
+.btn-info:active,
+.btn-warning:active,
+.btn-danger:active,
+.btn-default.active,
+.btn-primary.active,
+.btn-success.active,
+.btn-info.active,
+.btn-warning.active,
+.btn-danger.active {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+}
+.btn-default.disabled,
+.btn-primary.disabled,
+.btn-success.disabled,
+.btn-info.disabled,
+.btn-warning.disabled,
+.btn-danger.disabled,
+.btn-default[disabled],
+.btn-primary[disabled],
+.btn-success[disabled],
+.btn-info[disabled],
+.btn-warning[disabled],
+.btn-danger[disabled],
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-primary,
+fieldset[disabled] .btn-success,
+fieldset[disabled] .btn-info,
+fieldset[disabled] .btn-warning,
+fieldset[disabled] .btn-danger {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.btn-default .badge,
+.btn-primary .badge,
+.btn-success .badge,
+.btn-info .badge,
+.btn-warning .badge,
+.btn-danger .badge {
+  text-shadow: none;
+}
+.btn:active,
+.btn.active {
+  background-image: none;
+}
+.btn-default {
+  text-shadow: 0 1px 0 #fff;
+  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
+  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  border-color: #ccc;
+}
+.btn-default:hover,
+.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+.btn-default:active,
+.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+.btn-default.disabled,
+.btn-default[disabled],
+fieldset[disabled] .btn-default,
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled.focus,
+.btn-default[disabled].focus,
+fieldset[disabled] .btn-default.focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+.btn-primary {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #245580;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: #265a88;
+  background-position: 0 -15px;
+}
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #265a88;
+  border-color: #245580;
+}
+.btn-primary.disabled,
+.btn-primary[disabled],
+fieldset[disabled] .btn-primary,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus,
+.btn-primary.disabled:active,
+.btn-primary[disabled]:active,
+fieldset[disabled] .btn-primary:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary.active {
+  background-color: #265a88;
+  background-image: none;
+}
+.btn-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image:      -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
+  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+}
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+.btn-success:active,
+.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+.btn-success.disabled,
+.btn-success[disabled],
+fieldset[disabled] .btn-success,
+.btn-success.disabled:hover,
+.btn-success[disabled]:hover,
+fieldset[disabled] .btn-success:hover,
+.btn-success.disabled:focus,
+.btn-success[disabled]:focus,
+fieldset[disabled] .btn-success:focus,
+.btn-success.disabled.focus,
+.btn-success[disabled].focus,
+fieldset[disabled] .btn-success.focus,
+.btn-success.disabled:active,
+.btn-success[disabled]:active,
+fieldset[disabled] .btn-success:active,
+.btn-success.disabled.active,
+.btn-success[disabled].active,
+fieldset[disabled] .btn-success.active {
+  background-color: #419641;
+  background-image: none;
+}
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+.btn-info.disabled,
+.btn-info[disabled],
+fieldset[disabled] .btn-info,
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled.focus,
+.btn-info[disabled].focus,
+fieldset[disabled] .btn-info.focus,
+.btn-info.disabled:active,
+.btn-info[disabled]:active,
+fieldset[disabled] .btn-info:active,
+.btn-info.disabled.active,
+.btn-info[disabled].active,
+fieldset[disabled] .btn-info.active {
+  background-color: #2aabd2;
+  background-image: none;
+}
+.btn-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
+  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+}
+.btn-warning:hover,
+.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+.btn-warning.disabled,
+.btn-warning[disabled],
+fieldset[disabled] .btn-warning,
+.btn-warning.disabled:hover,
+.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-warning:hover,
+.btn-warning.disabled:focus,
+.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-warning:focus,
+.btn-warning.disabled.focus,
+.btn-warning[disabled].focus,
+fieldset[disabled] .btn-warning.focus,
+.btn-warning.disabled:active,
+.btn-warning[disabled]:active,
+fieldset[disabled] .btn-warning:active,
+.btn-warning.disabled.active,
+.btn-warning[disabled].active,
+fieldset[disabled] .btn-warning.active {
+  background-color: #eb9316;
+  background-image: none;
+}
+.btn-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
+  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+.btn-danger.disabled,
+.btn-danger[disabled],
+fieldset[disabled] .btn-danger,
+.btn-danger.disabled:hover,
+.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-danger:hover,
+.btn-danger.disabled:focus,
+.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-danger:focus,
+.btn-danger.disabled.focus,
+.btn-danger[disabled].focus,
+fieldset[disabled] .btn-danger.focus,
+.btn-danger.disabled:active,
+.btn-danger[disabled]:active,
+fieldset[disabled] .btn-danger:active,
+.btn-danger.disabled.active,
+.btn-danger[disabled].active,
+fieldset[disabled] .btn-danger.active {
+  background-color: #c12e2a;
+  background-image: none;
+}
+.thumbnail,
+.img-thumbnail {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-color: #e8e8e8;
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-color: #2e6da4;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.navbar-default {
+  background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
+  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image:      -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
+  background-image:         linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
+}
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
+}
+.navbar-inverse {
+  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
+  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-radius: 4px;
+}
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image:      -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
+  background-image:         linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
+  background-repeat: repeat-x;
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
+}
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+}
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+@media (max-width: 767px) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    background-repeat: repeat-x;
+  }
+}
+.alert {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
+}
+.alert-success {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
+  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #b2dba1;
+}
+.alert-info {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
+  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #9acfea;
+}
+.alert-warning {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
+  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #f5e79e;
+}
+.alert-danger {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
+  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dca7a7;
+}
+.progress {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
+  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image:      -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
+  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image:      -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
+  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
+  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image:      -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
+  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+  background-repeat: repeat-x;
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+}
+.list-group {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 #286090;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #2b669a;
+}
+.list-group-item.active .badge,
+.list-group-item.active:hover .badge,
+.list-group-item.active:focus .badge {
+  text-shadow: none;
+}
+.panel {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
+}
+.panel-default > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-primary > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image:      -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image:         linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-success > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image:      -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
+  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-info > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image:      -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
+  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-warning > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
+  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.panel-danger > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image:      -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
+  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+  background-repeat: repeat-x;
+}
+.well {
+  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image:      -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
+  background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
+  background-repeat: repeat-x;
+  border-color: #dcdcdc;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
+}
+/*# sourceMappingURL=bootstrap-theme.css.map */

public/bootstrap3/js/npm.js

@@ -0,0 +1,13 @@
+// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
+require('../../js/transition.js')
+require('../../js/alert.js')
+require('../../js/button.js')
+require('../../js/carousel.js')
+require('../../js/collapse.js')
+require('../../js/dropdown.js')
+require('../../js/modal.js')
+require('../../js/tooltip.js')
+require('../../js/popover.js')
+require('../../js/scrollspy.js')
+require('../../js/tab.js')
+require('../../js/affix.js')

public/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favico.png">
+
+  <script
+    src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js">
+  </script>
+  <title>醉面美食【唯一官网】 </title>
+    <meta name="keywords" content="醉面美食">
+    <meta name="description" content="北京肉酱面品类领先者,加盟咨询热线400-878-124">
+</head>
+<script>
+    (function(a,h,c,b,f,g){a["UdeskApiObject"]=f;a[f]=a[f]||function(){(a[f].d=a[f].d||[]).push(arguments)};g=h.createElement(c);g.async=1;g.charset="utf-8";g.src=b;c=h.getElementsByTagName(c)[0];c.parentNode.insertBefore(g,c)})(window,document,"script","https://assets-cli.s4.udesk.cn/im_client/js/udeskApi.js","ud");
+    ud({
+        // "code": "c13jk1k",
+        // "link": "https://hushangayi.s4.udesk.cn/im_client/?web_plugin_id=16135"
+    });
+</script>
+<script>
+    var _hmt = _hmt || [];
+    (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?0497b033b0000e4e528acbe588d3340c";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(hm, s);
+    })();
+</script>
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+      Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+
+  <script>
+    window.onload = function () {
+      window.viewportUnitsBuggyfill.init({
+        hacks: window.viewportUnitsBuggyfillHacks
+      });
+    }
+  </script>
+</body>
+
+</html>

src/App.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div id="index-banner">
+      <!-- 顶部导航栏 -->
+
+
+        <!-- 分辨率大于1200页面 -->
+        <div class="nav-lg visible-lg">
+          <!--          <nav class="nav-padding"></nav>-->
+          <nav class="navbar navbar-default nav-lg navbar-fixed-top visible-lg">
+            <div class="container text-center">
+              <!-- Brand and toggle get grouped for better mobile display -->
+              <!-- 大屏幕下的样式  width>=1200px -->
+              <div class="visible-lg">
+                <!--  菜单栏 -->
+                <div class="col-lg-12 nav-link">
+                  <a class="navbar-brand" href="/index" style="color: #E84E47">
+                    <span>首</span>
+                    <span>页</span>
+                  </a>
+                  <a class="navbar-brand" href="#product">
+                    <span>醉</span>
+                    <span>面</span>
+                    <span>美</span>
+                    <span>食</span>
+                  </a>
+                  <router-link class="navbar-brand" to="/cooperation" tag="a">
+                    <span>品</span>
+                    <span>牌</span>
+                    <span>新</span>
+                    <span>闻</span>
+                  </router-link>
+                  <a class="navbar-brand"  >
+                    <span>联</span>
+                    <span>系</span>
+                    <span>我</span>
+                    <span>们</span>
+                  </a>
+                  <a class="navbar-brand">
+                    <span>人</span>
+                    <span>才</span>
+                    <span>招</span>
+                    <span>聘</span>
+                  </a>
+                  <span class="navbar-brand" style="margin-right: 155px">
+
+                   <a :href="'tel:400-086-0777'">
+                     <img src="./assets/image/img/mobile.png" alt style="height: 34px;width: 34px"/>
+                   </a>
+                    <span style="margin-left: 14px;width: 160px;text-align: center;color: #E84E47;font-size: 24px">400-878-124</span>
+
+                  </span>
+                </div>
+
+              </div>
+
+            </div>
+          </nav>
+        </div>
+
+    </div>
+    <router-view></router-view>
+    <div id="index-bottom flex-column">
+      <div class="index-bottom-top flex-row">
+        <div class="index-bottom-top-left flex-row">
+          <img src="../src/assets/image/img/bottom_title.png" alt="" class="bt1">
+          <div class="bt2 flex-column">
+            <div>联系电话：0663-1928830</div>
+            <div style="margin-top: 40px">联系地址</div>
+            <div style="margin-top: 10px">北京市朝阳区繁华大街3450拓基大厦1103室</div>
+          </div>
+        </div>
+        <div class="bt3 flex-row">
+          <a class="bt3-brand " href="/index" style="color: #E84E47">
+            <span>首页</span>
+          </a>
+          <a class="bt3-brand" href="/index">
+            <span>醉面美食</span>
+          </a>
+          <a class="bt3-brand" href="/index">
+            <span>品牌新闻</span>
+          </a>
+          <a class="bt3-brand" href="/index">
+            <span>联系我们</span>
+          </a>
+          <a class="bt3-brand" href="/index">
+            <span>人才招聘</span>
+          </a>
+
+        </div>
+
+      </div>
+      <div class="index-bottom-bottom" >
+        <div>Copyright 醉面（中国）控股有限公司 2020 All Rights Reserved 沪ICP备15027919号</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getCompanyInfo} from '@/request/api'
+import './assets/css/index-banner.scss'
+import './assets/css/index-bottom.scss'
+import './assets/css/common.scss'
+
+export default {
+  data() {
+    return {
+      topflag: false,
+      barFlag: false,
+      timer: null,
+      companyInfo: {}
+    }
+  },
+  created() {
+    // this.getCompanyInfo();
+  },
+  mounted() {
+    window.location.hash = '/'
+
+  },
+  destroyed() { //离开这个界面之后，删除，不然会有问题
+
+    window.removeEventListener('scroll', this.btn_pos)
+  },
+  methods: {},
+
+
+}
+</script>
+
+
+<style lang="scss" scope>
+</style>

src/assets/css/common.scss

@@ -0,0 +1,11 @@
+.flex-row{
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-column{
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: left;
+}

src/assets/css/cooperation.scss

@@ -0,0 +1,485 @@
+#cooperation {
+    background-color: #f7e3ca;
+    width: 100%;
+
+    >.container {
+        width: 99%;
+        max-width: 1200px;
+        position: relative;
+
+        >.padding-top {
+            padding-top: 40px;
+        }
+
+        .top-img {
+            margin-top: 60px;
+            text-align: center;
+
+            >p {
+                font-size: 28px;
+                color: #333;
+                position: relative;
+                text-align: left;
+            }
+
+            >img {
+                width: 100%;
+            }
+
+            .coo-money {
+                max-width: 934px;
+                margin: 0 auto;
+            }
+
+        }
+
+
+        /* 合作流程 */
+        /* 中大屏幕下的合作流程 */
+        .coo-progress {
+            height: 323px;
+
+            >div {
+                >ul {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+
+                    li {
+                        width: 14%;
+                        float: left;
+                        height: 76px;
+                        margin: 60px 0 0;
+                        text-align: center;
+                        position: relative;
+
+                        >span {
+                            width: 32px;
+                            height: 32px;
+                            border-radius: 50%;
+                            background-color: #fff;
+                            display: inline-block;
+                            color: #222;
+                            line-height: 32px;
+                            margin: 0 0 20px;
+                        }
+
+                        >p {
+                            font-size: 18px;
+                            color: #666;
+                            margin-bottom: 3px;
+                        }
+
+                        &::before {
+                            content: "";
+                            width: 32px;
+                            height: 32px;
+                            position: absolute;
+                            left: -10px;
+                            top: 0;
+                            background: url(../image/coop/arrow.png) no-repeat center center;
+                            background-size: cover;
+                        }
+
+                    }
+
+                    & li:first-of-type {
+                        &::before {
+                            width: 0;
+                        }
+                    }
+                }
+            }
+        }
+
+        /* 小屏幕下的合作流程 */
+        >.coo-progress-xs {
+            height: 323px;
+
+            .coo-progress {
+                p:first-of-type {
+                    span {
+                        font-size: 28px;
+                    }
+                }
+
+                >div {
+                    >ul {
+                        >li {
+                            margin: 40px 0 0;
+                            width: 25%;
+
+                            >p {
+                                font-size: 15px;
+                            }
+                        }
+
+                        & li:first-of-type {
+                            &::before {
+                                width: 32px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        /*  合作要求 */
+        /* 中大屏幕下的合作流程 */
+        >.join-us-lg {
+            width: 100%;
+
+            >.content {
+                display: flex;
+                height: 280px;
+                justify-content: space-around;
+                align-items: center;
+
+                >div {
+                    width: 23%;
+                    height: 220px;
+
+
+                    >.el-card {
+                        height: 100%;
+                        border-radius: 30px;
+
+                        >.el-card__body {
+                            padding: 10px;
+
+                            >.icon {
+                                line-height: 90px;
+                                text-align: center;
+
+                                img {
+                                    max-height: 120px;
+                                }
+                            }
+
+                            >.text {
+                                text-align: center;
+
+                                p:first-of-type {
+                                    font-size: 16px;
+                                }
+
+                                p:last-of-type {
+                                    color: #858585;
+                                }
+                            }
+
+                        }
+                    }
+
+                }
+            }
+        }
+
+        /* 小屏幕下的合作流程 */
+        .join-us-xs {
+            width: 100%;
+
+            >.content {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+
+                >div {
+                    width: 100%;
+                    height: 200px;
+
+                    >.el-card {
+                        height: 95%;
+                        border-radius: 30px;
+
+                        >.el-card__body {
+                            padding: 10px;
+
+                            >.icon {
+                                line-height: 90px;
+                                text-align: center;
+
+                                img {
+                                    max-height: 120px;
+                                }
+                            }
+
+                            >.text {
+                                text-align: center;
+
+                                p:first-of-type {
+                                    font-size: 16px;
+                                }
+
+                                p:last-of-type {
+                                    color: #858585;
+                                }
+                            }
+
+                        }
+                    }
+
+                }
+            }
+        }
+
+        /*  修改品牌介绍下面的链接 */
+        .introduce {
+            padding-bottom: 20px;
+
+            .cop-btn {
+                display: none;
+            }
+        }
+
+        /* 左上角两个链接饿样式 */
+        .link-to {
+            margin: 30px auto;
+            width: 340px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: absolute;
+            right: 30px;
+
+            >div {
+                width: 152px;
+                height: 40px;
+                background-color: #fff;
+                border-radius: 20px;
+                text-align: center;
+                line-height: 40px;
+
+                a {
+                    text-decoration: none;
+                }
+            }
+
+            >.left {
+                background-color: rgba(0, 0, 0, 0);
+
+                >a {
+                    display: inline-block;
+                    width: 152px;
+                    height: 40px;
+                    border-radius: 20px;
+                    color: #F7B500;
+                    border: 1px solid #F7B500;
+                }
+
+                >.el-drawer__wrapper {
+
+                    >.el-drawer__container {
+
+                        >.el-drawer {
+                            width: 1120px;
+                            height: 344px;
+                            border-radius: 30px 30px 0 0;
+                            /*  标题 */
+                            margin: 0 auto;
+                            outline: none;
+
+                            >.el-drawer__header {
+                                padding: 10px;
+                                margin: 0;
+                                height: 50px;
+
+                                .el-drawer__close-btn {
+                                    margin: 20px 10px;
+                                    font-size: 30px;
+                                    outline: none;
+                                }
+                            }
+
+                            >.el-drawer__body {
+                                width: 1120px;
+                                height: 344px;
+                                padding: 20px 30px;
+                                border-radius: 30px 30px 0 0;
+
+                                >div {
+                                    >.title {
+                                        p {
+                                            color: #222;
+                                            font-size: 30px;
+                                            text-align: left;
+
+                                            .title-shadow {
+                                                left: 32px;
+                                                top: 45px;
+                                            }
+                                        }
+
+                                        >.sub-title {
+                                            font-size: 20px;
+                                            color: #444;
+                                        }
+
+                                        p:last-of-type {
+                                            border-bottom: 1px solid #ccc;
+                                            padding-bottom: 20px;
+                                        }
+                                    }
+
+                                    >.content {
+                                        >.sub-title {
+                                            font-size: 20px;
+                                            color: #444;
+                                            text-align: left;
+                                            padding: 20px 0;
+                                        }
+
+                                        >div {
+                                            width: 70%;
+                                            float: left;
+                                            display: flex;
+                                            justify-content: space-between;
+
+                                            >.el-cascader {
+                                                width: 300px;
+
+                                            }
+
+                                            >.el-button {
+                                                span {
+                                                    color: #000;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+
+                            }
+                        }
+                    }
+                }
+            }
+
+            >.right {
+                background-color: #F7B500;
+
+                a {
+                    color: #000;
+                }
+
+                >.el-drawer__wrapper {
+
+                    >.el-drawer__container {
+                        >.el-drawer {
+                            width: 1120px;
+                            height: 344px;
+                            border-radius: 30px 30px 0 0;
+                            /*  标题 */
+                            margin: 0 auto;
+                            outline: none;
+
+                            >.el-drawer__header {
+                                padding: 10px;
+                                margin: 0;
+                                height: 50px;
+
+                                .el-drawer__close-btn {
+                                    margin: 20px 10px;
+                                    font-size: 30px;
+                                    outline: none;
+                                }
+                            }
+
+                            >.el-drawer__body {
+                                width: 1120px;
+                                height: 344px;
+                                padding: 20px 30px;
+                                border-radius: 30px 30px 0 0;
+
+                                >div {
+                                    >.title {
+                                        p {
+                                            color: #222;
+                                            font-size: 30px;
+                                            text-align: left;
+
+                                            .title-shadow {
+                                                left: 32px;
+                                                top: 45px;
+                                            }
+                                        }
+
+
+
+                                    }
+
+                                    >.content {
+                                        padding-top: 30px;
+
+                                        div {
+                                            >.wx-img {
+                                                width: 400px;
+                                                margin: 0 auto;
+
+                                                img {
+                                                    width: 160px;
+                                                }
+
+                                                img:last-of-type {
+                                                    width: 180px;
+                                                    padding-left: 10px;
+                                                }
+                                            }
+
+                                            >.texts {
+                                                padding-top: 30px;
+
+                                                >p {
+                                                    padding: 0;
+                                                    margin: 0;
+                                                    line-height: 30px;
+                                                    font-size: 16px;
+                                                    letter-spacing: 1px;
+                                                }
+                                            }
+                                        }
+
+
+                                    }
+                                }
+
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+
+
+
+
+    /* 公共样式 */
+    /* 阴影式标题 */
+    .title-shadow {
+        position: absolute;
+        opacity: 0.1;
+        line-height: 48px;
+        font-size: 45px;
+        left: 4px;
+        top: -22px;
+        letter-spacing: 1px;
+    }
+
+    .title-shadow-xs {
+        position: absolute;
+        opacity: 0.1;
+        line-height: 48px;
+        font-size: 30px;
+        left: 4px;
+        top: -24px;
+        letter-spacing: 1px;
+    }
+
+    .red {
+        color: red;
+    }
+}

src/assets/css/index-banner.scss

@@ -0,0 +1,217 @@
+#index-banner {
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  .nav-padding {
+    //padding-top: 60px;
+    margin: 0;
+    border: 0;
+  }
+
+  .nav-smpadding {
+    padding-top: 40px;
+    margin: 0;
+    border: 0;
+  }
+  .nav-link{
+    height: 100px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  /* 分辨率大于1200的样式 */
+  .nav-lg {
+    background-color: #FFFFFF;
+    border-radius: 0;
+    height: 100px;
+    border: 0;
+    color: #303030;
+
+    .container {
+      width: 100%;
+
+      /* 菜单栏的公共样式 */
+      .navbar-brand {
+        font-size: 18px;
+        height: 100px;
+        color: #303030;
+        margin-left: 80PX;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: left;
+        align-items: center;
+
+      }
+
+      /*  为菜单栏设置鼠标悬停样式动画的转场 */
+      .nav-link {
+        a {
+          span {
+            transition: all 0.5s ease;
+            padding: 0 2px;
+          }
+
+        }
+
+        a:hover {
+          //border-top: 1px solid #ccc;
+          //border-bottom: 1px solid #ccc;
+
+          span {
+
+            display: inline-block;
+            transform: rotateY(360deg);
+            transform-origin: center;
+            text-shadow: #ccc 0.1em 0.1em 0.2em
+          }
+        }
+      }
+
+      /* 品牌logo的样式 */
+      .logo {
+        height: 60px;
+
+        img {
+          max-height: 55px;
+          vertical-align: top;
+        }
+      }
+
+      /* 导航栏右侧小图标的样式 */
+      .top-icons {
+        line-height: 60px;
+        color: #fff;
+        font-size: 15px;
+
+        a {
+          color: #fff;
+        }
+
+        >.icon {
+          padding: 0;
+          position: relative;
+
+          >span {
+            padding: 4px;
+
+          
+
+          }
+
+          & span:first-child {
+            a {
+              margin-left: 4px;
+            }
+          }
+
+          .wx-link:hover {
+            .wx-img {
+              opacity: 1;
+              width: 150px;
+            }
+          }
+
+          .wb-link:hover {
+            .wb-img {
+              opacity: 1;
+              width: 150px;
+            }
+          }
+
+          /* 微信跟微博的二维码样式 */
+          .wx-img {
+            position: absolute;
+            top: 38px;
+            left: 10px;
+            width: 0px;
+            opacity: 0;
+            transition: all 0.5s ease;
+          }
+
+          .wb-img {
+            position: absolute;
+            width: 0px;
+            top: 38px;
+            left: 48px;
+            opacity: 0;
+            transition: all 0.5s ease;
+          }
+        }
+      }
+    }
+  }
+
+
+
+  /* 手机端联系我们的图标 */
+  .m-kf {
+    width: 30px;
+    height: 120px;
+    position: fixed;
+    left: 2px;
+    top: 20%;
+    z-index: 99;
+    text-align: center;
+    background-color: burlywood;
+    ;
+    padding-top: 8px;
+    border-radius: 3px;
+    box-shadow: 0 5px 10px rgba(40, 40, 40, .4);
+
+    a {
+      color: #e6e6e6;
+      display: inline-block;
+      width: 15px;
+      font-size: 15px;
+
+    }
+
+  }
+
+
+  /* 设置回到顶部的淡入淡出效果 */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .5s
+  }
+
+  .fade-enter,
+  .fade-leave-active {
+    opacity: 0
+  }
+
+  /* 分辨率小于1200时隐藏了导航栏的电话显示小电话图标 */
+  .tel {
+    width: 50px;
+    height: 50px;
+    position: fixed;
+    right: 30px;
+    top: 15%;
+    border-radius: 50%;
+    background-color: #f7b500;
+    text-align: center;
+
+    img {
+      width: 30px;
+      margin-top: 10px;
+    }
+  }
+
+  .f18 {
+    font-size: 18px;
+  }
+
+  .f12 {
+    font-size: 12px;
+    margin: 0;
+  }
+}

src/assets/css/index-bottom.scss

@@ -0,0 +1,48 @@
+
+
+#index-bottom{
+  width: 100%;
+  height: 266px;
+
+}
+
+.index-bottom-top{
+  height: 227px;
+  color: #fff;
+  background-color: #282828;
+
+}
+.index-bottom-bottom{
+  height: 37px;
+  text-align: center;
+  line-height: 37px;
+  background-color: #1D1D1D;
+  font-weight: 500;
+  color: #FFFFFF;
+  font-size: 14px;
+}
+
+.bt1{
+  width: 126px;
+  height: 73px;
+  margin-left: 160px;
+  font-size: 16px;
+}
+.bt2{
+  width: 400px;
+  height: 73px;
+  margin-left: 100px;
+  font-size: 16px;
+}
+.bt3{
+  justify-content: left!important;
+  font-size: 18px;
+  flex-flow: row wrap!important;
+  margin-right: 160px;
+
+}
+.bt3-brand{
+  margin-left: 80px;
+  min-width: 80px;
+  color: #FFFFFF;
+}

src/assets/css/index.scss

@@ -0,0 +1,13 @@
+#index {
+    width: 100%;
+
+}
+
+backimg-two{
+    width: 100%;
+}
+
+.backimg {
+    width: 100%;
+}
+

src/main.js

@@ -0,0 +1,51 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store'
+import $ from 'jquery'
+import  axios from 'axios'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
+import '../public/bootstrap3/css/bootstrap.min.css'
+import '../public/bootstrap3/js/bootstrap.min.js'
+import { Button, Card,Drawer,Cascader } from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import router from './router'
+
+Vue.use(Button);
+Vue.use(Card);
+Vue.use(Drawer);
+Vue.use(Cascader);
+Vue.use(VueAwesomeSwiper);
+Vue.config.productionTip = false
+
+
+router.beforeEach((to, from, next) => {
+  /* 路由发生变化修改页面title */
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  if (to.meta.keyword) {
+    var dMeta = document.createElement('meta');
+    var sName = 'keywords';
+    dMeta.setAttribute('name', sName);
+    dMeta.setAttribute('content', to.meta.keyword);
+    document.head.appendChild(dMeta);
+  }
+  if (to.meta.description) {
+    var dMeta = document.createElement('meta');
+    var sName = 'description';
+    dMeta.setAttribute('name', sName);
+    dMeta.setAttribute('content', to.meta.description);
+    document.head.appendChild(dMeta);
+  }
+  next()
+})
+
+
+axios.defaults.baseURL='/website-api';
+new Vue({
+  router,
+  store,
+  render: h => h(App),
+}).$mount('#app')
+

src/request/api.js

@@ -0,0 +1,15 @@
+import {
+    get
+} from './http'
+
+
+// 获取开通城市信息
+export const getCities = p => get('/OpenArea/index', p);
+// 获取公司详细信息
+export const getCompanyInfo = p => get('/setting/read', p)
+// 获取首页的图片
+export const getIndexImg = p => get('/home/index',p)
+// 获取轮播图的图片
+export const getThumbImg = p => get('/Carousel/index',p)
+// 获取品牌信息
+export const getbrandInfo = p => get('/brand/read',p)

src/request/http.js

@@ -0,0 +1,17 @@
+import axios from 'axios'
+
+/**
+ * get方法，对应get请求
+ * @param {String} url [请求的url地址]
+ * @param {Object} params [请求时携带的参数]
+ */
+export function get(url, params){    
+    return new Promise((resolve, reject) =>{        
+        axios.get(url, {            
+            params: params        
+        }).then(res => {
+            resolve(res.data);
+        }).catch(err =>{
+            reject(err.data)        
+    })    
+});}

src/router/index.js

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import index from '../views/index.vue'
+import cooperation from '../views/cooperation.vue'
+
+Vue.use(VueRouter)
+
+const routes = [{
+    path: '/',
+    redirect: "/index",
+    meta: {
+      title: '醉面美食【唯一官网】',
+      keyword: '醉面美食,',
+      description: '北京肉酱面品类领先者,加盟咨询热线400-878-124.'
+    }
+  },
+  {
+    path: '/index',
+    component: index,
+    meta: {
+      title: '醉面美食【唯一官网】',
+      keyword: '醉面美食,',
+      description: '北京肉酱面品类领先者,加盟咨询热线400-878-124.'
+    }
+  },
+  {
+    path: '/cooperation',
+    component: cooperation,
+    name: 'cooperation',
+    meta: {
+      title: '醉面美食【唯一官网】',
+      keyword: '醉面美食,',
+      description: '北京肉酱面品类领先者,加盟咨询热线400-878-124.'
+    }
+  }
+]
+
+const router = new VueRouter({
+  mode:'history',
+  routes,
+})
+
+//获取原型对象上的push函数
+const originalPush = VueRouter.prototype.push
+//修改原型对象中的push方法
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+
+export default router

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/cooperation.vue

@@ -0,0 +1,428 @@
+<template>
+  <div id="cooperation">
+    <div class="container">
+      <div id="cooperationTop"></div>
+      <nav class="padding-top visible-lg"></nav>
+      <!-- 左上角两个链接 -->
+      <div class="link-to hidden-xs hidden-sm hidden-md">
+        <div class="left">
+          <a href="javascript:;" @click="lfdrawer = true">了解开放地区</a>
+          <el-drawer title :size="size" :visible.sync="lfdrawer" :direction="direction">
+            <div>
+              <div class="title">
+                <p>
+                  可合作区域：全国
+                  <span class="title-shadow">COOPERATION AREA</span>
+                </p>
+                <p class="sub-title">合作区域定期更新</p>
+                <p class="sub-title">热门城市：{{hotCity}}</p>
+              </div>
+              <div class="content">
+                <p class="sub-title">选择了解地区</p>
+                <div>
+                  <el-cascader placeholder="请选择" :props="props" filterable></el-cascader>
+                  <el-button type="warning" @click="changedrawr">申请合作</el-button>
+                </div>
+              </div>
+            </div>
+          </el-drawer>
+        </div>
+        <div class="right">
+          <a href="javascript:;" @click="drawer = true">填写合作申请书</a>
+          <el-drawer title :visible.sync="drawer" :direction="direction" :size="size">
+            <div>
+              <div class="title">
+                <p>
+                  合作申请
+                  <span class="title-shadow">COOPERATIVE APPLICATION</span>
+                </p>
+              </div>
+              <div class="content">
+                <div>
+                  <div class="wx-img">
+                    <img src="../assets/image/coop/clickphone.png" alt />
+                    <img :src="wxImg" alt />
+                  </div>
+                  <div class="texts">
+                    <p>微信扫一扫识别二维码申请合作</p>
+                    <p>关注公众号【沪上阿姨合伙人】</p>
+                    <p>填写合作申请书</p>
+                    <p class="red">请先确定所选的意向区域为开放地区</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-drawer>
+        </div>
+      </div>
+
+      <div class="top-img">
+        <p>
+          合作费用
+          <span class="title-shadow hidden-xs">Process</span>
+          <span class="title-shadow-xs hidden-sm hidden-md hidden-lg">Process</span>
+        </p>
+        <img :src="moneyImg" alt />
+      </div>
+      <div class="top-img">
+        <p>
+          问答
+          <span class="title-shadow hidden-xs">Question</span>
+          <span class="title-shadow-xs hidden-sm hidden-md hidden-lg">Question</span>
+        </p>
+        <img :src="answerImg" alt class="coo-money" />
+      </div>
+
+      <!-- 合作流程 -->
+      <!-- 分辨率大于768的合作流程 -->
+      <div class="coo-progress top-img visible-lg visible-sm visible-md">
+        <p>
+          合作流程
+          <span class="title-shadow">COOPERATION FLOW</span>
+        </p>
+        <div>
+          <ul>
+            <li>
+              <span>01</span>
+              <p>合作申请</p>
+            </li>
+            <li>
+              <span>01</span>
+              <p>电话初审</p>
+              <p>视频复审</p>
+            </li>
+            <li>
+              <span>03</span>
+              <p>确定合作意向</p>
+            </li>
+            <li>
+              <span>04</span>
+              <p>选址审核</p>
+              <p>正式授权</p>
+            </li>
+            <li>
+              <span>05</span>
+              <p>装修施工</p>
+              <p>培训考核</p>
+            </li>
+            <li>
+              <span>06</span>
+              <p>试营业</p>
+            </li>
+            <li>
+              <span>07</span>
+              <p>正式开业</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <!-- 分辨率小于768的合作流程 -->
+      <div class="coo-progress-xs visible-xs">
+        <div class="coo-progress top-img visible-xs">
+          <p>
+            合作流程
+            <span class="title-shadow">COOPERATION FLOW</span>
+          </p>
+          <div>
+            <ul>
+              <li>
+                <span>01</span>
+                <p>合作申请</p>
+              </li>
+              <li>
+                <span>01</span>
+                <p>电话初审</p>
+                <p>视频复审</p>
+              </li>
+              <li>
+                <span>03</span>
+                <p>确定合作意向</p>
+              </li>
+              <li>
+                <span>04</span>
+                <p>选址审核</p>
+                <p>正式授权</p>
+              </li>
+              <li>
+                <span>05</span>
+                <p>装修施工</p>
+                <p>培训考核</p>
+              </li>
+              <li>
+                <span>06</span>
+                <p>试营业</p>
+              </li>
+              <li>
+                <span>07</span>
+                <p>正式开业</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- 合作要求 -->
+      <!-- 中大屏幕下的合作流程 -->
+      <div class="join-us-lg visible-sm visible-md visible-lg">
+        <div class="top-img">
+          <p>
+            合作要求
+            <span class="title-shadow hidden-xs">JOIN US</span>
+            <span class="title-shadow-xs hidden-sm hidden-md hidden-lg">JOIN US</span>
+          </p>
+        </div>
+        <div class="content">
+          <div>
+            <el-card shadow="hover">
+              <div class="icon">
+                <img src="../assets/image/coop/coo-icon01.png" alt />
+              </div>
+              <div class="text">
+                <p>热爱茶饮事业</p>
+                <p>年龄22-45周岁，大专以上学历</p>
+              </div>
+            </el-card>
+          </div>
+          <div>
+            <el-card shadow="hover">
+              <div class="icon">
+                <img src="../assets/image/coop/coo-icon02.png" alt />
+              </div>
+              <div class="text">
+                <p>契约精神</p>
+                <p>
+                  遵守沪上阿姨各项规章制度
+                  具有契约精神
+                </p>
+              </div>
+            </el-card>
+          </div>
+          <div>
+            <el-card shadow="hover">
+              <div class="icon">
+                <img src="../assets/image/coop/coo-icon03.png" alt />
+              </div>
+              <div class="text">
+                <p>铁杆店员2名</p>
+                <p>亲自带店一年，两个铁杆店员（专业敬业）</p>
+              </div>
+            </el-card>
+          </div>
+          <div>
+            <el-card shadow="hover">
+              <div class="icon">
+                <img src="../assets/image/coop/coo-icon04.png" alt />
+              </div>
+              <div class="text">
+                <p>资金要求</p>
+                <p>
+                  具备40万以上资金量
+                  有一定的风险承受能力
+                </p>
+              </div>
+            </el-card>
+          </div>
+        </div>
+      </div>
+      <!-- 小屏幕下的合作流程 -->
+      <div class="join-us-xs visible-xs">
+        <div class="top-img">
+          <p>
+            合作要求
+            <span class="title-shadow hidden-xs">JOIN US</span>
+            <span class="title-shadow-xs hidden-sm hidden-md hidden-lg">JOIN US</span>
+          </p>
+        </div>
+        <div class="content">
+          <div>
+            <el-card shadow="hover">
+              <div class="icon">
+                <img src="../assets/image/coop/coo-icon01.png" alt />
+              </div>
+              <div class="text">
+                <p>热爱茶饮事业</p>
+                <p>年龄22-45周岁，大专以上学历</p>
+              </div>
+            </el-card>
+          </div>
+          <div>
+            <el-card shadow="hover">
+              <div class="icon">
+                <img src="../assets/image/coop/coo-icon02.png" alt />
+              </div>
+              <div class="text">
+                <p>契约精神</p>
+                <p>
+                  遵守沪上阿姨各项规章制度
+                  具有契约精神
+                </p>
+              </div>
+            </el-card>
+          </div>
+          <div>
+            <el-card shadow="hover">
+              <div class="icon">
+                <img src="../assets/image/coop/coo-icon03.png" alt />
+              </div>
+              <div class="text">
+                <p>铁杆店员2名</p>
+                <p>亲自带店一年，两个铁杆店员（专业敬业）</p>
+              </div>
+            </el-card>
+          </div>
+          <div>
+            <el-card shadow="hover">
+              <div class="icon">
+                <img src="../assets/image/coop/coo-icon04.png" alt />
+              </div>
+              <div class="text">
+                <p>资金要求</p>
+                <p>
+                  具备40万以上资金量
+                  有一定的风险承受能力
+                </p>
+              </div>
+            </el-card>
+          </div>
+        </div>
+      </div>
+
+      <!-- 品牌介绍 -->
+      <introduce></introduce>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getCities,getIndexImg,getCompanyInfo} from '@/request/api'
+import { Cascader, Card } from 'element-ui'
+import '@/assets/css/cooperation.scss'
+import introduce from '@/components/introduce.vue'
+export default {
+  data() {
+    return {
+      lfdrawer: false,
+      drawer: false,
+      direction: 'btt',
+      size: '80%',
+      moneyImg: '',
+      answerImg: '',
+      wxImg: '',
+      hotCity: '山东，安徽，天津，江苏',
+      props: {
+        lazy: true,
+        checkStrictly: true,
+        lazyLoad(node, resolve) {
+          const { level } = node
+          const query = {
+            page: 1,
+            pageSize: 100
+          }
+          query.pid = node.value ? node.value : 100000
+          getCities(query).then(res => {
+            const nodes = []
+            res.data.list.forEach(v => {
+              nodes.push({
+                value: v.id,
+                label: v.name,
+                leaf: level >= 2
+              })
+            })
+            resolve(nodes)
+          })
+        }
+      }
+
+    }
+  },
+  created() {
+    this.getImgUrl()
+    getCities({ page: 1, pageSize: 6 }).then(res => {
+      let city = '';
+      res.data.list.forEach(v =>{
+        city += v['sname'] + '，'
+      })
+      city = city.substring(0, city.length-1)
+      this.hotCity = city;
+    })
+  },
+  mounted: function () {
+
+    let that = this;
+    that.$nextTick(function () {
+      window.addEventListener('scroll', that.handleScroll)
+    })
+    let toElement = document.getElementById('cooperationTop');
+    //如果对应id存在，就跳转
+    toElement.scrollIntoView();
+  },
+  methods: {
+    changedrawr() {
+      this.lfdrawer = false;
+      this.drawer = true;
+    },
+    getlocal() {
+      let selectId = localStorage.getItem("toId");
+      //找到锚点id
+      let toElement = document.getElementById(selectId);
+      //如果对应id存在，就跳转
+      if (selectId) {
+        toElement.scrollIntoView()
+      }
+    },
+    /* 获取图片的地址 */
+    getImgUrl() {
+      /* 获取第一张图片 */
+      getIndexImg( {
+        
+          "page": "1",
+          "pageSize": "2",
+          "type": "2"
+        
+      }).then(res => {
+        if (res.code == 1) {
+          if (res.data.count > 0) {
+            var list = res.data.list;
+            this.moneyImg = list[0].img_url;
+
+          }
+        }
+      })
+      // 获取第二张图片
+      getIndexImg({
+          "page": "1",
+          "pageSize": "2",
+          "type": "3"
+      }).then(res => {
+        if (res.code == 1) {
+          if (res.data.count > 0) {
+            var list = res.data.list;
+            this.answerImg = list[0].img_url;
+
+          }
+        }
+      });
+
+      /* 获取客服微信二维码 */
+      getCompanyInfo().then(res => {
+        if (res.code == 1) {
+          this.wxImg = res.data.info.kf_wechat;
+        }
+      })
+    },
+   
+
+
+  },
+  destroyed() {
+    localStorage.setItem("toId", '')
+  },
+  components: {
+
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div style="overflow:hidden">
+    <!-- 首页的样式 -->
+    <div id="index">
+      <!-- 首页背景图部分 -->
+      <div class="container-fluid">
+        <div class="index-bg">
+          <!-- 首页第一个背景图 -->
+          <div class="backimg">
+            <img src="../assets/image/img/index_top.png" alt/>
+          </div>
+          <!-- 首页第二个背景图 -->
+          <div class="backimg-two">
+            <img src="../assets/image/img/index_mid.png" alt/>
+
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {getCompanyInfo, getIndexImg, getThumbImg} from '@/request/api'
+
+import '../assets/css/index.scss'
+// import introduce from '@/components/introduce'
+
+
+export default {
+  data() {
+    return {}
+  },
+  created() {
+
+  },
+
+  mounted: function () {
+
+
+  },
+  methods: {},
+  destroyed() {
+
+  },
+  components: {
+    // introduce,
+    // shopthumb,
+    // productthumb,
+    // "el-card": Card
+  }
+}
+
+
+</script>
+
+<style lang="scss">
+</style>

vue.config.js

@@ -0,0 +1,32 @@
+const webpack = require('webpack')
+const path = require('path'); //引入path模块
+function resolve(dir) {
+  return path.join(__dirname, dir) //path.join(__dirname)设置绝对路径
+}
+//网站title
+const name = "醉面美食【唯一官网】"
+
+module.exports = {
+  chainWebpack: config => {
+    config.plugin('provide').use(webpack.ProvidePlugin, [{
+      $: 'jquery',
+      jquery: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }]);
+
+  },
+  configureWebpack: {
+    devServer: {
+      proxy: {
+        '/website-api': {
+          target: 'https://www.hsayi.com',
+          changeOrigin: true, //是否跨域
+          // pathRewrite: {
+          //   '^/api': '' //规定请求地址以什么作为开头
+          // }
+        }
+      }
+    }
+  }
+}