wt_project_web_bak/src/views/contract/component/info.vue

<template>
  <div>
    <div class="padding top flex flex-center flex-justify-between">
      <span>基础信息</span>
      <div>
        <el-button type="primary" plain> {{ save }}</el-button>
      </div>
    </div>
    <div class="padding">
      <el-form
          label-position="right"
          label-width="100px"
          :disabled="disabled"
          style="background-color: white"
      >
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="合同名称" class="flex-child-average">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item label="合同类别" class="flex-child-average">
            <el-input v-model="form.region"/>
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="合同编号" class="flex-child-average">
            <el-input v-model="form.type"/>
          </el-form-item>
          <el-form-item label="合同金额" class="flex-child-average">
            <el-input v-model="form.type"/>
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="合同甲方" class="flex-child-average">
            <el-input v-model="form.type"/>
          </el-form-item>
          <el-form-item label="合同乙方" class="flex-child-average">
            <el-input v-model="form.type"/>
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="签订日期" class="flex-child-average">
            <el-input v-model="form.type"/>
          </el-form-item>
          <el-form-item label="到期日期" class="flex-child-average">
            <el-input v-model="form.type"/>
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="签订地点" class="flex-child-average">
            <el-input v-model="form.type"/>
          </el-form-item>
          <el-form-item label="合同状态" class="flex-child-average">
            <el-input v-model="form.type"/>
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="支付方式" class="flex-child-average">
            <el-input v-model="form.type" autosize
                      type="textarea"/>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'info',
  data() {
    return {
      disabled: true,
      save: '编辑',
      form: {
        name: '',
        region: '',
        type: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 35px;
  border-radius: var(--el-card-border-radius);
  background-color: #f5f5f3;
}
</style>