一个vue 页面

好的，我会对你的代码进行一些样式上的调整，以使布局更加美观和实用。以下是修改后的代码：

```html
<template>
  <div class="login-page">
    <el-form ref="formRef" :model="form" class="centered-form" label-width="120px">

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机构全称">
            <el-input v-model="form.institutionName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归口管理部门">
            <el-input v-model="form.department"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="通讯地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地域">
            <el-input v-model="form.region"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="网址">
            <el-input v-model="form.website"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子信箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="法人代表">
            <el-input v-model="form.legalRepresentative"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮政编码">
            <el-input v-model="form.postalCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系人">
            <el-input v-model="form.contactPerson"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input v-model="form.telephoneFixed"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机">
                <el-input v-model="form.telephoneMobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="传真">
            <el-input v-model="form.fax"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机构属性">
            <el-radio-group v-model="form.institutionType">
              <el-radio label="企业">企业</el-radio>
              <el-radio label="高等院校">高等院校</el-radio>
              <el-radio label="研究机构">研究机构</el-radio>
              <el-radio label="其他">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="机构简介">
            <el-input
                v-model="form.description"
                type="textarea"
                :maxlength="500"
                placeholder="请输入机构简介，最多500字">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="技术需求名称">
            <el-input v-model="form.technologyDemandName"></el-input>
          </el-form-item>
        </el-col>

          <el-col :span="12">
            <el-form-item label="需求时限">
              <el-col :span="11">
                <el-form-item>
                  <el-input v-model="form.demandTimeframeStart" placeholder="开始年份"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="demand-timeframe-separator" :span="1">至</el-col>
              <el-col :span="11">
                <el-form-item>
                  <el-input v-model="form.demandTimeframeEnd" placeholder="结束年份"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="技术需求概述">
            <el-row>
              <el-col :span="8">
                <el-form-item label="主要问题">
                  <el-input :maxlength="500" type="textarea" :rows="4" placeholder="需要解决的重大技术问题，限500字以内" v-model="form.mainProblem"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="技术关键">
                  <el-input :maxlength="500" type="textarea" :rows="4" placeholder="所需的关键技术、主要指标，限500字以内" v-model="form.technicalKey"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预期目标">
                  <el-input :maxlength="500" type="textarea" :rows="4" placeholder="技术创新性、经济社会效益，限500字以内" v-model="form.expectedGoal"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="关键词个数">
            <el-input-number
                v-model="form.newPointCount"
                :min="1"
                :max="5"
                @change="updateNewPoints">
            </el-input-number>
          </el-form-item>

          <el-form-item v-for="(newPoint, index) in form.new_points" :key="index" label="查新点">
            <el-input v-model="newPoint.value"></el-input>
          </el-form-item>

        </el-col>
      </el-row>



      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="拟投入资金总额">
            <el-input v-model="form.totalInvestment"></el-input>
            <span>万元</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="技术需求解决方式">
            <el-radio-group v-model="form.solvingMethod">
              <el-radio label="独立研发">独立研发</el-radio>
              <el-radio label="委托研发">委托研发</el-radio>
              <el-radio label="合作研发">合作研发</el-radio>
              <el-radio label="其他">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合作意向单位">
            <el-input v-model="form.cooperationUnit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="科技活动类型">
            <el-radio-group v-model="form.scienceActivityType">
              <el-radio label="基础研究">基础研究</el-radio>
              <el-radio label="应用研究">应用研究</el-radio>
              <el-radio label="试验发展">试验发展</el-radio>
              <el-radio label="研究与试验发展成果应用">研究与试验发展成果应用</el-radio>
              <el-radio label="技术推广与科技服务">技术推广与科技服务</el-radio>
              <el-radio label="生产性活动">生产性活动</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="学科分类（限基础研究填写）">
            <el-cascader
                v-model="form.disciplineClassification"
                :options="disciplineOptions"
                placeholder="请选择学科分类"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">

        <el-col :span="12">
          <el-form-item label="需求技术所属领域（非基础研究填写）">
            <el-radio-group v-model="form.technologyField">
              <el-radio label="电子信息">电子信息</el-radio>
              <el-radio label="光机电一体化">光机电一体化</el-radio>
              <el-radio label="生物技术与制药">生物技术与制药</el-radio>
              <el-radio label="新材料及应用">新材料及应用</el-radio>
              <el-radio label="现代农业">现代农业</el-radio>
              <el-radio label="新能源与高效节能">新能源与高效节能</el-radio>
              <el-radio label="资源与环境">资源与环境</el-radio>
              <el-radio label="高技术服务业">高技术服务业</el-radio>
              <el-radio label="海洋">海洋</el-radio>
              <el-radio label="社会公共事业">社会公共事业</el-radio>
              <el-radio label="医疗卫生">医疗卫生</el-radio>
              <el-radio label="其它（注明）">其它（注明）</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="需求技术应用行业（非基础研究填写）">
            <el-cascader
            v-model="form.industryOptions1"
            :options="industryOptions"
            placeholder="请选择分类"
            ></el-cascader>
          </el-form-item>
        </el-col>

      </el-row>

      <el-form-item>
        <el-button type="primary" @click="submitForm('')">立即创建</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        institutionName: '',
        department: '',
        address: '',
        region: '',
        website: '',
        email: '',
        legalRepresentative: '',
        postalCode: '',
        contactPerson: '',
        telephoneFixed: '',
        telephoneMobile: '',
        fax: '',
        institutionType: [],
        description: '',
        technologyDemandName: '',
        demandTimeframeStart: '',
        demandTimeframeEnd: '',
        mainProblem: '',
        technicalKey: '',
        expectedGoal: '',
        new_points: '',
        totalInvestment: '',
        solvingMethod: '',
        cooperationUnit: '',
        scienceActivityType: [],
        disciplineClassification: [],
        technologyField: [],
        industryOptions1: [],
      },
      disciplineOptions: [
        {
          value: 'math',
          label: '数学',
          children: [
            {
              value: '11017',
              label: '数论',
              children: [
                { value: '11017', label: '初等数论' },
                { value: '11018', label: '解析数论' },
              ]
            },
            {
              value: '11021',
              label: '代数学',
              children: [
                { value: '11021', label: '线性代数' },
                { value: '11022', label: '群论' },
              ]
            },
          ]
        },
        {
          value: 'physics',
          label: '物理学',
          children: [
            {
              value: '11017',
              label: '物理1',
              children: [
                { value: '110', label: '物理11' },
                { value: '11018', label: '物理12' },
              ]
            },
            {
              value: '1021',
              label: '物理2',
              children: [
                { value: '121', label: '物理21' },
                { value: '122', label: '物理22' },
              ]
            },
          ]
        },
      ],
      industryOptions: [
        {
          value: 'industry1',
          label: '行业一',
          children: [
            {
              value: 'subindustry1',
              label: '子行业一',
              children: [
                { value: 'subsubindustry1', label: '子子行业一' },
                { value: 'subsubindustry2', label: '子子行业二' }
              ]
            },
            {
              value: 'subindustry2',
              label: '子行业二',
              children: [
                { value: 'subsubindustry3', label: '子子行业三' },
                { value: 'subsubindustry4', label: '子子行业四' }
              ]
            }
          ]
        },
        {
          value: 'industry2',
          label: '行业二',
          children: [
            {
              value: 'subindustry3',
              label: '子行业三',
              children: [
                { value: 'subsubindustry5', label: '子子行业五' },
                { value: 'subsubindustry6', label: '子子行业六' }
              ]
            },
            {
              value: 'subindustry4',
              label: '子行业四',
              children: [
                { value: 'subsubindustry7', label: '子子行业七' },
                { value: 'subsubindustry8', label: '子子行业八' }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    updateNewPoints() {
      // 确保关键词的数量不超过5
      const maxKeywords = 5;
      this.form.newPointCount = Math.min(this.form.newPointCount, maxKeywords);
      this.form.new_points = Array.from({ length: this.form.newPointCount }, () => ({ value: '' }));
    },

    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('错误信息:', this.$refs.formRef);
        }
      });
    }
  }
};
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh; /* 至少占据视口高度 */
  background-color: #f5f5f5; /* 背景颜色 */
  padding: 20px; /* 内边距 */
}
.centered-form {
  width: 60%; /* 你可以根据需要调整宽度 */
  background-color: #ffffff; /* 表单背景颜色 */
  padding: 20px; /* 内边距 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
</style>