uni-Identify-quality/pages/order-goods/order-details.vue

<template>
  <div class="order-details" :style="{background:'url('+'../../static/bbj1@3x.png'+')'}">
    <div class="content1">
      <div class="wrap1">
        <image src="../../static/zu506@3x.png"></image>
      </div>
      <div class="wrap2">
        订单号的详情
      </div>
      <div class="wrap3">
        <image src="../../static/zu594@3x.png"></image>
      </div>
    </div>
    <div class="content2">
      <image src="../../static/zu709@3x.png"></image>
    </div>
    <div class="content3">
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">画作编号</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="画作编号"/>
          </div>
          <div class="wrap1_1_4"></div>
        </div>
        <div class="wrap1_1">
          <div class="wrap1_1_1">画作名称</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="画作名称"/>
          </div>
          <div class="wrap1_1_4"></div>
        </div>
        <div class="wrap1_1">
          <div class="wrap1_1_1">画家名称</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="画家名称"/>
          </div>
          <div class="wrap1_1_4">
          </div>
        </div>
        <div class="wrap1_1">
          <div class="wrap1_1_1">画作平尺数</div>
          <div class="wrap1_1_2"></div>
          <div class="wrap1_1_3">
            <input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="画作平尺数"/>
          </div>
        </div>
      </div>
      <div class="wrap2"></div>
    </div>
  </div>
</template>
<script>
import {postDataByParams} from "../../http/service";

export default {
  name: "order-details",
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await postDataByParams('/api/warehouse/detail')
      console.log(res, 'res')
    }
  }
}
</script>
<style scoped lang="scss">
.order-details {
  box-sizing: border-box;
  padding-top: 46rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;

  .content3 {
    margin-top: 60rpx;

    .wrap1 {
      border: 1rpx dashed #DFE9F0;
      background-color: #fff;

      .wrap1_1 {
        position: relative;
        height: 114rpx;
        display: flex;
        align-items: center;

        .wrap1_1_4 {
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          position: absolute;
          height: 0;
          width: 636rpx;
          border-bottom: 0.5px solid #626262;
        }

        .wrap1_1_2 {
          margin-right: 36rpx;
          width: 0;
          height: 66rpx;
          border-left: 0.5px solid #626262;

        }

        .wrap1_1_1 {
          width: 210rpx;
          padding-left: 32rpx;

          color: #626262;
          font-size: 24rpx;
        }
      }
    }
  }

  .content2 {
    margin-top: 42rpx;
    display: flex;
    justify-content: center;

    image {
      width: 404rpx;
      height: 306rpx;
    }
  }

  .content1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .wrap1 {
      image {
        width: 112rpx;
        height: 52rpx;
      }
    }

    .wrap2 {
      color: #4E964D;
      font-size: 32rpx;
    }

    .wrap3 {
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>