ggfwjsc/src/view/sy.vue

<template>
  <div class="module">
    <div class="displayFlex left_bg">
      <div class="flex1">
        <div class="yd_title left_1"></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">147.380.290</span>
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right">147.380.290</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">147.380.290</span>
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right">147.380.290</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">147.380.290</span>
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right">147.380.290</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">147.380.290</span>
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right">147.380.290</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">147.380.290</span>
              </div>
              <div class="sr" style="margin-top: 5px">
                <span class="left">支出：</span
                ><span class="right">147.380.290</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">79.972</div>
          </div>
          <div class="left_1_3">
            <div class="top">救助金额</div>
            <div class="bottom">812,471,092</div>
          </div>
        </div>
      </div>
      <div class="flex1" style="margin-top: 10px">
        <div class="yd_title left_2"></div>
        <div class="left_2_top">
          <div class="item school">
            <div class="shang">学校</div>
            <div class="xia">100</div>
          </div>
          <div class="item teacher">
            <div class="shang">教师</div>
            <div class="xia">4.827</div>
          </div>
          <div class="item student">
            <div class="shang">学生</div>
            <div class="xia">42.827</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">
                {{ jysyList[0].teacher }}:{{ 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>
        <div class="left_3_1">
          <div class="left_3_1_item">
            <div>2,087</div>
            <div>就业培训</div>
          </div>
          <div class="left_3_1_item">
            <div>2,087</div>
            <div>就业见习服务</div>
          </div>
          <div class="left_3_1_item">
            <div>2,087</div>
            <div>就业援助</div>
          </div>
        </div>
      </div>
    </div>
    <div class="displayFlex center_bg">
      <div class="flex1">
        <div class="people_total">
          <div class="people_total_item left">
            <div class="number">891,284</div>
            <img src="../assets/images/sy/man.png" alt="" />
            <div class="sex">男性人口</div>
          </div>
          <div class="people_total_item2 center">
            <img src="../assets/images/sy/people_total.png" alt="" />
            <div class="number">2,791,284</div>
            <div class="total">人口总数</div>
          </div>
          <div class="people_total_item right">
            <div class="number">291.284</div>
            <img src="../assets/images/sy/woman.png" alt="" />
            <div class="sex">女性人口</div>
          </div>
        </div>
        <ePie2 style="margin-top: 20px"></ePie2>
        <ePie style="margin-bottom: 30px"></ePie>
        <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>
          <el-table
            :data="tableData"
            style="width: 100%; height: 272px"
            class="table_border"
            :row-style="rowState"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column prop="company" label="企业名称" width="180" />
            <el-table-column
              prop="address"
              label="项目事项牵头单位"
              width="180"
            />
            <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>
      </div>
    </div>
    <div class="displayFlex right_bg">
      <div class="flex1">
        <div class="yd_title mechanism"></div>
        <div class="ylws">
          <div class="ylws_item" v-for="(item, index) in ylwsList" :key="index">
            <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>
        <div class="whsy">
          <div class="whsy_item" v-for="(item, index) in 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>
        <div class="tysy">
          <div class="tysy_item" v-for="(item, index) in tysyList" :key="index">
            <div class="value">
              {{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
            </div>
            <img :src="item.img" />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="flex1" style="margin-top: 10px">
        <div class="yd_title last_1"></div>
        <table class="table">
          <tbody>
            <tr
              v-for="(item, index) in jtsyList"
              :key="index"
              style="display: flex; box-sizing: border-box"
            >
              <td>{{ item.name }}</td>
              <td>
                <div class="s1">{{ item.key1 }}</div>
                :<span class="s2">{{ item.key1_value }}</span>
              </td>
              <td>
                <span class="s1">{{ item.key2 }}</span
                >:<span class="s2">{{ item.key2_value }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import ePie from "./echarts_sy/pie.vue";
import ePie2 from "./echarts_sy/pie2.vue";
import footerball from "../assets/images/sy/footerball.png";
import baskerball from "../assets/images/sy/baskerball.png";
import badminton from "../assets/images/sy/badminton.png";
import running from "../assets/images/sy/running.png";
import tableTennis from "../assets/images/sy/tableTennis.png";
import { ref, onMounted, onBeforeMount, computed } from "vue";
const choose = ref("1");

const change = (index) => {
  choose.value = index;
};
const tableData = ref([
  {
    company: "龙游县文旅集团",
    address: "龙游县五一单位",
    finish: true,
  },
  {
    company: "龙游县文旅集团",
    address: "龙游县五一单位",
    finish: true,
  },
  {
    company: "龙游县文旅集团",
    address: "龙游县五一单位",
    finish: true,
  },
  {
    company: "龙游县文旅集团",
    address: "龙游县五一单位",
    finish: false,
  },
  {
    company: "龙游县文旅集团",
    address: "龙游县五一单位",
    finish: false,
  },
  {
    company: "龙游县文旅集团",
    address: "龙游县五一单位",
    finish: false,
  },
  {
    company: "龙游县文旅集团",
    address: "龙游县五一单位",
    finish: false,
  },
  {
    company: "龙游县文旅集团",
    address: "龙游县五一单位",
    finish: false,
  },
]);
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 tableHeaderColor = (arg) => {
  return {
    paddingLeft: "10px",
    letterSpacing: "1px",
    fontSize: "15px",
    height: "50px",
    backgroundColor: "#455F8A",
    color: "#fff",
  };
};
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 jysyList = ref([
  {
    title: "县镇",
    teacher: 1,
    student: 10.76,
  },
  {
    title: "农村",
    teacher: 1,
    student: 8.53,
  },
]);
const ylwsList = ref([
  {
    name: "医院卫生院",
    value: 50,
  },
  {
    name: "注册护士",
    value: 38.871,
  },
  {
    name: "职业医生",
    value: 28.871,
  },
  {
    name: "家庭签约医生",
    value: 6.871,
  },
  {
    name: "医院卫生院床位数",
    value: 18.261,
  },
  {
    name: "健康档案建档",
    value: 129.371,
  },
  {
    name: "村社卫生服务站",
    value: 98,
  },
]);

const whsyList = ref([
  {
    name: "公共图书馆(南孔书院)",
    value: "198",
    dw: "家",
  },
  {
    name: "总藏书",
    value: "1983",
    dw: "万册",
  },
  {
    name: "送戏下乡次数",
    value: "2787",
    dw: "次",
  },
  {
    name: "博物馆观展人次",
    value: "1.292.874",
    dw: "次",
  },
  {
    name: "图书借阅",
    value: "1.724.012",
    dw: "次",
  },
]);

const tysyList = ref([
  {
    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,
  },
]);

const jtsyList = ref([
  {
    name: "公共自行车",
    key1: "骑行次数",
    key1_value: "1172491",
    key2: "骑行时长",
    key2_value: "1283h",
  },
  {
    name: "电动单车",
    key1: "骑行次数",
    key1_value: "1172491",
    key2: "骑行时长",
    key2_value: "1283h",
  },
  {
    name: "公共汽车",
    key1: "公交线路",
    key1_value: "176",
    key2: "乘坐人次",
    key2_value: "239741",
  },
  {
    name: "长途汽车",
    key1: "班车次数",
    key1_value: "133",
    key2: "客流量",
    key2_value: "192874",
  },
  {
    name: "高铁",
    key1: "列车班次",
    key1_value: "23",
    key2: "客流量",
    key2_value: "113414",
  },
]);
</script>

<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;

  .text {
    display: flex;
    position: absolute;
    font-size: 16px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    right: 5px;
    top: 1px;
  }
  .c {
    width: 130px;
    height: 42px;
    cursor: pointer;
  }
}

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

.service {
  background-image: url(@/assets/images/sy/right_2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.last {
  background-image: url(@/assets/images/sy/right_3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.last_1 {
  background-image: url(@/assets/images/sy/right_4.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: DINAlternate, DINAlternate;
        }
      }
    }
  }
}
.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/left_1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

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

.left_3 {
  background-image: url(@/assets/images/sy/left_3.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: 12px;
          color: #ffffff;
          line-height: 17px;
        }
        .right {
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 19px;
        }
      }
    }
  }
}
.yl_1 {
  position: absolute;
  top: 50px;
  left: 75px;
}
.yl_2 {
  position: absolute;
  top: 50px;
  left: 233px;
  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: 25px;
  background-image: url(@/assets/images/sy/left_1_1.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: 16px;
      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: 16px;
      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: 16px;
      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: 18px;
      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: 18px;
      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: 18px;
      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;
    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;
      }
    }
    &_xia {
      margin-top: 10px;
      width: 100%;
      height: 1px;
      border: 1px solid rgba(255, 255, 255, 0.77);
      position: relative;
      .csbl {
        position: absolute;
        top: -2px;
        left: 0;
        width: calc(var(--teacher) / var(--total) * 100%);
        border-radius: 3px;
        border: 3px solid #00f5ff;
      }
      .ncbl {
        position: absolute;
        top: -2px;
        left: 0;
        width: calc(var(--teacher) / var(--total) * 100%);
        border-radius: 3px;
        border: 3px solid #ffd863;
      }
    }
  }
  margin-bottom: 22px;
}
//就业服务
.left_3_1 {
  width: 94%;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  &_item {
    box-sizing: border-box;
    width: 160px;
    height: 133px;
    background-image: url(@/assets/images/sy/jyfw.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding-top: 22px;
    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: 215px;
  }
  .right {
    position: absolute;
    top: 40px;
    right: 50px;
  }
}
.table {
  width: 94%;
  margin-left: 5px;
  .table_choose {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    .choose {
      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 {
      text-align: center;
      line-height: 40px;
      width: 170px;
      height: 40px;
      background: #073e84;
      border-radius: 2px 0px 0px 2px;
      color: #ccc;
    }
  }
}
:deep(.el-table) {
  background: rgba(32, 64, 115, 1);

  --el-table-border-color: none;
  border: 1px solid #7aceff;
}
: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;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #2f4b74;
}

::v-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: DINAlternate, DINAlternate;
      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: 14px;
        color: #ffffff;
        line-height: 43px;
        display: flex;
        .s1 {
          display: block;
          width: 65px;
          // background: red;
          text-align: justify;
          text-align-last: justify;
        }
        .s2 {
          margin-left: 3px;
          color: #00ffed;
        }
      }
      td:nth-child(1) {
        display: block;
        width: 122px;
        font-weight: 500;
        font-size: 14px;
        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: 50px;
        box-sizing: border-box;
        letter-spacing: 2px;
      }
      td:nth-child(3) {
        padding-left: 60px;
        box-sizing: border-box;
        letter-spacing: 2px;
      }
    }
  }
}
</style>