YNUtdPlatform/pages/realName/workPlan-details/index.vue

<template>
  <view class="work-plan-details">
    <u-navbar
      class="u-navbar"
      title="作业计划详情"
      placeholder
      @leftClick="leftClick"
      leftIconColor="#fff"
      bgColor="#00337A"
      :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
    />

    <uni-card :is-shadow="true" margin="6">
      <view class="card-header">
        <uni-icons type="list" size="16" style="color: #3f9dfd; margin-right: 8rpx"></uni-icons>
        <text>
          {{ queryInfo.proName }}
        </text>
      </view>
      <view class="card-header">
        <uni-icons type="calendar" size="16" style="margin-right: 8rpx"></uni-icons>
        <view>{{ $moment().format('YYYY-MM-DD') }}</view>
      </view>
    </uni-card>

    <uni-section title="今日作业计划" type="line">
      <template v-slot:right>全部人员</template>
      <uni-card :is-shadow="true" margin="6">
        <view>
          <view class="row-1">
            <view>现场负责人</view>
            <view>
              <text>燕双鹰</text>
              <text>13556235623</text>
            </view>
            <view>作业人员</view>
            <view>7</view>
          </view>
          <view class="row-2">
            <view>风险等级</view>
            <view>低风险</view>
            <view>执行情况</view>
            <view>已执行</view>
          </view>
          <view class="row-3">
            <view style="padding: 8rpx 0">作业内容</view>
            <view style="color: #000">1、35kv配电室35kv配电室35kv配电室35kv配电室35kv配电室</view>
          </view>
        </view>
      </uni-card>
    </uni-section>

    <uni-section title="作业人员" type="line">
      <uni-card :is-shadow="true" margin="6" padding="0">
        <view class="work-person">
          <view>龙海</view>
          <view>龙海</view>
          <view>龙海</view>
          <view>龙海</view>
          <view>龙海</view>
          <view>龙海</view>
          <view>龙海</view>
          <view>龙海</view>
        </view>
      </uni-card>
    </uni-section>

    <uni-section title="人员持证" type="line">
      <uni-card :is-shadow="true" margin="6" padding="0">
        <view class="person-card">
          <view class="blue-border">低压电工作业（9）</view>
          <view class="orange-border">低压电工作业（9）</view>
          <view class="green-border">低压电工作业（9）</view>
          <view class="blue-border">低压电工作业（9）</view>
          <view class="orange-border">低压电工作业（9）</view>
        </view>
      </uni-card>
    </uni-section>

    <uni-section title="作业票、站班会照片" type="line" style="padding-bottom: 10rpx">
      <uni-card :is-shadow="true" margin="6" padding="0">
        <view>站班会照片</view>
      </uni-card>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {}
    }
  },
  methods: {
    leftClick() {
      uni.navigateTo({ url: '/pages/realName/workPlan/index' })
    }
  },
  onLoad(options) {
    const query = JSON.parse(options.query)
    this.queryInfo = query
    // console.log('queryquery', query)
  }
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
}

.row-1,
.row-2 {
  padding: 25rpx 0;
  display: flex;
  border-bottom: 1px solid #eee;
  view {
    flex: 1;
    text-align: center;
  }
}

.work-person {
  display: flex;
  flex-wrap: wrap;

  view {
    width: 18%;
    margin: 12rpx 0 12rpx calc(10% / 4);
    color: #fff;
    text-align: center;
    border-radius: 12rpx;
    background-color: #3f9dfd;
  }
}

.work-person view:nth-child(5n + 1) {
  margin-left: 0;
}

.person-card {
  display: flex;
  flex-wrap: wrap;

  view {
    width: calc(32%);
    margin: 12rpx 0 12rpx calc(4% / 2);
    box-sizing: border-box;
    border-radius: 12rpx;
    text-align: center;
    font-size: 12px;
  }

  .blue-border {
    border: 1px solid #3f9dfd;
    color: #3f9dfd;
    background-color: #d5e7f9;
  }
  .orange-border {
    border: 1px solid #f5a208;
    color: #f5a208;
    background-color: #f7e3bf;
  }
  .green-border {
    border: 1px solid #03af03;
    color: #03af03;
    background-color: #c5f3c5;
  }
}

.person-card view:nth-child(3n + 1) {
  margin-left: 0;
}
</style>