three

package.json

@@ -11,7 +11,8 @@
     "core-js": "^3.6.5",
     "echarts": "^5.6.0",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vue2-scale-box": "^0.1.7"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/router/index.js

@@ -36,6 +36,11 @@ const routes = [
     name: 'liaowangtai',
     component: () => import(/* webpackChunkName: "about" */ '../views/liaowangtai/Index.vue')
   },
+  {
+    path: '/sanshengjiaohui',
+    name: 'sanshengjiaohui',
+    component: () => import(/* webpackChunkName: "about" */ '../views/sanshengjiaohui/index.vue')
+  }
 ]
 
 const router = new VueRouter({

src/views/sanshengjiaohui/index.vue

@@ -0,0 +1,836 @@
+<template>
+  <div class="bgbox">
+    <div class="titlk">
+      <div class="titlk_1">
+        <span class="titlk_1_2"></span>
+        <span class="titlk_1_3">长春市</span>
+        <span class="titlk_1_4">晴   17~28℃</span>
+      </div>
+      <div class="titlk_2">
+        <span class="titlk_2_2"></span>
+        <span class="titlk_1_3">2024-5-18</span>
+        <span class="titlk_1_4">12:28:59</span>
+      </div>
+    </div>
+    <div class="con">
+      <div class="con_one">
+        <div class="con_one_a">规划建设</div>
+        <div class="con_one_a_k">
+          <div class="tzqk">投资情况</div>
+        </div>
+        <div class="con_one_a_a">
+          <div
+            id="con_one_a_b"
+            style="width: 100%; height: 100%;"
+          ></div>
+          <div class="con_one_a_b_a"></div>
+        </div>
+        <div class="con_one_1">
+            <div class="tzqk">计划情况</div>
+            <div class="con_one_2">
+              <div class="con_one_3">基础设施</div>
+              <div class="con_one_4">运输装备</div>
+              <div class="con_one_4">运输服务</div>
+              <div class="con_one_6">固定资产投资</div>
+              <div class="con_one_4">安全生产</div>
+              <div class="con_one_4">科技创新</div>
+            </div>
+        </div>
+        <div class="con_one_a_a">
+          <div
+            id="con_one_a_b_c"
+            style="width: 100%; height: 100%;"
+          ></div>
+          <div class="con_one_a_b_a"></div>
+        </div>
+      </div>
+      <div class="con_one">
+        <div class="con_one_1_2">
+            <div class="tzqk">公路现状</div>
+            <div class="con_one_2">
+              <div class="con_one_3">公路建设</div>
+              <div class="con_one_4">公路管理</div>
+              <div class="con_one_4">公路养护</div>
+              <div class="con_one_4">公路运营</div>
+            </div>
+        </div>
+        <div class="con_one_a_a">
+          <div
+            id="con_one_a_b_c_1"
+            style="width: 100%; height: 100%;"
+          ></div>
+          <div class="con_one_a_b_a"></div>
+        </div>
+        <div class="con_one_1_2_3">
+            <div class="tzqk">水路现状</div>
+        </div>
+        <div class="con_one_a_a_vb">
+          <div
+            id="con_one_a_b_c_1_o"
+            style="width: 100%; height: 100%;"
+          ></div>
+          <div class="con_one_a_b_a_i"></div>
+        </div>
+        <div class="con_one_a_a_vb_o">
+          <div class="con_one_a_a_vb_o1">
+            <span class="con_text_a">畅行瞭望台</span>
+          </div>
+          <div class="con_one_a_a_vb_o2">
+            <span class="con_text_a">三省交辉</span>
+          </div>
+          <div class="con_one_a_a_vb_o3">
+            <span class="con_text_a">省途亮绩</span>
+          </div>
+          <div class="con_one_a_a_vb_o4">
+            <span class="con_text_a">交畅智汇</span>
+          </div>
+          <div class="con_one_a_a_vb_o5">
+            <span class="con_text_a">应急领航</span>
+          </div>
+          <div class="con_one_a_a_vb_o6">
+            <span class="con_text_a">吉问吉答</span>
+          </div>
+        </div>
+      </div>
+      <div class="con_one">
+        <div class="con_one_a">政策差异化</div>
+        <div class="con_one_a_nm">
+          <div class="con_one_a_nm_1">
+            <div class="con_one_a_nm_12">
+              <div>黑龙江省道路运输条例</div>
+              <div >黑龙江省公路条例</div>
+              <div >道路旅客运输及客运站管理规定</div>
+              <div >国际道路运输管理规定</div>
+            </div>
+          </div>
+          <div class="con_one_a_nm_2">
+            <div class="con_one_a_nm_12_9">
+              <div>吉林省高速公路管理办法</div>
+              <div>(2021修改)</div>
+              <div >吉林省道路运输条例(2023修改)</div>
+              <div >吉林省水路交通条例(2022修改) </div>
+              <div >吉林省农村公路条例(2022修改)</div>
+              <div >吉林省城市公共客运管理条例</div>
+              <div >吉林省农村公路条例(2022修改)</div>
+            </div>
+          </div>
+          <div class="con_one_a_nm_3">
+            <div class="con_one_a_nm_12">
+              <div>辽宁省道路运输管理条例</div>
+              <div >辽宁省高速公路管理条例</div>
+              <div >国内水路运输管理条例</div>
+              <div >收费公路管理条例</div>
+              <div >防治船舶污染海洋环境管理条例</div>
+              <div >铁路安全管理条例</div>
+            </div>
+          </div>
+        </div>
+        <div class="con_one_a">亮点业绩</div>
+        <div class="con_one_a_ns">
+          <div class="con_one_a_ns_o"></div>
+          <div class="con_one_a_ns_o_g">查看更多> </div>
+          <div class="con_one_a_ns_o_g1">
+            <div class="con_one_a_ns_o_g1_p">黑龙江逐路逐桥逐隧再排查再整治</div>
+            <div class="con_one_a_ns_o_g1_p1">7月21日，在原有12个督导检查组的基础上，黑龙江省交通运输厅增补24个工作组190人，指导各地逐路逐桥逐隧进行再排查、再整治，重点排查桥梁导流设施、锥坡、墩台墩柱等隐患部位，以及高边坡、山区沟谷、临水临崖、靠山易积水路段和采空区的安全隐患。黑龙江省印发《公路防汛隐患排查及抢险技术指南》，邀请专家辅导培训，抽调16名桥梁技术专家提供技术指导，提升排查整治精准度和实效性。</div>
+          </div>
+        </div>
+        <div class="con_one_a_ns">
+          <div class="con_one_a_ns_o_o"></div>
+          <div class="con_one_a_ns_o_g">查看更多> </div>
+          <div class="con_one_a_ns_o_g1">
+            <div class="con_one_a_ns_o_g1_p">黑龙江逐路逐桥逐隧再排查再整治</div>
+            <div class="con_one_a_ns_o_g1_p1">7月21日，在原有12个督导检查组的基础上，黑龙江省交通运输厅增补24个工作组190人，指导各地逐路逐桥逐隧进行再排查、再整治，重点排查桥梁导流设施、锥坡、墩台墩柱等隐患部位，以及高边坡、山区沟谷、临水临崖、靠山易积水路段和采空区的安全隐患。黑龙江省印发《公路防汛隐患排查及抢险技术指南》，邀请专家辅导培训，抽调16名桥梁技术专家提供技术指导，提升排查整治精准度和实效性。</div>
+          </div>
+        </div>
+        <div class="con_one_a_ns">
+          <div class="con_one_a_ns_o_o_0"></div>
+          <div class="con_one_a_ns_o_g">查看更多> </div>
+          <div class="con_one_a_ns_o_g1">
+            <div class="con_one_a_ns_o_g1_p">黑龙江逐路逐桥逐隧再排查再整治</div>
+            <div class="con_one_a_ns_o_g1_p1">7月21日，在原有12个督导检查组的基础上，黑龙江省交通运输厅增补24个工作组190人，指导各地逐路逐桥逐隧进行再排查、再整治，重点排查桥梁导流设施、锥坡、墩台墩柱等隐患部位，以及高边坡、山区沟谷、临水临崖、靠山易积水路段和采空区的安全隐患。黑龙江省印发《公路防汛隐患排查及抢险技术指南》，邀请专家辅导培训，抽调16名桥梁技术专家提供技术指导，提升排查整治精准度和实效性。</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getEchartInstance } from "./components/bigScreen";
+export default {
+  name:'three',
+  data(){
+    return{
+    }
+  },
+  mounted(){
+    this.init()
+  },
+  methods:{
+    init() {
+      this.initChartsleftOne()
+      this.initChartslefttwo()
+      this.initChartsleftthree()
+      this.initChartslefttfour()
+    },
+    initChartsleftOne() {
+      let con_one_a_b_charts = getEchartInstance("con_one_a_b");
+      const con_one_a_b_charts_option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ['计划投资总额', '中央投资总额', '已完成投资总额'],
+          axisLabel: {
+            interval: 0,
+            inside: false, // 本来是true，改为false后将图形中的字移到图形外边
+            color: "#FFF", // 修改坐标轴字体颜色
+            fontSize: 36, // 调整坐标轴字体大小
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "万元",
+          nameTextStyle: {
+            padding: [20, 10, 10, -50], // 四个数字分别为上右下左与原位置距离
+            fontSize: 36, // 调整坐标轴字体大小
+            color: "#FFF",
+          },
+          axisLabel: {
+            color: "#FFF", // 修改坐标轴字体颜色
+            fontSize: 36, // 调整坐标轴字体大小
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        // grid: {
+        //     // left: '10%', // 图表整体与容器左侧的距离
+        //     // right: '10%', // 图表整体与容器右侧的距离
+        //     // top: '90%', // 图表整体与容器顶部的距离
+        //     // bottom: '10%', // 图表整体与容器底部的距离
+        //     containLabel: true // 确保坐标轴标签在网格区域内
+        // },
+        legend: {
+          data: ["黑龙江",'吉林','辽宁'],
+          textStyle: {
+            // 图例文字的样式
+            color: "#FFF", // 图例文字颜色
+            fontSize: 36, // 图例文字大小
+          },
+          right:'2%'
+        },
+        grid: {
+          left: "0",
+          right: "0",
+          bottom: "3%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "黑龙江",
+            data: [50, 100, 150, 200,300],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+          {
+            name: "吉林",
+            data: [50, 100, 150, 200,300],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+          {
+            name: "辽宁",
+            data: [50, 100, 150, 200,300],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+
+        ],
+      };
+      con_one_a_b_charts.setOption(con_one_a_b_charts_option);
+    },
+    initChartslefttwo() {
+      let con_one_a_b_c_charts = getEchartInstance("con_one_a_b_c");
+      const con_one_a_b_c_charts_option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ['铁路', '公路', '水路','民航','邮政','城市客运'],
+          axisLabel: {
+            interval: 0,
+            inside: false, // 本来是true，改为false后将图形中的字移到图形外边
+            color: "#FFF", // 修改坐标轴字体颜色
+            fontSize: 36, // 调整坐标轴字体大小
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "数量（个）",
+          nameTextStyle: {
+            padding: [10, 10, 5, 60],
+            fontSize: 36, // 调整坐标轴字体大小
+            color: "#FFF",
+          },
+          axisLabel: {
+            color: "#FFF", // 修改坐标轴字体颜色
+            fontSize: 36, // 调整坐标轴字体大小
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        legend: {
+          data: ["黑龙江",'吉林','辽宁'],
+          textStyle: {
+            // 图例文字的样式
+            color: "#FFF", // 图例文字颜色
+            fontSize: 36, // 图例文字大小
+          },
+          right:'2%'
+        },
+        grid: {
+          left: "0",
+          right: "0",
+          bottom: "3%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "黑龙江",
+            data: [50, 100, 150, 200,300,150,260,500],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+          {
+            name: "吉林",
+            data: [50, 100, 150, 200,300,150,260,500],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+          {
+            name: "辽宁",
+            data: [50, 100, 150, 200,300,150,260,500],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+
+        ],
+      };
+      con_one_a_b_c_charts.setOption(con_one_a_b_c_charts_option);
+    },
+    initChartsleftthree() {
+      let con_one_a_b_c_1 = getEchartInstance("con_one_a_b_c_1");
+      const con_one_a_b_c_1_option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ['公路建设里程', '桥梁建设总数', '隧道建设总数','隧道建设总数','客运站建设数量'],
+          axisLabel: {
+            interval: 0,
+            inside: false, // 本来是true，改为false后将图形中的字移到图形外边
+            color: "#FFF", // 修改坐标轴字体颜色
+            fontSize: 36, // 调整坐标轴字体大小
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "数量（个）",
+          nameTextStyle: {
+            padding: [10, 10, 5, 60],
+            fontSize: 36, // 调整坐标轴字体大小
+            color: "#FFF",
+          },
+          axisLabel: {
+            color: "#FFF", // 修改坐标轴字体颜色
+            fontSize: 36, // 调整坐标轴字体大小
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        legend: {
+          data: ["黑龙江",'吉林','辽宁'],
+          textStyle: {
+            // 图例文字的样式
+            color: "#FFF", // 图例文字颜色
+            fontSize: 36, // 图例文字大小
+          },
+          right:'2%'
+        },
+        grid: {
+          left: "0",
+          right: "0",
+          bottom: "3%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "黑龙江",
+            data: [200,300,150,260,500],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+          {
+            name: "吉林",
+            data: [50, 100, 150, 200,300],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+          {
+            name: "辽宁",
+            data: [50, 100, 150, 260,500],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+
+        ],
+      };
+      con_one_a_b_c_1.setOption(con_one_a_b_c_1_option);
+    },
+    initChartslefttfour() {
+      let con_one_a_b_c_1_o = getEchartInstance("con_one_a_b_c_1_o");
+      const con_one_a_b_c_1_o_option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ['江河/湖泊/水库', '航道', '船舶/船舶检验','水运设施','水运企业/运力'],
+          axisLabel: {
+            interval: 0,
+            inside: false, // 本来是true，改为false后将图形中的字移到图形外边
+            color: "#FFF", // 修改坐标轴字体颜色
+            fontSize: 36, // 调整坐标轴字体大小
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "数量（个）",
+          nameTextStyle: {
+            padding: [10, 10, 5, 60],
+            fontSize: 36, // 调整坐标轴字体大小
+            color: "#FFF",
+          },
+          axisLabel: {
+            color: "#FFF", // 修改坐标轴字体颜色
+            fontSize: 36, // 调整坐标轴字体大小
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        legend: {
+          data: ["黑龙江",'吉林','辽宁'],
+          textStyle: {
+            // 图例文字的样式
+            color: "#FFF", // 图例文字颜色
+            fontSize: 36, // 图例文字大小
+          },
+          right:'2%'
+        },
+        grid: {
+          left: "0",
+          right: "0",
+          bottom: "3%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "黑龙江",
+            data: [50, 100, 150, 200,300,150,260,500],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+          {
+            name: "吉林",
+            data: [50, 100, 150, 200,300,150,260,500],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+          {
+            name: "辽宁",
+            data: [50, 100, 150, 200,300,150,260,500],
+            type: "bar",
+            barWidth:25,
+            barGap:'1',
+          },
+
+        ],
+      };
+      con_one_a_b_c_1_o.setOption(con_one_a_b_c_1_o_option);
+    }
+  }
+}
+</script>
+<style>
+.bgbox {
+  width: 100%;
+  height: 3420px;
+  background: url('./assets/jtzl.png') no-repeat;
+  background-size: 100% 100%;
+  background-attachment: fixed;
+  color: #fff;
+}
+.con {
+  padding-top: 150px;
+  display: flex;
+}
+.con_one {
+  width: 33.33%;
+  padding: 0 100px;
+}
+.con_one_a {
+  height: 117px;    
+  font-size: 64px;
+  font-family: Alimama ShuHeiTi;
+  text-align: left;
+  padding-left: 10%;
+  padding-top: 2%;
+  font-weight: bold;
+  color: #FFFFFF;
+  background: url('./assets/2284.png') no-repeat;
+  background-size: 100% 100%;
+  /* background-attachment: fixed; */
+}
+.con_one_a_a {
+  width: 1712px;
+  height: 1000px;
+  padding-left: 4%;
+  position: relative;
+  margin-bottom: 8%;
+}
+.con_one_a_a_vb {
+  width: 1712px;
+  height: 900px;
+  padding-left: 4%;
+  position: relative;
+  margin-bottom: 5%;
+}
+#con_one_a_b{
+  width: 100%;
+  height: 100%;
+}
+.con_one_a_k {
+  display: flex;
+  height: 90px;
+  margin-bottom: 6%;
+  margin-top: 6%;
+  padding-left: 2%;
+}
+.tzqk {
+  /* width: 345px;
+  height: 89px; */
+  /* background: url('./assets/tzqk.png') no-repeat;
+  background-size: 100% 100%; */
+  width: 345px;
+  font-size: 42px;
+  line-height: 90px;
+  background: linear-gradient(270deg, rgba(54, 111, 172, 0) 0%, rgba(54, 111, 172, 0.88) 53%, rgba(54, 111, 172, 0) 100%);
+}
+.con_one_a_b_a {
+  position: absolute;
+  top: 960px;
+  left: 80px;
+  width: 1712px;
+  height: 124px;
+  background: url('./assets/kjk.png') no-repeat;
+  background-size: 100% 100%;
+  align-items: center;
+}
+.con_one_a_b_a_i {
+  position: absolute;
+  top: 860px;
+  left: 80px;
+  width: 1712px;
+  height: 124px;
+  background: url('./assets/kjk.png') no-repeat;
+  background-size: 100% 100%;
+  align-items: center;
+}
+.con_one_a_b_a_p {
+  width: 0%;
+  font-size: 42px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.con_one_1 {
+  height: 90px;
+  display: flex;
+  margin-bottom: 6%;
+  margin-top: 6%;
+}
+.con_one_1_2 {
+  height: 90px;
+  display: flex;
+  margin-bottom: 6%;
+  margin-top: 15%;
+}
+.con_one_1_2_3 {
+  height: 90px;
+  display: flex;
+  margin-bottom: 6%;
+  margin-top: 6%;
+}
+.con_one_2 {
+  display: flex;
+  margin-left: 98px;
+  font-size: 40px;
+  line-height: 90px;
+}
+.con_one_3 {
+  width: 171px;
+  height: 48px;
+}
+.con_one_4 {
+  width: 163px;
+  height: 48px;
+  margin-left: 44px;
+}
+.con_one_6 {
+  height: 48px;
+  width: 245px;
+  margin-left: 44px;
+}
+.con_one_a_a_vb_o {
+  display: flex;
+  justify-content: space-between;
+}
+.con_one_a_a_vb_o1 {
+  position: relative;
+  width: 246px;
+  height: 246px;
+  background: url('./assets/j1.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_one_a_a_vb_o2 {
+  position: relative;
+
+  width: 246px;
+  height: 246px;
+  background: url('./assets/j2.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_one_a_a_vb_o3 {
+  position: relative;
+
+  width: 246px;
+  height: 246px;
+  background: url('./assets/j3.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_one_a_a_vb_o4 {
+  position: relative;
+
+  width: 246px;
+  height: 246px;
+  background: url('./assets/j4.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_one_a_a_vb_o5 {
+  position: relative;
+
+  width: 246px;
+  height: 246px;
+  background: url('./assets/j5.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_one_a_a_vb_o6 {
+  position: relative;
+
+  width: 246px;
+  height: 246px;
+  background: url('./assets/j6.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_text_a {
+  position: absolute;
+  bottom: -70px;
+  left: 8%;
+  font-size: 44px;
+  margin: 0 auto;
+}
+.con_one_a_nm {
+  margin-top: 48px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 82px;
+}
+.con_one_a_nm_1 {
+  width: 558px;
+  height: 782px;
+  background: url('./assets/12x.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_one_a_nm_12 {
+  width: 504px;
+  padding: 260px 27px 258px 27px;
+  font-family: Source Han Sans;
+  font-size: 36px;
+  font-weight: normal;
+  line-height: 66px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+.con_one_a_nm_12_9 {
+  width: 501px;
+  height: 462px;
+  padding: 260px 27px 258px 27px;
+  font-family: Source Han Sans;
+  font-size: 36px;
+  font-weight: normal;
+  text-align: left;
+  overflow: hidden;
+}
+.con_one_a_nm_2 {
+  width: 558px;
+  height: 782px;
+  background: url('./assets/13x.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_one_a_nm_3 {
+  width: 558px;
+  height: 782px;
+  background: url('./assets/14x.png') no-repeat;
+  background-size: 100% 100%;
+}
+.con_one_a_ns {
+  position: relative;
+  width: 1754px;
+  height: 468px;
+  background: url('./assets/jjxx.png') no-repeat;
+  background-size: 100% 100%;
+  margin-top: 48px;
+}
+.con_one_a_ns_o {
+  width: 385px;
+  height: 48px;
+  background: url('./assets/sfs.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 40%;
+  margin-right: 24%;
+}
+.con_one_a_ns_o_o {
+  width: 385px;
+  height: 48px;
+  background: url('./assets/jlkm.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 40%;
+  margin-right: 24%;
+}
+.con_one_a_ns_o_o_0 {
+  width: 385px;
+  height: 48px;
+  background: url('./assets/5sd.png') no-repeat;
+  background-size: 100% 100%;
+  margin-left: 40%;
+  margin-right: 24%;
+}
+.con_one_a_ns_o_g {
+  position: absolute;
+  top: 0;
+  right:20px;
+  font-size: 36px;
+  width: 173px;
+  height: 68px;
+  display: inline-block;
+}
+.con_one_a_ns_o_g1 {
+  width: 1674px;
+height: 294px;
+margin: 32px 40px 35px 40px;
+}
+.con_one_a_ns_o_g1_p {
+  font-size: 40px;
+}
+.con_one_a_ns_o_g1_p1 {
+  font-family: Source Han Sans;
+  font-size: 36px;
+  font-weight: normal;
+  line-height: 68px;
+  color: #84ACE8;
+  height: 202px;
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.titlk {
+  display: flex;
+  justify-content: space-between;
+  height: 66px;
+  line-height: 66px;
+  font-size: 42px;
+  font-weight: 500;
+  padding-top: 78px;
+  align-items: center;
+}
+.titlk_1{
+  /* width: 50%; */
+  padding-left: 248px;
+  line-height: 66px;
+  text-align: left;
+}
+.titlk_1_2{
+  display: inline-block;
+  width: 110px;
+  height: 66px;
+  background: url('./assets/lj1.png') no-repeat;
+  background-size: 100% 100%;
+}
+.titlk_2 {
+  /* width: 50%; */
+  height: 66px;
+  padding-right: 120px;
+}
+.titlk_2_2 {
+  width: 110px;
+  height: 66px;
+  background: url('./assets/路径@1x.png') no-repeat;
+  background-size: 100% 100%;
+}
+</style>