diff --git a/04.系统编码/Frontend/public/images/next-btn.png b/04.系统编码/Frontend/public/images/next-btn.png
new file mode 100644
index 0000000..c56b69b
Binary files /dev/null and b/04.系统编码/Frontend/public/images/next-btn.png differ
diff --git a/04.系统编码/Frontend/public/images/picture.png b/04.系统编码/Frontend/public/images/picture.png
new file mode 100644
index 0000000..29ac1da
Binary files /dev/null and b/04.系统编码/Frontend/public/images/picture.png differ
diff --git a/04.系统编码/Frontend/public/images/prev-btn.png b/04.系统编码/Frontend/public/images/prev-btn.png
new file mode 100644
index 0000000..80ac782
Binary files /dev/null and b/04.系统编码/Frontend/public/images/prev-btn.png differ
diff --git a/04.系统编码/Frontend/public/images/save.png b/04.系统编码/Frontend/public/images/save.png
new file mode 100644
index 0000000..983d2cc
Binary files /dev/null and b/04.系统编码/Frontend/public/images/save.png differ
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 127dd2c..a04d047 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -4,9 +4,9 @@
             垂直廓线
             <img src="/images/line.png" v-if="currentTab === '垂直廓线'" />
         </div>
-        <div class="tab-item" @click="onTabClick('对流指数对流指数对流指数')" :class="{'active': currentTab === '对流指数对流指数对流指数'}">
-            对流指数对流指数对流指数
-            <img src="/images/line.png" v-if="currentTab === '对流指数对流指数对流指数'" />
+        <div class="tab-item" @click="onTabClick('对流指数')" :class="{'active': currentTab === '对流指数'}">
+            对流指数
+            <img src="/images/line.png" v-if="currentTab === '对流指数'" />
         </div>
         <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">
             T-logP图
@@ -29,20 +29,27 @@
                     <el-col :span="8"><span @click="onRegionClick('溧水')" :class="{'active': currentRegion === '溧水'}">溧水</span></el-col>
                 </el-row>
             </div>
-            <div class="menu-item">
+            <div class="menu-item" v-if="currentTab === '垂直廓线'">
                 <h2 class="tip">要素选择</h2>
                 <el-row :gutter="12">
                     <el-col :span="8"><span @click="onElementClick('温度')" :class="{'active': currentElement === '温度'}">温度</span></el-col>
                     <el-col :span="8"><span @click="onElementClick('湿度')" :class="{'active': currentElement === '湿度'}">湿度</span></el-col>
                 </el-row>
             </div>
+            <div class="menu-item" v-if="currentTab === '对流指数'">
+                <h2 class="tip">要素选择</h2>
+                <el-row :gutter="12">
+                    <el-col :span="8"><span @click="onCategoryClick('CAPE')" :class="{'active': currentCategory === 'CAPE'}">CAPE</span></el-col>
+                    <el-col :span="8"><span @click="onCategoryClick('CIN')" :class="{'active': currentCategory === 'CIN'}">CIN</span></el-col>
+                </el-row>
+            </div>
         </div>
         <div class="container panel">
             <div class="toolbar">
                 <div class="times">
-                    <div class="time-item" v-for="(time, index) in times" :key="index" :class="time.name">
+                    <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
                         <span class="hour">{{time.hour}}</span>
-                        <span class="minute" :class="{'active': currentTime === time.date}" @click="onTimeClick(time)">{{time.minute}}</span>
+                        <span class="minute" @click="onTimeClick(time)">{{time.minute}}</span>
                     </div>
                 </div>
                 <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker">
@@ -69,6 +76,21 @@
                     <span>下载动画</span>
                 </div>
             </div>
+            <div class="picture-view">
+                <span class="arrow arrow-prev"><img src="/images/prev-btn.png" /></span>
+                <span class="arrow arrow-next"><img src="/images/next-btn.png" /></span>
+                <span class="save-btn"><img src="/images/save.png" /></span>
+                <h2 class="title">2021.11.21 10:42 Temperature</h2>
+                <div class="picture">
+                    <el-image
+                    src="/images/picture.png"
+                    :preview-src-list="srcList"
+                    :initial-index="1"
+                    fit="contain"
+                    >
+                    </el-image>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -84,6 +106,7 @@
                 currentTab: '垂直廓线',
                 currentRegion: '江宁',
                 currentElement: '温度',
+                currentCategory: 'CAPE',
                 date: new Date(),
                 currentHour: '10',
                 hours: [{
@@ -94,7 +117,8 @@
                     label: '11'
                 }],
                 times: [],
-                currentTime: null
+                currentTime: null,
+                srcList: ['/images/picture.png']
             })
 
             onMounted(() => {
@@ -109,8 +133,12 @@
                 options.currentRegion = region;
             }
 
-            const onElementClick = (region) => {
-                options.currentElement = region;
+            const onElementClick = (element) => {
+                options.currentElement = element;
+            }
+
+            const onCategoryClick = (category) => {
+                options.currentCategory = category;
             }
 
             const initTimes = () => {
@@ -145,6 +173,7 @@
                 onTabClick,
                 onRegionClick,
                 onElementClick,
+                onCategoryClick,
                 onTimeClick
             }
         }
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index e69de29..0a46048 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -0,0 +1,184 @@
+<template>
+    <div class="tabs">
+        <div class="tab-item" @click="onTabClick('垂直廓线')" :class="{'active': currentTab === '垂直廓线'}">
+            垂直廓线
+            <img src="/images/line.png" v-if="currentTab === '垂直廓线'" />
+        </div>
+        <div class="tab-item" @click="onTabClick('对流指数')" :class="{'active': currentTab === '对流指数'}">
+            对流指数
+            <img src="/images/line.png" v-if="currentTab === '对流指数'" />
+        </div>
+        <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">
+            T-logP图
+            <img src="/images/line.png" v-if="currentTab === 'T-logP图'" />
+        </div>
+        <div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}">
+            BP反演产品
+            <img src="/images/line.png" v-if="currentTab === '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 @click="onRegionClick('江宁')" :class="{'active': currentRegion === '江宁'}">江宁</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('六合')" :class="{'active': currentRegion === '六合'}">六合</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('浦口')" :class="{'active': currentRegion === '浦口'}">浦口</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('高淳')" :class="{'active': currentRegion === '高淳'}">高淳</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('溧水')" :class="{'active': currentRegion === '溧水'}">溧水</span></el-col>
+                </el-row>
+            </div>
+            <div class="menu-item" v-if="currentTab === '垂直廓线'">
+                <h2 class="tip">要素选择</h2>
+                <el-row :gutter="12">
+                    <el-col :span="8"><span @click="onElementClick('温度')" :class="{'active': currentElement === '温度'}">温度</span></el-col>
+                    <el-col :span="8"><span @click="onElementClick('湿度')" :class="{'active': currentElement === '湿度'}">湿度</span></el-col>
+                </el-row>
+            </div>
+            <div class="menu-item" v-if="currentTab === '对流指数'">
+                <h2 class="tip">要素选择</h2>
+                <el-row :gutter="12">
+                    <el-col :span="8"><span @click="onCategoryClick('CAPE')" :class="{'active': currentCategory === 'CAPE'}">CAPE</span></el-col>
+                    <el-col :span="8"><span @click="onCategoryClick('CIN')" :class="{'active': currentCategory === 'CIN'}">CIN</span></el-col>
+                </el-row>
+            </div>
+        </div>
+        <div class="container panel">
+            <div class="toolbar">
+                <div class="times">
+                    <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
+                        <span class="hour">{{time.hour}}</span>
+                        <span class="minute" @click="onTimeClick(time)">{{time.minute}}</span>
+                    </div>
+                </div>
+                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker">
+                </el-date-picker>
+                <div class="control-btn">
+                    <span><img src="/images/prev.png" /></span>
+                    <span><img src="/images/next.png" /></span>
+                </div>
+                <el-select v-model="currentHour" placeholder="">
+                    <el-option
+                    v-for="item in hours"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    >
+                    </el-option>
+                </el-select>
+                <p class="unit">时</p>
+                <div class="refresh-btn">
+                    <img src="/images/refresh.png" />
+                </div>
+                <div class="btns-group">
+                    <span>播放动画</span>
+                    <span>下载动画</span>
+                </div>
+            </div>
+            <div class="picture-view">
+                <span class="arrow arrow-prev"><img src="/images/prev-btn.png" /></span>
+                <span class="arrow arrow-next"><img src="/images/next-btn.png" /></span>
+                <span class="save-btn"><img src="/images/save.png" /></span>
+                <h2 class="title">2021.11.21 10:42 Temperature</h2>
+                <div class="picture">
+                    <el-image
+                    src="/images/picture.png"
+                    :preview-src-list="srcList"
+                    :initial-index="1"
+                    fit="contain"
+                    >
+                    </el-image>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { onMounted, reactive, toRefs } from 'vue';
+    import moment from "moment";
+    
+    export default {
+        name: 'RamanLidar',
+        setup() {
+            let options = reactive({
+                currentTab: '垂直廓线',
+                currentRegion: '江宁',
+                currentElement: '温度',
+                currentCategory: 'CAPE',
+                date: new Date(),
+                currentHour: '10',
+                hours: [{
+                    value: '10',
+                    label: '10'
+                }, {
+                    value: '11',
+                    label: '11'
+                }],
+                times: [],
+                currentTime: null,
+                srcList: ['/images/picture.png']
+            })
+
+            onMounted(() => {
+                initTimes();
+            })
+            
+            const onTabClick = (name) => {
+                options.currentTab = name;
+            }
+
+            const onRegionClick = (region) => {
+                options.currentRegion = region;
+            }
+
+            const onElementClick = (element) => {
+                options.currentElement = element;
+            }
+
+            const onCategoryClick = (category) => {
+                options.currentCategory = category;
+            }
+
+            const initTimes = () => {
+                let now = moment();
+                let minute = now.minute();
+                const remainder = minute % 6;
+                if (remainder > 0){
+                    now.minute(minute + (6 - remainder));
+                }
+
+                options.currentTime = now.format('YYYY-MM-DD HH:mm');
+                now.minute(now.minute() - 6);
+
+                for (let i = 0; i < 20 ; i++) {
+                    options.times.push({
+                        hour: now.add(6, 'minute').format('HH时'),
+                        minute: now.format('mm'),
+                        date: now.format('YYYY-MM-DD HH:mm'),
+                        name: 'hour' + now.format('HH')
+                    });
+                }
+            }
+
+            const onTimeClick = (time) => {
+                console.log(time.date)
+                options.currentTime = time.date;
+                console.log(options.currentTime)
+            }
+
+            return {
+                ...toRefs(options),
+                onTabClick,
+                onRegionClick,
+                onElementClick,
+                onCategoryClick,
+                onTimeClick
+            }
+        }
+    }
+</script>
+<style lang="less" scoped>
+    
+</style>
diff --git a/04.系统编码/Frontend/src/components/Shared/Header.vue b/04.系统编码/Frontend/src/components/Shared/Header.vue
index 596eecc..0003d26 100644
--- a/04.系统编码/Frontend/src/components/Shared/Header.vue
+++ b/04.系统编码/Frontend/src/components/Shared/Header.vue
@@ -43,37 +43,37 @@
 <style lang="less" scoped>
     .header {
         width: 100%;
-        height: 84px;
+        height: 0.84rem;
         display: flex;
         align-items: center;
         color: #ffffff;
         .logo {
-            margin-left: 20px;
+            margin-left: 0.2rem;
             display: flex;
             align-items: center;
             letter-spacing: 2px;
-            font-size: 30px;
+            font-size: 0.3rem;
             font-weight: bold;
 
             img {
-                width: 53px;
-                margin-right: 10px;
+                width: 0.53rem;
+                margin-right: 0.1rem;
             }
         }
         .nav {
-            margin: 17px 0 0 50px;
+            margin: 0.17rem 0 0 0.5rem;
             display: flex;
-            font-size: 22px;
+            font-size: 0.22rem;
             .nav-item {
-                width: 170px;
-                height: 66px;
-                margin: 0 25px;
-                line-height: 50px;
+                width: 1.7rem;
+                height: 0.66rem;
+                margin: 0 0.25rem;
+                line-height: 0.5rem;
                 text-align: center;
                 cursor: pointer;
 
                 &:nth-of-type(3) {
-                    width: 230px;
+                    width: 2.3rem;
                     &.active {
                         background: url("/images/nav-bg-big.png") no-repeat center/cover;
                     }
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 3be9362..1162064 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -32,7 +32,7 @@ img {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #222222;
-  font-size: 16px;
+  font-size: 0.16rem;
 }
 
 .el-input__inner {
@@ -75,16 +75,16 @@ img {
 
 .tabs {
     width: 100%;
-    height: 60px;
+    height: 0.6rem;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
-    font-size: 22px;
+    font-size: 0.22rem;
     background-color: rgba(21, 81, 136, 0.46);
 
     .tab-item {
-        margin: 0 100px;
+        margin: 0 1rem;
         position: relative;
         cursor: pointer;
         color: #ffffff;
@@ -105,46 +105,48 @@ img {
 
 .main {
     width: 100%;
-    height: calc(~"100vh - 144px");
+    height: calc(~"100vh - 1.44rem");
     display: flex;
 
     .panel {
-        height: calc(~"100% - 20px");
+        height: calc(~"100% - 0.2rem");
         background-color: #ffffff;
         border-radius: 10px;
     }
     
     .menu {
-        width: 250px;
-        padding: 20px;
-        height: calc(~"100% - 60px");
-        border-radius: 0 10px 10px 0;
+        width: 2.5rem;
+        padding: 0.2rem;
+        height: calc(~"100% - 0.6rem");
+        border-radius: 0 0.1rem 0.1rem 0;
 
         .tip {
-            height: 32px;
-            padding-left: 12px;
-            line-height: 32px;
+            height: 0.32rem;
+            padding-left: 0.12rem;
+            line-height: 0.32rem;
             color: #ffffff;
-            font-size: 18px;
+            font-size: 0.18rem;
             font-weight: bold;
             background: url("/images/menu-bg.png") no-repeat center/cover;
         }
 
         .menu-item {
+            margin-bottom: 0.1rem;
+
             .el-row {
-                margin-top: 20px;
+                margin-top: 0.2rem;
                 .el-col {
                    span {
                         width: 100%;
-                        height: 30px;
+                        height: 0.3rem;
                         padding: 0;
                         display: block;
-                        line-height: 28px;
+                        line-height: 0.3rem;
                         text-align: center;
-                        margin: 0 0 10px 0;
-                        font-size: 16px;
+                        margin: 0 0 0.1rem 0;
+                        font-size: 0.16rem;
                         color: #666666;
-                        border-radius: 5px;
+                        border-radius: 0.05rem;
                         cursor: pointer;
                         border: 1px solid #ECF4FF;
                         background-color: #ECF4FF;
@@ -159,11 +161,12 @@ img {
     }
 
     .container {
-        width: calc(~"100% - 290px");
-        margin-left: 20px;
+        width: calc(~"100% - 2.9rem");
+        margin-left: 0.2rem;
 
         .toolbar {
-            padding: 0.25rem;
+            padding-top: 0.25rem;
+            margin: 0 0.25rem;
             display: flex;
             align-items: center;
             border-bottom: 1px solid #666666;
@@ -177,31 +180,29 @@ img {
                 background-color: #ECF4FF;
 
                 .time-item {
+                    position: relative;
+
                     span {
                         display: block;
                         position: relative;
                         color: #498DF0;
 
+                        &.hour {
+                            height: 0.2rem;
+                            font-size: 0;
+                        }
+
                         &.minute {
                             width: 0.37rem;
                             line-height: 0.26rem;
                             text-align: center;
                             color: #666666;
                             cursor: pointer;
-
-                            &::before {
-                                content: '';
-                                width: 1px;
-                                height: 0.15rem;
-                                display: block;
-                                position: absolute;
-                                left: -1px;
-                                bottom: 0;
-                                background-color: #666666;
-                            }
                         }
+                    }
 
-                        &.active {
+                    &.active {
+                        .minute {
                             color: #ffffff;
                             background-color: #498DF0;
 
@@ -224,6 +225,33 @@ img {
                             }
                         }
                     }
+
+                    &.first-hour {
+                        .hour {
+                            font-size: 0.16rem;
+                        }
+
+                        &::before {
+                            height: 100%;
+                        }
+                    }
+
+                    &:first-of-type {
+                        .hour {
+                            font-size: 0.16rem;
+                        }
+                    }
+                }
+
+                .first-hour::before, .time-item .minute::before {
+                    content: '';
+                    width: 1px;
+                    height: 100%;
+                    display: block;
+                    position: absolute;
+                    left: -1px;
+                    bottom: 0;
+                    background-color: #666666;
                 }
             }
 
@@ -279,27 +307,9 @@ img {
                     }
 
                     .el-input__suffix {
-                        right: 0.07rem;
 
                         .el-input__icon {
                             width: 0.1rem;
-                            svg {
-                                display: none;
-                            }
-
-                            &::after {
-                                content: '';
-                                width: 0; 
-                                height: 0;
-                                display: block;
-                                position: absolute;
-                                top: 50%;
-                                right: 0;
-                                transform: translateY(-50%);
-                                border-left: 0.05rem solid transparent; 
-                                border-right: 0.05rem solid transparent; 
-                                border-bottom: 0.05rem solid #222222;
-                            }
                         }
                     }
                 }
@@ -328,5 +338,63 @@ img {
                 }
             }
         }
+
+        .picture-view {
+            width: 100%;
+            height: calc(~"100% - 0.71rem");
+            position: relative;
+
+            .arrow {
+                width: 0.68rem;
+                display: block;
+                position: absolute;
+                top: 50%;
+                left: 0.3rem;
+                cursor: pointer;
+                transform: translateY(-50%);
+
+                &.arrow-next {
+                    left: auto;
+                    right: 0.3rem;
+                }
+            }
+
+            .save-btn {
+                width: 0.26rem;
+                display: block;
+                position: absolute;
+                top: 0.6rem;
+                right: 2rem;
+                cursor: pointer;
+            }
+
+            .title {
+                padding: 0.4rem 0;
+                line-height: 0.3rem;
+                text-align: center;
+                font-size: 0.3rem;
+                font-weight: bold;
+            }
+
+            .picture {
+                width: 72%;
+                height: calc(~"100% - 1.2rem");
+                margin: 0 auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                overflow: hidden;
+
+                .el-image-viewer__mask {
+                    opacity: 0.8;
+                }
+
+                .el-image-viewer__canvas {
+                    img {
+                        width: 75%;
+                    }
+                }
+            }
+        }
     }
 }
\ No newline at end of file