diff --git a/src/assets/jsError/logo1.png b/src/assets/jsError/logo1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f910f7ef33975fe05f6e7bb49e64719339f6799d
Binary files /dev/null and b/src/assets/jsError/logo1.png differ
diff --git a/src/assets/jsError/logo2.png b/src/assets/jsError/logo2.png
new file mode 100644
index 0000000000000000000000000000000000000000..af89e2d4225db9fcc8e0efab694b7c0eb622d56c
Binary files /dev/null and b/src/assets/jsError/logo2.png differ
diff --git a/src/assets/jsError/logo3.png b/src/assets/jsError/logo3.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0a283638505a4281bb91b2e325cb2e95269dee2
Binary files /dev/null and b/src/assets/jsError/logo3.png differ
diff --git a/src/componets/jsError/dataShow.vue b/src/componets/jsError/dataShow.vue
new file mode 100644
index 0000000000000000000000000000000000000000..81726c5b09feadc9cd07f9bc8c8b89ad97447800
--- /dev/null
+++ b/src/componets/jsError/dataShow.vue
@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <!-- 上半部分 -->
+    <div class="heater">
+      <!-- 选择框 -->
+      <el-select
+        placeholder="监测页面"
+        v-model="channel"
+        :popper-append-to-body="false"
+      >
+        <el-option label="首页" value="首页"> </el-option>
+        <el-option label="产品页" value="产品页"> </el-option>
+        <el-option label="公司详情" value="公司详情"> </el-option>
+      </el-select>
+      <div class="jseTitle">
+        <i class="el-icon-caret-right" id="el-icon-caret-right"></i>
+        <p class="jseH1">JS错误概况</p>
+      </div>
+    </div>
+    <!-- 下半部分展示 -->
+    <div class="contemt" id="contemt"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dataShow',
+  data () {
+    return {
+      channel: "全部页面"
+    }
+  },
+  mounted () {
+    var chartDom = document.getElementById('contemt');
+    var myChart = this.$echarts.init(chartDom, 'dark');
+    var option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        }
+      },
+      xAxis: [
+        {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          data: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7', '7/8', '7/9', '7/10', '7/11', '7/12', '7/13', '7/14'],
+          axisPointer: {
+            alignWithLabel: true
+          }
+        }
+      ],
+      yAxis: [
+        {
+          // name: '个',
+          type: 'value',
+          splitLine: {
+            show: false
+          }
+        }
+      ],
+      series: [{
+        type: 'bar',
+        barWidth: '17px',
+        data: [820, 422, 200, 534, 790, 330, 820, 630, 702, 400, 834, 390, 930, 420],
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [{
+            offset: 0,
+            color: '#6BE6C1' // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: '#1A70F3' // 100% 处的颜色
+          }
+          ],
+        },
+      },
+      {
+        type: 'line',
+        symbolSize: 7,
+        data: [820, 422, 200, 534, 790, 330, 820, 630, 702, 400, 834, 390, 930, 420],
+        itemStyle: {
+          normal: {
+            color: "#FFFFFF", //改变折线点的颜色
+            lineStyle: {
+              color: "#466AEB", //改变折线颜色
+              width: 1// 0.1的线条是非常细的了
+            },
+          },
+        },
+      }],
+      grid: [{
+        left: '100px',
+        bottom: '30px',
+        top: '13%',
+        right: '100px'
+      }],
+      backgroundColor: '#000000',
+    };
+
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }
+
+}
+</script>
+
+<style scoped>
+.heater {
+  height: 19vh;
+  width: 59vw;
+}
+.contemt {
+  width: 56vw;
+  height: 30.9vh;
+  border: 0.3px dashed #a485e6;
+}
+/* jsErrorTitle */
+#el-icon-caret-right {
+  color: #2cbeff;
+  width: 5px;
+  height: 15px;
+  margin-top: 1.6vh;
+  font-size: 1.1vw;
+}
+.jseTitle {
+  width: 122px;
+  height: 30px;
+  display: flex;
+  justify-content: left;
+  position: absolute;
+  top: 80px;
+  left: 357px;
+}
+.jseH1 {
+  font-size: clamp(1rem, 1.3vw, 4rem);
+  font-family: Alibaba;
+  font-weight: 400;
+  color: #ffffff;
+  margin-left: 0.8vw;
+  line-height: 7px;
+}
+
+/* 下拉框 */
+.el-select {
+  width: 10vw;
+  position: absolute;
+  left: 363px;
+  top: 30px;
+  font-family: AlibabaMedium;
+  font-weight: 400;
+}
+/*  设置输入框的背景色、字体颜色、边框属性设置； */
+::v-deep .el-input__inner {
+  background: linear-gradient(to right, #081f37, #123251);
+  border-color: #203d53;
+  border-radius: 0;
+}
+
+/* 设置下拉框的 ，滚动条*/
+::v-deep .el-scrollbar,
+::v-deep .el-select-dropdown {
+  background-color: #000000;
+  border-color: #7c97c0;
+}
+/* 下拉框的 选项和外围*/
+::v-deep .el-scrollbar__wrap,
+::v-deep .el-select-dropdown__list {
+  background-color: #000000;
+  color: #fff !important;
+}
+/* 设置下拉框的属性 */
+::v-deep .el-select-dropdown__item {
+  width: 168px;
+  margin: 0 auto;
+  text-align: left;
+  background-color: #000000;
+  border-bottom: 1px solid #6e716e;
+  font-size: 16px;
+  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
+  font-weight: 400;
+  color: #ffffff;
+}
+.el-select-dropdown__item:last-child {
+  border-bottom: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/componets/jsError/jsDetailed.vue b/src/componets/jsError/jsDetailed.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95ea8d536a54ad99fe2dd4331f07c7b4ba2c8a1d
--- /dev/null
+++ b/src/componets/jsError/jsDetailed.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="jsDetailed">
+    <div class="jsDetailed-left">
+      <p class="jsTypeTitle jstitle pBlock">事件类型</p>
+      <p class="jsTypeValue pBlock">Error</p>
+      <p class="jsTimeV pBlock">2022-9-20 12:30:20</p>
+
+      <p class="jsContentT jstitle">事件内容</p>
+      <p class="jsContentV jsValue">error is not defined</p>
+      <p class="errorContentT jstitle">错误内容</p>
+      <p class="errorContentV jsValue">暂无</p>
+      <p class="jsUrlT jstitle">发生页面</p>
+      <p class="jsUrV jsValue">https://www.(检测对象网址)</p>
+      <p class="jsInfoT jstitle">加载信息</p>
+      <p class="jsInfoV jsValue">错误代码行列 行：xx，列：xx</p>
+      <el-button type="success" class="buttonStyle">解决</el-button>
+      <el-button type="warning" class="buttonStyle">忽略</el-button>
+    </div>
+    <div class="jsDetailed-right">
+      <!-- 圆 -->
+      <div class="errorCount1 circle">
+        <div class="errorCount2 circle">
+          <p class="errorCount-num">1,100</p>
+          <p class="errorCount-title">发生总次数</p>
+        </div>
+      </div>
+      <!-- 趋势图 -->
+      <js-trend />
+    </div>
+  </div>
+</template>
+
+<script>
+import jsTrend from './jsTrend.vue'
+
+export default {
+  components: { jsTrend },
+  name: 'jsDetailed',
+
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+
+  }
+
+}
+</script>
+
+<style  scoped>
+.jsDetailed {
+  width: 37.4vw;
+  height: 40vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  opacity: 0.7;
+  border: 1px solid #275079;
+  margin-right: 47px;
+  display: flex;
+}
+.jsDetailed-left {
+  width: 20vw;
+  height: 40vh;
+}
+.jsDetailed-right {
+  width: 16vw;
+  height: 40vh;
+  border-left: 1px dashed #7a97b6;
+}
+.jstitle {
+  width: 71px;
+  height: 25px;
+  font-size: clamp(0.5rem, 1vw, 4rem);
+  font-family: AlibabaMedium;
+  color: #789dc3;
+  font-weight: 500;
+  margin: 0px 0px 0px 0.7vw;
+  padding: 0;
+}
+.pBlock {
+  display: inline-block;
+}
+.jsTypeTitle {
+  margin-left: -1.4vw !important;
+  width: 71px !important;
+  margin-bottom: 1vh;
+}
+.jsValue {
+  width: 250px;
+  height: 25px;
+  font-size: clamp(-1rem, 0.9vw, 4rem);
+  font-family: AlibabaRegular;
+  font-weight: 400;
+  color: #ffffff;
+  margin: 0 0 0 0;
+}
+.jsTimeV {
+  color: #ffffff;
+  font-size: clamp(-1rem, 0.8vw, 4rem);
+  margin: 2vh 0 0 2.6vw;
+}
+.jsTypeValue {
+  color: #ffffff;
+  font-size: clamp(-1rem, 0.9vw, 4rem);
+  margin: 0 0 1vw 0;
+  margin: 2vh 0 0 1vw;
+}
+.jsContentV {
+  margin: 0 0 0.8vh -3vw;
+}
+.errorContentV {
+  margin: 0 0 0.8vh -6vw;
+}
+.jsUrV {
+  margin: 0 0 0.8vh -1vw;
+}
+.jsInfoV {
+  margin: 0 0 0.8vh -1vw;
+}
+.buttonStyle {
+  width: 98px;
+  height: 30px;
+  border-radius: 5px 5px 5px 5px;
+  opacity: 1;
+  font-family: AlibabaRegular;
+  font-weight: 400;
+  font-size: clamp(-1rem, 0.8vw, 4rem);
+  color: #ffffff;
+  line-height: 1px;
+}
+.el-button--success {
+  background: rgba(7, 90, 65, 0.92);
+  border: 1px solid #6be6c1;
+  margin: 0 1vw 0 1vw;
+}
+.el-button--warning {
+  background: #682d00;
+  border: 1px solid #ff750c;
+  margin: 0 1vw 0 1vw;
+}
+.circle {
+  border-radius: 100px;
+}
+.errorCount1 {
+  border: 2px solid #8ed6fa;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto;
+  margin-top: 2vmin;
+}
+.errorCount2 {
+  border: 1px solid #8ed6fa;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto;
+  margin-top: 1vmin;
+}
+.errorCount2 p {
+  color: #ffffff;
+}
+.errorCount-num {
+  margin: 2vmin 0 0 0;
+  font-size: clamp(-1rem, 1.5vw, 4rem);
+  font-weight: 600;
+  font-family: AlibabaRegular;
+}
+.errorCount-title {
+  margin: 0vmin 0 0 0;
+  font-size: clamp(-1rem, 0.2vw, 4rem);
+  font-family: AlibabaMedium;
+}
+</style>
diff --git a/src/componets/jsError/jsRecord.vue b/src/componets/jsError/jsRecord.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a265e3b381e7072a8f3a622c2410b19f2a84acdf
--- /dev/null
+++ b/src/componets/jsError/jsRecord.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="jsRecord"></div>
+</template>
+
+<script>
+export default {
+  name: 'jsRecord',
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style  scoped>
+.jsRecord {
+  width: 44.1vw;
+  height: 37.7vh;
+  border: 1px slateblue solid;
+}
+</style>
\ No newline at end of file
diff --git a/src/componets/jsError/jsTrend.vue b/src/componets/jsError/jsTrend.vue
new file mode 100644
index 0000000000000000000000000000000000000000..356382688d41e2a163b028200dfbdda31a51cc19
--- /dev/null
+++ b/src/componets/jsError/jsTrend.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="trend" id="trend"></div>
+</template>
+
+<script>
+export default {
+  name: 'jsTrend',
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    const chartDom = document.getElementById('trend')
+    const myChart = this.$echarts.init(chartDom, 'dark')
+    let option = {
+      grid: [{
+        left: '10%',
+        bottom: '10%',
+        top: '30%',
+        right: '10%'
+      }],
+      title: {
+        padding: [10, 0, 0, 0],
+        show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
+        text: '24小时报错趋势',
+        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+          fontFamily: 'AlibabaMedium',
+          fontSize: 15,
+          fontWeight: '200',
+          color: '#739FC7'
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        },
+        showContent: true,
+      }
+      ,
+      backgroundColor: '',
+      xAxis: {
+        type: 'category',
+        data: ['7-24', '7-26', '7-27', '7-28', '7-29', '7-30'], // 时间
+        boundaryGap: false,
+        lineStyle: {
+          color: '#647483'
+        },
+        axisTick: {
+          show: false
+        },
+      },
+
+      yAxis: {
+        type: 'value',
+        data: ['10', '20', '30', '40', '70', '100'],
+        splitLine: {
+          show: false
+        }
+      },
+      series: [{
+        name: '同步错误',
+        type: 'line',
+        data: [10, 20, 78, 80, 40, 10],
+        symbol: 'none',
+        lineStyle: {
+          // 设置线条的style等
+          normal: {
+            color: '#4E6CBD' // 折线线条颜色:红色
+          }
+        },
+        itemStyle: {
+          // 设置线条上点的颜色（和图例的颜色）
+          normal: {
+            color: '#FFFFFF'
+          }
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              // 渐变颜色
+              {
+                offset: 0,
+                color: '#4D6CF3'
+              },
+              {
+                offset: 1,
+                color: '#092134'
+              }
+            ],
+            global: false
+          }
+        }
+      },
+      ]
+    };
+    myChart.setOption(option)
+    window.onresize = function () {
+      myChart.resize();
+    };
+  }
+}
+</script>
+
+<style  scoped>
+.trend {
+  width: 14vw;
+  height: 23vh;
+  margin: 0 0 0vh 1vw;
+}
+</style>
\ No newline at end of file
diff --git a/src/componets/jsError/mainContent.vue b/src/componets/jsError/mainContent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..47f7c561e6e98d492982c178f0883820ada72c6d
--- /dev/null
+++ b/src/componets/jsError/mainContent.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="mainComtent">
+    <!-- 上半部分 -->
+    <div class="topComtent">
+      <!-- 上半左 -->
+      <div class="topComtent-left">
+        <data-show />
+      </div>
+      <!-- 上半右 -->
+      <top-right />
+      <!-- 下半部分 -->
+    </div>
+    <div class="title">
+      <div class="js-detailed js-title">错误记录列表</div>
+      <div class="js-record js-title">错误详情</div>
+    </div>
+    <div class="footerComtent">
+      <!-- left -->
+      <js-record />
+      <!-- right -->
+      <js-detailed />
+    </div>
+  </div>
+</template>
+
+<script>
+import DataShow from './dataShow.vue'
+import TopRight from './topRight1.vue'
+import JsDetailed from './jsDetailed.vue'
+import JsRecord from './jsRecord.vue'
+
+export default {
+  components: { DataShow, JsDetailed, JsRecord, TopRight },
+  name: 'mainComtent',
+  data () {
+    return {
+
+    }
+  }
+
+}
+</script>
+
+<style  scoped>
+.topComtent {
+  padding-left: 60px;
+  display: flex;
+  height: 53vh;
+  width: 76vw;
+}
+.footerComtent {
+  padding-left: 60px;
+  height: 40vh;
+  width: 76vw;
+  display: flex;
+}
+.title {
+  width: 73vw;
+  height: 5.5vh;
+  margin-left: 60px;
+
+  display: flex;
+}
+.js-title {
+  font-size: clamp(1rem, 1.3vw, 4rem);
+  font-family: Alibaba;
+  font-weight: 400;
+  color: #ffffff;
+  height: 3.5vh;
+}
+.js-detailed {
+  width: 9vw;
+}
+.js-record {
+  width: 6vw;
+  margin-left: 415px;
+}
+</style>
\ No newline at end of file
diff --git a/src/componets/jsError/navMenu.vue b/src/componets/jsError/navMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5cf6027687db34cc44008ff14ceecb582cb25b5d
--- /dev/null
+++ b/src/componets/jsError/navMenu.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="nav-menu">
+    <!-- logo -->
+    <div class="logo">
+      <img src="@/assets/jsError/logo3.png" alt="Logo" />
+      <span>Revue</span>
+    </div>
+    <!-- 导航栏 -->
+    <el-menu
+      class="el-menu-vertical-demo"
+      default-active="/js-error"
+      background-color="#25253f"
+      text-color="#FFFFFF "
+      active-text-color="#466AEB "
+      router
+    >
+      <el-menu-item index="/">
+        <i class="el-icon-s-home"></i>
+        <span slot="title">首页</span>
+      </el-menu-item>
+
+      <el-menu-item index="/js-error">
+        <i class="el-icon-setting"></i>
+        <span slot="title">Js错误</span>
+      </el-menu-item>
+
+      <el-menu-item index="req-error">
+        <i class="el-icon-setting"></i>
+        <span slot="title">页面性能</span>
+      </el-menu-item>
+
+      <el-menu-item index="/req-error">
+        <i class="el-icon-setting"></i>
+        <span slot="title">接口错误</span>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'nav-menu',
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style  scoped>
+.el-menu {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+.logo {
+  display: flex;
+  width: 154px;
+  height: 47px;
+  padding: 34px 0px 0px 63px;
+  /* 水平显示不换行 */
+  flex-direction: row;
+  /* 从左往右排 */
+  justify-content: flex-start;
+  align-items: center;
+  font-family: Alibaba;
+  font-weight: AlibabaRegular;
+  font-size: 36px;
+  color: #ffffff;
+}
+</style>
\ No newline at end of file
diff --git a/src/componets/jsError/topRight1.vue b/src/componets/jsError/topRight1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6db04ccdd8a9b71c5c81ae8c4a4b87e742f63340
--- /dev/null
+++ b/src/componets/jsError/topRight1.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="topright">
+    <button class="doc">使用文档</button>
+
+    <div id="heathStatus"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topRight',
+  data () {
+    return {
+
+    }
+  },
+  mounted () {
+    var chartDom = document.getElementById('heathStatus');
+    var myChart = this.$echarts.init(chartDom, 'dark');
+    //反方向剩下部分的样式
+
+    var options = {
+      backgroundColor: ' ',
+      series: [{
+        type: 'pie',
+        clockWise: true, //顺时加载
+        hoverAnimation: false, //鼠标移入变大
+        //饼图半径的调节，第一个是内半径，第二个是外半径
+        radius: [50, 50],
+        itemStyle: {
+          normal: {
+            label: {
+              show: false,
+              position: 'outside'
+            },
+
+            borderWidth: 1,
+            borderColor: "#A2C2C0",
+
+          }
+        },
+        graphic: [{ //环形图中间添加文字
+          type: 'text', //通过不同top值可以设置上下显示
+          left: 'center',
+          top: '45%',
+          style: {
+            text: '85' + '\n' + '分',
+            textAlign: 'center',
+            fill: '#FFFFFF ', //文字的颜色
+            width: 30,
+            height: 30,
+            fontSize: 10,
+            fontFamily: "AlibabaMedium"
+          }
+        }],
+
+        data: [{
+          value: 8,
+        },
+        {
+          value: 2,
+          name: '',
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+                position: "center"
+              },
+              labelLine: {
+                show: false
+              },
+              color: "rgba(0,0,0,0)",
+              borderColor: "rgba(0,0,0,0)",
+              borderWidth: 0
+            },
+            emphasis: {
+              color: "#dedede",
+              borderColor: "#dedede",
+              borderWidth: 0
+            }
+          }
+        }
+        ]
+      }, {
+        type: 'pie',
+        clockWise: true,
+        hoverAnimation: false,
+        radius: [65, 65],
+        itemStyle: {
+          normal: {
+            label: {
+              show: false
+            },
+            borderWidth: 10,
+            borderColor: "#BA1DEF",
+          }
+        },
+        data: [{
+          value: 8,
+        },
+        {
+          value: 2,
+          name: '',
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+                position: "center"
+              },
+              labelLine: {
+                show: false
+              },
+              color: "rgba(0,0,0,0)",
+              borderColor: "rgba(0,0,0,0)",
+              borderWidth: 0
+            },
+            emphasis: {
+              color: "#dedede",
+              borderColor: "#dedede",
+              borderWidth: 0
+            }
+          }
+        }
+        ]
+      },]
+    };
+    myChart.setOption(options);
+
+  }
+}
+</script>
+
+<style  scoped>
+.topright {
+  width: 16vw;
+  height: 50vh;
+}
+.doc {
+  width: 6vw;
+  height: 4vh;
+  background: linear-gradient(10deg, #081f37 0%, #123251 100%);
+  border-radius: 27px 27px 27px 27px;
+  opacity: 0.7;
+  border: 1px solid #275079;
+  color: #ffffff;
+  font-family: AlibabaRegular;
+  font-size: 13px;
+  margin: 20px 0px 0 0;
+}
+#heathStatus {
+  width: 10vw;
+  height: 19vh;
+  background-color: #fff;
+  margin: 13vh 0 0 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index ce79eaf7b1de3f5e81fb72b403842b4af85bdb2e..f3c24ed9033ab1e6e6522533ace601239d7d4f05 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,16 +18,19 @@ const routes = [
     component: HomeView
   },
   {
+    // js错误
     path: '/js-error',
     name: 'jsError',
     component: () => import('../views/JsErrorView.vue')
   },
   {
-    path: '/performance',
+    // 性能视图
+    path: 'req-error',
     name: 'performance',
     component: () => import('../views/PerformanceView.vue')
   },
   {
+    // 请求错误视图
     path: '/req-error',
     name: 'reqError',
     component: () => import('../views/ReqErrorView.vue')
diff --git a/src/views/JsErrorView.vue b/src/views/JsErrorView.vue
index 2d0a73b21c67122d4c0c39224e74cc0af6349589..f755a3d36ec48d9379b7efe30b99c92827861493 100644
--- a/src/views/JsErrorView.vue
+++ b/src/views/JsErrorView.vue
@@ -1,36 +1,53 @@
-<!--
- * @Author: arvin(王德江)
- * @Date: 2022-08-05 15:09:01
- * @LastEditors: arvin(王德江)
- * @LastEditTime: 2022-08-05 15:19:14
- * @Description: 
--->
+
 <template>
-  <div>
-    JsErrorView
+  <div class="JsErrorView">
+    <!-- <div class="left"> -->
+    <el-container>
+      <!-- 侧边栏 -->
+      <el-aside width="303px"><nav-menu /></el-aside>
+      <!-- 主内容展示区 -->
+      <el-main>
+        <main-content />
+      </el-main>
+    </el-container>
   </div>
 </template>
 
 <script>
+import NavMenu from '@/componets/jsError/navMenu.vue'
+import MainContent from '@/componets/jsError/mainContent.vue'
+
 export default {
   name: 'JsErrorView',
+  components: { NavMenu, MainContent },
+  data () {
+    return {}
 
-  data() {
-    return {
-      
-    };
   },
-
-  mounted() {
-    
+  mounted () {
   },
-
   methods: {
-    
   },
 };
 </script>
 
-<style lang="scss" scoped>
-
+<style  scoped>
+body {
+  margin: 0;
+  padding: 0;
+}
+.JsErrorView {
+  display: flex;
+}
+.el-aside {
+  background-color: #25253f;
+  height: 100vh;
+}
+.el-main {
+  width: 84.2vw;
+  padding: 0;
+  flex: 1;
+  background-color: #000000;
+  height: 100vh;
+}
 </style>
\ No newline at end of file