更新首页
This commit is contained in:
parent
8485050ecd
commit
d8223d64f2
11
src/App.vue
11
src/App.vue
|
|
@ -11,6 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 菜单 -->
|
<!-- 菜单 -->
|
||||||
|
<div class="shop-menu-box">
|
||||||
<div class="shop-menu">
|
<div class="shop-menu">
|
||||||
<div class="left-logo">
|
<div class="left-logo">
|
||||||
<img src="../src//assets/img/home/2023_12_01_beijing2/logo.png" alt="">
|
<img src="../src//assets/img/home/2023_12_01_beijing2/logo.png" alt="">
|
||||||
|
|
@ -19,6 +20,7 @@
|
||||||
<div class="erweima">二维码占位</div>
|
<div class="erweima">二维码占位</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -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,7 +67,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shop-menu-box {
|
||||||
|
background-color: #edeef6;
|
||||||
|
|
||||||
.shop-menu {
|
.shop-menu {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
|
|
@ -73,6 +77,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
.left-logo {
|
.left-logo {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -103,5 +108,9 @@
|
||||||
background-color: skyblue;
|
background-color: skyblue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 212 KiB After Width: | Height: | Size: 212 KiB |
|
|
@ -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%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,9 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- 首页 -->
|
<div class="home-index-banner wapper">
|
||||||
<div class="home-index wapper">
|
<div class="home-index ">
|
||||||
|
<!-- 商品菜单导航以及轮播图区域 -->
|
||||||
<div class="home-goods">
|
<div class="home-goods">
|
||||||
<ul class="left-nav">
|
<ul class="left-nav">
|
||||||
<li>全部商品</li>
|
<li>全部商品</li>
|
||||||
|
|
@ -36,13 +37,95 @@
|
||||||
</div>
|
</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>
|
||||||
</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>
|
||||||
Loading…
Reference in New Issue