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

<template>
  <div class="app-container">
    <el-row :gutter="10" >
      <!--部门数据-->
      <el-col :span="4" >
        <div style="background-color: #fff;padding: 10px;border-radius: 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>
          <div class=" infinite-list" style="overflow:auto;height:  93vh" >
            <div class="head-container">
              <el-input
                v-model="deptName"
                placeholder="请输入部门名称"
                clearable
                size="small"
                prefix-icon="el-icon-search"
                style="margin-bottom: 20px"
              />
            </div>
            <div class="head-container">
              <el-tree
                            ref="tree"
                            :data="deptOptions"
                            :props="defaultProps"
                            :expand-on-click-node="false"
                            :filter-node-method="filterNode"
                            default-expand-all
                            :highlight-current="true"
                            @node-click="handleNodeClick"
                            class="custom-tree"
                          >
                            <el-tooltip
                              :disabled="showTitle"
                              effect="dark"
                              :content="tooltipTitle"
                              placement="left-start"
                              slot-scope="{node,data}"
                            >
                              <span class="span-ellipsis"
                              style="font-size: 14px; font-weight: 400;"
                              @mouseover="onShowNameTipsMouseenter">
                                {{node.label}}
                              </span>
                            </el-tooltip>
                          </el-tree>
              <!-- <el-tree
                :data="deptOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                default-expand-all
                highlight-current
                @node-click="handleNodeClick"
              /> -->
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span=" ishsouetan == 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="80px">
                          <el-row>
                              <el-col :span="ishsouetan == false? 7 :  10">
                               <el-form-item label="设备名称" prop="equipmentName" style="display: flex;">
                                       <el-input
                                       style="width: 100%;"
                                         v-model="queryParams.equipmentName"
                                         placeholder="请输入设备名称"
                                         clearable
                                         @keyup.enter.native="handleQuery"
                                       />
                                     </el-form-item>
                              </el-col>

                           <!-- <el-col :span="6">
                              <el-form-item label="运行状态" prop="runState" style="display: flex;">
                                     <el-select style="width: 120px;"  v-model="queryParams.manualType" placeholder="请选择运行状态" clearable>
                                        <el-option
                                        v-for="dict in dict.type.sys_job_status"
                                                                            :key="dict.value"
                                                                            :label="dict.label"
                                                                            :value="dict.value"
                                                                          />
                                                                        </el-select>
                                    </el-form-item>

                            </el-col> -->
                            <el-col :span="4" class="bhhsbu">
                              <div>
                                <el-form-item class="butt"  style="border: 0;display: flex; margin: 0;margin-top: 5px;">
                                  <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>
                              </div>
                            </el-col>
                          </el-row>

                        </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:equipmentManage:add']"
                >新增</el-button>
                <el-button
                  type="danger"
                  plain
                  size="mini"
                  :disabled="singleg"
                  @click="handleDeletej"
                  v-hasPermi="['manage:equipmentManage:remove']"
                >删除</el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="1.5">

          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['manage:equipmentManage:edit']"
            >修改</el-button>
          </el-col> -->
          <el-col :span="1.5">

          </el-col>
        </el-row>
        <div class=" infinite-list" :style="dynamicStyle"  v-if="inhgeshwe">
          <div  v-masonry   :class=" ishsouetan == false? 'imghse hyeg' : 'hyeg'"   style="display: flex;flex-wrap: wrap;justify-content: space-between; " >
            <div v-if="inhgeshwe" v-masonry-tile  :class=" ishsouetan == false? 'box_3dr zuihsoue flex-col' : 'box_3dr  flex-col'" :style=" item.equipmentImage ==null? ' height:240px; margin-bottom: 10px;' : 'margin-bottom: 10px;' "  v-for="(item,index ) in equipmentManageList" :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; cursor: pointer;">
                              <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.equipmentName}}</span>
                            </div>
                            <div>
                              <img
                                class="image_1"
                                referrerpolicy="no-referrer"
                                @click="handleUpdate(item)"
                                v-hasPermi="['manage:equipmentManage:edit']"
                                src="../../../assets/images/icon_lby_gdtc_bj.png"
                              />
                              <img
                                class="thumbnail_22"
                                @click="handleDelete(item)"
                                v-hasPermi="['manage:equipmentManage:remove']"
                                referrerpolicy="no-referrer"
                                 src="../../../assets/images/icon_lby_gdtc_del.png"/>
                            </div>
                          </div>
                          <div class="box_5 flex-col" v-if="item.equipmentImage != null">
                            <image-preview  :src="item.equipmentImage" :width="100 +'%'" :height="100 + '%'"  style=""/>
                          </div>
                          <div style="padding: 10px;">
                            <span class="text_20">设备编号：{{item.equipmentNum}}</span>
                            <div class="box_6 flex-row " style="align-items: center;">
                              <span class="text_21">设备类型： </span>
                              <div style="margin-left: 12px;">
                                <dict-tag :options="dict.type.shebie_type" :value="item.equipmentType"/>
                              </div>
                            </div>
                            <div class="box_6 flex-row " style=" margin-bottom: 10px; align-items: center;">
                              <span class="text_21">设备地址： </span>
                              <el-tooltip class="item" effect="dark" :content="item.equipmentAddress" 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.equipmentAddress}}
                              </div>
                              </el-tooltip>
                            </div>
                            <!-- <span class="text_20">设备地址：192.168.1.1</span> -->
                            <span class="text_20" >设备区域：{{item.equipmentRegion}}</span>
                            <div style="margin-top: 10px;margin-bottom: 10px;">
                              <span class="text_20">安装时间：{{item.equipmentTime}}</span>
                            </div>
                            <div class="box_6 flex-row " style="align-items: center;">
                              <span class="text_21">设备状态： </span>
                              <div style="margin-left: 12px;">
                                <dict-tag :options="dict.type.sys_job_status" :value="item.runState"/>
                              </div>
                            </div>
                          </div>

                        </div>

          </div>
          <div v-if='equipmentManageList == 0'>
            <el-empty :image-size="200"></el-empty>
          </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="ishsouetan">
       <div style="background-color: #fff; border-radius: 4px;padding: 10px;" class="shenbfe">
         <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">
               <el-form-item label="设备编号" prop="equipmentNum">
                         <el-input v-model="form.equipmentNum" placeholder="请输入设备编号" />
                       </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="设备名称" prop="equipmentName">
                         <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
                       </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="设备区域" prop="equipmentRegion">
                         <el-input v-model="form.equipmentRegion" placeholder="请输入设备区域" />
                       </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="设备地址" prop="equipmentAddress">
                         <el-input v-model="form.equipmentAddress" placeholder="请输入设备地址" />
                       </el-form-item>
             </el-col>

             <el-col :span="24">
                <el-form-item label="安装时间" prop="equipmentTime">
                         <el-date-picker style="width: 100%;" clearable
                           v-model="form.equipmentTime"
                           type="date"
                           value-format="yyyy-MM-dd"
                           placeholder="请选择安装时间">
                         </el-date-picker>
                       </el-form-item>
             </el-col>
             <el-col :span="24">
                <el-form-item label="运行状态" prop="runState">
                  <el-select style="width: 100%;" v-model="form.runState" placeholder="请选择运行状态" >
                       <el-option
                         v-for="dict in dict.type.sys_job_status"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value"
                          />
                       </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="24">
                <el-form-item label="设备类型" prop="equipmentType">
                          <el-select style="width: 100%;"  v-model="form.equipmentType" placeholder="请选择设备类型">
                            <el-option
                              v-for="dict in dict.type.shebie_type"
                              :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="设备ip" prop="equipmentIp">
                         <el-input v-model="form.equipmentIp"  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" class="shewsfimg">
               <el-form-item label="设备图片" prop="equipmentImage">
                         <image-upload v-model="form.equipmentImage"/>
                       </el-form-item>
             </el-col>

           </el-row>
         </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 { listEquipmentManage, getEquipmentManage, delEquipmentManage, addEquipmentManage, updateEquipmentManage } from "@/api/manage/equipmentManage"
import { treeselect,listDept  } from "@/api/system/dept";
// import VueMasonry from 'vue-masonry';
import Masonry from "masonry-layout";
import Waterfall from 'vue-waterfall-plugin'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "EquipmentManage",
  dicts: ['sys_job_status', 'sys_notice_type','shebie_type'],
  components: { Treeselect ,Waterfall},
  data() {
    return {
      // 遮罩层
      // 遮罩层
            loading: true,
            defaultProps: {
              children: "children",
              label: "deptName",
              value:'deptId'
            },
            tooltipTitle: "",
            showTitle: true,
            currentNodeId: "",
            singleg:true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            deptName:null,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 设备管理表格数据
            equipmentManageList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 8,
              equipmentNum: null,
              equipmentName: null,
              equipmentType: null,
              equipmentAddress: null,
              equipmentRegion: null,
              equipmentTime: null,
              equipmentImage: null,
              runState: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
              equipmentNum: [
                        { required: true, message: "不能为空", trigger: "blur" }
                      ],
              equipmentName: [
                        { required: true, message: "不能为空", trigger: "blur" }
                      ],
              equipmentType: [
                        { required: true, message: "不能为空", trigger: "blur" }
                      ],
              equipmentIp: [
                        { required: true, message: "不能为空", trigger: "blur" }
                      ],
              equipmentAddress: [
                        { required: true, message: "不能为空", trigger: "blur" }
                      ],

            },
      tableMaxHeight:'480',
      ghwe:{},
      // 部门树选项
      deptOptions: undefined,
      ishsouetan:false,
      isgsow:true,
      manid:0,
      inhgeshwe:true
    }
  },
  created() {
    this.getList()
    this.getTreeselect()
   window.onresize = () => {
        	      this.changeTableMaxHeight()
        	    }
        	    this.changeTableMaxHeight()
      },
      computed: {
        dynamicStyle() {
          return {
            overflow:'auto',
            height:  this.tableMaxHeight + 'px',
          }
        }
        },
      mounted() {

      	window.onresize = () => {
      	          this.changeTableMaxHeight()
      	        }
      	        this.changeTableMaxHeight()
      },
  methods: {
    onShowNameTipsMouseenter(e){
            this.tooltipTitle = e.target.innerText;
            this.showTitle = false;
        },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      let qure={pageNum:1,pageSize:1000}
      listDept().then(response => {
        this.deptOptions = this.handleTree(response.data, "deptId")
        this.loading = false
      })
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.deptId;
      this.ghwe.deptName = data.deptName
      this.ghwe.deptId = data.deptId
      this.handleQuery();
    },
    /** 查询设备管理列表 */
        getList() {
          this.loading = true
          listEquipmentManage(this.queryParams).then(response => {
            this.equipmentManageList = response.rows
            this.equipmentManageList.filter(rou=>{
              rou.isnum = false
            })
            this.total = response.total
            this.loading = false
            this.inhgeshwe = true
          })
        },
        // 取消按钮
        cancel() {
          this.open = false
           this.ishsouetan = false
            this.inhgeshwe = false
           this.queryParams.pageSize = 9
           // this.created()
           this.getList()
           // this.inhgeshwe = true''
          this.reset()
        },

        // 获取当前时间
        gettime(){
          let nowDate = new Date()
          				  let date = {
          				    year: nowDate.getFullYear(),
          				    month: nowDate.getMonth() + 1,
          				    date: nowDate.getDate()
          				  }
                     if (parseInt(date.month) < 10) {
                        date.month = '0' + date.month
                      }
          				   if (parseInt(date.date) < 10) {
          				      date.date = '0' + date.date
          				    }
                      let nghe = date.year + '-' + date.month + '-' + date.date
          				  return nghe

        },
        // 表单重置
        reset() {
          this.form = {
            equipmentId: null,
            equipmentNum: null,
            equipmentName: null,
            equipmentType: null,
            equipmentAddress: null,
            equipmentRegion: null,
            equipmentTime: this.gettime(),
            equipmentImage: null,
            runState: '0',
            delFlag: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            remark: null,
            equipmentIp:null
          }
          this.resetForm("form")
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1
          this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm")
          this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          // console.log(selection)
          this.isgsow = false
          selection.isnum = !selection.isnum
          this.isgsow = true
          let nhseg= []
          this.equipmentManageList.filter(rou=>{
            if(rou.isnum == true){
              nhseg.push(rou)
            }
          })
          console.log(nhseg)
          this.ids = nhseg.map(item => item.equipmentId)
          console.log(this.ids,nhseg)
          this.single = nhseg.length!==1
          this.multiple = !nhseg.length
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset()
          console.log(this.ghwe)
          if(this.ghwe.deptId == undefined){
            this.$message.error('请先选择部门');
            // this.$modal.msgSuccess("请先选择部门")
            return
          }
          this.inhgeshwe = false
          this.queryParams.pageSize = 10
          this.getList()
          this.ishsouetan = true
          this.title = "添加设备管理"
          this.inhgeshwe = true
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset()
          const equipmentId = row.equipmentId || this.ids
          this.queryParams.pageSize = 10
          this.getList()
           this.inhgeshwe = false
          getEquipmentManage(equipmentId).then(response => {
            this.form = response.data
            this.title = "修改设备管理"
            this.ishsouetan = true
             this.inhgeshwe = true
          })
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.equipmentId != null) {
                updateEquipmentManage(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功")
                  this.open = false
                  this.queryParams.pageSize = 9
                  this.getList()
                  this.ishsouetan = false
                })
              } else {
               this.form.deptName =  this.ghwe.deptName
                this.form.deptId =  this.ghwe.deptId
                addEquipmentManage(this.form).then(response => {
                  this.$modal.msgSuccess("新增成功")
                  this.open = false
                  this.queryParams.pageSize = 9
                  this.getList()
                  this.ishsouetan = false
                })
              }
            }
          })
        },
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用"
      updateEquipmentManage(row).then(response => {
        this.$modal.msgSuccess("操作成功")
        row.status = row.status === "0" ? "1" : "0"
        this.getList()

      })
    },
    handleDeletej(){
      delEquipmentManage(this.manid).then(response => {
        this.$modal.msgSuccess("操作成功")
        this.getList()
      })
    },
    /** 删除按钮操作 */
        handleDelete(row) {
          const equipmentIds = row.equipmentId || this.ids
          this.$modal.confirm('是否确认删除设备管理数据项？').then(function() {
            return delEquipmentManage(equipmentIds)
          }).then(() => {
            this.getList()
            this.$modal.msgSuccess("删除成功")
          }).catch(() => {})
        },
         handleExport() {
              this.download('manage/equipmentManage/export', {
                ...this.queryParams
              }, `equipmentManage_${new Date().getTime()}.xlsx`)
            },
    // 获取屏幕高度
                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" >
  .bhhsbu{
    .el-form-item__content{
      display: flex;
    }
  }
  .shewsfimg{
    .el-upload--picture-card{
      width: 90px;
      height: 90px;
      line-height:88px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width: 90px;
      height: 90px;
    }
  }
  .shenbfe{
    .el-form-item{
      margin-bottom: 12px;
    }
  }
</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: 5px ;
  margin-right: 5px; */
}
.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: 8px 0 0 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;
}
.zuihsoue{
  width: 32.2%;
  margin: 0 5px;
  justify-content: flex-start !important;
}
.imghse{
  justify-content: flex-start !important;
}
.hyeg{
  height: 100% !important;
}
</style>