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: 20px;width: 20px"/>
+                     <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>
@@ -197,6 +197,6 @@ export default {
   color: #303030;
 }
  a{
-   color: #303030;
+   color: #303030!important;
  }
 </style>

src/assets/css/index.scss

@@ -6,7 +6,7 @@
 .backimg-two{
     width: 100%;
     background-color: #DC0219;
-    height: 200px;
+    padding: 30px 0px;
     justify-content: center!important;
 }
 
@@ -18,6 +18,9 @@
     height: 60px;
 }
 .backimg3{
+    //padding-top: 2%;
+    padding-bottom: 4%;
+    width: 100%;
     justify-content: space-between!important;
     background-color: #DC0219;
 }

src/views/index.vue

@@ -11,21 +11,20 @@
           </div>
           <!-- 首页第二个背景图 -->
           <div class="backimg-two flex-row">
-            <img src="../assets/image/img/index_mid.png" alt class="w100-img"/>
+            <img src="../assets/image/img/index_mid.png" alt style="width: 30%;"/>
           </div>
 
           <div class="backimg3 flex-row">
-            <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%">
-
+            <img src="../assets/image/img/red_zui.png" alt="" style="width: 18%">
+              <div style="width: 60%;"  :style="{'height': lunImgHeight}" class="first">
+                <el-carousel indicator-position="outside"   ref="abc">
+                  <el-carousel-item v-for="item in imgList" :key="item" >
+                    <img :src="item" alt="" style="width: 100%;" >
                   </el-carousel-item>
                 </el-carousel>
               </div>
 <!--            <img src="../assets/image/img/lun_1.png" alt="">-->
-            <img src="../assets/image/img/red_mian.png" alt="" style="width: 25%">
+            <img src="../assets/image/img/red_mian.png" alt="" style="width: 18%">
           </div>
 
 
@@ -36,18 +35,12 @@
 
 
           <div class="backimg-desc flex-row">
-            <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="" style="width: 30%">-->
+            <img src="../assets/image/img/white_3.png" alt="" style="width: 100%;height: 100%">
           </div>
 
 
-          <div class="flex-row  desc-img-list">
-            <div class="flex-row" style="margin-top: -400px;width: 100%">
+          <div class="flex-row  desc-img-list" :style="{'height':descImgListHeight}">
+            <div class="flex-row" :style="{'margin-top': descImgListHeightTop}" style="width: 100%">
             <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%">
@@ -66,27 +59,50 @@ import '../assets/css/index.scss'
 export default {
   data() {
     return {
-      imgList:[require("@/assets/image/img/lun_1.png"),require("@/assets/image/img/desc_2.png"),require("@/assets/image/img/desc_3.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() {
-    console.log(this.imgList)
+
 
   },
 
   mounted: function () {
 
 
+    const element = document.querySelector('.el-carousel__container');
+    console.log(element)
+    // var w = getComputedStyle(element).getPropertyValue("--my-varwidth");
+
+    const h =  window.innerWidth/100*60/1180*677+'px'
+    element.style.setProperty("--my--varheight",h);
+
+
+  },
+  computed:{
+    lunImgHeight:function (){
+
+      let w = window.innerWidth/100*60
+      return w/1180*677 +'px';
+    },
+    descImgListHeight:function (){
+
+      return (window.innerWidth/1920*320) +'px';
+    },
+    descImgListHeightTop:function (){
+      return 0-(window.innerWidth/1920*320)  +'px';
+    }
+  },
+  methods: {
+
+
   },
-  methods: {},
   destroyed() {
 
   },
   components: {
-    // introduce,
-    // shopthumb,
-    // productthumb,
-    // "el-card": Card
+
   }
 }
 
@@ -95,13 +111,10 @@ export default {
 
 <style lang="scss">
    .el-carousel__container{
-      height: 500px!important;
+     --my--varheight:300px;
+      height: var(--my--varheight);
     }
-   .el-carousel__button{
-     width: 14px;
-     height: 14px;
-     border-radius: 50%;
-   }
+
    .el-carousel__indicators--outside button{
      background-color: #f5f5f5;
    }