fix:首页内容增加,及样式修改

This commit is contained in:
duyufeng
2025-09-18 16:17:50 +08:00
parent 3952cc2a3e
commit 03851cb25f
11 changed files with 291 additions and 49 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/assets/images/news.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 281 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 632 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

@@ -195,40 +195,10 @@
</div> </div>
<div class="rt"> <div class="rt">
<ul> <ul>
<!-- <li>
<div class="newslt">
<h4>12</h4>
<p>2025.09</p>
</div>
<div class="newsrt">
<h4>降本增效新引擎AI如何实现能源的精细化管理与数智变革</h4>
<p>在能源革命和数字化转型的双重驱动下能源精细化管理已成为企业节能降碳实现可持续发展的必然选择...</p>
</div>
</li> -->
<!-- <li>
<div class="newslt">
<h4>10</h4>
<p>2025.09</p>
</div>
<div class="newsrt">
<h4>降本增效新引擎AI如何实现能源的精细化管理与数智变革</h4>
<p>在能源革命和数字化转型的双重驱动下能源精细化管理已成为企业节能降碳实现可持续发展的必然选择...</p>
</div>
</li>
<li>
<div class="newslt">
<h4>15</h4>
<p>2025.09</p>
</div>
<div class="newsrt">
<h4>降本增效新引擎AI如何实现能源的精细化管理与数智变革</h4>
<p>在能源革命和数字化转型的双重驱动下能源精细化管理已成为企业节能降碳实现可持续发展的必然选择...</p>
</div>
</li> -->
<li v-for="item in newsList" :key="item.id"> <li v-for="item in newsList" :key="item.id">
<div class="newslt"> <div class="newslt">
<h4>{{ item.date.substring(8, 10) }}</h4> <h4>{{ item.date.substring(8, 10) }}</h4>
<p>{{ item.date.substring(0, 8) }}</p> <p>{{ item.date.substring(0, 7) }}</p>
</div> </div>
<div class="newsrt"> <div class="newsrt">
<h4>{{ item.title }}</h4> <h4>{{ item.title }}</h4>

View File

@@ -172,6 +172,7 @@ li {
font-size: 40px; font-size: 40px;
color: rgba(31, 92, 172, 1); color: rgba(31, 92, 172, 1);
padding-left:16px; padding-left:16px;
font-weight:700;
} }
} }
@@ -278,7 +279,6 @@ li {
// 第三屏AI+智能节能技术 // 第三屏AI+智能节能技术
.three-screen{ .three-screen{
min-height: 100vh; min-height: 100vh;
margin-bottom:109px;
background:url("../../../assets/images/threeSceenbg.png") no-repeat center center; background:url("../../../assets/images/threeSceenbg.png") no-repeat center center;
position: relative; position: relative;
background-size: cover; background-size: cover;
@@ -287,32 +287,304 @@ li {
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding-top:113px;
padding-bottom:117px;
} }
} //标题 描述样式
.other-screens { .content-section {
min-height: 100vh; text-align: center;
padding: 80px 0; margin-bottom: 60px;
background: white;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.news-section {
h2 { h2 {
font-size: 36px; margin-bottom: 20px;
text-align: center; display: flex;
margin-bottom: 40px; align-items: center;
color: #013249; justify-content: center;
span{
font-size: 40px;
color: #ffffff;
padding-left:16px;
font-weight:700;
}
} }
.news-list { p {
font-size: 20px;
color: #ffffff;
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
} }
} }
.carousel-section{
.carousel-wrapper{
display: flex;
}
}
}
// 第四屏 应用场景
.screens-four{
background:#ffffff;
padding-top:109px;
padding-bottom:80px;
.container {
max-width: 1200px;
margin: 0 auto;
}
//标题 描述样式
.content-section {
text-align: center;
h2 {
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
span{
font-size: 40px;
color: rgba(31, 92, 172, 1);
padding-left:16px;
font-weight:700;
}
}
p {
font-size: 18px;
color: rgba(153, 153, 153, 1);
max-width: 800px;
margin: 0 auto;
}
}
}
// 第五屏 合作伙伴
.partner-screens{
min-height: 100vh;
background:url("../../../assets/images/partner.png") no-repeat center center;
position: relative;
background-size: cover;
padding-top:63px;
padding-bottom:80px;
z-index: 1;
background-attachment: fixed;//背景图片相对于浏览器窗口固定,不随页面滚动而移动
.container {
max-width: 1200px;
margin: 0 auto;
}
//标题 描述样式
.content-section {
text-align: center;
h2 {
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
span{
font-size: 40px;
color: rgba(31, 92, 172, 1);
padding-left:16px;
font-weight:700;
}
}
p {
font-size: 18px;
color: rgba(153, 153, 153, 1);
max-width: 800px;
margin: 0 auto;
}
// 荣誉资质
h4{
color: rgba(31, 92, 172, 1);
font-size: 24px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding-top:31px;
line{
width:16px;
height:2px;
background: rgba(31, 92, 172, 1);
margin:0 13px;
}
}
.partner-title{
padding-top:0;
}
.partner-img{
display: flex;
justify-content: center;
margin-bottom:76px;
p{
width: 336px;
height: 164px;
opacity: 1;
background: url("../../../assets/images/certification.png");
position: relative;
span{
color: #ffffff;
font-size: 28px;
font-weight: 700;
display: block;
position: absolute;
bottom:31px;
left:0;
right:0;
}
}
}
}
// 合作企业图
.partnerImgAll{
max-width:1553px;
margin:0 auto;
img{
width: 100%;
}
}
}
// 第六屏样式
.other-screens {
padding: 74px 0 40px;
background: white;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
//标题 描述样式
.content-section {
text-align: center;
margin-bottom: 60px;
h2 {
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
span{
font-size: 40px;
color: rgba(31, 92, 172, 1);
padding-left:16px;
font-weight:700;
}
}
.desc {
font-size: 20px;
color: rgba(153, 153, 153, 1);
margin: 0 auto 32px;
}
// 新闻内容
.content{
display: flex;
justify-content: space-between;
gap:60px;
.lt{
text-align: left;
.img{
width:520px;
height:282px;
overflow: hidden;
img {
transition: transform 0.3s ease;
cursor: pointer;
&:hover {
transform: scale(1.1); // 放大 10%
}
}
}
.title,.nr{
margin-block-start: 0em;
margin-block-end: 0em;
}
.title{
font-size: 18px;
font-weight: 400;
color:#000000;
padding-top:16px;
text-align: left;
cursor: pointer;
&:hover {
color: rgba(68, 119, 185, 1);
}
}
.nr{
font-size: 14px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
line-height: 20.27px;
padding-top:12px;
cursor: pointer;
&:hover {
color: rgba(68, 119, 185, 1);
}
}
}
.rt{
ul li{
display: flex;
align-items: center;
padding:24px 29px 24px 16px;
}
li:first-child{
background: rgba(248, 248, 248, 1);
.newsrt{
h4{
color: rgba(49, 112, 197, 1);
font-size: 18px;
font-weight: 400;
}
p{
font-size: 14px;
font-weight: 400;
color: rgba(165, 165, 165, 1);
}
}
}
.newslt{
border-right: 1px solid rgba(234, 234, 234, 1);
padding-right:14px;
width:68px;
h4{
font-size: 24px;
font-weight: 400;
letter-spacing: 1.44px;
color: rgba(102, 102, 102, 1);
text-align: right;
}
p{
font-size: 14px;
font-weight: 400;
color: rgba(172, 172, 172, 1);
}
}
.newsrt{
padding:0 0 0 16px;
text-align: left;
h4{
font-size: 18px;
font-weight: 400;
color: rgba(51, 51, 51, 1);
&:hover{
color: rgba(49, 112, 197, 1);
}
}
p{
font-size: 14px;
font-weight: 400;
color: rgba(165, 165, 165, 1);
margin-bottom:0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;// 不换行
}
}
}
}
}
} }
// 动画相关样式 // 动画相关样式