hjb_pc/pages/homeIndex/orderdetails.vue

<template>
  <div class="main">
    <div class="contanier">
      <div class="order-info">
        <div class="txt-info">
          <div class="loaction">您的位置： 所有订单 > 河南省 平顶山市 汝州市 > 订单号：20240112-173907-23577</div>
          <div class="shopping-time">下单时间：2024-01-12 17:39:07</div>
        </div>
        <div class="copy-btn">一键复制订单信息</div>
      </div>
      <div class="goods-info">
        <div class="info-box">
          <div class="img"></div>
          <div class="right">
            <div class="title">
              <div class="title-box">
                <div class="left">【河南 平顶山市 汝州市】愚人家</div>
                <div class="icon">
                  <el-icon><MapLocation /></el-icon>
                </div>
                <div class="map">查看地图</div>
              </div>
              <div class="content">浏览1次</div>
            </div>
            <ul>
                <li>
                    <div class="label">收货时间：</div>
                    <div class="time">2024-01-12 不限时段</div>
                    <div class="timeout">距离接单结束还剩：</div>
                    <div class="timeout-time">6小时16分钟43秒</div>
                </li>
                <li>
                    <div class="label">商品数量：</div>
                    <div class="content">1</div>
                </li>
                <li>
                    <div class="label">商品类型：</div>
                    <div class="type">鲜花</div>
                </li>
                <li>
                    <div class="label">订单类型：</div>
                    <div class="ordder-type">普通订单</div>
                </li>
                <li>
                    <div class="label">有无资料卡：</div>
                    <div class="card">无</div>
                </li>
                <li>
                    <div class="label">需要发票：</div>
                    <div class="invoice">不需要</div>
                </li>
                <li>
                    <div class="label">成交价：</div>
                    <div class="price">￥59.00元</div>
                </li>
            </ul>
            <div class="submit">立即报价</div>
          </div>
        </div>
      </div>
      <div class="product-details">
        <div class="hearder">商品详情</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'
import { MapLocation } from '@element-plus/icons-vue'

const route = useRoute()

// 获取路由参数
const GoodsId = route.query.GoodsId

// 在控制台输出路由参数
console.log(GoodsId)
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  width: 100%;
  .contanier {
    width: 6.25rem;
    margin: 0 auto;
    .order-info {
      padding-top: 0.1458rem;
      color: #8a8e99;
      font-size: 0.0729rem;
      display: flex;

      justify-content: space-between;
      .txt-info {
        display: flex;
        div:nth-child(1) {
          margin-right: 0.2083rem;
        }
      }
      .copy-btn {
        width: 0.8125rem;
        height: 0.1146rem;
        color: #ff4e8d;
        border: 1px solid #ff4e8d;
        text-align: center;
        line-height: 0.1146rem;
      }
    }
    .goods-info {
      width: 100%;
      display: flex;
      justify-content: center;
      .info-box {
        width: 4.5833rem;
        height: 1.875rem;
        padding: 0.1042rem;
        display: flex;
        .img {
          width: 1.6667rem;
          height: 1.6667rem;
          background-color: #d9d9d9;
        }
        .right {
            flex: 1;
          .title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title-box {
              display: flex;
              align-items: center;
              padding: 0.0313rem;
              .left {
                color: #252b3a;
                font-weight: 600;
                font-size: 0.0833rem;
              }
              .icon {
                display: flex;
                align-items: center;
                color: #da141f;
                font-size: 0.0729rem;
                margin-left: 0.0521rem;
              }
              .map {
                color: #8a8e99;
                font-size: 0.0625rem;
              }
            }
            .content{
                color: #8A8E99;
                font-size: .0625rem;
            }
          }
          ul{
            li{
                list-style: none;
                display: flex;
                align-items: center;
                padding: .026rem .1042rem;
                .time{
                    color: #FF4E8D;
                    font-size: .0729rem;
                    font-weight: 600;
                    margin-right: .0521rem;
                }
                .timeout{
                    font-size: .0625rem;
                    color: #575D6C;
                }
                .timeout-time{
                    color: #252B3A;
                    font-size: .0729rem;
                }

                .label{
                    color: #8A8E99;
                    font-size: .0625rem;
                }
                .content{
                    color: #FF4E8D;
                    font-size: .0729rem;
                    font-weight: 600;
                    margin-right: .0521rem;
                }
                .type,.ordder-type,.card,.invoice{
                    color: #252B3A;
                    font-size: .0625rem;
                }
                .price{
                    color: #FF4E8D;
                    font-size: .0729rem;
                    font-weight: 600;
                    margin-right: .0521rem;
                }
            }
          }
          .submit{
            color: #fff;
            text-align: center;
            width: .5833rem;
            height: .1667rem;
            line-height: .1667rem;
            background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
            margin: .2344rem .1042rem;
          }
        }
      }
    }
    .product-details{
      .hearder{
        position: relative;
        color: #252B3A;
        font-size: .1042rem;
        height: .2083rem;
        line-height: .2083rem;
        margin-left: .0521rem;
      }
      .hearder::before{
        position: absolute;
        top: 50%;
        left: 0;
        width: .0156rem;
        height: .0938rem;
        background-color: #FF4E8D;
        transform: translateY(-50%);
        content: ' ';
        display: flex;
        
      }
    }
  }
}
</style>