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.
323 lines
9.2 KiB
323 lines
9.2 KiB
<template>
|
|
<div class="wrap">
|
|
<div class="contractus_container" id="contractus_container">
|
|
<div class="empty"></div>
|
|
<div class="content">
|
|
<div class="circle" id="contact_circle"></div>
|
|
<div class="hand" id="contact_hand"></div>
|
|
<div class="contact_title_container" id="contact_title_container">
|
|
<div class="yingwen_text">
|
|
<span>联系我们</span>
|
|
<img v-lazy="Line" alt="" class="line" />
|
|
</div>
|
|
<img v-lazy="Contact" alt="" class="yingwen" />
|
|
</div>
|
|
<div class="main_content" id="contactus_main_content">
|
|
<div id="contract_info_ani">
|
|
<p class="big_title">
|
|
为产品添彩，为企业赋能<br />
|
|
打造高品质/强落地/有卖点的好产品
|
|
</p>
|
|
<div class="phone_line_1">
|
|
<div class="item mr">
|
|
<img v-lazy="Phone" alt="" class="icon" />
|
|
<p class="phone">袁老师 137 1789 2018</p>
|
|
</div>
|
|
<div class="item">
|
|
<img v-lazy="Phone" alt="" class="icon" />
|
|
<p class="phone">郭老师 131 6196 7787</p>
|
|
</div>
|
|
</div>
|
|
<div class="phone_line_2">
|
|
<div class="item mr">
|
|
<img v-lazy="Email" alt="" class="icon" />
|
|
<p class="phone">info@iflytop.com</p>
|
|
</div>
|
|
<div class="item">
|
|
<img v-lazy="Address" alt="" class="icon" />
|
|
<p class="phone">
|
|
北京市昌平区回龙观街道博纳集团3号楼一层 产品梦工厂
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="maps"></div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="bottom_text_container">
|
|
<div>
|
|
<img v-lazy="Logo" alt="" class="img" />
|
|
</div>
|
|
<div class="some_link_container">
|
|
<div class="some_link">
|
|
<p>首页</p>
|
|
<p>|</p>
|
|
<p>工业设计</p>
|
|
<p>|</p>
|
|
<p>企业文化</p>
|
|
<p>|</p>
|
|
<p>软硬件开发</p>
|
|
<p>|</p>
|
|
<p>招聘</p>
|
|
<p>|</p>
|
|
<p>联系我们</p>
|
|
<p>|</p>
|
|
<p>关于我们</p>
|
|
</div>
|
|
<div class="address">
|
|
<p>北京市昌平区回龙观</p>
|
|
<p class="compony">产品梦工厂</p>
|
|
</div>
|
|
<div class="contract_type">
|
|
<p class="phone_1">Tel：13717892017</p>
|
|
<p>Tel：13161967787</p>
|
|
<p class="email">
|
|
邮箱：<span class="blue_text">info@iflytop.com</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="intro">
|
|
<p class="text1">
|
|
专业从事研发12年，产品梦工厂,作为一家资深的研发公司，主导了大量产品从需求→产品定义→策划
|
|
→外观→结构→硬件→嵌软→软件→全功能样机→模具→批量→灰度测试→产能爬坡的全流程经验。
|
|
</p>
|
|
<p>
|
|
专业的团队，加上技术的沉淀，以及自有工厂的加持我们的目标只有一个：做产品，找产品梦工厂就对
|
|
了帮您节省投资。
|
|
</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Logo from '@/assets/img/contract/dilogo.png'
|
|
import Phone from '@/assets/img/contract/dianhua.png'
|
|
import Address from '@/assets/img/contract/dizhi.png'
|
|
import Email from '@/assets/img/contract/youxiang.png'
|
|
import Contact from '@/assets/img/contract/yingwen.png'
|
|
import Line from '@/assets/img/contract/biaotifuhao.png'
|
|
import { ref, onMounted } from 'vue'
|
|
import { handleScreenAuto } from '@/common/utils'
|
|
// 对右侧进行适配 main_content
|
|
const showEmpty = ref(true)
|
|
onMounted(() => {
|
|
handleScreenAuto('#contactus_main_content')
|
|
handleScreenAuto('#contact_title_container')
|
|
window.onresize = handleScreenAuto('#contactus_main_content')
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrap {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: $common_bg;
|
|
position: relative;
|
|
.contractus_container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.empty {
|
|
min-height: 90px;
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.contact_title_container {
|
|
position: absolute;
|
|
left: 152px;
|
|
top: 67px;
|
|
width: 337px;
|
|
height: 157px;
|
|
box-sizing: border-box;
|
|
.yingwen_text {
|
|
font-size: 36px;
|
|
font-family: 'SourceHanSans';
|
|
margin-bottom: 59px;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
position: relative;
|
|
.line {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 40px;
|
|
height: 4px;
|
|
top: -15px;
|
|
}
|
|
}
|
|
.yingwen {
|
|
width: 337px;
|
|
height: 46px;
|
|
}
|
|
}
|
|
.main_content {
|
|
position: absolute;
|
|
right: 132px;
|
|
top: 47px;
|
|
width: 834px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.big_title {
|
|
font-size: 48px;
|
|
font-family: 'Alibaba PuHuiTi';
|
|
line-height: 62px;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
margin-bottom: 47px;
|
|
}
|
|
.phone_line_1 {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 35px;
|
|
.mr {
|
|
margin-right: 55px;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: 400;
|
|
color: #646a73;
|
|
.icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
.phone {
|
|
margin-left: 18px;
|
|
}
|
|
}
|
|
}
|
|
.phone_line_2 {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 64px;
|
|
.mr {
|
|
margin-right: 98px;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
font-family: 'SourceHanSans';
|
|
font-weight: 400;
|
|
color: #646a73;
|
|
.icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
.phone {
|
|
margin-left: 18px;
|
|
}
|
|
}
|
|
}
|
|
.maps {
|
|
width: 826px;
|
|
// flex: 1;
|
|
height: 503px;
|
|
box-shadow: 0px 7px 24px 0px rgba(7, 7, 72, 0.05);
|
|
border-radius: 10px;
|
|
background: url(../../../../assets/img/contract/ditu.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.circle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: url(../../../../assets/img/contract/yuanback.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
left: 0;
|
|
width: 751px;
|
|
height: 578px;
|
|
}
|
|
.hand {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: url(../../../../assets/img/contract/shouji.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
left: 144px;
|
|
width: 612px;
|
|
height: 645px;
|
|
}
|
|
}
|
|
.bottom_text_container {
|
|
height: 224px;
|
|
box-sizing: border-box;
|
|
background: url(../../../../assets/img/contract/diback.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 55px 105px;
|
|
.img {
|
|
width: 86px;
|
|
height: 77px;
|
|
}
|
|
.some_link_container {
|
|
height: 100%;
|
|
margin: 0 177px 0 100px;
|
|
.some_link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 611px;
|
|
font-size: 14px;
|
|
font-family: 'SourceHanSansLight';
|
|
font-weight: 300;
|
|
color: #b7b7b7;
|
|
margin-bottom: 35px;
|
|
}
|
|
.address {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-family: 'SourceHanSansLight';
|
|
font-weight: 300;
|
|
color: #b7b7b7;
|
|
margin-bottom: 34px;
|
|
.compony {
|
|
margin-left: 24px;
|
|
}
|
|
}
|
|
.contract_type {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-family: 'SourceHanSansLight';
|
|
font-weight: 300;
|
|
color: #b7b7b7;
|
|
letter-spacing: 3px;
|
|
white-space: nowrap;
|
|
.phone_1 {
|
|
margin-right: 36px;
|
|
}
|
|
.email {
|
|
margin-left: 36px;
|
|
.blue_text {
|
|
color: $theme_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.intro {
|
|
font-size: 14px;
|
|
font-family: 'SourceHanSansLight';
|
|
font-weight: 300;
|
|
color: #b7b7b7;
|
|
line-height: 20px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|