@ -0,0 +1,5 @@ |
|||||
|
node_modules |
||||
|
.DS_Store |
||||
|
dist |
||||
|
dist-ssr |
||||
|
*.local |
@ -0,0 +1,13 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<link rel="icon" href="/favicon.ico" /> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Vite App</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<script type="module" src="/src/main.ts"></script> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,21 @@ |
|||||
|
{ |
||||
|
"name": "nanjing", |
||||
|
"version": "0.0.0", |
||||
|
"scripts": { |
||||
|
"dev": "vite", |
||||
|
"build": "vite build" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"element-plus": "^1.2.0-beta.4", |
||||
|
"typescript": "^4.5.2", |
||||
|
"vue": "^3.0.4", |
||||
|
"vue-router": "^4.0.12" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vue/compiler-sfc": "^3.0.4", |
||||
|
"less": "^4.1.2", |
||||
|
"less-loader": "^10.2.0", |
||||
|
"style-resources-loader": "^1.4.1", |
||||
|
"vite": "^1.0.0-rc.13" |
||||
|
} |
||||
|
} |
After Width: | Height: | Size: 4.2 KiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 5.2 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,19 @@ |
|||||
|
<template> |
||||
|
<Header /> |
||||
|
<router-view /> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import Header from './components/Shared/Header.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'App', |
||||
|
components: { Header }, |
||||
|
setup() { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
@import "element-plus/theme-chalk/index.css"; |
||||
|
</style> |
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,16 @@ |
|||||
|
<template> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "app", |
||||
|
setup() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
</style> |
@ -0,0 +1,15 @@ |
|||||
|
<template> |
||||
|
<div class=""></div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
export default { |
||||
|
name: 'MicrowaveRadiation', |
||||
|
setup() { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
|
||||
|
</style> |
@ -0,0 +1,89 @@ |
|||||
|
<template> |
||||
|
<div class="header"> |
||||
|
<div class="logo"> |
||||
|
<img src="/images/logo.png" /> |
||||
|
南京生态环境评估决策平台 |
||||
|
</div> |
||||
|
<div class="nav"> |
||||
|
<div class="nav-item" @click="onNavClick('MicrowaveRadiation')" :class="{'active': currentPath === 'MicrowaveRadiation'}">微波辐射计</div> |
||||
|
<div class="nav-item" @click="onNavClick('RamanLidar')" :class="{'active': currentPath === 'RamanLidar'}">拉曼激光雷达</div> |
||||
|
<div class="nav-item" @click="onNavClick('SynergyEvaluation')" :class="{'active': currentPath === 'SynergyEvaluation'}">生态环境效应评估</div> |
||||
|
<div class="nav-item" @click="onNavClick('DecisionSupport')" :class="{'active': currentPath === 'DecisionSupport'}">决策支持</div> |
||||
|
<div class="nav-item" @click="onNavClick('SystemManagement')" :class="{'active': currentPath === 'SystemManagement'}">系统管理</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { reactive, onMounted, toRefs } from "vue"; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Header', |
||||
|
setup() { |
||||
|
const router = useRouter(); |
||||
|
|
||||
|
let options = reactive({ |
||||
|
currentPath: 'MicrowaveRadiation' |
||||
|
}) |
||||
|
|
||||
|
const onNavClick = (path) => { |
||||
|
options.currentPath = path; |
||||
|
router.push({path: path}); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
...toRefs(options), |
||||
|
onNavClick |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.header { |
||||
|
width: 100%; |
||||
|
height: 84px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #ffffff; |
||||
|
.logo { |
||||
|
margin-left: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
letter-spacing: 2px; |
||||
|
font-size: 30px; |
||||
|
font-weight: bold; |
||||
|
|
||||
|
img { |
||||
|
width: 53px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
.nav { |
||||
|
margin: 17px 0 0 50px; |
||||
|
display: flex; |
||||
|
font-size: 22px; |
||||
|
.nav-item { |
||||
|
width: 170px; |
||||
|
height: 66px; |
||||
|
margin: 0 25px; |
||||
|
line-height: 50px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:nth-of-type(3) { |
||||
|
width: 230px; |
||||
|
&.active { |
||||
|
background: url("/images/nav-bg-big.png") no-repeat center/cover; |
||||
|
} |
||||
|
} |
||||
|
&.active { |
||||
|
color: #ffffff; |
||||
|
background: url("/images/nav-bg.png") no-repeat center/cover; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,21 @@ |
|||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
height: 100vh; |
||||
|
background: url("/images/bg.png") no-repeat top center; |
||||
|
} |
||||
|
|
||||
|
#app { |
||||
|
font-family: '微软雅黑'; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
color: #222222; |
||||
|
font-size: 16px; |
||||
|
} |
@ -0,0 +1,7 @@ |
|||||
|
import { createApp } from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import router from './router/index' |
||||
|
import ElementPlus from 'element-plus' |
||||
|
import './index.less' |
||||
|
|
||||
|
createApp(App).use(router).use(ElementPlus).mount('#app') |
@ -0,0 +1,17 @@ |
|||||
|
import {createRouter, createWebHashHistory} from 'vue-router'; |
||||
|
|
||||
|
const routes: any = [ |
||||
|
{ path: '/', redirect: '/MicrowaveRadiation'}, |
||||
|
{ path: '/MicrowaveRadiation', component: () => import('../components/MicrowaveRadiation.vue') }, |
||||
|
{ path: '/RamanLidar', component: () => import('../components/RamanLidar.vue') }, |
||||
|
{ path: '/SynergyEvaluation', component: () => import('../components/SynergyEvaluation.vue') }, |
||||
|
{ path: '/DecisionSupport', component: () => import('../components/DecisionSupport.vue') }, |
||||
|
{ path: '/SystemManagement', component: () => import('../components/SystemManagement.vue') } |
||||
|
]; |
||||
|
|
||||
|
const router = createRouter({ |
||||
|
history: createWebHashHistory(), |
||||
|
routes, |
||||
|
linkActiveClass: 'active' |
||||
|
}) |
||||
|
export default router; |
@ -0,0 +1,5 @@ |
|||||
|
declare module "*.vue"{ |
||||
|
import { ComponentOptions} from "vue" |
||||
|
const componentOptions: ComponentOptions |
||||
|
export default componentOptions |
||||
|
} |
@ -0,0 +1,16 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"target": "esnext", |
||||
|
"module": "esnext", |
||||
|
"moduleResolution": "node", |
||||
|
"strict": false, |
||||
|
"jsx": "preserve", |
||||
|
"allowJs": true, |
||||
|
"allowSyntheticDefaultImports": true, |
||||
|
"sourceMap": true, |
||||
|
"resolveJsonModule": true, |
||||
|
"esModuleInterop": true, |
||||
|
"lib": ["esnext", "dom"] |
||||
|
}, |
||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] |
||||
|
} |
@ -0,0 +1,14 @@ |
|||||
|
module.exports = { |
||||
|
pages: { |
||||
|
index: { |
||||
|
entry: 'src/main.ts' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
pluginOptions: { |
||||
|
'style-resources-loader': { |
||||
|
preProcessor: 'less', |
||||
|
patterns: [] |
||||
|
} |
||||
|
} |
||||
|
} |