您现在的位置是：首页 >技术教程 >vue知识补充网站首页技术教程

1.列的样式

第一种：一列一列的写

<div class="house-detail">
      <div class="static-container">
        <form-item-static label="业主姓名">{{ baseData.mainOwnerName }}</form-item-static>
        <form-item-static label="账户余额" class="color-primary">{{ $filters.currency(baseData.balance) }}元</form-item-static>
        <form-item-static label="不动产证坐落">{{ baseData.bdcAddress }}</form-item-static>
      </div>
      <div class="static-container">
        <form-item-static label="联系电话">{{ baseData.phoneNo }}</form-item-static>
        <form-item-static label="冻结金额" class="color-primary">{{ $filters.currency(baseData.frozen) }}元</form-item-static>

        <!-- <form-item-static label="利息总额" class="color-primary">{{ baseData.accrTotalAmount }}（元）</form-item-static> -->
        <form-item-static v-if="isShowSubHouseRemark === 'Y'" label="备注">{{ baseData.subHouseRemark }}</form-item-static>
      </div>
      <div class="static-container">
        <form-item-static label="公众服务">{{ baseData.openInternetName }}</form-item-static>
        <form-item-static label="可用金额" class="color-primary">{{ $filters.currency(baseData.usableBalance) }}元</form-item-static>
        <form-item-static  label="状态">已销户</form-item-static>

        <!--
        <form-item-static label="企业交存金额">0.00（元）</form-item-static>
        -->
      </div>
      <div class="static-container">
        <form-item-static label="初交日期">{{ baseData.firstDepDate }}</form-item-static>
        <form-item-static label="是否企业垫交">{{ baseData.isPrePayName }}</form-item-static>
        <form-item-static  label="销户日期">{{ baseData.cancelTime }}</form-item-static>
      </div>
      <div class="static-container">
        <form-item-static label="初交票号" class="color-primary">{{ baseData.firstDepVoucherNo }}</form-item-static>
      </div>
    </div>

.house-detail {
  width: 95%;
  display: flex;
  justify-content: space-between;
}

封装的样式：

弊端：如果某一行很长，就会无限往后挤

第二种：自定义

    <div class="flexs flex-wrap house-detail-box">
      <div class="static-container"><form-item-static label="业主姓名">{{ baseData.mainOwnerName }}</form-item-static></div>
      <div class="static-container"><form-item-static label="联系电话">{{ baseData.phoneNo }}</form-item-static></div>
      <div class="static-container"><form-item-static label="公众服务">{{baseData.openInternetName}}</form-item-static></div>
      <div class="static-container"><form-item-static label="初交日期">{{baseData.firstDepDate}}</form-item-static></div>
      <div class="static-container"><form-item-static label="初交票号" class="color-primary">{{ baseData.firstDepVoucherNo }}</form-item-static></div>
      <div class="static-container"><form-item-static label="账户余额" class="color-primary">{{ $filters.currency(baseData.balance) }}元</form-item-static></div>
      <div class="static-container"><form-item-static label="冻结金额" class="color-primary">{{ $filters.currency(baseData.frozen) }}元</form-item-static></div>
      <div class="static-container"><form-item-static label="可用金额" class="color-primary">{{ $filters.currency(baseData.usableBalance) }}元</form-item-static></div>
      <div class="static-container" style='width: 40%'><form-item-static label="是否企业垫交">{{baseData.isPrePayName}}</form-item-static></div>
      <div class="static-container" style='width: 40%'><form-item-static ellipsis label="不动产证坐落">{{ baseData.bdcAddress }}</form-item-static></div>

        <!-- <form-item-static label="利息总额" class="color-primary">{{ baseData.accrTotalAmount }}（元）</form-item-static> -->
<!--      <div class="static-container"><form-item-static v-if="isShowSubHouseRemark === 'Y'" label="备注">{{baseData.subHouseRemark}}</form-item-static></div>-->
      <div class="static-container"><form-item-static  label="状态">已销户</form-item-static></div>
      <div class="static-container"><form-item-static  label="销户日期">{{ baseData.cancelTime }}</form-item-static></div>
    </div>

.house-detail-box {
  width: 100%;
  .static-container {
    width: 20%;
    padding: 0 30px;
    line-height: 20px;
  }
}

优点：在原有css样式封装的基础初上，line-height: 20px;覆盖原来的样式调整高度，还有间隔距离padding: 0 30px;规定一行100%，每一个元素20%，规定flexs布局，wrap是如果超过100%就自动换行。可以在检查的style中即时修改并看到效果。使用ellipsis 和 style=‘width: 40%’ 控制长度和省略号

方法三：layout布局

    <bv-row  :layout="4" type="flex" class="item-static flex-wrap">
      <bv-col>
        <form-item-static label="业主姓名">{{ baseData.mainOwnerName }}</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static label="联系电话">{{ baseData.phoneNo }}</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static label="公众服务">{{baseData.openInternetName}}</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static label="初交日期">{{baseData.firstDepDate}}</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static label="初交票号" class="color-primary">{{ baseData.firstDepVoucherNo }}</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static label="账户余额" class="color-primary">{{ $filters.currency(baseData.balance) }}元</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static label="冻结金额" class="color-primary">{{ $filters.currency(baseData.frozen) }}元</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static label="可用金额" class="color-primary">{{ $filters.currency(baseData.usableBalance) }}元</form-item-static>
      </bv-col>
      <bv-col layout="2">
        <form-item-static label="是否企业垫交">{{baseData.isPrePayName}}</form-item-static>
      </bv-col>
      <bv-col layout="2">
        <form-item-static label="不动产证坐落">{{ baseData.bdcAddress }}</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static  label="状态">已销户</form-item-static>
      </bv-col>
      <bv-col>
        <form-item-static  label="销户日期">{{ baseData.cancelTime }}</form-item-static>
      </bv-col>
    </bv-row>

.item-static {
  padding: 5px 20px 5px 25px;
  margin-top: 15px;
}

弊端：需要被24整除，不能分成5列，elementui中 ：span 同理
优点：封装好的容易使用

flex布局：https://blog.csdn.net/niezhilang/article/details/119181163