You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.7 KiB
113 lines
2.7 KiB
<template>
|
|
<div class="wrap">
|
|
<div class="slide_five" id="slide_five">
|
|
<div class="header_c">
|
|
<div class="title">
|
|
<div class="left">研发、设计、量产</div>
|
|
<div class="right">一站式解决方案</div>
|
|
</div>
|
|
<div class="desc">
|
|
外观是产品的外衣/结构是产品的骨骼/硬件是产品的肌肉/软件是产品的灵魂
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom_statement">Product Dream Factory</div>
|
|
</div>
|
|
<div class="main_img" id="main_img">
|
|
<img :src="People" alt="people" class="people" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Factory from '@/assets/img/banner/factory.png'
|
|
import People from '@/assets/img/banner/onestop/renwu.png'
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../../../../../assets/img/banner/onestop/back.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.slide_five {
|
|
width: 100%;
|
|
height: 100%;
|
|
.header_c {
|
|
position: absolute;
|
|
top: 175px;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
width: 893px;
|
|
.title {
|
|
width: 855px;
|
|
height: 77px;
|
|
display: flex;
|
|
border: solid 2px $theme_color;
|
|
overflow: hidden;
|
|
border-radius: 43px;
|
|
align-items: center;
|
|
margin-bottom: 50px;
|
|
.left {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
background: $theme_color;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40px;
|
|
font-family: DFPYuanW5-GB;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
.right {
|
|
width: 50%;
|
|
background: #fff;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 42px;
|
|
font-family: DFPYuanW7-GB;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
}
|
|
}
|
|
.desc {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 19px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: 400;
|
|
color: #aeaeae;
|
|
}
|
|
}
|
|
.bottom_statement {
|
|
position: absolute;
|
|
left: 84px;
|
|
z-index: 999;
|
|
bottom: 75px;
|
|
width: 165px;
|
|
height: 11px;
|
|
font-size: 12px;
|
|
font-family: 'ZonaPro';
|
|
font-weight: 400;
|
|
color: #646a73;
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
.main_img {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%);
|
|
|
|
.people {
|
|
height: calc(100vh / 1.6);
|
|
width: 100vw;
|
|
}
|
|
}
|
|
}
|
|
</style>
|