NanJingLamanRadarProject/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue

<template>
    <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() {
            let options = reactive({
                currentTab: '垂直廓线'
            })

            const onTabClick = (name) => {
                options.currentTab = name;
            }

            return {
                ...toRefs(options),
                onTabClick
            }
        }
    }
</script>
<style lang="less" scoped>
    
</style>