check-work/src/views/Demand/Demand.vue

<template>
  <div>
    <left-fixed :type="type" />
    <div class="box">
      <p class="list-title">企业信息列表</p>
      <div v-for="(item, index) in datalist" :key="index" class="data-box">
        <p class="data-title">{{ item.title }}</p>
        <div v-for="(a, b) in item.content" :key="b" class="data-content">
          {{ a }}
        </div>
        <div class="data-content">继续添加</div>
      </div>
      <div class="user-info">
        <p class="data-title">客户信息</p>
        <div
          v-for="(item, index) in infolist"
          :key="index"
          :class="item.type === 3 ? 'infolist-box1' : 'infolist-box'"
        >
          <p style="float: left">{{ item.title }}：</p>
          <!-- 输入框 -->
          <el-input
            v-model="item.content"
            v-if="item.type === 0"
            style="width: 45%"
            placeholder="请输入"
          />
          <!-- 单选框 -->
          <template v-if="item.type === 1">
            <el-radio v-model="item.content" label="1">是</el-radio>
            <el-radio v-model="item.content" label="0">否</el-radio>
          </template>
          <!-- 日期选择框 -->
          <el-input
            v-model="item.content"
            type="date"
            v-if="item.type === 2"
            style="width: 45%"
            placeholder="请输入"
          />
          <!-- 文本域 -->
          <el-input
            v-if="item.type === 3"
            type="textarea"
            rows="10"
            placeholder="请输入内容"
            v-model="item.content"
          ></el-input>
        </div>
        <el-button type="success" class="submit" style="width: 20%"
          >确定提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import LeftFixed from '@/components/LeftFixed'
export default {
  name: 'Demand',
  components: { LeftFixed },
  data () {
    return {
      type: 8,
      datalist: [{
        title: '服务需求',
        content: ['一个服务', '两个服务', '三个服务']
      }, {
        title: '团队需求',
        content: ['一个团队', '两个团队', '三个团队']
      }, {
        title: '设备需求',
        content: ['一个设备', '两个设备', '三个设备']
      }],
      infolist: [{
        title: '企业名称',
        type: 0, // 0表示输入框，1表示单选，2表示日期选择，3表示文本域
        content: ''
      }, {
        title: '信用代码',
        type: 0,
        content: ''
      }, {
        title: '是否入孵',
        type: 1,
        content: ''
      }, {
        title: '入孵时间',
        type: 2,
        content: ''
      }, {
        title: '联系人',
        type: 0,
        content: ''
      }, {
        title: '联系方式',
        type: 0,
        content: ''
      }, {
        title: '其他要求',
        type: 3,
        content: ''
      }]
    }
  }
}
</script>

<style scoped>
.box {
  width: 62vw;
  margin: auto;
}
.list-title {
  color: #707070;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 1.5rem;
}
.data-box {
  margin-bottom: 20px;
  overflow: hidden;
}
.data-title {
  color: #707070;
  font-size: 1.2rem;
  margin-top: 1.5rem;
  font-weight: bold;
  border-bottom: 4px solid #00b7cb;
}
.data-content {
  height: 3rem;
  width: 29%;
  text-align: center;
  line-height: 3rem;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #707070;
  border: 2px solid #909090;
  margin: 10px 2% 10px 2%;
  float: left;
  box-sizing: border-box;
}
.user-info {
  width: 100%;
  margin-bottom: 200px;
  position: relative;
}
.infolist-box {
  height: 60px;
  line-height: 60px;
}
.infolist-box > p {
  width: 5rem;
}
.infolist-box1 {
  position: absolute;
  right: 0;
  top: 1.82rem;
  width: 40%;
}
.infolist-box1 > p {
  height: 60px;
  line-height: 60px;
}
.submit {
  position: absolute;
  right: 10%;
  bottom: 0;
}
</style>