JiangNingUmale-h5/subcontract/work/taskmanage/ledger.vue

<!--
 * @Author: 张涛
 * @Date: 2023-11-06 14:18:06
 * @LastEditors: 张涛
 * @LastEditTime: 2023-11-08 13:26:08
 * @FilePath: \JiangNingUmale-App\subcontract\work\taskmanage\ledger.vue
-->
<template>
  <view class="page">
    <u-navbar
      title="任务台账"
      back-icon-color="#FFFFFF"
      title-color="#FFFFFF"
      leftText="返回"
      :autoBack="true"
      :placeholder="true"
    >
      <view class="u-nav-slot" slot="right" @click="clickNavRight">
        <text>任务创建</text>
      </view>
    </u-navbar>
    <view class="main-content">
      <view class="view-list">
        <view class="view-query">
          <uni-easyinput
            class="input-title"
            type="text"
            v-model="formData.title"
            placeholder="任务标题"
          />
          <uni-easyinput
            class="input-type"
            type="text"
            v-model="formData.type"
            placeholder="任务类型"
          />
          <button class="btn-query">查询</button>
        </view>
        <view
          class="list-item"
          v-for="(item, index) in 2"
          :key="index"
          @click="goPath"
        >
          <view class="item-header" v-show="false"></view>
          <view class="item-content">
            <view>
              <text class="title">任务编号：</text>
              <text class="content">2023073024251</text>
            </view>
            <view>
              <text class="title">任务标题：</text>
              <text class="content">下水道结冰堵塞</text>
            </view>
            <view>
              <text class="title">任务类型：</text>
              <text class="content">城市安全类</text> </view
            ><view>
              <text class="title">任务地址：</text>
              <text class="content">XXXXXXXXXXXXXXXXXXXX</text>
            </view>
            <view>
              <text class="title">处理期限：</text>
              <text class="content">2023-07-30</text>
            </view>
            <view>
              <text class="title">所属网格：</text>
              <text class="content">网格1</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="footer">
       <button class="btn-back">回退</button>
      <button class="btn-accept">接收</button>
      <button class="btn-add">处理</button>
      <button class="btn-exam">审核</button>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        title: null,
        type: null,
      },
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    clickNavRight() {
      this.$tab.navigateTo("/subcontract/work/taskmanage/create");
    },
    goPath() {
      this.$tab.navigateTo("/subcontract/work/taskmanage/info");
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f6f7f8;
  .u-nav-slot {
    text {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #367bef;
    }
  }

  .main-content {
    position: relative;

    .view-list {
      padding: 30rpx 20rpx 160rpx 20rpx;

      .view-query {
        display: flex;
        align-items: center;
        .input-title {
          margin-right: 7rpx;
        }
        .input-type {
          margin-left: 7rpx;
        }
        .btn-query {
          margin-left: 16rpx;
          background: linear-gradient(90deg, #3976f1 0%, #3ca0f6 100%);
          border-radius: 16rpx;
          color: #ffffff;
          font-size: 36rpx;
          font-family: PingFang SC;
        }
      }

      .list-item {
        margin: 30rpx 0 30rpx 0;
        position: relative;
        .item-header {
          width: 177rpx;
          height: 177rpx;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 2;
          background-image: url("@/static/images/umale/triangle.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .item-content {
          padding: 11rpx 29rpx;
          background: #ffffff;
          box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
          border-radius: 16rpx;
          & > view {
            display: flex;
            // align-items: center;
            padding: 10rpx 0;
            font-size: 28rpx;
            font-family: PingFang SC;
            letter-spacing: 2rpx;

            & > .title {
              color: #9da2ab;
            }
            & > .content {
              width: 66%;
              flex: 1;
              color: #2e2f31;
              overflow-wrap: break-word;
            }
          }
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    border: 1rpx solid #dce3ec;
    padding: 18rpx 28rpx 60rpx 28rpx;
    display: flex;

    .btn-back {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      height: 88rpx;
      background: linear-gradient(90deg, #ff4b4b 0%, #fa4d4d 100%);
      border-radius: 16rpx;
      color: #ffffff;
      flex: 1;
      margin: 0 15rpx;
    }

    .btn-accept {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      height: 88rpx;
      background: linear-gradient(90deg, #32b78b 0%, #37d9a3 100%);
      border-radius: 16rpx;
      color: #ffffff;
      flex: 1;
      margin: 0 15rpx;
    }

    .btn-add {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      height: 88rpx;
      background: linear-gradient(90deg, #3976f1 0%, #3ca0f6 100%);
      border-radius: 16rpx;
      color: #ffffff;
      flex: 1;
      margin: 0 15rpx;
    }
    .btn-exam {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      height: 88rpx;
      background: linear-gradient(90deg, #f18939 0%, #f6a53c 100%);
      border-radius: 16rpx;
      color: #ffffff;
      flex: 1;
      margin: 0 15rpx;
    }
  }
}
</style>