WorkloadApp/pages/Project/detail.vue

<template>
  <view class="content">
    <view class="title"> 项目详情 </view>
    <view class="list">
      <view class="detail">
        <span class="subTitle">项目名称:</span>
        <span class="detailContent">{{ currentProject.project_name }}</span>
      </view>
      <view class="detail">
        <span class="subTitle">项目类别:</span>
        <span class="detailContent">{{ currentProject.TypeInfo.name }}</span>
      </view>
      <view class="detail" v-if="currentProject.IndustryInfo">
        <span class="subTitle">行业名称:</span>
        <span class="detailContent">
          {{ currentProject.IndustryInfo.name }}
        </span>
      </view>
      <view class="detail">
        <span class="subTitle">流程:</span>
        <span class="detailContent">{{ currentProject.FlowInfo.name }}</span>
      </view>
      <view class="detail" v-if="currentProject.location">
        <span class="subTitle">项目地区:</span>
        <span class="detailContent">
          {{ `${currentProject.location}(${currentProject.location_code})` }}
        </span>
      </view>
      <view class="detail" v-if="currentProject.name">
        <span class="subTitle">项目简称:</span>
        <span class="detailContent">{{ currentProject.name }}</span>
      </view>
      <view class="detail" v-if="currentProject.version">
        <span class="subTitle">项目批次:</span>
        <span class="detailContent">{{ currentProject.version }}期</span>
      </view>
      <view class="detail" v-if="currentProject.AuthorUser">
        <span class="subTitle">创建人:</span>
        <span class="detailContent">{{ currentProject.AuthorUser.CName }}</span>
      </view>
      <view class="detail" v-if="currentProject.AuthorDepInfo">
        <span class="subTitle">所属部门:</span>
        <span class="detailContent">
          {{ currentProject.AuthorDepInfo.Name }}
        </span>
      </view>
      <view class="detail">
        <span class="subTitle">项目编号:</span>
        <span class="detailContent">
          {{ currentProject.project_full_code }}
        </span>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["currentProject"]),
  },
  onLoad(options) {
    options.auth;
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
}
.title {
  width: 100%;
  padding: 0 20px 20px 20px;
  background: #f8f8f8;
  font: 24px bold;
}
.list {
  margin-left: 10%;
  width: 100%;
}
.detail {
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  display: flex;
  justify-items: space-between;
  .subTitle {
    width: 30%;
  }
  .detailContent {
    width: 70%;
  }
}
</style>