diff --git a/common/styles/main.css b/common/styles/main.css
index 32b9eb3..09413b7 100644
--- a/common/styles/main.css
+++ b/common/styles/main.css
@@ -501,6 +501,17 @@ radio.white.checked .uni-radio-input {
 	box-sizing: border-box;
 }
 
+.cu-btn1 {
+	width: 150rpx;
+	height: 63rpx;
+	background: #fff;
+	border-radius: 31.5rpx;
+	font-size: 24rpx;
+	margin: 0rpx 20rpx 0rpx 20rpx;
+	line-height: 60rpx;
+	padding: 0;
+}
+
 .solid::after {
 	border: 1upx solid rgba(0, 0, 0, 0.1);
 }
diff --git a/common/styles/theme.css b/common/styles/theme.css
index c7d3b21..6201f2b 100644
--- a/common/styles/theme.css
+++ b/common/styles/theme.css
@@ -92,6 +92,10 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 	background: #FFFFFF !important;
 }
 
+.lf-bg-red {
+	background: #FF0000 !important;
+}
+
 .lf-color-gray {
 	color: #777777 !important;
 }
@@ -104,6 +108,22 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 	background: #1998FE !important;
 }
 
+.lf-color-green {
+	color: #0BCE5F !important;
+}
+
+.lf-border-green {
+	border: 1px solid #0BCE5F !important;
+}
+
+.lf-border-blue {
+	border: 1px solid #1998FE !important;
+}
+
+.lf-border-gray {
+	border: 1px solid #555555 !important;
+}
+
 /* 一些常用的字体颜色 */
 .lf-color-price {
 	color: #FF0000 !important;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..0cfea6f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,11 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "tki-qrcode": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/tki-qrcode/-/tki-qrcode-0.1.6.tgz",
+      "integrity": "sha512-EnnlS8psowC7PsW3MDYcxvJYkuklX3WAZ/BYanR4TdBHTu74GfjTBX8Y16REP+AeDENiVtBPh4jtTRL2P736hQ=="
+    }
+  }
+}
diff --git a/pages.json b/pages.json
index 5a7c5d3..288484d 100644
--- a/pages.json
+++ b/pages.json
@@ -41,6 +41,24 @@
 				"navigationBarTitleText": "确认订单"
 			}
 		},
+		{
+			"path": "pages/order/order_details",
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
+		},
+		{
+			"path": "pages/order/unpay_details",
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
+		},
+		{
+			"path": "pages/order/order",
+			"style": {
+				"navigationBarTitleText": "我的订单"
+			}
+		},
 		{
 			"path": "pages/payState/paystate",
 			"style": {
diff --git a/pages/order/order.vue b/pages/order/order.vue
new file mode 100644
index 0000000..e54f3c9
--- /dev/null
+++ b/pages/order/order.vue
@@ -0,0 +1,275 @@
+<template>
+	<view>
+		<!-- tab标签 -->
+		<view class="lf-p-r-32 lf-p-l-32">
+			<u-tabs :list="tab_list" bg-color="#F6F6F6" :is-scroll="true" :current="current" @change="change"></u-tabs>
+		</view>
+		<swiper :style="{height: 'calc('+ windowHeight +'px - 110rpx)', width: '750rpx'}" :current="current"
+			@change="swiperChange">
+			<swiper-item v-for="(tab, tabIndex) in tab_list" :key="tabIndex">
+				<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher"
+					@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
+					<view class="flex-direction justify-around list" @click="$url('/pages/order/order_details?order_id=1')">
+						<view class="lf-row-between">
+							<view class="left" style="position: relative;display: flex;">
+								<image src="../../static/logo.png" mode="aspectFill"></image>
+							</view>
+							<view class="right">
+								<view class="lf-line-2 title lf-font-28 lf-color-333" style="line-height: 40rpx;">南澳站·潮玩旅游胜地 身处亚热带风情/玩转南澳</view>
+								<view class="lf-flex tips lf-m-t-10">
+									<text class="progress margin-right-xs lf-color-gray">数量</text>
+									<text class="bought lf-color-gray">x 1</text>
+								</view>
+								<view class="lf-row-between price lf-m-t-16" style="padding-right: 6rpx;">
+									<lf-price :price="599.00" style="margin-top: 10rpx;" />
+									<button class="lf-font-24 radius-order">立即付款</button>
+									
+									<!-- <button class="cu-btn1 lf-color-green lf-border-green">立即使用</button> -->
+									<!-- <button class="cu-btn1 lf-color-blue lf-border-blue">已使用</button> -->
+									<!-- <button class="cu-btn1 lf-color-gray lf-border-gray">等待审核</button> -->
+								</view>
+							</view>
+						</view>
+						<view>
+							<view class="solid-top flex justify-between align-center text-center">
+								<view class="text-gray lf-font-28" style="padding: 20rpx;">
+									2021-7-6 23:24:46
+								</view>
+								<view class="lf-color-price" style="padding: 20rpx 24rpx 20rpx 20rpx;">
+									请在10分钟内付款
+								</view>
+							</view>
+						</view>
+					</view>
+					<!-- 空数据的情况 -->
+					<view class="loading-more">
+						<text v-if="tab.list.length"
+							:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
+						<my-nocontent v-else></my-nocontent>
+					</view>
+					<!-- 回到顶部 -->
+					<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}">
+					</u-back-top>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tab_list: [{
+						name: '全部',
+						type: 'all',
+						list: [],
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					}, {
+						name: '待付款',
+						type: 'unpaid',
+						list: [],
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					}, {
+						name: '已付款',
+						type: 'paid',
+						list: [],
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					},
+					{
+						name: '已完成',
+						type: 'complete',
+						list: [],
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					},
+					{
+						name: '售后',
+						type: 'after_sales',
+						list: [],
+						loadingClass: true,
+						loadingText: '正在加载中',
+						page: 1,
+						isPage: true
+					}
+				],
+				current: 0, // tab下表
+				pageSize: 10,
+				windowHeight: 0, // 屏幕可用高度
+			}
+		},
+		onLoad(e) {
+			this.windowHeight = getApp().globalData.windowHeight;
+		},
+		methods: {
+			//获取订单数据 
+			getUserOrder() {
+				console.log('获取数据')
+			},
+
+			// 切换tab
+			change(index) {
+				this.current = index;
+				this.getUserOrder();
+			},
+			// 滑块下标值变化
+			swiperChange(event) {
+				this.current = event.detail.current;
+				if (event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
+				this.getUserOrder();
+			},
+
+			// 页面触底，加载下一页
+			onScrolltolower() {
+				let tab_item = this.tab_list[this.current];
+				if (tab_item.isPage) {
+					tab_item.page = tab_item.page + 1;
+					this.getUserOrder();
+				}
+			},
+			// scroll-view 下拉刷新
+			onRefresherrefresh() {
+				this.isRefresher = true;
+				this.refreshFn({
+					type: 'scrollRefresh'
+				});
+			},
+			// 下拉刷新处理
+			refreshFn(options) {
+				let tab_item = this.tab_list[this.current];
+				tab_item.page = 1;
+				tab_item.isPage = true;
+				tab_item.loadingClass = true;
+				tab_item.loadingText = '正在加载中';
+				this.getUserOrder(options);
+			}
+		},
+		onPullDownRefresh() {
+			this.refreshFn({
+				type: 'pageRefresh'
+			});
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #F6F6F6;
+	}
+	.radius-order {
+		border-radius: 31.5rpx;
+	}
+	
+	.font-400 {
+		font-weight: 400;
+	}
+
+	.tag-self {
+		position: absolute !important;
+		top: 0 !important;
+		border-radius: 20rpx 0 20rpx 0 !important;
+		width: max-content;
+		height: 32rpx !important;
+	}
+
+	.title {
+		font-size: 28rpx;
+		color: $u-content-color;
+		height: 80rpx;
+	}
+
+	// tab
+	.ctab {
+		width: 100%;
+		margin: 20rpx 0 0rpx 0rpx;
+		padding: 0 22rpx;
+	}
+
+	// 商品列表
+	.com {
+		width: 100%;
+		overflow: hidden;
+
+		.list {
+			border-radius: 20rpx;
+			overflow: hidden;
+			margin: 0 32rpx 30rpx 32rpx;
+			background-color: #FFFFFF;
+			// box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
+			align-items: flex-start;
+
+			.left {
+				overflow: hidden;
+
+				image {
+					width: 210rpx;
+					height: 210rpx;
+					margin: 20rpx;
+					border-radius: 20rpx;
+				}
+			}
+
+			.right {
+				overflow: hidden;
+				width: 67%;
+
+				.title {
+					margin: 0rpx 20rpx 0rpx 0;
+					color: #222222;
+					font-size: 32rpx;
+				}
+
+				.tips {
+					margin: 16rpx 0;
+					overflow: hidden;
+
+					.u-line-progress {
+						width: 112rpx;
+						overflow: hidden;
+						margin-right: 20rpx;
+					}
+
+					.progress {
+						color: #777777;
+						font-size: 24rpx;
+					}
+
+					.bought {
+						color: #777777;
+						font-size: 24rpx;
+						margin-right: 20rpx;
+					}
+				}
+
+				.price {
+					overflow: hidden;
+					color: #FF0000;
+
+					button {
+						width: 150rpx;
+						height: 63rpx;
+						background: #fff;
+						border-radius: 31.5rpx;
+						font-size: 24rpx;
+						color: #FF0000;
+						margin: 0rpx 20rpx 0rpx 20rpx;
+						border: 1px solid #FF0000;
+						line-height: 60rpx;
+						padding: 0;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages/order/order_details.vue b/pages/order/order_details.vue
new file mode 100644
index 0000000..0422041
--- /dev/null
+++ b/pages/order/order_details.vue
@@ -0,0 +1,291 @@
+<template>
+	<view>
+		<!-- 商品信息 -->
+		<block>
+			<view class="bg-white">
+				<view class="flex justify-between align-start" style="padding: 32rpx 32rpx 30rpx 32rpx;">
+					<image src="../../static/logo.png" mode="aspectFill"
+						style="width: 240rpx; height: 240rpx;border-radius: 20rpx;"></image>
+					<view class="flex-sub padding-left-sm">
+						<view class="bref-box lf-line-2 text-black1 lf-font-28 lf-font-bold"
+							style="height: 88rpx;line-height: 44rpx;">
+							南澳站·潮玩旅游胜地 身处亚热带风情/玩转南澳
+						</view>
+						<text class="block lf-color-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量
+							<text class="margin-left margin-right-xs lf-color-gray">x</text>1</text>
+
+						<view class="flex justify-between" style="margin-top: 28rpx;">
+							<lf-price :price="599" style="margin-top: 8rpx;" />
+							<view>
+								<!-- <button class="cu-btn1 lf-color-gray lf-border-gray">申请退款</button> -->
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<self-line />
+			<!-- 表单 -->
+			<view class="bg-white">
+				<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
+					<text class="lf-color-555 lf-font-28">订单编号</text>
+					<view>
+						<text class="margin-right lf-font-28 text-black1">2368492461046128742764</text>
+						<text class="text-orange lf-font-28" @click="copy(2368492461046128742764)">复制</text>
+					</view>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="lf-color-555 lf-font-28">下单时间</text>
+					<text class="lf-font-28 text-black1">2021-7-6 22:34:14</text>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="lf-color-555 lf-font-28">付款时间</text>
+					<text class="lf-font-28 text-black1">2021-7-6 22:34:14</text>
+				</view>
+				<view class="cu-bar padding-lr">
+					<text class="lf-color-555 lf-font-28">支付方式</text>
+					<text class="lf-font-28 text-black1">微信支付</text>
+				</view>
+			</view>
+
+			<self-line />
+			<view class="bg-white">
+				<view class="cu-bar padding-lr">
+					<text class="lf-color-555 lf-font-28">优惠</text>
+					<text class="lf-font-28 lf-color-price">活动优惠-50元</text>
+				</view>
+			</view>
+
+			<view>
+				<self-line />
+				<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb"
+					style="padding-bottom: 116rpx;">
+					<view>
+						<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff"
+							foreground="#000" pdground="#000" :onval="true" :loadMake="true" />
+					</view>
+					<view style="margin-top: 10rpx;position: relative;top: 26rpx;">
+						<view class="lf-font-28 text-black1">
+						{{checkArea}} 
+						<text v-if="false" style="position: relative;left: 172rpx;top: -36rpx;display: inherit;" class="lf-color-blue lf-font-28" @tap="copy(checkArea)">复制</text></view>
+					</view>
+					<view style="margin-top: 10rpx;" v-if="false">
+						<view class="lf-color-green lf-font-28">
+							待使用
+							<text class="lf-iconfont lf-icon-shuaxin1 lf-font-40"
+								style="color: #999;position: relative;left: 84rpx;top: -42rpx;display: inherit;"
+								@tap="refreshCode()"></text>
+						</view>
+					</view>
+					<view style="margin-top: 44rpx;" v-else>
+						<view class="lf-color-999 lf-font-28">
+							已使用
+						</view>
+					</view>
+				</view>
+				<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top1 btn-bottom">
+					<view class="flex align-center">
+						<text class="lf-color-555 lf-font-28" style="margin-right: 20rpx;">实付款</text>
+						<lf-price :price="549" />
+					</view>
+					
+					<button class="btn bg-green" @tap="submit">
+						<text class="lf-font-32 text-white">立即使用</text>
+					</button>
+					
+				<!-- 	<button class="btn bg-blue">
+						<text class="lf-font-32 text-white">已使用</text>
+					</button>
+					
+					<button class="btn lf-bg-gray">
+						<text class="lf-font-32 text-white">等待审核</text>
+					</button> -->
+				</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	import tkiQrcode from "tki-qrcode" // 二维码生成器
+	export default {
+		components: {
+			tkiQrcode
+		},
+		data() {
+			return {
+				base64Img: '', //
+				skeletonLoading: true,
+				loading: false,
+				order_id: 1,
+				orderDetails: {},
+				checkArea: 'USI782936437829'
+			}
+		},
+		computed: {
+			total() {
+				return this.num * this.price
+			},
+			isRight() {
+				return function(val) {
+					return this.$shared.isRight(val);
+				}
+			}
+		},
+		onLoad(e) {
+			this.order_id = e.order_id
+			if (this.order_id) {
+				// this.getOrderDetails()
+			}
+		},
+		methods: {
+			refreshCode() {
+				this.getOrderDetails()
+				this.$msg('刷新成功')
+			},
+			//二维码回调
+			qrR(data) {
+				this.base64Img = data;
+			},
+			getOrderDetails() {
+				this.$http(this.API.API_ORDER_DETAILS, {
+					order_id: this.order_id
+				}).then(res => {
+					if (res.code == 0) {
+						this.orderDetails = res.data
+						this.checkArea = res.data.confirm_code
+						this.skeletonLoading = false
+					}
+
+				}).catch(err => {
+					setTimeout(() => {
+						this.$toBack()
+					}, 1000)
+				});
+			},
+			// 点击复制
+			copy(text) {
+				uni.setClipboardData({
+					data: text
+				});
+			},
+			submit() {
+				this.$routerGo('/pages/order/order?type=all')
+			},
+		},
+		created() {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.btn{
+		margin: 0;
+		padding: 0;
+		width: 212rpx;
+		height: 82rpx;
+		background-color: #1998FE;
+		color: #FFFFFF;
+		line-height: 80rpx;
+		font-size: 32rpx;
+		border-radius: 41rpx;
+	}
+	.tag-self {
+		position: absolute !important;
+		top: 0 !important;
+		border-radius: 20rpx 0 20rpx 0 !important;
+		width: max-content;
+		height: 32rpx !important;
+	}
+
+	.title {
+		font-size: 28rpx;
+		color: $u-content-color;
+		height: 90rpx;
+	}
+
+	// tab
+	.ctab {
+		width: 100%;
+		margin: 20rpx 0 0rpx 0rpx;
+		padding: 0 22rpx;
+	}
+
+	// 商品列表
+	.com {
+		width: 100%;
+		overflow: hidden;
+
+		.list {
+			border-radius: 10rpx;
+			overflow: hidden;
+			margin: 20rpx 32rpx;
+			background-color: #FFFFFF;
+			// box-shadow: 0 0 10px 5px #e5e5e5;
+			box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
+			align-items: flex-start;
+
+			.left {
+				overflow: hidden;
+
+				image {
+					width: 186rpx;
+					height: 186rpx;
+					margin: 20rpx;
+					border-radius: 10rpx;
+				}
+			}
+
+			.right {
+				overflow: hidden;
+				width: 64%;
+
+				.title {
+					margin: 0rpx 20rpx 10rpx 0;
+					color: #222222;
+					font-size: 32rpx;
+				}
+
+				.tips {
+					margin: 16rpx 0;
+					overflow: hidden;
+
+					.u-line-progress {
+						width: 112rpx;
+						overflow: hidden;
+						margin-right: 20rpx;
+					}
+
+					.progress {
+						color: #777777;
+						font-size: 24rpx;
+					}
+
+					.bought {
+						color: #777777;
+						font-size: 24rpx;
+						margin-right: 20rpx;
+					}
+				}
+
+				.price {
+					overflow: hidden;
+					color: #FF0000;
+					margin-top: 10rpx;
+
+					button {
+						width: 176rpx;
+						height: 60rpx;
+						background: #FE9903;
+						border-radius: 15px;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						margin: 0rpx 20rpx 0rpx 20rpx;
+						border: none;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages/order/unpay_details.vue b/pages/order/unpay_details.vue
new file mode 100644
index 0000000..f4e1bc7
--- /dev/null
+++ b/pages/order/unpay_details.vue
@@ -0,0 +1,237 @@
+<template>
+	<view>
+		<!-- 商品信息 -->
+		<block>
+			<view class="bg-white">
+				<view class="flex justify-between align-start" style="padding: 32rpx 32rpx 30rpx 32rpx;">
+					<image src="../../static/logo.png" mode="aspectFill"
+						style="width: 240rpx; height: 240rpx;border-radius: 20rpx;"></image>
+					<view class="flex-sub padding-left-sm">
+						<view class="bref-box lf-line-2 text-black1 lf-font-28 lf-font-bold"
+							style="height: 88rpx;line-height: 44rpx;">
+							南澳站·潮玩旅游胜地 身处亚热带风情/玩转南澳
+						</view>
+						<text class="block lf-color-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量
+							<text class="margin-left margin-right-xs lf-color-gray">x</text>1</text>
+
+						<view class="flex justify-between" style="margin-top: 28rpx;">
+							<lf-price :price="599" style="margin-top: 8rpx;" />
+							<view>
+								<!-- <button class="cu-btn1 lf-color-gray lf-border-gray">申请退款</button> -->
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<self-line />
+			<!-- 表单 -->
+			<view class="bg-white">
+				<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
+					<text class="lf-color-555 lf-font-28">订单编号</text>
+					<view>
+						<text class="margin-right lf-font-28 text-black1">2368492461046128742764</text>
+						<text class="text-orange lf-font-28" @click="copy(2368492461046128742764)">复制</text>
+					</view>
+				</view>
+				<view class="cu-bar padding-lr solid-bottom">
+					<text class="lf-color-555 lf-font-28">下单时间</text>
+					<text class="lf-font-28 text-black1">2021-7-6 22:34:14</text>
+				</view>
+				<view class="cu-bar padding-lr">
+					<text class="lf-color-555 lf-font-28">支付方式</text>
+					<text class="lf-font-28 text-black1">微信支付</text>
+				</view>
+			</view>
+
+			<self-line />
+			<view class="bg-white">
+				<view class="cu-bar padding-lr">
+					<text class="lf-color-555 lf-font-28">优惠</text>
+					<text class="lf-font-28 lf-color-price">活动优惠-50元</text>
+				</view>
+			</view>
+
+			<view>
+				<self-line />
+				<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top1 btn-bottom">
+					<view class="flex align-center">
+						<text class="lf-color-555 lf-font-28" style="margin-right: 20rpx;">待付款</text>
+						<lf-price :price="549" />
+					</view>
+					
+					<button class="btn lf-bg-red" @tap="submit">
+						<text class="lf-font-32 text-white">立即使用</text>
+					</button>
+
+				</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				base64Img: '', //
+				skeletonLoading: true,
+				loading: false,
+				order_id: 1,
+				orderDetails: {},
+				checkArea: 'USI782936437829'
+			}
+		},
+		computed: {
+			total() {
+				return this.num * this.price
+			},
+			isRight() {
+				return function(val) {
+					return this.$shared.isRight(val);
+				}
+			}
+		},
+		onLoad(e) {
+			this.order_id = e.order_id
+			if (this.order_id) {
+				// this.getOrderDetails()
+			}
+		},
+		methods: {
+			getOrderDetails() {
+				this.$http(this.API.API_ORDER_DETAILS, {
+					order_id: this.order_id
+				}).then(res => {
+					if (res.code == 0) {
+						this.orderDetails = res.data
+						this.checkArea = res.data.confirm_code
+						this.skeletonLoading = false
+					}
+
+				}).catch(err => {
+					setTimeout(() => {
+						this.$toBack()
+					}, 1000)
+				});
+			},
+			submit() {
+				this.$routerGo('/pages/order/order?type=all')
+			},
+		},
+		created() {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.btn{
+		margin: 0;
+		padding: 0;
+		width: 212rpx;
+		height: 82rpx;
+		background-color: #1998FE;
+		color: #FFFFFF;
+		line-height: 80rpx;
+		font-size: 32rpx;
+		border-radius: 41rpx;
+	}
+	.tag-self {
+		position: absolute !important;
+		top: 0 !important;
+		border-radius: 20rpx 0 20rpx 0 !important;
+		width: max-content;
+		height: 32rpx !important;
+	}
+
+	.title {
+		font-size: 28rpx;
+		color: $u-content-color;
+		height: 90rpx;
+	}
+
+	// tab
+	.ctab {
+		width: 100%;
+		margin: 20rpx 0 0rpx 0rpx;
+		padding: 0 22rpx;
+	}
+
+	// 商品列表
+	.com {
+		width: 100%;
+		overflow: hidden;
+
+		.list {
+			border-radius: 10rpx;
+			overflow: hidden;
+			margin: 20rpx 32rpx;
+			background-color: #FFFFFF;
+			// box-shadow: 0 0 10px 5px #e5e5e5;
+			box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
+			align-items: flex-start;
+
+			.left {
+				overflow: hidden;
+
+				image {
+					width: 186rpx;
+					height: 186rpx;
+					margin: 20rpx;
+					border-radius: 10rpx;
+				}
+			}
+
+			.right {
+				overflow: hidden;
+				width: 64%;
+
+				.title {
+					margin: 0rpx 20rpx 10rpx 0;
+					color: #222222;
+					font-size: 32rpx;
+				}
+
+				.tips {
+					margin: 16rpx 0;
+					overflow: hidden;
+
+					.u-line-progress {
+						width: 112rpx;
+						overflow: hidden;
+						margin-right: 20rpx;
+					}
+
+					.progress {
+						color: #777777;
+						font-size: 24rpx;
+					}
+
+					.bought {
+						color: #777777;
+						font-size: 24rpx;
+						margin-right: 20rpx;
+					}
+				}
+
+				.price {
+					overflow: hidden;
+					color: #FF0000;
+					margin-top: 10rpx;
+
+					button {
+						width: 176rpx;
+						height: 60rpx;
+						background: #FE9903;
+						border-radius: 15px;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						margin: 0rpx 20rpx 0rpx 20rpx;
+						border: none;
+					}
+				}
+			}
+		}
+	}
+</style>