OfficeApp/subpkg/dispatching/dispatching.vue

<template>
  <view class="">
    <view class="img">
      <image src="../../static/img/task/car.png"></image>
      <view class="type">
        <view class="on_line">在线</view>
        <view class="off-line">离线</view>
      </view>
    </view>
    <view class="center_card">
      <!-- <u-steps direction="column" dot activeColor="#07c160" inactiveColor="#07c160">
        <u-steps-item title="开始地点: 某某村">
        </u-steps-item>
        <u-steps-item title="中转地点: 某某村">
        </u-steps-item>
        <u-steps-item title="结束地点: 某某村">
        </u-steps-item>
      </u-steps> -->
      <view class="line"></view>
      <view class="box">
        <view class="item">开始地点：<text>某某某某某村</text></view>
        <view class="item">中转地点：<text>很快就解决</text></view>
        <view class="item">结束地点：<text>哈哈哈哈哈村</text></view>
      </view>
    </view>
    <view class="center_card">
      <view class="item">
        <view>开始地点：<text>通滩镇砾石村1组</text></view>
        <view>抵达时间：<text>2023/08/02 11:00:35</text></view>
      </view>
      <view class="item">
        <view>中转地点：<text>通滩镇砾石村1组</text></view>
        <view>抵达时间：<text>2023/08/02 11:00:35</text></view>
      </view>
      <view class="item">
        <view>结束地点：<text>通滩镇砾石村1组</text></view>
        <view>抵达时间：<text>2023/08/02 11:00:35</text></view>
      </view>
    </view>
    <mybtn text="开始任务"></mybtn>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    onLoad() {},
    onShow() {},
    methods: {},
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .img {
    width: 696rpx;
    height: 343rpx;
    background: #FFFFFF;
    border-radius: 18rpx 18rpx 18rpx 18rpx;
    opacity: 1;
    margin: 28rpx auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image {
      width: 357.48rpx;
      height: 201.52rpx;
    }
    .type{
      display: flex;
      view{
        margin: 0 28rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #07C160;
        display: flex;
        align-items: center;
        &:before{
          content: '';
          display: inline-block;
          width: 30rpx;
          height: 30rpx;
          background-color: #07C160;
          border-radius: 50%;
          margin-right: 10rpx;
        }
      }
      .off-line{
        color: #FA5151FF;
        &:before{
          background-color: #FA5151FF;
        }
      }
    }
  }

  .center_card {
    width: 694rpx;
    // height: 226rpx;
    background: #FFFFFF;
    border-radius: 18rpx 18rpx 18rpx 18rpx;
    opacity: 1;
    margin: 0 auto;
    padding: 28rpx;
    margin-bottom: 28rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    position: relative;
    .item{
      margin-bottom: 28rpx;
      line-height: 48rpx;
      &:last-child{
        margin-bottom: 0;
      }
      text{
        color: #333;
      }
    }
    .box{
      .item{
        display: flex;
        align-items: center;
        height: 42rpx;
        &:before{
          content: '';
          display: inline-block;
          height: 30rpx;
          width: 30rpx;
          background-color: #07C160;
          border-radius: 50%;
          margin-right: 10rpx;
        }
      }
    }
    .line{
      width: 1rpx;
      height: 160rpx;
      background-color: #07C160;
      position: absolute;
      top: 40rpx;
      left: 41.8rpx;
    }
  }
</style>