diff --git a/04.系统编码/Frontend/public/images/picture1.png b/04.系统编码/Frontend/public/images/picture1.png
new file mode 100644
index 0000000..aec9a07
Binary files /dev/null and b/04.系统编码/Frontend/public/images/picture1.png differ
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 0a46048..15fbe96 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -1,22 +1,5 @@
 <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="tabs"></div>
     <div class="main">
         <div class="menu panel">
             <div class="menu-item">
@@ -25,22 +8,15 @@
                     <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 === '对流指数'">
+            <div class="menu-item">
                 <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-col :span="24"><span @click="onElementClick('激光雷达比')" :class="{'active': currentElement === '激光雷达比'}">激光雷达比</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('消光系数')" :class="{'active': currentElement === '消光系数'}">消光系数</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('气溶胶浓度')" :class="{'active': currentElement === '气溶胶浓度'}">气溶胶浓度</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('云和气溶胶识别')" :class="{'active': currentElement === '云和气溶胶识别'}">云和气溶胶识别</span></el-col>
                 </el-row>
             </div>
         </div>
@@ -103,10 +79,8 @@
         name: 'RamanLidar',
         setup() {
             let options = reactive({
-                currentTab: '垂直廓线',
                 currentRegion: '江宁',
-                currentElement: '温度',
-                currentCategory: 'CAPE',
+                currentElement: '激光雷达比',
                 date: new Date(),
                 currentHour: '10',
                 hours: [{
@@ -124,10 +98,6 @@
             onMounted(() => {
                 initTimes();
             })
-            
-            const onTabClick = (name) => {
-                options.currentTab = name;
-            }
 
             const onRegionClick = (region) => {
                 options.currentRegion = region;
@@ -137,10 +107,6 @@
                 options.currentElement = element;
             }
 
-            const onCategoryClick = (category) => {
-                options.currentCategory = category;
-            }
-
             const initTimes = () => {
                 let now = moment();
                 let minute = now.minute();
@@ -170,15 +136,12 @@
 
             return {
                 ...toRefs(options),
-                onTabClick,
                 onRegionClick,
                 onElementClick,
-                onCategoryClick,
                 onTimeClick
             }
         }
     }
 </script>
 <style lang="less" scoped>
-    
 </style>
diff --git a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
index e69de29..c2bb804 100644
--- a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
+++ b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
@@ -0,0 +1,174 @@
+<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('植被和气候要素变化趋势')" :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>
+    <div class="main">
+        <div class="menu panel">
+            <div class="menu-item">
+                <h2 class="tip">要素选择</h2>
+                <el-row :gutter="12">
+                    <el-col :span="24"><span @click="onElementClick('归一化植被指数NDVI')" :class="{'active': currentElement === '归一化植被指数NDVI'}">归一化植被指数NDVI</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('叶面积指数LAI')" :class="{'active': currentElement === '叶面积指数LAI'}">叶面积指数LAI</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('增强植被指数EVI')" :class="{'active': currentElement === '增强植被指数EVI'}">增强植被指数EVI</span></el-col>
+                </el-row>
+            </div>
+        </div>
+        <div class="container panel">
+            <div class="picture-view synergy-picture-view">
+                <el-row :gutter="0">
+                    <el-col :span="8">
+                        <h2 class="title">地表温度（01:30）</h2>
+                        <el-image
+                        src="/images/picture1.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="8">
+                        <h2 class="title">地表温度（01:30）</h2>
+                        <el-image
+                        src="/images/picture1.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="8">
+                        <h2 class="title">地表温度（01:30）</h2>
+                        <el-image
+                        src="/images/picture1.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="8">
+                        <h2 class="title">地表温度（01:30）</h2>
+                        <el-image
+                        src="/images/picture1.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="8">
+                        <h2 class="title">地表温度（01:30）</h2>
+                        <el-image
+                        src="/images/picture1.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="8">
+                        <h2 class="title">地表温度（01:30）</h2>
+                        <el-image
+                        src="/images/picture1.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                </el-row>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { onMounted, reactive, toRefs } from 'vue';
+    import moment from "moment";
+    
+    export default {
+        name: 'SynergyEvaluation',
+        setup() {
+            let options = reactive({
+                currentTab: '植被变化对气候的影响',
+                currentElement: '归一化植被指数NDVI',
+                date: new Date(),
+                currentHour: '10',
+                hours: [{
+                    value: '10',
+                    label: '10'
+                }, {
+                    value: '11',
+                    label: '11'
+                }],
+                currentTime: null,
+                srcList: ['/images/picture1.png']
+            })
+
+            onMounted(() => {
+                
+            })
+            
+            const onTabClick = (name) => {
+                options.currentTab = name;
+            }
+
+            const onElementClick = (element) => {
+                options.currentElement = element;
+            }
+
+            const onTimeClick = (time) => {
+                console.log(time.date)
+                options.currentTime = time.date;
+                console.log(options.currentTime)
+            }
+
+            return {
+                ...toRefs(options),
+                onTabClick,
+                onElementClick,
+                onTimeClick
+            }
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .main {
+        .container {
+            .synergy-picture-view {
+                height: 100%;
+                display: flex;
+                :deep(.el-row) {
+                    .title {
+                        padding: 0;
+                        font-size: 0.22rem;
+                    }
+                    .el-col {
+                        height: 46%;
+                        margin-top: 1%;
+                        text-align: center;
+                        .el-image {
+                            height: calc(~"100% - 0.4rem");
+                            margin-top: 0.1rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>