maochaoying
/
hjyd-mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页布局

master
maochaoying 2 years ago
parent
a21f23a73b
commit
3d8910e9a5
10 changed files with 248 additions and 7 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. 12
      src/components/AboutUs.vue
  2. 33
      src/components/Awards.vue
  3. 6
      src/components/CaseShow.vue
  4. 35
      src/components/Cooperation.vue
  5. 24
      src/components/HeadLine.vue
  6. 42
      src/components/MechanicalDrive.vue
  7. 31
      src/components/News.vue
  8. 36
      src/components/OneStop.vue
  9. 20
      src/components/Track.vue
  10. 16
      src/pages/index.vue

12
src/components/AboutUs.vue
View File

@ -0,0 +1,12 @@
<template>
<div class="about_us_card_container">about us</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.about_us_card_container {
padding: 58px 34px 83px 34px;
background: #e6effc;
}
</style>

33
src/components/Awards.vue
View File

@ -0,0 +1,33 @@
<template>
<div class="awards_container">
<div class="header_wrap">
<HeadLine title="荣获奖项" />
</div>
<div class="award_cards">
<div class="card"></div>
</div>
</div>
</template>
<script setup>
import HeadLine from 'cpns/HeadLine'
</script>
<style lang="scss" scoped>
.awards_container {
.header_wrap {
padding: 33px 0;
background: #edf0f6;
}
.award_cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
.card {
width: 100%;
height: 125px;
background: #f3f4f7;
}
}
}
</style>

6
src/components/CaseShow.vue
View File

@ -1,6 +1,10 @@
<template>
<div class="case_show_container">
<HeadLine />
<HeadLine
title="案例展示"
line1="医疗健康、智能硬件、工业设备、高铁设备、户外设备"
line2="特种设备、智能家居、实验仪器、消费电子"
/>
<div class="line_cards">
<div class="card"></div>
<div class="card"></div>

35
src/components/Cooperation.vue
View File

@ -0,0 +1,35 @@
<template>
<div class="cooperation_container">
<div class="header_wrap">
<HeadLine
title="合作客户"
line1="医疗企业 互联网公司 智能硬件公司 科研院所 工业自动化企业"
/>
</div>
<div class="client_wrap">
<div class="card"></div>
</div>
</div>
</template>
<script setup>
import HeadLine from 'cpns/HeadLine'
</script>
<style lang="scss" scoped>
.cooperation_container {
.header_wrap {
padding: 37px 0 37px 0;
}
.client_wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
.card {
width: 100%;
height: 94px;
background: #f3f3f3;
}
}
}
</style>

24
src/components/HeadLine.vue
View File

@ -1,12 +1,24 @@
<template>
<div class="headline_container">
<h2 class="title_h2">案例展示</h2>
<p class="line1">医疗健康、智能硬件、工业设备、高铁设备、户外设备</p>
<p class="line2">特种设备、智能家居、实验仪器、消费电子</p>
<h2 class="title_h2">{{ title }}</h2>
<p class="line1" v-if="line1">{{ line1 }}</p>
<p class="line2" 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>
.headline_container {
@ -25,13 +37,15 @@
font-family: Alibaba PuHuiTi;
font-weight: 300;
color: #595959;
line-height: 9px;
line-height: 16px;
text-align: center;
}
.line2 {
font-size: 7px;
font-family: Alibaba PuHuiTi;
font-weight: 300;
color: #595959;
text-align: center;
line-height: 9px;
margin-top: 4px;
}

42
src/components/MechanicalDrive.vue
View File

@ -0,0 +1,42 @@
<template>
<div class="mechanical_drive_container">
<div class="header_wrap">
<HeadLine
title="机械传动专家"
line1="我们精通气动、液动、电动等各种传动机构"
line2="完成机械所需的各种动作"
/>
</div>
<div class="grid_layouts">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</template>
<script setup>
import HeadLine from 'cpns/HeadLine'
</script>
<style lang="scss" scoped>
.mechanical_drive_container {
.header_wrap {
padding: 39px 0 39px 0;
background: #ebeff7;
}
.grid_layouts {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
.card {
width: 100%;
height: 87px;
background: #a1abfb;
}
}
}
</style>

31
src/components/News.vue
View File

@ -0,0 +1,31 @@
<template>
<div class="news_container">
<div class="header_wrap">
<HeadLine title="新闻/NEWS" line1="获取行业最新咨询" />
</div>
<div class="card_wrap">
<div class="card"></div>
</div>
</div>
</template>
<script setup>
import HeadLine from 'cpns/HeadLine'
</script>
<style lang="scss" scoped>
.news_container {
.header_wrap {
padding: 26px 0 23px 0;
}
.card_wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
.card {
width: 100%;
background: #000;
height: 101px;
}
}
}
</style>

36
src/components/OneStop.vue
View File

@ -0,0 +1,36 @@
<template>
<div class="one_stop_container">
<div class="header_wrap">
<HeadLine
title="一站式设计+制造的产业链模式"
line1="旗下开设独资机箱壳子批量加工中心，消除了客户从概念导入到产品实现全程无障碍之忧"
line2="助力产品设计方案快速落地，以最快速度截获市场先机"
/>
</div>
<div class="design_cards">
<div class="card"></div>
</div>
</div>
</template>
<script setup>
import HeadLine from 'cpns/HeadLine'
</script>
<style lang="scss" scoped>
.one_stop_container {
.header_wrap {
padding: 56px 31px 47px 31px;
}
.design_cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
.card {
width: 100%;
height: 88px;
background: #ddd;
}
}
}
</style>

20
src/components/Track.vue
View File

@ -0,0 +1,20 @@
<template>
<div class="track_container">
<div class="card"></div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.track_container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
.card {
width: 100%;
height: 125px;
background: #4056fa;
}
}
</style>

16
src/pages/index.vue
View File

@ -1,13 +1,27 @@
<template>
<div>
<div class="home_container">
<Summarize />
<CaseShow />
<MechanicalDrive />
<AboutUs />
<Track />
<OneStop />
<News />
<Cooperation />
<Awards />
</div>
</template>
<script setup>
import Summarize from 'cpns/Summarize'
import CaseShow from 'cpns/CaseShow'
import MechanicalDrive from 'cpns/MechanicalDrive'
import AboutUs from 'cpns/AboutUs'
import Track from 'cpns/Track'
import OneStop from 'cpns/OneStop'
import News from 'cpns/News'
import Cooperation from 'cpns/Cooperation'
import Awards from 'cpns/Awards'
</script>
<style></style>
Write Preview
Loading…
Cancel
Save