LoveNav/love-nav-vue
LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HotNews update

Browse Source
This commit is contained in:
landaiqing 2023-12-21 21:08:04 +08:00
parent c4ee58e45f
commit 1fe29e35b8
3 changed files with 114 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -6,8 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" type="text/css" href="../src/assets/css/loading.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

11
src/components/hotNews/HotNews.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div> <div class="main">
<NewsCard></NewsCard>
<NewsCard></NewsCard>
<NewsCard></NewsCard> <NewsCard></NewsCard>
</div> </div>
</template> </template>
@ -30,5 +32,10 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.main{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
</style> </style>

250
src/components/hotNews/NewsCard.vue
View File

@ -1,52 +1,48 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<!-- <p class="wrapper__title">Sass.Weather</p> -->
<div class="widget"> <div class="widget">
<div class="widget__section thin-bar"> <div>
<div class="nav"> <div class="thin-bar">
<div class="nav__button nav__button-red"> <div class="nav">
<svg height="30" width="30"> <div class="nav__button nav__button-red">
<circle cx="18" cy="18" r="7.5" fill="#ff605c"></circle> <svg height="30" width="30">
</svg> <circle cx="18" cy="18" r="7.5" fill="#ff605c"></circle>
</div> </svg>
<div class="nav__button nav__button-yellow"> </div>
<svg height="30" width="30"> <div class="nav__button nav__button-yellow">
<circle cx="18" cy="18" r="7.5" fill="#ffbf45"></circle> <svg height="30" width="30">
</svg> <circle cx="18" cy="18" r="7.5" fill="#ffbf45"></circle>
</div> </svg>
<div class="nav__button nav__button-green"> </div>
<svg height="30" width="30"> <div class="nav__button nav__button-green">
<circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle> <svg height="30" width="30">
</svg> <circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
<p class="nav__title">Weather</p> </svg>
<p class="nav__title">Weather</p>
</div>
</div> </div>
</div> </div>
<p class="section__weather hour1">12:15</p> <div class="widget__section">
<br> <span class="hot-rank-1">1</span>
<p class="section__weather city1">Manchester</p> <span class="news-content"><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
<p class="temp temp1">07° </p> </div>
<img src="https://www.dropbox.com/s/p3an409zxe6f7j8/rain.svg?raw=1" alt="rain" class="wthr1"> <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>
<div class="widget__section"> <div style="text-align: end;margin-right: 10px">
<p class="section__weather hour2">13:15</p> <i class="refresh el-icon-refresh"></i>
<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> </div>
</div> </div>
</div> </div>
@ -79,8 +75,9 @@ export default {
<style scoped> <style scoped>
.wrapper { .wrapper {
margin-top: 20px; margin-top: 20px;
margin-left: 20px; margin-left: 25px;
width: 400px; width: 300px;
background: transparent;
} }
.widget, .widget,
@ -91,31 +88,37 @@ export default {
.widget { .widget {
background-color: #fff; background-color: #fff;
border-radius: 1.5rem; border-radius: 1.0rem;
box-shadow: 0 0 25px 0px rgba(0, 0, 0, 0.2);
flex-direction: column; flex-direction: column;
height: 464px; height: 540px;
margin: auto; margin: auto;
position: relative; position: relative;
width: 400px; width: 300px;
overflow: scroll;
overflow-y: hidden;
overflow-x: hidden;
flex-wrap: nowrap;
justify-content: space-between;
} }
.thin-bar { .thin-bar {
margin-top: 3rem; margin-top: 15px;
height: 30px;
} }
.widget__section { .widget__section {
border-bottom: 1.5px solid #ddd; //border-bottom: 1.5px solid #ddd;
height: 8rem; height: 30px;
width: 100%; //width: 100%;
align-items: center;
} }
#no-bar {
border-bottom: none;
}
.nav { .nav {
height: 2.8rem; height: 0px;
} }
.nav__button { .nav__button {
@ -141,107 +144,64 @@ export default {
top: -0.5em; top: -0.5em;
} }
.nav__title, .nav__title
.section__weather, {
.temp {
color: #444; color: #444;
position: absolute; position: absolute;
} }
.refresh{
.hour1, //font-weight: bold;
.hour2, font-size: 18px
.hour3,
.hour4 {
font-size: 1.25rem;
left: 0.9em;
} }
.refresh:hover{
.hour1 { font-size: 20px;
top: 3.85em; color: #999ba5;
} }
.hot-rank-1 {
.hour2 { color: #fff;
top: 9.15em; background: #f1404b;
border-radius: 4px;
display: inline-block;
text-align: center;
} }
.hot-rank-2 {
color: #fff;
background: #c56831;
.hour3 { border-radius: 4px;
top: 14.35em; display: inline-block;
text-align: center;
} }
.hot-rank-3 {
color: #fff;
background: #b89e2c;
.hour4 { border-radius: 4px;
top: 19.5em; display: inline-block;
text-align: center;
} }
.hot-rank-4 {
color: #fff;
background: rgba(124,124,124,.3);
.city1, border-radius: 4px;
.city2, display: inline-block;
.city3, text-align: center;
.city4 {
font-size: 1.75rem;
left: 0.65em;
} }
.hot-rank-1 ,.hot-rank-2, .hot-rank-3, .hot-rank-4{
.city1 { margin-left: 15px;
top: 1.4em; width: 30px;
height: 20px;
} }
.news-content{
.city2 { margin-left:10px;
top: 5.2em; height: 20px;
overflow: scroll;
cursor: pointer;
} }
a:hover{
.city3 { color: coral;
top: 8.9em; font-size: 16px;
} font-weight: bold;
.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;
} }
</style> </style>