Gyyq-Upstairs/src/views/components/ProjectDetails/companyenter（备份）.vue

<template>
  <div class="container">
    <!-- 顶部信息 -->
    <div class="containertop">
      <div class="topleft">
        <img src="../../../assets/images/detailsicon/1.png" alt="">
        <span>企业入驻信息</span>
      </div>
      <div class="topright">
        <el-button type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
          <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          编辑
        </el-button>
        <el-button type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
          <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          导出
        </el-button>
      </div>
    </div>
    <!-- 内容区上方的表格 -->
    <div class="tagdiv">
      <div class="descriptionsdiv">
        <el-descriptions class="margin-top" :column="4" border>
          <el-descriptions-item>
            <template slot="label">
              入驻企业数（家）
            </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              入驻企业行业类型
            </template>
            苏州市
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              人员数量（人）
            </template>
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              入住率（%）
            </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              已出租（售）面积（平方米）
            </template>
            苏州市
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              空置出租（售）面积（平方米）
            </template>
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              工业厂房平均租金（元/平方米*月）
            </template>
            18100000000
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              工业厂房平均物业费(元/平方米*月)
            </template>
            苏州市
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="content">
      <div class="descriptionsdiv">
        <span>新增企业入驻</span>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="address" label="序号" width="200">
          </el-table-column>
          <el-table-column prop="name" label="企业名称" width="300">
            <template slot-scope="scope">
              <span style="color: #2B62F1;">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="统一社会信用代码" width="300">
          </el-table-column>
          <el-table-column prop="name" label="所属行业" width="300">
          </el-table-column>
          <el-table-column prop="data" label='租金价格' width="250">
          </el-table-column>
          <el-table-column prop="data" label='操作' width="200">
          </el-table-column>
        </el-table>
        <div class="block">
          <div style="visibility: hidden;"></div>
          <!-- @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" -->
          <el-pagination 
            :current-page="4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: '' // 提供默认值
    }
  },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '大众电脑生成制造基地',
          number: 123456,
          address: ' 1518 弄',
          data: '1000',
          status: '在建'
        },
        {
          date: '2016-05-04',
          name: '大众电脑生成制造基地',
          address: ' 1517 弄',
          number: 123456,
          data: '1500',
          status: '拟建'
        },
        {
          date: '2016-05-01',
          name: '大众电脑生成制造基地',
          address: ' 1519 弄',
          number: 123456,
          data: '2000',
          status: '已建'
        },
        {
          date: '2016-05-03',
          name: '大众电脑生成制造基地',
          address: ' 1516 弄',
          number: 123456,
          data: '2500',
          status: '在建'
        }
      ],
    }
  },
  methods: {
    getStatusColor(status) {
      switch (status) {
        case '在建':
          return 'color: #2DD29F;';
        case '拟建':
          return 'color: #F08445;';
        case '已建':
          return 'color: #2B62F1;';
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.content {
  padding: 1rem;
  display: flex;
}

.containertop {
  height: auto;
  display: flex;
  justify-content: space-between;
  padding: .7rem 0;
  padding: .5rem;
  border-bottom: 1px solid #E5E5E5;
}

.topleft {
  width: 8rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.topleft img {
  width: 0.81rem;
  height: 0.81rem;
}

.topleft span {
  width: auto;
  height: 0.88rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 0.88rem;
  color: #3D424C;
  line-height: 0.88rem;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.picturediv {
  width: 18.31rem;
  height: 25.31rem;
  background-color: lightblue;
}

.descriptionsdiv {
  width: 100%;
  margin-left: 1rem;
  height: auto;
}

.two-row-item {
  height: 20rem;
}

.tagdiv {
  padding: 1rem 3em 1rem 1rem;
}
.block{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
</style>