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') },