307 lines
8.4 KiB
Vue
307 lines
8.4 KiB
Vue
<script setup lang="ts">
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<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="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-banner {
|
||
background-color: #fff;
|
||
padding: 20px 15px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.home-index {
|
||
|
||
|
||
|
||
.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;
|
||
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.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> |