hehongxing
3 years ago
25 changed files with 3023 additions and 0 deletions
@ -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> |
|||
File diff suppressed because it is too large
@ -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: [] |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue