HotNews update
This commit is contained in:
parent
c4ee58e45f
commit
1fe29e35b8
@ -6,8 +6,6 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="stylesheet" type="text/css" href="../src/assets/css/loading.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="main">
|
||||
<NewsCard></NewsCard>
|
||||
<NewsCard></NewsCard>
|
||||
<NewsCard></NewsCard>
|
||||
</div>
|
||||
</template>
|
||||
@ -30,5 +32,10 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.main{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
@ -1,52 +1,48 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- <p class="wrapper__title">Sass.Weather</p> -->
|
||||
<div class="widget">
|
||||
<div class="widget__section thin-bar">
|
||||
<div class="nav">
|
||||
<div class="nav__button nav__button-red">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#ff605c"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav__button nav__button-yellow">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#ffbf45"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav__button nav__button-green">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
|
||||
</svg>
|
||||
<p class="nav__title">Weather</p>
|
||||
<div>
|
||||
<div class="thin-bar">
|
||||
<div class="nav">
|
||||
<div class="nav__button nav__button-red">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#ff605c"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav__button nav__button-yellow">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#ffbf45"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav__button nav__button-green">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
|
||||
</svg>
|
||||
<p class="nav__title">Weather</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="section__weather hour1">12:15</p>
|
||||
<br>
|
||||
<p class="section__weather city1">Manchester</p>
|
||||
<p class="temp temp1">07° </p>
|
||||
<img src="https://www.dropbox.com/s/p3an409zxe6f7j8/rain.svg?raw=1" alt="rain" class="wthr1">
|
||||
<div class="widget__section">
|
||||
<span class="hot-rank-1">1</span>
|
||||
<span class="news-content"><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<span class="hot-rank-2">2</span>
|
||||
<span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<span class="hot-rank-3">3</span>
|
||||
<span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
|
||||
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<span class="hot-rank-4">4</span>
|
||||
<span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<p class="section__weather hour2">13:15</p>
|
||||
<br>
|
||||
<p class="section__weather city2">Stockholm</p>
|
||||
<p class="temp temp2">01° </p>
|
||||
<img src="https://www.dropbox.com/s/xxa77jagd78m9li/snows.svg?raw=1" alt="snow" class="wthr2">
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<p class="section__weather hour3">21:15</p>
|
||||
<br>
|
||||
<p class="section__weather city3">Osaka</p>
|
||||
<p class="temp temp3">12° </p>
|
||||
<img src="https://www.dropbox.com/s/ckcsvxjafdixsr3/wind.svg?raw=1" alt="wind" class="wthr3">
|
||||
</div>
|
||||
<div class="widget__section" id="no-bar">
|
||||
<p class="section__weather hour4">07:15</p>
|
||||
<br>
|
||||
<p class="section__weather city4">Florida</p>
|
||||
<p class="temp temp4">22°</p>
|
||||
<img src="https://www.dropbox.com/s/cnypl11sq85f44v/sunny.svg?raw=1" alt="sun" class="wthr4">
|
||||
<div style="text-align: end;margin-right: 10px">
|
||||
<i class="refresh el-icon-refresh"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -79,8 +75,9 @@ export default {
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
width: 400px;
|
||||
margin-left: 25px;
|
||||
width: 300px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.widget,
|
||||
@ -91,31 +88,37 @@ export default {
|
||||
|
||||
.widget {
|
||||
background-color: #fff;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: 0 0 25px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 1.0rem;
|
||||
flex-direction: column;
|
||||
height: 464px;
|
||||
height: 540px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
width: 300px;
|
||||
overflow: scroll;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.thin-bar {
|
||||
margin-top: 3rem;
|
||||
margin-top: 15px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.widget__section {
|
||||
border-bottom: 1.5px solid #ddd;
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
//border-bottom: 1.5px solid #ddd;
|
||||
height: 30px;
|
||||
//width: 100%;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
#no-bar {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
height: 2.8rem;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.nav__button {
|
||||
@ -141,107 +144,64 @@ export default {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
.nav__title,
|
||||
.section__weather,
|
||||
.temp {
|
||||
.nav__title
|
||||
{
|
||||
color: #444;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hour1,
|
||||
.hour2,
|
||||
.hour3,
|
||||
.hour4 {
|
||||
font-size: 1.25rem;
|
||||
left: 0.9em;
|
||||
.refresh{
|
||||
//font-weight: bold;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.hour1 {
|
||||
top: 3.85em;
|
||||
.refresh:hover{
|
||||
font-size: 20px;
|
||||
color: #999ba5;
|
||||
}
|
||||
|
||||
.hour2 {
|
||||
top: 9.15em;
|
||||
.hot-rank-1 {
|
||||
color: #fff;
|
||||
background: #f1404b;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.hot-rank-2 {
|
||||
color: #fff;
|
||||
background: #c56831;
|
||||
|
||||
.hour3 {
|
||||
top: 14.35em;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.hot-rank-3 {
|
||||
color: #fff;
|
||||
background: #b89e2c;
|
||||
|
||||
.hour4 {
|
||||
top: 19.5em;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.hot-rank-4 {
|
||||
color: #fff;
|
||||
background: rgba(124,124,124,.3);
|
||||
|
||||
.city1,
|
||||
.city2,
|
||||
.city3,
|
||||
.city4 {
|
||||
font-size: 1.75rem;
|
||||
left: 0.65em;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.city1 {
|
||||
top: 1.4em;
|
||||
.hot-rank-1 ,.hot-rank-2, .hot-rank-3, .hot-rank-4{
|
||||
margin-left: 15px;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.city2 {
|
||||
top: 5.2em;
|
||||
.news-content{
|
||||
margin-left:10px;
|
||||
height: 20px;
|
||||
overflow: scroll;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.city3 {
|
||||
top: 8.9em;
|
||||
}
|
||||
|
||||
.city4 {
|
||||
top: 12.6em;
|
||||
}
|
||||
|
||||
.wthr1,
|
||||
.wthr2,
|
||||
.wthr3,
|
||||
.wthr4 {
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.wthr1 {
|
||||
top: 4.7rem;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.wthr2 {
|
||||
top: 11.25rem;
|
||||
width: 2.65rem;
|
||||
}
|
||||
|
||||
.wthr3 {
|
||||
top: 17.8rem;
|
||||
width: 2.8rem;
|
||||
}
|
||||
|
||||
.wthr4 {
|
||||
top: 24.2rem;
|
||||
width: 2.8rem;
|
||||
}
|
||||
|
||||
.temp {
|
||||
font-size: 2.6rem;
|
||||
right: 2.1em;
|
||||
}
|
||||
|
||||
.temp1 {
|
||||
top: 0.7em;
|
||||
}
|
||||
|
||||
.temp2 {
|
||||
top: 3.3em;
|
||||
}
|
||||
|
||||
.temp3 {
|
||||
bottom: 2.2em;
|
||||
}
|
||||
|
||||
.temp4 {
|
||||
bottom: -0.25em;
|
||||
a:hover{
|
||||
color: coral;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user