shop-applet/pages/replace_replenishment/replenishment.vue

<template>
  <view class="page">
    <u-sticky style="padding: 28rpx 0;background-color: #f5f5f5;" offset-top="0" customNavHeight="0">
      <view class="search_box">
      	<u-search borderColor="#F84221" bgColor="white" :showAction="false" placeholder="搜索订单"
      		 class="search_cls"></u-search>
        <button class="search">搜索</button>
      </view>
    </u-sticky>
    <view>
      <view class="order" v-for="i in 4">
        <view class="order_id flex_sb">
          <view>订单号: {{'ssdfdsfsfds'}}</view>
          <view class="order_type">待补货</view>
        </view>
        <u-line></u-line>
        <view class="short_name">
          <text class="iconfont icon-shangjiadingdan" style="margin-right: 10rpx;"></text>店铺名称
        </view>
        <view class="order_card flex">
          <image class="img" src="http://lihai001.oss-cn-chengdu.aliyuncs.com/def/2023-11-04/202311041457096683.jpg">
          </image>
          <view class="card_text">
            <view class="name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</view>
            <view class="price_num">
              <view>￥10</view>
              <view>x10</view>
            </view>
          </view>
        </view>
        <view class="all_price">
          共计{{'1'}}件 实付金额: <text>￥100.00</text>
        </view>
        <u-line></u-line>
        <view class="flex_sb t_line">
          <view>下单时间:</view>
          <view>sss</view>
        </view>
        <view class="flex_sb t_line">
          <view>支付状态:</view>
          <view>sss</view>
        </view>
        <view class="flex_sb t_line">
          <view>支付方式:</view>
          <view>sss</view>
        </view>
        <button class="confrim">确认收货</button>
      </view>
    </view>
  </view>
</template>
<script>
  // +----------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +----------------------------------------------------------------------
  // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
  // +----------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +----------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +----------------------------------------------------------------------

  export default {
    data() {
      return {

      };
    },
  }
</script>
<style scoped lang="scss">
  .page {
    // padding-top: 28rpx;

    .flex_sb {
      display: flex;
      justify-content: space-between;
    }
    
  }
  
  .search_box{
    width: 694rpx;
    margin: 0 auto;
    position: relative;
    .search_cls{
      width: 100%;
    }
    .search{
      position: absolute;
      top: 50%;
      right: 1%;
      width: 115.65rpx;
      height: 56.82rpx;
      line-height: 56.82rpx;
      text-align: center;
      border-radius: 56.82rpx;
      background-color: #F84221;
      color: #fff;
      transform: translate(0, -50%);
    }
  }

  .order {
    margin: 0 auto;
    margin-bottom: 28rpx;
    padding: 28rpx;
    width: 694rpx;
    background-color: #fff;
    border-radius: 21rpx 21rpx 21rpx 21rpx;

    .order_id {
      padding-bottom: 20rpx;
      font-size: 26.29rpx;
      font-weight: 500;

      .order_type {
        font-size: 30rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #F84221;
      }
    }

    .short_name {
      padding-top: 20rpx;
      padding-bottom: 28rpx;
      font-size: 29.79rpx;
    }

    .order_card {
      height: 150rpx;

      .img {
        width: 150rpx;
        height: 150rpx;
        border-radius: 14rpx;
        margin-right: 20rpx;
      }

      .card_text {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        flex: 1;

        .name {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          max-height: 3em;
          /* 如果每行高度为1.2em，两行文字的高度就是2.4em */
          overflow: hidden;
          font-size: 26.29rpx;
        }

        .price_num {
          display: flex;
          justify-content: space-between;
          font-size: 29.79rpx;
        }
      }
    }

    .all_price {
      text-align: right;
      padding: 20rpx 0;
      font-size: 26.29rpx;

      text {
        color: #F84221;
        font-size: 42rpx;
      }
    }

    .t_line {
      padding-top: 20rpx;
      font-size: 26rpx;
    }

    .confrim {
      margin: 0 auto;
      margin-top: 30rpx;
      width: 589rpx;
      height: 72rpx;
      line-height: 72rpx;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      opacity: 1;
      border: 2rpx solid #F84221;
      font-size: 33rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #F84221;
    }
  }
</style>