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

<template>
  <div class="order-goods" :style="{background:'url('+'../../static/bbj1@3x.png'+')'}">

    <div class="content1">
      <div class="wrap1">
        <tm-menu :list="['已延期','即将到期']">
          <div class="wrap1_1">
            <div class="wrap1_1_1">全部状态</div>
            <image style="width: 12rpx;height: 8rpx" src="../../static/dbx2@3x.png"></image>
          </div>
        </tm-menu>
      </div>
      <div class="wrap2">
        <div class="wrap2_1">订单库</div>
        <div class="wrap2_2">*滑动删除</div>
        <div></div>
      </div>
      <div class="wrap3">上传</div>
    </div>
    <div class="content2" >
      <div class="wrap1">
        <div class="wrap1_1">
          <image src="../../static/zu1@3x.png"></image>
        </div>
        <div class="wrap1_2"></div>
        <input placeholder-style="color: #C7C7C7;font-size: 20rpx;"  placeholder="在此处搜索您的订单" />
      </div>
      <div class="wrap2">
        搜索
      </div>

    </div>
    <div class="content3">
      <div class="wrap1">
        <div class="wrap1_1">
          <image  src="../../static/jx632@3x.png"></image>
        </div>
        <div class="wrap1_2">
          <div class="wrap1_2_1">画作的名称</div>
          <div class="wrap1_2_2">订单号:0129181232101</div>
          <div class="wrap1_2_3">16平尺</div>
          <div class="wrap1_2_4">2023.09.01-2023.09.18</div>
        </div>
        <div class="wrap1_3">
          <div class="wrap1_3_1">
              <div class="wrap1_3_1_1">2023.09.28</div>
              <div class="wrap1_3_1_2">已延期</div>
              <div class="wrap1_3_1_3">点击补款</div>
          </div>
        </div>
      </div>
    </div>
    <tabbar :current="1"></tabbar>
  </div>
</template>
<script>
import tabbar from "../../components/uiq-tabbar/uiq-tabbar.vue";
import UImage from "../../uview-ui/components/u--image/u--image.vue";

export default {
  name: "index",
  components: {UImage, tabbar}
}
</script>
<style scoped lang="scss">

.order-goods {
  box-sizing: border-box;
  padding-top: 46rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  .content3{
    .wrap1{
      overflow: hidden;
      padding-left: 20rpx;
      border-radius: 20rpx;
      background-color: #fff;
      height: 228rpx;
      display: flex;
      align-items: center;
      .wrap1_3{
        display: flex;
        margin-left: auto;
        background-color: #FF4848;
        position: relative;
        width: 144rpx;
        height: 228rpx;
        .wrap1_3_1{
          padding-bottom: 6rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
         border-top-right-radius: 15rpx;
          left: 4rpx;
          top: 4rpx;
          width: 136rpx;
          background-color: #fff;
          position: absolute;
          .wrap1_3_1_1{
            font-size: 16rpx;
            color: #FF4848;
          }
          .wrap1_3_1_2{
            font-size: 24rpx;
            color: #FF4848;
          }
          .wrap1_3_1_3{
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8rpx;
            color: #fff;
            font-size: 16rpx;
          width: 110rpx;
          height: 34rpx;
          background-color: #000;
          }
        }
      }
      .wrap1_2{
        margin-left: 14rpx;
        display: flex;
        flex-direction: column;
        align-items: start;
        .wrap1_2_1{
        margin-bottom: 12rpx;
          color: #000;
          font-size: 28rpx;
        }
        .wrap1_2_2{
          margin-bottom: 12rpx;
          color: #808080;
          font-size: 24rpx;

        }
        .wrap1_2_3{
          margin-bottom: 12rpx;
          color: #808080;
          font-size: 24rpx;
        }
        .wrap1_2_4{

          color: #FF4848;
          font-size: 24rpx;
        }
      }
      .wrap1_1{
        image{
          width: 188rpx;
          height: 188rpx;
        }
      }
    }
  }
.content2{
  margin-top: 26rpx;
  display: flex;
  justify-content: space-between;
  .wrap2{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20rpx;
    color: #fff;
    font-size: 20rpx;
    width: 94rpx;
    height: 52rpx;
    background-color:#4E964D ;
  }
  .wrap1{
    align-items: center;
    display: flex;
    border-radius: 20rpx;
    background-color: rgba(0,0,0,0.5);
    width: 586rpx;
    height: 52rpx;
    .wrap1_2{
      margin-left: 20rpx;
      margin-right: 20rpx;
      width: 1rpx;
      height: 30rpx;
      background-color: #fff;
    }
    input{

    }
    .wrap1_1{
      margin-left: 26rpx;
      image{
        width: 28rpx;
        height: 28rpx;
      }
    }
  }
}
  .content1 {
    display: flex;
    justify-content: space-between;
  .wrap3{
    font-size: 24rpx;
    color: #fff;
    width: 132rpx;
    height: 52rpx;
    background-color: #76C458;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20rpx;
  }
    .wrap2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wrap2_1 {
        color: #4E964D;
        font-size: 32rpx;

      }
      .wrap2_2 {
color: #7C9F6F;
        font-size: 16rpx;
      }
    }

    .wrap1 {
      .wrap1_1 {
        justify-content: center;
        border-radius: 20rpx;
        width: 156rpx;
        height: 52rpx;
        background-color: #4E964D;
        color: #fff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>