commit

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>

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>

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>

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;
+    }
+}

04.系统编码/Frontend/src/router/index.ts

@@ -2,6 +2,17 @@ import {createRouter, createWebHashHistory} from 'vue-router';
 
 const routes: any = [
     { 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') },