jiangchengfeiyi-xiaochengxu/pages/order/productOrderDetail/productOrderDetail.vue

<template>
<view class="flex-col page">
  <view class="flex-col">
    <view class="flex-col group">
      <view class="flex-col group_2">
        <view class="flex-row items-center section">
          <image
            class="image_2"
            src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=9d0406dd677ac37f400278ee3cd0c3b2.png"
          />
          <text class="font text ml-7">等待商家发货</text>
        </view>
        <view class="flex-row items-center section_2 mt-9">
          <image
            class="shrink-0 image_3"
            src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=5da41d16a3c58ce9514d9a7f9ee5a577.png"
          />
          <view class="flex-col items-start flex-1 ml-8">
            <text class="font text_2">张三 15888610253</text>
            <text class="font_2 text_3 mt-12">黑龙江省哈尔滨市呼兰区学院路街道288号哈尔滨华德学院</text>
          </view>
        </view>
        <view class="flex-col section_3 mt-9">
          <view class="flex-row justify-between items-end self-stretch group_3">
            <view class="flex-row">
              <image
                class="image_4"
                src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=1ab7a54755e0a23722c1b9dd0ae981c4.png"
              />
              <view class="flex-col group_4 ml-17">
                <view class="flex-col">
                  <view class="flex-row self-stretch">
                    <text class="font">非遗绒花</text>
                    <text class="font ml-4">【材料包】</text>
                  </view>
                  <text class="self-start font_2 text_4 mt-11">已选种类：紫色</text>
                </view>
                <view class="flex-row items-center mt-38">
                  <view class="flex-row items-center group_5">
                    <text class="text_5">138.</text>
                    <image
                      class="image_5 image_6"
                      src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=4223cdafed72fca52c442dae885cee9c.png"
                    />
                  </view>
                  <text class="font_3 text_6">00</text>
                </view>
              </view>
            </view>
            <text class="font text_7">×1</text>
          </view>
          <view class="flex-row justify-between items-center self-stretch view">
            <text class="font_4 text_8">商品总价</text>
            <view class="flex-row items-center">
              <image
                class="shrink-0 image_5"
                src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=4223cdafed72fca52c442dae885cee9c.png"
              />
              <text class="font_3 text_9">138.00</text>
            </view>
          </view>
          <view class="flex-row justify-between items-center self-stretch view_2">
            <text class="font_4 text_10">优惠券</text>
            <view class="flex-row items-center group_1">
              <image
                class="shrink-0 image_7"
                src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=40498ff9c7a50c056417f381edf937db.png"
              />
              <text class="font_3 text_11">50.00</text>
            </view>
          </view>
          <view class="flex-row justify-end items-center self-stretch group_7">
            <view class="flex-row items-center group_8">
              <image
                class="image_5 image_8"
                src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=f1d048b70eca2a37b0db8f3bd9989205.png"
              />
              <text class="font text_12">应付款：</text>
            </view>
            <text class="font_3 text_13">88.00</text>
          </view>
          <view class="self-stretch divider view_3"></view>
          <text class="self-start font_4 text_14">买家留言</text>
          <view class="flex-col justify-start self-stretch text-wrapper">
            <text class="font_2 text_15">
              希望所使用的材料是可持续来源的，并且制作工艺要精细，以确保每一朵花瓣都能生动地展现出绒花的质感和美感。
            </text>
          </view>
          <view class="self-stretch divider view_4"></view>
          <view class="flex-row justify-between self-stretch view_5">
            <text class="font_2 text_16">订单编号：</text>
            <view class="flex-row items-center group_9">
              <text class="font_5 text_17">E20241005095840091406189</text>
              <view class="flex-col justify-start items-center shrink-0 text-wrapper_2 ml-2">
                <text class="text_18">复制</text>
              </view>
            </view>
          </view>
          <view class="flex-row justify-between items-center self-stretch view_6">
            <text class="font_2 text_19">创建时间：</text>
            <text class="font_5 text_20">2024-10-05 09:58:41</text>
          </view>
          <view class="flex-row justify-center items-center self-stretch group_10">
            <image
              class="image_9"
              src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=cc4704a44066566fbb28b63075652a13.png"
            />
            <text class="font_6 text_21 ml-6">在线客服</text>
          </view>
        </view>
      </view>
      <view class="flex-col mt-39">
        <view class="flex-row justify-center items-center">
          <image
            class="image_10"
            src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=c75d4968e5a28aab5e0de8c473671ccd.png"
          />
          <text class="font_6 text_22 ml-11">更多精选商品</text>
          <image
            class="image_10 ml-11"
            src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=a2da074d4ef9d1f137e125f07493b694.png"
          />
        </view>
        <view class="grid mt-19">
          <view class="flex-col grid-item" v-for="(item, index) in items" :key="index">
            <image
              class="shrink-0 image_11"
              src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=7c9880424aaae74738a71288cee2f8ee.png"
            />
            <text class="font_7 text_23">【非遗手工艺体验】玉雕-古法制玉体验</text>
            <view class="flex-row items-center group_11">
              <image
                class="image_12"
                src="https://ide.code.fun/api/image?token=6726d42bc471750012ddd6db&name=rmb.png"
              />
              <text class="font_8">99.00</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="section_4 mt-64"></view>
</view>
</template>

<script setup>
import { ref } from 'vue'
 	
</script>

<style lang="scss" scoped>
.ml-7 {
  margin-left: 13.13rpx;
}
.mt-9 {
  margin-top: 16.88rpx;
}
.ml-17 {
  margin-left: 31.88rpx;
}
.mt-11 {
  margin-top: 20.63rpx;
}
.mt-39 {
  margin-top: 73.13rpx;
}
.ml-11 {
  margin-left: 20.63rpx;
}
.mt-19 {
  margin-top: 35.63rpx;
}
.page {
  background-color: #fffaf0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.image-wrapper {
  padding: 15rpx 0;
  background-color: #a0522d;
}
.image {
  margin-left: 16.88rpx;
  width: 37.5rpx;
  height: 37.5rpx;
}
.group {
  padding-left: 16.41rpx;
  padding-right: 13.59rpx;
}
.group_2 {
  padding: 15rpx 0;
}
.section {
  padding: 20.49rpx 26.12rpx 22.63rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  border: solid 1.88rpx #818181;
}
.image_2 {
  width: 61.88rpx;
  height: 61.88rpx;
}
.font {
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 24.43rpx;
  color: #323232;
}
.text {
  color: #323233;
  font-size: 28.13rpx;
  line-height: 26.08rpx;
}
.section_2 {
  padding: 32.72rpx 14.94rpx 31.99rpx 18.68rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  border: solid 1.88rpx #818181;
}
.image_3 {
  width: 43.13rpx;
  height: 43.13rpx;
}
.text_2 {
  line-height: 23.77rpx;
}
.font_2 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 20.68rpx;
  color: #818181;
}
.text_3 {
  line-height: 20.91rpx;
}
.section_3 {
  padding: 0 14.89rpx 18.88rpx 18.62rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  border: solid 1.88rpx #818181;
}
.group_3 {
  padding: 20.49rpx 3.75rpx 18.75rpx;
  border-bottom: solid 1.88rpx #dfdfdf;
}
.image_4 {
  margin-bottom: 5.63rpx;
  border-radius: 9.38rpx;
  width: 146.25rpx;
  height: 165rpx;
}
.group_4 {
  margin-top: 4.07rpx;
}
.text_4 {
  margin-left: 2.1rpx;
  line-height: 20.79rpx;
}
.group_5 {
  width: 90.66rpx;
}
.text_5 {
  margin-left: 25.03rpx;
  color: #323232;
  font-size: 33.75rpx;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 24.88rpx;
}
.image_5 {
  width: 30rpx;
  height: 30rpx;
}
.image_6 {
  margin-left: -90.66rpx;
}
.font_3 {
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 20.68rpx;
  color: #323232;
}
.text_6 {
  font-weight: 600;
  line-height: 19.29rpx;
}
.text_7 {
  margin-right: 9.83rpx;
  margin-bottom: 7.5rpx;
  line-height: 18.73rpx;
}
.view {
  margin-top: 26.25rpx;
  padding: 0 5.53rpx;
}
.font_4 {
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 24.43rpx;
  color: #818181;
}
.text_8 {
  line-height: 24.36rpx;
}
.text_9 {
  line-height: 19.39rpx;
}
.view_2 {
  margin-top: 13.13rpx;
  padding: 0 4.69rpx;
}
.text_10 {
  line-height: 24.26rpx;
}
.group_1 {
  margin-right: 2.72rpx;
}
.image_7 {
  width: 41.25rpx;
  height: 30rpx;
}
.text_11 {
  line-height: 19.39rpx;
}
.group_7 {
  margin-top: 16.88rpx;
  padding: 0 5.91rpx;
}
.group_8 {
  width: 128.44rpx;
}
.image_8 {
  margin-left: 98.44rpx;
}
.text_12 {
  margin-left: -128.44rpx;
  line-height: 24.54rpx;
}
.text_13 {
  color: #fb8b05;
  line-height: 19.39rpx;
}
.divider {
  background-color: #dfdfdf;
  height: 1.88rpx;
}
.view_3 {
  margin: 16.88rpx 9.62rpx 0 3.75rpx;
}
.text_14 {
  margin-left: 5.16rpx;
  margin-top: 24.86rpx;
  line-height: 24.21rpx;
}
.text-wrapper {
  margin-right: 13.37rpx;
  margin-top: 16.56rpx;
  padding: 14.64rpx 0 9.77rpx;
  background-color: #ffffff;
  border-radius: 9.38rpx;
  border: solid 1.88rpx #f1f1b5;
}
.text_15 {
  margin-left: 15.37rpx;
  margin-right: 20.27rpx;
  line-height: 26.25rpx;
}
.view_4 {
  margin: 18.75rpx 9.62rpx 0 3.75rpx;
}
.view_5 {
  margin-top: 24.09rpx;
  padding: 0 4.88rpx;
}
.text_16 {
  line-height: 20.85rpx;
}
.group_9 {
  margin-right: 4.74rpx;
}
.font_5 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  color: #323232;
}
.text_17 {
  line-height: 16.54rpx;
}
.text-wrapper_2 {
  padding-bottom: 2.29rpx;
  background-color: #fffef8;
  width: 50.63rpx;
  height: 22.5rpx;
  border: solid 0.94rpx #d1d1d1;
}
.text_18 {
  color: #323232;
  font-size: 18.75rpx;
  font-family: Open Sans;
  line-height: 17.38rpx;
}
.view_6 {
  margin-top: 11.16rpx;
  padding: 0 4.35rpx;
}
.text_19 {
  line-height: 20.7rpx;
}
.text_20 {
  margin-right: 157.91rpx;
  line-height: 16.63rpx;
}
.group_10 {
  margin-top: 27.81rpx;
}
.image_9 {
  width: 45rpx;
  height: 45rpx;
}
.font_6 {
  font-size: 30rpx;
  font-family: Open Sans;
  color: #323232;
}
.text_21 {
  line-height: 27.69rpx;
}
.image_10 {
  width: 251.25rpx;
  height: 1.88rpx;
}
.text_22 {
  line-height: 27.71rpx;
}
.grid {
  margin-left: 11.72rpx;
  margin-right: 14.53rpx;
  height: 965.63rpx;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 30.13rpx;
  column-gap: 28.26rpx;
}
.grid-item {
  padding-bottom: 28.26rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  border: solid 1.88rpx #818181;
}
.image_11 {
  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
  width: 333.75rpx;
  height: 322.5rpx;
}
.font_7 {
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 30rpx;
  color: #000000;
}
.text_23 {
  margin: 8.42rpx 6.69rpx 0 12.06rpx;
  font-size: 24.38rpx;
}
.group_11 {
  margin-top: 17.83rpx;
  padding: 0 22.37rpx;
}
.image_12 {
  width: 26.25rpx;
  height: 26.25rpx;
}
.font_8 {
  font-size: 30rpx;
  font-family: Times New Roman;
  line-height: 20.68rpx;
  color: #fbb612;
}
.section_4 {
  background-color: #ffffff;
  height: 103.13rpx;
}
@import url(../../../common/css/global.css);
</style>