From d8223d64f28ca952c766db08bf5a72ad8e47aad9 Mon Sep 17 00:00:00 2001
From: songyang <972986197@qq.com>
Date: Fri, 1 Dec 2023 14:03:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  81 +++---
 ...mt=auto&app=138&f=JPEG.png => left_bg.png} | Bin
 src/style/css/reset.css                       |   2 +-
 src/views/home/index.vue                      | 253 +++++++++++++++---
 4 files changed, 268 insertions(+), 68 deletions(-)
 rename src/assets/img/home/2023_12_01_beijing2/{u=2582695925,2435534682&fm=253&fmt=auto&app=138&f=JPEG.png => left_bg.png} (100%)

diff --git a/src/App.vue b/src/App.vue
index ac09804..a9f844e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,12 +11,14 @@
     </div>
 
     <!-- 菜单 -->
-    <div class="shop-menu">
-      <div class="left-logo">
-        <img src="../src//assets/img/home/2023_12_01_beijing2/logo.png" alt="">
+    <div class="shop-menu-box">
+      <div class="shop-menu">
+        <div class="left-logo">
+          <img src="../src//assets/img/home/2023_12_01_beijing2/logo.png" alt="">
+        </div>
+        <input placeholder="输入设备关键词" type="text">
+        <div class="erweima">二维码占位</div>
       </div>
-      <input placeholder="输入设备关键词" type="text">
-      <div class="erweima">二维码占位</div>
     </div>
   </div>
 
@@ -32,6 +34,7 @@
   position: sticky;
   top: 0;
   left: 0;
+  z-index: 999;
 
   .header-box {
     background-color: #F5F5F5;
@@ -64,44 +67,50 @@
     }
   }
 
+  .shop-menu-box {
+    background-color: #edeef6;
+
+    .shop-menu {
+      width: 1200px;
+      height: 120px;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
 
 
-  .shop-menu {
-    width: 1200px;
-    height: 120px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
+      .left-logo {
+        color: #999999;
+        font-weight: bold;
+        font-size: 20px;
 
-    .left-logo {
-      color: #999999;
-      font-weight: bold;
-      font-size: 20px;
+        img {
+          width: 176px;
+          height: 58px;
+        }
+      }
 
-      img {
-        width: 176px;
-        height: 58px;
+
+
+      input {
+        width: 700px;
+        height: 45px;
+        border: 1px solid #5CA4FF;
+        border-radius: 45px;
+        margin-left: 70px;
+        // margin-left: 190px;
+      }
+
+      .erweima {
+        width: 80px;
+        height: 80px;
+        line-height: 80px;
+        margin-left: 30px;
+        background-color: skyblue;
       }
     }
 
-
-
-    input {
-      width: 700px;
-      height: 45px;
-      border: 1px solid #5CA4FF;
-      border-radius: 45px;
-      margin-left: 70px;
-      // margin-left: 190px;
-    }
-
-    .erweima {
-      width: 80px;
-      height: 80px;
-      line-height: 80px;
-      margin-left: 30px;
-      background-color: skyblue;
-    }
   }
+
+
 }
 </style>
diff --git a/src/assets/img/home/2023_12_01_beijing2/u=2582695925,2435534682&fm=253&fmt=auto&app=138&f=JPEG.png b/src/assets/img/home/2023_12_01_beijing2/left_bg.png
similarity index 100%
rename from src/assets/img/home/2023_12_01_beijing2/u=2582695925,2435534682&fm=253&fmt=auto&app=138&f=JPEG.png
rename to src/assets/img/home/2023_12_01_beijing2/left_bg.png
diff --git a/src/style/css/reset.css b/src/style/css/reset.css
index 05d1609..b6ff22e 100644
--- a/src/style/css/reset.css
+++ b/src/style/css/reset.css
@@ -138,7 +138,7 @@ table {
 
 #app {
   width: 100vw;
-  height: 100vh;
+  /* height: 100vh; */
   background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
 }
 
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 6e33a72..fd3d5b8 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -3,46 +3,129 @@
 </script>
 
 <template>
-    <!-- 首页 -->
-    <div class="home-index wapper">
-        <div class="home-goods">
-            <ul class="left-nav">
-                <li>全部商品</li>
-                <li>挖掘机械</li>
-                <li>土方机械</li>
-                <li>工程起重机械</li>
-                <li>动力设备</li>
-                <li>压实机械</li>
-                <li>路桥机械</li>
-                <li>混凝土机械</li>
-                <li>桩工机械</li>
-            </ul>
-            <div class="right-content">
-                <ul class="nva-items">
-                    <li>首页</li>
-                    <li>自选直租</li>
-                    <li>寻源比价</li>
-                    <li>二手交易</li>
-                    <li>保险业务</li>
-                    <li>检验业务</li>
-                    <li>企业专区</li>
+    <div class="home-index-banner wapper">
+        <div class="home-index ">
+            <!-- 商品菜单导航以及轮播图区域 -->
+            <div class="home-goods">
+                <ul class="left-nav">
+                    <li>全部商品</li>
+                    <li>挖掘机械</li>
+                    <li>土方机械</li>
+                    <li>工程起重机械</li>
+                    <li>动力设备</li>
+                    <li>压实机械</li>
+                    <li>路桥机械</li>
+                    <li>混凝土机械</li>
+                    <li>桩工机械</li>
                 </ul>
-                <div class="swpier-img">
-                    <el-carousel :interval="5000" arrow="always">
-                        <el-carousel-item v-for="item in 4" :key="item">
-                            <h3 text="2xl" justify="center">{{ item }}</h3>
-                        </el-carousel-item>
-                    </el-carousel>
+                <div class="right-content">
+                    <ul class="nva-items">
+                        <li>首页</li>
+                        <li>自选直租</li>
+                        <li>寻源比价</li>
+                        <li>二手交易</li>
+                        <li>保险业务</li>
+                        <li>检验业务</li>
+                        <li>企业专区</li>
+                    </ul>
+                    <div class="swpier-img">
+                        <el-carousel :interval="5000" arrow="always">
+                            <el-carousel-item v-for="item in 4" :key="item">
+                                <h3 text="2xl" justify="center">{{ item }}</h3>
+                            </el-carousel-item>
+                        </el-carousel>
+                    </div>
                 </div>
             </div>
+            <!-- 热搜装备 -->
+            <div class="hot-equip">
+                <span>热搜装备</span>
+                <a>查看更多</a>
+            </div>
+
+            <ul class="equip-pic">
+                <li></li>
+                <li></li>
+                <li></li>
+            </ul>
+
+            <!-- 专题咨询 -->
+
+            <div class="hot-equip">
+                <span>专题资讯</span>
+                <a></a>
+            </div>
+
+
+            <ul class="consult-nav">
+                <li>
+                    <a>资讯</a>
+                </li>
+                <li>
+                    <a>专题</a>
+                </li>
+                <li>
+                    <a>检验</a>
+                </li>
+                <li>
+                    <a>保险</a>
+                </li>
+            </ul>
+
+
+            <div class="consult-content">
+                <!-- 左侧背景图片 -->
+                <div class="left-bg"></div>
+
+                <!--  右侧信息 -->
+                <div class="right-consult">
+                    <div class="consult-box">
+                        <div class="consult-title">
+                            <h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
+                            <span>[2023/11/28]</span>
+                        </div>
+
+                        <div class="consult-info">
+                            天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
+                        </div>
+                    </div>
+                    <div class="consult-box">
+                        <div class="consult-title">
+                            <h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
+                            <span>[2023/11/28]</span>
+                        </div>
+
+                        <div class="consult-info">
+                            天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
+                        </div>
+                    </div>
+                    <div class="consult-box">
+                        <div class="consult-title">
+                            <h2>实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”</h2>
+                            <span>[2023/11/28]</span>
+                        </div>
+
+                        <div class="consult-info">
+                            天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存
+                        </div>
+                    </div>
+                </div>
+            </div>
+
         </div>
     </div>
 </template>
 
 <style lang="scss">
-.home-index {
+.home-index-banner {
     background-color: #fff;
-    padding: 10px 15px;
+    padding: 20px 15px;
+    border-radius: 10px;
+}
+
+.home-index {
+
+
 
     .home-goods {
         height: 500px;
@@ -111,6 +194,114 @@
 
             }
         }
+
+
     }
+
+    .hot-equip {
+        margin-top: 30px;
+        height: 37px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+            font-size: 18px;
+            font-weight: bold;
+            color: #333333;
+        }
+
+        a {
+            color: #9D9D9D;
+            font-size: 14px;
+            cursor: pointer;
+        }
+    }
+
+    .equip-pic {
+        height: 160px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        li {
+            width: 340px;
+            height: 140px;
+            background-color: skyblue;
+        }
+    }
+
+    .consult-nav {
+
+        width: 100%;
+        height: 40px;
+        border-bottom: 1px solid #E0E0E0;
+        display: flex;
+
+        li {
+            height: 40px;
+            line-height: 40px;
+            margin: 0 15px;
+
+            &:hover {
+                border-bottom: 1px solid #2282FF;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .consult-content {
+        margin-top: 20px;
+        height: 210px;
+        display: flex;
+        align-items: center;
+
+        .left-bg {
+            background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png) no-repeat;
+            background-size: cover;
+            width: 340px;
+            height: 210px;
+        }
+
+        .right-consult {
+            height: 210px;
+            flex: 1;
+            padding-left: 35px;
+
+            .consult-box {
+                height: 70px;
+
+                .consult-title {
+                    height: 30px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    h2 {
+                        font-weight: bold;
+
+                    }
+
+                    span {
+                        color: #827D7D;
+                        font-size: 14px;
+                    }
+                }
+
+                .consult-info {
+                    width: calc(100% - 100px);
+                    height: 40px;
+                    line-height: 40px;
+                    border-bottom: 1px dashed #979797;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+            }
+
+        }
+    }
+
+
 }
 </style>
\ No newline at end of file