feat(zm)手机 food页面

src/App.vue

@@ -72,36 +72,36 @@
             <div class="nav-xsdiv">
               <div class="col-lg-12 nav-link flex-row" style="height: 50px;">
                 <img src="./assets/image/img/logo.png" alt="" class="navbar-brand">
-                <div style="justify-content: flex-end" class="flex-row">
-                  <router-link class="navbar-brand-sm"  to="/index" tag="a">
-                    <span>首</span>
-                    <span>页</span>
-                  </router-link>
-                  <router-link class="navbar-brand-sm" to="/food" tag="a" style="margin-left: 10px">
-                    <span>美</span>
-                    <span>食</span>
-                  </router-link>
-                  <router-link class="navbar-brand-sm" to="/news" tag="a" style="margin-left: 10px">
-                    <span>新</span>
-                    <span>闻</span>
-                  </router-link>
-                  <router-link class="navbar-brand-sm" to="/contact" tag="a" style="margin-left: 10px">
-                    <span>联</span>
-                    <span>系</span>
-                  </router-link>
-                  <router-link class="navbar-brand-sm" to="/recruit" tag="a" style="margin-left: 10px;margin-right: 20px">
-                    <span>招</span>
-                    <span>聘</span>
-                  </router-link>
-                  <span class="navbar-brand-sm" style="margin-left: 10px">
+<!--                <div style="justify-content: flex-end" class="flex-row">-->
+<!--                  <router-link class="navbar-brand-sm"  to="/index" tag="a">-->
+<!--                    <span>首</span>-->
+<!--                    <span>页</span>-->
+<!--                  </router-link>-->
+<!--                  <router-link class="navbar-brand-sm" to="/food" tag="a" style="margin-left: 10px">-->
+<!--                    <span>美</span>-->
+<!--                    <span>食</span>-->
+<!--                  </router-link>-->
+<!--                  <router-link class="navbar-brand-sm" to="/news" tag="a" style="margin-left: 10px">-->
+<!--                    <span>新</span>-->
+<!--                    <span>闻</span>-->
+<!--                  </router-link>-->
+<!--                  <router-link class="navbar-brand-sm" to="/contact" tag="a" style="margin-left: 10px">-->
+<!--                    <span>联</span>-->
+<!--                    <span>系</span>-->
+<!--                  </router-link>-->
+<!--                  <router-link class="navbar-brand-sm" to="/recruit" tag="a" style="margin-left: 10px;margin-right: 20px">-->
+<!--                    <span>招</span>-->
+<!--                    <span>聘</span>-->
+<!--                  </router-link>-->
+<!--                  <span class="navbar-brand-sm" style="margin-left: 10px">-->
 
-                   <a :href="'tel:400-878-124'">
-                     <img src="./assets/image/img/tel.png" alt style="height: 16px;width: 20px;margin-right: 14px"/>
-                   </a>
-<!--                    <span style="width: 60px;text-align: center;color: #E84E47;font-size: 8px">400-878-124</span>-->
+<!--                   <a :href="'tel:400-878-124'">-->
+<!--                     <img src="./assets/image/img/tel.png" alt style="height: 16px;width: 20px;margin-right: 14px"/>-->
+<!--                   </a>-->
+<!--&lt;!&ndash;                    <span style="width: 60px;text-align: center;color: #E84E47;font-size: 8px">400-878-124</span>&ndash;&gt;-->
 
-                  </span>
-                </div>
+<!--                  </span>-->
+<!--                </div>-->
               </div>
             </div>
 
@@ -116,6 +116,43 @@
 
 
     <router-view></router-view>
+    <div class="phone-show">
+      <div class="food-bg">
+        <div class="flex-column content">
+          <div class="content-top flex-row">
+            <img src="../src/assets/image/img/food-left.png" alt="" class="c-top-left">
+            <img src="../src/assets/image/img/food-right.png" alt="" class="c-top-right">
+          </div>
+
+          <div class="flex-row content-bottom">
+            <div class="flex-column food-view-left" style="width: 230px">
+              <div class="food_type " :class="{'choose_food_type':index==1}" @click="chooseType(1)">三大招牌</div>
+              <div class="food_type"  :class="{'choose_food_type':index==2}" @click="chooseType(2)">风味小食</div>
+              <div class="food_type"  :class="{'choose_food_type':index==3}" @click="chooseType(3)">拌饭类</div>
+            </div>
+            <div class="flex-row food-view-right" style="margin-left: 100px;justify-content: space-between">
+              <div class="flex-column food-pre" style="margin-right: 80px">
+                <img src="../src/assets/image/img/food1.png" alt="" style="width: 60px">
+                <div class="food-title">豌杂肉酱面</div>
+                <div class="food-desc">豌豆肉酱</div>
+              </div>
+              <div class="flex-column food-pre" style="margin-right: 80px">
+                <img src="../src/assets/image/img/food2.png" alt="" style="width: 60px">
+                <div class="food-title">葱油面</div>
+                <div class="food-desc">小香葱煸出来</div>
+              </div>
+              <div class="flex-column food-pre">
+                <img src="../src/assets/image/img/food3.png" alt="" style="width: 60px">
+                <div class="food-title">麻酱凉面</div>
+                <div class="food-desc">纯芝麻酱拌面</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
         <div id="index-bottom flex-column">
           <div class="index-bottom-top flex-row" :style="{height:indexBottomTopHeight}">
             <div class="index-bottom-top-left flex-row">
@@ -185,6 +222,10 @@ export default {
   methods: {
     choose(index) {
       this.index = index;
+    },
+
+    chooseType(index){
+      this.index =index;
     }
   },
 
@@ -202,9 +243,7 @@ export default {
   border: 0;
   color: #303030;
 }
- a{
-   color: #303030!important;
- }
+
  .address{
    margin-top: 40px;
  }
@@ -212,7 +251,11 @@ export default {
    margin-top: 10px;
  }
 
- @media screen and (max-width: 600px){/* 可视区域小于 600px,  */
+ .phone-show{
+   display: none;
+ }
+
+ @media screen and (max-width: 800px){/* 可视区域小于 600px,  */
    .bt2 {
      font-size:12px!important;
    }
@@ -232,5 +275,58 @@ export default {
    .bt1{
      margin-left: 5px;
    }
+   .bt3{
+     display: none;
+   }
+   .navbar-brand-sm{
+     color: #303030;
+   }
+   .phone-show{
+     display: block;
+     width: 100%;
+     box-sizing: border-box;
+   }
+
+  //food
+   .c-top-left{
+     width: 150px;
+   }
+   .c-top-right{
+     width: 150px;
+   }
+   .content-top{
+    margin-bottom: 10px!important;
+   }
+   .food-bg{
+    height: 600px!important;
+     padding: 0px 0px!important;
+   }
+   .food-view-left{
+     width: 20%!important;
+     margin-top: 30px;
+     margin-left: 10px;
+   }
+   .food-view-right{
+     width: 70%!important;
+     margin-left: 10px !important;
+   }
+   .content-bottom{
+     height: 300px!important;
+   }
+   .food_type{
+     font-size: 12px!important;
+     width: 60px!important;
+     height: 30px!important;
+     line-height: 30px!important;
+     margin-bottom: 30px!important;
+   }
+   .food-pre{
+     width: 30%!important;
+     font-size: 12px!important;
+     margin-right: 5px!important;
+   }
+   .food-title,.food-desc{
+     font-size: 12px!important;
+   }
  }
 </style>