el-descriptions 跨列和相关样式

<template>
  <div class="descript">
    <el-descriptions
      :title="'项目名称: ' + `${title}`"
      :column="3"
      border
      :contentStyle="CS"
      :label-style="LS"
    >
      <template slot="extra">
        <el-button type="primary" size="small" plain>团队成员</el-button>
        <el-button type="primary" size="small" plain>日报/周报</el-button>
        <el-button type="primary" size="small" plain>工时填报</el-button>
      </template>
      <el-descriptions-item :span="3">
        <template slot="label">
          <div>项目介绍</div>
        </template>
        <div>
          包含城市运行管理中心建设硬件、“一网统管”城市运行管理基础平台、“一网统管”城市专题、大数据管理平台、人工智能管理平台、技术管理平台、车联网试点、标准规范体系等建设
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 项目总监 </template>
        张三
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 计划成本 </template>
        83 万元
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">剩余成本 </template>
        818000 元
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 计划天数 </template>
        2738 天
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 剩余天数 </template>
        2723 天
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 合同签订时间 </template>
        2022-08-18
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 总监部门 </template>
        管理服务中心
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 商务代表 </template>
        里斯
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 当前进度 </template>
        <el-progress :percentage="50" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 项目编号 </template>
        23-KP-009
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 委托方 </template>
        洪山区大数据中心
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 承建方 </template>
        <div>长江云通有限公司、湖南省邮电规划设计院有限公司联合体</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 服务工期 </template>
        3年
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '智慧新青山（一期）城市运行管理平台项目',
      CS: {
        // 'text-align': 'center', //文本居中
        'min-width': '250px' //最小宽度
        // 'word-break': 'break-all' //过长时自动换行
      },
      LS: {
        // color: '#000',
        'text-align': 'center',
        'font-weight': '600',
        // height: '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.descript {
  margin: 20px;
}

::v-deep .el-descriptions__header {
  margin-bottom: 12px;
}
::v-deep .el-descriptions__title {
  color: rgb(0, 175, 255);
  font: 16px 微软雅黑 !important;
}
</style>