diff --git a/back/public/config/basicConfig.js b/back/public/config/basicConfig.js
index 2428c227..1c343995 100644
--- a/back/public/config/basicConfig.js
+++ b/back/public/config/basicConfig.js
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-08-25 14:37:49
  * @LastEditors: Light
- * @LastEditTime: 2022-10-26 10:48:52
+ * @LastEditTime: 2022-10-31 09:16:10
  * @Description: 告诉大家这是什么
  */
 var _global = {}
@@ -44,7 +44,7 @@ var CONFIGITEM = {
     dev: {
       previewUrl: 'http://localhost:8080/',
       apiURL: 'http://192.168.124.243:8888/renren-admin',
-      websocketURL: 'ws://192.168.124.243:8888/renren-admin/websocket'
+      websocketURL: 'ws://192.168.243.243:8888/renren-admin/websocket'
     }
   }
 }
diff --git a/back/src/assets/img/capabilityTraceability/back.png b/back/src/assets/img/capabilityTraceability/back.png
new file mode 100644
index 00000000..ea5f92b5
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/back.png differ
diff --git a/back/src/assets/img/capabilityTraceability/gang.png b/back/src/assets/img/capabilityTraceability/gang.png
new file mode 100644
index 00000000..2076e50b
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/gang.png differ
diff --git a/back/src/assets/img/capabilityTraceability/one1.png b/back/src/assets/img/capabilityTraceability/one1.png
new file mode 100644
index 00000000..079a9051
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/one1.png differ
diff --git a/back/src/assets/img/capabilityTraceability/one2.png b/back/src/assets/img/capabilityTraceability/one2.png
new file mode 100644
index 00000000..d87b8320
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/one2.png differ
diff --git a/back/src/assets/img/capabilityTraceability/one3.png b/back/src/assets/img/capabilityTraceability/one3.png
new file mode 100644
index 00000000..60863470
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/one3.png differ
diff --git a/back/src/assets/img/capabilityTraceability/one4.png b/back/src/assets/img/capabilityTraceability/one4.png
new file mode 100644
index 00000000..883faad0
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/one4.png differ
diff --git a/back/src/assets/img/capabilityTraceability/one5.png b/back/src/assets/img/capabilityTraceability/one5.png
new file mode 100644
index 00000000..624e4e6c
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/one5.png differ
diff --git a/back/src/assets/img/capabilityTraceability/one6.png b/back/src/assets/img/capabilityTraceability/one6.png
new file mode 100644
index 00000000..44bb109e
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/one6.png differ
diff --git a/back/src/assets/img/capabilityTraceability/three1.png b/back/src/assets/img/capabilityTraceability/three1.png
new file mode 100644
index 00000000..667a3a86
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/three1.png differ
diff --git a/back/src/assets/img/capabilityTraceability/three2.png b/back/src/assets/img/capabilityTraceability/three2.png
new file mode 100644
index 00000000..9671b1c6
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/three2.png differ
diff --git a/back/src/assets/img/capabilityTraceability/three3.png b/back/src/assets/img/capabilityTraceability/three3.png
new file mode 100644
index 00000000..5898c829
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/three3.png differ
diff --git a/back/src/assets/img/capabilityTraceability/three4.png b/back/src/assets/img/capabilityTraceability/three4.png
new file mode 100644
index 00000000..8fef1855
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/three4.png differ
diff --git a/back/src/assets/img/capabilityTraceability/three5.png b/back/src/assets/img/capabilityTraceability/three5.png
new file mode 100644
index 00000000..d3a28805
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/three5.png differ
diff --git a/back/src/assets/img/capabilityTraceability/three6.png b/back/src/assets/img/capabilityTraceability/three6.png
new file mode 100644
index 00000000..676f31a3
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/three6.png differ
diff --git a/back/src/assets/img/capabilityTraceability/three7.png b/back/src/assets/img/capabilityTraceability/three7.png
new file mode 100644
index 00000000..d29d8084
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/three7.png differ
diff --git a/back/src/assets/img/capabilityTraceability/two1.png b/back/src/assets/img/capabilityTraceability/two1.png
new file mode 100644
index 00000000..ed078ea5
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/two1.png differ
diff --git a/back/src/assets/img/capabilityTraceability/two2.png b/back/src/assets/img/capabilityTraceability/two2.png
new file mode 100644
index 00000000..fc0e4e4f
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/two2.png differ
diff --git a/back/src/assets/img/capabilityTraceability/two3.png b/back/src/assets/img/capabilityTraceability/two3.png
new file mode 100644
index 00000000..0c0bb192
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/two3.png differ
diff --git a/back/src/assets/img/capabilityTraceability/two4.png b/back/src/assets/img/capabilityTraceability/two4.png
new file mode 100644
index 00000000..f9297622
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/two4.png differ
diff --git a/back/src/assets/img/capabilityTraceability/two5.png b/back/src/assets/img/capabilityTraceability/two5.png
new file mode 100644
index 00000000..f8a88990
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/two5.png differ
diff --git a/back/src/assets/img/capabilityTraceability/two6.png b/back/src/assets/img/capabilityTraceability/two6.png
new file mode 100644
index 00000000..19320e1e
Binary files /dev/null and b/back/src/assets/img/capabilityTraceability/two6.png differ
diff --git a/back/src/views/modules/capabilityTraceability/index.vue b/back/src/views/modules/capabilityTraceability/index.vue
new file mode 100644
index 00000000..e12290ea
--- /dev/null
+++ b/back/src/views/modules/capabilityTraceability/index.vue
@@ -0,0 +1,947 @@
+<!--
+ * @Author: Light
+ * @Date: 2022-10-31 09:24:38
+ * @LastEditors: Light
+ * @LastEditTime: 2022-10-31 11:40:37
+ * @Description: 能力溯源分析
+-->
+<template>
+    <div class="capabilityTraceability">
+      <div class="header">
+        <div class="name">数字资源能力一本账</div>
+        <div class="tab">
+          <div v-for="tab in tabList" :key="tab" :class="selectTab==tab?'select':''" @click="changeTab(tab)">{{tab}}</div>
+        </div>
+      </div>
+      <div class="overview">
+        <div class="top"><i></i>总体情况</div>
+        <div class="main">
+          <div class="item" v-for="item in allSituation" :key="item">
+            <div class="left"></div>
+            <div class="right">
+              <div>{{item.name}}</div>
+              <div>{{item.num}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="first">
+        <div class="one">
+          <div class="top"><i></i>部门情况</div>
+          <div class="main">
+            <div class="item" v-for="item in allSituationDept" :key="item">
+              <div class="left"></div>
+              <div class="right">
+                <div>{{item.name}}</div>
+                <div>{{item.num}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="two">
+          <div class="top"><i></i>部门数字资源分布</div>
+          <div class="main">
+             <el-table
+              :data="tableData1"
+              border
+              style="width: 100%">
+              <el-table-column
+                prop="deptName"
+                label="部门名称">
+              </el-table-column>
+              <el-table-column
+                prop="project"
+                label="注册项目"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="system"
+                label="注册系统"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="video"
+                label="视频资源"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="layer"
+                label="GIS图层"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="cloudResources"
+                label="云网资源"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="assembly"
+                label="组件资源"
+                width="210">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div class="three">
+          <div class="top"><i></i>部门数字资源应用分布</div>
+          <div class="main">
+            <div class="nav">
+              <div :class="selectDistribution==nav?'select':''" v-for='nav in distributionNav' :key="nav" @click="selectDistribution=nav">{{nav}}</div>
+            </div>
+            <div class="ehcarts">
+              <div class="name">{{selectDistribution}}</div>
+              <div id="echarts1" style="width: 1450px;height:300px;"></div>
+            </div>
+            <div class="back" @click="goBack()">返回顶部<i></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="second">
+        <div class="one">
+          <div class="top"><i></i>部门情况</div>
+          <div class="main">
+            <div class="item" v-for="item in allSituationDept2" :key="item">
+              <div class="left"></div>
+              <div class="right">
+                <div>{{item.name}}</div>
+                <div>{{item.num}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="two">
+          <div class="top"><i></i>部门数字资源分布</div>
+          <div class="main">
+             <el-table
+              :data="tableData2"
+              border
+              style="width: 100%">
+              <el-table-column
+                prop="deptName"
+                label="部门名称">
+              </el-table-column>
+              <el-table-column
+                prop="project"
+                label="注册项目"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="system"
+                label="注册系统"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="video"
+                label="视频资源"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="layer"
+                label="GIS图层"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="cloudResources"
+                label="云网资源"
+                width="210">
+              </el-table-column>
+              <el-table-column
+                prop="assembly"
+                label="组件资源"
+                width="210">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div class="three">
+          <div class="top"><i></i>部门数字资源应用分布</div>
+          <div class="main">
+            <div class="nav">
+              <div :class="selectDistribution2==nav?'select':''" v-for='nav in distributionNav2' :key="nav" @click="selectDistribution2=nav">{{nav}}</div>
+            </div>
+             <div class="ehcarts">
+              <div class="name">{{selectDistribution2}}</div>
+              <div id="echarts2" style="width: 1450px;height:300px;"></div>
+            </div>
+            <div class="back" @click="goBack()">返回顶部<i></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+const chartData1 = [
+  { name: '社会治安', value: 300 },
+  { name: '城市管理', value: 400 },
+  { name: '疫情防控', value: 452 },
+  { name: '危化品管理', value: 770 },
+  { name: '交通运输', value: 650 },
+  { name: '森林防火', value: 256 },
+  { name: '防汛抗旱', value: 350 },
+  { name: '文化旅游', value: 422 },
+  { name: '非煤矿山', value: 235 },
+  { name: '医疗卫生', value: 658 },
+  { name: '安全生产', value: 600 },
+  { name: '生态环境', value: 400 },
+  { name: '农业农村', value: 523 },
+  { name: '市场监督', value: 482 },
+  { name: '政务服务', value: 423 },
+  { name: '其他', value: 300 }
+]
+const chartData2 = [
+  { name: '社会治安', value: 300 },
+  { name: '城市管理', value: 400 },
+  { name: '疫情防控', value: 452 },
+  { name: '危化品管理', value: 770 },
+  { name: '交通运输', value: 650 },
+  { name: '森林防火', value: 256 },
+  { name: '防汛抗旱', value: 350 },
+  { name: '文化旅游', value: 422 },
+  { name: '非煤矿山', value: 235 },
+  { name: '医疗卫生', value: 658 },
+  { name: '安全生产', value: 600 },
+  { name: '生态环境', value: 400 },
+  { name: '农业农村', value: 523 },
+  { name: '市场监督', value: 482 },
+  { name: '政务服务', value: 423 },
+  { name: '其他', value: 300 }
+]
+const xData1 = chartData1.map(v => v.name)
+const xData2 = chartData2.map(v => v.name)
+const sData1 = chartData1.map(v => v.value)
+const sData2 = chartData2.map(v => v.value)
+export default {
+  name: '',
+  components: {
+
+  },
+  props: {
+
+  },
+  data () {
+    return {
+      tabList: ['总体情况', '部门情况', '地市情况'],
+      selectTab: '总体情况',
+      allSituation: [{ name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
+      allSituationDept: [{ name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
+      allSituationDept2: [{ name: '注册地市', num: '100个' }, { name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
+      tableData1: [{
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '财政厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '应急厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '大数据局',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '民政局',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '公安厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '教育厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '审计厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '海洋局',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }
+      ],
+      tableData2: [{
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }, {
+        deptName: '交通运输厅',
+        project: '1005',
+        system: '1005',
+        video: '1005',
+        layer: '1005',
+        cloudResources: '1005',
+        assembly: '1005'
+      }
+      ],
+      distributionNav: ['注册项目', '注册系统', '视频资源', 'GIS图层', '云网资源', '组件资源'],
+      selectDistribution: '注册项目',
+      distributionNav2: ['注册项目', '注册系统', '视频资源', 'GIS图层', '云网资源', '组件资源'],
+      selectDistribution2: '注册项目',
+      option1: {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '14%',
+          right: '3%',
+          left: '3%',
+          bottom: '14%'
+        },
+        xAxis: [{
+          type: 'category',
+          data: xData1,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(151,151,151,0.5)',
+              type: 'dashed'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            margin: 10,
+            color: '#666',
+            textStyle: {
+              fontSize: 12
+            }
+          }
+        }],
+        yAxis: [{
+          axisLabel: {
+            formatter: '{value}',
+            color: '#666'
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(151,151,151,0.5)',
+              type: 'dashed'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(151,151,151,0.5)',
+              type: 'dashed'
+            }
+          }
+        }, {
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(151,151,151,0.5)',
+              type: 'dashed'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        }],
+        series: [{
+          type: 'bar',
+          data: sData1,
+          barWidth: '20px',
+          itemStyle: {
+            normal: {
+              color: '#f48238'
+            }
+          }
+        }]
+      },
+      option2: {
+        backgroundColor: '#fff',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          top: '14%',
+          right: '3%',
+          left: '3%',
+          bottom: '14%'
+        },
+        xAxis: [{
+          type: 'category',
+          data: xData2,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(151,151,151,0.5)',
+              type: 'dashed'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            margin: 10,
+            color: '#666',
+            textStyle: {
+              fontSize: 12
+            }
+          }
+        }],
+        yAxis: [{
+          axisLabel: {
+            formatter: '{value}',
+            color: '#666'
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(151,151,151,0.5)',
+              type: 'dashed'
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(151,151,151,0.5)',
+              type: 'dashed'
+            }
+          }
+        }, {
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(151,151,151,0.5)',
+              type: 'dashed'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        }],
+        series: [{
+          type: 'bar',
+          data: sData2,
+          barWidth: '20px',
+          itemStyle: {
+            normal: {
+              color: '#02ab46'
+            }
+          }
+        }]
+      }
+    }
+  },
+  methods: {
+    myEcharts () {
+      var chartDom1 = document.getElementById('echarts1')
+      var chartDom2 = document.getElementById('echarts2')
+      var myChart1 = echarts.init(chartDom1)
+      var myChart2 = echarts.init(chartDom2)
+      myChart1.setOption(this.option1)
+      myChart2.setOption(this.option2)
+    },
+    changeTab (tab) {
+      this.selectTab = tab
+      switch (this.selectTab) {
+        case '总体情况':
+          window.scrollTo(0, 0)
+          break
+        case '部门情况':
+          window.scrollTo(0, 330)
+          break
+        case '地市情况':
+          window.scrollTo(0, 1640)
+          break
+      }
+    },
+    goBack () {
+      window.scrollTo(0, 0)
+    }
+  },
+  mounted () {
+    this.myEcharts()
+  }
+}
+</script>
+<style lang='scss' scoped>
+.capabilityTraceability {
+  .top {
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    i {
+      width: 15px;
+      height: 15px;
+      background: url("~@/assets/img/capabilityTraceability/gang.png") no-repeat;
+      background-size: 100%;
+      margin-right: 8px;
+    }
+  }
+  .header {
+    .name {
+      font-size: 32px;
+      font-weight: 600;
+      text-align: center;
+    }
+    .tab {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      div {
+        cursor: pointer;
+        padding: 3px 14px;
+        font-size: 16px;
+        border-radius: 20px;
+      }
+      .select {
+        background: white;
+      }
+    }
+  }
+  .overview {
+    margin-top: 20px;
+    background: white;
+    padding: 14px 16px;
+    .main {
+      margin: 34px 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .item {
+        margin: 10px 0;
+        padding: 0 45px 0 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-right: 1px solid #ccc;
+        .left {
+          width: 80px;
+          height: 80px;
+        }
+        .right {
+          margin-left: 10px;
+          div {
+            text-align: center;
+            font-size: 20px;
+          }
+          div:nth-of-type(2) {
+            margin-top: 10px;
+            font-size: 18px;
+            color: #027cf6;
+          }
+        }
+      }
+      .item:last-child {
+        border: none;
+      }
+      .item:nth-of-type(1) > .left {
+        background: url("~@/assets/img/capabilityTraceability/one1.png")
+          no-repeat;
+        background-size: 100%;
+        background-position: center;
+      }
+      .item:nth-of-type(2) > .left {
+        background: url("~@/assets/img/capabilityTraceability/one2.png")
+          no-repeat;
+        background-size: 100%;
+        background-position: center;
+      }
+      .item:nth-of-type(3) > .left {
+        background: url("~@/assets/img/capabilityTraceability/one3.png")
+          no-repeat;
+        background-size: 100%;
+        background-position: center;
+      }
+      .item:nth-of-type(4) > .left {
+        background: url("~@/assets/img/capabilityTraceability/one4.png")
+          no-repeat;
+        background-size: 100%;
+        background-position: center;
+      }
+      .item:nth-of-type(5) > .left {
+        background: url("~@/assets/img/capabilityTraceability/one5.png")
+          no-repeat;
+        background-size: 100%;
+        background-position: center;
+      }
+      .item:nth-of-type(6) > .left {
+        background: url("~@/assets/img/capabilityTraceability/one6.png")
+          no-repeat;
+        background-size: 100%;
+        background-position: center;
+      }
+    }
+  }
+  .first {
+    margin-top: 20px;
+    background: white;
+    padding: 14px 16px;
+    .one {
+      margin-bottom: 42px;
+      .main {
+        margin: 34px 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .item {
+          margin: 10px 0;
+          padding: 0 45px 0 40px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-right: 1px solid #ccc;
+          .left {
+            width: 80px;
+            height: 80px;
+          }
+          .right {
+            margin-left: 10px;
+            div {
+              text-align: center;
+              font-size: 20px;
+            }
+            div:nth-of-type(2) {
+              margin-top: 10px;
+              font-size: 18px;
+              color: #f9c599;
+            }
+          }
+        }
+        .item:last-child {
+          border: none;
+        }
+        .item:nth-of-type(1) > .left {
+          background: url("~@/assets/img/capabilityTraceability/two1.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(2) > .left {
+          background: url("~@/assets/img/capabilityTraceability/two2.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(3) > .left {
+          background: url("~@/assets/img/capabilityTraceability/two3.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(4) > .left {
+          background: url("~@/assets/img/capabilityTraceability/two4.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(5) > .left {
+          background: url("~@/assets/img/capabilityTraceability/two5.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(6) > .left {
+          background: url("~@/assets/img/capabilityTraceability/two6.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+      }
+    }
+    .two {
+      margin-bottom: 42px;
+      .main {
+        margin-top: 30px;
+        padding: 0 50px;
+      }
+    }
+    .three {
+      margin-bottom: 20px;
+      .main {
+        margin-top: 30px;
+        padding: 0 50px;
+        .nav {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          div {
+            cursor: pointer;
+            padding-bottom: 8px;
+            margin-right: 60px;
+            border-bottom: 3px solid #fff;
+          }
+          .select {
+            border-bottom: 3px solid #f48238;
+          }
+        }
+        .ehcarts {
+          border: 1px solid #ccc;
+          box-shadow: 5px 5px 5px #ccc;
+          margin: 20px 0;
+          padding: 10px;
+          .name {
+            font-weight: 600;
+          }
+        }
+        .back {
+          cursor: pointer;
+          font-weight: 600;
+          padding-left: 1400px;
+          text-align: end;
+          i {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            margin-left: 8px;
+            background: url("~@/assets/img/capabilityTraceability/back.png")
+              no-repeat;
+            background-size: 100%;
+          }
+        }
+      }
+    }
+  }
+  .second {
+    margin-top: 20px;
+    background: white;
+    padding: 14px 16px;
+    .one {
+      margin-bottom: 42px;
+      .main {
+        margin: 34px 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .item {
+          margin: 10px 0;
+          padding: 0 35px 0 30px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-right: 1px solid #ccc;
+          .left {
+            width: 60px;
+            height: 60px;
+          }
+          .right {
+            margin-left: 10px;
+            div {
+              text-align: center;
+              font-size: 18px;
+            }
+            div:nth-of-type(2) {
+              margin-top: 10px;
+              font-size: 16px;
+              color: #02ab46;
+            }
+          }
+        }
+        .item:last-child {
+          border: none;
+        }
+        .item:nth-of-type(1) > .left {
+          background: url("~@/assets/img/capabilityTraceability/three1.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(2) > .left {
+          background: url("~@/assets/img/capabilityTraceability/three2.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(3) > .left {
+          background: url("~@/assets/img/capabilityTraceability/three3.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(4) > .left {
+          background: url("~@/assets/img/capabilityTraceability/three4.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(5) > .left {
+          background: url("~@/assets/img/capabilityTraceability/three5.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(6) > .left {
+          background: url("~@/assets/img/capabilityTraceability/three6.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+        .item:nth-of-type(7) > .left {
+          background: url("~@/assets/img/capabilityTraceability/three7.png")
+            no-repeat;
+          background-size: 100%;
+          background-position: center;
+        }
+      }
+    }
+    .two {
+      margin-bottom: 42px;
+      .main {
+        margin-top: 30px;
+        padding: 0 50px;
+      }
+    }
+    .three {
+      margin-bottom: 20px;
+      .main {
+        margin-top: 30px;
+        padding: 0 50px;
+        .nav {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          div {
+            cursor: pointer;
+            padding-bottom: 8px;
+            margin-right: 60px;
+            border-bottom: 3px solid #fff;
+          }
+          .select {
+            border-bottom: 3px solid #02ab46;
+          }
+        }
+        .ehcarts {
+          border: 1px solid #ccc;
+          box-shadow: 5px 5px 5px #ccc;
+          margin: 20px 0;
+          padding: 10px;
+          .name {
+            font-weight: 600;
+          }
+        }
+        .back {
+          cursor: pointer;
+          font-weight: 600;
+          padding-left: 1400px;
+          text-align: end;
+          i {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            margin-left: 8px;
+            background: url("~@/assets/img/capabilityTraceability/back.png")
+              no-repeat;
+            background-size: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>