element实现表格表单方框风格

<template>
     <el-form class="form_application" ref="contractRef" :model="form" :rules="rules">
        <el-descriptions
      class="margin-top"
      :column="1"
      :size="size"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <span style="color: red;">
              *
            </span>
            项目名称
          </div>
        </template>
        <el-form-item prop="contractName">
            <el-input v-model="form.contractName" placeholder="请输入" style="width: 500px;" />
         </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            Telephone
          </div>
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            Place
          </div>
        </template>
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            Remarks
          </div>
        </template>
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            Address
          </div>
        </template>
        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
      </el-descriptions-item>
    </el-descriptions>
    </el-form>
   
  
  </template>
  
  <script setup>
  const data = reactive({
    form: {
        contractExecutionTime: "",
        companyName: "admin"
    },
    rules: {
        contractName: [
        { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        contractType: [
        { required: true, message: "项目类型不能为空", trigger: "blur" }
        ],
        contractUser: [
        { required: true, message: "项目经理不能为空", trigger: "blur" }
        ],
        contractExecutionTime: [
        { required: true, message: "验收日期不能为空", trigger: "blur" }
        ],
        contractDescription: [
        { required: true, message: "项目交付物理清单不能为空", trigger: "blur" }
        ],
        txt1: [
        { required: true, message: "业务方会签人员不能为空", trigger: "blur" }
        ],
        txt2: [
        { required: true, message: "业务方领导会签人员不能为空", trigger: "blur" }
        ],
        txt3: [
        { required: true, message: "执行方会签人员不能为空", trigger: "blur" }
        ],
        txt4: [
        { required: true, message: "综合意见不能为空", trigger: "blur" }
        ],
    }
  });
  const { queryParams, form, rules } = toRefs(data);

  const size = ref('default')
  const iconStyle = computed(() => {
    const marginMap = {
      large: '8px',
      default: '6px',
      small: '4px',
      color: 'red'
    }
    return {
      marginRight: marginMap[size.value] || marginMap.default,
    }
  })
  const blockMargin = computed(() => {
    const marginMap = {
      large: '32px',
      default: '28px',
      small: '24px',
    }
    return {
      marginTop: marginMap[size.value] || marginMap.default,
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .el-descriptions {
    margin-top: 20px;
  }
  .cell-item {
    display: flex;
    align-items: center;
  }
  .margin-top {
    margin-top: 20px;
  }
  :deep(.el-form-item ){
    margin-top: 18px;
  }
  :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
    padding: 0px 11px;
  }
  </style>