bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新首页

This commit is contained in:
songyang 2023-12-01 14:03:26 +08:00
parent 8485050ecd
commit d8223d64f2
4 changed files with 268 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/App.vue
View File

@ -11,12 +11,14 @@
</div> </div>
<!-- 菜单 --> <!-- 菜单 -->
<div class="shop-menu"> <div class="shop-menu-box">
<div class="left-logo"> <div class="shop-menu">
<img src="../src//assets/img/home/2023_12_01_beijing2/logo.png" alt=""> <div class="left-logo">
<img src="../src//assets/img/home/2023_12_01_beijing2/logo.png" alt="">
</div>
<input placeholder="输入设备关键词" type="text">
<div class="erweima">二维码占位</div>
</div> </div>
<input placeholder="输入设备关键词" type="text">
<div class="erweima">二维码占位</div>
</div> </div>
</div> </div>
@ -32,6 +34,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
z-index: 999;
.header-box { .header-box {
background-color: #F5F5F5; background-color: #F5F5F5;
@ -64,44 +67,50 @@
} }
} }
.shop-menu-box {
background-color: #edeef6;
.shop-menu {
width: 1200px;
height: 120px;
margin: 0 auto;
display: flex;
align-items: center;
.shop-menu { .left-logo {
width: 1200px; color: #999999;
height: 120px; font-weight: bold;
margin: 0 auto; font-size: 20px;
display: flex;
align-items: center;
.left-logo { img {
color: #999999; width: 176px;
font-weight: bold; height: 58px;
font-size: 20px; }
}
img {
width: 176px;
height: 58px; input {
width: 700px;
height: 45px;
border: 1px solid #5CA4FF;
border-radius: 45px;
margin-left: 70px;
// margin-left: 190px;
}
.erweima {
width: 80px;
height: 80px;
line-height: 80px;
margin-left: 30px;
background-color: skyblue;
} }
} }
input {
width: 700px;
height: 45px;
border: 1px solid #5CA4FF;
border-radius: 45px;
margin-left: 70px;
// margin-left: 190px;
}
.erweima {
width: 80px;
height: 80px;
line-height: 80px;
margin-left: 30px;
background-color: skyblue;
}
} }
} }
</style> </style>

0
src/assets/img/home/2023_12_01_beijing2/u=2582695925,2435534682&fm=253&fmt=auto&app=138&f=JPEG.png → src/assets/img/home/2023_12_01_beijing2/left_bg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 212 KiB

After

Width:  |  Height:  |  Size: 212 KiB

2
src/style/css/reset.css
View File

@ -138,7 +138,7 @@ table {
#app { #app {
width: 100vw; width: 100vw;
height: 100vh; /* height: 100vh; */
background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%); background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
} }

253
src/views/home/index.vue
View File

@ -3,46 +3,129 @@
</script> </script>
<template> <template>
<!-- 首页 --> <div class="home-index-banner wapper">
<div class="home-index wapper"> <div class="home-index ">
<div class="home-goods"> <!-- 商品菜单导航以及轮播图区域 -->
<ul class="left-nav"> <div class="home-goods">
<li>全部商品</li> <ul class="left-nav">
<li>挖掘机械</li> <li>全部商品</li>
<li>土方机械</li> <li>挖掘机械</li>
<li>工程起重机械</li> <li>土方机械</li>
<li>动力设备</li> <li>工程起重机械</li>
<li>压实机械</li> <li>动力设备</li>
<li>路桥机械</li> <li>压实机械</li>
<li>混凝土机械</li> <li>路桥机械</li>
<li>桩工机械</li> <li>混凝土机械</li>
</ul> <li>桩工机械</li>
<div class="right-content">
<ul class="nva-items">
<li>首页</li>
<li>自选直租</li>
<li>寻源比价</li>
<li>二手交易</li>
<li>保险业务</li>
<li>检验业务</li>
<li>企业专区</li>
</ul> </ul>
<div class="swpier-img"> <div class="right-content">
<el-carousel :interval="5000" arrow="always"> <ul class="nva-items">
<el-carousel-item v-for="item in 4" :key="item"> <li>首页</li>
<h3 text="2xl" justify="center">{{ item }}</h3> <li>自选直租</li>
</el-carousel-item> <li>寻源比价</li>
</el-carousel> <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> </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>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.home-index { .home-index-banner {
background-color: #fff; background-color: #fff;
padding: 10px 15px; padding: 20px 15px;
border-radius: 10px;
}
.home-index {
.home-goods { .home-goods {
height: 500px; height: 500px;
@ -111,6 +194,114 @@
} }
} }
} }
.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> </style>