ocr-web/src/views/final/content/ListContent.vue

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import testImg from "@/assets/images/test.png";
import {chunk} from 'lodash-es'

const emit = defineEmits(["changeShow"]);
function changeContent() {
  emit("changeShow");
}
const initRem = () => {
  const designWidth = 1440;
  const rempPx = 16;
  const scale = window.innerWidth / designWidth;
  document.documentElement.style.fontSize = scale * rempPx + "px";
};

onMounted(() => {
  initRem();
});
const item = {
  img: testImg,
  checked: false,
  title: "YP4567890545",
  date: "2023-12-19 12:09:18",
};
const data = ref<any[]>([]);

onMounted(() => {
  for (let i = 0; i < 8; i++) {
    data.value.push(item as any);
  }
  data.value = chunk(data.value,4)
});
</script>

<template>
  <div class="wrapper">
    <div class="wrapper-header">
      <div class="wrapper-header-left">
        <span class="wrapper-header-font">任务管理列表</span>
        <SvgIcon
          style="cursor: pointer"
          size="16"
          name="card-mode"
          @click="changeContent"
        />
      </div>
    </div>

    <div class="header_data">
      <DataHeader :hasColor="true" />
    </div>

    <div class="data_wrapper" v-for="(sitem,sindex) in data" :key="sindex">
      <div class="item" v-for="(item, index) in sitem" :key="index">
        <div class="top">
          <div
            class="img"
            :style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`"
          >
            <!-- <div class="check_box"><n-checkbox size="medium" label=" " /></div> -->
          </div>
          <div class="content">
            <div class="title">任务ID：{{ item.title }}</div>
            <div class="date">{{ item.date }}</div>
            <div class="tag_box">
              <div
                class="tag_item"
                v-for="index in 2"
                :key="index"
                :style="index == 2 ? 'color:#02C984' : 'color:#507AFD'"
              >
                {{ index == 1 ? "待确认" : "张思" }}
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="resovle_action">通过</div>
          <div class="reject_action">不通过</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.wrapper {
  // display: flex;
  // flex-flow: row wrap;
  // align-items: center;
  // justify-content: flex-start;
  // flex: 1;
  box-sizing: border-box;
  margin-left: 16px;
  width: 100%;
  background: #fff;
  padding: 0px 24px 24px 24px;
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 64px;
    width: 100%;

    div {
      display: flex;
      align-items: center;
    }

    .xjcc {
      font-weight: bold;
      color: #507afd;
      margin-right: 20px;
    }

    .title {
      color: #507afd;
      font-weight: bold;
      font-size: 14px;
      margin-left: 8px;
    }

    .btn {
      width: 118px;
      height: 36px;
      background: linear-gradient(135deg, #5b85f8, #3c6cf0);
      border-radius: 17px;
      box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 6px;
      cursor: pointer;
    }

    .more {
      width: 30px;
      height: 30px;
      line-height: 30px;
      opacity: 0.1;
      background: linear-gradient(144deg, #73a7f9 0%, #3e6ef1 96%);
      border-radius: 8px;
    }

    &-font {
      font-size: 20px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 600;
      color: #0d0b22;
      margin-right: 8px;
    }

    &-action {
      padding: 8px;

      li {
        height: 32px;
        line-height: 32px;
        cursor: pointer;

        &:hover {
          background-color: #f3f8ff;
        }
      }
    }
  }

  .header_data {
    width: 100%;
  }
  .data_wrapper {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    // justify-content: flex-start;
    justify-content: space-between;
    flex: 1;
    .item {
      min-width: 14.125rem;
      border: 1px solid #ededed;
      border-radius: 3px;
      padding: 8px 10px;
      margin-right: 20px;
      margin-bottom: 16px;
      .top {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-start;
        .img {
          width: 84px;
          height: 55px;
          // height: auto;
          object-fit: cover;
          border-radius: 3px;
          .check_box {
            margin-left: 8px;
          }
        }
        .content {
          margin-left: 8px;
          .title,
          .date {
            font-size: 11px;
            font-weight: bolder;
            text-align: left;
            color: #323233;
            line-height: 16px;
          }
        }
        .tag_box {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: flex-start;
          .tag_item {
            min-width: 31px;
            min-height: 14px;
            font-size: 10px;
            padding: 1px 3px;
            font-weight: bolder;
            text-align: left;
            //   color: #507afd;
            line-height: 14px;
            letter-spacing: 0.1px;
            margin-right: 8px;
            // opacity: 0.1;
            background: #c0f7e4;
            border-radius: 2px;
            text-align: center;
            white-space: nowrap
          }
        }
      }
      .bottom {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        div {
          cursor: pointer;
        }
        .resovle_action {
          font-size: 12px;
          font-weight: bolder;
          text-align: left;
          color: #507afd;
          line-height: 17px;
        }
        .reject_action {
          font-size: 12px;
          font-weight: bolder;
          text-align: left;
          color: #FF4E4F;
          line-height: 17px;
          margin-left: 15px;
        }
      }
    }
  }
}
</style>