feat(zm)初始化

src/assets/css/index.scss

@@ -3,11 +3,50 @@
 
 }
 
-backimg-two{
+.backimg-two{
     width: 100%;
+    background-color: #DC0219;
+    height: 200px;
+    justify-content: center!important;
 }
 
 .backimg {
     width: 100%;
 }
+.img-title{
+    width: 600px;
+    height: 60px;
+}
+.backimg3{
+    justify-content: space-between!important;
+    background-color: #DC0219;
+}
+
+.backimg-desc{
+    justify-content: space-between!important;
+    padding: 30px 0px;
+}
+
+.desc_title_img{
+    width: 524px;
+}
+.desc_text{
+    font-size: 30px;
+    font-weight: 500;
+    color: #999999;
+    margin-top: 60px;
+    margin-bottom: 70px;
+}
 
+.desc-img-list{
+    width: 100%;
+    height: 320px;
+    background: #dc0219;
+    justify-content: space-between;
+}
+.desc_1{
+    margin-left: 160px;
+}
+.desc_3{
+    margin-right: 160px;
+}

src/views/index.vue

@@ -3,22 +3,49 @@
     <!-- 首页的样式 -->
     <div id="index">
       <!-- 首页背景图部分 -->
-      <div class="container-fluid">
+
         <div class="index-bg">
           <!-- 首页第一个背景图 -->
           <div class="backimg">
             <img src="../assets/image/img/index_top.png" alt/>
           </div>
           <!-- 首页第二个背景图 -->
-          <div class="backimg-two">
-            <img src="../assets/image/img/index_mid.png" alt/>
+          <div class="backimg-two flex-row">
+            <img src="../assets/image/img/index_mid.png" alt class="img-title"/>
+          </div>
 
+          <div class="backimg3 flex-row">
+            <img src="../assets/image/img/red_zui.png" alt="">
+            <img src="../assets/image/img/lun_1.png" alt="">
+            <img src="../assets/image/img/red_mian.png" alt="">
           </div>
-        </div>
-      </div>
 
+          <div class="backimg ">
+            <img src="../assets/image/img/index_map.png" alt/>
+          </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>
 
-    </div>
+            <img src="../assets/image/img/white_mian.png" alt="">
+          </div>
+
+
+          <div class="flex-row  desc-img-list">
+            <div class="flex-row" style="margin-top: -400px">
+            <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">
+            </div>
+          </div>
+
+        </div>
+      </div>
 
   </div>
 </template>