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

update

Browse Source
This commit is contained in:
landaiqing 2023-12-21 18:23:20 +08:00
parent 19d5023716
commit c4ee58e45f
7 changed files with 5553 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/index.html
View File

@ -6,11 +6,10 @@
<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>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>

1
src/App.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<router-view/> <router-view/>
</template> </template>
<style> <style>
/*#app { /*#app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;

5290
src/assets/css/all.css Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,19 +1,20 @@
<template> <template>
<div> <div>
666 <NewsCard></NewsCard>
</div> </div>
</template> </template>
<script> <script>
import {getHotNews} from "@/api/api"; import {getHotNews} from "@/api/api";
import NewsCard from "@/components/hotNews/NewsCard.vue";
export default { export default {
name: "HotNews", name: "HotNews",
components: {}, components: {NewsCard},
data() { data() {
return {} return {}
}, },
mounted() { mounted() {
this.getNews(); // this.getNews();
}, },
created() { created() {

247
src/components/hotNews/NewsCard.vue Normal file
View File

@ -0,0 +1,247 @@
<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>
<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>
<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>
</div>
</div>
</template>
<script>
export default {
name:"NewsCard",
props:{
news:Object
},
data() {
return {
}},
mounted() {
},
created() {
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
.wrapper {
margin-top: 20px;
margin-left: 20px;
width: 400px;
}
.widget,
.widget__section {
display: flex;
overflow: hidden;
}
.widget {
background-color: #fff;
border-radius: 1.5rem;
box-shadow: 0 0 25px 0px rgba(0, 0, 0, 0.2);
flex-direction: column;
height: 464px;
margin: auto;
position: relative;
width: 400px;
}
.thin-bar {
margin-top: 3rem;
}
.widget__section {
border-bottom: 1.5px solid #ddd;
height: 8rem;
width: 100%;
}
#no-bar {
border-bottom: none;
}
.nav {
height: 2.8rem;
}
.nav__button {
position: absolute;
top: 0.5rem;
}
.nav__button-red {
left: 0.5rem;
}
.nav__button-yellow {
left: 2rem;
}
.nav__button-green {
left: 3.5rem;
}
.nav__title {
font-size: 1.1rem;
left: 6em;
top: -0.5em;
}
.nav__title,
.section__weather,
.temp {
color: #444;
position: absolute;
}
.hour1,
.hour2,
.hour3,
.hour4 {
font-size: 1.25rem;
left: 0.9em;
}
.hour1 {
top: 3.85em;
}
.hour2 {
top: 9.15em;
}
.hour3 {
top: 14.35em;
}
.hour4 {
top: 19.5em;
}
.city1,
.city2,
.city3,
.city4 {
font-size: 1.75rem;
left: 0.65em;
}
.city1 {
top: 1.4em;
}
.city2 {
top: 5.2em;
}
.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;
}
</style>

2
src/components/setting/layout/SettingLeftSide.vue
View File

@ -3,7 +3,7 @@
<div class="side-wrapper"> <div class="side-wrapper">
<!-- <div class="side-title">Apps</div>--> <!-- <div class="side-title">Apps</div>-->
<div class="side-menu"> <div class="side-menu">
<router-link to="/system"> <router-link to="/admin">
<svg viewBox="0 0 512 512"> <svg viewBox="0 0 512 512">
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor"> <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path> <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path>

6
src/router/index.js
View File

@ -46,13 +46,13 @@ const routes = [
}, },
{ {
path: '/settings', path: '/settings',
redirect: '/system', redirect: '/admin',
name: 'settings', name: 'settings',
component: settings, component: settings,
children: [ children: [
{ {
path: '/system', path: '/admin',
name: '/system', name: '/admin',
redirect: '/appearance', redirect: '/appearance',
component: systemSettings, component: systemSettings,
children:[ children:[