Skip to content

Commit 46f24b6

Browse files
mugetsumugetsu
committed
Updated Overview
1 parent ed54f83 commit 46f24b6

File tree

3 files changed

+133
-82
lines changed

3 files changed

+133
-82
lines changed

‎components/Latest/index.vue‎

Lines changed: 76 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div class="latest">
2+
<div class="latest" :class="[ size, { 'is-inverted': invert } ]">
33
<ul>
44
<li>
55
<span class="icon icon--confirmed">
66
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0 0 172 172" style=" fill:#000000;" data-v-691393b9=""><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal" data-v-691393b9=""><path d="M0,172v-172h172v172z" fill="none" data-v-691393b9=""></path><g fill="#ffffff" data-v-691393b9=""><path d="M149.28546,31.29387l-11.86117,-8.0625c-3.28185,-2.22236 -7.77825,-1.36959 -9.97476,1.88642l-58.14303,85.74159l-26.71996,-26.71996c-2.79087,-2.79087 -7.33894,-2.79087 -10.12981,0l-10.15565,10.15565c-2.79087,2.79087 -2.79087,7.33894 0,10.15565l41.08774,41.08774c2.29988,2.29988 5.91767,4.05709 9.17368,4.05709c3.25601,0 6.53786,-2.04146 8.65685,-5.11658l69.97837,-103.23618c2.22235,-3.25601 1.36959,-7.72656 -1.91226,-9.94892z" data-v-691393b9=""></path></g></g></svg>
77
</span>
88
<span>
99
<animated-number
10-
:value="latest.confirmed"
10+
:value="data.confirmed"
1111
:formatValue="formatNumber"
1212
:duration="duration"
1313
/>
@@ -19,7 +19,7 @@
1919
</span>
2020
<span>
2121
<animated-number
22-
:value="latest.deaths"
22+
:value="data.deaths"
2323
:formatValue="formatNumber"
2424
:duration="duration"
2525
/>
@@ -31,7 +31,7 @@
3131
</span>
3232
<span>
3333
<animated-number
34-
:value="latest.recovered"
34+
:value="data.recovered"
3535
:formatValue="formatNumber"
3636
:duration="duration"
3737
/>
@@ -42,24 +42,38 @@
4242
</template>
4343

4444
<script>
45-
import { mapGetters } from 'vuex'
4645
import AnimatedNumber from 'animated-number-vue'
4746
4847
export default {
4948
name: 'Latest',
5049
components: {
5150
AnimatedNumber
5251
},
52+
props: {
53+
data: {
54+
type: Object,
55+
default() {
56+
return {
57+
confirmed: 0,
58+
deaths: 0,
59+
recovered: 0
60+
}
61+
}
62+
},
63+
size: {
64+
type: String,
65+
default: 'small'
66+
},
67+
invert: {
68+
type: Boolean,
69+
default: false
70+
}
71+
},
5372
data() {
5473
return {
5574
duration: 1600
5675
}
5776
},
58-
computed: {
59-
...mapGetters([
60-
'latest'
61-
])
62-
},
6377
methods: {
6478
formatNumber(s) {
6579
return parseFloat(s.toFixed(0)).toLocaleString('en')
@@ -73,84 +87,84 @@ $color-confirmed: #ffa500;
7387
$color-deaths: #b20000;
7488
$color-recovered: #66a266;
7589
76-
.icon {
77-
display: inline-block;
78-
border-radius: 100%;
79-
width: 32px;
80-
height: 32px;
81-
text-align: center;
82-
box-shadow: 0px 4px 2px -1px rgba(0, 0, 0, 0.2);
83-
84-
svg {
85-
display: inline-block;
86-
width: 24px;
87-
height: 24px;
88-
vertical-align: middle;
89-
}
90-
91-
&--confirmed {
92-
background-color: $color-confirmed;
93-
}
94-
95-
&--deaths {
96-
background-color: $color-deaths;
97-
}
98-
99-
&--recovered {
100-
background-color: $color-recovered;
101-
}
102-
}
103-
10490
.latest {
10591
position: absolute;
10692
top: 0;
10793
z-index: 2;
108-
padding: 24px 0;
109-
font-size: 32px;
94+
font-size: 24px;
11095
color: #ffffff;
11196
width: 100%;
11297
11398
ul {
114-
margin: 0 24px;
99+
margin: 24px;
115100
padding: 0;
116101
text-align: left;
117102
118103
li {
119-
display: block;
120-
margin-top: 16px;
121-
line-height: 28px;
104+
display: flex;
105+
align-items: center;
122106
123107
&:first-child {
124108
margin-top: 0;
125109
}
126110
127111
span {
128-
display: inline-block;
129-
vertical-align: middle;
130112
font-weight: 300;
131113
}
132114
}
133115
}
134116
135-
.reference {
136-
display: inline-block;
137-
margin: 0;
138-
padding: 8px;
139-
font-size: 10px;
140-
font-weight: 300;
141-
text-align: right;
142-
text-transform: uppercase;
143-
color: #ffffff;
144-
145-
a {
146-
font-weight: 400;
147-
text-decoration: none;
148-
color: #ffffff;
117+
.icon {
118+
margin-right: 6px;
119+
width: 24px;
120+
height: 24px;
121+
122+
svg {
123+
width: 16px;
124+
height: 16px;
125+
}
126+
}
127+
128+
&.large {
129+
font-size: 32px;
130+
131+
.icon {
132+
margin-right: 12px;
133+
width: 32px;
134+
height: 32px;
149135
}
150136
151-
span {
152-
display: block;
137+
ul {
138+
139+
li {
140+
margin-top: 16px;
141+
}
153142
}
154143
}
144+
145+
&.is-inverted {
146+
color: #000000;
147+
}
148+
}
149+
150+
.icon {
151+
display: flex;
152+
justify-content: center;
153+
align-items: center;
154+
border-radius: 100%;
155+
text-align: center;
156+
box-shadow: 0px 4px 2px -1px rgba(0, 0, 0, 0.2);
157+
158+
&--confirmed {
159+
background-color: $color-confirmed;
160+
}
161+
162+
&--deaths {
163+
background-color: $color-deaths;
164+
}
165+
166+
&--recovered {
167+
background-color: $color-recovered;
168+
}
155169
}
156170
</style>

‎components/Overview/index.vue‎

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,52 @@
11
<template>
22
<div class="overview">
3-
<div class="close" @click="onClose">
4-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
5-
<g opacity="0.3">
6-
<path d="M1.5 1.5L15 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
7-
<path d="M15 1.5L1.5 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
8-
</g>
9-
</svg>
10-
</div>
113
<div class="content">
12-
<p class="title">{{ title }}</p>
4+
<div class="title">
5+
{{ title }}
6+
<div class="close" @click="onClose">
7+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
8+
<g opacity="0.3">
9+
<path d="M1.5 1.5L15 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
10+
<path d="M15 1.5L1.5 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
11+
</g>
12+
</svg>
13+
</div>
14+
</div>
15+
<div class="cases">
16+
<p>Known Cases</p>
17+
<Latest :data="latest" :invert="true" />
18+
</div>
1319
</div>
1420
</div>
1521
</template>
1622

1723
<script>
24+
import Latest from '~/components/Latest'
25+
1826
export default {
1927
name: 'Overview',
28+
components: {
29+
Latest
30+
},
2031
props: {
2132
data: Object
2233
},
2334
computed: {
2435
title() {
2536
const o = this.data
2637
return o.province ? `${o.province}, ${o.country}` : o.country
38+
},
39+
latest() {
40+
return this.data.latest
2741
}
2842
},
2943
data() {
30-
return {
31-
isOpen: false
32-
}
44+
return {}
3345
},
3446
methods: {
3547
onClose() {
3648
this.$emit('close')
3749
}
38-
},
39-
mounted() {
40-
if (this.data.country) this.isOpen = true
4150
}
4251
}
4352
</script>
@@ -49,12 +58,13 @@ export default {
4958
5059
.close {
5160
position: absolute;
52-
top: 8px;
53-
right: 8px;
61+
top: 50%;
62+
right: 0;
5463
width: 16px;
5564
height: 16px;
5665
cursor: pointer;
5766
z-index: 1;
67+
transform: translateY(calc(-50% - 16px));
5868
transition: all .3s;
5969
fill: rgba(0,0,0,.5);
6070
}
@@ -65,11 +75,37 @@ export default {
6575
}
6676
6777
.title {
78+
position: relative;
6879
border-bottom: 1px solid #cccccc;
6980
margin: 32px 0 12px;
7081
padding-bottom: 8px;
7182
font-size: 32px;
83+
}
84+
85+
.cases {
86+
font-size: 24px;
7287
font-weight: 300;
88+
89+
p {
90+
margin-bottom: 8px;
91+
}
92+
93+
/deep/ .latest {
94+
position: relative;
95+
96+
ul {
97+
margin: 0;
98+
99+
li {
100+
display: inline-flex;
101+
margin-left: 12px;
102+
103+
&:first-child {
104+
margin-left: 0;
105+
}
106+
}
107+
}
108+
}
73109
}
74110
}
75111
</style>

‎pages/index.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div class="page" :class="{ 'is-open': isOpen }">
3-
<Latest />
43
<div class="map-wrapper">
54
<Map :data="data" />
65
</div>
6+
<Latest :data="latest" size="large" />
77
<Search />
88
</div>
99
</template>
@@ -22,7 +22,8 @@ export default {
2222
},
2323
computed: {
2424
...mapGetters([
25-
'data'
25+
'data',
26+
'latest'
2627
])
2728
},
2829
data() {
@@ -58,7 +59,7 @@ export default {
5859
.map-wrapper {
5960
position: relative;
6061
z-index: 1;
61-
width: 100vw;
62+
width: 100%;
6263
height: 100%;
6364
background-color: #191a1a;
6465
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;

0 commit comments

Comments
 (0)