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

<template>
  <div class="app-container " >
    <el-row :gutter="10">
      <el-col :span="4">
          <div  class=" infinite-list" style="overflow:auto; background-color: #fff;border-radius: 10px;padding: 10px 20px;height: 96vh;">
            <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">选择设备</p>
            <div :class="ishge == index ? 'anche' : ''" style=" height: 36px;;line-height: 36px;margin-top: 10px;padding: 0 10px; cursor: pointer;"v-for="(item,index) in equipmentManageList" :key="index">
                            <div @click="ishg(item,index)" style="display: flex;align-items: center;justify-content: space-between;">
                              <div style="font-size: 16px;
            color: #333333;"> {{item.equipmentName == null?'暂无数据' : item.equipmentName}}</div>
                              <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
                            </div>
                        </div>


          </div>
      </el-col>
      <el-col :span="open == false? 20 : 14">
          <div style="background-color: #fff;padding: 20px;border-radius: 10px; padding-bottom: 0; padding-top: 10px;">
                        <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;margin-left: -20px;">
                          <!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
                         <span style="margin-left: 10px;">搜索条件</span>
                        </p>
                        <div style="padding-bottom: 0;margin-bottom: 20px;">
          <el-form  class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
            <el-form-item label="通道编号" prop="channelNum">
              <el-input
                v-model="queryParams.channelNum"
                placeholder="请输入通道编号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item style="border: 0;">
               <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary" size="mini"  @click="handleQuery">查询 </el-button>
              <el-button  size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          </div>
          </div>

          <el-row :gutter="10" class="mb8">
            <el-col :span="24">
              <div style="display: flex; justify-content: space-between;">
                <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;">
                  <!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
                 <span style="margin-left: 10px;">通道列表</span>
                </p>
                <div>
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['manage:channelNumber:add']"
                  >新增</el-button>
                 <el-button
                   type="danger"
                   plain
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['manage:channelNumber:remove']"
                 >删除</el-button>
                 <el-button
                   type="warning"
                   plain
                   size="mini"
                   @click="handleExport"
                   v-hasPermi="['manage:channelNumber:export']"
                 >导出</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class=" infinite-list" :style="dynamicStyle" >
            <div   style="display: flex;flex-wrap: wrap;" v-if="inhgeshwe">
              <!-- item.channelDetails == null?'height:200px; margin-bottom: 10px;' : -->
              <div   class="box_3dr flex-col" style="margin-bottom: 10px;" v-for="(item,index ) in channelNumberList" :key="index" >
                            <div class="box_4 flex-row" style="justify-content: space-between;margin: 0;">
                              <div  @click="handleSelectionChange(item)" style="display: flex;align-items: center;">
                                <img
                                  class="thumbnail_21"
                                  referrerpolicy="no-referrer"
                                  src="../../../assets/images/icon_lby_gx_normal.png"
                                  v-show="!item.isnum && isgsow"
                                />
                                <img
                                  class="thumbnail_21"
                                  referrerpolicy="no-referrer"
                                  src="../../../assets/images/icon_lby_gx_selcted.png"
                                  v-show="item.isnum && isgsow"
                                />
                                <span class="text_19">{{item.channelNum}}</span>
                              </div>
                              <div>
                                <img
                                  class="image_1"
                                  style="cursor: pointer;"
                                  referrerpolicy="no-referrer"
                                  @click="handleUpdate(item)"
                                  v-hasPermi="['manage:equipmentManage:edit']"
                                  src="../../../assets/images/icon_lby_gdtc_bj.png"
                                />
                                <img
                                  class="thumbnail_22"
                                   style="cursor: pointer;"
                                  @click="handleDelete(item)"
                                  v-hasPermi="['manage:equipmentManage:remove']"
                                  referrerpolicy="no-referrer"
                                   src="../../../assets/images/icon_lby_gdtc_del.png"/>
                              </div>
                            </div>
                            <div style="padding: 10px;">
                              <div class="box_6 flex-row jiange" style="  align-items: center;">
                                <span class="text_21">视频地址： </span>
                                <el-tooltip class="item" effect="dark" :content="item.videoAddress" placement="top-start">
                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                     {{item.videoAddress}}
                                </div>
                                </el-tooltip>
                              </div>
                              <div class="box_6 flex-row jiange" style="align-items: center;">
                                <span class="text_21">协议类型： </span>
                                <div style="margin-left: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                  <dict-tag :options="dict.type.probing_protocol" :value="item.protocolType"/>
                                </div>
                              </div>
                              <!-- <span class="text_20">设备地址：192.168.1.1</span> -->
                              <div class="box_6 flex-row jiange">
                                <span class="text_21">设备账号： </span>
                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                     {{item.account}}
                                </div>
                              </div>

                              <div class="box_6 flex-row jiange">
                                <span class="text_21">设备密码： </span>
                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                     {{item.password}}
                                </div>
                              </div>
                              <div class="box_6 flex-row jiange" style="  align-items: center;">
                                <span class="text_21">预览端口： </span>
                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                     {{item.equipmentAddress}}
                                </div>
                              </div>
                              <div class="box_6 flex-row jiange" style="  align-items: center;" >
                                <span class="text_21">通道描述： </span>
                                <el-tooltip class="item" effect="dark" :content="item.channelDetails" placement="top-start">
                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                     {{item.channelDetails}}
                                </div>
                                </el-tooltip>
                              </div>
                            </div>

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

          <paginations
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
      </el-col>
      <el-col :span="6" v-if="open">
       <div style="background-color: #fff;padding: 10px 20px;border-radius: 10px; padding-bottom: 10px;">
         <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;">
           <!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
          <span style="margin-left: 10px;">通道信息</span>
         </p>
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-row>
             <el-col :span="24" v-if="xiugai">
               <el-form-item label="设备管理" prop="protocolType">
                         <el-select style="width:100%" v-model="form.equipmentId" placeholder="请选择设备管理">
                           <el-option
                           @click="issheg(dict)"
                             v-for="dict in equipmentManageList"
                             :key="dict.equipmentId"
                             :label="dict.equipmentName"
                             :value="dict.equipmentId"
                           ></el-option>
                         </el-select>
                       </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="编号" prop="channelNum">
                 <el-input v-model="form.channelNum" placeholder="请输入通道编号" />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="视频地址" prop="videoAddress">
                 <el-input v-model="form.videoAddress" placeholder="请输入视频地址" />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="账号" prop="account">
                 <el-input v-model="form.account" placeholder="请输入账号" />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="探测协议" prop="protocolType">
                         <el-select style="width:100%" v-model="form.protocolType" placeholder="请选择探测协议类型">
                           <el-option
                             v-for="dict in dict.type.probing_protocol"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value"
                           ></el-option>
                         </el-select>
                       </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="密码" prop="password">
                 <el-input v-model="form.password" placeholder="请输入密码" />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="预览端口" prop="port">
                 <el-input v-model="form.port"  placeholder="请输入内容" />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="备注" prop="remark">
                 <el-input v-model="form.remark"  placeholder="请输入内容" />
               </el-form-item>
             </el-col>

             <el-col :span="24">
               <el-form-item label="通道描述" prop="channelDetails">
                 <el-input v-model="form.channelDetails" type="textarea" placeholder="请输入内容" />
               </el-form-item>
             </el-col>

           </el-row>
          <!-- <el-form-item label="删除标志" prop="delFlag">
             <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
           </el-form-item> -->

         </el-form>
         <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
           <el-button style="background-color:#03BF8A ; border-color: #03BF8A;" type="primary" @click="submitForm">确 定</el-button>
           <el-button style="background-color:#DDEBE7 ; border-color: #DDEBE7; color: #475669;" @click="cancel">取 消</el-button>
         </div>
       </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import { listChannelNumber, getChannelNumber, delChannelNumber, addChannelNumber, updateChannelNumber } from "@/api/system/channelNumber"
import { listEquipmentManageNoPage,  } from "@/api/manage/equipmentManage"
import Masonry from "masonry-layout";
export default {
  name: "ChannelNumber",
  dicts: ['probing_protocol'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 通道管理表格数据
      channelNumberList: [],
      equipmentManageList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        channelNum: null,
        videoAddress: null,
        protocolType: null,
        channelDetails: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        channelNum: [
                  { required: true, message: "不能为空", trigger: "blur" }
                ],
        account: [
                  { required: true, message: "不能为空", trigger: "blur" }
                ],
        // password: [
        //           { required: true, message: "不能为空", trigger: "blur" }
        //         ],
        videoAddress: [
                  { required: true, message: "不能为空", trigger: "blur" }
                ],

      },
       tableMaxHeight:'200',
       equipmentManageList:[],
       ishge:0,
       singleg:true,
       xiugai:false,
       ishsouetan:false,
        isgsow:true,
        manid:0,
        inhgeshwe:true
    }
  },
  created() {
    this.getList()
    this.getListsehb()
    window.onresize = () => {
    	      this.changeTableMaxHeight()
    	    }
    	    this.changeTableMaxHeight()
  },
  computed: {
    dynamicStyle() {
      return {
        overflow:'auto',
        height:  this.tableMaxHeight + 'px',
      }
    }
    },
  mounted() {
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()
  },
  methods: {
    // 切换点击
    sande(row){
      console.log(row)
      this.isgsow = false
      row.isnum =  !row.isnum
      this.isgsow = true
      let nhde = []
      let nsg = ''
      this.equipmentManageList.filter(rou=>{
        if(rou.isnum == true){
          nhde.push(rou.equipmentId)
        }
      })
      if(nhde.length == 1){
        this.equipmentManageList.filter(rou=>{
          if(rou.isnum == true){
            console.log(rou.equipmentId)
            this.manid = rou.equipmentId
            console.log(this.manid)
          }
        })
        this.singleg = false
      }else{
        // this.manid  = row.
        this.singleg = true
      }
      // console.log()
    },
    /** 查询通道管理列表 */
    getList() {
      this.loading = true
      listChannelNumber(this.queryParams).then(response => {
        this.channelNumberList = response.rows
        this.channelNumberList.filter(rou=>{
          rou.isnum = false
        })
        this.total = response.total
        this.loading = false
      })
    },

    /** 查询设备管理列表 */
        getListsehb() {
          this.loading = true
          listEquipmentManageNoPage().then(response => {
            this.equipmentManageList = response.rows
            if(this.equipmentManageList.length !=0){
               // this.queryParams.equipmentId = this.equipmentManageList[0].equipmentId
               this.form.equipmentId = this.equipmentManageList[0].equipmentId
               this.form.equipmentNum = this.equipmentManageList[0].equipmentNum
               this.form.equipmentName = this.equipmentManageList[0].equipmentName
               this.form.equipmentIp = this.equipmentManageList[0].equipmentIp
            }
            this.loading = false
          })
        },
        // 设备点击
        ishg(row,index){
          this.ishge = index
          this.queryParams.equipmentId = row.equipmentId
          this.form.equipmentId = row.equipmentId
          this.form.equipmentNum = row.equipmentNum
          this.form.equipmentName = row.equipmentName
          this.form.equipmentIp = row.equipmentIp
          this.getList()
        },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        channelId: null,
        channelNum: null,
        videoAddress: null,
        protocolType: '1',
        channelDetails: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        equipmentId:null,
        port:'80'
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.equipmentId = null
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // console.log(selection)
      this.isgsow = false
      selection.isnum = !selection.isnum
      this.isgsow = true
      let nhseg= []
      this.channelNumberList.filter(rou=>{
        if(rou.isnum == true){
          nhseg.push(rou)
        }
      })
      console.log(nhseg)
      this.ids = nhseg.map(item => item.channelId)
      console.log(this.ids,nhseg)
      this.single = nhseg.length!==1
      this.multiple = !nhseg.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      // this.title = "添加通道管理"
      this.xiugai = false
      this.inhgeshwe = false
      this.form.port = '80'
      if(this.equipmentManageList.length !=0){
        this.form.equipmentId = this.equipmentManageList[0].equipmentId
        this.form.equipmentNum = this.equipmentManageList[0].equipmentNum
        this.form.equipmentName = this.equipmentManageList[0].equipmentName
      }
      this.inhgeshwe = true
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const channelId = row.channelId || this.ids
      getChannelNumber(channelId).then(response => {
        this.form = response.data
        this.xiugai = true
        this.open = true
        // this.title = "修改通道管理"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.channelId != null) {
            updateChannelNumber(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addChannelNumber(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const channelIds = row.channelId || this.ids
      this.$modal.confirm('是否确认删除通道管理数据项？').then(function() {
        return delChannelNumber(channelIds)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/channelNumber/export', {
        ...this.queryParams
      }, `channelNumber_${new Date().getTime()}.xlsx`)
    },
    // 设备选择
    issheg(row){
      this.form.equipmentId = row.equipmentId
      this.form.equipmentNum = row.equipmentNum
      this.form.equipmentName = row.equipmentName
    },
    canshu(row){
      this.$router.push({
        path: '/huabuhaik',
        query: {
        	'id':row.channelId,
        }
      })
    },
    // 获取屏幕高度
        showFilterForm () {
              this.filterActive = !this.filterActive
              this.changeTableMaxHeight()
            },

            changeTableMaxHeight () {
              let height = document.body.offsetHeight // 网页可视区域高度
              // if (this.filterActive) {
              //   this.tableMaxHeight = height - 320
              // } else {
                this.tableMaxHeight = height - 250
              // }
              console.log(height)
            }
  }
}
</script>
<style lang="scss">
  .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    background-color:#F5F6F8;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #03BF8A;
    border-color: #03BF8A;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #03BF8A;
    border-color: #03BF8A;
  }
  .qucheu{
    .el-form-item--small.el-form-item{
      border: 1px  solid #E6E6E6;
    }
    .el-input__inner{
      border:0;
    }

  }

.anche{
  background: #E7F1EE !important;
  border-radius: 4px  !important;
  font-weight: 400;
  div{
    color: #03BF8A !important;
  }
}

</style>
<style scoped>
  .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    background-color:#F5F6F8;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #03BF8A;
    border-color: #03BF8A;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #03BF8A;
    border-color: #03BF8A;
  }

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}

.box_3dr {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  position: relative;
  width: 49%;
  height: 100%;
  /* padding-bottom: 15px; */
margin-left: 3px ;
  margin-right: 3px;
}
.box_4 {
  width: 100%;
  /* height: 18px; */
  padding: 11px 10px 11px 10px;
  border-bottom: 1px solid #E6E6E6;
}
.thumbnail_21 {
  width: 18px;
  height: 18px;
}
.text_19 {
  /* width: 97px; */
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(34, 35, 39, 1);
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin: 0 0 0 11px;
}
.image_1 {
  width:14px;
  height: 14px;
  /* margin-left: 51px; */
}
.thumbnail_22 {
  width: 14px;
  height: 14px;
  margin: 3px 0 0 10px;
}
.image_2 {
  width: 248px;
  height: 1px;
  margin-top: 9px;
}
.box_5 {
  background-color: rgba(255, 255, 255, 1);
 /* width: 220px; */
  height: 118px;
  padding: 10px;
  /* margin: 12px 0 0 14px; */
}
.text_20 {
  /* width: 139px; */
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(34, 35, 39, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 8px;
  margin: 0 0 14px 0;
}
.box_6 {
  /* width: 126px; */
  height: 24px;
  margin: 0;
}
.text_21 {
  width: 60px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(34, 35, 39, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 8px;
  margin-top: 5px;
}
.text-wrapper_7 {
  background-color: rgba(255, 244, 235, 1);
  border-radius: 4px;
  height: 24px;
  border: 1px solid rgba(253, 127, 16, 1);
  width: 58px;
}
.text_22 {
  width: 42px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(253, 127, 16, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 46px;
  margin: 6px 0 0 8px;
}
.text_23 {
  width: 145px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(34, 35, 39, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 46px;
  margin: 8px 0 0 14px;
}
.text_24 {
  width: 152px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(34, 35, 39, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 46px;
  margin: 13px 0 0 14px;
}
.text_25 {
  width: 154px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(34, 35, 39, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 46px;
  margin: 13px 0 15px 15px;
}
.box_7 {
  box-shadow: 0px 0px 10px 0px rgba(209, 209, 209, 1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  position: absolute;
  left: 159px;
  top: 35px;
  width: 88px;
  height: 70px;
}
.image-text_2 {
  width: 58px;
  height: 15px;
  margin: 13px 0 0 16px;
}
.thumbnail_23 {
  width: 15px;
  height: 15px;
}
.text-group_2 {
  width: 27px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(61, 69, 91, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 80px;
  margin-top: 1px;
}
.image-text_3 {
  width: 59px;
  height: 17px;
  margin: 11px 0 14px 15px;
}
.thumbnail_24 {
  width: 16px;
  height: 17px;
}
.text-group_3 {
  width: 27px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(61, 69, 91, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 80px;
  margin-top: 2px;
}
.jiange{
margin-bottom: 3px;
align-items: center;
}
</style>