zlcx/company-website
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：首页内容增加，及样式修改

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/carouse1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
src/assets/images/carouse2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
src/assets/images/carouse3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
src/assets/images/carouse4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
src/assets/images/carouse5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
src/assets/images/certification.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

BIN
src/assets/images/partercomp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 632 KiB

BIN
src/assets/images/partner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

32
src/views/pc/index.vue
View File

@@ -195,40 +195,10 @@
</div>
<div class="rt">
<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">
<div class="newslt">
<h4>{{ item.date.substring(8, 10) }}</h4>
<p>{{ item.date.substring(0, 8) }}</p>
<p>{{ item.date.substring(0, 7) }}</p>
</div>
<div class="newsrt">
<h4>{{ item.title }}</h4>

308
src/views/pc/style/index.less
View File

@@ -172,6 +172,7 @@ li {
font-size: 40px;
color: rgba(31, 92, 172, 1);
padding-left:16px;
font-weight:700;
}
}
@@ -278,7 +279,6 @@ li {
// 第三屏：AI+智能节能技术
.three-screen{
min-height: 100vh;
margin-bottom:109px;
background:url("../../../assets/images/threeSceenbg.png") no-repeat center center;
position: relative;
background-size: cover;
@@ -287,32 +287,304 @@ li {
.container {
max-width: 1200px;
margin: 0 auto;
padding-top:113px;
padding-bottom:117px;
}
}
.other-screens {
min-height: 100vh;
padding: 80px 0;
background: white;
//标题 描述样式
.content-section {
text-align: center;
margin-bottom: 60px;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.news-section {
h2 {
font-size: 36px;
text-align: center;
margin-bottom: 40px;
color: #013249;
margin-bottom: 20px;
display: flex;
align-items: center;
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;
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;// 不换行
}
}
}
}
}
}
// 动画相关样式