productivity-platform-web/src/views/house/workbench1.vue

<!-- <template>
  <div class="base">
    <div class="content">
      <div class="breadcrumb">
       <Breadcrumb />
      </div>
      <div class="contrl">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="委托人信息" name="consignor">
              <el-form  :model="consignor" label-width="auto" style="margin-top: 30px;">
                    <el-form-item label="名称:" class="form-item">
                      <el-input v-model="consignor.name" clearable />
                    </el-form-item>
                    <el-form-item label="类型:" class="form-item">
                      <el-input v-model="consignor.type" clearable />
                    </el-form-item>
                    <el-form-item label="住所:" class="form-item">
                      <el-input v-model="consignor.address" clearable />
                    </el-form-item>
                    <el-form-item label="法定代表人:" class="form-item">
                      <el-input v-model="consignor.legalPerson" clearable />
                    </el-form-item>
                    <el-form-item label="统一社会信用代码:" class="form-item" >
                      <el-input v-model="consignor.legalCode" clearable />
                    </el-form-item>
              </el-form>
          </el-tab-pane>
          <el-tab-pane label="权属资料" name="second">
            <div class="certificate-div">
            </div>
          </el-tab-pane>
          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
        </el-tabs>
      </div>
      <div class="contrl-bar">
        <el-timeline style="max-width: 600px">
          <el-timeline-item timestamp="未完成" placement="top" color="#ff6154">
            <el-card shadow="hover" >
              <h4>委托人信息</h4>
              <p>Tom committed 2018/4/12 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="未完成" placement="top" color="#ff6154">
            <el-card shadow="hover">
              <h4>权属信息</h4>
              <p>Tom committed 2018/4/3 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="未完成" placement="top" color="#ff6154">
            <el-card shadow="hover">
              <h4>项目基本信息</h4>
              <p>Tom committed 2018/4/2 20:46</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
 import Breadcrumb from '../../components/Breadcrumb/index.vue'
  export default {
    name:'houseWorkBench',
    components:{
      Breadcrumb
    },
    data() {
      return {
        consignor: {
            name:null,
            type:null,
            address:null,
            legalPerson:null,
            legalCode:null
        },
        activeName:'consignor'
      }
    }
  }
</script>

<style scoped>
.base {
  min-height: calc(100vh - 80px);
  width: 100%;
}
.content {
  margin-left: 160px;
  margin-right: 160px;
  padding: 50px 20px 20px 20px;
  
}
.contrl{
  font-size: 20px;
  width: 70.9%;
  height: 1000px;
  border-right: 1.5px #dae1eb solid;
  padding: 20px 20px 20px 0px;
  float: left;

}

.contrl-bar{
  height: 600px;
  width: 25%;
  float: right;
}


:deep(.el-tabs__item.is-active, .el-tabs__active-bar) {
  color: #ff6154 !important;
}

:deep(.el-tabs__item:hover) {
  color: #ff6154 !important;
}

:deep(.el-tabs__active-bar){
  background-color: #ff6154 !important;
}
</style>
 -->