增加外部ifream功能

src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-06-11 09:19:41
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2025-06-13 15:50:44
+ * @LastEditTime: 2025-06-16 14:44:21
  * @FilePath: /fangzhen/devls/src/router/index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -29,10 +29,77 @@ const routes = [
     name: "one",
     component: () => import(/* webpackChunkName: "about" */ "../views/one.vue"),
   },
-   {
-    path: "/zzz",
-    name: "zzz",
-    component: () => import(/* webpackChunkName: "about" */ "../views/zzz.vue"),
+  {
+    path: "/four",
+    name: "four",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/four.vue"),
+  },
+  {
+    path: "/a1",
+    name: "a1",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/a1.vue"),
+  },
+  {
+    path: "/a2",
+    name: "a2",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/a2.vue"),
+  },
+  {
+    path: "/b1",
+    name: "b1",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/b1.vue"),
+  },
+  {
+    path: "/b2",
+    name: "b2",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/b2.vue"),
+  },
+  {
+    path: "/b3",
+    name: "b3",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/b3.vue"),
+  },
+  {
+    path: "/b4",
+    name: "b4",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/b4.vue"),
+  },
+  {
+    path: "/b5",
+    name: "b5",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/b5.vue"),
+  },
+  {
+    path: "/b6",
+    name: "b6",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/b6.vue"),
+  },
+  {
+    path: "/c1",
+    name: "c1",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/c1.vue"),
+  },
+  {
+    path: "/c2",
+    name: "c2",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/c2.vue"),
+  },
+  {
+    path: "/d1",
+    name: "d1",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/utilsPage/d1.vue"),
   },
 ];
 

src/views/Home.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2025-06-11 09:19:41
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2025-06-13 15:43:42
+ * @LastEditTime: 2025-06-16 10:47:53
  * @FilePath: /fangzhen/devls/src/views/Home.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -52,7 +52,10 @@ export default {
         type: "warning",
       });
     },
-    go4() {},
+    go4() {
+        this.$router.push("/four");
+
+    },
   },
 };
 </script>

src/views/four.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:53:20
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="home flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="box flex">
+      <div class="center">
+        <div class="t flex">
+          <div class="l">服务程序软件仿真子系统</div>
+
+          <div class="r">
+            <el-button @click="$router.go(-1)" type="text">返回首页</el-button>
+          </div>
+        </div>
+        <div class="bototm flex">
+          <div class="">
+            <div class="tt flex">
+              <!-- <div> -->
+              <img src="~@/assets/fa.png" alt="" />
+              <!-- </div> -->
+              <span>服务测试工具</span>
+            </div>
+
+            <div
+              class="bb flex"
+              v-for="item in aArr"
+              :key="item"
+              @click="$router.push(item.path)"
+            >
+              <img src="~@/assets/fbbi.png" alt="" />
+              <span>{{ item.name }}</span>
+            </div>
+          </div>
+          <div class="">
+            <div class="tt flex">
+              <!-- <div> -->
+              <img src="~@/assets/fb.png" alt="" />
+              <!-- </div> -->
+              <span>服务测试工具</span>
+            </div>
+
+            <div
+              class="bb flex"
+              v-for="item in bArr"
+              :key="item"
+              @click="$router.push(item.path)"
+            >
+              <img src="~@/assets/fbbi.png" alt="" />
+              <span>{{ item.name }}</span>
+            </div>
+          </div>
+          <div class="">
+            <div class="tt flex">
+              <!-- <div> -->
+              <img src="~@/assets/fc.png" alt="" />
+              <!-- </div> -->
+              <span>服务测试工具</span>
+            </div>
+
+            <div
+              class="bb flex"
+              v-for="item in cArr"
+              :key="item"
+              @click="$router.push(item.path)"
+            >
+              <img src="~@/assets/fbbi.png" alt="" />
+              <span>{{ item.name }}</span>
+            </div>
+          </div>
+          <div class="">
+            <div class="tt flex">
+              <!-- <div> -->
+              <img src="~@/assets/fd.png" alt="" />
+              <!-- </div> -->
+              <span>服务测试工具</span>
+            </div>
+
+            <div
+              class="bb flex"
+              v-for="item in dArr"
+              :key="item"
+              @click="$router.push(item.path)"
+            >
+              <img src="~@/assets/fbbi.png" alt="" />
+              <span>{{ item.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      aArr: [
+        { name: "窗口调试工具", path: "/a1" },
+        { name: "转码工具", path: "/a2" },
+      ],
+      bArr: [
+        { name: "MDS查询", path: "/b1" },
+        { name: "图片转BASE64", path: "/b2" },
+        { name: "时间戳转换", path: "/b3" },
+        { name: "JSON 转换 Query String", path: "/b4" },
+        { name: "URL编码转换", path: "/b5" },
+        { name: "SQL格式化", path: "/b6" },
+      ],
+      cArr: [
+        { name: "JSON格式化工具", path: "/c1" },
+        { name: "字符串差异对比", path: "/c2" },
+      ],
+      dArr: [{ name: "端口检测工具", path: "/d1" }],
+    };
+  },
+  methods: {
+    go1() {
+      this.$router.push("/one");
+    },
+    go2() {
+      this.$message({
+        message: "正在开发",
+        type: "warning",
+      });
+    },
+    go3() {
+      this.$message({
+        message: "正在开发",
+        type: "warning",
+      });
+    },
+    go4() {
+      this.$router.push("/four");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.box {
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 106px;
+}
+.center {
+  width: 1710px;
+  height: 740px;
+  background: #fff;
+  margin: 0 auto;
+  // justify-content: space-between;
+  // align-items: center;
+  padding: 67px 50px;
+  box-sizing: border-box;
+  .t {
+    justify-content: center;
+    .l {
+      font-size: 28px;
+      margin-right: 10px;
+    }
+    .r {
+      padding-top: 5px;
+    }
+  }
+  .bototm {
+    justify-content: space-around;
+    margin-top: 63px;
+    .tt {
+      align-items: center;
+      margin-bottom: 30px;
+      img {
+        margin-right: 5px;
+      }
+      span {
+        font-size: 20px;
+        color: #357fe7;
+      }
+    }
+    .bb {
+      align-items: center;
+      transition: all 0.5s;
+      box-sizing: border-box;
+      width: 260px;
+      height: 60px;
+      border: 1px solid #daebf8;
+      color: #333333;
+      font-size: 16px;
+      cursor: pointer;
+      margin-bottom: 10px;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 30px;
+        margin-right: 5px;
+      }
+
+      &:hover {
+        background: #f6fbff;
+      }
+    }
+  }
+}
+</style>

src/views/utilsPage/a1.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:40:17
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe
+          src="https://getman.cn/
+"
+        ></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 110%;
+    position: absolute;
+    top: -70px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/a2.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:49:40
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe
+          src=" http://www.jsons.cn/urlencode"
+        ></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 117%;
+    position: absolute;
+    top: -105px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/b1.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:52:36
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://www.cmd5.com/",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 127%;
+    position: absolute;
+    top: -158px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/b2.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:53:37
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://www.jyshare.com/front-end/59/",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 119%;
+    position: absolute;
+    top: -70px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/b3.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:54:45
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://www.jyshare.com/front-end/852/?utm_source=heifan",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height:119%;
+    position: absolute;
+    top: -70px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/b4.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:56:06
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://tool.offso.com/json2qs",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 111%;
+    position: absolute;
+    top: -93px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/b5.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:58:18
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://tool.offso.com/urlencode ",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 111%;
+    position: absolute;
+    top: -93px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/b6.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:58:38
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://tool.offso.com/sql",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 111%;
+    position: absolute;
+    top: -93px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/c1.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 14:59:14
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://bejson.wlphp.com/",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 110%;
+    position: absolute;
+    top: -70px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/c2.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 15:00:16
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://diff.wlphp.com/",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 110%;
+    position: absolute;
+    top: -70px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>

src/views/utilsPage/d1.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-16 15:01:05
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="one flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="tb flex">
+      <div class="l">嵌入式软件仿真子系统</div>
+      <!-- <div class="r"> -->
+      <el-button @click="$router.go(-2)" type="text">首页</el-button> /
+      <el-button @click="$router.go(-1)" type="text"
+        >服务程序软件仿真子系统</el-button
+      >
+      <!-- </div> -->
+    </div>
+
+    <div class="foot flex">
+      <div class="center">
+        <iframe :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      src: "https://duankou.wlphp.com/",
+    };
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.one {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tb {
+  margin-top: 10px;
+  margin-left: 20px;
+  align-items: center;
+  .l {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 22px;
+    letter-spacing: normal;
+    color: #333333;
+    margin-right: 10px;
+  }
+  .r {
+  }
+}
+.tc {
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+  position: relative;
+  .item {
+    width: 260px;
+    height: 60px;
+    // flex: 1;
+    text-align: center;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      width: 260px;
+      height: 60px;
+      line-height: 60px;
+      font-size: 16px;
+      &.active {
+        color: #fff;
+      }
+    }
+    img {
+      width: 260px;
+      height: 60px;
+    }
+  }
+}
+.foot {
+  // margin-top:22px;
+  flex: 1;
+  // background: red;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  // padding: 0 106px;
+  position: relative;
+  overflow: hidden;
+  iframe {
+    width: 100%;
+    height: 110%;
+    position: absolute;
+    top: -70px;
+  }
+  // .center {
+  //   width: 1710px;
+  //   height: 740px;
+  //   background: #fff;
+  //   // margin: 0 auto;
+  //   justify-content: space-between;
+  //   align-items: center;
+  //   // padding: 0 50px;
+  //   overflow: hidden;
+  //   position: relative;
+  // }
+}
+</style>