This commit is contained in:
wangchengming 2024-11-04 17:04:06 +08:00
parent 17b7986e34
commit 2c953b596c
7 changed files with 148 additions and 23 deletions

View File

@ -462,7 +462,7 @@ export default {
try { try {
const res = await this.$request.get( const res = await this.$request.get(
'/official/index/list', '/official/index/list',
{ params: { pageNum: 1, pageSize: 3, captionName: '业务领域/资本服务/技术支持' } }, { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/资本服务/技术支持' } },
); );
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders); this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
} catch (error) {} } catch (error) {}
@ -609,7 +609,7 @@ export default {
} }
.screen4 { .screen4 {
position: relative; position: relative;
height: 1850rem; height: 1286rem;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.screen4 .wrapper1680 { .screen4 .wrapper1680 {

View File

@ -316,7 +316,7 @@ export default {
try { try {
const res = await this.$request.get( const res = await this.$request.get(
'/official/index/list', '/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/商业管理/技术支持' } }, { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/商业管理/技术支持' } },
); );
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders); this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
} catch (error) {} } catch (error) {}
@ -359,7 +359,7 @@ export default {
} }
.screen3 { .screen3 {
position: relative; position: relative;
height: 1300rem; height: 850rem;
background-color: #ffffff; background-color: #ffffff;
} }
.screen3 .wrapper1680 { .screen3 .wrapper1680 {
@ -377,8 +377,8 @@ export default {
} }
.screen3 .list-item { .screen3 .list-item {
margin: 0 58rem; margin: 0 58rem;
width: 350rem; width: 234rem;
height: 350rem; height: 330rem;
margin-bottom: 90rem; margin-bottom: 90rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -412,7 +412,7 @@ export default {
} }
.screen4 { .screen4 {
position: relative; position: relative;
height: 2410rem; height: 1286rem;
background-color: #F5F5F8; background-color: #F5F5F8;
} }
.screen4 .wrapper1680 { .screen4 .wrapper1680 {

View File

@ -316,7 +316,7 @@ export default {
try { try {
const res = await this.$request.get( const res = await this.$request.get(
'/official/index/list', '/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/基础设施/技术支持' } }, { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/基础设施/技术支持' } },
); );
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders); this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
} catch (error) {} } catch (error) {}
@ -359,7 +359,7 @@ export default {
} }
.screen3 { .screen3 {
position: relative; position: relative;
height: 1300rem; height: 850rem;
background-color: #ffffff; background-color: #ffffff;
} }
.screen3 .wrapper1680 { .screen3 .wrapper1680 {
@ -377,8 +377,8 @@ export default {
} }
.screen3 .list-item { .screen3 .list-item {
margin: 0 58rem; margin: 0 58rem;
width: 350rem; width: 234rem;
height: 350rem; height: 330rem;
margin-bottom: 90rem; margin-bottom: 90rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -412,7 +412,7 @@ export default {
} }
.screen4 { .screen4 {
position: relative; position: relative;
height: 2410rem; height: 1286rem;
background-color: #F5F5F8; background-color: #F5F5F8;
} }
.screen4 .wrapper1680 { .screen4 .wrapper1680 {

View File

@ -316,7 +316,7 @@ export default {
try { try {
const res = await this.$request.get( const res = await this.$request.get(
'/official/index/list', '/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/能源与环境/技术支持' } }, { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/能源与环境/技术支持' } },
); );
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders); this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
} catch (error) {} } catch (error) {}
@ -412,7 +412,7 @@ export default {
} }
.screen4 { .screen4 {
position: relative; position: relative;
height: 2410rem; height: 1286rem;
background-color: #F5F5F8; background-color: #F5F5F8;
} }
.screen4 .wrapper1680 { .screen4 .wrapper1680 {

View File

@ -107,6 +107,57 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="screen6">
<div class="wrapper1680">
<transition name="fade-slide-bottom">
<div
v-show="screen6.offsetLevel >= 0"
class="text-posi-abs"
style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
>
{{ screen6.titleCn }}
</div>
</transition>
<transition name="fade-slide-bottom">
<div
v-show="screen6.offsetLevel >= 0"
class="text-posi-abs"
style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
>
{{ screen6.contentCn }}
</div>
</transition>
<div class="list-wrapper">
<div
v-for="(item, index) in screen6.list"
:key="item.id"
class="list-item"
>
<transition name="scale">
<div
v-show="screen6.offsetLevel >= 0"
class="list-img"
:style="`--tde:${0.6 + index * 0.05}s;`"
>
<img
:src="item.imageurl"
alt=""
>
</div>
</transition>
<transition name="fade-slide-bottom">
<div
v-show="screen6.offsetLevel >= 0"
class="list-title"
:style="`--tde:${0.9 + index * 0.05}s;`"
>
{{ item.businessName }}
</div>
</transition>
</div>
</div>
</div>
</div> -->
<div class="screen4"> <div class="screen4">
<div class="wrapper1680"> <div class="wrapper1680">
<div <div
@ -230,6 +281,13 @@ export default {
imageSrc: '', imageSrc: '',
}, },
}, },
screen6: {
offsets: [800],
offsetLevel: 1,
titleCn: '',
contentCn: '',
list: [],
},
}; };
}, },
computed: { computed: {
@ -270,6 +328,8 @@ export default {
this.getScreen3ListData(); this.getScreen3ListData();
this.getScreen4ListData(); this.getScreen4ListData();
this.getScreen5JoinusData(); this.getScreen5JoinusData();
// this.getScreen6Data();
// this.getScreen6ListData();
}, },
mounted () { mounted () {
if (this.$route.hash) { if (this.$route.hash) {
@ -316,7 +376,7 @@ export default {
try { try {
const res = await this.$request.get( const res = await this.$request.get(
'/official/index/list', '/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/全球供应链/技术支持' } }, { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/全球供应链/技术支持' } },
); );
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders); this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
} catch (error) {} } catch (error) {}
@ -332,6 +392,25 @@ export default {
this.screen5.joinUs.imageSrc = res.rows[0].imageurl; this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
} catch (error) {} } catch (error) {}
}, },
async getScreen6Data () {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/全球供应链/供应链描述' } },
);
this.screen6.titleCn = res.rows[0].businessName;
this.screen6.contentCn = res.rows[0].titleChinese;
} catch (error) {}
},
async getScreen6ListData () {
try {
const res = await this.$request.get(
'/official/index/list',
{ params: { pageNum: 1, pageSize: 5, captionName: '业务领域/全球供应链/供应链流程' } },
);
this.screen6.list = res.rows.sort((a, b) => a.orders - b.orders);
} catch (error) {}
},
}, },
}; };
</script> </script>
@ -412,7 +491,7 @@ export default {
} }
.screen4 { .screen4 {
position: relative; position: relative;
height: 2410rem; height: 1286rem;
background-color: #F5F5F8; background-color: #F5F5F8;
} }
.screen4 .wrapper1680 { .screen4 .wrapper1680 {
@ -508,4 +587,50 @@ export default {
background-clip: text; background-clip: text;
color: transparent; color: transparent;
} }
.screen6 {
position: relative;
height: 800rem;
background-color: rgb(245, 244, 249);
}
.screen6 .wrapper1680 {
height: 100%;
position: relative;
}
.screen6 .list-wrapper {
position: absolute;
top: 400rem;
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 0px 115rem;
box-sizing: border-box;
}
.screen6 .list-item {
border-radius: 20rem;
background: #ffffff;
margin: 0 25rem;
width: 240rem;
height: 260rem;
margin-bottom: 90rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.screen6 .list-item:hover {
transform: scale(1.1, 1.1);
}
.screen6 .list-img {
width: 150rem;
height: 150rem;
display: contents;
}
.screen6 .list-title {
text-align: center;
font-size: 20rem;
line-height: 1;
color: #111111;
margin-top: 26rem;
}
</style> </style>

View File

@ -316,7 +316,7 @@ export default {
try { try {
const res = await this.$request.get( const res = await this.$request.get(
'/official/index/list', '/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/健康产业/技术支持' } }, { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/健康产业/技术支持' } },
); );
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders); this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
} catch (error) {} } catch (error) {}
@ -359,7 +359,7 @@ export default {
} }
.screen3 { .screen3 {
position: relative; position: relative;
height: 1300rem; height: 850rem;
background-color: #ffffff; background-color: #ffffff;
} }
.screen3 .wrapper1680 { .screen3 .wrapper1680 {
@ -377,8 +377,8 @@ export default {
} }
.screen3 .list-item { .screen3 .list-item {
margin: 0 58rem; margin: 0 58rem;
width: 350rem; width: 234rem;
height: 350rem; height: 330rem;
margin-bottom: 90rem; margin-bottom: 90rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -412,7 +412,7 @@ export default {
} }
.screen4 { .screen4 {
position: relative; position: relative;
height: 2410rem; height: 1286rem;
background-color: #F5F5F8; background-color: #F5F5F8;
} }
.screen4 .wrapper1680 { .screen4 .wrapper1680 {

View File

@ -354,7 +354,7 @@ export default {
try { try {
const res = await this.$request.get( const res = await this.$request.get(
'/official/index/list', '/official/index/list',
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/高新技术/技术支持' } }, { params: { pageNum: 1, pageSize: 2, captionName: '业务领域/高新技术/技术支持' } },
); );
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders); this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
} catch (error) {} } catch (error) {}
@ -459,7 +459,7 @@ export default {
} }
.screen4 { .screen4 {
position: relative; position: relative;
height: 2410rem; height: 1286rem;
background-color: #F5F5F8; background-color: #F5F5F8;
} }
.screen4 .wrapper1680 { .screen4 .wrapper1680 {