deviceManage/ruoyi-ui/src/views/index.vue

<template>
  <div class="app-container home index">
    <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <!-- 数据居 -->
         <el-col :span="12" style="padding-left: 0; border-radius: 10px;" v-if="shoue" v-hasPermi="['manage:index:shuju']">
           <div class="block_4 flex-col">
                     <div class="group_2 flex-row justify-between">
                       <img
                         class="thumbnail_5"
                         referrerpolicy="no-referrer"
                         src="../assets/images/icon_htgl_hp_gjtj.png"
                       />
                       <span class="text_3">告警内容统计</span>
                     </div>
                     <div class="group_3 flex-row">
                       <div class="text-wrapper_1 flex-col justify-between">
                         <span class="text_4">本月告警总数</span>
                         <span class="text_5" @click="gahse('zs')">{{tongjlie.warnMonthAll}}</span>
                         <div style="display: flex; margin-top:20px;">
                           <span class="text_14">较上月</span>
                           <img
                             class="thumbnail_6"
                             referrerpolicy="no-referrer"
                             src="../assets/images/icon_htgl_hp_tjss.png"
                             v-if = "tongjlie.warnMonthPtStatus == 1"
                           />
                           <img
                             class="thumbnail_6"
                             referrerpolicy="no-referrer"
                             src="../assets/images/icon_htgl_sjtj_xj.png"
                             v-if = "tongjlie.warnMonthPtStatus == 2"
                           />
                           <span class="text_15">{{tongjlie.warnMonthPt}}</span>
                         </div>
                       </div>
                      <img
                      class="image_2"
                      referrerpolicy="no-referrer"
                      src="../assets/images/pic_gjpt_hp_sfgx.png"
                      />
                       <div class="text-wrapper_2 flex-col justify-between" style="width: 84px;">
                         <span class="text_6">摸鱼告警</span>
                         <span class="text_7"  @click="gahse(1)">{{tongjlie.warnMonthPlay}}</span>
                         <div style="display: flex; margin-top:20px;">
                                                   <span class="text_14">较上月</span>
                         <img
                           class="thumbnail_6"
                           referrerpolicy="no-referrer"
                           src="../assets/images/icon_htgl_hp_tjss.png"
                           v-if = "tongjlie.warnMonthPlay == 1"
                         />
                         <img
                           class="thumbnail_6"
                           referrerpolicy="no-referrer"
                           src="../assets/images/icon_htgl_sjtj_xj.png"
                           v-if = "tongjlie.warnMonthPlay == 2"
                         />
                                                   <span class="text_15">{{tongjlie.warnMonthPlayPt}}</span>
                                                 </div>

                       </div>
                       <div class="text-wrapper_3 flex-col justify-between" style="width: 84px;">
                         <span class="text_8">离岗告警</span>
                         <span class="text_9" @click="gahse(0)">{{tongjlie.warnMonthLeave}}</span>
                          <div style="display: flex; margin-top:20px;">
                                                    <span class="text_14">较上月</span>
                            <img
                              class="thumbnail_6"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_tjss.png"
                              v-if = "tongjlie.warnMonthLeavePt == 1"
                            />
                            <img
                              class="thumbnail_6"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_sjtj_xj.png"
                              v-if = "tongjlie.warnMonthLeavePt == 2"
                            />
                                                    <span class="text_15">{{tongjlie.warnMonthLeavePt}}</span>
                                                  </div>
                       </div>


                     </div>

                   </div>
         </el-col>
         <el-col :span="12" style="padding-left: 0; padding-right: 0;border-radius: 10px;" v-if="shoue"  v-hasPermi="['manage:index:shuju']">
           <div class="block_4 flex-col " >
                     <div class="group_2 flex-row justify-between">
                       <img
                         class="thumbnail_5"
                         referrerpolicy="no-referrer"
                         src="../assets/images/icon_htgl_hp_bmgj.png"
                       />
                       <span class="text_3">部门告警频次统计</span>
                     </div>
                     <div v-if="shouengs "  :class=" tongjlie.deptNameMapList.length >3 ? 'group_3 flex-row gunshe' : 'group_3 flex-row '" :style="tongjlie.deptNameMapList.length >3 ? ' height: 97px; padding-left: 50px;' : ' height: 97px; padding-left: 15px; justify-content:flex-start'" >
                       <div @click="deckauie(item)" v-if="tongjlie.deptNameMapList.length !=0" class="text-wrapper_1 flex-col justify-between" v-for="(item,index) in tongjlie.deptNameMapList" :key="index" style="width: 33%;">
                         <span class="text_4">{{item.deptName}}</span>
                         <span class="text_5">{{item.warnNum}}</span>
                         <div style="display: flex; margin-top:20px;">
                           <span class="text_14" style="width: 50px;">上月排名</span>

                           <span class="text_15">{{item.warnDeptPt}}</span>
                           <img
                             class="thumbnail_6"
                             referrerpolicy="no-referrer"
                             src="../assets/images/icon_htgl_hp_tjss.png"
                             v-if = "item.warnDeptPtStatus == 1"
                           />
                           <img
                             class="thumbnail_6"
                             referrerpolicy="no-referrer"
                             src="../assets/images/icon_htgl_sjtj_xj.png"
                             v-if = "item.warnDeptPtStatus == 2"
                           />
                         </div>
                       </div>
                       <!-- <img
                         class="image_2"
                         referrerpolicy="no-referrer"
                         src="https://lanhu-oss-2537-2.lanhuapp.com/ps7mxkzc5neit681xsy8xznba7hm35r4ttv08926882-7cd0-4694-a312-ebee13b874e7"
                       /> -->
                       <!-- <div class="text-wrapper_2 flex-col justify-between" style="width: 84px;">
                         <span class="text_6">人事部</span>
                         <span class="text_7">24</span>
                         <div style="display: flex; margin-top:20px;">
                                                   <span class="text_14" style="width: 50px;">上月排名</span>

                                                   <span class="text_15">4</span>
                                                   <img
                                                     class="thumbnail_6"
                                                     referrerpolicy="no-referrer"
                                                     src="../assets/images/icon_htgl_hp_tjss.png"
                                                   />
                                                 </div>

                       </div> -->
                       <!-- <div class="text-wrapper_3 flex-col justify-between" style="width: 84px;">
                         <span class="text_8">档案部</span>
                         <span class="text_9">6</span>
                          <div style="display: flex; margin-top:20px;">
                                                    <span class="text_14" style="width: 50px;">上月排名</span>

                                                    <span class="text_15" style="color: #03BF8A;">1</span>
                                                    <img
                                                      class="thumbnail_6"
                                                      referrerpolicy="no-referrer"
                                                      src="../assets/images/icon_htgl_sjtj_xj.png"
                                                    />
                                                  </div>
                       </div> -->
                      <div v-if="tongjlie.deptNameMapList.length ==0" style="margin-top: -20px; margin-left: 50%;transform: translateX(-50%);">
                        <img
                          style="height: 81px;"
                          referrerpolicy="no-referrer"
                          src="../assets/images/pic_hp_zwsj.png"
                        />
                        <p style="text-align: center; margin-top: 5px; margin: 0; font-weight: 400;font-size: 12px;color: #C4C4C4;">当前暂无数据喔</p>
                      </div>

                     </div>


                   </div>
         </el-col>
                  <!-- 全部 -->
                  <el-col :span="24" style="padding-left: 0;padding-right: 0; border-radius: 10px;" v-if="!shoue" v-hasPermi="['manage:index:gongyong']">
                             <div class="block_4 flex-col">
                                       <div class="group_2 flex-row justify-between">
                                         <img
                                           class="thumbnail_5"
                                           referrerpolicy="no-referrer"
                                           src="../assets/images/icon_htgl_hp_gjtj.png"
                                         />
                                         <span class="text_3">告警内容统计</span>
                                       </div>
                                       <div class="group_3 flex-row">
                                         <div class="text-wrapper_1 flex-col justify-between">
                                           <span class="text_4">本月告警总数</span>
                                           <span class="text_5">17</span>
                                           <div style="display: flex; margin-top:20px;">
                                             <span class="text_14">较上月</span>
                                             <img
                                               class="thumbnail_6"
                                               referrerpolicy="no-referrer"
                                               src="../assets/images/icon_htgl_hp_tjss.png"
                                             />
                                             <span class="text_15">28%</span>
                                           </div>
                                         </div>
                                         <img
                                           class="image_2"
                                           referrerpolicy="no-referrer"
                                           src="../assets/images/pic_gjpt_hp_sfgx.png"
                                         />
                                         <div class="text-wrapper_2 flex-col justify-between">
                                           <span class="text_6">越线告警</span>
                                           <span class="text_7">08</span>
                                           <div style="display: flex; margin-top:20px;">
                                                                     <span class="text_14">较上月</span>
                                                                     <img
                                                                       class="thumbnail_6"
                                                                       referrerpolicy="no-referrer"
                                                                       src="../assets/images/icon_htgl_hp_tjss.png"
                                                                     />
                                                                     <span class="text_15">28%</span>
                                                                   </div>

                                         </div>
                                         <div class="text-wrapper_3 flex-col justify-between">
                                           <span class="text_8">徘徊告警</span>
                                           <span class="text_9">06</span>
                                            <div style="display: flex; margin-top:20px;">
                                                                      <span class="text_14">较上月</span>
                                                                      <img
                                                                        class="thumbnail_6"
                                                                        referrerpolicy="no-referrer"
                                                                        src="../assets/images/icon_htgl_hp_tjss.png"
                                                                      />
                                                                      <span class="text_15">28%</span>
                                                                    </div>
                                         </div>
                                         <div class="text-wrapper_4 flex-col justify-between">
                                           <span class="text_10">陌生人告警</span>
                                           <span class="text_11">02</span>
                                           <div style="display: flex; margin-top:20px;">
                                             <span class="text_14">较上月</span>
                                             <img
                                               class="thumbnail_6"
                                               referrerpolicy="no-referrer"
                                               src="../assets/images/icon_htgl_hp_tjss.png"
                                             />
                                             <span class="text_15">28%</span>
                                           </div>
                                         </div>
                                         <div class="text-wrapper_5 flex-col justify-between">
                                           <span class="text_12">火焰/烟雾告警</span>
                                           <span class="text_13">01</span>
                                           <div style="display: flex; margin-top:20px;">
                                             <span class="text_14">较上月</span>
                                             <img
                                               class="thumbnail_6"
                                               referrerpolicy="no-referrer"
                                               src="../assets/images/icon_htgl_sjtj_xj.png"
                                             />
                                             <span class="text_15">28%</span>
                                           </div>
                                         </div>
                                       </div>

                                     </div>
                           </el-col>
         <el-col :span="24" style="padding-left: 0;padding-right: 0; border-radius: 10px;" >
           <div class="group_5 flex-col">
                       <div class="group_6 flex-row" style="justify-content: space-between;">
                         <div class="flex-row nshhgesindex index">
                           <img
                             class="thumbnail_19"
                             referrerpolicy="no-referrer"
                             src="../assets/images/icon_htgl_hp_ndtj.png"
                           />
                           <span class="text_30">年度告警统计</span>
                           <!-- 全部 -->
                           <!-- <div class="section_1 flex-row">
                             <el-select v-model="value" placeholder="请选择">
                                 <el-option
                                   v-for="item in options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                                 </el-option>
                               </el-select>
                           </div> -->
                           <!-- 数据居 -->
                           <div class="section_1 flex-row">
                              <el-date-picker
                                  v-model="zhess.time"
                                  @change="zheschan"
                                  type="year"
                                  value-format="yyyy"
                                  placeholder="选择年">
                                </el-date-picker>
                           </div>
                         </div>
                         <span class="text_32" @click="naidue">查看更多&nbsp;→</span>
                       </div>
                       <div class="group_7 flex-row" style="justify-content: space-between;">
                         <span class="text_33">{{zhess.time}}年</span>
                         <div class="flex-row">
                           <div class="flex-row">
                             <div class="box_5 flex-col"></div>
                             <span class="text_34">离岗告警</span>
                           </div>
                           <div class="flex-row">
                            <div class="box_6 flex-col"></div>
                            <span class="text_35">玩手机告警</span>
                           </div>
                         </div>
                         <span class="text_36">告警数/件</span>
                       </div>
                       <div class="group_8 flex-row justify-between">
                            <line-chart :chart-data="zheixnhey"  v-if="zheshowe"/>
                       </div>

                     </div>
           </el-col>
           <el-col :span="12" style="padding-left: 0; border-radius: 10px; margin-top: 20px;"  v-if="!shoue" v-hasPermi="['manage:index:gongyong']">
             <div class="box_7 flex-col">
                           <div class="group_10 flex-row justify-between">
                             <div class="image-text_1 flex-row justify-between">
                               <img
                                 class="thumbnail_21"
                                 referrerpolicy="no-referrer"
                                 src="../assets/images/icon_htgl_hp_gjfx.png"
                               />
                               <span class="text-group_1">告警内容分析</span>
                             </div>
                             <div class="group_11 flex-row">
                               <div class="section_1 flex-row">
                                 <el-select v-model="value" placeholder="请选择">
                                     <el-option
                                       v-for="item in options"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                                     </el-option>
                                   </el-select>
                               </div>
                             </div>
                           </div>
                           <raddar-chart />
                         </div>
             </el-col>
             <el-col :span="12" style=" border-radius: 10px; padding-right: 0;margin-top: 20px;" v-if="!shoue" v-hasPermi="['manage:index:gongyong']">
               <div class="box_8 flex-col">
                             <div class="block_7 flex-row justify-between">
                               <div class="image-text_3 flex-row justify-between">
                                 <img
                                   class="thumbnail_23"
                                   referrerpolicy="no-referrer"
                                   src="../assets/images/icon_htgl_hp_yzcd.png"
                                 />
                                 <span class="text-group_3">告警严重程度分析</span>
                               </div>
                               <div class="section_2 flex-row">
                                 <div class="section_1 flex-row">
                                   <el-select v-model="value" placeholder="请选择">
                                       <el-option
                                         v-for="item in options"
                                         :key="item.value"
                                         :label="item.label"
                                         :value="item.value">
                                       </el-option>
                                     </el-select>
                                 </div>
                               </div>
                             </div>

                             <div class="block_8 flex-row" style="padding-right: 10px;">

                               <div style="width: 50%;" >
                                 <pie-chart />
                                <!-- <div style="position: relative;top:-173px;">
                                   <span class="text_56">总告警数</span>
                                   <div class="text-wrapper_9">
                                     <span class="text_57">146</span>
                                     <span class="text_58"></span>
                                     <span class="text_59">/次</span>
                                   </div>
                                 </div> -->
                               </div>
                               <div style="width: 50%;justify-content: flex-end;" class=" flex-row">
                                 <div class="block_10 flex-col">
                                   <div class="section_3 flex-col"></div>
                                   <div class="section_4 flex-col"></div>
                                   <div class="section_5 flex-col"></div>
                                 </div>
                                 <div class="text-wrapper_10 flex-col">
                                   <span class="text_60">徘徊告警</span>
                                   <span class="text_61">陌生人告警</span>
                                   <span class="text_62">越线告警</span>
                                   <span class="text_63">火焰告警</span>
                                   <span class="text_64">烟雾告警</span>
                                 </div>
                                 <div class="text-wrapper_11 flex-col">
                                   <span class="text_65">44</span>
                                   <span class="text_66">42</span>
                                   <span class="text_67">26</span>
                                   <span class="text_68">13</span>
                                   <span class="text_69">21</span>
                                 </div>
                               </div>
                             </div>
                             <div class="block_11 flex-row">
                               <div class="section_6 flex-col"></div>
                               <span class="text_70">低等级</span>
                               <div class="section_7 flex-col"></div>
                               <span class="text_71">中等级</span>
                               <div class="section_8 flex-col"></div>
                               <span class="text_72">高等级</span>
                             </div>
                           </div>
               </el-col>
               <el-col :span="24" v-hasPermi="['manage:index:shuju']" v-if="shoue" style="padding-left: 0;padding-right: 0; margin-top: 20px;">
                   <div style="background: #FFFFFF; border-radius: 10px;padding: 15px 12px;">
                     <div class="image-text_3 flex-row justify-between" style="width: 100%;">
                       <div style="display: flex;align-items: center;">
                         <img
                           class="thumbnail_23"
                           referrerpolicy="no-referrer"
                           src="../assets/images/icon_htgl_hp_yxzt.png"
                         />
                         <span class="text-group_3" style="margin-left: 10px;">设备运行状态</span>
                       </div>
                       <div @click="cnahgshe">
                         查看更多 →
                       </div>
                     </div>
                     <div style="display: flex;justify-content: flex-start;">
                       <div style="border: 1px solid #DADADA;border-radius: 8px; width: 24%;padding: 14px;margin-top: 20px; margin-left: 3px; margin-right: 3px;" v-for="(item,idnex) in equipmentManageList" :key="item" v-if="equipmentManageList.length != 0">
                         <div style="display: flex; justify-content: space-between;align-items: center;">
                           <div style="font-weight: 500;font-size: 16px;color: #333333;">{{item.equipmentName}}</div>
                           <div>
                             <span v-if="item.runState == 0" style="color: #1890ff;">正常</span>
                             <span v-if="item.runState == 1" style="color: #ff6969;">停用</span>
                             <!-- <img referrerpolicy="no-referrer" src="../assets/images/icon_htgl_hp_sbkg_selected.png" v-if="item == 1 || item == 2 "/> -->
                             <!-- <img referrerpolicy="no-referrer" src="../assets/images/icon_htgl_hp_sbkg_normal.png" v-if="item == 3 || item == 4 "/> -->
                             </div>
                         </div>
                         <div style="font-weight: 500;font-size: 16px;color: #AAAAAA; margin-top: 10px;">
                           {{item.equipmentRegion}}
                         </div>
                       </div>
                       <div v-if="equipmentManageList.length ==0" style="margin-top: -20px; margin-left: 50%;transform: translateX(-50%);text-align: center;">
                         <img
                           style="height: 81px;"
                           referrerpolicy="no-referrer"
                           src="../assets/images/pic_hp_zwsj.png"
                         />
                         <p style="text-align: center; margin-top: 5px; margin: 0; font-weight: 400;font-size: 12px;color: #C4C4C4;">当前暂无数据喔，请去设备管理中进行设置</p>
                       </div>
                     </div>
                   </div>
               </el-col>

      </el-col>
      <el-col :span="8">
        <div class="block_5 flex-col" style="background-color: #fff;">
                  <div class="box_3 flex-row justify-between">
                    <img
                      class="thumbnail_11"
                      referrerpolicy="no-referrer"
                      src="../assets/images/icon_htgl_hp_kjgn.png"
                    />
                    <span class="text_24">快捷功能</span>
                  </div>
                  <div class="image-wrapper_1 flex-row justify-between">
                    <!-- <div style="text-align: center;cursor: pointer;" @click="tiahz(0)">
                      <img
                        class="label_2"
                        referrerpolicy="no-referrer"
                        src="../assets/images/icon_hthp_kj_rygl.png"
                      />
                      <div style="margin-top: 10px;">
                         <span class="text_25">人员管理</span>
                      </div>
                    </div> -->
                    <div style="text-align: center;cursor: pointer;" @click="tiahz(0)">
                      <img
                        class="label_2"
                        referrerpolicy="no-referrer"
                        src="../assets/images/icon_hthp_kj_ssjc.png"
                      />
                      <div style="margin-top: 10px;">
                         <span class="text_25">实时检测</span>
                      </div>
                    </div>
                    <div style="text-align: center;cursor: pointer;" @click="tiahz(1)">
                      <img
                        class="label_3"
                        referrerpolicy="no-referrer"
                        src="../assets/images/icon_hthp_kj_sbgl.png"
                      />
                      <div style="margin-top: 10px;">
                         <span class="text_26">设备管理</span>
                      </div>
                    </div>
                    <div style="text-align: center; cursor: pointer;" @click="tiahz(2)">
                      <img
                        class="label_4"
                        referrerpolicy="no-referrer"
                        src="../assets/images/icon_hthp_kj_jkgl.png"
                      />
                      <div style="margin-top: 10px;">
                         <span class="text_27">视频告警</span>
                      </div>
                    </div>
                    <div style="text-align: center; cursor: pointer;" @click="tiahz(3)">
                      <img
                        class="label_5"
                        referrerpolicy="no-referrer"
                        src="../assets/images/icon_hthp_kj_cssz.png"
                      />
                      <div style="margin-top: 10px;">
                          <span class="text_28">参数设置</span>
                      </div>
                    </div>
                    <div style="text-align: center; cursor: pointer;" @click="tiahz(4)">
                      <img
                        class="label_6"
                        referrerpolicy="no-referrer"
                        src="../assets/images/icon_hthp_kj_yjcf.png"
                      />
                      <div style="margin-top: 10px;">
                         <span class="text_29">通道管理</span>
                      </div>
                    </div>
                  </div>
                </div>
        <!-- 日历 -->
          <div style=" background-color: #fff; border-radius: 10px;padding: 20px;margin-top: 20px;" >
            <div class="box_11 flex-row">
                          <div class="box_12 flex-col justify-between">
                            <div class="text-wrapper_12 flex-row justify-between">
                              <span class="text_73">{{getyer}}(年)</span>
                              <span class="text_74">Apr</span>
                            </div>
                            <div class="text-wrapper_13">
                              <!-- <span class="text_75">0</span> -->
                              <span class="text_76">{{getmor}}/</span>
                              <span class="text_77">{{getday}}</span>
                            </div>
                          </div>
                          <div class="flex-row">
                            <div class="text-wrapper_14 flex-col justify-between">
                              <span class="text_78">潜山</span>
                              <span class="text_79">27℃</span>
                            </div>
                            <img
                              class="label_7"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htrl_tq_xy.png"
                            />
                          </div>
                        </div>
            <!-- 日历-->
            <div class="timeall">
                    <i style="cursor: pointer;" class="el-icon-arrow-left lastbt" @click="lastclick"></i>
                    <div class="table_header">
                        <div class="weekday" v-for="(item,index) in weekAll" :key="index">
                             <span>{{item}}</span>
                        </div>
                    </div>
                    <div class="table_header">
                        <div class="weekday test"   v-for="(item,index) in weekDayArr" :key="index">
                             <span style="cursor: pointer;" :class="item.adate==todayDate?'finish':''"   @click="getAdate(item)">{{item.adate.slice(8,10)}}</span>
                        </div>
                    </div>

                    <i style="cursor: pointer;" class="el-icon-arrow-right nextbt" @click="nextclick"></i>
                  </div>
            <!-- 内容 -->
                <div>
                  <div v-for="(item,index) in 2" :key="index" class="box_14 flex-row" style="justify-content: space-between;padding: 0 20px;" v-if="shoue == false">
                                <div class="text-wrapper_17 flex-col justify-between">
                                  <span class="text_94">25/04/23&nbsp;&nbsp;10:31:46</span>
                                  <span class="text_95">通道001</span>
                                </div>
                                <div class="text-wrapper_18 ">
                                  <div class="text_96">越线告警</div>
                                  <div><img
                                  class="thumbnail_27"
                                  referrerpolicy="no-referrer"
                                  src="../assets/images/icon_hthp_rl_enter.png"
                                />
                              </div></div>
                                </div>
                    <div v-for="(item,index) in warnManageList" :key="index" class="box_14 flex-row" style="justify-content: space-between;padding: 0 20px;" v-if="shoue == true && warnManageList.length !=0">
                                  <div class="text-wrapper_17 flex-col justify-between">
                                    <span class="text_94">{{item.createTime}}</span>
                                    <span class="text_95" style="color: #666666;font-weight: 400<strong></strong>;"> <span style="font-weight: 800;font-size: 15px;color: #333333;">{{item.rangName}}</span>
                                     <span style="font-weight: 800;font-size: 15px;color: #03BF8A; margin-left: 5px;">{{ (item.algorithmType == 0 ? '离岗' : '玩手机')  }}</span> 告警</span>
                                    <!-- <span class="text_95">
                                      <span style="color: #333333; font-weight: 700;">{{item.deptName}} </span>
                                       <span style="color: #03BF8A; font-weight: 700;">{{item.equipmentName}} </span> 通道001</span> -->

                                  </div>
                                  <div class="text-wrapper_18 " @click="thse(item)">
                                    <div class="text_96" v-if="item.algorithmType == 1">玩手机</div>
                                     <div class="text_96s" v-if="item.algorithmType == 0">离岗</div>
                                    <div><img
                                    class="thumbnail_27"
                                    referrerpolicy="no-referrer"
                                    src="../assets/images/icon_hthp_rl_enter.png"

                                  />
                                </div></div>
                                  </div>
                    <div v-if="warnManageList.length ==0" style="height: 340px; display: flex;align-items: center;">
                        <div style="flex: 1; display: flex;flex-direction: column;justify-content: center;align-items: center;">
                          <img src="../assets/images/pic_htgl_zwxx.png" alt="">
                          <span style="margin-top: 10px;">今日暂无告警信息喔</span>
                        </div>
                        <div @click="tiahou" style="cursor: pointer; position: relative; width: 20px;color: #03BF8A; font-weight: 500;font-size: 13px;">
                          查看历史告警
                          <img
                            class="thumbnail_27"
                            referrerpolicy="no-referrer"
                            src="../assets/images/icon_htgl_rljr.png"
                            style="position: absolute; top: 50%;transform: translateY(-50%); right: -10px;"
                          />
                        </div>
                    </div>

                </div>
          </div>
          <!-- 开关 -->
          <div v-if="!shoue" v-hasPermi="['manage:index:gongyong']">
            <div class="box_16 flex-col">
                        <div class="section_9 flex-row justify-between">
                          <div class="image-text_5 flex-row justify-between">
                            <img
                              class="thumbnail_29"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_yxzt.png"
                            />
                            <span class="text-group_5">设备运行状态</span>
                          </div>
                          <span class="text_100">查看更多&nbsp;→</span>
                        </div>
                        <div class="section_10 flex-row" style="flex-wrap: wrap;">
                          <div class="image-text_6 flex-col justify-between" v-for="(item,index) in  14">
                            <img
                            v-if="index == 1 || index == 9"
                              class="image_6"
                              referrerpolicy="no-referrer"
                              src="../assets/images/pic_htgl_sbyx_dks.png"
                            />
                            <img
                             v-else
                              class="image_6"
                              referrerpolicy="no-referrer"
                              src="../assets/images/pic_htgl_sbyx_gbs.png"
                            />
                            <span class="text-group_6">设备{{ index >8 ? index + 1 : '0'  + (index + 1)}}</span>
                          </div>
                        </div>
                      </div>
          </div>
      </el-col>

    </el-row>
    </div>

  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import LineChart from './dashboard/LineChart'
  import RaddarChart from './dashboard/RaddarChart'
  import PieChart from './dashboard/PieChart'
  import BarChart from './dashboard/BarChart'
  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }
  // import { getTenantList} from "@/api/login";
  import {listNoPage} from "@/api/system/role";
  import {warnManageIndex,warnManageIndexYear} from "@/api/index";
  import { listWarnManage } from "@/api/manage/warnManage"
  import { listEquipmentManage, getEquipmentManage, delEquipmentManage, addEquipmentManage, updateEquipmentManage } from "@/api/manage/equipmentManage"
  export default {
    name: "Index",
    dicts: ['baoxiutype', 'repair_status', 'patrol_type','yaungong', 'gender', 'weixiutype'],
    components: {
      PanelGroup,
      LineChart,
      RaddarChart,
      PieChart,
      BarChart,
    },
    data() {
      return {
        // 版本号
        version: "3.8.9",
        customColor: '#FFCB62',
        lineChartData: lineChartData.newVisitis,
        getyer: '',
        getmor: '',
        getday: '',
        getshifL: '',
        getweek: '',
        open: false,
        openz: false,
        openg:false,
        shouzu:false,
        // 投诉建议表格数据
        suggestionList: [],
        repairList: [],
        // 巡检点记录表格数据
        checkPointRecordList: [],
        // 表单参数
        form: {},
        formz: {},
        formg: {
          name:null,
          card:null,
          phonenumber:null,
          boundary:null,
          unit:null,
          partyAffiliation:null,
        },
        // 表单校验
        rules: {
          replyContent: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
        },
        value:'',
        options:[{label:'测试',value:1},{label:'测试1',value:2}],
        staffManageList: [],
        xunjiantj: {},
        tatse: 0,
        yifhufe: 0,
        isxug: false,
        bafe: 0,
        timer: null,
        zhexian: {},
        userid: 0,
        chelisngguan: {},
        isacr: 0,
        carNume:{},
        tenantList:[],
        ishsoe:false,
        forewg:{},
        tesrtw:'',
        // 角色表格数据
        roleList: [],
        // 日历
        currentFirstDate:"",
                    clen:7,
                    todayDate:"",
                    weekDayArr:[],
                    weekAll: [
                      '星期一','星期二','星期三','星期四','星期五','星期六','星期日',
                    ],
        shoue:true,
        tongjlie:{},
        shouengs:false,
        zhess:{
          time:'2025'
        },
        // 告警管理表格数据
        warnManageList: [],
        // 折线图数据
        zheixnhey:{},
        zheshowe:false,
        // 设备管理表格数据
        equipmentManageList: [],
      };
    },
    created() {
      // 移交 日历
      this.todayDate=this.formatDate(new Date())
      this.setDate(new Date())
      // 旧的
      this.userid = this.$store.getters.userId
        this.shouzu = true
        this.getxinaqren()

        // this.setTimer()
        this.gettime()
        this.getrou()
        this.getcharnae(this.getyer)
        this.getListshe()

      clearInterval(this.timer)
      this.timer = null
      console.log(this.shouzu)
    },
    methods: {
      // 日历
       // 日期格式处理
              formatDate(date){

                var year = date.getFullYear() + '-'
                var month = (date.getMonth()+1) ;
                if(month<10){
                  month = '0' + month
                }
                month = month + '-'
                var day = date.getDate();
                if(day<10){
                  day = '0' + day
                }
                console.log(year+month+day)
                return year+month+day;
              },
              //
              addDate(date,n){
                date.setDate(date.getDate()+n);
                console.log(date,5)
                return date;
              },
              //
              setDate(date){
                  var week = date.getDay()-1;
                  date = this.addDate(date,week*-1);
                  this.currentFirstDate = new Date(date);
                  for(var i = 0;i<this.clen; i++){
                      this.weekDayArr.push({"adate":this.formatDate(i==0 ? date : this.addDate(date,1))})
                  }
                  console.log(this.weekDayArr)
              },
              //上一周
              lastclick(){
                  this.weekDayArr=[]
                  this.setDate(this.addDate(this.currentFirstDate,-7));
              },
              //下一周
              nextclick(){
                  this.weekDayArr=[]
                  this.setDate(this.addDate(this.currentFirstDate,7));
              },
              getAdate (item) {
                 this.todayDate = item.adate
                 this.getrou(item.adate)
                console.log(item)
              },
      // 日历结束
         // 查询视频告警
         getrou(row){
            let sngse={'pageNum':1,'pageSize':3,'warnTime': null}
           if(row != undefined){
            sngse.warnTime =  row
           }else{
             sngse.warnTime = this.getyer + '-' + this.getmor+'-' +this.getday
           }
           listWarnManage(sngse).then(response => {
               this.warnManageList = response.rows
               console.log(this.warnManageList,91234)
             }
           );
         },
         // 告警内容+部门统计
      getxinaqren(){
        this.shouengs = false
        warnManageIndex().then(response => {
         this.tongjlie = response.data
         this.shouengs = true
        });

      },
      // 折线时间切换
      zheschan(){
        console.log(this.zhess)
        this.getcharnae(this.zhess.time)
      },
      zhuhuet(){
          this.reset()
          this.formg.phoneNumber =  this.$store.getters.phonenumber
          this.formg.userId = this.userid
          if(this.tenantList.length !=0){
             this.formg.tenantId = this.tenantList[0].tenantId
             // this.getrou(this.$store.getters.tenantId)
                 this.openg = true
          }else{
            this.openg = true
          }

        console.log(this.formg)
        // console.log(this.formg.userId)
        // console.log(this.formg.phoneNumber,this.$store.getters.user.phonenumber)

      },
      // 折线图
      getcharnae(row){
        this.zheshowe = false
        warnManageIndexYear(row).then(response => {
          this.zheixnhey = response.data;
           this.zheshowe = true
          console.log(this.zheixnhey)
        });
      },
 /** 查询设备管理列表 */
        getListshe() {
          let queryParams={ pageNum: 1,
              pageSize: 4,}
          listEquipmentManage(queryParams).then(response => {
            this.equipmentManageList = response.rows
            this.total = response.total
          })
        },
      getListRecordcun() {
        count().then(response => {
          this.xunjiantj = response.data
        });
      },
      // 报修列表
      getListpair() {
        let sgmse = {
          'pageNum': 1,
          'pageSize': 2,
          'userId': this.userid
        }
        listRepair(sgmse).then(response => {
          this.repairList = response.rows;
          if (this.repairList.length == 0) {
            let gnsh = {
              'repairTitle': '暂无数据',
              'phoneNumber': '暂无数据',
              'houseAddress': '暂无数据',
              'repairTime': '暂无数据',
              'repairStatus': null
            }
            this.repairList.push(gnsh)
            this.repairList.push(gnsh)
          }
          if (this.repairList.length == 1) {
            let gnsh = {
              'repairTitle': '暂无数据',
              'phoneNumber': '暂无数据',
              'houseAddress': '暂无数据',
              'repairTime': '暂无数据',
              'repairStatus': null
            }
            this.repairList.push(gnsh)

          }

        });
      },
      // 待分配
      daifeng(row) {
        if (row.repairStatus == 1) {
          // 待分配
          // this.formz.maintenanceCategory = row.maintenanceCategory
          this.openz = true
          this.formz.repairId = row.repairId
        }
      },
      // 待分配提交
      submitFormz() {
        this.$refs["formz"].validate(valid => {
          if (valid) {
            assign(this.formz).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.openz = false;
              this.getList();
            });
          }
        })
      },
      xuanse(val) {
        console.log(val)
        this.formz.staffName = val.staffName
        this.formz.staffId = val.staffId
        this.formz.staffPhone = val.phoneNumber
      },
      getstaffManageList(row) {
        let bsdf = {
          'staffCategory': 2
        }
        listStaffManageNoPage(bsdf).then(response => {
          this.staffManageList = response.rows;
          // this.staffManageList.filrter(rout=>{
          //   rout.lable = rout.staffName + '<p>'
          // })
        });
      },
      /** 查询投诉建议列表 */
      getListtion() {
        let sgmse = {
          'pageNum': 1,
          'pageSize': 10,
          'isPublic':'Y',
          'userId': this.userid
        }
        listSuggestion(sgmse).then(response => {
        if(response.rows.length !=0){
           if(response.rows.length > 2){
              this.suggestionList = response.rows.slice(0, 2);
           }else{
              this.suggestionList = response.rows;
           }
        }else{
          this.suggestionList = response.rows;
        }
          if (this.suggestionList.length == 0) {
            let gnsh = {
              'title': '暂无数据',
              'content': '暂无数据',
              'createTime': '暂无数据',
            }
            this.suggestionList.push(gnsh)
            this.suggestionList.push(gnsh)
          }
          if (this.suggestionList.length == 1) {
            let gnsh = {
              'title': '暂无数据',
              'content': '暂无数据',
              'createTime': '暂无数据',
            }
            this.suggestionList.push(gnsh)
          }


          this.getListtionesTOTL()
        });
      },
      getListtiones() {
        let sgmse = {
          'pageNum': 1,
          'pageSize': 2,
          'status': 2,
        }
        listSuggestion(sgmse).then(response => {
          this.yifhufe = response.total
          this.bafe = this.percentage() - 0
        });
      },
      getListtionesTOTL() {
        let sgmse = {
          'pageNum': 1,
           'pageSize': 10,
        }
        listSuggestion(sgmse).then(response => {
          this.tatse = response.total
          this.getListtiones()
        });
      },

      // 投诉隐藏
      yinange(row,index){
        row.isPublic = 'N'
        updateSuggestion(row).then(response => {
          this.$modal.msgSuccess("操作成功");
          // this.open = false;
          // this.getList();
        });
      },
      percentage() {
        return (this.yifhufe / this.tatse * 100).toFixed(0);
      },

      tousuhuif(row) {
        // this.form.suggestionId  =  row.suggestionId
        this.form = {
          'replyContent': null,
          'suggestionFjList': null,
          'suggestionId': row.suggestionId,
          'status': 2
        }
        // this.$set('replyContent',this.form,null)
        // this.form.replyContent = null
        // this.form.suggestionFjList = null
        this.open = true
      },
      cancel() {
        this.open = false
        this.openz = false
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // console.log(this.form)
            if (this.form.suggestionFjList != null) {
              this.form.suggestionFjList.filter(rou => {
                rou.suggestionId = this.form.suggestionId
              })
            }
            updateSuggestion(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getListtion();
            });

          }
        });
      },

      /** 注册认证提交按钮 */
      submitFormg: function() {
        this.$refs["formg"].validate(valid => {
         if (valid) {
           if(this.ishsoe == false){
             if(this.tesrtw == this.formg.tenantId){
               updateStaffManage(this.formg).then(response => {
                 this.$modal.msgSuccess("修改成功,等待管理员审核");
                 this.openg = false;
               });
             }else{
               addStaffManage(this.formg).then(response => {
                 this.$modal.msgSuccess("操作成功,等待管理员审核");
                 this.openg = false;
                 // this.getList();
               });
             }
           }else{
              addStaffManage(this.formg).then(response => {
                this.$modal.msgSuccess("操作成功,等待管理员审核");
                this.openg = false;
                // this.getList();
              });
           }


          }
        });
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      goTarget(href) {
        window.open(href, "_blank");
      },
      format(percentage) {
        return percentage === 100 ? '${percentage}' : `${percentage}`;
      },
      gettime() {
        var _this = this;
        let wk = new Date().getDay()
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        if(mm < 10){
          mm = '0'+mm
        }
        let dd = new Date().getDate();
        if(dd < 10){
          dd = '0'+dd
        }
        let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
        let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let week = weeks[wk]
        _this.getyer = yy;
        _this.getmor = mm;
        _this.getday = dd;
        _this.getshifL = hh + ':' + mf;
        _this.getweek = week;
        // console.log(this.gettime)
      },
      setTimer() {
        if (this.timer == null) {
          this.timer = setInterval(() => {
            this.gettime()
          }, 30000)
        }
      },
      tiahe(row) {
        if (row == 1) {
          // 房屋管理
          this.$router.push({
            path: '/housesassets/fagnwuguanli',
          })
        } else if (row == 2) {
          // 居住人员管理
          this.$router.push({
            path: '/renyuanxiangguan/renyuan',
          })
        } else if (row == 3) {
          // 车辆管控
          this.$router.push({
            path: '/communityservicesfacilities/cheliangguank',
          })
        } else if (row == 4) {
          // 违停管理
          this.$router.push({
            path: '/communitysecurityorder/weitingchel',
          })
        } else if (row == 5) {
          // 来访管理
          this.$router.push({
            path: '/communicationmanagement/visitorManage',
          })
        } else if (row == 6) {
          // 物业报修
          this.$router.push({
            path: '/communityservicesfacilities/baoxiuguanli/index',
          })
        } else if (row == 7) {
          // 投诉建议
          this.$router.push({
            path: '/communityservicesfacilities/suggestion',
          })
        } else if (row == 8) {
          // 今日巡更
          this.$router.push({
            path: '/communitysecurityorder/xungengxinx',
          })
        }

      },
      uploadedSuccessfully(row){
        // console.log('上传重构员工',row)
        if(row.length !=0){
          row.filter(ru=>{
            this.formg.staffName = ru.realName
            this.formg.idCard = ru.idCard
            let sge = this.getInfo( this.formg.idCard)
            // this.form.yearsOld = sge.age
            this.formg.gender = sge.sex + ''
            // this.form.residentBirthday = sge.birth
          })

        }
      },
      getInfo(idCard) {
              let sex = null;
              let birth = null;
              let myDate = new Date();
              let month = myDate.getMonth() + 1;
              let day = myDate.getDate();
              let age = 0;

              if (idCard.length === 18) {
                age = myDate.getFullYear() - idCard.substring(6, 10) - 1;
                sex = idCard.substring(16, 17);
                birth = idCard.substring(6, 10) + "-" + idCard.substring(10, 12) + "-" + idCard.substring(12, 14);
                if (idCard.substring(10, 12) < month || idCard.substring(10, 12) === month && idCard.substring(12, 14) <= day)
                  age++;

              }
              if (idCard.length === 15) {
                age = myDate.getFullYear() - idCard.substring(6, 8) - 1901;
                sex = idCard.substring(13, 14);
                birth = "19" + idCard.substring(6, 8) + "-" + idCard.substring(8, 10) + "-" + idCard.substring(10, 12);
                if (idCard.substring(8, 10) < month || idCard.substring(8, 10) === month && idCard.substring(10, 12) <= day)
                  age++;
              }

              if (sex % 2 === 0)
                sex = 2; // 性别代码 1代表男，0代表女，暂时不涉及其他类型性别
              else
                sex = 1;
              return {
                age,
                sex,
                birth
              }
            },
            // 表单重置
            reset() {
              this.formg = {
                      staffId: null,
                      staffName: null,
                      gender: null,
                      staffCategory: null,
                      maintenanceCategory: null,
                      phoneNumber: null,
                      avatarPhoto: null,
                      idCard: null,
                      idCardFront: null,
                      idCardBack: null,
                      certificate: null,
                      status: null,
                      createBy: null,
                      createTime: null,
                      updateBy: null,
                      updateTime: null,
                      remark: null,
                      tenantId:null,
                      userId:this.userid,
                      userType:'pc_user'
                    };
              this.resetForm("formg");
            },
      tiahou(){
        // 视频告警
        this.$router.push({
          path: '/gaojingguanli',
        })
      },
      thse(item){
        this.$router.push({
          path: '/gaojingguanli',
          query: {
          	'rangName':item.rangName,
            'type':item.algorithmType
          }
        })
      },
      tiahz(item){
        if(item == 0){
          // 实时检测
          this.$router.push({
            path: '/shishi',
          })
        }else if(item == 1){
          // 设备管理
          this.$router.push({
            path: '/shebei',
          })
        }else if(item == 2){
          // 视频告警
          this.$router.push({
            path: '/gaojingguanli',
          })
        }else if(item == 3){
          // 参数设置
          this.$router.push({
            path: '/huabuhaik',
          })
        }else if(item == 4){
          // 通道管理
          this.$router.push({
            path: '/channelNumber',
          })
        }

      },
      cnahgshe(){
        this.$router.push({
          path: '/shebei',
        })
      },
      gahse(row){
        this.$router.push({
          path: '/gaojingguanli',
          query: {
          	'type':row,
          }
        })
      },
      deckauie(row){
        this.$router.push({
          path: '/gaojingguanli',
          query: {
          	'deptId':row.deptId,
          }
        })
      },
      naidue(){
        this.$router.push({
          path: '/gaojingguanli',
          query: {
          	'year':this.zhess.time,
          }
        })
      }

    }
  };
</script>

<style  lang="scss">
  .quce{
    .el-form-item__content{
      margin-left: 0 !important;
    }
    .el-upload--picture-card{
      margin-left:50%;
      transform:translateX(-50%);
    }
  }
  .shefnze{
    .el-upload--picture-card{
      width: 80px;
      height: 80px;
      line-height: 80px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width: 80px;
      height: 80px;
    }
    .el-upload__tip{
      overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
  }
  .ngeshimg{
    .el-upload--picture-card{
      width: 36px;
      height: 36px;
      line-height: 36px;
      position: absolute;
      top:0;
      right: 0;
    }
    .component-upload-image{
      position: absolute;
      top:0;
      right: 0;
    }
    .el-upload--picture-card i{
      font-size: 20px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width: 58px;
      height: 36px;
      position: absolute;
      top:0;
      right: -10px;
    }
  }
  .unimg{
    .el-upload--picture-card{
      width:102px;
      height: 102px;
      line-height: 102px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width:102px;
      height: 102px;
      line-height: 102px;
    }
  }

  .index{
    .el-select-dropdown__item .selected{
      color: #03BF8A;
    }
  }
  .nshhgesindex{
    .el-input--medium .el-input__inner{
      border: none;
      width: 98px;
      height: 23px;
      background-color: #EEF8F5;
    }
    .el-input--medium .el-input__icon{
      line-height: 26px;
    }
  }


  </style>

<style scoped lang="scss">
  .index {
    // padding-right: 10px !important;
  }

  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }

</style>
<style scoped lang="scss">
// 蓝湖样式粘贴
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}
input {
  background-color: transparent;
  border: 0;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}
.van-nav-bar__left:active,
.van-nav-bar__right:active {
  opacity: 1;
}
[class*='van-']::after {
  border-bottom: 0;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}

.page {
  position: relative;
  width: 1440px;
  height: 934px;
  overflow: hidden;
}

.box_1 {
  height: 934px;
  background: url(https://lanhu-oss-2537-2.lanhuapp.com/psupnp53zjsb6uumou8biiluuj3eul374afd762c56-ebbd-4c13-a938-1c346119c9ed)
    100% no-repeat;
  background-size: 100% 100%;
  width: 1440px;
  position: relative;
}

.block_1 {
  width: 1400px;
  height: 30px;
  margin: 25px 0 0 20px;
}

.image_1 {
  width: 231px;
  height: 30px;
}

.label_1 {
  width: 26px;
  height: 26px;
  margin: 2px 0 0 1003px;
}

.text_1 {
  width: 46px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(75, 90, 109, 1);
  font-size: 16px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 8px 0 0 7px;
}

.thumbnail_1 {
  width: 8px;
  height: 4px;
  margin: 13px 0 0 11px;
}

.thumbnail_2 {
  width: 1px;
  height: 16px;
  margin: 7px 0 0 18px;
}

.text_2 {
  width: 31px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(75, 90, 109, 1);
  font-size: 16px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 6px 0 0 18px;
}

.block_2 {
  width: 1399px;
  height: 167px;
  margin: 24px 0 0 20px;
}

.block_3 {
  width: 180px;
  height: 145px;
  margin-top: 22px;
}

.group_1 {
  background-color: rgba(221, 235, 231, 1);
  border-radius: 4px;
  height: 36px;
  width: 180px;
}

.box_2 {
  width: 14px;
  height: 16px;
  background: url(https://lanhu-oss-2537-2.lanhuapp.com/pssr9va0oenskc5702erondk4k6soy2sg3fcb86e5-1f9d-40ef-9503-d5785a4bf2be)
    100% no-repeat;
  background-size: 100% 100%;
  margin: 10px 0 0 22px;
}

.thumbnail_3 {
  width: 16px;
  height: 15px;
  margin: 35px 0 0 20px;
}

.thumbnail_4 {
  width: 16px;
  height: 16px;
  margin: 43px 0 0 21px;
}

.block_4 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  height: 158px;
  width: 100%;
  // margin: 1px 0 0 19px;
}

.group_2 {
  width: 118px;
  height: 18px;
  margin: 17px 0 0 13px;
}

.thumbnail_5 {
  width: 16px;
  height: 18px;
}

.text_3 {
  width: 95px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin-top: 1px;
}

.group_3 {
  width: 100%;
  height: 59px;
  margin: 26px 0 0 0;
  justify-content: space-around;
}

.gunshe{
  width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}
.text-wrapper_1 {
  width: 84px;
  height: 44px;
}

.text_4 {
  width: 84px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}

.text_5 {
  width: 23px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 22px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 14px;
}

.image_2 {
  width: 1px;
  height: 46px;
  margin: 13px 0 0 0;
}

.text-wrapper_2 {
  width: 56px;
  height: 45px;
  // margin-left: 42px;
}

.text_6 {
  width: 55px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 1px;
}

.text_7 {
  width: 25px;
  height: 17px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 22px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 14px;
}

.text-wrapper_3 {
  width: 56px;
  height: 45px;
  // margin-left: 73px;
}

.text_8 {
  width: 55px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 1px;
}

.text_9 {
  width: 25px;
  height: 17px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 22px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 14px;
}

.text-wrapper_4 {
  width: 70px;
  height: 45px;
  // margin-left: 80px;
}

.text_10 {
  width: 68px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 2px;
}

.text_11 {
  width: 24px;
  height: 17px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 22px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 14px;
}

.text-wrapper_5 {
  width: 91px;
  height: 45px;
  // margin-left: 56px;
}

.text_12 {
  width: 90px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 1px;
}

.text_13 {
  width: 22px;
  height: 17px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 22px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 14px;
}

.group_4 {
  width: 100%;
  height: 12px;
  margin: 1px 0 25px 0;
}

.text_14 {
  width: 34px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
}

.thumbnail_6 {
  width: 14px;
  height: 10px;
  margin: 1px 0 0 4px;
}

.text_15 {
  width: 26px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(254, 167, 27, 1);
  font-size: 12px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
  margin: 1px 0 0 5px;
}

.text_16 {
  width: 34px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 87px;
}

.thumbnail_7 {
  width: 14px;
  height: 10px;
  margin: 1px 0 0 4px;
}

.text_17 {
  width: 29px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(254, 167, 27, 1);
  font-size: 12px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 1px 0 0 5px;
}

.text_18 {
  width: 34px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 43px;
}

.thumbnail_8 {
  width: 14px;
  height: 10px;
  margin: 1px 0 0 5px;
}

.text_19 {
  width: 36px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(3, 191, 138, 1);
  font-size: 12px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 1px 0 0 4px;
}

.text_20 {
  width: 34px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 43px;
}

.thumbnail_9 {
  width: 14px;
  height: 10px;
  margin: 1px 0 0 5px;
}

.text_21 {
  width: 26px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(3, 191, 138, 1);
  font-size: 12px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 1px 0 0 4px;
}

.text_22 {
  width: 34px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-left: 43px;
}

.thumbnail_10 {
  width: 14px;
  height: 10px;
  margin: 1px 0 0 4px;
}

.text_23 {
  width: 32px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(254, 167, 27, 1);
  font-size: 12px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 1px 0 0 6px;
}

.block_5 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  height: 159px;
  // margin-left: 12px;
  width: 100%;
}

.box_3 {
  width: 86px;
  height: 16px;
  margin: 18px 0 0 13px;
}

.thumbnail_11 {
  width: 18px;
  height: 16px;
}

.text_24 {
  width: 64px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin-left: 10px;
}

.image-wrapper_1 {
  width: 100%;
  // height: 48px;
  margin: 21px 0 0 0;
  justify-content: space-around;
}

.label_2 {
  width: 48px;
  height: 48px;
}

.label_3 {
  width: 48px;
  height: 48px;
  // margin-left: 34px;
}

.label_4 {
  width: 48px;
  height: 48px;
  // margin-left: 34px;
}

.label_5 {
  width: 48px;
  height: 48px;
  // margin-left: 35px;
}

.label_6 {
  width: 48px;
  height: 48px;
  // margin-left: 34px;
}

.text-wrapper_6 {
  width: 392px;
  height: 16px;
  margin: 20px 0 20px 31px;
}

.text_25 {
  width: 63px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 30px;
}

.text_26 {
  width: 63px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 30px;
  // margin-left: 19px;
}

.text_27 {
  width: 64px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 30px;
  // margin-left: 19px;
}

.text_28 {
  width: 63px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 30px;
  // margin-left: 19px;
}

.text_29 {
  width: 63px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 30px;
  // margin-left: 19px;
}

.block_6 {
  width: 1380px;
  height: 668px;
  margin: 4px 0 16px 39px;
}

.image-wrapper_2 {
  width: 18px;
  height: 376px;
  margin-top: 41px;
}

.thumbnail_12 {
  width: 16px;
  height: 15px;
  margin-left: 1px;
}

.thumbnail_13 {
  width: 16px;
  height: 14px;
  margin: 44px 0 0 1px;
}

.thumbnail_14 {
  width: 16px;
  height: 16px;
  margin: 45px 0 0 1px;
}

.thumbnail_15 {
  width: 15px;
  height: 16px;
  margin: 44px 0 0 2px;
}

.thumbnail_16 {
  width: 18px;
  height: 16px;
  margin-top: 45px;
}

.thumbnail_17 {
  width: 16px;
  height: 16px;
  margin: 44px 0 0 1px;
}

.thumbnail_18 {
  width: 15px;
  height: 15px;
  margin: 46px 0 0 2px;
}

.box_4 {
  width: 734px;
  height: 668px;
  margin-left: 162px;
}

.group_5 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  position: relative;
  width: 100%;
  height: 372px;
  margin-top: 20px;
}

.group_6 {
  width: 100%;
  height: 24px;
  padding: 14px 12px 0 12px;

}

.thumbnail_19 {
  width: 17px;
  height: 15px;
  margin-top: 4px;
}

.text_30 {
  width: 95px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin: 3px 0 0 6px;
}

.section_1 {
  // background-color: rgba(238, 248, 245, 1);
  // border-radius: 11px;
  // width: 102px;
  // height: 24px;
  margin-left: 12px;
  .el-input--medium .el-input__inner{
    background-color: rgba(238, 248, 245, 1);

    border-radius: 11px;
    border-color: rgba(238, 248, 245, 1);
    width: 102px;
    border: none;
    color: #333;
    // height: 24px;
  }

  .el-input--medium .el-input__inner{
    height: 24px;
    line-height: 24px;
  }
  .el-input--medium .el-input__icon{
    line-height: 24px;
  }
  .el-select .el-input.is-focus .el-input__inner{
    border-color: #03BF8A;
  }

}
.el-select-dropdown__item .selected{
    color: #03BF8A !important;
  }

.text_31 {
  width: 55px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin: 5px 0 0 13px;
}

.thumbnail_20 {
  width: 9px;
  height: 6px;
  margin: 9px 14px 0 11px;
}

.text_32 {
  width: 75px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  // margin: 3px 0 0 402px;
}

.group_7 {
  width: 100%;
  // height: 13px;
  padding: 23px 12px 0 12px;
}

.text_33 {
  width: 40px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
}

.box_5 {
  background-color: rgba(255, 171, 43, 1);
  width: 10px;
  height: 10px;
  margin: 2px 0 0 0;
}

.text_34 {
  width: 47px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
  margin: 1px 0 0 10px;
}

.box_6 {
  background-color: rgba(3, 191, 138, 1);
  width: 10px;
  height: 10px;
  margin: 2px 0 0 21px;
}

.text_35 {
  width: 47px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
  margin: 1px 0 0 10px;
}

.text_36 {
  width: 54px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 0;
}

.group_8 {
  width: 100%;
  height: 234px;
  padding: 23px 12px 0 19px;
}

.paragraph_1 {
  width: 14px;
  height: 234px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: right;
  line-height: 45px;
}

.image_3 {
  width: 671px;
  height: 210px;
  margin-top: 17px;
}

.text-wrapper_7 {
  width: 655px;
  height: 10px;
  margin: 10px 0 21px 50px;
}

.text_37 {
  width: 24px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
}

.text_38 {
  width: 17px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 26px;
}

.text_39 {
  width: 16px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 27px;
}

.text_40 {
  width: 24px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 27px;
}

.text_41 {
  width: 24px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 26px;
}

.text_42 {
  width: 21px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 27px;
}

.text_43 {
  width: 24px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 27px;
}

.text_44 {
  width: 17px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 25px;
}

.text_45 {
  width: 25px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 26px;
}

.text_46 {
  width: 25px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 26px;
}

.text_47 {
  width: 25px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 26px;
}

.text_48 {
  width: 22px;
  height: 9px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin: 1px 0 0 25px;
}

.text_49 {
  width: 25px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 27px;
}

.text_50 {
  width: 25px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 18px;
  margin-left: 26px;
}

.image_4 {
  position: absolute;
  left: 43px;
  top: 102px;
  width: 669px;
  height: 226px;
}

.group_9 {
  width: 734px;
  height: 284px;
  margin-top: 12px;
}

.box_7 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  width: 100%;
  height: 284px;
}

.group_10 {
  width: 100%;
  height: 24px;
  padding: 12px 12px 0 12px;
}

.image-text_1 {
  width: 118px;
  height: 16px;
  margin-top: 4px;
}

.thumbnail_21 {
  width: 17px;
  height: 16px;
}

.text-group_1 {
  width: 95px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
}

.group_11 {
  background-color: rgba(238, 248, 245, 1);
  border-radius: 11px;
  // width: 84px;
  height: 24px;
}

.image-text_2 {
  width: 55px;
  height: 11px;
  margin: 6px 0 0 15px;
}

.text-group_2 {
  width: 33px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 11px;
}

.thumbnail_22 {
  width: 9px;
  height: 6px;
  margin-top: 3px;
}

.text_51 {
  width: 58px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin: 23px 0 0 141px;
}

.group_12 {
  width: 100%;
  height: 161px;
  padding: 6px 10px 0 10px;

}

.text_52 {
  width: 58px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 54px;
}

.image_5 {
  width: 177px;
  height: 161px;
  margin-left: 5px;
}

.text_53 {
  width: 58px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin: 54px 0 0 5px;
}

.text-wrapper_8 {
  width: 184px;
  height: 14px;
  margin: 4px 0 27px 82px;
}

.text_54 {
  width: 58px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}

.text_55 {
  width: 72px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}

.box_8 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  height: 284px;
  width: 100%;
  position: relative;
}

.block_7 {
  width: 100%;
  height: 24px;
  padding: 12px 11px 0 11px;
}

.image-text_3 {
  width: 151px;
  height: 16px;
  margin-top: 4px;
}

.thumbnail_23 {
  width: 16px;
  height: 16px;
}

.text-group_3 {
  width: 127px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
}

.section_2 {
  background-color: rgba(238, 248, 245, 1);
  border-radius: 11px;
  // width: 84px;
  height: 24px;
}

.image-text_4 {
  width: 55px;
  height: 11px;
  margin: 6px 0 0 15px;
}

.text-group_4 {
  width: 33px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 11px;
}

.thumbnail_24 {
  width: 9px;
  height: 6px;
  margin-top: 3px;
}

.block_8 {
  width: 100%;
  // height: 179px;
  padding: 0 10px 0 10px;
  position: relative;
  top:32px;
}

.block_9 {
  width: 167px;
  height: 167px;
  background: url(https://lanhu-oss-2537-2.lanhuapp.com/ps7hfzqonyh34q6htsu17cobje5wipuw9706925fc9-9116-494b-a413-4e48b0c75c37) -21px -14px
    no-repeat;
  background-size: 224px 195px;
}

.text_56 {
  width: 64px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 59px 0 0 50px;
}

.text-wrapper_9 {
  width: 68px;
  height: 18px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 13px 0 61px 50px;
}

.text_57 {
  width: 68px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 22px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}

.text_58 {
  width: 68px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 24px;
  font-family: Alibaba-PuHuiTi-M;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}

.text_59 {
  width: 68px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}

.block_10 {
  width: 10px;
  height: 126px;
  margin: 19px 0 0 26px;
}

.section_3 {
  background-color: rgba(89, 212, 171, 1);
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.section_4 {
  background-color: rgba(115, 197, 235, 1);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 33px;
}

.section_5 {
  background-color: rgba(252, 166, 96, 1);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 63px;
}

.text-wrapper_10 {
  width: 80px;
  height: 163px;
  margin: 16px 0 0 14px;
}

.text_60 {
  width: 63px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin-left: 1px;
}

.text_61 {
  width: 79px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin: 27px 0 0 1px;
}

.text_62 {
  width: 64px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin-top: 15px;
}

.text_63 {
  width: 63px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin: 26px 0 0 1px;
}

.text_64 {
  width: 63px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin: 15px 0 0 1px;
}

.text-wrapper_11 {
  width: 19px;
  height: 158px;
  margin: 19px 0 0 20px;
}

.text_65 {
  width: 19px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 11px;
}

.text_66 {
  width: 19px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
  margin-top: 31px;
}

.text_67 {
  width: 18px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin: 19px 0 0 1px;
}

.text_68 {
  width: 17px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin: 29px 0 0 1px;
}

.text_69 {
  width: 16px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
  margin: 18px 0 0 1px;
}

.block_11 {
  width: 208px;
  height: 13px;
  margin: 20px 0 27px 14px;
  position: absolute;
  bottom: 0;
}

.section_6 {
  background-color: rgba(89, 212, 171, 1);
  width: 10px;
  height: 10px;
  margin-top: 1px;
}

.text_70 {
  width: 42px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin-left: 7px;
}

.section_7 {
  background-color: rgba(115, 197, 235, 1);
  width: 10px;
  height: 10px;
  margin: 1px 0 0 15px;
}

.text_71 {
  width: 41px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin-left: 8px;
}

.section_8 {
  background-color: rgba(252, 166, 96, 1);
  width: 10px;
  height: 10px;
  margin: 1px 0 0 16px;
}

.text_72 {
  width: 42px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin-left: 7px;
}

.box_9 {
  width: 454px;
  height: 668px;
  margin-left: 12px;
}

.box_10 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  width: 454px;
  height: 416px;
}

.box_11 {
  width: 100%;
  height: 59px;
  justify-content: space-between;
  // margin: 21px 0 0 25px;
}

.box_12 {
  width: 123px;
  height: 59px;
}

.text-wrapper_12 {
  width: 123px;
  height: 17px;
}

.text_73 {
  width: 65px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
}

.text_74 {
  width: 30px;
  height: 17px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
}

.text-wrapper_13 {
  width: 122px;
  height: 31px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin: 15px 0 0 1px;
}

.text_75 {
  width: 122px;
  height: 31px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 40px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
}

.text_76 {
  width: 122px;
  height: 31px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 40px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
}

.text_77 {
  width: 122px;
  height: 31px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 40px;
  font-family: Alibaba-PuHuiTi-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
}

.text-wrapper_14 {
  width: 30px;
  height: 38px;
  margin-top: 13px;
  // margin: 13px 0 0 184px;
}

.text_78 {
  width: 26px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
}

.text_79 {
  width: 29px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
  margin: 12px 0 0 1px;
}

.label_7 {
  width: 36px;
  height: 38px;
  margin: 13px 0 0 12px;
}

.text-wrapper_15 {
  width: 391px;
  height: 14px;
  margin: 29px 0 0 32px;
}

.text_80 {
  width: 41px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
}

.text_81 {
  width: 41px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin-left: 18px;
}

.text_82 {
  width: 41px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin-left: 18px;
}

.text_83 {
  width: 40px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin-left: 17px;
}

.text_84 {
  width: 41px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin-left: 19px;
}

.text_85 {
  width: 41px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin-left: 17px;
}

.text_86 {
  width: 39px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin-left: 18px;
}

.box_13 {
  width: 431px;
  height: 31px;
  margin: 20px 0 0 12px;
}

.thumbnail_25 {
  width: 8px;
  height: 12px;
  margin-top: 10px;
}

.text_87 {
  width: 13px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin: 10px 0 0 23px;
}

.text_88 {
  width: 15px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin: 10px 0 0 46px;
}

.text-wrapper_16 {
  height: 31px;
  background: url(https://lanhu-oss-2537-2.lanhuapp.com/psj51mwd60ogrxhjjk6nh3da9ncnt0yrycq9e12ee7e-4335-48e6-b7b7-6fe63c92e06b)
    100% no-repeat;
  background-size: 100% 100%;
  margin-left: 36px;
  width: 31px;
}

.text_89 {
  width: 16px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin: 10px 0 0 8px;
}

.text_90 {
  width: 16px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin: 10px 0 0 38px;
}

.text_91 {
  width: 16px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin: 10px 0 0 41px;
}

.text_92 {
  width: 16px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin: 10px 0 0 42px;
}

.text_93 {
  width: 15px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
  margin: 10px 0 0 42px;
}

.thumbnail_26 {
  width: 8px;
  height: 12px;
  margin: 10px 0 0 25px;
}

.box_14 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px 0px 0px 0px;
  width: 100%;
  height: 88px;
  border: 2px solid rgba(238, 238, 238, 1);
  margin: 30px 0 0 0;
}

.text-wrapper_17 {
  width: 150px;
  height: 44px;
  margin: 22px 0 0 0;
}

.text_94 {
  width: 150px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 15px;
}

.text_95 {
  width: 59px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 15px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin: 13px 0 0 1px;
}

.text-wrapper_18 {

  // width: 84px;
  // margin: 31px 0 0 121px;
  display: flex;
  align-items: center;
}

.text_96 {
  // width: 56px;
  // height: 14px;
  background-color: rgba(255, 242, 233, 1);
  border-radius: 4px;
  // height: 26px;
  border: 1px solid rgba(255, 102, 0, 1);
  overflow-wrap: break-word;
  color: rgba(255, 102, 0, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  padding: 5px;
  margin-right: 10px;
  // margin: 6px 0 0 14px;
}

.text_96s {
  // width: 56px;
  // height: 14px;
  background-color: #E1F2FA;
  border-radius: 4px;
  // height: 26px;
  border: 1px solid #009FE8;
  overflow-wrap: break-word;
  color: #009FE8;
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  padding: 5px;
  margin-right: 10px;
  // margin: 6px 0 0 14px;
}

.thumbnail_27 {
  width: 18px;
  height: 14px;
  // margin: 37px 20px 0 18px;
}

.box_15 {
  box-shadow: 0px 2px 20px 0px rgba(187, 187, 187, 0.1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 5px 0px 0px 0px;
  width: 430px;
  height: 88px;
  border: 2px solid rgba(238, 238, 238, 1);
  margin: 14px 0 22px 12px;
}

.text-wrapper_19 {
  width: 150px;
  height: 44px;
  margin: 22px 0 0 19px;
}

.text_97 {
  width: 150px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 26px;
}

.text_98 {
  width: 59px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
  margin: 13px 0 0 1px;
}

.text-wrapper_20 {
  background-color: rgba(225, 242, 250, 1);
  border-radius: 4px;
  height: 26px;
  border: 1px solid rgba(0, 159, 232, 1);
  width: 84px;
  margin: 31px 0 0 121px;
}

.text_99 {
  width: 55px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(0, 159, 232, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 26px;
  margin: 6px 0 0 15px;
}

.thumbnail_28 {
  width: 18px;
  height: 14px;
  margin: 37px 20px 0 18px;
}

.box_16 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  height: 239px;
  margin-top: 12px;
  width: 100%;
}

.section_9 {
  // width: 429px;
  height: 16px;
  padding: 18px 13px 0 13px;
}

.image-text_5 {
  width: 118px;
  height: 16px;
}

.thumbnail_29 {
  width: 18px;
  height: 16px;
}

.text-group_5 {
  width: 96px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin-left: 10px;
}

.text_100 {
  width: 75px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
  margin-top: 2px;
}

.section_10 {
  width: 100%;
  height: 149px;
  padding: 30px 20px 37px 20px;
  justify-content: space-between;
}

.image-text_6 {
  width: 41px;
  height: 90px;
}

.image_6 {
  width: 41px;
  height: 69px;
}

.text-group_6 {
  width: 48px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
  margin: 7px 0 0 5px;
}

.image-text_7 {
  width: 41px;
  height: 90px;
  // margin-left: 28px;
}

.image_7 {
  width: 41px;
  height: 69px;
}

.text-group_7 {
  width: 50px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
  margin: 7px 0 0 5px;
}

.box_17 {
  width: 51px;
  height: 143px;
  margin: 6px 0 0 35px;
}

.group_13 {
  box-shadow: 0px 0px 8px 0px rgba(50, 74, 67, 0.68);
  background-color: rgba(133, 225, 194, 1);
  border-radius: 24px;
  height: 116px;
  margin-left: 2px;
  width: 48px;
}

.section_11 {
  box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.78);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: 73px 0 0 6px;
}

.text_101 {
  width: 51px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
  margin-top: 12px;
}

.box_18 {
  width: 51px;
  height: 143px;
  margin: 6px 0 0 38px;
}

.box_19 {
  box-shadow: 0px 0px 8px 0px rgba(50, 74, 67, 0.21);
  background-color: rgba(238, 248, 245, 1);
  border-radius: 24px;
  height: 116px;
  margin-left: 2px;
  width: 48px;
}

.block_12 {
  box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.78);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: 7px 0 0 6px;
}

.text_102 {
  width: 51px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
  margin-top: 12px;
}

.box_20 {
  width: 51px;
  height: 143px;
  margin: 6px 0 0 38px;
}

.group_14 {
  box-shadow: 0px 0px 8px 0px rgba(50, 74, 67, 0.68);
  background-color: rgba(133, 225, 194, 1);
  border-radius: 24px;
  height: 116px;
  margin-left: 2px;
  width: 48px;
}

.group_15 {
  box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.78);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: 73px 0 0 6px;
}

.text_103 {
  width: 51px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
  margin-top: 12px;
}

.text-wrapper_21 {
  position: absolute;
  left: 68px;
  top: 111px;
  width: 63px;
  height: 555px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  line-height: 60px;
}

.paragraph_2 {
  width: 63px;
  height: 555px;
  overflow-wrap: break-word;
  color: rgba(3, 191, 138, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  line-height: 80px;
}

.paragraph_3 {
  width: 63px;
  height: 555px;
  overflow-wrap: break-word;
  color: rgba(75, 90, 109, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  line-height: 80px;
}
.timeall{
    position: relative;
    width: 100%;
    margin-top: 30px;
  }
  .lastbt,.nextbt{
    position: absolute;
    top:25px;
  }
  .lastbt{
    left: -7px;
  }
  .nextbt{
    right: -7px;
  }
.table_header{ display:flex; justify-content: center; color:#8e8e8e;margin-bottom: 10px;}
.week_one{ text-align: center; line-height: 50px; border-bottom:1px solid #f5f4f7; border-left:1px solid #f5f4f7; background: #e9f0fe;  width:200px; }
.weekday{ flex:1; text-align: center; line-height: 25px; }
.finish {
  // background:#8ACBAD;
  background: linear-gradient(135deg, #04E399, #00A36A);
  padding: 5px;
  border-radius: 50%;
  color:#fff !important;
}


</style>