<template>
	<view class="flex-col page">
	  <view class="flex-col">
	    <!-- <view class="flex-col justify-start items-start image-wrapper">
	      <image
	        class="image"
	        src="https://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=a5af1f04bfd2af602d9d0f811b50717c.png"
	      />
	    </view> -->
	    <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=6711ccc71511d900114adddf&name=64684657f3d9caa6311490ac957cef11.png"
	          />
	          <view class="flex-col items-start flex-1">
	            <text class="font text">交易关闭</text>
	            <text class="font_2 text_2 mt-5">超时未付款，订单自动关闭</text>
	          </view>
	        </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=6711ccc71511d900114adddf&name=5da41d16a3c58ce9514d9a7f9ee5a577.png"
	          />
	          <view class="flex-col items-start flex-1 ml-8">
	            <text class="font text_3">张三 15888610253</text>
	            <text class="font_2 text_4 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=6711ccc71511d900114adddf&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_5 mt-11">已选种类：紫色</text>
	                </view>
	                <view class="flex-row items-center mt-38">
	                  <view class="flex-row items-center group_5">
	                    <text class="text_6">138.</text>
	                    <image
	                      class="image_5 image_6"
	                      src="https://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=2f4ccfc0cd1defce0b3dbfd78924caaa.png"
	                    />
	                  </view>
	                  <text class="font_3 text_7">00</text>
	                </view>
	              </view>
	            </view>
	            <text class="font text_8">×1</text>
	          </view>
	          <view class="flex-row justify-between items-center self-stretch view">
	            <text class="font_4 text_9">商品总价</text>
	            <view class="flex-row items-center">
	              <image
	                class="shrink-0 image_5"
	                src="https://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=2f4ccfc0cd1defce0b3dbfd78924caaa.png"
	              />
	              <text class="font_3 text_10">138.00</text>
	            </view>
	          </view>
	          <view class="flex-row justify-between items-center self-stretch view_2">
	            <text class="font_4 text_11">优惠券</text>
	            <view class="flex-row items-center group_1">
	              <image
	                class="shrink-0 image_7"
	                src="https://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=76832ff04826f3f5facd2cef778f7c90.png"
	              />
	              <text class="font_3 text_12">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=6711ccc71511d900114adddf&name=ec94d39c7e1d57a0036168c9be95b5c6.png"
	              />
	              <text class="font text_13">应付款：</text>
	            </view>
	            <text class="font_3 text_14">88.00</text>
	          </view>
	          <view class="self-stretch divider view_3"></view>
	          <text class="self-start font_4 text_15">买家留言</text>
	          <view class="flex-col justify-start self-stretch text-wrapper">
	            <text class="font_2 text_16">
	              希望所使用的材料是可持续来源的，并且制作工艺要精细，以确保每一朵花瓣都能生动地展现出绒花的质感和美感。
	            </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_17">订单编号：</text>
	            <view class="flex-row items-center group_9">
	              <text class="font_5 text_18">E20241005095840091406189</text>
	              <view class="flex-col justify-start items-center shrink-0 text-wrapper_2 ml-2">
	                <text class="text_19">复制</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-row justify-between items-center self-stretch view_6">
	            <text class="font_2 text_20">创建时间：</text>
	            <text class="font_5 text_21">2024-10-05 09:58:41</text>
	          </view>
	          <view class="flex-row justify-between items-center self-stretch view_7">
	            <text class="font_2 text_22">成交时间：</text>
	            <text class="font_5 text_23">2024-10-05 11:47:08</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=6711ccc71511d900114adddf&name=cc4704a44066566fbb28b63075652a13.png"
	            />
	            <text class="font_6 text_24 ml-6">在线客服</text>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col">
	        <view class="flex-row justify-center items-center">
	          <image
	            class="image_10"
	            src="https://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=c75d4968e5a28aab5e0de8c473671ccd.png"
	          />
	          <text class="font_6 text_25 ml-11">更多精选商品</text>
	          <image
	            class="image_10 ml-11"
	            src="https://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=a2da074d4ef9d1f137e125f07493b694.png"
	          />
	        </view>
	        <view class="grid mt-19">
	          <view class="flex-col section_5" v-for="(item, index) in items" :key="index">
	            <image
	              class="shrink-0 image_11"
	              src="https://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=7c9880424aaae74738a71288cee2f8ee.png"
	            />
	            <text class="font_7 text_26">【非遗手工艺体验】玉雕-古法制玉体验</text>
	            <view class="flex-row items-center group_11">
	              <image
	                class="image_12"
	                src="https://ide.code.fun/api/image?token=6711ccc71511d900114adddf&name=585ec91111de1a66d2b2601b1f5d94b6.png"
	              />
	              <text class="font_8">99.00</text>
	            </view>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
	  <view class="flex-col justify-start items-end section_4 mt-64">
	    <view class="flex-col justify-start items-center text-wrapper_3">
			<text class="font_6 text_27">删除订单</text>
		</view>
	  </view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
const items = ref([null,null,null,null])
	
</script>

<style lang="scss" scoped>
.mt-5 {
  margin-top: 9.38rpx;
}
.mt-9 {
  margin-top: 16.88rpx;
}
.ml-17 {
  margin-left: 31.88rpx;
}
.mt-11 {
  margin-top: 20.63rpx;
}
.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 38.51rpx;
}
.section {
  padding: 20.49rpx 22.37rpx 9.51rpx 26.12rpx;
  background-color: #fffef8;
  border-radius: 18.75rpx;
  border: solid 1.88rpx #818181;
}
.image_2 {
  width: 75rpx;
  height: 75rpx;
}
.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;
}
.font_2 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 20.68rpx;
  color: #818181;
}
.text_2 {
  color: #6b6e72;
  line-height: 21.34rpx;
}
.section_2 {
  padding: 32.72rpx 14.94rpx 31.99rpx 18.68rpx;
  background-color: #fffef8;
  border-radius: 18.75rpx;
  border: solid 1.88rpx #818181;
}
.image_3 {
  width: 43.13rpx;
  height: 43.13rpx;
}
.text_3 {
  line-height: 23.77rpx;
}
.text_4 {
  line-height: 20.91rpx;
}
.section_3 {
  padding: 0 14.89rpx 26.38rpx 18.62rpx;
  background-color: #fffef8;
  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_5 {
  margin-left: 2.1rpx;
  line-height: 20.79rpx;
}
.group_5 {
  width: 90.66rpx;
}
.text_6 {
  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_7 {
  font-weight: 600;
  line-height: 19.29rpx;
}
.text_8 {
  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_9 {
  line-height: 24.36rpx;
}
.text_10 {
  line-height: 19.39rpx;
}
.view_2 {
  margin-top: 13.13rpx;
  padding: 0 4.69rpx;
}
.text_11 {
  line-height: 24.26rpx;
}
.group_1 {
  margin-right: 2.72rpx;
}
.image_7 {
  width: 41.25rpx;
  height: 30rpx;
}
.text_12 {
  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_13 {
  margin-left: -128.44rpx;
  line-height: 24.54rpx;
}
.text_14 {
  color: #fb8b05;
  line-height: 19.39rpx;
}
.divider {
  background-color: #dfdfdf;
  height: 1.88rpx;
}
.view_3 {
  margin: 16.88rpx 9.62rpx 0 3.75rpx;
}
.text_15 {
  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: #fffef8;
  border-radius: 9.38rpx;
  border: solid 1.88rpx #f1f1b5;
}
.text_16 {
  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_17 {
  line-height: 20.85rpx;
}
.group_9 {
  margin-right: 4.74rpx;
}
.font_5 {
  font-size: 22.5rpx;
  font-family: Open Sans;
  line-height: 16.63rpx;
  color: #323232;
}
.text_18 {
  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_19 {
  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_20 {
  line-height: 20.7rpx;
}
.text_21 {
  margin-right: 157.91rpx;
}
.view_7 {
  margin-top: 14.51rpx;
  padding: 0 4.56rpx;
}
.text_22 {
  line-height: 20.89rpx;
}
.text_23 {
  margin-right: 157.71rpx;
}
.group_10 {
  margin-top: 33.43rpx;
}
.image_9 {
  width: 45rpx;
  height: 45rpx;
}
.font_6 {
  font-size: 30rpx;
  font-family: Open Sans;
  color: #323232;
}
.text_24 {
  line-height: 27.69rpx;
}
.image_10 {
  width: 251.25rpx;
  height: 1.88rpx;
}
.text_25 {
  line-height: 27.71rpx;
}
.grid {
  margin-left: 11.72rpx;
  margin-right: 14.53rpx;
  margin-bottom: 136rpx;
  height: 965.63rpx;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 32.01rpx;
  column-gap: 30rpx;
}
.section_5 {
  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_26 {
  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 {
	position: fixed;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 0;
  padding: 16.88rpx 0 15rpx;
  background-color: #fffef8;
}
.text-wrapper_3 {
  margin-right: 26.27rpx;
  padding: 19.76rpx 0 20.19rpx;
  background-color: #fffef8;
  border-radius: 75rpx;
  width: 204.38rpx;
  border: solid 1.88rpx #cbcbcb;
}
.text_27 {
  line-height: 27.54rpx;
}
	@import url(../../../common/css/global.css);
</style>
