提交首页

This commit is contained in:
songyang 2023-12-01 13:00:16 +08:00
parent 6c0409ac0a
commit 8485050ecd
2 changed files with 106 additions and 13 deletions

12
components.d.ts vendored
View File

@ -7,16 +7,8 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ElBadge: typeof import('element-plus/es')['ElBadge']
ElButton: typeof import('element-plus/es')['ElButton']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}

View File

@ -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>