Browse Source

feat(修改页面样式)

xing.li 3 years ago
parent
commit
bc206295e3
6 changed files with 159 additions and 81 deletions
  1. 1 5
      public/index.html
  2. 121 59
      src/App.vue
  3. 3 0
      src/assets/css/common.scss
  4. 16 0
      src/assets/css/index-banner.scss
  5. 3 2
      src/assets/css/index.scss
  6. 15 15
      src/views/index.vue

+ 1 - 5
public/index.html

@@ -15,11 +15,7 @@
     <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 || [];

+ 121 - 59
src/App.vue

@@ -2,50 +2,48 @@
   <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 flex-row">
-                  <img src="./assets/image/img/logo.png" alt=""  class="navbar-brand logo">
-                  <div style="min-width: 1400px;justify-content: flex-end" class="flex-row">
-                  <router-link class="navbar-brand" to="/index" tag="a" >
+      <!-- 分辨率大于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 flex-row">
+                <img src="./assets/image/img/logo.png" alt="" class="navbar-brand logo">
+                <div style="min-width: 1400px;justify-content: flex-end" class="flex-row">
+                  <router-link class="navbar-brand" to="/index" tag="a">
                     <span>首</span>
                     <span>页</span>
                   </router-link>
-                  <router-link class="navbar-brand" to="/food" tag="a" >
+                  <router-link class="navbar-brand" to="/food" tag="a">
 
                     <span>醉</span>
                     <span>面</span>
                     <span>美</span>
                     <span>食</span>
                   </router-link>
-                  <router-link class="navbar-brand" to="/news" tag="a"  >
+                  <router-link class="navbar-brand" to="/news" tag="a">
                     <span>品</span>
                     <span>牌</span>
                     <span>新</span>
                     <span>闻</span>
                   </router-link>
-                  <router-link class="navbar-brand" to="/contact" tag="a" >
+                  <router-link class="navbar-brand" to="/contact" tag="a">
                     <span>联</span>
                     <span>系</span>
                     <span>我</span>
                     <span>们</span>
                   </router-link>
-                    <router-link class="navbar-brand" to="/recruit" tag="a"  >
+                  <router-link class="navbar-brand" to="/recruit" tag="a">
                     <span>人</span>
                     <span>才</span>
                     <span>招</span>
                     <span>聘</span>
-                    </router-link>
+                  </router-link>
                   <span class="navbar-brand" style="margin-right: 100px">
 
                    <a :href="'tel:400-878-124'">
@@ -54,51 +52,104 @@
                     <span style="margin-left: 14px;width: 160px;text-align: center;color: #E84E47;font-size: 24px">400-878-124</span>
 
                   </span>
-                  </div>
                 </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">
-          <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>
-
+        </nav>
       </div>
-      <div class="index-bottom-bottom" >
-        <div>Copyright 醉面(中国)控股有限公司 2020 All Rights Reserved 沪ICP备15027919号</div>
+
+<!--      页面小的时候的显示-->
+      <div class="nav-sm visible-sm visible-xs" >
+<!--        <nav class="nav-smpadding"></nav>-->
+        <!-- 分辨率小于990 页面-->
+        <nav class="nav-sm navbar-fixed-top visible-sm visible-xs">
+          <div class="contain text-center">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <!-- 小屏幕下的样式  width<=990px -->
+            <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">
+
+                   <a :href="'tel:400-878-124'">
+                     <img src="./assets/image/img/tel.png" alt style="height: 20px;width: 20px"/>
+                   </a>
+<!--                    <span style="width: 60px;text-align: center;color: #E84E47;font-size: 8px">400-878-124</span>-->
+
+                  </span>
+                </div>
+              </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">-->
+    <!--          <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>
 </template>
 
@@ -111,7 +162,7 @@ import './assets/css/common.scss'
 export default {
   data() {
     return {
-      index:1
+      index: 1
     }
   },
   created() {
@@ -126,7 +177,7 @@ export default {
     // window.removeEventListener('scroll', this.btn_pos)
   },
   methods: {
-    choose(index){
+    choose(index) {
       this.index = index;
     }
   },
@@ -137,4 +188,15 @@ export default {
 
 
 <style lang="scss" scope>
+
+ .nav-sm{
+  background-color: #FFFFFF;
+  border-radius: 0;
+  height: 50px;
+  border: 0;
+  color: #303030;
+}
+ a{
+   color: #303030;
+ }
 </style>

+ 3 - 0
src/assets/css/common.scss

@@ -26,3 +26,6 @@
 .mt100{
   margin-top: 100px;
 }
+.w100-img{
+  width: 100%!important;
+}

+ 16 - 0
src/assets/css/index-banner.scss

@@ -55,6 +55,22 @@
 
       }
 
+      /* 菜单栏的公共样式 */
+      .navbar-brand-sm {
+        font-size: 8px;
+        height: 50px;
+        color: #303030;
+        margin-left: 20px;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: left;
+        align-items: center;
+
+      }
+
+
+
+
       /*  为菜单栏设置鼠标悬停样式动画的转场 */
       .nav-link {
         a {

+ 3 - 2
src/assets/css/index.scss

@@ -27,6 +27,7 @@
     padding: 30px 0px;
 }
 
+
 .desc_title_img{
     width: 524px;
 }
@@ -45,8 +46,8 @@
     justify-content: space-between;
 }
 .desc_1{
-    margin-left: 120px;
+    margin-left: 5%;
 }
 .desc_3{
-    margin-right: 120px;
+    margin-right: 5%;
 }

+ 15 - 15
src/views/index.vue

@@ -7,16 +7,16 @@
         <div class="index-bg">
           <!-- 首页第一个背景图 -->
           <div class="backimg">
-            <img src="../assets/image/img/index_top.png" alt/>
+            <img src="../assets/image/img/index_top.png"  class="w100-img" alt/>
           </div>
           <!-- 首页第二个背景图 -->
           <div class="backimg-two flex-row">
-            <img src="../assets/image/img/index_mid.png" alt class="img-title"/>
+            <img src="../assets/image/img/index_mid.png" alt class="w100-img"/>
           </div>
 
           <div class="backimg3 flex-row">
-            <img src="../assets/image/img/red_zui.png" alt="">
-              <div style="width: 800px" class="first">
+            <img src="../assets/image/img/red_zui.png" alt="" style="width: 25%">
+              <div style="width: 50%;" class="first">
                 <el-carousel indicator-position="outside" >
                   <el-carousel-item v-for="item in imgList" :key="item">
                     <img :src="item" alt="" style="width: 100%;height: 100%">
@@ -25,32 +25,32 @@
                 </el-carousel>
               </div>
 <!--            <img src="../assets/image/img/lun_1.png" alt="">-->
-            <img src="../assets/image/img/red_mian.png" alt="">
+            <img src="../assets/image/img/red_mian.png" alt="" style="width: 25%">
           </div>
 
 
 
           <div class="backimg ">
-            <img src="../assets/image/img/index_map.png" alt/>
+            <img src="../assets/image/img/index_map.png" alt="" class="w100-img"/>
           </div>
 
 
           <div class="backimg-desc flex-row">
-            <img src="../assets/image/img/white_zui.png" alt="">
-            <div class="flex-column">
-              <img src="../assets/image/img/desc_title.png" alt="" class="desc_title_img">
-              <div class="desc_text">顾客满意度高 极致性价比 备受年轻人青睐 高复购</div>
-            </div>
+            <img src="../assets/image/img/white_3.png" alt="" style="width: 100%">
+<!--            <div class="flex-column" style="width: 40%">-->
+<!--              <img src="../assets/image/img/desc_title.png" alt="" class="desc_title_img">-->
+<!--              <div class="desc_text">顾客满意度高 极致性价比 备受年轻人青睐 高复购</div>-->
+<!--            </div>-->
 
-            <img src="../assets/image/img/white_mian.png" alt="">
+<!--            <img src="../assets/image/img/white_mian.png" alt="" style="width: 30%">-->
           </div>
 
 
           <div class="flex-row  desc-img-list">
             <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">
+            <img src="../assets/image/img/desc_1.png" alt="" class="desc_1" style="width: 30%">
+            <img src="../assets/image/img/desc_2.png" alt="" class="desc_2" style="width: 30%">
+            <img src="../assets/image/img/desc_3.png" alt="" class="desc_3" style="width: 30%">
             </div>
           </div>