<template>
  <div class="app-container">
    <div style="background-color: #fff;padding: 20px;border-radius: 10px;">
      <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;">
        <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;">
       <span style="margin-left: 10px;">人员管理</span>
      </p>
      <div style="background: #F3F3F3;padding: 20px 15px; padding-bottom: 0;margin-bottom: 20px;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
          <el-row>
            <!-- <el-col :span="24">
              <el-form-item label="创建时间:" prop="postCode">
               <el-date-picker
                     v-model="queryParams.value1"
                     type="date"
                     placeholder="选择日期">
              </el-date-picker>
              <span style="margin: 0  10px;">至</span>
              <el-date-picker
                     v-model="queryParams.value1"
                     type="date"
                     placeholder="选择日期">
              </el-date-picker>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="姓名" prop="residentName">
                        <el-input
                          v-model="queryParams.residentName"
                          placeholder="请输入姓名"
                          clearable
                          @keyup.enter.native="handleQuery"
                        />
                </el-form-item>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="门牌号" prop="houseId">
                        <el-select v-model="queryParams.houseId" placeholder="请选择门牌号" >
                          <el-option
                           @click.native="itneg(dict)"
                            v-for="dict in houseInfoLise"
                            :key="dict.houseId"
                            :label="dict.detailedAddress"
                            :value="dict.houseId"
                          />
                        </el-select>
                      </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="与户主关系" prop="residentRelationship">
                        <el-select v-model="queryParams.residentRelationship" placeholder="请选择居住人员与户主" clearable>
                          <el-option
                            v-for="dict in dict.type.relationship_householder"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                      </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="性别" prop="residentGender">
                        <el-select v-model="queryParams.residentGender" placeholder="请选择性别" clearable>
                                  <el-option
                                    v-for="dict in dict.type.gender"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                  />
                                </el-select>
                      </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="butt bnjle">
                  <el-button type="primary" size="mini"   @click="handleQuery">搜索</el-button>
                  <el-button  size="mini"  @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>

        </el-form>
      </div>


      <div class="casr"  >
              <el-row :gutter="10" class="mb8">
                <!-- <el-col :span="1.5">
                  <div style="font-weight: bold;font-size: 14px;color: #343434; display: flex;align-items: center;">
                    当夜全选
                  </div>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['wuYe:residentInfo:add']"
                  >添加</el-button>
                </el-col>
                <!-- <el-col :span="1.5">
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['system:post:edit']"
                  >修改</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['system:post:remove']"
                  >删除</el-button>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['wuYe:residentInfo:export']"
                  >导出</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
              </el-row>
              <div class=" infinite-list" :style="dynamicStyle">
                <el-row :gutter="10" v-if="residentInfoList.length !=0" style="width:100%;margin-left: 0;">
                  <el-col :span="6" v-for="(item,index) in residentInfoList" :key="index"  >
                    <!-- @click="isac(item)" -->
                    <div v-if="isshoe"  :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 4px;margin-bottom: 10px;">
                      <div style="display: flex; align-items: center;padding: 15px 20px; position: relative;">
                        <img src="../../../assets/images/icon_htgl_rygl_tx_nv.png" alt="" style="width: 50px;height: 50px;border-radius: 50%;" v-if="item.residentGender == 2">
                        <img src="../../../assets/images/icon_htgl_rygl_tx_nan.png" alt="" style="width: 50px;height: 50px;border-radius: 50%;" v-if="item.residentGender == 1">
                        <span style="font-weight: bold;font-size: 16px;color: #161616;margin-left: 15px;">{{item.residentName == null?'暂无数据' : item.residentName}}</span>
                        <!-- <span style="font-weight: 500;font-size: 14px;color: #666666;margin: 0 7px 0 15px;">{{item.yearsOld == null?'暂无数据' : item.yearsOld}}岁</span> -->
                        <span style="font-weight: 500;font-size: 14px;color: #666666;margin: 0 7px 0 15px;">{{item.residentGender == 1?'男' : item.residentGender == 2?'女' : '暂无数据'}}</span>
                        <img src="../../../assets/images/pic_htgl_rygl_yhlx_yzs.png" alt="" style="position: absolute;top:5px;right: 0;" v-if="item.isHouseholder == 'Y'">
                        <!-- <img src="../../../assets/images/pic_htgl_rygl_yhlx_zh.png" alt="" style="position: absolute;top:5px;right: 0;"> -->
                      </div>
                      <div class="goe renyuangs" style="padding: 0 20px;">
                        <p>{{"房\u2002屋\u2002号："}}{{item.detailedAddress == null?'暂无数据' : item.detailedAddress}}</p>
                        <p>
                          联系方式：{{item.residentPhone == null?'暂无数据' : item.residentPhone}}
                        </p>
                        <p>
                          身份证号：{{item.residentIdCard == null?'暂无数据' : item.residentIdCard}}
                        </p>
                        <div style="margin-top: 10px;">
                          与户主关系： <dict-tag :options="dict.type.relationship_householder" :value="item.residentRelationship"/>
                        </div>
                      </div>
                      <div class="bortt tongty" style="justify-content: space-between;">
                        <p style="cursor: pointer;"><span  v-hasPermi="['wuYe:residentInfo:edit']" @click="handleUpdate(item)">修改</span>  </p>
                        <!-- <span @click="handleUpdatef(item)">查看</span> -->

                        <p v-hasPermi="['wuYe:residentInfo:remove']" style="border-left: 1px solid #DADADA;color:red;cursor: pointer;" @click="handleDelete(item)">删除</p>
                      </div>
                      <img v-if="item.isnum == true" src="../../../assets/images/icon_htgl_kp_gx.png" alt="" style="width: 35px;height: 35px;position: absolute;bottom: 0;right: 0;">
                    </div>
                  </el-col>
                </el-row>
                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;" v-if="residentInfoList.length ==0">
                   <img   src="../../../assets/images/zwshjbig.png" alt="" style="">
                </div>
              </div>
      </div>



      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="门牌号" prop="houseId">
                   <el-select style="width: 100%;" v-model="form.houseId" placeholder="请选择门牌号" clearable>
                     <el-option
                     style="width:100%"
                      @click.native="itnegadd(dict)"
                       v-for="dict in houseInfoLise"
                       :key="dict.houseId"
                       :label="dict.detailedAddress"
                       :value="dict.houseId"
                     />
                   </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16" class="ngeshimg" >
                <el-form-item label="身份证号" prop="residentIdCard" style="position: relative;">
                  <el-input @blur="shiegw" v-model="form.residentIdCard" placeholder="请输入身份证号码" />
                   <template style="">
                     <image-uploadshib @uploadedSuccessfully="uploadedSuccessfully" :typeg = "1" :limit="1" v-model="form.idCardBack"/>
                   </template>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="姓名" prop="residentName">
                  <el-input v-model="form.residentName" placeholder="请输入姓名" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="性别" prop="residentGender">
                  <el-select style="width: 100%;" v-model="form.residentGender" placeholder="请选择性别" clearable>
                            <el-option
                              v-for="dict in dict.type.gender"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否户主" prop="isHouseholder">
                 <el-select style="width: 100%;" v-model="form.isHouseholder" placeholder="请选择是否户主" clearable>
                           <el-option
                             v-for="dict in dict.type.sys_yes_no"
                             :key="dict.value"
                             :label="dict.label"
                             :value="dict.value"
                           />
                 </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="手机号码" prop="residentPhone">
                  <el-input v-model="form.residentPhone" placeholder="请输入手机号码" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker clearable
                  style="width:100%"
                              v-model="form.residentBirthday"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择居住人员出生日期">
                            </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="人员面貌" prop="residentAppearance">
                          <el-select style="width: 100%;" v-model="form.residentAppearance" placeholder="请选择居住人员面貌">
                            <el-option
                              v-for="dict in dict.type.affiliation_personnel"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            ></el-option>
                          </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="与户主的关系" prop="residentRelationship">
                          <el-select style="width: 100%;" v-model="form.residentRelationship" placeholder="请选择居住人员与户主的关系">
                            <el-option
                              v-for="dict in dict.type.relationship_householder"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            ></el-option>
                          </el-select>
                        </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="工作单位" prop="residentEmployer">
                          <el-input v-model="form.residentEmployer" placeholder="请输入居住人员工作单位" />
                        </el-form-item>
              </el-col>
              <el-col :span="8" class="shefnze">
                <el-form-item label="身份证国徽面" prop="idCardFront">
                  <image-upload v-model="form.idCardFront"/>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="shefnze">
                <el-form-item label="头像" prop="facePhoto">
                  <image-upload v-model="form.facePhoto" :limit="1"/>
                </el-form-item>
              </el-col>
              <el-col>
               <!-- <el-col :span="24"> -->


               <!-- </el-col> -->
              </el-col>
            </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";
import { listResidentInfo, getResidentInfo, delResidentInfo, addResidentInfo, updateResidentInfo } from "@/api/wuguan/landlord";
import { listHouseInfo,listNoPage, getHouseInfo, delHouseInfo, addHouseInfo, updateHouseInfo } from "@/api/wuguan/houseInfo";
import 'videojs-flash'
export default {
   name: "ResidentInfo",
    dicts: ['affiliation_personnel', 'sys_yes_no', 'gender', 'relationship_householder'],
  data() {
    return {
     // 遮罩层
           loading: true,
           // 选中数组
           ids: [],
           // 非单个禁用
           single: true,
           // 非多个禁用
           multiple: true,
           // 显示搜索条件
           showSearch: true,
           // 总条数
           total: 0,
           // 业主管理表格数据
           residentInfoList: [],
           houseInfoLise:[],
           // 弹出层标题
           title: "",
           // 是否显示弹出层
           open: false,
           // 查询参数
           queryParams: {
             pageNum: 1,
                    pageSize: 10,
                    houseId: null,
                    userId: null,
                    detailedAddress: null,
                    residentName: null,
                    residentIdCard: null,
                    residentBirthday: null,
                    residentPhone: null,
                    residentGender: null,
                    residentRelationship: null,
                    isHouseholder: null,
                    residentEmployer: null,
                    residentAppearance: null,
           },
      // 表单参数
      form: {},
      // 表单校验
      // 表单校验
            rules: {
             houseId: [
                       { required: true, message: "关联房屋信息不能为空", trigger: "blur" }
                     ],
            residentName: [
                      { required: true, message: "不能为空", trigger: "blur" }
                    ],
            residentPhone:[
                      { required: true, message: "不能为空", trigger: "blur" },
                      {
                   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                   message: "请输入正确的手机号码",
                    trigger: "blur"
                   }
                    ],
            residentIdCard:[
              { required: true, message: "不能为空", trigger: "blur" },
                 {
              pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: "请输入正确的身份证号码",
               trigger: "blur"
              }
            ]

            },
      activeName:'first',
      videoState: false, // 视频播放状态
      poster:true,
      controls:true,
      videoData:{},
       player: null,
       isshoe:true,
       tableMaxHeight:'200',
    };
  },
  computed: {
    dynamicStyle() {
      return {
        overflow:'auto',
        height: this.tableMaxHeight+ 'px',
        paddingTop:'10px'
      }
    }
    },
  created() {
    if(this.$route.query.id != undefined){
       this.queryParams.houseId = this.$route.query.id  - 0
    }
    this.getList();
    this.getListhouvr()
 window.onresize = () => {
 	      this.changeTableMaxHeight()
 	    }
 	    this.changeTableMaxHeight()
 },
 mounted() {
 	window.onresize = () => {
 	          this.changeTableMaxHeight()
 	        }
 	        this.changeTableMaxHeight()
 },
  beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
    },
  methods: {
    /** 查询岗位列表 */
    getList() {
   this.loading = true;
      listResidentInfo(this.queryParams).then(response => {
        this.residentInfoList  = response.rows;
        this.residentInfoList .filter(rou=>{
          rou.isnum = false
        })
        this.total = response.total;
        this.loading = false;
      });
    },
    getListhouvr() {
       listNoPage().then(response => {
         this.houseInfoLise  = response.rows;
       });
     },
     shiegw(val){
       console.log(val)
       	var _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
       	// var _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
       	// 校验身份证：
       	// return (_IDRe18.test(idNo) || _IDre15.test(idNo)) ? true : false;
        if(_IDRe18.test(this.form.residentIdCard) == true){
          let sge = this.getInfo( this.form.residentIdCard)
          this.form.yearsOld = sge.age
          this.form.residentGender = sge.sex + ''
          this.form.residentBirthday = sge.birth
          console.log(sge)
        }

     },
     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
             }
           },
      getBirthday(idCard) {
              let birthday = "";
              if (idCard != null && idCard !== "") {
                if (idCard.length === 15) {
                  birthday = "19" + idCard.substr(6, 6);
                } else if (idCard.length === 18) {
                  birthday = idCard.substr(6, 8);
                }
                birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
              }
              return birthday;
            },

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

     }
   },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
   this.form = {
           residentId: null,
           houseId: null,
           userId: null,
           detailedAddress: null,
           residentName: null,
           residentIdCard: null,
           residentBirthday: null,
           residentPhone: null,
           residentGender: null,
           residentRelationship: null,
           isHouseholder: 'Y',
           residentEmployer: null,
           residentAppearance: null,
           createBy: null,
           createTime: null,
           updateBy: null,
           updateTime: null,
           remark: null
         };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {


      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.houseId = null
      this.queryParams.pageNum = 1;
      this.queryParams.detailedAddress =null
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.residentId)
     this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      if(this.$route.query.id != undefined){
         this.form.houseId = this.$route.query.id  - 0
      }
      this.open = true;
       this.title = "添加居住人员";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
        this.reset();
             const residentId = row.residentId || this.ids
             getResidentInfo(residentId).then(response => {
               this.form = response.data;
               this.title = "修改居住人员";
               this.form.residentGender  = this.form.residentGender + ''
               this.open = true;
             });
    },

    /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
           if (valid) {
                     if (this.form.residentId != null) {
                       updateResidentInfo(this.form).then(response => {
                         this.$modal.msgSuccess("修改成功");
                         this.open = false;
                         this.getList();
                       });
                     } else {
                       addResidentInfo(this.form).then(response => {
                         this.$modal.msgSuccess("新增成功");
                         this.open = false;
                         this.getList();
                       });
              }
            }
          });
        },
    /** 删除按钮操作 */
        handleDelete(row) {
          const residentIds = row.residentId || this.ids;
          this.$modal.confirm('是否确认删除居住人员信息的数据项？').then(function() {
            return delResidentInfo(residentIds);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wuYe/residentInfo/export', {
              ...this.queryParams
            }, `residentInfo_${new Date().getTime()}.xlsx`)
    },

      handleClick(){

      },
    isac(val){
      console.log(5,val)
      val.isnum = !val.isnum
      this.isshoe = false
      this.isshoe = true
    },
    itneg(item){
      this.queryParams.houseId = item.houseId
      this.queryParams.detailedAddress = item.detailedAddress
    },
    itnegadd(item){
      this.form.houseId = item.houseId
      this.form.detailedAddress = item.detailedAddress
    },
    // 获取屏幕高度
    showFilterForm () {
          this.filterActive = !this.filterActive
          this.changeTableMaxHeight()
        },

        changeTableMaxHeight () {
          let height = document.body.offsetHeight // 网页可视区域高度
          // if (this.filterActive) {
          //   this.tableMaxHeight = height - 320
          // } else {
            this.tableMaxHeight = height - 150
          // }
          console.log(height)
        }

  }
};
</script>
<style  lang="scss">
  .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;
    }
  }

  .bnjle{
    margin-left: 20px;
  }
  .butt{
    .el-button--small{
      padding: 9px 23px !important;
      font-size: 14px;
    }
  }
  .casr{
    .el-tabs__item.is-active{
      color: #196CFF;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item{
      padding: 0  30px !important;
    }
  }
  .el-table .el-table__header-wrapper th{
    background-color:#F5F6F8;
    color:#343434;
  }
  .el-table{
    color:#343434;
  }
</style>
<style scoped lang="scss">
  .goe{
    p{
      margin: 0;
      font-weight: 800;
      font-size: 16px;
      color: #161616;
      margin-top: 10px;
      margin-bottom: 3px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:1; //显示的行
    }
    p:nth-child(2){

    }
  }
  .ingwe{
    border: 2px solid #196CFF;
  }
  .renyuangs{
    p{
      font-weight: 500;
      font-size: 14px;
      color: #161616;
      padding: 0;
    }
    div{
      font-weight: 500;
      font-size: 14px;
      color: #161616;
      padding: 0;
      display: flex;
    }
  }
  .tongty{
    display: flex;
    align-items: center;
  }
  .bortt{
    border-top: 1px solid #DADADA;
    margin-top: 15px;

    p{
      margin: 0;
      font-weight: bold;
      font-size: 14px;
      color: #5F8BF4;
      width:50%;
      padding: 10px;
      text-align: center;
    }
  }
  </style>


