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

375设计搞

master
maochaoying 2 years ago
parent
61ecc4b1ea
commit
1c9190b8aa
10 changed files with 126 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/components/AboutUs.vue
  2. 15
      src/components/Awards.vue
  3. 44
      src/components/CaseShow.vue
  4. 35
      src/components/Cooperation.vue
  5. 16
      src/components/News.vue
  6. 16
      src/components/OneStop.vue
  7. 6
      src/components/Summarize.vue
  8. 15
      src/components/Track.vue
  9. 2
      src/pages/index.vue
  10. 4
      vite.config.js

12
src/components/AboutUs.vue
View File

@ -1,12 +1,16 @@
<template> <template>
<div class="about_us_card_container">about us</div>
<div class="about_us_card_container">
<HeadLine themeTitle="关于" title="我们" line1="ABOUT US" />
</div>
</template> </template>
<script setup></script>
<script setup>
import HeadLine from 'cpns/HeadLine'
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.about_us_card_container { .about_us_card_container {
padding: 58px 34px 83px 34px;
background: #e6effc;
padding: 0 31px;
background: #ffffff;
} }
</style> </style>

15
src/components/Awards.vue
View File

@ -1,10 +1,13 @@
<template> <template>
<div class="awards_container"> <div class="awards_container">
<div class="header_wrap">
<HeadLine title="荣获奖项" />
</div>
<HeadLine themeTitle="奖项" title="荣获" line1="AWARDED" />
<div class="award_cards"> <div class="award_cards">
<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 class="card"></div>
</div> </div>
</div> </div>
</template> </template>
@ -15,16 +18,12 @@ import HeadLine from 'cpns/HeadLine'
<style lang="scss" scoped> <style lang="scss" scoped>
.awards_container { .awards_container {
.header_wrap {
padding: 33px 0;
background: #edf0f6;
}
.award_cards { .award_cards {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
.card { .card {
width: 100%;
flex: 1;
height: 125px; height: 125px;
background: #f3f4f7; background: #f3f4f7;
} }

44
src/components/CaseShow.vue
View File

@ -7,7 +7,17 @@
line2="特种设备、智能家居、实验仪器、消费电子" line2="特种设备、智能家居、实验仪器、消费电子"
/> />
<div class="line_cards"> <div class="line_cards">
<div class="card"></div>
<div class="card">
<p class="title">国网照明巡检摄像头</p>
<div class="img_box">
<div class="bottom_text">
<p>工业设计</p>
<p>软硬件研发</p>
<p>样机制作</p>
<p>量产</p>
</div>
</div>
</div>
<div class="card"></div> <div class="card"></div>
<div class="card"></div> <div class="card"></div>
<div class="card"></div> <div class="card"></div>
@ -40,6 +50,38 @@ import HeadLine from 'cpns/HeadLine'
background: #ffffff; background: #ffffff;
border-radius: 3px; border-radius: 3px;
flex: 1; flex: 1;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 11px 7px 7px 7px;
.title {
font-size: 8px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #2f2f2f;
padding-left: 2px;
margin-bottom: 11px;
}
.img_box {
width: 100%;
flex: 1;
position: relative;
.bottom_text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 17px;
background: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: space-evenly;
font-size: 8px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
}
}
} }
} }
} }

35
src/components/Cooperation.vue
View File

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

16
src/components/News.vue
View File

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

16
src/components/OneStop.vue
View File

@ -10,6 +10,11 @@
</div> </div>
<div class="design_cards"> <div class="design_cards">
<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 class="card"></div>
</div> </div>
</div> </div>
</template> </template>
@ -27,10 +32,15 @@ import HeadLine from 'cpns/HeadLine'
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
padding: 0 7px;
box-sizing: border-box;
row-gap: 7px;
column-gap: 7px;
.card { .card {
width: 100%;
height: 88px;
background: #ddd;
flex: 1;
height: 125px;
border-radius: 3px;
background: #fff;
} }
} }
} }

6
src/components/Summarize.vue
View File

@ -5,7 +5,7 @@
产品设计<span class="theme_color">首选服务商</span> 产品设计<span class="theme_color">首选服务商</span>
</h1> </h1>
<p class="desc mb"> <p class="desc mb">
专注医疗器械一站式高品质的创新设计服务，从概念导入到产品现实加工落地
专注医疗器械一站式高品质的创新设计服务，从概念导入到产品现实加工落地<br />
为企业精准制定，快速截获市场先机 为企业精准制定，快速截获市场先机
</p> </p>
<div class="four"> <div class="four">
@ -68,7 +68,9 @@
} }
} }
.desc { .desc {
font-size: 7px;
transform: scale(0.5);
width: 200%;
font-size: 14px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 300; font-weight: 300;
color: #959595; color: #959595;

15
src/components/Track.vue
View File

@ -1,6 +1,14 @@
<template> <template>
<div class="track_container"> <div class="track_container">
<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 class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div> </div>
</template> </template>
@ -11,10 +19,13 @@
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
padding: 0 7px;
padding-top: 7px;
box-sizing: border-box;
.card { .card {
width: 100%;
flex: 1;
background: #fafafa;
height: 125px; height: 125px;
background: #4056fa;
} }
} }
</style> </style>

2
src/pages/index.vue
View File

@ -5,8 +5,8 @@
<CaseShow /> <CaseShow />
<MechanicalDrive /> <MechanicalDrive />
<OneStop /> <OneStop />
<AboutUs />
<Track /> <Track />
<AboutUs />
<News /> <News />
<Cooperation /> <Cooperation />
<Awards /> <Awards />

4
vite.config.js
View File

@ -13,6 +13,10 @@ export default defineConfig({
}, },
extensions: ['.js', '.json', '.vue'], extensions: ['.js', '.json', '.vue'],
}, },
server: {
port: 5173,
host: '0.0.0.0',
},
plugins: [vue()], plugins: [vue()],
//配置sass //配置sass
css: { css: {

Write Preview
Loading…
Cancel
Save