ggfwjsc/src/view/sy.vue

<template>
  <div class="module">
    <div class="displayFlex left_bg">
      <div class="flex1">
        <div class="yd_title left_1">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="left_1_bg">
          <div class="item yl_1">
            <div class="item_title">
              职工基本<span class="blue">养老</span>保险
            </div>
            <div class="item_content">
              <div class="sr">
                <span class="left">收入：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.zgylbxzsr }}万元</span
                >
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.zgylbxzzc }}万元</span
                >
              </div>
            </div>
          </div>
          <div class="item yl_2">
            <div class="item_title"><span class="blue">工伤</span>保险</div>
            <div class="item_content">
              <div class="sr">
                <span class="left">收入：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.gsbxzsr }}万元</span
                >
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.gsbxzzc }}万元</span
                >
              </div>
            </div>
          </div>
          <div class="item yl_3">
            <div class="item_title">
              城乡居民<span class="blue">养老</span>保险
            </div>
            <div class="item_content">
              <div class="sr">
                <span class="left">收入：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.cxylbxzsr }}万元</span
                >
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.cxylbxzzc }}万元</span
                >
              </div>
            </div>
          </div>
          <div class="item yl_4">
            <div class="item_title">
              职工基本<span class="yellow">医疗</span>保险
            </div>
            <div class="item_content">
              <div class="sr">
                <span class="left">收入：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.zgyilbxzsr }}万元</span
                >
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.zgyilbxzzc }}万元</span
                >
              </div>
            </div>
          </div>
          <div class="item yl_5">
            <div class="item_title">
              城乡居民<span class="yellow">医疗</span>保险
            </div>
            <div class="item_content">
              <div class="sr">
                <span class="left">收入：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.cxyilbxzsr }}万元</span
                >
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right"
                  >{{ data.LivelihoodWelfare.cxyilbxzzc }}万元</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="left_1_1"></div>
        <div class="left_jzfw">
          <div class="left_1_2">
            <div class="top">救助人数</div>
            <div class="bottom">{{ data.salvageServices.jzrc }}</div>
          </div>
          <div class="left_1_3">
            <div class="top">救助金额</div>
            <div class="bottom">{{ data.salvageServices.jzje }}万</div>
          </div>
        </div>
      </div>
      <div class="flex1" style="margin-top: 10px">
        <div class="yd_title left_2">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="left_2_top">
          <div class="item school">
            <div class="shang">学校</div>
            <div class="xia">{{ data.education.xxzs }}</div>
          </div>
          <div class="item teacher">
            <div class="shang">教师</div>
            <div class="xia">{{ data.education.jzgzs }}</div>
          </div>
          <div class="item student">
            <div class="shang">学生</div>
            <div class="xia">{{ data.education.xszs }}</div>
          </div>
        </div>
        <div class="left_2_bottom">
          <div class="left_2_bottom_item">
            <div class="left_2_bottom_item_shang">
              <div class="left">
                <span class="span1">{{ jysyList[0].title }}</span
                >学校师生比
              </div>
              <div class="right">
                <span class="span1">{{ jysyList[0].teacher }}</span
                >:{{ jysyList[0].student }}
              </div>
            </div>
            <div class="left_2_bottom_item_xia">
              <div class="csbl" :style="cs"></div>
            </div>
          </div>
          <div class="left_2_bottom_item">
            <div class="left_2_bottom_item_shang">
              <div class="left">
                <span class="span2">{{ jysyList[1].title }}</span
                >学校师生比
              </div>
              <div class="right">
                {{ jysyList[1].teacher }}:{{ jysyList[1].student }}
              </div>
            </div>
            <div class="left_2_bottom_item_xia">
              <div class="ncbl" :style="nc"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex1" style="margin-top: 10px">
        <div class="yd_title left_3">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="left_3_1">
          <div
            class="left_3_1_item"
            @click="showDialog('就业培训', '/api/ggfwyth/jypxList')"
          >
            <div>{{ data.employmentService.jypx }}</div>
            <div>就业培训</div>
            <div class="moveImg"></div>
          </div>
          <div
            class="left_3_1_item"
            @click="showDialog('就业见习服务', '/api/ggfwyth/jyjxfwList')"
          >
            <div>{{ data.employmentService.jyjxfw }}</div>
            <div>就业见习服务</div>
            <div class="moveImg"></div>
          </div>
          <div
            class="left_3_1_item"
            @click="showDialog('就业援助', '/api/ggfwyth/jyyzList')"
          >
            <div>{{ data.employmentService.jyyz }}</div>
            <div>就业援助</div>
            <div class="moveImg"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="displayFlex center_bg">
      <div class="flex1">
        <div class="people_total">
          <img
            src="../assets/images/sy/主页人口.gif"
            style="width: 70%; height: 112%; margin: -2% 15%"
            alt=""
          />
          <div class="people_total_item left">
            <div class="number">{{ data.PopulationData.man }}</div>
            <img src="../assets/images/sy/man.png" alt="" />
            <div class="sex">男性人口</div>
            <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
          </div>
          <div class="people_total_item2 center">
            <img src="../assets/images/sy/people_total.png" alt="" />
            <div class="number">{{ data.PopulationData.rkzs }}</div>
            <div class="total">人口总数</div>
          </div>
          <div class="people_total_item right">
            <div class="number">{{ data.PopulationData.woman }}</div>
            <img src="../assets/images/sy/woman.png" alt="" />
            <div class="sex">女性人口</div>
            <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
          </div>
        </div>
        <ePie2
          style="margin-top: 20px"
          :list="data.ageRatio"
          v-if="showEchart"
        ></ePie2>
        <div class="bt">
          <ePie
            style="margin-bottom: 20px"
            :list="data.ageGroup"
            v-if="showEchart"
          ></ePie>
          <div
            class="btList"
            ref="mainRef"
            @mouseenter="stopAutoScroll"
            @mouseleave="startAutoScroll"
          >
            <div class="btList_item" v-for="(item, index) in btList">
              <div class="btList_item_color" :style="bt(index)"></div>
              <div class="btList_item_value">
                {{ item.name }}：{{ item.value }}
              </div>
            </div>
          </div>
        </div>
        <div class="table">
          <div class="table_choose">
            <div
              :class="choose == '1' ? 'choose' : 'noChoose'"
              @click="change('1')"
            >
              公共服务
            </div>
            <div
              :class="choose == '2' ? 'choose' : 'noChoose'"
              @click="change('2')"
            >
              企业服务
            </div>
            <div
              :class="choose == '3' ? 'choose' : 'noChoose'"
              @click="change('3')"
            >
              政务服务
            </div>
          </div>
          <transition name="fade" mode="out-in" appear v-if="choose == '1'">
            <div>
              <div class="dailyActivity" v-if="choose == '1'">
                <div class="dailyActivityBox">
                  <div class="dailyActivitybottom">
                    <img src="../assets/images/sy/dropDown.png" />
                    <span>浙里办平均日活</span>
                  </div>
                  <span style="margin-right: 20px">9137</span>
                </div>
                <div class="dailyActivityBox">
                  <div class="dailyActivitybottom">
                    <img src="../assets/images/sy/dropDown.png" />
                    <span>龙游通平均日活</span>
                  </div>
                  <span style="margin-right: 20px">8146</span>
                </div>
              </div>
              <el-table
                :data="data.tableData"
                style="width: 100%; height: 244px"
                class="table_border"
                :row-style="rowState"
                :header-cell-style="tableHeaderColor"
                v-if="choose == '1'"
              >
                <el-table-column
                  prop="highFrequencyApp"
                  label="高频应用"
                  width="132"
                />

                <el-table-column
                  prop="monthlyVisits"
                  label="月访问量"
                  width="131"
                />
                <el-table-column
                  prop="highFrequencyApp1"
                  label="高频应用"
                  width="132"
                />
                <el-table-column
                  prop="monthlyVisits1"
                  label="月访问量"
                  width="132"
                />
                <!-- <el-table-column prop="finish" label="完成情况">
              <template #default="scope">
                <div
                  style="letter-spacing: 3px"
                  :style="scope.row.finish ? 'color:#FFFFFF' : 'color:#FFC06E'"
                >
                  {{ scope.row.finish ? "已完成" : "未完成" }}
                </div>
              </template>
            </el-table-column> -->
              </el-table>
            </div></transition
          >
          <transition name="fade" mode="out-in" appear v-if="choose == '2'">
            <div class="qyfw" v-if="choose == '2'">
              <div
                class="qyfw_item"
                v-for="(item, index) in qyfyList"
                :key="index"
              >
                <img class="qyfw_item_left" :src="item.img" />
                <div class="qyfw_item_right">
                  <div class="name">{{ item.name }}</div>
                  <img class="line" src="@/assets/images/sy/zwfw_line.png" />
                  <div class="number">
                    <span>{{ item.value }}</span
                    >{{ item.dw }}
                  </div>
                </div>
              </div>
            </div></transition
          >
          <transition name="fade" mode="out-in" appear v-if="choose == '3'">
            <div class="zwfw">
              <div class="shang">
                <div class="shang_item">
                  <div class="title">一网通办事</div>
                  <div class="i">
                    <zwfw1 />
                  </div>
                </div>
                <div class="shang_item">
                  <div class="title">超期受理率</div>
                  <div class="i">
                    <zwfw2 />
                  </div>
                </div>
                <div class="shang_item">
                  <div class="title">超期办理率</div>
                  <div class="i">
                    <zwfw3 />
                  </div>
                </div>
              </div>
              <div class="xia">
                <div class="xia_item">
                  <img class="left" src="@/assets/images/sy/zwfw_sl.png" />
                  <div class="right">
                    <div class="name">平均受理时长</div>
                    <img class="line" src="@/assets/images/sy/zwfw_line.png" />
                    <div class="time"><span>0.22</span>小时</div>
                  </div>
                </div>
                <div class="fgx"></div>
                <div class="xia_item">
                  <img class="left" src="@/assets/images/sy/zwfw_bl.png" />
                  <div class="right">
                    <div class="name">平均办理时长</div>
                    <img class="line" src="@/assets/images/sy/zwfw_line.png" />
                    <div class="time"><span>0.54</span>小时</div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div class="displayFlex right_bg">
      <div class="flex1">
        <div class="yd_title mechanism">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="ylws">
          <div
            class="ylws_item"
            v-for="(item, index) in data.ylwsList"
            :key="index"
            @click="showDialog2(item.name, '/api/ggfwyth/yywsyList')"
          >
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </div>
      </div>
      <div class="flex1" style="margin-top: 10px">
        <div class="yd_title service">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="whsy">
          <div
            class="whsy_item"
            v-for="(item, index) in data.whsyList"
            :key="index"
          >
            <div class="name">{{ item.name }}</div>
            <div class="value">
              {{ item.value }}<span>{{ item.dw }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex1" style="margin-top: 10px">
        <div class="yd_title last">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="tysy">
          <div
            class="tysy_item"
            v-for="(item, index) in data.tysyList"
            :key="index"
          >
            <div class="value">
              {{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
            </div>
            <img :src="item.img" />
            <img
              src="../assets/images/sy/tyBon.png"
              style="margin-top: -60px"
            />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="flex1" style="margin-top: 10px">
        <div class="yd_title last_1">
          <div class="gTitle">（ 近30天 ）</div>
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="jtsyBox">
          <div class="jtsyBoxtop">
            <div class="jtsyBoxtop1" @click="showEc('公共自行车')">
              <img :src="data.jtsyList[0].img" alt="" />
              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
              <div>
                <div class="jtsyname">{{ data.jtsyList[0].name }}</div>
                <div class="jtsytext">
                  {{ data.jtsyList[0].key1 }}：
                  <span>{{ data.jtsyList[0].key1_value }}</span>
                </div>
                <div>
                  {{ data.jtsyList[0].key2 }}：
                  <span>{{ data.jtsyList[0].key2_value }}</span>
                </div>
              </div>
            </div>
            <div class="jtsyBoxtop1" @click="showEc('电动单车')">
              <img :src="data.jtsyList[1].img" alt="" />
              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
              <div>
                <div class="jtsyname">{{ data.jtsyList[1].name }}</div>
                <div class="jtsytext">
                  {{ data.jtsyList[1].key1 }}：
                  <span>{{ data.jtsyList[1].key1_value }}</span>
                </div>
                <div>
                  {{ data.jtsyList[1].key2 }}：
                  <span>{{ data.jtsyList[1].key2_value }}h</span>
                </div>
              </div>
            </div>
          </div>
          <div class="jtsyBoxbot">
            <div class="jtsyBoxtop1" @click="showTab('公共汽车')">
              <img :src="data.jtsyList[2].img" alt="" />
              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
              <div>
                <div class="jtsyname">{{ data.jtsyList[2].name }}</div>
                <div class="jtsytext">
                  {{ data.jtsyList[2].key1 }}：
                  <span>{{ data.jtsyList[2].key1_value }}</span>
                </div>
                <div>
                  {{ data.jtsyList[2].key2 }}：
                  <span>{{ data.jtsyList[2].key2_value }}</span>
                </div>
              </div>
            </div>
            <div class="jtsyBoxtop1" @click="showTab('长途汽车')">
              <img :src="data.jtsyList[3].img" alt="" />
              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
              <div>
                <div class="jtsyname">{{ data.jtsyList[3].name }}</div>
                <div class="jtsytext">
                  {{ data.jtsyList[3].key1 }}：
                  <span>{{ data.jtsyList[3].key1_value }}</span>
                </div>
                <div>
                  {{ data.jtsyList[3].key2 }}：
                  <span>{{ data.jtsyList[3].key2_value }}</span>
                </div>
              </div>
            </div>
            <div class="jtsyBoxtop1" @click="showTab('高铁')">
              <img :src="data.jtsyList[4].img" alt="" />
              <img src="../assets/images/sy/jtsy.gif" class="turn" alt="" />
              <div>
                <div class="jtsyname">{{ data.jtsyList[4].name }}</div>
                <div class="jtsytext">
                  {{ data.jtsyList[4].key1 }}：
                  <span>{{ data.jtsyList[4].key1_value }}</span>
                </div>
                <div>
                  {{ data.jtsyList[4].key2 }}：
                  <span>{{ data.jtsyList[4].key2_value }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Dialog
      :dialogShow="dialogShow"
      :columns="tableType.columns"
      :title="tableType.title"
      :tableData="tableType.data"
      :pagination="pagination"
      @close="close"
      @handle="handlePagination"
    >
      <!-- <template #pxkssj="{ currentCol, currentData }">
        <div>{{ currentData.pxkssj }}/{{ currentData.pxjssj }}</div>
      </template> -->
      <!-- <template #pxjssj="{ currentCol, currentData }">
        <div>
          {{ currentData.pxjssj.slice(0, 4) }}-{{
            currentData.pxjssj.slice(4, 6)
          }}-{{ currentData.pxjssj.slice(6, 8) }}
        </div>
      </template> -->
    </Dialog>
    <DialogEc
      :dialogShowEc="dialogShowEc"
      :title="dataEc.title"
      :list1="dataEc.list1"
      :list2="dataEc.list2"
      :year="dataEc.times"
      @close="close"
    >
    </DialogEc>
    <DialogTab
      :dialogShowTab="dialogShowTab"
      :title="dataTab.title"
      :list1="dataTab.list1"
      :list2="dataTab.list2"
      :year="dataTab.times"
      :columns="dataTab.columns"
      :tableData="dataTab.data"
      :pagination="pagination"
      @handle="handlePaginationTab"
      @close="close"
    >
      <template #dd="{ currentCol, currentData }">
        <div>
          {{ currentData.dd.substring(0, currentData.dd.indexOf(".")) }}
        </div>
      </template>
    </DialogTab>
  </div>
</template>

<script setup>
import ePie from "./echarts_sy/pie.vue";
import ePie2 from "./echarts_sy/pie2.vue";
import zwfw1 from "./echarts_sy/zwfw1.vue";
import zwfw2 from "./echarts_sy/zwfw2.vue";
import zwfw3 from "./echarts_sy/zwfw3.vue";
import footerball from "../assets/images/sy/足球.gif";
import baskerball from "../assets/images/sy/篮球.gif";
import badminton from "../assets/images/sy/羽毛球.gif";
import running from "../assets/images/sy/人行道.gif";
import tableTennis from "../assets/images/sy/乒乓.gif";

import ggjtimg from "../assets/images/sy/ggjt.png";
import ggjtimg1 from "../assets/images/sy/ggjt1.png";
import ggjtimg2 from "../assets/images/sy/ggjt2.png";
import ggjtimg3 from "../assets/images/sy/ggjt3.png";
import ggjtimg4 from "../assets/images/sy/ggjt4.png";

import Dialog from "./dialog/dialog.vue";
import DialogEc from "./dialog/dialogEc.vue";
import DialogTab from "./dialog/dialogTab.vue";
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
import http from "@/utils/request.js";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { columns } from "element-plus/es/components/table-v2/src/common.mjs";
import qyfw1 from "../assets/images/sy/ljzcs.png";
import qyfw2 from "../assets/images/sy/rzbms.png";
import qyfw3 from "../assets/images/sy/shqys.png";
import qyfw4 from "../assets/images/sy/dxje.png";
//控制echart的显示
const showEchart = ref(false);
// 详情弹框
const dialogShow = ref(false);
const dialogShowEc = ref(false);
const dialogShowTab = ref(false);
//表格列
const columnss = reactive({
  就业培训: [
    {
      label: "姓名",
      property: "xm",
    },
    {
      label: "单位",
      property: "szdw",
    },
    {
      label: "职业",
      property: "zy",
    },
    {
      label: "承办机构",
      property: "pxcbjg",
    },
    {
      label: "培训班名称",
      property: "pxbmc",
    },
    {
      label: "培训时间",
      property: "pxkssj",
      // type: "slot",
    },
    // {
    //   label: "培训开始时间",
    //   property: "pxkssj",
    //   type: "slot",
    // },
    // {
    //   label: "培训结束时间",
    //   property: "pxjssj",
    //   type: "slot",
    // },
  ],
  就业见习服务: [
    {
      label: "见习岗位名称",
      property: "jxgwmc",
    },
    {
      label: "单位名称",
      property: "dwmc",
    },
    {
      label: "岗位类型",
      property: "gwlx",
    },
    {
      label: "接受人数",
      property: "kjsrs",
    },
    {
      label: "见习地点",
      property: "jxszd",
    },
    {
      label: "见习月数",
      property: "njxys",
    },
    {
      label: "学历要求",
      property: "xlyq",
    },
    {
      label: "专业",
      property: "zy",
    },
    {
      label: "有效状态",
      property: "yxzt",
    },
  ],
  就业援助: [
    {
      label: "姓名",
      property: "xm",
    },
    {
      label: "人员类别",
      property: "rylb",
    },
    {
      label: "就失业状态",
      property: "jsyzt",
    },
    {
      label: "优先指数",
      property: "yxzs",
    },
    {
      label: "是否已帮扶",
      property: "sfybf",
    },
    {
      label: "失业登记时间",
      property: "sydjsj",
    },
    {
      label: "失业登记管辖地",
      property: "sydjgxd",
    },
    {
      label: "户籍地",
      property: "hjd",
    },
    {
      label: "居住地",
      property: "jzd",
    },
    {
      label: "帮扶时间",
      property: "bfsj",
    },
  ],
});
const ylws_columns = ref([
  {
    label: "医院名称",
    property: "yymc",
  },
  {
    label: "医生数",
    property: "zyyss",
  },
  {
    label: "护士数",
    property: "zchss",
  },
  {
    label: "家庭医生签约数",
    property: "jtysqys",
  },
  {
    label: "床位数",
    property: "hdcws",
  },
]);
const tableType = reactive({
  url: "",
  title: "",
  columns: [],
  data: [],
});
// 表格分页
const pagination = reactive({
  total: 100,
  pageSize: 10,
  currentPage: 1,
});
//表格分页
const handlePagination = (current) => {
  pagination.currentPage = current;
  getTable(tableType.url, pagination.currentPage);
};
//Tab切换分页
const handlePaginationTab = (current) => {
  pagination.currentPage = current;
  getTableTab(dataTab.url, pagination.currentPage);
};
const showDialog = (title, url) => {
  tableType.title = title;
  tableType.url = url;
  tableType.columns = columnss[title];

  getTable(url, pagination.currentPage);
};

const close = () => {
  dialogShow.value = false;
  dialogShowEc.value = false;
  dialogShowTab.value = false;
  pagination.currentPage = 1;
  pagination.total = 100;
};
//医疗卫生
const showDialog2 = (title, url) => {
  if (title == "医院卫生院") {
    tableType.title = title;
    tableType.url = url;
    tableType.columns = ylws_columns.value;
    dialogShow.value = true;
    getTable(url, pagination.currentPage);
  }
};

// 交通事业-自行车，电动车
const dataEc = reactive({
  title: "",
  list1: [],
  list2: [],
  year: [],
});
// 交通事业-公交，高铁，大巴
const dataTab = reactive({
  url: "",
  title: "",
  list1: [],
  list2: [],
  year: [],
  columns: [
    {
      label: "班次",
      property: "cc",
    },
    {
      label: "始发站-终点站",
      property: "qqz",
    },
    {
      label: "到达龙游站时间",
      type: "slot",
      property: "dd",
    },
  ],
  data: [],
});

const data = reactive({
  PopulationData: {
    rkzs: "0",
    man: "0",
    woman: "0",
  }, //人口数据
  ageGroup: {
    nl17: "0", // 17岁以下人口总数
    nl1834: "0", // 18-34人口总数
    nl3569: "0", // 35-69人口总数
    nl60: "0", // 60以上人口总数
    nl110: "0", // 1-10岁人口总数
    nl1120: "0", // 11-20岁人口总数
    nl2130: "0", // 21-30岁人口总数
    nl3140: "0", // 31-40岁人口总数
    nl4150: "0", // 41-50岁人口总数
    nl5160: "0", // 51-60岁人口总数
    nl6170: "0", // 61-70岁人口总数
    nl7180: "0", // 71-80岁人口总数
    nl8190: "0", // 81-90岁人口总数
    nl91100: "0", // 91-100岁人口总数
    nl100: "0", // 100岁以上人口总数,
  },
  ageRatio: [],
  salvageServices: {
    jzrc: "0", //救助人次
    jzje: "0", //救助金额
    nf: "0", //救助年份
  }, //救助服务
  education: {
    xxzs: "0", //学校总数
    xszs: "0", //学生总数
    jzgzs: "0", //教职工总数
  },
  employmentService: {
    jypx: "0", //就业培训
    jyjxfw: "0", //就业见习服务
    jyyz: "0", //就业援助
  }, //就业服务
  LivelihoodWelfare: {
    zgylbxzsr: "0", //职工基本养老保险总收入
    zgylbxzzc: "0", //职工基本养老保险总支出
    cxylbxzsr: "0", //城乡居民养老保险总收入
    cxylbxzzc: "0", //城乡居民养老保险总支出
    gsbxzsr: "0", //工伤保险总收入
    gsbxzzc: "0", //工伤保险总支出
    zgyilbxzsr: "0", //职工基本医疗保险总收入
    zgyilbxzzc: "0", //职工基本医疗保险总支出
    cxyilbxzsr: "0", //城乡居民医疗保险总收入
    cxyilbxzzc: "0", //城乡居民医疗保险总支出
    nf: "", //年份
  }, //民生福祉
  tableData: [
    {
      highFrequencyApp: "智享工会",
      monthlyVisits: "474797",
      highFrequencyApp1: "公交查询",
      monthlyVisits1: "26837",
    },
    {
      highFrequencyApp: "老兵码",
      monthlyVisits: "18246",
      highFrequencyApp1: "小奔通",
      monthlyVisits1: "22917",
    },
    {
      highFrequencyApp: "民政为民",
      monthlyVisits: "12899",
      highFrequencyApp1: "公共自行车",
      monthlyVisits1: "22705",
    },
    {
      highFrequencyApp: "走心驿站",
      monthlyVisits: "8524",
      highFrequencyApp1: "商城积分",
      monthlyVisits1: "18080",
    },
    {
      highFrequencyApp: "龙游通",
      monthlyVisits: "2205",
      highFrequencyApp1: "商户入口",
      monthlyVisits1: "3565",
    },
  ],
  jysyList: [
    {
      title: "县镇",
      teacher: 1,
      student: 10.76,
    },
    {
      title: "农村",
      teacher: 1,
      student: 8.53,
    },
  ],
  ylwsList: [
    {
      name: "医院卫生院",
      value: 0,
    },
    {
      name: "注册护士",
      value: 0,
    },
    {
      name: "职业医生",
      value: 0,
    },
    {
      name: "家庭签约医生",
      value: 0,
    },
    {
      name: "医院卫生院床位数",
      value: 0,
    },
    {
      name: "健康档案建档",
      value: 0,
    },
    {
      name: "村社卫生服务站",
      value: 0,
    },
  ],
  whsyList: [
    {
      name: "公共图书馆(南孔书院)",
      value: "198",
      dw: "家",
    },
    {
      name: "总藏书",
      value: "1983",
      dw: "册",
    },
    {
      name: "送戏下乡次数",
      value: "2787",
      dw: "次",
    },
    {
      name: "博物馆观展人次",
      value: "1.292.874",
      dw: "次",
    },
    {
      name: "图书借阅",
      value: "1.724.012",
      dw: "次",
    },
  ],
  tysyList: [
    {
      name: "足球场",
      value: "100",
      img: footerball,
    },
    {
      name: "篮球场",
      value: "100",
      img: baskerball,
    },
    {
      name: "乒乓球馆",
      value: "100",
      img: tableTennis,
    },
    {
      name: "羽毛球馆",
      value: "100",
      img: badminton,
    },
    {
      name: "绿色跑道",
      value: "100",
      dw: "km",
      img: running,
    },
  ],
  jtsyList: [
    {
      name: "公共自行车",
      key1: "骑行次数",
      key1_value: "117231",
      key2: "骑行时长",
      key2_value: "1283h",
      img: ggjtimg,
    },
    {
      name: "电动单车",
      key1: "骑行次数",
      key1_value: "1172491",
      key2: "骑行时长",
      key2_value: "1283h",
      img: ggjtimg1,
    },
    {
      name: "公共汽车",
      key1: "公交线路",
      key1_value: "176",
      key2: "乘坐人次",
      key2_value: "239741",
      img: ggjtimg2,
    },
    {
      name: "长途汽车",
      key1: "班车次数",
      key1_value: "133",
      key2: "客流量",
      key2_value: "192874",
      img: ggjtimg3,
    },
    {
      name: "高铁",
      key1: "列车班次",
      key1_value: "23",
      key2: "客流量",
      key2_value: "113414",
      img: ggjtimg4,
    },
  ],
});

const jysyList = ref([
  {
    title: "县镇",
    teacher: 1,
    student: 10.76,
  },
  {
    title: "农村",
    teacher: 1,
    student: 8.53,
  },
]);

// 县城学校师生比样式
const cs = computed(() => {
  let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
    jysyList.value[0].teacher + jysyList.value[0].student
  }`;
  return str;
});
// 农村学校师生比样式
const nc = computed(() => {
  let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
    jysyList.value[1].teacher + jysyList.value[1].student
  }`;
  return str;
});
// 服务表格样式
const tableHeaderColor = (arg) => {
  return {
    paddingLeft: "10px",
    letterSpacing: "1px",
    fontSize: "15px",
    height: "32px",
    backgroundColor: "#455F8A",
    color: "#fff",
  };
};
const rowState = (row) => {
  if (row.rowIndex % 2 == 0) {
    return {
      letterSpacing: "1px",
      fontSize: "14px",
      height: "36px",
      backgroundColor: "rgba(31, 63, 113, 1)",
      color: "#fff",
    };
  } else if (row.rowIndex % 2 !== 0) {
    return {
      letterSpacing: "1px",
      fontSize: "14px",
      height: "36px",
      backgroundColor: "rgba(43, 74, 121, 1)",
      color: "#fff",
    };
  }
};
// 服务表格切换
const choose = ref("1");
const change = (index) => {
  choose.value = index;
};
// 添加千位分隔符
const addThousandSeparator = (numberString) => {
  return parseInt(numberString.trim(), 10).toLocaleString("en-US");
};
const getData = async () => {
  await http.get("/api/ggfwyth/index").then((res) => {
    if (res.code == 200) {
      // 民生福利
      const msfzKeys = [
        "zgylbxzsr",
        "zgylbxzzc",
        "cxylbxzsr",
        "cxylbxzzc",
        "gsbxzsr",
        "gsbxzzc",
        "zgyilbxzsr",
        "zgyilbxzzc",
        "cxyilbxzsr",
        "cxyilbxzzc",
        "nf",
      ];
      if (data.LivelihoodWelfare) {
        msfzKeys.forEach((key) => {
          // const value = res.data.msfz[key];
          // if (value !== undefined) {
          //   data.LivelihoodWelfare[key] = (value / 10000).toFixed(2);
          // }
          data.LivelihoodWelfare[key] = (res.data.msfz[key] / 10000).toFixed(2);
        });
      }
      // 救助服务
      const jzfwKeys = ["jzrc", "jzje", "nf"];
      if (data.salvageServices) {
        // jzfwKeys.forEach((key) => {
        //   data.salvageServices[key] = res.data.jzfw[key];
        // });
        data.salvageServices.jzrc = res.data.jzfw.jzrc;
        data.salvageServices.jzje = (res.data.jzfw.jzje / 10000).toFixed(2);
      }
      // 教育事业&师生比例
      const jysyKeys = ["xxzs", "xszs", "jzgzs"];
      jysyKeys.forEach((key) => {
        data.education[key] = res.data.xxgk[key];
      });
      // 就业服务
      const jyfwKeys = ["jypx", "jyjxfw", "jyyz"];
      jyfwKeys.forEach((key) => {
        data.employmentService[key] = res.data.jyfw[key].toString();
      });
      // 年龄段分类&人口数据&年龄比例
      data.PopulationData = res.data.rksj;
      // 人口总数
      if (data.PopulationData) {
        const rkjsKeys = ["rkzs", "man", "woman"];
        rkjsKeys.forEach((key) => {
          data.PopulationData[key] = res.data.rksj[key];
        });
        // 人口年龄段分类数
        const ageGroupKeys = [
          "nl17",
          "nl1834",
          "nl3569",
          "nl60",
          "nl110",
          "nl1120",
          "nl2130",
          "nl3140",
          "nl4150",
          "nl5160",
          "nl6170",
          "nl7180",
          "nl8190",
          "nl91100",
          "nl100",
        ];
        const ageBt = [
          "nl110",
          "nl1120",
          "nl2130",
          "nl3140",
          "nl4150",
          "nl5160",
          "nl6170",
          "nl7180",
          "nl8190",
          "nl91100",
          "nl100",
        ];
        ageGroupKeys.forEach((key) => {
          data.ageGroup[key] = res.data.rksj[key];
        });
        ageBt.forEach((key, index) => {
          btList.value[index].value = res.data.rksj[key];
        });
      }
      // 年龄比例
      const ageRatioKeys = [
        "nl17Percent",
        "nl1834Percent",
        "nl3569Percent",
        "nl60Percent",
      ];
      ageRatioKeys.forEach((key) => {
        data.ageRatio.push(res.data.rksj[key]);
      });
      // 公共服务&企业服务&政府服务
      // 医疗卫生
      const ylwsKeys = [
        "yywsysl",
        "zchssl",
        "zyyssl",
        "jtqyyssl",
        "yywsycws",
        "jkdajdfs",
        "cswsfwzs",
      ];
      ylwsKeys.forEach((key, index) => {
        data.ylwsList[index].value = res.data.ylws[key];
      });
      // 文化体育事业
      const whsyKeys = ["ggtsg", "zcs", "sxxxcs", "bwgcgcs", "tsjycs"];
      whsyKeys.forEach((key, index) => {
        data.whsyList[index].value = res.data.whtysy[key];
      });
      // 体育事业
      const tysyKeys = ["zqcs", "lqcs", "ppqcs", "ymqcs", "lsbdcd"];
      tysyKeys.forEach((key, index) => {
        data.tysyList[index].value = res.data.whtysy[key];
      });
      // 交通事业
      data.jtsyList[1].key1_value =
        res.data.transportation.electricbicycle.cyclingFrequency;
      data.jtsyList[1].key2_value =
        res.data.transportation.electricbicycle.cyclingDduration;
      data.jtsyList[4].key1_value =
        res.data.transportation.highSpeedRail.trainSchedule;
      data.jtsyList[4].key2_value =
        res.data.transportation.highSpeedRail.passengerFlow;
    }
    showEchart.value = true;
  });
};
//获取表格数据
const getTable = (url, currentPage) => {
  http
    .get(`${url}?page=${currentPage}&size=${pagination.pageSize}`)
    .then((res) => {
      if (res.code == 200) {
        console.log(res, "表格数据");
        tableType.data = res.data;
        pagination.total = res.count;
        dialogShow.value = true;
      }
    });
};
//获取交通事业-公交，高铁，大巴数据
const getTableTab = (url, currentPage) => {
  dataTab.url = url;
  http
    .get(`${url}?page=${currentPage}&size=${pagination.pageSize}`)
    .then((res) => {
      if (res.code == 200) {
        dataTab.data = res.data;
        pagination.total = res.count;
        dialogShowTab.value = true;
      }
    });
};
//企业服务
const qyfyList = reactive([
  {
    name: "累计政策数",
    value: "273",
    dw: "个",
    img: qyfw1,
  },
  {
    name: "入住部门数",
    value: "35",
    dw: "个",
    img: qyfw2,
  },
  {
    name: "受惠企业数",
    value: "1084",
    dw: "个",
    img: qyfw3,
  },
  {
    name: "累计已兑现资金额",
    value: "18.54",
    dw: "亿元",
    img: qyfw4,
  },
]);

// 交通事业弹框
const showEc = (val) => {
  dataEc.title = val;
  dataEc.list1 = [];
  dataEc.list2 = [];
  switch (val) {
    case "公共自行车":
      dataEc.list1 = [
        4080, 4564, 2995, 4654, 2197, 3930, 1076, 2712, 1538, 3937, 3845, 3212,
        1982, 945, 1598, 1314, 3697, 4474, 4285, 4400, 4251, 4406, 4324, 4123,
        3774, 3491, 4074, 4546, 4287, 4445,
      ]; // 骑行次数
      dataEc.list2 = [
        1200, 1342, 953, 1302, 602, 873, 521, 698, 732, 913, 892, 1023, 821,
        453, 732, 695, 892, 1265, 1178, 1246, 1206, 1361, 1323, 1231, 893, 1032,
        1196, 1411, 1232, 1364,
      ]; // 骑行时长（分钟）
      dataEc.times = [
        20240612, 20240613, 20240614, 20240615, 20240616, 20240617, 20240618,
        20240619, 20240620, 20240621, 20240622, 20240623, 20240624, 20240625,
        20240626, 20240627, 20240629, 20240630, 20240701, 20240702, 20240703,
        20240704, 20240705, 20240706, 20240707, 20240708, 20240709, 20240710,
        20240711,
      ];
      dialogShowEc.value = true;
      break;
    case "电动单车":
      http.get("/api/ggfwyth/ddcList").then((res) => {
        if (res.code == 200) {
          dataEc.list1 = res.data.qxcs;
          dataEc.list2 = res.data.qxsc.map((str) => parseInt(str));
          dataEc.times = res.data.times;
          dialogShowEc.value = true;
        }
      });
      break;
    default:
      break;
  }
};
const showTab = (val) => {
  dataTab.title = val;
  dataTab.list1 = [];
  dataTab.times = [];
  dataTab.data = [];
  switch (val) {
    case "公共汽车":
      dataTab.list1 = [
        8974, 9515, 8647, 7574, 7984, 8371, 8380, 9487, 9988, 10442, 8970,
        10206, 10360, 9616, 9816,
      ];
      dataTab.times = [
        "2024-7-10",
        "2024-7-9",
        "2024-7-8",
        "2024-7-7",
        "2024-7-6",
        "2024-7-5",
        "2024-7-4",
        "2024-7-3",
        "2024-7-2",
        "2024-7-1",
        "2024-6-30",
        "2024-6-29",
        "2024-6-28",
        "2024-6-27",
        "2024-6-26",
      ];
      dataTab.data = [
        {
          cc: "201A",
          qqz: "龙游公交中心—湖镇车站",
          dd: "06:56:00.000",
          kd: "07:10:00.000",
          ts: "14",
        },
        {
          cc: "201B",
          qqz: "龙游公交中心—湖镇车站",
          dd: "07:30:00.000",
          kd: "07:45:00.000",
          ts: "15",
        },
        {
          cc: "203",
          qqz: "龙游公交中心—地圩",
          dd: "08:00:00.000",
          kd: "08:20:00.000",
          ts: "20",
        },
        {
          cc: "301",
          qqz: "湖镇车站—十里坪",
          dd: "08:45:00.000",
          kd: "09:00:00.000",
          ts: "15",
        },
        {
          cc: "302",
          qqz: "湖镇车站—大坪",
          dd: "09:15:00.000",
          kd: "09:30:00.000",
          ts: "15",
        },
        {
          cc: "307",
          qqz: "湖镇车站—蒲塘",
          dd: "10:00:00.000",
          kd: "10:20:00.000",
          ts: "20",
        },
        {
          cc: "308",
          qqz: "湖镇车站—童村",
          dd: "10:45:00.000",
          kd: "11:00:00.000",
          ts: "15",
        },
        {
          cc: "304",
          qqz: "湖镇车站—青塘坞",
          dd: "11:15:00.000",
          kd: "11:30:00.000",
          ts: "15",
        },
        {
          cc: "206",
          qqz: "龙游公交中心—上堤",
          dd: "12:00:00.000",
          kd: "12:20:00.000",
          ts: "20",
        },
        {
          cc: "205",
          qqz: "龙游公交中心—源头",
          dd: "12:45:00.000",
          kd: "13:00:00.000",
          ts: "15",
        },
        {
          cc: "305",
          qqz: "湖镇车站—上堤",
          dd: "13:15:00.000",
          kd: "13:30:00.000",
          ts: "15",
        },
        {
          cc: "306",
          qqz: "湖镇车站—源头",
          dd: "14:00:00.000",
          kd: "14:20:00.000",
          ts: "20",
        },
      ];
      dialogShowTab.value = true;
      break;
    case "长途汽车":
      dataTab.list1 = [57, 37, 46, 46, 54, 40, 46, 37, 48, 39, 48, 48, 31, 43];
      dataTab.times = [
        "2024-7-11",
        "2024-7-10",
        "2024-7-9",
        "2024-7-8",
        "2024-7-7",
        "2024-7-6",
        "2024-7-5",
        "2024-7-4",
        "2024-7-3",
        "2024-7-2",
        "2024-7-1",
        "2024-6-30",
        "2024-6-29",
        "2024-6-28",
      ];
      dataTab.data = [
        {
          cc: "303",
          qqz: "湖镇车站—马家",
          dd: "08:00:00.000",
          kd: "08:30:00.000",
          ts: "30",
        },
        {
          cc: "202",
          qqz: "龙游公交中心—周家",
          dd: "09:15:00.000",
          kd: "09:45:00.000",
          ts: "30",
        },
        {
          cc: "204",
          qqz: "龙游公交中心—社阳",
          dd: "10:30:00.000",
          kd: "11:00:00.000",
          ts: "30",
        },
        {
          cc: "221",
          qqz: "龙游公交中心—溪口车站",
          dd: "11:45:00.000",
          kd: "12:15:00.000",
          ts: "30",
        },
        {
          cc: "222",
          qqz: "龙游公交中心—官潭—溪口车站",
          dd: "13:00:00.000",
          kd: "13:30:00.000",
          ts: "30",
        },
        {
          cc: "325",
          qqz: "溪口车站—大街",
          dd: "14:15:00.000",
          kd: "14:45:00.000",
          ts: "30",
        },
        {
          cc: "322",
          qqz: "溪口车站—坑头",
          dd: "15:30:00.000",
          kd: "16:00:00.000",
          ts: "30",
        },
        {
          cc: "326",
          qqz: "大街—方坦—横坑—岭脚",
          dd: "16:45:00.000",
          kd: "17:15:00.000",
          ts: "30",
        },
        {
          cc: "328",
          qqz: "溪口车站—合坑源",
          dd: "18:00:00.000",
          kd: "18:30:00.000",
          ts: "30",
        },
        {
          cc: "329",
          qqz: "溪口车站—际上",
          dd: "19:15:00.000",
          kd: "19:45:00.000",
          ts: "30",
        },
        {
          cc: "330",
          qqz: "溪口车站—毛连里",
          dd: "20:30:00.000",
          kd: "21:00:00.000",
          ts: "30",
        },
        {
          cc: "327",
          qqz: "长山桥—后山",
          dd: "21:45:00.000",
          kd: "22:15:00.000",
          ts: "30",
        },
      ];
      dialogShowTab.value = true;
      break;
    case "高铁":
      getTableTab("/api/ggfwyth/lyzlcskList", pagination.currentPage);
      http.get(`/api/ggfwyth/lckll`).then((res) => {
        if (res.code == 200) {
          dataTab.list1 = res.data.data;
          dataTab.times = res.data.times;
        }
      });
      break;
    default:
      break;
  }
};
//自动滚动(饼图)
//扇形图颜色数据
const colorList = [
  { color2: "rgba(90,255,223,1)" },
  { color2: "rgba(115,255,145,1)" },
  { color2: "rgba(153,255,179,1)" },
  { color2: "rgba(193,255,138,1)" },
  { color2: "rgba(255,207,74,1)" },
  { color2: "rgba(254,178,128,1)" },
  { color2: "rgba(151,176,255,1)" },
  { color2: "rgba(164,151,255,1)" },
  { color2: "rgba(159,110,254,1)" },
  { color2: "rgba(180,143,241,1)" },
  { color2: "rgba(76,174,254,1)" },
];
const bt = computed(() => {
  return (index) => {
    let str = `--i:${colorList[index].color2}`;
    return str;
  };
});
const btList = ref([
  {
    name: "1-10岁人口总数",
    value: "",
  },
  {
    name: "11-20岁人口总数",
    value: "",
  },
  {
    name: "21-30岁人口总数",
    value: "",
  },
  {
    name: "31-40岁人口总数",
    value: "",
  },
  {
    name: "41-50岁人口总数",
    value: "",
  },
  {
    name: "51-60岁人口总数",
    value: "",
  },
  {
    name: "61-70岁人口总数",
    value: "",
  },
  {
    name: "71-80岁人口总数",
    value: "",
  },
  {
    name: "81-90岁人口总数",
    value: "",
  },
  {
    name: "91-100岁人口总数",
    value: "",
  },
  {
    name: "100岁以上人口总数",
    value: "",
  },
]);
const mainRef = ref(null);
let isAutoScrolling = true;

const stopAutoScroll = () => {
  isAutoScrolling = false;
};

const startAutoScroll = () => {
  isAutoScrolling = true;
  autoScroll();
};

const autoScroll = () => {
  if (!isAutoScrolling) return;

  const mainEl = mainRef.value;
  if (!mainEl) return;

  mainEl.scrollTop += 1; // 每次滚动的距离

  if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
    setTimeout(() => {
      mainEl.scrollTo({ top: 0, behavior: "smooth" });
      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
    }, 1000); // 暂停1秒后开始快速滚回顶部
  } else {
    requestAnimationFrame(autoScroll);
  }
};
onBeforeMount(async () => {
  getData();
  setTimeout(() => {
    startAutoScroll();
  }, 1000);
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  --el-dialog-bg-color: none;
}

.my-header {
  display: flex;
  flex-direction: row-reverse;
}

.tabelPart {
  height: 60vh;
  padding: 16px;
  background: linear-gradient(
      270deg,
      rgba(0, 77, 131, 0.69) 0%,
      rgba(0, 51, 83, 0.77) 50%,
      rgba(0, 77, 131, 0.74) 100%
    ),
    radial-gradient(
      66% 40% at 50% 0%,
      rgba(1, 150, 243, 0.55) 0%,
      rgba(0, 116, 255, 0) 100%
    );
  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
  border: 2px solid;
  border-image: linear-gradient(
      180deg,
      rgba(21, 150, 255, 1),
      rgba(0, 157, 227, 0)
    )
    2 2;

  :deep(.el-table) {
    --el-table-bg-color: none;
    --el-table-tr-bg-color: none;
    --el-table-header-bg-color: none;
    background: none;
    border: none;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #fff;
  }
}

.pagePart {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  :deep(.el-pagination) {
    --el-pagination-button-disabled-bg-color: none;
    --el-pagination-bg-color: none;
    --el-pagination-button-bg-color: none;
    --el-pagination-button-color: #fff;
    color: #fff;
  }

  :deep(.el-pagination button:disabled) {
    background-color: rgba(0, 116, 255, 0) !important;
  }
}
</style>

<style lang="scss" scoped>
.displayFlex {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  // flex: 1;
  width: 33.333333333%;
}

.flex1 {
  // flex: 1;
  // padding: 0 28px;
  box-sizing: border-box;
}

.flex2 {
  // flex: 1;
  // padding: 0 38px;
  box-sizing: border-box;
}

.module {
  display: flex;
  width: 100%;
}

.yd_title {
  // background-image: url(@/assets/img_04.png);
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  box-sizing: border-box;
  width: 94%;
  height: 42px;
  position: relative;
  overflow: hidden;
  /* 利用伪元素和两个i元素产生4条线 */
  .animate-border {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
    }
    i {
      position: absolute;
      display: inline-block;
      height: 100%;
      width: 2px;
    }
    &::before {
      top: 0;
      left: -100%;
      background-image: linear-gradient(
        90deg,
        transparent,
        #03e9f4,
        transparent
      );

      animation: one 4s linear infinite;
    }
    i:nth-child(1) {
      top: -100%;
      right: 0;
      background-image: linear-gradient(
        180deg,
        transparent,
        #03e9f4,
        transparent
      );
      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
      animation: two 4s linear 1s infinite;
    }
    &::after {
      bottom: 0;
      right: -100%;
      background-image: linear-gradient(
        -90deg,
        transparent,
        #03e9f4,
        transparent
      );
      animation: three 4s linear 2s infinite;
    }
    i:nth-child(2) {
      bottom: -100%;
      left: 0;
      background-image: linear-gradient(
        360deg,
        transparent,
        #03e9f4,
        transparent
      );
      animation: four 4s linear 3s infinite;
    }
  }

  .text {
    display: flex;
    position: absolute;
    font-size: 16px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    right: 5px;
    top: 1px;
  }
  .gTitle {
    position: absolute;
    color: #acd1f1;
    height: 100%;
    display: flex;
    align-items: center;
    left: 156px;
  }

  .c {
    width: 130px;
    height: 42px;
    cursor: pointer;
  }
}
@keyframes one {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

@keyframes two {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

@keyframes three {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

@keyframes four {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

.mechanism {
  background-image: url(@/assets/images/sy/new_ylws.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.service {
  background-image: url(@/assets/images/sy/new_whsy.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.last {
  background-image: url(@/assets/images/sy/new_tysy.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.last_1 {
  background-image: url(@/assets/images/sy/new_jtsy.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.serviceBox {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .serviceimg {
    width: 182px;
    height: 35px;
  }

  .serviceTop {
    display: flex;
    justify-content: space-between;
    padding: 10px 36px 0px 20px;
    box-sizing: border-box;

    .visit {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .medicalService {
      display: flex;
      flex-direction: column;
      align-items: center;

      .ylimg {
        width: 200px;
        height: 220px;
      }

      .medicalServiceTop {
        position: relative;

        span {
          position: absolute;
          left: 39px;
          top: 35%;
          font-weight: bold;
          font-size: 32px;
          color: #ffffff;
          line-height: 41px;
          letter-spacing: 1px;
          text-align: center;
          font-style: normal;
          font-family: TCloudNumber, TCloudNumber;
        }
      }
    }
  }
}

.mealAssistance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .mealAssistanceimg {
    width: 495px;
    height: 35px;
  }
}

.left_1 {
  background-image: url(@/assets/images/sy/new_msfz.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.left_2 {
  background-image: url(@/assets/images/sy/new_jysy.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.left_3 {
  background-image: url(@/assets/images/sy/new_jyfw.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

// .center_1 {
//   width: 96%;
//   background-image: url(@/assets/images/hygiene/center_title_1.png);
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }

// .center_2 {
//   width: 96%;
//   background-image: url(@/assets/images/hygiene/new_center.png);
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }

.center_top {
  width: 95%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .item {
    display: flex;
    align-items: center;

    .left {
      width: 102px;
      height: 102px;
    }

    .right {
      margin-left: 10px;

      .right_top {
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        letter-spacing: 2px;
      }

      .right_center {
        width: 100px;
        height: 7px;
      }

      .right_bottom {
        margin-top: 3px;
        padding: 5px;
        font-size: 22px;
        color: #2ef1ff;
        line-height: 26px;
        text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0) 0%,
          #3976a1 100%
        );
      }
    }
  }
}

.left_bg {
  width: 642px;
  // height: 100%;
  box-sizing: border-box;
  padding-left: 50px;
  margin-right: 28px;
  background-image: url(@/assets/images/left_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.center_bg {
  width: 582px;
  // height: 100%;
  box-sizing: border-box;
  padding-left: 10px;
  margin-right: 28px;
  background-image: url(@/assets/images/center_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.right_bg {
  width: 642px;
  box-sizing: border-box;
  padding-left: 20px;
  margin-right: 28px;
  background-image: url(@/assets/images/right_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

//左边
//民生福祉
.left_1_bg {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 602px;
  height: 279px;
  background-image: url(@/assets/images/sy/left_1_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: -25px;
  position: relative;

  .item {
    display: flex;
    flex-direction: column;

    .item_title {
      font-weight: 600;
      font-family: PangMenZhengDao;
      font-size: 18px;
      color: #ffffff;
      line-height: 21px;
      letter-spacing: 1px;

      .blue {
        font-family: PangMenZhengDao;
        font-size: 18px;
        color: rgba(0, 234, 255, 1);
        line-height: 21px;
        letter-spacing: 1px;
      }

      .yellow {
        font-family: PangMenZhengDao;
        font-size: 18px;
        color: rgba(255, 216, 99, 1);
        line-height: 21px;
        letter-spacing: 1px;
      }
    }

    .item_content {
      margin-top: 15px;

      .sr {
        display: flex;
        align-items: center;

        .left {
          font-weight: 400;
          font-size: 15px;
          color: #ffffff;
          line-height: 17px;
        }

        .right {
          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          line-height: 19px;
        }
      }
    }
  }
}

.yl_1 {
  position: absolute;
  top: 50px;
  left: 75px;
}

.yl_2 {
  position: absolute;
  top: 50px;
  left: 238px;
  align-items: center;
}

.yl_3 {
  position: absolute;
  top: 50px;
  left: 370px;
  align-items: flex-end;
}

.yl_4 {
  position: absolute;
  top: 160px;
  left: 90px;
  align-items: center;
}

.yl_5 {
  position: absolute;
  top: 160px;
  left: 350px;
  align-items: center;
}

.left_1_1 {
  width: 551px;
  height: 30px;
  background-image: url(@/assets/images/sy/new_jzfw.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.left_jzfw {
  display: flex;
  width: 96%;
  margin-top: 18px;
  margin-bottom: 18px;
  justify-content: space-around;

  .left_1_2 {
    box-sizing: border-box;
    padding: 18px 21px;
    width: 225px;
    height: 78px;
    background-image: url(@/assets/images/sy/left_1_2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .top {
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 20px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
    }

    .bottom {
      margin-top: 6px;
      font-weight: normal;
      font-size: 24px;
      color: #00f5ff;
      line-height: 18px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
    }
  }

  .left_1_3 {
    box-sizing: border-box;
    padding: 18px 21px;
    width: 225px;
    height: 78px;
    background-image: url(@/assets/images/sy/left_1_3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .top {
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 20px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
    }

    .bottom {
      margin-top: 6px;
      font-weight: normal;
      font-size: 24px;
      color: #00f5ff;
      line-height: 18px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
    }
  }
}

//教育事业
.left_2_top {
  width: 94%;
  margin-top: 22px;
  display: flex;
  justify-content: space-around;

  .item {
    box-sizing: border-box;
    width: 174px;
    height: 75px;
    padding: 12px 20px;

    .shang {
      font-weight: 400;
      font-size: 22px;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
      margin-bottom: 5px;
    }
  }

  .school {
    background-image: url(@/assets/images/sy/school.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .xia {
      font-weight: normal;
      font-size: 28px;
      color: #00f5ff;
      line-height: 21px;
      letter-spacing: 3px;
      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
    }
  }

  .teacher {
    background-image: url(@/assets/images/sy/teacher.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .xia {
      font-weight: normal;
      font-size: 28px;
      color: #00c1ff;
      line-height: 21px;
      letter-spacing: 2px;
      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
    }
  }

  .student {
    background-image: url(@/assets/images/sy/student.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .xia {
      font-weight: normal;
      font-size: 28px;
      color: #ffe689;
      line-height: 21px;
      letter-spacing: 2px;
      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
    }
  }
}

.left_2_bottom {
  width: 94%;
  margin-top: 5px;
  display: flex;
  justify-content: space-around;

  &_item {
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 10px;
    width: 267px;
    height: 74px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border: 0px solid #7aceff;
    display: flex;
    flex-direction: column;

    &_shang {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 1px;

      .span1 {
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 1px;
        color: #00f5ff;
      }

      .span2 {
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 1px;
        color: #ffd863;
      }

      .right {
        letter-spacing: 3px;
        font-size: 22px;
        span {
          font-size: 22px;
        }
      }
    }

    &_xia {
      margin-top: 10px;
      width: 100%;
      height: 8px;
      // border: 1px solid rgba(255, 255, 255, 0.77);
      background-color: #27628d;
      position: relative;
      border-radius: 8px;
      .csbl {
        position: absolute;
        left: 0;
        width: calc(var(--teacher) / var(--total) * 100%);
        height: 8px;
        background-color: #00f5ff;
        border-radius: 8px;
      }

      .ncbl {
        position: absolute;
        left: 0;
        width: calc(var(--teacher) / var(--total) * 100%);
        height: 8px;
        background-color: #ffd863;
        border-radius: 8px;
      }
    }
    &_xia:nth-child(2) {
      background-color: #475e73;
    }
  }

  margin-bottom: 22px;
}

//就业服务
.left_3_1 {
  width: 94%;
  margin-top: 40px;
  display: flex;
  justify-content: space-around;

  &_item {
    box-sizing: border-box;
    width: 160px;
    height: 112px;
    background-image: url(@/assets/images/sy/jyfw.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    position: relative;
    .moveImg {
      position: absolute;
      width: 160px;
      height: 140px;
      bottom: 18px;
      background-image: url(@/assets/images/sy/jyfwM.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      animation: example 3s infinite linear;
    }

    @keyframes example {
      0% {
        transform: translateY(0);
      }
      25% {
        transform: translateY(-4px);
      }
      50% {
        transform: translateY(0);
      }
      75% {
        transform: translateY(4px);
      }
      100% {
        transform: translateY(0);
      }
    }

    div:nth-child(1) {
      font-family: PangMenZhengDao, PangMenZhengDao;
      font-weight: normal;
      font-size: 22px;
      color: #ffffff;
      line-height: 25px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
    }

    div:nth-child(2) {
      margin-top: 5px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 1px;
      text-shadow: 0px 0px 4px rgba(27, 87, 110, 0.65);
    }
  }
}

//中间
.people_total {
  width: 522px;
  height: 172px;
  margin-left: 15px;
  background-image: url(@/assets/images/sy/center_1_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;

  &_item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .number {
      font-weight: normal;
      font-size: 16px;
      color: #00f5ff;
      line-height: 18px;
      letter-spacing: 2px;
      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
    }

    img {
      margin: 3px 0;
      width: 80px;
      height: 56px;
    }

    .sex {
      color: #ffffff;
    }
  }

  &_item2 {
    display: flex;
    flex-direction: column;
    align-items: center;

    .number {
      margin: 3px 0;
      font-weight: normal;
      font-size: 16px;
      color: #00f5ff;
      line-height: 18px;
      letter-spacing: 2px;
      text-shadow: 0px 0px 24px rgba(0, 252, 255, 0.5);
    }

    img {
      width: 60px;
      height: 59px;
    }

    .total {
      font-size: 18px;
      color: #ffffff;
    }
  }

  .left {
    position: absolute;
    top: 40px;
    left: 50px;
  }

  .center {
    position: absolute;
    top: 35px;
    left: 226px;
  }

  .right {
    position: absolute;
    top: 40px;
    right: 50px;
  }
  .sexMove {
    position: absolute;
    width: 100px;
    height: 20px;
    top: 80px;
    animation: sexIM 3s infinite linear;
  }
  @keyframes sexIM {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(-3px);
    }
    50% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(2px);
    }
    100% {
      transform: translateY(0);
    }
  }
}
//饼图list
.bt {
  display: flex;
  align-items: center;
}
.btList {
  width: 45%;
  height: 200px;
  overflow-y: auto;
  .btList_item {
    box-sizing: border-box;
    width: 100%;
    padding: 5px;

    .btList_item_color {
      width: 30px;
      height: 10px;
      background-color: var(--i);
      border-radius: 3px;
    }
    .btList_item_value {
      font-size: 18px;
      margin-top: 5px;
      color: #ffffff;
    }
  }
}
.btList::-webkit-scrollbar {
  display: none;
}
.table {
  width: 94%;
  margin-left: 5px;

  .table_choose {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .choose {
      cursor: pointer;
      text-align: center;
      line-height: 40px;
      width: 170px;
      height: 40px;
      background: linear-gradient(
        180deg,
        rgba(0, 142, 255, 0.35) 0%,
        rgba(0, 142, 255, 0.52) 100%
      );
      box-shadow: inset 0px -2px 0px 0px #00b4ff;
      border-radius: 2px 0px 0px 2px;
      color: #ffffff;
    }

    .noChoose {
      cursor: pointer;
      text-align: center;
      line-height: 40px;
      width: 170px;
      height: 40px;
      background: #073e84;
      border-radius: 2px 0px 0px 2px;
      color: #ccc;
    }
  }
}

.dailyActivity {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  background: rgba(60, 144, 255, 0.08);
  border: 1px solid #7aceff;
  border-bottom: 0px solid #7aceff;
  border-radius: 2px 2px 0px 0px;
  box-sizing: border-box;
  padding: 6px;
  .dailyActivityBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
    .dailyActivitybottom {
      display: flex;
      align-items: center;
    }
    img {
      width: 20px;
      height: 20px;
    }
    span {
      font-family: PangMenZhengDao;
      font-size: 16px;
      color: #62f3ff;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;
      display: inline-block;
    }
  }
}
//企业服务
.qyfw {
  height: 272px;
  height: 272px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 0px solid #7aceff;
  padding: 16px 19px;
  display: flex;
  flex-wrap: wrap;
  .qyfw_item {
    width: 50%;
    display: flex;
    align-items: center;
    // justify-content: center;
    .qyfw_item_left {
      width: 104px;
      height: 72px;
    }
    .qyfw_item_right {
      margin-top: 5px;
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      .name {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 20px;
      }
      .line {
        margin: 10px 0;
        width: 100px;
      }
      .number {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 20px;
        span {
          font-size: 18px;
          margin-right: 3px;
          font-weight: 600;
        }
      }
    }
  }
}
//政务服务
.zwfw {
  height: 272px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 0px solid #7aceff;
  padding: 16px 19px;
  .shang {
    display: flex;
    justify-content: space-around;
    &_item {
      width: 28%;
      display: flex;
      flex-direction: column;
      .title {
        background-image: url(@/assets/images/sy/zwfw_title.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 20px;
        letter-spacing: 2px;
      }
      .i {
        width: 130px;
        height: 130px;
      }
    }
  }
  .xia {
    display: flex;
    align-items: center;
    height: 88px;
    box-sizing: border-box;
    justify-content: space-around;
    background-image: url(@/assets/images/sy/zwfw_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .fgx {
      width: 3px;
      height: 40px;
      border-right: 2px dashed rgba(92, 118, 162, 0.8); /* 设置虚线 */
    }
    &_item {
      width: 49%;
      display: flex;
      align-items: center;
      justify-content: center;
      .left {
        width: 72px;
        height: 68px;
      }
      .right {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        .name {
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 20px;
        }
        .line {
          margin: 3px 0;
          width: 100px;
        }
        .time {
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 20px;
          span {
            font-size: 18px;
            margin-right: 3px;
            font-weight: 600;
          }
        }
      }
    }
  }
}
:deep(.el-table) {
  background: rgba(32, 64, 115, 1);

  --el-table-border-color: none;
  border: 1px solid #7aceff;
}
.table {
  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
    border: none !important;
    padding-left: 10px !important;
  }

  :deep(.el-table td.el-table__cell) {
    padding-left: 10px;
  }
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #2f4b74;
}

:deep(.el-table__empty-block) {
  background-color: #122560;
}

:deep(.el-table .el-table__row) {
  border-bottom: none;
}

//右边
//医疗卫生
.ylws {
  width: 96%;
  height: 150px;
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  &_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 35px;

    .name {
      padding: 8px 20px 8px 32px;
      background-image: url(@/assets/images/sy/ylws.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 1px;
      text-shadow: 0px 2px 2px #005473;
    }

    .value {
      margin-top: 5px;
      font-family: TCloudNumber, TCloudNumber;
      font-weight: bold;
      font-size: 24px;
      color: #ffffff;
      line-height: 28px;
      letter-spacing: 2px;
      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.63);
    }
  }
}

//文化事业
.whsy {
  width: 94%;
  height: 200px;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  &_item {
    box-sizing: border-box;
    height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(@/assets/images/sy/whsy.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 30%;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;

    .name {
      font-family: PangMenZhengDao;
      font-size: 18px;
      color: #ffffff;
      line-height: 21px;
      letter-spacing: 2px;
    }

    .value {
      margin-top: 5px;
      font-weight: 500;
      font-size: 30px;
      color: #00f7ff;
      line-height: 35px;
      letter-spacing: 1px;

      span {
        font-size: 14px;
        color: #d9f8ff;
        line-height: 20px;
      }
    }
  }

  &_item:nth-child(1) {
    .name {
      text-align: center;
      width: 113px;
    }

    .value {
      margin-top: 0px;
    }
  }

  &_item:nth-child(4) {
    width: 45%;
  }

  &_item:nth-child(5) {
    width: 45%;
  }
}

//体育事业
.tysy {
  width: 94%;
  padding-top: 10px;

  display: flex;
  justify-content: space-around;

  &_item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .value {
      font-weight: bold;
      font-size: 22px;
      color: #ffffff;
      line-height: 26px;
      letter-spacing: 3px;
      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.63);
    }

    img {
      width: 100px;
      height: 70px;
    }

    .name {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      line-height: 20px;
      letter-spacing: 2px;
      text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
      padding: 0 20px;
      background-image: url(@/assets/images/sy/bq.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
//交通事业
table {
  margin-top: 20px;
  width: 94%;
  border-radius: 4px;
  border: 0px solid #7aceff;

  tbody {
    tr {
      width: 100%;
      background: rgba(42, 71, 119, 1);

      &:nth-of-type(2n + 1) {
        background: rgba(32, 63, 112, 1);

        td:nth-child(1) {
          background: rgba(60, 87, 131, 0.8);
        }
      }

      td {
        width: 40%;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 43px;
        display: flex;

        .s1 {
          display: block;
          width: 76px;
          // background: red;
          text-align: justify;
          text-align-last: justify;
        }

        .s2 {
          margin-left: 3px;
          color: #00ffed;
        }
      }

      td:nth-child(1) {
        display: block;
        width: 136px;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 43px;
        letter-spacing: 1px;
        text-align: justify;
        text-align-last: justify;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
        background: rgba(63, 89, 133, 1);
      }

      td:nth-child(2) {
        padding-left: 30px;
        box-sizing: border-box;
        letter-spacing: 2px;
      }

      td:nth-child(3) {
        padding-left: 30px;
        box-sizing: border-box;
        letter-spacing: 2px;
      }
    }
  }
}
// 交通事业
.jtsyBox {
  width: 97%;
  // background-color: skyblue;
  display: flex;
  flex-direction: column;

  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  text-align: left;
  font-style: normal;
  font-family: PingFangSC, PingFang SC;

  img {
    width: 68px;
    height: 96px;
    margin-right: 4px;
  }

  .jtsyBoxtop {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 15px;
    padding-top: 20px;
    .jtsyBoxtop1 {
      position: relative;
      display: flex;
      overflow: hidden;
      .turn {
        width: 146px;
        height: 104px;
        position: absolute;
        left: -40px;
        top: -31px;
      }
      span {
        font-family: TCloudNumber, TCloudNumber;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        text-shadow: 0px 0px 4px #12fbff;
        text-align: left;
        font-style: normal;
      }
      .jtsyname {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        text-shadow: 0px 2px 4px #35e0f9;
        text-align: left;
        font-style: normal;
        position: relative;
      }
      .jtsyname::after {
        content: "";
        display: block;
        width: 60px;
        border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
        position: absolute;
        bottom: -6px;
        left: 0;
      }
      .jtsytext {
        margin-top: 14px;
        margin-bottom: 2px;
        // width: 80px;
      }
    }
  }
  .jtsyBoxbot {
    display: flex;
    justify-content: space-between;
    .jtsyBoxtop1 {
      display: flex;
      position: relative;
      .turn {
        width: 146px;
        height: 104px;
        position: absolute;
        left: -40px;
        top: -31px;
      }
      span {
        font-family: TCloudNumber, TCloudNumber;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        text-shadow: 0px 0px 4px #12fbff;
        text-align: left;
        font-style: normal;
      }
      .jtsyname {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        text-shadow: 0px 2px 4px #35e0f9;
        text-align: left;
        font-style: normal;
        position: relative;
      }
      .jtsyname::after {
        content: "";
        display: block;
        width: 60px;
        border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */
        position: absolute;
        bottom: -6px;
        left: 0;
      }
      .jtsytext {
        margin-top: 14px;
        margin-bottom: 2px;
      }
    }
  }
}
/* 渐变设置 */
.fade-enter-from,
.fade-leave-to {
  transform: translateY(50px);
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active {
  transition: all 1s ease;
}

.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>