feat(首页修改)

src/App.vue

@@ -73,32 +73,32 @@
               <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>-->
+                  <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>
+<!--                    <span style="width: 60px;text-align: center;color: #E84E47;font-size: 8px">400-878-124</span>-->
 
                   </span>
                 </div>
@@ -116,40 +116,40 @@
 
 
     <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">-->
-    <!--          <router-link class="bt3-brand" to="/index" tag="a">-->
-    <!--            <span>首页</span>-->
-    <!--          </router-link>-->
-    <!--          <router-link class="bt3-brand" to="/food" tag="a">-->
-    <!--            <span>醉面美食</span>-->
-    <!--          </router-link>-->
-    <!--          <router-link class="bt3-brand" to="/news" tag="a">-->
-    <!--            <span>品牌新闻</span>-->
-    <!--          </router-link>-->
-    <!--          <router-link class="bt3-brand" to="/contact" tag="a">-->
-    <!--            <span>联系我们</span>-->
-    <!--          </router-link>-->
-    <!--          <router-link class="bt3-brand" to="/recruit" tag="a">-->
-    <!--            <span>人才招聘</span>-->
-    <!--          </router-link>-->
-
-    <!--        </div>-->
-
-    <!--      </div>-->
-    <!--      <div class="index-bottom-bottom" >-->
-    <!--        <div>Copyright 醉面（中国）控股有限公司 2020 All Rights Reserved 沪ICP备15027919号</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">
+              <img src="../src/assets/image/img/bottom_title.png" alt="" class="bt1">
+              <div class="bt2 flex-column">
+                <div>联系电话：0663-1928830</div>
+                <div  class="address">联系地址</div>
+                <div  class="address-info">北京市朝阳区繁华大街3450拓基大厦1103室</div>
+              </div>
+            </div>
+<!--            <div class="bt3 flex-row">-->
+<!--              <router-link class="bt3-brand" to="/index" tag="a">-->
+<!--                <span>首页</span>-->
+<!--              </router-link>-->
+<!--              <router-link class="bt3-brand" to="/food" tag="a">-->
+<!--                <span>醉面美食</span>-->
+<!--              </router-link>-->
+<!--              <router-link class="bt3-brand" to="/news" tag="a">-->
+<!--                <span>品牌新闻</span>-->
+<!--              </router-link>-->
+<!--              <router-link class="bt3-brand" to="/contact" tag="a">-->
+<!--                <span>联系我们</span>-->
+<!--              </router-link>-->
+<!--              <router-link class="bt3-brand" to="/recruit" tag="a">-->
+<!--                <span>人才招聘</span>-->
+<!--              </router-link>-->
+
+<!--            </div>-->
+
+          </div>
+          <div class="index-bottom-bottom" >
+            <div>Copyright 醉面（中国）控股有限公司 2020  沪ICP备15027919号</div>
+          </div>
+        </div>
   </div>
 </template>
 
@@ -168,6 +168,12 @@ export default {
   created() {
     // this.getCompanyInfo();
   },
+  computed:{
+    indexBottomTopHeight:function (){
+      let w = window.innerWidth/1920*227+10
+      return w +'px';
+    }
+  },
   mounted() {
     window.location.hash = '/'
 
@@ -199,4 +205,32 @@ export default {
  a{
    color: #303030!important;
  }
+ .address{
+   margin-top: 40px;
+ }
+ .address-info{
+   margin-top: 10px;
+ }
+
+ @media screen and (max-width: 600px){/* 可视区域小于 600px,  */
+   .bt2 {
+     font-size:12px!important;
+   }
+   .index-bottom-bottom{
+     font-size:12px!important;
+   }
+   .address{
+     margin-top: 0px;
+   }
+   .address-info{
+     margin-top: 0px;
+   }
+   .bt2{
+     margin-left: 5px;
+     width: 90%;
+   }
+   .bt1{
+     margin-left: 5px;
+   }
+ }
 </style>

src/assets/css/index-bottom.scss

@@ -7,7 +7,7 @@
 }
 
 .index-bottom-top{
-  height: 227px;
+  //height: 227px;
   color: #fff;
   background-color: #282828;
 
@@ -23,14 +23,14 @@
 }
 
 .bt1{
-  width: 126px;
-  height: 73px;
+  width: 6.56%;
+  //height: 73px;
   margin-left: 160px;
   font-size: 16px;
 }
 .bt2{
-  width: 400px;
-  height: 73px;
+  width: 80%;
+  //height: 73px;
   margin-left: 100px;
   font-size: 16px;
 }

src/views/index.vue

@@ -59,8 +59,8 @@ import '../assets/css/index.scss'
 export default {
   data() {
     return {
-      imgList:[require("@/assets/image/img/lun_1.png"),require("@/assets/image/img/lun_1.png"),require("@/assets/image/img/lun_1.png")]
-      // imgList:[require("@/assets/image/img/lun_1.png")],
+      // imgList:[require("@/assets/image/img/lun_1.png"),require("@/assets/image/img/lun_1.png"),require("@/assets/image/img/lun_1.png")]
+      imgList:[require("@/assets/image/img/lun_1.png")],
     }
   },
   created() {