maochaoying
/
ecmo-frontend
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
d950e413fd
commit
db420c05b6
4 changed files with 139 additions and 1 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. 16
      src/components/BigCard.vue
  2. 2
      src/components/Header.vue
  3. 16
      src/components/SmallCard.vue
  4. 106
      src/pages/Home.vue

16
src/components/BigCard.vue
View File

@ -0,0 +1,16 @@
<template>
<div class="big_card_container">bigcard</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.big_card_container {
width: 390px;
height: 306px;
border-radius: 18px;
background: #fff;
box-sizing: border-box;
overflow: hidden;
}
</style>

2
src/components/Header.vue
View File

@ -85,6 +85,8 @@
align-items: center;
padding: 12px 31px 10px 11px;
background: #534a40;
box-sizing: border-box;
max-height: 70px;
.info_box {
display: flex;
align-items: center;

16
src/components/SmallCard.vue
View File

@ -0,0 +1,16 @@
<template>
<div class="small_card_container"></div>
</template>
<script setup></script>
<style>
.small_card_container {
width: 253.33px;
height: 208px;
border-radius: 18px;
overflow: hidden;
background: #f3f3f3;
box-sizing: border-box;
}
</style>

106
src/pages/Home.vue
View File

@ -2,7 +2,64 @@
<div class="home_container">
<Header />
<div class="content_container">
<div class="left_container"></div>
<div class="left_container">
<div class="one_line_box">
<BigCard />
<BigCard />
</div>
<div class="two_line_box">
<SmallCard />
<SmallCard />
<SmallCard />
</div>
<div class="three_line_box">
<div class="bubble_box"></div>
<div class="battery_status_box">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="58.408203125"
height="79.291015625"
viewBox="0 0 58.408203125 79.291015625"
>
<g>
<g>
<path
d="M24.864,44.24L0,44.24L0,9.8L24.808,9.8L24.808,44.24L24.864,44.24ZM5.208,39.032L19.656,39.032L19.656,15.008L5.208,15.008L5.208,39.032ZM1.008,0L23.912,0L23.912,5.208L1.008,5.208L1.008,0Z"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
<g>
<path
d="M55.720015625,47.985296875C54.264015625,47.985296875,53.144015625,46.809296875,53.144015625,45.409296875L53.144015625,25.025296875000002C53.144015625,20.433296875,49.392015625,16.737296875,44.856015625,16.737296875C40.320015624999996,16.737296875,36.568015625,20.489296875,36.568015625,25.025296875000002L36.568015625,45.353296875C36.568015625,46.809296875,35.392015625,47.929296875,33.992015625,47.929296875C32.536015625,47.929296875,31.416015625,46.753296875,31.416015625,45.353296875L31.416015625,25.025296875000002C31.416015625,17.577296875000002,37.464015625,11.529296875,44.912015625,11.529296875C52.360015625,11.529296875,58.408015625000004,17.577296875000002,58.408015625000004,25.025296875000002L58.408015625000004,45.353296875C58.296015624999995,46.809296875,57.176015625000005,47.985296875,55.720015625,47.985296875Z"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
<g>
<path
d="M23.016019531250002,77.616796875C15.56801953125,77.616796875,9.52001953125,71.568796875,9.52001953125,64.120796875L9.52001953125,43.792796875C9.52001953125,42.336796875,10.69601953125,41.216796875,12.09601953125,41.216796875C13.496019531249999,41.216796875,14.672019531250001,42.392796875,14.672019531250001,43.792796875L14.672019531250001,64.120796875C14.672019531250001,68.712796875,18.42401953125,72.40879687500001,22.960019531249998,72.40879687500001C27.49601953125,72.40879687500001,31.24801953125,68.656796875,31.24801953125,64.120796875L31.24801953125,43.792796875C31.24801953125,42.336796875,32.424019531249996,41.216796875,33.82401953125,41.216796875C35.22401953125,41.216796875,36.400019531249995,42.392796875,36.400019531249995,43.792796875L36.400019531249995,64.120796875C36.512019531250004,71.568796875,30.46401953125,77.616796875,23.016019531250002,77.616796875Z"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
<g>
<path
d="M51.2973375,38.791985L2.7973815,79.292025L0.8744935,76.989225L49.3745375,36.489265L51.2973375,38.791985Z"
fill-rule="evenodd"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
</g>
</svg>
<div class="battery_info_box"></div>
</div>
</div>
</div>
<div class="right_container">
<div class="pattern_box">
<div class="pattern">
@ -116,6 +173,8 @@
<script setup>
import Header from 'cpns/Header'
import BigCard from 'cpns/BigCard'
import SmallCard from 'cpns/SmallCard'
</script>
<style lang="scss" scoped>
@ -136,6 +195,51 @@ import Header from 'cpns/Header'
.left_container {
flex: 1;
height: 100%;
.one_line_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.two_line_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.three_line_box {
display: flex;
align-items: center;
justify-content: space-between;
.bubble_box {
width: 136px;
height: 136px;
border-radius: 18px;
background: #f3f3f3;
margin-right: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.battery_status_box {
flex: 1;
height: 136px;
border-radius: 18px;
background: #3f4f6f;
box-sizing: border-box;
padding: 20px 18px 20px 29px;
display: flex;
align-items: center;
.battery_info_box {
flex: 1;
height: 96px;
border-radius: 12px;
background: #233861;
overflow: hidden;
margin-left: 28.59px;
}
}
}
}
.right_container {
width: 420px;

Write Preview
Loading…
Cancel
Save