diff --git a/04.系统编码/Frontend/public/images/line.png b/04.系统编码/Frontend/public/images/line.png new file mode 100644 index 0000000..260bd4b Binary files /dev/null and b/04.系统编码/Frontend/public/images/line.png differ diff --git a/04.系统编码/Frontend/public/images/menu-bg.png b/04.系统编码/Frontend/public/images/menu-bg.png new file mode 100644 index 0000000..74fe617 Binary files /dev/null and b/04.系统编码/Frontend/public/images/menu-bg.png differ diff --git a/04.系统编码/Frontend/public/images/nav-bg1.png b/04.系统编码/Frontend/public/images/nav-bg1.png deleted file mode 100644 index eda2462..0000000 Binary files a/04.系统编码/Frontend/public/images/nav-bg1.png and /dev/null differ diff --git a/04.系统编码/Frontend/src/components/Login.vue b/04.系统编码/Frontend/src/components/Login.vue index f096a88..8ce9fa5 100644 --- a/04.系统编码/Frontend/src/components/Login.vue +++ b/04.系统编码/Frontend/src/components/Login.vue @@ -12,7 +12,7 @@ </div> - + </div> diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue index d2f4111..907a54b 100644 --- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue @@ -1,12 +1,51 @@ <template> - <div class=""></div> + <div class="tabs"> + <div class="tab-item" @click="onTabClick('垂直廓线')" :class="{'active': currentTab === '垂直廓线'}">垂直廓线</div> + <div class="tab-item" @click="onTabClick('对流指数对流指数对流指数')" :class="{'active': currentTab === '对流指数对流指数对流指数'}">对流指数对流指数对流指数</div> + <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">T-logP图</div> + <div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}">BP反演产品</div> + </div> + <div class="main"> + <div class="menu panel"> + <div class="menu-item"> + <h2 class="tip">区域选择</h2> + <el-row :gutter="12"> + <el-col :span="8"><span class="active">江宁</span></el-col> + <el-col :span="8"><span>六合</span></el-col> + <el-col :span="8"><span>浦口</span></el-col> + <el-col :span="8"><span>高淳</span></el-col> + <el-col :span="8"><span>溧水</span></el-col> + </el-row> + </div> + <div class="menu-item"> + <h2 class="tip">要素选择</h2> + <el-row :gutter="12"> + <el-col :span="8"><span class="active">温度</span></el-col> + <el-col :span="8"><span>湿度</span></el-col> + </el-row> + </div> + </div> + <div class="container panel"></div> + </div> </template> <script lang="ts"> +import { reactive, toRefs } from 'vue' export default { name: 'MicrowaveRadiation', setup() { - return {} + let options = reactive({ + currentTab: '垂直廓线' + }) + + const onTabClick = (name) => { + options.currentTab = name; + } + + return { + ...toRefs(options), + onTabClick + } } } </script> diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation/BPInversion.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation/BPInversion.vue new file mode 100644 index 0000000..e69de29 diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation/ConvectiveIndex.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation/ConvectiveIndex.vue new file mode 100644 index 0000000..e69de29 diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation/Index.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation/Index.vue new file mode 100644 index 0000000..9edf23a --- /dev/null +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation/Index.vue @@ -0,0 +1,36 @@ +<template> + <Tabs /> + <div class="main"> + <div class="menu panel"> + <h2>区域选择</h2> + </div> + <div class="container panel"></div> + </div> +</template> + +<script lang="ts"> + import { reactive, toRefs } from 'vue' + import Tabs from './Tabs.vue' + + export default { + name: 'MicrowaveRadiation', + components: {Tabs}, + setup() { + let options = reactive({ + currentTab: '垂直廓线' + }) + + const onTabClick = (name) => { + options.currentTab = name; + } + + return { + ...toRefs(options), + onTabClick + } + } + } +</script> +<style lang="less" scoped> + +</style> diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation/TLogP.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation/TLogP.vue new file mode 100644 index 0000000..e69de29 diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation/Tabs.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation/Tabs.vue new file mode 100644 index 0000000..423d255 --- /dev/null +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation/Tabs.vue @@ -0,0 +1,24 @@ +<template> + <div class="tabs"> + <router-link class="tab-item" to="/MicrowaveRadiation/VerticalProfile">垂直廓线</router-link> + <router-link class="tab-item" to="/MicrowaveRadiation/ConvectiveIndex">对流指数对流指数对流指数</router-link> + <router-link class="tab-item" to="/MicrowaveRadiation/TLogP">T-logP图</router-link> + <router-link class="tab-item" to="/MicrowaveRadiation/BPInversion">BP反演产品</router-link> + </div> + <router-view></router-view> +</template> + +<script lang="ts"> +import { reactive, toRefs, onMounted} from 'vue' +export default { + name: "app", + setup() { + return { + + } + } +} +</script> + +<style lang="less" scoped> +</style> diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation/VerticalProfile.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation/VerticalProfile.vue new file mode 100644 index 0000000..e69de29 diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less index 0da28bc..8c01073 100644 --- a/04.系统编码/Frontend/src/index.less +++ b/04.系统编码/Frontend/src/index.less @@ -5,6 +5,12 @@ a { display: block; + color: #222222; + text-decoration: none; +} + +ul, li { + list-style: none; } body { @@ -19,3 +25,101 @@ body { color: #222222; font-size: 16px; } + +.tabs { + width: 100%; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + font-size: 22px; + background-color: rgba(21, 81, 136, 0.46); + + .tab-item { + margin: 0 100px; + position: relative; + cursor: pointer; + color: #ffffff; + + &::after { + content: ''; + width: 100%; + height: 4px; + display: block; + position: absolute; + left: 0; + bottom: -10px; + // background: linear-gradient(to right, #ffffff 0%,#eeffff 10%, #99fdff 30%, #27fbff 50%, #99fdff 70%, #eeffff 90%,#ffffff 100%); + } + + &.active { + color: #23FBFF; + + &::after { + background: url("/images/line.png") no-repeat center/cover; + } + } + } +} + +.main { + width: 100%; + height: calc(~"100vh - 144px"); + display: flex; + + .panel { + height: calc(~"100% - 20px"); + background-color: #ffffff; + border-radius: 10px; + } + + .menu { + width: 250px; + padding: 20px; + height: calc(~"100% - 60px"); + border-radius: 0 10px 10px 0; + + .tip { + height: 32px; + padding-left: 12px; + line-height: 32px; + color: #ffffff; + font-size: 18px; + font-weight: bold; + background: url("/images/menu-bg.png") no-repeat center/cover; + } + + .menu-item { + .el-row { + margin-top: 20px; + .el-col { + span { + width: 100%; + height: 30px; + padding: 0; + display: block; + line-height: 28px; + text-align: center; + margin: 0 0 10px 0; + font-size: 16px; + color: #666666; + border-radius: 5px; + cursor: pointer; + border: 1px solid #ECF4FF; + background-color: #ECF4FF; + + &.active { + border-color: #498DF0; + } + } + } + } + } + } + + .container { + width: calc(~"100% - 290px"); + margin-left: 20px; + } +} \ No newline at end of file diff --git a/04.系统编码/Frontend/src/router/index.ts b/04.系统编码/Frontend/src/router/index.ts index efb2cba..354cd6d 100644 --- a/04.系统编码/Frontend/src/router/index.ts +++ b/04.系统编码/Frontend/src/router/index.ts @@ -1,8 +1,18 @@ import {createRouter, createWebHashHistory} from 'vue-router'; const routes: any = [ - { path: '/', redirect: '/Login'}, - + { path: '/', redirect: '/MicrowaveRadiation'}, + // { + // path: '/MicrowaveRadiation', + // component: () => import('../components/MicrowaveRadiation/Index.vue'), + // children: [ + // { path: '/MicrowaveRadiation', redirect: '/MicrowaveRadiation/VerticalProfile' }, + // { path: 'VerticalProfile', component: () => import('./../components/MicrowaveRadiation/VerticalProfile.vue') }, + // { path: 'ConvectiveIndex', component: () => import('./../components/MicrowaveRadiation/ConvectiveIndex.vue') }, + // { path: 'TLogP', component: () => import('./../components/MicrowaveRadiation/TLogP.vue') }, + // { path: 'BPInversion', component: () => import('./../components/MicrowaveRadiation/BPInversion.vue') } + // ] + // }, { path: '/MicrowaveRadiation', component: () => import('../components/MicrowaveRadiation.vue') }, { path: '/RamanLidar', component: () => import('../components/RamanLidar.vue') }, { path: '/SynergyEvaluation', component: () => import('../components/SynergyEvaluation.vue') },