diff --git a/src/components/dashboard/weather.js b/src/components/dashboard/weather.js index 7012bb4..5fab98c 100644 --- a/src/components/dashboard/weather.js +++ b/src/components/dashboard/weather.js @@ -6,7 +6,7 @@ function Weather(props) { const {city, icon, dateTime, temperature, name} = props return
{name}
diff --git a/src/components/dashboard/weather.less b/src/components/dashboard/weather.less index 0547c34..c03a2ad 100644 --- a/src/components/dashboard/weather.less +++ b/src/components/dashboard/weather.less @@ -1,20 +1,41 @@ @import "../vars.less"; -.weather{ + +.weather { color: #fff; - .left{ - .icon{ + height: 204px; + padding: 24px; + justify-content: space-between; + display: flex; - } - .name{ + .left { + display: flex; + flex-direction: column; + width: 50%; + .icon { + width: 64px; + height: 64px; + background-position: center; + background-size: cover; } + + .name {} } - .right{ - .temperature{ + .right { + display: flex; + flex-direction: column; + width: 50%; + .temperature { + font-size: 36px; + text-align: right; } - .description{ + .description { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: right; } } } diff --git a/src/index.html b/src/index.html index 72385cf..d021b1e 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,7 @@