bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Zlpt_Portal/src/views/home/index.vue

334 lines
9.2 KiB
Vue
Raw Normal View History

商城首页和个人信息
2023-12-01 11:22:09 +08:00
<script setup lang="ts">
商城提交
2023-12-01 17:02:05 +08:00
import EquipCard from '../../compontents/equipCard.vue'
商城首页和个人信息
2023-12-01 11:22:09 +08:00
</script>
<template>
width change
2023-12-01 15:00:37 +08:00
<div class="home-index-banner">
更新首页
2023-12-01 14:03:26 +08:00
<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>
提交首页
2023-12-01 13:00:16 +08:00
</ul>
更新首页
2023-12-01 14:03:26 +08:00
<div class="right-content">
<ul class="nva-items">
<li>首页</li>
list change
2023-12-01 16:57:11 +08:00
<li @click="() => {$router.push({ name:'equipList' })}">自选直租</li>
更新首页
2023-12-01 14:03:26 +08:00
<li>寻源比价</li>
<li>二手交易</li>
<li>保险业务</li>
<li>检验业务</li>
<li>企业专区</li>
</ul>
<div class="swpier-img">
首页更新
2023-12-01 14:48:58 +08:00
<el-carousel :interval="5000" arrow="always" height="437px">
更新首页
2023-12-01 14:03:26 +08:00
<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">
商城提交
2023-12-01 17:02:05 +08:00
<li>
<EquipCard />
</li>
<li>
<EquipCard />
</li>
<li>
<EquipCard />
</li>
更新首页
2023-12-01 14:03:26 +08:00
</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>
提交首页
2023-12-01 13:00:16 +08:00
</div>
</div>
更新首页
2023-12-01 14:03:26 +08:00
提交首页
2023-12-01 13:00:16 +08:00
</div>
</div>
商城首页和个人信息
2023-12-01 11:22:09 +08:00
</template>
<style lang="scss">
更新首页
2023-12-01 14:03:26 +08:00
.home-index-banner {
提交首页
2023-12-01 13:00:16 +08:00
background-color: #fff;
更新首页
2023-12-01 14:03:26 +08:00
padding: 20px 15px;
border-radius: 10px;
商城提交
2023-12-01 17:02:05 +08:00
box-sizing: border-box;
更新首页
2023-12-01 14:03:26 +08:00
}
.home-index {
提交首页
2023-12-01 13:00:16 +08:00
.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;
首页更新
2023-12-01 14:48:58 +08:00
.el-carousel {
height: 437px;
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 300px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
提交首页
2023-12-01 13:00:16 +08:00
}
}
更新首页
2023-12-01 14:03:26 +08:00
}
.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;
cursor: pointer;
}
}
提交首页
2023-12-01 13:00:16 +08:00
}
更新首页
2023-12-01 14:03:26 +08:00
.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;
}
}
}
}
商城首页和个人信息
2023-12-01 11:22:09 +08:00
}
width change
2023-12-01 15:00:37 +08:00
</style>