536 lines
14 KiB
Vue
536 lines
14 KiB
Vue
<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>
|