maochaoying
/
subsea-side-website
generated from maochaoying/dreamworks-frontend-template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

联系我们

master
maochaoying 2 years ago
parent
4fe890344e
commit
a9ef34e681
7 changed files with 247 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/components/AboutUs.vue
  2. 10
      src/components/Bottom.vue
  3. 111
      src/components/Contact.vue
  4. 9
      src/components/FourCard.vue
  5. 24
      src/components/HeadLine.vue
  6. 91
      src/components/Product.vue
  7. 6
      src/pages/index.vue

7
src/components/AboutUs.vue
View File

@ -1,6 +1,10 @@
<template>
<div class="about_us_container">
<HeadLine />
<HeadLine
title="关于我们"
line1="专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"
line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
/>
<div class="more_btn">
<span>了解更多</span>
<img :src="RightArrow" alt="right_arrow" class="right_arrow" />
@ -33,7 +37,6 @@ import FourCard from '@/components/FourCard'
font-weight: 300;
color: #fafafa;
box-sizing: border-box;
margin: 0 auto;
margin-top: 36px;
margin-bottom: 86px;

10
src/components/Bottom.vue
View File

@ -0,0 +1,10 @@
<template>
<div class="bottom_container">bottom container</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.bottom_container {
}
</style>

111
src/components/Contact.vue
View File

@ -0,0 +1,111 @@
<template>
<div class="contact_container">
<div class="base_info_container">
<div class="info mb">
<img :src="Phone" alt="phone" class="icon" />
<p class="first">袁老师</p>
<p>13717892018</p>
</div>
<div class="info mb">
<img :src="Address" alt="phone" class="icon" />
<div class="add_wrap">
<p class="address mb">北京市昌平区回龙观街道博纳集团</p>
<p class="address">3号楼一层 产品梦工厂</p>
</div>
</div>
<div class="info">
<img :src="Email" alt="phone" class="icon" />
<p class="email_text">
<span> 邮 </span>
<span> 箱 </span>
</p>
<p class="email">info@iflytop.com</p>
</div>
</div>
<div class="contact_form">
<p class="title">联系我们</p>
</div>
</div>
</template>
<script setup>
import Phone from '@/static/img/8.png'
import Address from '@/static/img/9.png'
import Email from '@/static/img/10.png'
</script>
<style lang="scss" scoped>
.contact_container {
padding: 152px 260px;
background: url(../static/img/7.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
.base_info_container {
display: flex;
align-items: flex-start;
flex-direction: column;
.info {
display: flex;
align-items: center;
font-size: 28px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #1b1b1b;
.icon {
width: 55px;
height: 55px;
margin-right: 31px;
}
.add_wrap {
display: flex;
flex-direction: column;
.address {
font-size: 22px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #1b1b1b;
}
.mb {
margin-bottom: 8px;
}
}
.first {
margin-right: 29px;
}
.email_text {
display: flex;
align-items: center;
justify-content: space-between;
width: 83px;
margin-right: 31px;
}
.email {
font-size: 22px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #5064f4;
}
}
.mb {
margin-bottom: 74px;
}
}
.contact_form {
flex: 1;
margin-left: 191px;
height: 546px;
background: #ffffff;
border-radius: 8px;
border-top: 4px solid #f95926;
padding: 50px 50px 41px 50px;
.title {
font-size: 26px;
font-weight: bold;
color: #000000;
}
}
}
</style>

9
src/components/FourCard.vue
View File

@ -11,7 +11,7 @@
</div>
<p class="ver_line"></p>
<div class="card_container">
<img :src="Hardware" alt="icon" class="icon" />
<img :src="Software" alt="icon" class="icon" />
<h3 class="card_title">软件定制</h3>
<div class="desc">
<p class="line">专业水下视学设备团队，研发出品多</p>
@ -21,7 +21,7 @@
</div>
<p class="ver_line"></p>
<div class="card_container">
<img :src="Hardware" alt="icon" class="icon" />
<img :src="Structure" alt="icon" class="icon" />
<h3 class="card_title">结构定制</h3>
<div class="desc">
<p class="line">专业水下视学设备团队，研发出品多</p>
@ -31,7 +31,7 @@
</div>
<p class="ver_line"></p>
<div class="card_container">
<img :src="Hardware" alt="icon" class="icon" />
<img :src="Temp" alt="icon" class="icon" />
<h3 class="card_title">硬件定制</h3>
<div class="desc">
<p class="line">专业水下视学设备团队，研发出品多</p>
@ -44,6 +44,9 @@
<script setup>
import Hardware from '@/static/img/3.png'
import Software from '@/static/img/4.png'
import Structure from '@/static/img/5.png'
import Temp from '@/static/img/6.png'
</script>
<style lang="scss" scoped>

24
src/components/HeadLine.vue
View File

@ -1,17 +1,29 @@
<template>
<div class="header_line_container">
<h2 class="title">关于我们</h2>
<h2 class="title">{{ title }}</h2>
<p class="line"></p>
<p class="desc">
专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队
<p class="desc" v-if="line1">
{{ line1 }}
</p>
<p class="desc">
软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。
<p class="desc" v-if="line2">
{{ line2 }}
</p>
</div>
</template>
<script setup></script>
<script setup>
const props = defineProps({
title: {
type: String,
},
line1: {
type: String,
},
line2: {
type: String,
},
})
</script>
<style lang="scss" scoped>
.header_line_container {

91
src/components/Product.vue
View File

@ -0,0 +1,91 @@
<template>
<div class="product_container">
<HeadLine title="产品中心" line1="做专业的水下设备制造商" />
<div class="product_card_container">
<div class="product_card">
<img :src="A1" alt="" class="product_img" />
<div class="bottom_tip">
<p>动车底部巡检</p>
<div class="btn">查看详情</div>
</div>
</div>
<div class="product_card">
<img :src="A1" alt="" class="product_img" />
<div class="bottom_tip">
<p>动车底部巡检</p>
<div class="btn">查看详情</div>
</div>
</div>
<div class="product_card">
<img :src="A1" alt="" class="product_img" />
<div class="bottom_tip">
<p>动车底部巡检</p>
<div class="btn">查看详情</div>
</div>
</div>
<div class="product_card">
<img :src="A1" alt="" class="product_img" />
<div class="bottom_tip">
<p>动车底部巡检</p>
<div class="btn">查看详情</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import HeadLine from '@/components/HeadLine'
import A1 from '@/static/img/a1.png'
</script>
<style lang="scss" scoped>
.product_container {
margin: 0 auto;
width: 73vw;
padding: 17px 0 120px 0;
.product_card_container {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 82px;
.product_card {
width: 50%;
height: 393px;
box-sizing: border-box;
position: relative;
background: #000;
.product_img {
width: 100%;
height: 100%;
}
.bottom_tip {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 13px 14px 13px 28px;
font-size: 22px;
font-weight: 500;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(249, 89, 38, 0.3);
.btn {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 17px 35px 17px 33px;
width: 206px;
height: 55px;
background: linear-gradient(90deg, #facc22, #f83600);
border-radius: 28px;
cursor: pointer;
}
}
}
}
}
</style>

6
src/pages/index.vue
View File

@ -2,12 +2,18 @@
<div class="main_container">
<HomeSceen />
<AboutUs />
<Product />
<Contact />
<Bottom />
</div>
</template>
<script setup>
import HomeSceen from '@/components/HomeScreen'
import AboutUs from '@/components/AboutUs'
import Product from '@/components/Product'
import Contact from '@/components/Contact'
import Bottom from '@/components/Bottom'
</script>
<style scoped lang="scss">

Write Preview
Loading…
Cancel
Save