冲突合并

components.d.ts

@@ -3,10 +3,12 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {}
+export { }
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/views/home/index.vue

@@ -4,12 +4,113 @@
 
 <template>
     <!-- 首页 -->
-    <div class="home-index wapper"></div>
+    <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>
+                </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>
 </template>
 
 <style lang="scss">
 .home-index {
-    height: 600px;
-    background-color: #000;
+    background-color: #fff;
+    padding: 10px 15px;
+
+    .home-goods {
+        height: 500px;
+        display: flex;
+
+        .left-nav {
+            width: 200px;
+            height: 100%;
+            display: flex;
+            background-color: #f7f9fa;
+            flex-direction: column;
+            justify-content: space-around;
+
+            li {
+                width: 100%;
+                text-align: left;
+                padding-left: 50px;
+                color: #8B8B8B;
+
+                &:hover {
+                    cursor: pointer;
+                    color: #2282FF;
+                    font-weight: bold;
+                }
+
+            }
+        }
+
+        .right-content {
+            flex: 1;
+            height: 100%;
+            margin-left: 20px;
+
+
+            .nva-items {
+                width: 100%;
+                height: 43px;
+                background-color: #f7f9fa;
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                // padding-left: 30px;
+
+                li {
+                    color: #7D7D7D;
+                    padding: 0 20px;
+                    border-right: 1px solid #7D7D7D;
+
+                    &:hover {
+                        cursor: pointer;
+                        color: #333333;
+                        font-weight: bold;
+                    }
+
+                    &:last-child {
+                        border: none;
+                    }
+                }
+            }
+
+            .swpier-img {
+                width: 100%;
+                height: 437px;
+                margin-top: 10px;
+                border-radius: 8px;
+
+            }
+        }
+    }
 }
 </style>