feat(zm)初始化

src/App.vue

@@ -18,30 +18,31 @@
                     <span>首</span>
                     <span>页</span>
                   </a>
-                  <a class="navbar-brand" href="#product">
+                  <router-link class="navbar-brand" to="/food" tag="a">
+
                     <span>醉</span>
                     <span>面</span>
                     <span>美</span>
                     <span>食</span>
-                  </a>
-                  <router-link class="navbar-brand" to="/cooperation" tag="a">
+                  </router-link>
+                  <router-link class="navbar-brand" to="/food" tag="a">
                     <span>品</span>
                     <span>牌</span>
                     <span>新</span>
                     <span>闻</span>
                   </router-link>
-                  <a class="navbar-brand"  >
+                  <router-link class="navbar-brand" to="/contact" tag="a">
                     <span>联</span>
                     <span>系</span>
                     <span>我</span>
                     <span>们</span>
-                  </a>
-                  <a class="navbar-brand">
+                  </router-link>
+                    <router-link class="navbar-brand" to="/recruit" tag="a">
                     <span>人</span>
                     <span>才</span>
                     <span>招</span>
                     <span>聘</span>
-                  </a>
+                    </router-link>
                   <span class="navbar-brand" style="margin-right: 155px">
 
                    <a :href="'tel:400-086-0777'">
@@ -74,16 +75,16 @@
           <a class="bt3-brand " href="/index" style="color: #E84E47">
             <span>首页</span>
           </a>
-          <a class="bt3-brand" href="/index">
+          <a class="bt3-brand" href="/food">
             <span>醉面美食</span>
           </a>
           <a class="bt3-brand" href="/index">
             <span>品牌新闻</span>
           </a>
-          <a class="bt3-brand" href="/index">
+          <a class="bt3-brand" href="/contact">
             <span>联系我们</span>
           </a>
-          <a class="bt3-brand" href="/index">
+          <a class="bt3-brand" href="/recruit">
             <span>人才招聘</span>
           </a>
 

src/assets/css/contact.scss

@@ -0,0 +1,49 @@
+
+#contact {
+  width: 100%;
+
+}
+
+.contact-bg{
+  width: 100%;
+  height: 1450px;
+  background-color: #ffffff;
+  padding: 0px 160px;
+  box-sizing: border-box;
+}
+
+.contact-bottom{
+  width: 100%;
+  height: 1220px;
+
+}
+.name{
+  height: 48px;
+  font-size: 48px;
+  font-weight: 500;
+  color: #000000;
+  line-height: 48px;
+  margin-top: 100px;
+}
+.msg-img-list{
+  height: 200px;
+  width: 100%;
+  margin-top: 100px;
+}
+.msg-img{
+  width: 100px;
+  height: 100px;
+}
+.msg-text{
+  font-size: 20px;
+  font-weight: 500;
+  color: #000000;
+  width: 280px;
+  height: 60px;
+  text-align: center;
+}
+.map{
+  margin-top: 50px;
+  width: 100%;
+}
+

src/assets/css/cooperation.scss

@@ -1,485 +0,0 @@
-#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/food.scss

@@ -0,0 +1,57 @@
+
+#food {
+  width: 100%;
+
+}
+
+.food-bg{
+  width: 100%;
+  height: 1040px;
+  background: #dd0318;
+  padding: 0px 160px;
+  box-sizing: border-box;
+}
+
+.content-top{
+  margin-top: 64px;
+  margin-bottom: 90px;
+}
+
+.content-bottom{
+  height: 560px;
+}
+.food_type{
+  width: 226px;
+  height: 74px;
+  line-height: 74px;
+  border-radius: 40px;
+  border: 3px solid #ffbf71;
+  font-size: 28px;
+  font-weight: 500;
+  text-align: center;
+  color: #FFBF71;
+ margin-bottom: 60px;
+  cursor: pointer;
+
+}
+.choose_food_type{
+  background: #ffbf71!important;
+  color: #dd0318!important;
+
+}
+.food-pre{
+  align-items: center;
+}
+.food-title{
+  font-size: 40px;
+  font-weight: 500;
+  color: #ffffff;
+  margin-top: 30px;
+}
+
+.food-desc{
+  font-weight: 500;
+  color: #ffffff;
+  margin-top: 16px;
+}
+

src/assets/css/index.scss

@@ -41,12 +41,12 @@
 .desc-img-list{
     width: 100%;
     height: 320px;
-    background: #dc0219;
+    background-color: #dc0219;
     justify-content: space-between;
 }
 .desc_1{
-    margin-left: 160px;
+    margin-left: 120px;
 }
 .desc_3{
-    margin-right: 160px;
+    margin-right: 120px;
 }

src/assets/css/recruit.scss

@@ -0,0 +1,19 @@
+
+#recruit {
+  width: 100%;
+
+}
+
+.recruit-bg{
+  width: 100%;
+  height: 1450px;
+  background-color: #ffffff;
+  padding: 0px 160px;
+  box-sizing: border-box;
+}
+.recruit-bottom{
+  width: 100%;
+  margin-top: 130px;
+}
+
+

src/router/index.js

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

src/views/contact.vue

@@ -0,0 +1,72 @@
+<template>
+  <div style="overflow:hidden">
+    <div id="contact">
+
+
+      <div class="contact-bg">
+        <img src="../assets/image/img/call.png" alt="" style="width: 100%">
+        <div class="contact-bottom flex-column" style="align-items: center">
+
+          <div class="name">北京醉面餐饮集团有限公司</div>
+
+          <div class="flex-row msg-img-list">
+            <div class="flex-column" style="margin-left: 150px;align-items: center">
+              <img src="../assets/image/img/address.png" alt="" class="msg-img">
+              <div class="msg-text">北京市朝阳区繁华大街3450拓基大厦1103室</div>
+            </div>
+            <div class="flex-column" style="align-items: center">
+              <img src="../assets/image/img/mobile.png" alt="" class="msg-img">
+              <div class="msg-text">021-67675666</div>
+            </div>
+            <div class="flex-column"  style="align-items: center">
+              <img src="../assets/image/img/ie.png" alt="" class="msg-img">
+              <div class="msg-text" style="cursor: pointer">www.shpocc.com</div>
+            </div>
+            <div class="flex-column"  style="margin-right: 150px;align-items: center">
+              <img src="../assets/image/img/email.png" alt="" class="msg-img">
+              <div class="msg-text">bj@pocc.co</div>
+            </div>
+          </div>
+
+          <img src="../assets/image/img/contact_map.png" alt="" class="map">
+        </div>
+
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<script>
+import '../assets/css/contact.scss'
+
+export default {
+  data() {
+    return {}
+  },
+  created() {
+
+  },
+
+  mounted: function () {
+
+
+  },
+  methods: {},
+  destroyed() {
+
+  },
+  components: {
+    // introduce,
+    // shopthumb,
+    // productthumb,
+    // "el-card": Card
+  }
+}
+
+
+</script>
+
+<style lang="scss">
+</style>

src/views/cooperation.vue

@@ -1,393 +0,0 @@
-<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>
-
-
-    </div>
-  </div>
-</template>
-
-<script>
-import {getCities,getIndexImg,getCompanyInfo} from '@/request/api'
-import '@/assets/css/cooperation.scss'
-
-export default {
-  data() {
-    return {}
-  },
-  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/food.vue

@@ -0,0 +1,74 @@
+<template>
+  <div style="overflow:hidden">
+    <div id="food">
+
+
+        <div class="food-bg">
+          <div class="flex-column content">
+            <div class="content-top flex-row">
+              <img src="../assets/image/img/food-left.png" alt="" class="c-top-left">
+              <img src="../assets/image/img/food-right.png" alt="" class="c-top-right">
+            </div>
+
+            <div class="flex-row content-bottom">
+              <div class="flex-column" style="width: 230px">
+                <div class="food_type choose_food_type">三大招牌</div>
+                <div class="food_type">风味小食</div>
+                <div class="food_type">拌饭类</div>
+              </div>
+              <div class="flex-row" style="margin-left: 100px;justify-content: space-between">
+                  <div class="flex-column food-pre" style="margin-right: 80px">
+                    <img src="../assets/image/img/food1.png" alt="">
+                    <div class="food-title">豌杂肉酱面</div>
+                    <div class="food-desc">一般豌豆 一半肉酱</div>
+                  </div>
+                <div class="flex-column food-pre" style="margin-right: 80px">
+                  <img src="../assets/image/img/food2.png" alt="">
+                  <div class="food-title">葱油面</div>
+                  <div class="food-desc">小香葱煸出来</div>
+                </div>
+                <div class="flex-column food-pre">
+                  <img src="../assets/image/img/food3.png" alt="">
+                  <div class="food-title">麻酱凉面</div>
+                  <div class="food-desc">纯芝麻酱拌面</div>
+                </div>
+              </div>
+            </div>
+          </div>
+      </div>
+  </div>
+  </div>
+</template>
+
+<script>
+import '../assets/css/food.scss'
+
+export default {
+  data() {
+    return {}
+  },
+  created() {
+
+  },
+
+  mounted: function () {
+
+
+  },
+  methods: {},
+  destroyed() {
+
+  },
+  components: {
+    // introduce,
+    // shopthumb,
+    // productthumb,
+    // "el-card": Card
+  }
+}
+
+
+</script>
+
+<style lang="scss">
+</style>

src/views/index.vue

@@ -37,7 +37,7 @@
 
 
           <div class="flex-row  desc-img-list">
-            <div class="flex-row" style="margin-top: -400px">
+            <div class="flex-row" style="margin-top: -400px;width: 100%">
             <img src="../assets/image/img/desc_1.png" alt="" class="desc_1">
             <img src="../assets/image/img/desc_2.png" alt="" class="desc_2">
             <img src="../assets/image/img/desc_3.png" alt="" class="desc_3">
@@ -51,11 +51,7 @@
 </template>
 
 <script>
-import {getCompanyInfo, getIndexImg, getThumbImg} from '@/request/api'
-
 import '../assets/css/index.scss'
-// import introduce from '@/components/introduce'
-
 
 export default {
   data() {

src/views/recruit.vue

@@ -0,0 +1,53 @@
+<template>
+  <div style="overflow:hidden">
+    <div id="recruit">
+
+
+      <div class="recruit-bg">
+        <img src="../assets/image/img/recurit.png" alt="" style="width: 100%">
+        <div class="recruit-bottom" style="align-items: center">
+
+          <div>
+
+          </div>
+
+        </div>
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<script>
+import '../assets/css/recruit.scss'
+
+export default {
+  data() {
+    return {}
+  },
+  created() {
+
+  },
+
+  mounted: function () {
+
+
+  },
+  methods: {},
+  destroyed() {
+
+  },
+  components: {
+    // introduce,
+    // shopthumb,
+    // productthumb,
+    // "el-card": Card
+  }
+}
+
+
+</script>
+
+<style lang="scss">
+</style>