html—table（房屋楼层显示以及根据不同类型进行背景颜色区分）

萌新之路

于 2022-06-09 18:27:27 发布

阅读量875

点赞数 1

分类专栏： vue 文章标签： html css3 css

本文链接：https://blog.csdn.net/qq_44162778/article/details/125208518

版权

效果图：
在这里插入图片描述
效果视频：

Video_2022-06-09_181614

弹窗组件：

<template>
<!--  弹窗组件-->
  <!--弹出的弹窗内容-->
  <el-dialog
    :visible.sync="dialogVisible"
    :width="dialogWidth+'px'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false">
<!--    关闭按钮-->
    <div class="closeBtn" @click="handleClose"></div>
    <div class="dialogTitle" :style="'width:'+(dialogWidth-60)+'px'">
<!--      箭头图片-->
      <p></p>
<!--      箭头下的蓝色图案-->
      <p></p>
      <p>{
   {
   dialogTitle}}</p>
    </div>

<!--    中间内容-->
   <div class="dialogContent"  :style="'width:'+(dialogWidth-60)+'px'">
     <slot></slot>
   </div>
  </el-dialog>
</template>

<script>
export default {
   
  name: 'Pop-up',
  props:{
   
    //对话框宽度
    dialogWidth:{
   
      type:String,
      default:''
    },
    dialogTitle:{
   
      type:String,
      default:""
    },
    dialogVisible:{
   
      type:Boolean,
      default:false,
    }
  },
  data(){
   
    return{
   
    }
  },
  methods:{
   
    handleClose(){
   
      this.dialogVisible = false;
    },
  }
}
</script>
<style scoped>
.closeBtn{
   
  width: 36px;
  height: 36px;
  background-size: cover;
  background-image: url("../../assets/pop_img/icon／关闭.png");
  position: absolute;
  right: -17px;
  top: -16px;
  cursor: pointer;
}
.dialogTitle{
   
  width: 560px;
  height: 44px;
  background: #0F2B3F;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-left: 9px;
  margin-top: -40px;
  position: relative;
  overflow: hidden;
}
.dialogTitle>p{
   
  display: inline-block;
}
.dialogTitle>p:nth-child(1){
   
  width: 25px;
  height: 25px;
  background-image: url("../../assets/pop_img/Frame.png");
  vertical-align: middle;
  margin-left: 11px;
  margin-top: -4px;
}
.dialogTitle>p:nth-child(2){
   
  width: 6px;
  height: 48px;
  background: #2CA6FF;
  opacity: 1;
  transform:rotate(90deg);
  position: absolute;
  left: 17px;
  bottom: -10px;
  top: 4px;
  border-radius: 40px;
}
.dialogTitle>p:nth-child(3){
   
  /*width: 96px;*/
  height: 36px;
  font-size: 24px;
  font-family: DIN-Medium;
  font-weight: bold;
  color: #2CA6FF;
  line-height: 28px;
  -webkit-background-clip: text;
  /*-webkit-text-fill-color: transparent;*/
  margin: 0;
  padding: 0;
  margin-left: 28px;
  margin-top: 7px;
}
.dialogContent{
   
  margin-top: 15px;
  margin-left: 9px;
  margin-bottom: 10px;
}
</style>
<style scoped lang="scss">
  ::v-deep .el-dialog{
   
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin: 0px !important;
      background-color: rgba(255,255,0,0);
      background-image: url("../../assets/pop_img/Group 1694.png");
      background-size: cover;
      position: relative;
  }
</style>

页面：
pop-up 自己封装的弹窗组件

<pop-up :dialogVisible="true" dialogWidth="775" :dialogTitle="`${buildingHomeData.buildingName}（共${buildingHomeData.buildingPerson}人）`">
      <template>
        <div class="Home_community">
          <div class="HomeInfor">
            <span>所属区域：</span>
            <p>{
   {
   buildingHomeData.buildingArea}}</p>
          </div>
          <div class="HomeInfor">
            <span>小区地址：</span>
            <p>{
   {
   buildingHomeData.buildingAddress}}</p>
          </div>
        </div>

<!--        栋数-单元-->
        <div class="buildingStyle">
<!--          栋数下拉-->
          <div>
            <el-select v-model="buildingNumber" placeholder="" @change="buildingNumberChange">
              <el-option
                v-for="item in buildingOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
<!--          单元-->
          <div class="building_unit" v-for="item in otherUnitDetail">
            <el-button type="primary" plain @click="buildingUnit(item.unitsNumber)">
              <span class="building_unit_span">{
   {
   item.unitsNumber}}单元 （{
   {
   item.unitsPersonNumber}}人）</span>
            </el-button>
          </div>
        </div>

<!--        房屋图示-->
        <div class="houseIconStyle">
          <p>
            房屋图示：
          </p>
         <div>
           <div class="house_content" v-for="buildingIconItem in buildingIconData">
             <!--            颜色块-->
             <p :style="`background-color:${buildingIconItem.color};`"></p>
             <p>
               {
   {
    buildingIconItem.title }}
               (
               {
   {
    buildingIconItem.number }}
               户
               )
             </p>
           </div>
         </div>
        </div>
        <!--        人员标签-->
        <div class="houseIconStyle">
          <p>
            人员标签：
          </p>
          <div>
            <div class="house_content" v-for="personIconItem in PersonIconData">
              <!--            图标-->
                <img :src="personIconItem.imgUrl" />
              <p>
                {
   {
    personIconItem.title }}
                (
                {
   {
    personIconItem.number }}
                户
                )
              </p>
            </div>
          </div>
        </div>

<!--        房屋展示表格-->

         <table :border="0" class="home_table">
           <template  v-for="homeItem in buildingHomeData.buildingHomeDetail" v-if="buildingNumber == homeItem.buildingNumber">
             <template v-for="item in homeItem.buildingDetail">
               <template v-if="unitsNumber == item.unitsNumber">
                <template v-for="floorItem in item.unitsDetail">
                  <tr  class="home_table_temp">
                    <th>{
   {
   floorItem.floor}}楼</th>
<!--                    1为出租，2为自用，3为闲置-->
                    <td v-for="roomItem in floorItem.floorDetail"
                        :style="`background:${roomItem.roomType == 1 ? '#FF9A3E' :  roomItem.roomType == 2 ? '#1DD995' : '#6759D6'} !important;`"
                        @click="roomClick(roomItem.roomId)">{
   {
   roomItem.roomNo}}</td>
                  </tr>
                </template>
               </template>
             </template>

           </template>
         </table>

      </template>
    </pop-up>

页面数据：

 buildingOptions:[
        {
   
          value:1,
          label:"1栋"
        },
        {
   
          value:2,
          label:"2栋"
        },
        {