From eaeae3f20719e40d74f5757df73294ed31652616 Mon Sep 17 00:00:00 2001
From: songyang <972986197@qq.com>
Date: Sun, 3 Dec 2023 10:41:32 +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

---
 components.d.ts          |  14 -
 src/views/home/index.vue | 781 +++++++++++++++++----------------------
 2 files changed, 344 insertions(+), 451 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 04e166d..2591c1a 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,22 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTag: typeof import('element-plus/es')['ElTag']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 63c4228..ae3da78 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,272 +1,196 @@
 <script setup lang="ts">
-import EquipCard from '@/compontents/equipCard.vue'
-import Navmenu from '@/compontents/Navmenu/index.vue'
+    import EquipCard from '@/compontents/equipCard.vue'
+    import Navmenu from '@/compontents/Navmenu/index.vue'
 
+    const leftNavList = [
+        {
+            name: '全部商品',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [
+                        { goodsName: '履带挖掘机' },
+                        { goodsName: '履带挖掘机' },
+                        { goodsName: '履带挖掘机' },
+                        { goodsName: '履带挖掘机' },
+                        { goodsName: '履带挖掘机' },
+                        { goodsName: '履带挖掘机' }
+                    ]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        },
+        {
+            name: '挖掘机',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        },
+        {
+            name: '土方机械',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        },
+        {
+            name: '工程起重机械',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        },
+        {
+            name: '动力设备',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        },
+        {
+            name: '压实机械',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        },
+        {
+            name: '路桥机械',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        },
+        {
+            name: '混凝土机械',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        },
+        {
+            name: '桩工机械',
+            children: [
+                {
+                    title: '挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '开沟机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                },
+                {
+                    title: '斗轮挖掘机',
+                    children: [{ goodsName: '履带挖掘机' }]
+                }
+            ]
+        }
+    ]
 
-const leftNavList = [
-    {
-        name: '全部商品', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-                    { goodsName: '履带挖掘机' },
-                    { goodsName: '履带挖掘机' },
-                    { goodsName: '履带挖掘机' },
-                    { goodsName: '履带挖掘机' },
-                    { goodsName: '履带挖掘机' },
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-    {
-        name: '挖掘机', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-    {
-        name: '土方机械', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-    {
-        name: '工程起重机械', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-    {
-        name: '动力设备', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-    {
-        name: '压实机械', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-    {
-        name: '路桥机械', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-    {
-        name: '混凝土机械', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-    {
-        name: '桩工机械', children: [
-
-            {
-                title: '挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '开沟机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            },
-            {
-                title: '斗轮挖掘机',
-                children: [
-                    { goodsName: '履带挖掘机' },
-
-                ]
-            }
-        ]
-    },
-]
-
-const handlerGoodsDetails = () => {
-    console.log('去往商品详情页');
-
-}
+    const handlerGoodsDetails = () => {
+        console.log('去往商品详情页')
+    }
 </script>
 
 <template>
     <div class="home-index-banner">
-        <div class="home-index ">
+        <div class="home-index">
             <!-- 商品菜单导航以及轮播图区域 -->
             <div class="home-goods">
                 <ul class="left-nav">
-
                     <!-- 左侧机械名称菜单按钮 -->
-                    <li class="item-nav" v-for="item in leftNavList" :key="item.name">{{ item.name }}
+                    <li class="item-nav" v-for="item in leftNavList" :key="item.name">
+                        {{ item.name }}
                         <ul class="sub-goods">
                             <!-- 级联框内 类别名称 -->
                             <li v-for="child in item.children" :key="child.title">
                                 <span>{{ child.title }}</span>
                                 <span>
                                     <!-- 小类名称 -->
-                                    <a v-for="son in child.children" :key="son.goodsName" @click="handlerGoodsDetails">{{
-                                        son.goodsName }}</a>
+                                    <a
+                                        v-for="son in child.children"
+                                        :key="son.goodsName"
+                                        @click="handlerGoodsDetails">
+                                        {{ son.goodsName }}
+                                    </a>
                                 </span>
                             </li>
                         </ul>
@@ -310,7 +234,6 @@ const handlerGoodsDetails = () => {
                 <a></a>
             </div>
 
-
             <ul class="consult-nav">
                 <li>
                     <a>资讯</a>
@@ -326,7 +249,6 @@ const handlerGoodsDetails = () => {
                 </li>
             </ul>
 
-
             <div class="consult-content">
                 <!-- 左侧背景图片 -->
                 <div class="left-bg"></div>
@@ -365,228 +287,213 @@ const handlerGoodsDetails = () => {
                     </div>
                 </div>
             </div>
-
         </div>
     </div>
 </template>
 
 <style lang="scss">
-.home-index-banner {
-    background-color: #fff;
-    padding: 20px 15px;
-    border-radius: 10px;
-    box-sizing: border-box;
-}
+    .home-index-banner {
+        background-color: #fff;
+        padding: 20px 15px;
+        border-radius: 10px;
+        box-sizing: border-box;
+    }
 
-.home-index {
-
-
-
-    .home-goods {
-        height: 500px;
-        display: flex;
-
-
-        .left-nav {
-            position: relative;
-            width: 200px;
-            height: 100%;
+    .home-index {
+        .home-goods {
+            height: 500px;
             display: flex;
-            background-color: #f7f9fa;
-            flex-direction: column;
-            justify-content: space-around;
 
-            .item-nav {
-                text-align: left;
-                padding-left: 50px;
-                color: #8B8B8B;
-                height: 36px;
-                line-height: 36px;
-
-                &:hover {
-                    cursor: pointer;
-                    color: #2282FF;
-                    font-weight: bold;
-                    background-color: #1abc9c;
-
-                    .sub-goods {
-                        display: block;
-                    }
-
-                }
-
-            }
-
-            .sub-goods {
-                position: absolute;
-                display: none;
-                top: 0;
-                left: 200px;
-                width: 500px;
+            .left-nav {
+                position: relative;
+                width: 200px;
                 height: 100%;
-                background-color: #f5f4f4;
-                z-index: 999;
-                opacity: 0.9;
+                display: flex;
+                background-color: #f7f9fa;
+                flex-direction: column;
+                justify-content: space-around;
 
-                li {
-                    margin: 15px 0;
-                    color: #333;
-                    font-weight: bold;
-                    display: flex;
+                .item-nav {
+                    text-align: left;
+                    padding-left: 50px;
+                    color: #8b8b8b;
+                    height: 36px;
+                    line-height: 36px;
 
-                    span:first-child {
-                        width: 160px;
+                    &:hover {
+                        cursor: pointer;
+                        color: #2282ff;
+                        font-weight: bold;
+                        background-color: #1abc9c;
+
+                        .sub-goods {
+                            display: block;
+                        }
                     }
-
-                    span a {
-                        margin: 0 15px;
-                        font-size: 14px;
-                        font-weight: normal;
-                    }
-
                 }
 
+                .sub-goods {
+                    position: absolute;
+                    display: none;
+                    top: 0;
+                    left: 200px;
+                    width: 500px;
+                    height: 100%;
+                    background-color: #f5f4f4;
+                    z-index: 999;
+                    opacity: 0.9;
+
+                    li {
+                        margin: 15px 0;
+                        color: #333;
+                        font-weight: bold;
+                        display: flex;
+
+                        span:first-child {
+                            width: 160px;
+                            margin-left: 10px;
+                        }
+
+                        span a {
+                            margin: 0 15px;
+                            font-size: 14px;
+                            font-weight: normal;
+                        }
+                    }
+                }
             }
-        }
 
-        .right-content {
-            flex: 1;
-            height: 100%;
-            margin-left: 20px;
+            .right-content {
+                flex: 1;
+                height: 100%;
+                margin-left: 20px;
 
-            .swpier-img {
-                width: 100%;
-                height: 437px;
-                margin-top: 10px;
-                border-radius: 8px;
-
-                .el-carousel {
+                .swpier-img {
+                    width: 100%;
                     height: 437px;
-                }
+                    margin-top: 10px;
+                    border-radius: 8px;
 
-                .el-carousel__item h3 {
-                    color: #475669;
-                    opacity: 0.75;
-                    line-height: 300px;
-                    margin: 0;
-                    text-align: center;
-                }
+                    .el-carousel {
+                        height: 437px;
+                    }
 
-                .el-carousel__item:nth-child(2n) {
-                    background-color: #99a9bf;
-                }
+                    .el-carousel__item h3 {
+                        color: #475669;
+                        opacity: 0.75;
+                        line-height: 300px;
+                        margin: 0;
+                        text-align: center;
+                    }
 
-                .el-carousel__item:nth-child(2n + 1) {
-                    background-color: #d3dce6;
-                }
+                    .el-carousel__item:nth-child(2n) {
+                        background-color: #99a9bf;
+                    }
 
+                    .el-carousel__item:nth-child(2n + 1) {
+                        background-color: #d3dce6;
+                    }
+                }
             }
         }
 
+        .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;
+            }
 
-    .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;
-        }
-    }
-
-    .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;
+            a {
+                color: #9d9d9d;
+                font-size: 14px;
                 cursor: pointer;
             }
         }
-    }
 
-    .consult-content {
-        margin-top: 20px;
-        height: 210px;
-        display: flex;
-        align-items: center;
+        .equip-pic {
+            height: 160px;
+            display: flex;
+            justify-content: space-between;
+            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;
+            li {
+                width: 340px;
+            }
         }
 
-        .right-consult {
-            height: 210px;
-            flex: 1;
-            padding-left: 35px;
+        .consult-nav {
+            width: 100%;
+            height: 40px;
+            border-bottom: 1px solid #e0e0e0;
+            display: flex;
 
-            .consult-box {
-                height: 70px;
+            li {
+                height: 40px;
+                line-height: 40px;
+                margin: 0 15px;
 
-                .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;
+                &: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>