echarts添加显示隐藏按钮

zhangxiaoxu123

2022-09-14 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a

 src/pages/show/index/index.vue

@@ -4,17 +4,17 @@
      <div class="yanglao-block">
        <img src="../../../assets/images/yanglao-icon1.png" alt="">
        <h1>城镇职工养老保险参保人数</h1>
        <h2><font class="bigger">277.8</font>万人</h2>
        <h2><font class="bigger">{{ Insured.zhigong }}</font>万人</h2>
      </div>
      <div class="yanglao-block">
        <img src="../../../assets/images/yanglao-icon2.png" alt="">
        <h1>城镇职工养老保险参保人数</h1>
        <h2><font class="bigger">277.8</font>万人</h2>
        <h1>城乡居民养老保险参保人数</h1>
        <h2><font class="bigger">{{ Insured.jumin }}</font>万人</h2>
      </div>
      <div class="yanglao-block">
        <img src="../../../assets/images/yanglao-icon3.png" alt="">
        <h1>城镇职工养老保险参保人数</h1>
        <h2><font class="bigger">277.8</font>万人</h2>
        <h1>社会保障卡持卡人数</h1>
        <h2><font class="bigger">{{ Insured.card }}</font>万人</h2>
      </div>
      <div class="yanglao-block">
        <div class="yanglao-block-inside">
@@ -22,27 +22,27 @@
            <img src="../../../assets/images/yanglao-icon4.png" alt="">
            <div>
              <h1>全市事业单位</h1>
              <h2><font class="bigger">5505</font>家</h2>
              <h2><font class="bigger">{{ Institution.quanshi }}</font>家</h2>
            </div>
          </div>
          <div class="inside-right">
            <h1>在职人员</h1>
            <h2><font class="bigger">16.8</font>万人</h2>
            <h2><font class="bigger">{{ Institution.quanshiren }}</font>万人</h2>
          </div>
        </div>
        <div class="yanglao-block-inside2">
          <div class="inside-left2">
            <h1>市值事业单位</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">513</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">5133244</font>人</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhi }}</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhiren }}</font>万人</h2>
            </div>
          </div>
          <div class="inside-left2">
            <h1>县（市、区）</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">4992</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">135380</font>人</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xian }}</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xianren }}</font>万人</h2>
            </div>
          </div>
        </div>
@@ -53,12 +53,12 @@
        <div class="yaolao-box">
          <img src="../../../assets/images/yanglao-icon5.png" alt="">
          <h1>城镇居民人均可支配</h1>
          <h2><font class="bigger">27721</font>元</h2>
          <h2><font class="bigger">{{ Income.chengzhen }}</font>元</h2>
        </div>
        <div class="yaolao-box">
          <img src="../../../assets/images/yanglao-icon6.png" alt="">
          <h1>农村居民人均可支配</h1>
          <h2><font class="bigger">18676</font>元</h2>
          <h2><font class="bigger">{{ Income.nongcun }}</font>元</h2>
        </div>
        <div class="fu-biaoti">
          <h1>居民收入</h1>
@@ -70,27 +70,27 @@
            <img src="../../../assets/images/yanglao-icon7.png" alt="">
            <div>
              <h1>欠薪线索总计</h1>
              <h2><font class="bigger">32505</font>条</h2>
              <h2><font class="bigger">{{ Migrant.zongji }}</font>条</h2>
            </div>
          </div>
          <div class="inside-right">
            <h1>办结率</h1>
            <h2><font class="bigger">96.8</font>%</h2>
            <h2><font class="bigger">{{ Migrant.zbanjie }}</font>%</h2>
          </div>
        </div>
        <div class="yanglao-block-inside2">
          <div class="inside-left2">
            <h1>全国根治欠薪线索</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">15132</font>条</h2>
              <h2 class="rightMargin"><font class="bigger">98.7</font>%</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Migrant.quanguo }}</font>条</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Migrant.qbanjie }}</font>%</h2>
            </div>
          </div>
          <div class="inside-left2">
            <h1>市级欠薪线索</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">14992</font>条</h2>
              <h2 class="rightMargin"><font class="bigger">98.6</font>%</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Migrant.shiji }}</font>条</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Migrant.sbanjie }}</font>%</h2>
            </div>
          </div>
        </div>
@@ -104,28 +104,28 @@
            <img src="../../../assets/images/yanglao-icon8.png" alt="">
            <div>
              <h1>放贷笔数</h1>
              <h2><font class="bigger">32505</font>笔</h2>
              <h2><font class="bigger">{{ Loan.loanNums }}</font>笔</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon9.png" alt="">
            <div>
              <h1>放贷金额</h1>
              <h2><font class="bigger">32505</font>亿元</h2>
              <h2><font class="bigger">{{ Loan.loanAmount }}</font>亿元</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon10.png" alt="">
            <div>
              <h1>扶持自主创业</h1>
              <h2><font class="bigger">32505</font>人</h2>
              <h2><font class="bigger">{{ Loan.supportNums }}</font>人</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon11.png" alt="">
            <div>
              <h1>带动就业</h1>
              <h2><font class="bigger">32505</font>人</h2>
              <h2><font class="bigger">{{ Loan.addjobNums }}</font>人</h2>
            </div>
          </div>
        </div>
@@ -139,28 +139,28 @@
            <img src="../../../assets/images/yanglao-icon12.png" alt="">
            <div>
              <h1>专业技术人才</h1>
              <h2><font class="bigger">50.8</font>万</h2>
              <h2><font class="bigger">{{ Personnel.zhuan }}</font>万</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon13.png" alt="">
            <div class="line-center">
              <h2>A卡:<font class="small">835</font>人</h2>
              <h2>B卡:<font class="small">32505</font>人</h2>
              <h2>A卡:<font class="small">{{ Personnel.personA }}</font>人</h2>
              <h2>B卡:<font class="small">{{ Personnel.personB }}</font>人</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon14.png" alt="">
            <div>
              <h1>享受特殊津贴</h1>
              <h2><font class="bigger">264</font>人</h2>
              <h2><font class="bigger">{{ Personnel.jintie }}</font>人</h2>
            </div>
          </div>
          <div class="inside-box-block">
            <img src="../../../assets/images/yanglao-icon15.png" alt="">
            <div>
              <h1>高技能人才</h1>
              <h2><font class="bigger">25.2</font>万人</h2>
              <h2><font class="bigger">{{ Personnel.gao }}</font>万人</h2>
            </div>
          </div>
        </div>
@@ -171,136 +171,144 @@

    </div>
    <div class="index-line-box2">
       <div class="shu-ju-box">
         <div class="shuju-title-box">
           <h1>就业数据</h1>
         </div>
         <div class="shuju-main-box">
           <div class="shuju-table">
             <div class="shuju-table-line">
               <div class="biao-title"></div>
               <div class="title-flex">
                 <div class="title">
                   <h1>本月</h1>
                 </div>
                 <div class="title">
                   <h1>本年</h1>
                 </div>
                 <div class="title">
                   <h1>任务率</h1>
                 </div>
                 <div class="title">
                   <h1>任务数</h1>
                 </div>
               </div>
             </div>
             <div class="shuju-scroll">
               <div class="shuju-table-line2">
                 <div class="biao-title">
                   <h1>城镇新增就业（人）</h1>
                 </div>
                 <div class="title-flex">
                   <div class="title">
                     <h1>138957</h1>
                   </div>
                   <div class="title">
                     <h1>128417</h1>
                   </div>
                   <div class="title">
                     <h1 class="fontColor">111.2%</h1>
                   </div>
                   <div class="title">
                     <h1>125000</h1>
                   </div>
                 </div>
               </div>
               <div class="shuju-table-line2">
                 <div class="biao-title">
                   <h1>失业再就业（人）</h1>
                 </div>
                 <div class="title-flex">
                   <div class="title">
                     <h1>138957</h1>
                   </div>
                   <div class="title">
                     <h1>128417</h1>
                   </div>
                   <div class="title">
                     <h1 class="fontColor">111.2%</h1>
                   </div>
                   <div class="title">
                     <h1>125000</h1>
                   </div>
                 </div>
      <div class="shu-ju-box">
        <div class="shuju-title-box">
          <h1>就业数据</h1>
        </div>
        <div class="shuju-main-box">
          <div class="shuju-table">
            <div class="shuju-table-line">
              <div class="biao-title"></div>
              <div class="title-flex">
                <div class="title">
                  <h1>本月</h1>
                </div>
                <div class="title">
                  <h1>本年</h1>
                </div>
                <div class="title">
                  <h1>任务率</h1>
                </div>
                <div class="title">
                  <h1>任务数</h1>
                </div>
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2" v-for="(item,index) in LabourTable" :key="index">
                <div class="biao-title">
                  <el-tooltip placement="top">
                    <div slot="content">
                      <h1>{{ item.dataType | dataFilter }}</h1>
                    </div>
                    <template>
                      <div class="content">
                        <h1 style="text-align: left">{{ item.dataType | dataFilter }}</h1>
                      </div>
                    </template>
                  </el-tooltip>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1 style="text-align: left">{{ item.monthData }}</h1>
                  </div>
                  <div class="title">
                    <h1>{{ item.yearData }}</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColorBlue">{{ item.finishRate }}</h1>
                  </div>
                  <div class="title">
                    <h1>{{ item.plan }}</h1>
                  </div>
                </div>
              </div>
              <!--              <div class="shuju-table-line2">
                              <div class="biao-title">
                                <h1>失业再就业（人）</h1>
                              </div>
                              <div class="title-flex">
                                <div class="title">
                                  <h1>138957</h1>
                                </div>
                                <div class="title">
                                  <h1>128417</h1>
                                </div>
                                <div class="title">
                                  <h1 class="fontColor">111.2%</h1>
                                </div>
                                <div class="title">
                                  <h1>125000</h1>
                                </div>
                              </div>

               </div>
               <div class="shuju-table-line2">
                 <div class="biao-title">
                   <h1>困难再就业（人）</h1>
                 </div>
                 <div class="title-flex">
                   <div class="title">
                     <h1>138957</h1>
                   </div>
                   <div class="title">
                     <h1>128417</h1>
                   </div>
                   <div class="title">
                     <h1 class="fontColor">111.2%</h1>
                   </div>
                   <div class="title">
                     <h1>125000</h1>
                   </div>
                 </div>
                            </div>
                            <div class="shuju-table-line2">
                              <div class="biao-title">
                                <h1>困难再就业（人）</h1>
                              </div>
                              <div class="title-flex">
                                <div class="title">
                                  <h1>138957</h1>
                                </div>
                                <div class="title">
                                  <h1>128417</h1>
                                </div>
                                <div class="title">
                                  <h1 class="fontColor">111.2%</h1>
                                </div>
                                <div class="title">
                                  <h1>125000</h1>
                                </div>
                              </div>

               </div>
               <div class="shuju-table-line2">
                 <div class="biao-title">
                   <h1>登记失业率（%）</h1>
                 </div>
                 <div class="title-flex">
                   <div class="title">
                     <h1>138957</h1>
                   </div>
                   <div class="title">
                     <h1>128417</h1>
                   </div>
                   <div class="title">
                     <h1 class="fontColor">111.2%</h1>
                   </div>
                   <div class="title">
                     <h1>125000</h1>
                   </div>
                 </div>
               </div>
               <div class="shuju-table-line2">
                 <div class="biao-title">
                   <h1>非农就业转移（人）</h1>
                 </div>
                 <div class="title-flex">
                   <div class="title">
                     <h1>138957</h1>
                   </div>
                   <div class="title">
                     <h1>128417</h1>
                   </div>
                   <div class="title">
                     <h1 class="fontColor">111.2%</h1>
                   </div>
                   <div class="title">
                     <h1>125000</h1>
                   </div>
                 </div>
                            </div>
                            <div class="shuju-table-line2">
                              <div class="biao-title">
                                <h1>登记失业率（%）</h1>
                              </div>
                              <div class="title-flex">
                                <div class="title">
                                  <h1>138957</h1>
                                </div>
                                <div class="title">
                                  <h1>128417</h1>
                                </div>
                                <div class="title">
                                  <h1 class="fontColor">111.2%</h1>
                                </div>
                                <div class="title">
                                  <h1>125000</h1>
                                </div>
                              </div>
                            </div>
                            <div class="shuju-table-line2">
                              <div class="biao-title">
                                <h1>非农就业转移（人）</h1>
                              </div>
                              <div class="title-flex">
                                <div class="title">
                                  <h1>138957</h1>
                                </div>
                                <div class="title">
                                  <h1>128417</h1>
                                </div>
                                <div class="title">
                                  <h1 class="fontColor">111.2%</h1>
                                </div>
                                <div class="title">
                                  <h1>125000</h1>
                                </div>
                              </div>

               </div>
             </div>
                            </div>-->
            </div>

           </div>
           <div class="shuju-echarts"></div>
         </div>

       </div>
       <div class="shu-ju-box">
          </div>
          <div class="shuju-echarts" id="jiuyeshujuEcharts"></div>
        </div>
      </div>
      <div class="shu-ju-box">
        <div class="shuju-title-box">
          <h1>城镇职工养老</h1>
        </div>
@@ -321,121 +329,121 @@
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
              <div class="shuju-table-line2 chengzhen_scroll" v-for="(item,index) in TownTable" :key="index">
                <div class="biao-title">
                  <h1>人数（万人）</h1>
                  <h1>{{ item.name }}</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>277.8</h1>
                    <h1>{{ item.total }}</h1>
                  </div>
                  <div class="title">
                    <h1>35.5</h1>
                    <h1>{{ item.office }}</h1>
                  </div>
                  <div class="title">
                    <h1>242.3</h1>
                    <h1>{{ item.enterprise }}</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2 shuju-bj-color">
                <div class="biao-title">
                  <h1>在职（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>217.8</h1>
                  </div>
                  <div class="title">
                    <h1>13.5</h1>
                  </div>
                  <div class="title">
                    <h1>142.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>离退休（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>23.8</h1>
                  </div>
                  <div class="title">
                    <h1>16.5</h1>
                  </div>
                  <div class="title">
                    <h1>52.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>供养比</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>3.8</h1>
                  </div>
                  <div class="title">
                    <h1>2.5</h1>
                  </div>
                  <div class="title">
                    <h1>1.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>233.8</h1>
                  </div>
                  <div class="title">
                    <h1>24.5</h1>
                  </div>
                  <div class="title">
                    <h1>341.3</h1>
                  </div>
                </div>
              <!--              <div class="shuju-table-line2 shuju-bj-color">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>在职（万人）</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>217.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>13.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>142.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>离退休（万人）</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>23.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>16.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>52.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>供养比</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>3.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>2.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>1.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>收入（亿元）</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>233.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>24.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>341.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>支出（亿元）</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>533.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>84.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>541.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--              <div class="shuju-table-line2">-->
              <!--                <div class="biao-title">-->
              <!--                  <h1>结余（亿元）</h1>-->
              <!--                </div>-->
              <!--                <div class="title-flex">-->
              <!--                  <div class="title">-->
              <!--                    <h1>33.8</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>34.5</h1>-->
              <!--                  </div>-->
              <!--                  <div class="title">-->
              <!--                    <h1>341.3</h1>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>533.8</h1>
                  </div>
                  <div class="title">
                    <h1>84.5</h1>
                  </div>
                  <div class="title">
                    <h1>541.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>33.8</h1>
                  </div>
                  <div class="title">
                    <h1>34.5</h1>
                  </div>
                  <div class="title">
                    <h1>341.3</h1>
                  </div>
                </div>
              </div>
             </div>
          </div>
          <div class="shuju-echarts"></div>
          <div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
        </div>

      </div>
@@ -443,146 +451,11 @@
    <div class="index-line-box2">
      <div class="shu-ju-box">
        <div class="shuju-title-box">
          <h1>工伤保险</h1>
          <h1>失业保险</h1>
        </div>
        <div class="shuju-main-box">
          <div class="shuju-table">
            <div class="shuju-table-line">
              <div class="biao-title"></div>
              <div class="title-flex">
                <div class="title">
                  <h1>本月</h1>
                </div>
                <div class="title">
                  <h1>本年同期</h1>
                </div>
                <div class="title">
                  <h1>同比</h1>
                </div>
                <div class="title">
                  <h1>上月</h1>
                </div>
                <div class="title">
                  <h1>环比</h1>
                </div>
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>人数（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>

              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>本月结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>累计结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="shuju-echarts"></div>
          <shiyeAndgongshangBaoxian typeString="4"></shiyeAndgongshangBaoxian>
          <div class="shuju-echarts" id="shiyeBaoxianEcharts"></div>
        </div>

      </div>
@@ -591,142 +464,8 @@
          <h1>工伤保险</h1>
        </div>
        <div class="shuju-main-box">
          <div class="shuju-table">
            <div class="shuju-table-line">
              <div class="biao-title"></div>
              <div class="title-flex">
                <div class="title">
                  <h1>本月</h1>
                </div>
                <div class="title">
                  <h1>本年同比</h1>
                </div>
                <div class="title">
                  <h1>同比</h1>
                </div>
                <div class="title">
                  <h1>上月</h1>
                </div>
                <div class="title">
                  <h1>环比</h1>
                </div>
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>人数（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>本月结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>累计结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="shuju-echarts"></div>
          <shiyeAndgongshangBaoxian typeString="5"></shiyeAndgongshangBaoxian>
          <div class="shuju-echarts" id="gongshangBaoxianEcharts"></div>
        </div>

      </div>
@@ -734,104 +473,739 @@
  </div>
</template>
<script>
export default {};
    import echarts from "echarts/lib/echarts";
    import nowSize from "../../../libs/nowSize";
    import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian";
    import {
        getInsured,
        getInstitution,
        getIncome,
        getMigrant,
        getLoan,
        getPersonnel,
        getLabourTable,
        getLabourChart,
        getInsuranceChart,
        getTownTable
    } from "@/api/index";

    export default {
        name: "index",
        components: {
            shiyeAndgongshangBaoxian
        },
        data() {
            return {
                // 被保险人
                Insured: {},
                // 首页市直单位数据
                Institution: {},
                // 人均可支配收入
                Income: {},
                // 查询欠薪追缴
                Migrant: {},
                // 查询创业担保贷款数据接口
                Loan: {},
                // 23. 查询人才建设数据接口
                Personnel: {},
                // 24. 查询首页就业数据表格接口
                LabourTable: {},
                // 25.首页就业数据折线图
                JiuYeEchart: {
                    addJob: [],
                    reJob: [],
                    hardJob: [],
                    LabourChartYear: []
                },
                // 26. 查询首页养老、工伤、失业保险折线图接口
                // 城镇职工养老
                YangLaoEchart: {
                    years: [],
                    shouru: [],
                    zhichu: [],
                    jieyu: []
                },
                // 失业保险
                ShiYeEchart: {
                    years: [],
                    shouru: [],
                    zhichu: [],
                    jieyu: []
                },
                // 工伤
                GongShangEchart: {
                    years: [],
                    shouru: [],
                    zhichu: [],
                    jieyu: []
                },
                // 27. 查询首页城镇职工养老表格数据接口
                TownTable: [],
                // 28.失业保险
                type: '',
            }
        },
        mounted() {
            console.log(this.$store.state.user.token, 'state=======')
            this.jiuyeshujuEcharts()
            this.chengzhenZhigongYanglaoEcharts()
            this.shiyeBaoxianEcharts()
            this.gongshangBaoxianEcharts()
            this.getInsured()
            this.getInstitution()
            this.getIncome()
            this.getMigrant()
            this.getLoan()
            this.getPersonnel()
            this.getLabourTable()
            this.getLabourChart()
            this.getInsuranceChart()
            this.getTownTable()
            // this.getshiyeTable()
            // this.getGongshangTable()
        },
        filters: {
            dataFilter(type) {
                switch (type) {
                    case '1':
                        return '城镇新增就业人数'
                        break
                    case '2':
                        return '城镇失业人员实现再就业人数'
                        break
                    case '3':
                        return '城镇就业困难人员实现再就业人数'
                        break
                    case '4':
                        return '农村劳动力向非农产业转移人数'
                    case '7':
                        return '城镇登记失业率'
                    default:
                        break
                }
            }
        },
        methods: {
            /*就业数据*/
            jiuyeshujuEcharts() {
                let myEchart = this.$echarts.init(document.getElementById('jiuyeshujuEcharts'))
                let option = {
                    color: ['#FF5151', '#51FF5D', '#FFD151'],
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    legend: {
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(10),
                        right: '0%',
                        top: '0%',
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize: nowSize(18),
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.JiuYeEchart.LabourChartYear,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: nowSize(20)
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: "#fff",
                                fontSize: nowSize(20)
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        // 刻度设置
                        axisTick: {
                            show: false
                        }
                    },
                    series: [{
                        name: '城镇新增就业',
                        type: 'line',
                        data: this.JiuYeEchart.addJob
                    },
                        {
                            name: '失业再就业',
                            type: 'line',
                            data: this.JiuYeEchart.reJob
                        },
                        {
                            name: '困难再就业',
                            type: 'line',
                            data: this.JiuYeEchart.hardJob
                        }]
                };
                myEchart.setOption(option)
                window.addEventListener('resize', function () {
                    myEchart.resize()
                })
            },
            /*城镇职工养老*/
            chengzhenZhigongYanglaoEcharts() {
                let myEchart = this.$echarts.init(document.getElementById('chengzhenZhigongYanglaoEcharts'))
                let option = {
                    color: ['#FF5151', '#51FF5D', '#FFD151'],
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    legend: {
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(10),
                        right: '10%',
                        top: '0%',
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize: nowSize(18),
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '1%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.YangLaoEchart.years,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: nowSize(20)
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: nowSize(20)
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '收入',
                            type: 'line',
                            data: this.YangLaoEchart.shouru
                        },
                        {
                            name: '支出',
                            type: 'line',
                            data: this.YangLaoEchart.zhichu
                        },
                        {
                            name: '结余',
                            type: 'line',
                            data: this.YangLaoEchart.jieyu
                        }
                    ]
                };
                myEchart.setOption(option)
                window.addEventListener('resize', function () {
                    myEchart.resize()
                })
            },
            /*失业保险*/
            shiyeBaoxianEcharts() {
                let myEchart = this.$echarts.init(document.getElementById('shiyeBaoxianEcharts'))
                let option = {
                    color: ['#FF5151', '#51FF5D', '#FFD151'],
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    legend: {
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(1),
                        right: '10%',
                        top: '0%',
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize: nowSize(18),
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '1%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.ShiYeEchart.years,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: nowSize(20)
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: nowSize(20)
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '收入',
                            type: 'line',
                            data: this.ShiYeEchart.shouru
                        },
                        {
                            name: '支出',
                            type: 'line',
                            data: this.ShiYeEchart.zhichu
                        },
                        {
                            name: '结余',
                            type: 'line',
                            data: this.ShiYeEchart.jieyu
                        }
                    ]
                };
                myEchart.setOption(option)
                window.addEventListener('resize', function () {
                    myEchart.resize()
                })
            },
            /*工伤保险*/
            gongshangBaoxianEcharts() {
                let myEchart = this.$echarts.init(document.getElementById('gongshangBaoxianEcharts'))
                let option = {
                    color: ['#FF5151', '#51FF5D', '#FFD151'],
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    legend: {
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(10),
                        right: '10%',
                        top: '0%',
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize: nowSize(18),
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '1%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.GongShangEchart.years,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: nowSize(20)
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: nowSize(20)
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999999",
                                width: 1,
                                type: "solid"
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '收入',
                            type: 'line',
                            data: this.GongShangEchart.shouru
                        },
                        {
                            name: '支出',
                            type: 'line',
                            data: this.GongShangEchart.zhichu
                        },
                        {
                            name: '结余',
                            type: 'line',
                            data: this.GongShangEchart.jieyu
                        }
                    ]
                };
                myEchart.setOption(option)
                window.addEventListener('resize', function () {
                    myEchart.resize()
                })
            },
            // 查询首页养老保险参保人数，社保卡人数
            getInsured() {
                getInsured().then(res => {
                    if (res.code === 1000) {
                        this.Insured = res.obj
                    } else {
                        this.$message.error('获取信息失败')
                    }
                })
            },
            // 查询首页市直单位数据接口
            getInstitution() {
                getInstitution().then(res => {
                    if (res.code === 1000) {
                        this.Institution = res.obj
                    } else {
                        this.$message.error('获取信息失败')
                    }
                })
            },
            // 查询人均可支配收入数据接口
            getIncome() {
                getIncome().then(res => {
                    if (res.code === 1000) {
                        this.Income = res.obj
                    }
                })
            },
            // 查询欠薪追缴数据接口
            getMigrant() {
                getMigrant().then(res => {
                    if (res.code === 1000) {
                        this.Migrant = res.obj
                    }
                })
            },
            // 查询创业担保贷款数据接口
            getLoan() {
                getLoan().then(res => {
                    if (res.code === 1000) {
                        this.Loan = res.obj
                    }
                })
            },
            // 23. 查询人才建设数据接口
            getPersonnel() {
                getPersonnel().then(res => {
                    if (res.code === 1000) {
                        this.Personnel = res.obj
                    }
                })
            },
            // 24. 查询首页就业数据表格接口
            getLabourTable() {
                getLabourTable().then(res => {
                    this.LabourTable = res.list
                })
            },
            // 25. 查询首页就业数据折线图接口
            async getLabourChart() {
                await getLabourChart().then(res => {
                    if (res.code === 1000) {
                        this.JiuYeEchart.LabourChartYear = res.obj.years;
                        this.JiuYeEchart.addJob = res.obj.addJob;
                        this.JiuYeEchart.reJob = res.obj.hardJob;
                        this.JiuYeEchart.hardJob = res.obj.reJob;
                        this.jiuyeshujuEcharts()
                    }
                })
            },
            // 26. 查询首页养老、工伤、失业保险折线图接口
            async getInsuranceChart() {
                // 城镇职工养老
                await getInsuranceChart({type: 1}).then(res => {
                    if (res.code === 1000) {
                        this.YangLaoEchart.shouru = res.obj.shouru
                        this.YangLaoEchart.zhichu = res.obj.zhichu
                        this.YangLaoEchart.jieyu = res.obj.jieyu
                        this.YangLaoEchart.years = res.obj.years
                        this.chengzhenZhigongYanglaoEcharts()
                    }
                })
                // 失业保险
                await getInsuranceChart({type: 5}).then(res => {
                    if (res.code === 1000) {
                        this.ShiYeEchart.shouru = res.obj.shouru
                        this.ShiYeEchart.zhichu = res.obj.zhichu
                        this.ShiYeEchart.jieyu = res.obj.jieyu
                        this.ShiYeEchart.years = res.obj.years
                        this.shiyeBaoxianEcharts()
                    }
                })
                // 工伤保险
                await getInsuranceChart({type: 6}).then(res => {
                    if (res.code === 1000) {
                        this.GongShangEchart.shouru = res.obj.shouru
                        this.GongShangEchart.zhichu = res.obj.zhichu
                        this.GongShangEchart.jieyu = res.obj.jieyu
                        this.GongShangEchart.years = res.obj.years
                        this.gongshangBaoxianEcharts()
                    }
                })
            },
            // 27. 查询首页城镇职工养老表格数据接口
            getTownTable() {
                getTownTable().then(res => {
                    console.log(res);
                    if (res.code === 1000) {
                        this.TownTable = res.list
                    }
                })
            }
        }
    };
</script>
<style lang="scss" scoped>
  @import "../../../assets/css/base";
  .index-wrap{
  @import "../../../assets/css/mixin";

  .index-wrap {
    width: 100%;
    height: 100%;
    padding: 0 2rem  /* 10/10 */;
    padding: 0 0.078125rem /* 20/256 */
  ;
    box-sizing: border-box;
    .index-line-box{

    .index-line-box {
      width: 100%;
      display: flex;
      margin-top: 3.2rem;
      .yanglao-block{
        width: 59rem  /* 590/10 */;
        height: 23rem  /* 230/10 */;
        background:url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
      margin-top: 0.125rem /* 32/256 */
    ;

      .yanglao-block {
        width: 2.3046875rem /* 590/256 */
      ;
        height: 0.8984375rem /* 230/256 */
      ;
        background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 2rem;
        margin: 0 0.078125rem /* 20/256 */
      ;
        position: relative;
        img{
          width: 8rem;
          height: 8rem;

        img {
          width: 0.2890625rem  /* 74/256 */
        ;
          height: 0.2890625rem  /* 74/256 */
        ;
        }
        h1{

        h1 {
          color: #fff;
          text-align: center;
          font-size: $fontSize-24;
          line-height: 1.3;
          font-family: Source Han Sans CN, Source Han Sans CN-Light;
          font-weight: 300;
        }
        h2{

        h2 {
          color: #fff;
          font-size: $fontSize-20;
          line-height: 1.3;
          text-align: center;
          .bigger{

          .bigger {
            font-size: $fontSize-48;
            color: $color-blue;
          }
        }
        .yanglao-block-inside{

        .yanglao-block-inside {
          width: 100%;
          display: flex;
          .inside-left{

          .inside-left {
            display: flex;
            flex: 1;
            justify-content: right;
            margin-left: 0.15625rem /* 40/256 */
          ;
          }
          .inside-right{

          .inside-right {
            display: flex;
            flex-direction: column;
            flex: 1;
          }
          .inside-box-block{

          .inside-box-block {
            display: flex;
            width: 50%;
            justify-content: center;
            width: calc(50% - 30px);
            justify-content: left;
            align-items: center;
            .line-center{
            &:nth-child(1){
              margin-left: 30px;
            }
            &:nth-child(3){
              margin-left: 30px;
            }
            .line-center {
              display: flex;
              flex-direction: column;
              justify-content: center;
              h2{

              h2 {
                line-height: 1.2;
              }
              .small{

              .small {
                font-size: $fontSize-24;
                color: $color-blue;
              }
            }
          }
        }
        .chuangye-box{

        .chuangye-box {
          flex-wrap: wrap;
        }
        .yanglao-block-inside2{

        .yanglao-block-inside2 {
          width: 100%;
          display: flex;
          margin-top: 1rem;
          .inside-left2{
          margin-top: 0.0390625rem /* 10/256 */
        ;

          .inside-left2 {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .danwei-box{

            .danwei-box {
              display: flex;
              justify-content: center;
              .rightMargin{
                margin-right: 1rem;

              .rightMargin {
                margin-right: 0.0390625rem /* 10/256 */
              ;
                color: #fff;
                font-size: $fontSize-20;
                line-height: 1.3;
                text-align: center;
                .bigger{

                .bigger {
                  font-size: $fontSize-32;
                }
              }
@@ -839,122 +1213,172 @@
          }
        }
      }
      .yanglao-block2{
        width: 59rem  /* 590/10 */;
        height: 23rem  /* 230/10 */;
        background:url("../../../assets/images/yanglao-block-bj.png") no-repeat center;

      .yanglao-block2 {
        width: 2.3046875rem /* 590/256 */
      ;
        height: 0.8984375rem /* 230/256 */
      ;
        background: url("../../../assets/images/yanglao-block-bj.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0 2rem;
        .yaolao-box{
        margin: 0 0.078125rem /* 20/256 */
      ;

        .yaolao-box {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          &:first-child{
            margin-left: 2rem;

          &:first-child {
            margin-left: 0.078125rem /* 20/256 */
          ;
          }
        }
        img{
          width: 8rem;
          height: 8rem;

        img {
          width: 0.3125rem /* 80/256 */
        ;
          height: 0.3125rem /* 80/256 */
        ;
        }
        h1{

        h1 {
          color: #fff;
          text-align: center;
          font-size: $fontSize-24;
          line-height: 1.3;
        }
        h2{

        h2 {
          color: #fff;
          font-size: $fontSize-20;
          line-height: 1.3;
          .bigger{

          .bigger {
            font-size: $fontSize-48;
            color: $color-blue;
          }
        }
      }
      .fu-biaoti{

      .fu-biaoti {
        position: absolute;
        left:0.2rem;
        top:3rem;
        background:url("../../../assets/images/fubiaoti-bj.png") no-repeat center;
        left: 0.0078125rem /* 2/256 */
      ;
        top: 0.1171875rem /* 30/256 */
      ;
        background: url("../../../assets/images/fubiaoti-bj.png") no-repeat center;
        background-size: 100% 100%;
        width: 3.2rem  /* 32/10 */;
        height: 16.7rem  /* 167/10 */;
        width: 0.125rem /* 32/256 */
      ;
        height: 0.65234375rem /* 167/256 */
      ;
        display: flex;
        align-items: center;
        justify-content: center;
        h1{

        h1 {
          font-size: $fontSize-20;
          color: $color-dark;
          text-align: center;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
        }
      }
    }
    .index-line-box2{

    .index-line-box2 {
      display: flex;
      margin-top: 3.2rem;
      .shu-ju-box{
        width: 122rem  /* 1220/10 */;
        height: 41rem;
      margin-top: 0.125rem /* 32/256 */
    ;

      .shu-ju-box {
        width: 4.765625rem /* 1220/256 */
      ;
        height: 1.6015625rem /* 410/256 */
      ;
        background: url("../../../assets/images/yanglao-block-big-bj.png") no-repeat center;
        background-size: 100% 100%;
        position: relative;
        margin: 0 2rem;
        margin: 0 0.078125rem /* 20/256 */
      ;
        display: flex;
        .shuju-title-box{

        .shuju-title-box {
          position: absolute;
          left: 10rem;
          left: 0.390625rem /* 100/256 */
        ;
          top: 0;
          h1{

          h1 {
            font-size: $fontSize-32;
            color: $color-blue;
            position: relative;
            &:after{
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;

            &:after {
              content: '';
              background: url("../../../assets/images/zhuangshi.png") no-repeat center;
              background-size: 100% 100%;
              width: 13.5rem;
              height: 1.6rem;
              width: 0.52734375rem /* 135/256 */
            ;
              height: 0.0625rem /* 16/256 */
            ;
              position: absolute;
              left: 20rem;
              top: 1.2rem  /* 12/10 */;
              left: 0.78125rem /* 200/256 */
            ;
              top: 0.046875rem /* 12/256 */
            ;
            }
          }
        }
        .shuju-main-box{

        .shuju-main-box {
          width: 100%;
          padding: 6rem 3rem;
          padding: 0.234375rem /* 60/256 */
          0.1171875rem /* 30/256 */
        ;
          box-sizing: border-box;
          display: flex;
          .shuju-table{
            width: 80.2rem;
            height: 31rem;
          }

        }
        .shuju-table{
          width: 100%;

        .shuju-table {
          width: 3.1328125rem /* 802/256 */
        ;
          height: 1.2109375rem /* 310/256 */
        ;
          display: flex;
          flex-direction: column;
          .shuju-table-line{

          .shuju-table-line {
            width: 100%;
            display: flex;
            .biao-title{
              width: 34rem;

            .biao-title {
              width: 0.859375rem /* 220/256 */
            ;
            }
            .title-flex{
              width: 100%;

            .title-flex {
              width: calc(100% - 0.859375rem);
              display: flex;
            }
            .title{

            .title {
              flex: 1;
              h1{
              display: flex;
              align-items: center;
              justify-content: center;

              h1 {
                font-size: $fontSize-26;
                color: $color-white;
                text-align: center;
@@ -962,53 +1386,104 @@
            }

          }
          .shuju-scroll{
            height: 28rem  /* 280/10 */;
            overflow-y: auto;

          .shuju-scroll {
            max-height: 1.09375rem /* 280/256 */
          ;
            @include overflow-y()
          }
          .shuju-table-line2{

          .shuju-table-line2 {
            width: 100%;
            display: flex;
            padding: 1rem 0;
            padding: 0.0390625rem /* 10/256 */
            0;

            &:nth-child(odd) {
              background: rgba(81,210,255,0.10);
              background: rgba(81, 210, 255, 0.10);
            }
            .title{

            .title {
              flex: 1;
              h1{
              display: flex;
              align-items: center;
              justify-content: center;

              h1 {
                font-size: $fontSize-26;
                color: $color-white;
                text-align: center;
                line-height: 1.5;
              }
              .fontColor{

              .fontColorBlue {
                color: $color-blue;
              }

              .fontColorRed {
                color: #FF3939;
              }
            }
            .title-flex{
              width: 100%;

            .title-flex {
              width: calc(100% - 0.859375rem);
              display: flex;
            }
            .biao-title{
              width: 34rem;
              h1{

            .biao-title {
              width: 0.859375rem /* 220/256 */
            ;

              h1 {
                font-size: $fontSize-26;
                color: $color-white;
                text-align: right;
                line-height: 1.5;
                font-family: Source Han Sans CN, Source Han Sans CN-Light;
                font-weight: 300;
                @include ellipsis()
              }
              .fontColor{

              .fontColor {
                color: $color-blue;
              }
            }
          }
          .shuju-bj-color{
            background: rgba(81,210,255,0.10);

          // 城市职工养老第2，3条数据
          .chengzhen_scroll {
            &:nth-of-type(2) {
              background: rgba(81, 210, 255, 0.10);

              h1 {
                font-size: 24px;
                line-height: 1;
                color: #999999;
              }
            }

            &:nth-of-type(3) {
              background: rgba(81, 210, 255, 0.10);

              h1 {
                font-size: 24px;
                line-height: 1;
                color: #999999;

              }
            }
          }

          .shuju-bj-color {
            background: rgba(81, 210, 255, 0.10);
          }
        }
        .shuju-echarts{
          width: 35rem  /* 168/10 */;
          height: 31rem;

        .shuju-echarts {
          width: 1.3671875rem /* 350/256 */
        ;
          height: 1.2109375rem /* 310/256 */
        ;
        }
      }
    }