<template>
  <!-- 设备列表 -->
  <div class="devicePage flex-col">
    <s-header :name="sys ? sys.title : $t('public.sysName')" :noback="false"></s-header>
    <div class="listBox">
    <van-list
      v-model:loading="loading"
      v-model:error="error"
      :error-text="$t('public.requestFailed')"
      :finished="finished"
      :finished-text="$t('public.noMore')"
      offset="300"
      :immediate-check="false"
      @load="onLoad"
    >
      <div class="deviceBox flex-col">
        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <div class="flex-col outer4"></div>
              <span class="flex-col txt2">{{$t('device.dataOverview')}}</span>
            </div>
          </div>
          <div class="flex-col">
            <div class="main5 flex-row justify-between" @click="searchClick">
              <img class="label2" src="../../assets/device/searchIcon.png" />
              <div class="TextGroup2 flex-col">
                <span class="txt3">{{$t('device.search')}}</span>
              </div>
            </div>
          </div>
        </div>
        <img class="pic2" src="../../assets/device/line.png"/>
        <div class="bd4 flex-col">
          <div class="box2 flex-row justify-between">
            <div class="TextGroup3 flex-col">
              <div class="group1 flex-col justify-between align-center">
                <span class="word4">0</span>
                <span class="info1">{{$t('device.totalNumberOfRuns')}}</span>
              </div>
            </div>
            <div class="TextGroup4 flex-col">
              <div class="main6 flex-col justify-between align-center">
                <span class="word5">{{deviceTotal}}</span>
                <span class="word6">{{$t('device.totalNumberOfEquipment')}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box1 flex-col justify-between">
        <div class="section2 flex-col">
          <div class="outer3 flex-col">
            <div v-for="item in list" :key="item">
              <div class="bd5 flex-row">
                <div class="layer1 flex-col"></div>
                <span class="txt4">{{item.name}}</span>
                <div class="intervalTxtLogo"></div>
                <div v-if="item.hasTodayAlarm" class="box4 flex-col"></div>
                <div class="layer2 flex-col" :class="{'deviceOn': item.isUsing, 'layerLeft': item.hasTodayAlarm}"></div>
              </div>
              <span class="txt5">{{$t('device.affiliatedMerchants')}}：{{item.adminUserName}}</span>
              <span class="word7">{{$t('device.machineUniqueCode')}}：{{item.clientId}}</span>
              <div v-if="item.checkType">
                <img
                  class="pic1"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
                />
                <div class="layer6_7 flex-row justify-between">
                  <span class="word8">{{$t('device.sleepState')}}：{{item.isSleep ? $t('device.sleeping') : $t('device.notSleeping')}}</span>
                  <span class="info3">{{$t('device.lastRefreshTime')}}：{{showDateTime(item.lastUpdateTime)}}</span>
                </div>
                <div class="word9">
                  炉头状态:{{item.eqeStatus === 1 ? '已开启' : '已关闭'}}
                  <!-- <span class="word8">炉头状态{{$t('device.sleepState')}}：{{item.isSleep ? $t('device.sleeping') : $t('device.notSleeping')}}</span> -->
                </div>
                <span class="word9">{{item.fullName}}</span>
                <div class="layer7 flex-row justify-between">
                  <span class="word10">{{$t('device.furnaceHeadTemperature')}}：{{item.furnaceTm}}{{$t('device.degree')}}</span>
                  <span class="word11">{{$t('device.temperatureInCabinet')}}：{{item.cabinetTm}}{{$t('device.degree')}}</span>
                  <span class="word11">{{$t('device.humidityInCabinet')}}：{{item.cabinetHd}}{{$t('device.degree')}}</span>
                </div>
                <span class="info4">{{$t('device.volume')}}：{{item.volume}}</span>
                <span class="info5">{{$t('device.alarmContent')}}：{{item.alarmList && item.alarmList[0] ? item.alarmList[0].alarmContent : ''}} <span v-if="item.alarmList && item.alarmList[0]" style="color: #4d6add;" @click="clearAlarm(item)">{{$t('device.eliminateAlarm')}}</span></span>
                <div class="layer8 flex-row justify-between">
                  <div class="ImageText3 flex-col">
                    <div class="outer4 flex-row justify-between" @click="deviceSet(item)">
                      <div class="TextGroup5 flex-col">
                        <span class="txt5">{{$t('device.editDevice')}}</span>
                      </div>
                      <div class="box2 flex-col"></div>
                    </div>
                  </div>
                  <div class="ImageText4 flex-col">
                    <div class="main6 flex-row justify-between" @click="deviceOprShow(item)">
                      <div class="TextGroup6 flex-col">
                        <span class="word12">{{$t('device.commonOperations')}}</span>
                      </div>
                      <div class="mod2 flex-col"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="bd6 flex-row justify-between" v-if="!item.checkType" @click="item.checkType = !item.checkType">
                <span class="info2">{{$t('device.seeMore')}}</span>
                <div class="group2 flex-col"></div>
              </div>
              <div class="bd6 flex-row justify-between" v-if="item.checkType" @click="item.checkType = !item.checkType">
                <span class="info2">{{$t('device.stow')}}</span>
                <div class="group2 checkType flex-col"></div>
              </div>
              <div class="bd7 flex-col"></div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    </div>
    <!-- 常见操作、操作确认弹窗 -->
    <!-- <van-dialog v-model:show="show" title="标题" show-cancel-button>
      <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
    </van-dialog> -->
    <deviceOper ref="oprRef" ></deviceOper>
    <!-- 搜索弹出框 -->
    <deviceSearch ref="searchRef" @search="search($event)"></deviceSearch>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from 'vue';
import { Toast } from 'vant';
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";
import { getLoginUser } from '@/common/js/utils';
import { getDeviceList, eliminate } from '@/service/device/index';
import deviceSearch from "./deviceSearch.vue";
import deviceOper from './deviceOper.vue';
import { useRouter } from "vue-router";
import dateUtil from "@/utils/dateUtil";
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    const searchRef = ref(null);
    const oprRef = ref(null);
    const list = ref([]);
    const loading = ref(false);
    const error = ref(false);
    const finished = ref(false);
    const deviceTotal = ref(0);
    const router = useRouter();
    const sys = ref(null);
    // 页面列表查询参数
    let searchParams = reactive({
      id: '', // 用户账户id
      // adminName: '', // 用户登录名
      current: 1, // 页数
      size: 10 // 页大小
    });
    // 初始化页面获取列表
    onMounted(async () => {
      if (localStorage.getItem('loginSys')) {
        const loginSysString = localStorage.getItem('loginSys');
        sys.value = JSON.parse(loginSysString);
      }
      list.value = [];
      searchParams.current = 1;
      const user = getLoginUser();
      if (user) {
        searchParams.id = user.id;
        if (user.isAdmined) {
          searchParams.adminName = user.username;
        }
        getList();
      }
    });

    // 获取设备列表数据
    const getList = async () => {
      const { data } = await getDeviceList(Object.assign({}, searchParams));
      if (data.code === '00000') {
        if (searchParams.current === 0) {list.value = []; }
        // 列表值叠加
        list.value = list.value.concat(data.data.records.map((item) => {
          return {
            ...item,
            checkType: false,
          }
        }));
        deviceTotal.value = data.data.total;
        if (list.value.length === data.data.total) { finished.value = true; }
        loading.value = false;
      } else { Toast.fail(data.message); }
    }
    // 滚动加载
    const onLoad = () => {
      if (!finished.value) { searchParams.current = searchParams.current + 1; getList(); }
    };
    // 搜索点击
    const searchClick = () => { searchRef.value.showSearch(); };
    // 搜索条件触发查询
    const search = (e) => {
      searchParams.current = 0;
      searchParams = Object.assign(searchParams, e);
      getList();
    };
    // 跳转设备编辑
    const deviceSet = (e) => { router.push({ path: 'deviceSet', query: { deviceId: e.id }}) }
    // 常用操作弹窗展示触发
    const deviceOprShow = (e) => { oprRef.value.showOper(e); }
    // 消除报警
    const clearAlarm = async (e) => {
      const params = {
        id: e.id,
        name: e.name,
        selfName: e.selfName,
        areaId: e.areaId,
        channel: e.channel,
        contactName: e.contactName,
        contactPhone: e.contactPhone,
        flowers: e.flowers,
        operationalName: e.operationalName,
        operationalPhone: e.operationalPhone,
        timeRuleId: e.timeRuleId
      };
      const { data } = await eliminate(Object.assign({}, params));
      if (data.code === '00000') {
        Toast.success(t('device.successfullyEliminatedTheAlarm'));
        e.alarmList = [];
      } else { Toast.fail(data.message); }
      console.log('/tEquipment/eliminate', e); 
    }
    const showDateTime = (date) => { return date ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss" ) : ''; }
    return {
      ...toRefs(searchParams),
      deviceTotal,
      list,
      loading,
      error,
      finished,
      onLoad,
      searchRef,
      searchClick,
      search,
      deviceSet,
      clearAlarm,
      oprRef,
      deviceOprShow,
      showDateTime,
      sys
    };
  },
  components: { sHeader, navBar, deviceSearch, deviceOper },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common";
.devicePage {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 375px;
  .listBox { width: 100%; height: calc(100vh - 50px); overflow: auto; }
  .searchRow {
    margin: 21px 15px;
    .bd3 {
      width: 87px;
      height: 16px;
      .outer4 {
        width: 14px;
        height: 16px;
        background: url('../../assets/device/searchLeft.png') 100% no-repeat;
      }
      .txt2 {
        width: 65px;
        height: 14px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 15px;
        font-family: PingFangSC-Semibold;
        text-align: left;
        white-space: nowrap;
        line-height: 15px;
        display: block;
      }
    }
    .main5 {
      width: 39px;
      height: 16px;
      .label2 {
        width: 14px;
        height: 14px;
        margin-top: 1px;
      }
      .TextGroup2 {
        height: 16px;
        width: 22px;
        .txt3 {
          width: 22px;
          height: 16px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 11px;
          text-align: center;
          white-space: nowrap;
          line-height: 16px;
          display: block;
        }
      }
    }
  }
  .pic2 { width: 375px; height: 2px; }
  .bd4 {
    width: 345px;
    height: 108px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1dca9a6ec745da9b5640037f8cb04c3e1b9e96a39e75024fe48317cf85cbdc44) no-repeat;
    background-size: 100% 100%;
    margin: 20px 0 0 15px;
    .box2 {
      width: 227px;
      height: 57px;
      margin: 22px 0 0 48px;
      .TextGroup3 {
        height: 57px;
        width: 48px;
        .group1 {
          width: 48px;
          height: 57px;
          .word4 {
            height: 26px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: Helvetica;
            text-align: center;
            white-space: nowrap;
            line-height: 26px;
            display: block;
          }
          .info1 {
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            line-height: 17px;
            margin-top: 14px;
            display: block;
          }
        }
      }
      .TextGroup4 {
        height: 57px;
        width: 48px;
        .main6 {
          width: 48px;
          height: 57px;
          .word5 {
            height: 26px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: Helvetica;
            text-align: center;
            white-space: nowrap;
            line-height: 26px;
            display: block;
          }
          .word6 {
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            line-height: 17px;
            margin-top: 14px;
            display: block;
          }
        }
      }
    }
  }

  .box1 {
    width: 375px;
    // height: 667px;
    .section2 {
      background-color: rgba(255, 255, 255, 1);
      // height: 602px;
      margin-top: 1px;
      width: 375px;
      .outer3 {
        width: 375px;
        // height: 602px;
        .bd1 {
          background-color: rgba(255, 255, 255, 1);
          height: 54px;
          width: 375px;
          .main4 {
            width: 375px;
            height: 33px;
            margin-top: 21px;
            .bd2 {
              width: 345px;
              height: 17px;
              margin-left: 15px;
              .ImageText1 {
                height: 16px;
                margin-top: 1px;
                width: 87px;
                .bd3 {
                  width: 87px;
                  height: 16px;
                  .outer4 {
                    width: 14px;
                    height: 16px;
                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaf434f154dc423fe53e1c1f756bb2336f532874e7b7ea909f1680d0cabd0ab9d)
                      100% no-repeat;
                  }
                  .TextGroup1 {
                    height: 14px;
                    margin-top: 2px;
                    width: 65px;
                    .txt2 {
                      width: 65px;
                      height: 14px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 15px;
                      font-family: PingFangSC-Semibold;
                      text-align: left;
                      white-space: nowrap;
                      line-height: 15px;
                      display: block;
                    }
                  }
                }
              }
              .ImageText2 {
                height: 16px;
                width: 39px;
                .main5 {
                  width: 39px;
                  height: 16px;
                  .label2 {
                    width: 14px;
                    height: 14px;
                    margin-top: 1px;
                  }
                  .TextGroup2 {
                    height: 16px;
                    width: 22px;
                    .txt3 {
                      width: 22px;
                      height: 16px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 11px;
                      text-align: center;
                      white-space: nowrap;
                      line-height: 16px;
                      display: block;
                    }
                  }
                }
              }
            }
            .pic2 {
              width: 375px;
              height: 2px;
              margin-top: 14px;
            }
          }
        }
        .bd4 {
          height: 108px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1dca9a6ec745da9b5640037f8cb04c3e1b9e96a39e75024fe48317cf85cbdc44) -5px -6px
            no-repeat;
          width: 345px;
          margin: 20px 0 0 15px;
          .box2 {
            width: 227px;
            height: 57px;
            margin: 22px 0 0 48px;
            .TextGroup3 {
              height: 57px;
              width: 48px;
              .group1 {
                width: 48px;
                height: 57px;
                .word4 {
                  width: 25px;
                  height: 26px;
                  overflow-wrap: break-word;
                  color: rgba(223, 94, 76, 1);
                  font-size: 22px;
                  font-family: Helvetica;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 26px;
                  margin-left: 7px;
                  display: block;
                }
                .info1 {
                  width: 48px;
                  height: 17px;
                  overflow-wrap: break-word;
                  color: rgba(135, 135, 166, 1);
                  font-size: 12px;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 17px;
                  margin-top: 14px;
                  display: block;
                }
              }
            }
            .TextGroup4 {
              height: 57px;
              width: 48px;
              .main6 {
                width: 48px;
                height: 57px;
                .word5 {
                  width: 25px;
                  height: 26px;
                  overflow-wrap: break-word;
                  color: rgba(223, 94, 76, 1);
                  font-size: 22px;
                  font-family: Helvetica;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 26px;
                  margin-left: 12px;
                  display: block;
                }
                .word6 {
                  width: 48px;
                  height: 17px;
                  overflow-wrap: break-word;
                  color: rgba(135, 135, 166, 1);
                  font-size: 12px;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 17px;
                  margin-top: 14px;
                  display: block;
                }
              }
            }
          }
        }
        .bd5 {
          width: 345px;
          height: 18px;
          margin: 30px 0 0 15px;
          .layer1 {
            background-color: rgba(128, 150, 236, 1);
            border-radius: 2px;
            width: 4px;
            height: 12px;
            margin-top: 4px;
          }
          .txt4 {
            width: 176px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 15px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 15px;
            display: block;
            margin: 3px 0 0 6px;
          }
          .layer2 {
            height: 18px;
            background: url('../../assets/device/powerOff.png') 100% no-repeat;
            background-size: 100%;
            width: 18px;
            margin-left: 30px;
            &.layerLeft{ margin-left: 5px; }
            &.deviceOn {
              background: url('../../assets/device/powerOn.png') 100% no-repeat;
              background-size: 100%;
            }
          }
          .box4 {
            width: 24px;
            height: 19px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngef4f843cdff906e6011a7f39f1db213a5917441c6a3584d9033278e7b0fc91b5)
              100% no-repeat;
          }
          .intervalTxtLogo { width: 110px; }
        }
        .txt5 {
          width: 242px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          display: block;
          margin: 8px 0 0 15px;
        }
        .word7 {
          width: 262px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 10px 0 0 15px;
        }
        .pic1 {
          width: 375px;
          height: 2px;
          margin-top: 19px;
        }
        .layer6_7 {
          width: 340px;
          height: 13px;
          margin: 19px 0 0 15px;
          .word8 {
            width: auto;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 0;
          }
          .info3 {
            width: auto;
            height: 13px;
            padding-left: .5em;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }
        .word9 {
          width: 177px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 10px 0 0 15px;
        }
        .layer7 {
          width: 100%;
          height: 13px;
          margin-top: 10px;
          padding: 0 15px;
          .word10 {
            width: auto;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
          .word11 {
            width: auto;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }
        .info4 {
          width: 39px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 10px 0 0 15px;
        }
        .info5 {
          width: 117px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 10px 0 0 15px;
        }
        .layer8 {
          width: 173px;
          height: 17px;
          margin: 20px 0 0 100px;
          .ImageText3 {
            height: 17px;
            width: 60px;
            .outer4 {
              width: 60px;
              height: 17px;
              .TextGroup5 {
                height: 17px;
                width: 48px;
                .txt5 {
                  width: 48px;
                  height: 17px;
                  overflow-wrap: break-word;
                  color: rgba(77, 106, 221, 1);
                  font-size: 12px;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 17px;
                  display: block;
                  margin: 0;
                }
              }
              .box2 {
                width: 8px;
                height: 10px;
                // border: 0.5px solid rgba(64, 77, 116, 0.5);
                background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e037b80129884e66817162efde1ba4d8_mergeImage.png)
                  100% no-repeat;
                margin-top: 4px;
              }
            }
          }
          .ImageText4 {
            height: 17px;
            width: 60px;
            .main6 {
              width: 60px;
              height: 17px;
              .TextGroup6 {
                height: 17px;
                width: 48px;
                .word12 {
                  width: 48px;
                  height: 17px;
                  overflow-wrap: break-word;
                  color: rgba(77, 106, 221, 1);
                  font-size: 12px;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 17px;
                  display: block;
                }
              }
              .mod2 {
                width: 8px;
                height: 10px;
                // border: 0.5px solid rgba(64, 77, 116, 0.5);
                background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e21af9a166a7471e908d3f6c5feff331_mergeImage.png)
                  100% no-repeat;
                margin-top: 4px;
              }
            }
          }
        }
        .bd6 {
          width: 61px;
          height: 17px;
          margin: 15px 0 0 157px;
          .info2 {
            width: 48px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            line-height: 17px;
            display: block;
          }
          .group2 {
            width: 10px;
            height: 4px;
            background: url('../../assets/device/deviceSelect.png') center no-repeat;
            background-size: 100%;
            margin-top: 7px;
            &.checkType { transform:scaleY(-1); }
          }
        }
        .bd7 {
          width: 345px;
          height: 1px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng699372cef543e7a77f69ee4b13e1e8fd3969dbac13a75ca8bfd596af7891e8b5) -1px
            0px no-repeat;
          margin: 15px 0 0 15px;
        }
        .bd8 {
          width: 345px;
          height: 18px;
          margin: 20px 0 0 15px;
          .outer5 {
            background-color: rgba(128, 150, 236, 1);
            border-radius: 2px;
            width: 4px;
            height: 12px;
            margin-top: 4px;
          }
          .txt6 {
            width: 176px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 15px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 15px;
            display: block;
            margin: 3px 0 0 6px;
          }
          .outer6 {
            width: 18px;
            height: 18px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng164fc6854bc0badab9c36f9e9751c42ceda02742fc5e78f7662ced4a0f76844c)
              100% no-repeat;
            margin-left: 141px;
          }
        }
        .txt7 {
          width: 242px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          display: block;
          margin: 8px 0 0 15px;
        }
        .word8 {
          width: 262px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 10px 0 0 15px;
        }
        .bd9 {
          width: 61px;
          height: 17px;
          margin: 15px 0 0 157px;
          .txt8 {
            width: 48px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            line-height: 17px;
            display: block;
          }
          .block1 {
            width: 10px;
            height: 4px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngcea7125d2a8b914ff1d7c432b5e4d9dd1026bdc056f5510f5b48f76e9058d48d)
              0px -1px no-repeat;
            margin-top: 7px;
          }
        }
        .bd10 {
          width: 345px;
          height: 1px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng699372cef543e7a77f69ee4b13e1e8fd3969dbac13a75ca8bfd596af7891e8b5) -1px
            0px no-repeat;
          margin: 15px 0 0 15px;
        }
        .bd11 {
          width: 345px;
          height: 18px;
          margin: 20px 0 0 15px;
          .section3 {
            background-color: rgba(128, 150, 236, 1);
            border-radius: 2px;
            width: 4px;
            height: 12px;
            margin-top: 4px;
          }
          .txt9 {
            width: 176px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 15px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 15px;
            display: block;
            margin: 3px 0 0 6px;
          }
          .section4 {
            width: 22px;
            height: 15px;
            background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/be1271ed70774869b81ed2d5f43b6a44_mergeImage.png)
              100% no-repeat;
            margin: 3px 0 0 111px;
          }
          .section5 {
            height: 18px;
            background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/5723fcdad1574aef9e65c326de33d8b2_mergeImage.png)
              100% no-repeat;
            margin-left: 8px;
            width: 18px;
            .box3 {
              background-color: rgba(255, 255, 255, 1);
              border-radius: 1px;
              width: 2px;
              height: 7px;
              margin: 2px 0 0 8px;
            }
          }
        }
        .txt10 {
          width: 242px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          display: block;
          margin: 8px 0 0 15px;
        }
      }
    }
  }
}
</style>
