diff --git a/components/nav-bar/nav-bar.vue b/components/nav-bar/nav-bar.vue
index 26cb799..62718cc 100644
--- a/components/nav-bar/nav-bar.vue
+++ b/components/nav-bar/nav-bar.vue
@@ -6,7 +6,7 @@
 		<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }">
 			<slot name="statusBar"></slot>
 		</view>
-		<view class="nav-box" style="width: 100%;height: 88rpx;">
+		<view class="nav-box" style="width: 100%;height: 88rpx;" @click="openPopup">
 			<slot>
 				<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
 					v-on="$attrs">
@@ -82,294 +82,294 @@
 </template>
 
 <script setup>
-import popup from '../popup/popup.vue'
-import {
-	onMounted,
-	reactive,
-	ref,
-	toRefs
-} from 'vue'
+	import popup from '../popup/popup.vue'
+	import {
+		onMounted,
+		reactive,
+		ref,
+		toRefs
+	} from 'vue'
 
-const topPopup = ref()
+	const topPopup = ref()
 
-// 定义组件属性
-const props = defineProps({
-	bgColor: {
-		type: String,
-		default: '#fff'
-	},
-	textColor: {
-		type: String,
-		default: '#000'
-	},
-	title: {
-		type: String,
-		default: ''
-	},
-	buttonGroup: {
-		type: Array,
-		default: () => []
-	},
-	isRightIcon: {
-		type: Boolean,
-		default: false
-	},
-	isRightButton: {
-		type: Boolean,
-		default: false
-	},
-	rightButtonText: {
-		type: String,
-		default: '确定'
-	},
-	zIndex: {
-		type: Number,
-		default: 999
-	},
-	noBack: {
-		type: Boolean,
-		default: false
-	},
-	isBack: {
-		type: Boolean,
-		default: true
-	},
-	tipLayerText: {
-		type: String,
-		default: ''
-	},
-	isTipLayer: {
-		type: Boolean,
-		default: false
-	},
-	tipLayerType: {
-		type: String,
-		default: ''
-	},
-	isClickNavBarOpenPopup: {
-		type: Boolean,
-		default: false
+	// 定义组件属性
+	const props = defineProps({
+		bgColor: {
+			type: String,
+			default: '#fff'
+		},
+		textColor: {
+			type: String,
+			default: '#000'
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		buttonGroup: {
+			type: Array,
+			default: () => []
+		},
+		isRightIcon: {
+			type: Boolean,
+			default: false
+		},
+		isRightButton: {
+			type: Boolean,
+			default: false
+		},
+		rightButtonText: {
+			type: String,
+			default: '确定'
+		},
+		zIndex: {
+			type: Number,
+			default: 999
+		},
+		noBack: {
+			type: Boolean,
+			default: false
+		},
+		isBack: {
+			type: Boolean,
+			default: true
+		},
+		tipLayerText: {
+			type: String,
+			default: ''
+		},
+		isTipLayer: {
+			type: Boolean,
+			default: false
+		},
+		tipLayerType: {
+			type: String,
+			default: ''
+		},
+		isClickNavBarOpenPopup: {
+			type: Boolean,
+			default: false
+		}
+	})
+
+	// 定义事件
+	const emit = defineEmits(['back', 'right-click', 'button-click', 'refresh'])
+
+	const data = reactive({
+		statusBarHeight: 0,
+		showTipLayer: true,
+	})
+
+	let {
+		showTipLayer
+	} = toRefs(data)
+
+
+	onMounted(() => {
+		// 同步获取系统信息
+		const systemInfo = uni.getSystemInfoSync();
+		data.statusBarHeight = systemInfo.statusBarHeight || 0;
+
+		if (props.isTipLayer) {
+			if (uni.getStorageSync(props.tipLayerType) == props.tipLayerType) {
+				showTipLayer.value = false
+			}
+		}
+
+	})
+
+	const closeTipLayer = () => {
+		showTipLayer.value = false
+		uni.setStorageSync(props.tipLayerType, props.tipLayerType)
+		emit("refresh")
 	}
-})
 
-// 定义事件
-const emit = defineEmits(['back', 'right-click', 'button-click', 'refresh'])
-
-const data = reactive({
-	statusBarHeight: 0,
-	showTipLayer: true,
-})
-
-let {
-	showTipLayer
-} = toRefs(data)
-
-
-onMounted(() => {
-	// 同步获取系统信息
-	const systemInfo = uni.getSystemInfoSync();
-	data.statusBarHeight = systemInfo.statusBarHeight || 0;
-
-	if (props.isTipLayer) {
-		if (uni.getStorageSync(props.tipLayerType) == props.tipLayerType) {
-			showTipLayer.value = false
+	const openPopup = () => {
+		if (props.buttonGroup.length > 0) {
+			topPopup.value.open()
 		}
 	}
 
-})
-
-const closeTipLayer = () => {
-	showTipLayer.value = false
-	uni.setStorageSync(props.tipLayerType, props.tipLayerType)
-	emit("refresh")
-}
-
-const openPopup = () => {
-	if (props.buttonGroup.length > 0) {
-		topPopup.value.open()
+	// 返回按钮点击事件
+	const onBack = () => {
+		emit('back')
+		// 默认返回上一页
+		if (props.noBack) return
+		uni.navigateBack()
 	}
-}
 
-// 返回按钮点击事件
-const onBack = () => {
-	emit('back')
-	// 默认返回上一页
-	if (props.noBack) return
-	uni.navigateBack()
-}
+	// 右侧按钮点击事件
+	const onRightClick = () => {
+		emit('right-click')
+	}
 
-// 右侧按钮点击事件
-const onRightClick = () => {
-	emit('right-click')
-}
-
-const closeTopPopup = () => {
-	topPopup.value.close()
-}
+	const closeTopPopup = () => {
+		topPopup.value.close()
+	}
 
 
-const buttonClick = (button) => {
-	closeTopPopup()
-	emit('button-click', button)
-}
+	const buttonClick = (button) => {
+		closeTopPopup()
+		emit('button-click', button)
+	}
 
-// 暴露给父组件的方法
-defineExpose({
-	openPopup,
-	closeTopPopup
-})
+	// 暴露给父组件的方法
+	defineExpose({
+		openPopup,
+		closeTopPopup
+	})
 </script>
 
 <style scoped>
-@import "/common/main.css";
+	@import "/common/main.css";
 
-.nav-bar-container {
-	display: flex;
-	flex-direction: column;
-	position: fixed !important;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 999;
-}
-
-.nav-bar {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	position: relative;
-	z-index: 1;
-}
-
-.status-placeholder {
-	width: 100%;
-}
-
-::v-deep .uni-navbar__content {
-	width: 100%;
-}
-
-.nav-bar-left {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-}
-
-.nav-icon-back {
-	width: 24px;
-	height: 24px;
-}
-
-.nav-icon-more {
-	width: 26px;
-	height: 26px;
-}
-
-.nav-bar-title {
-	flex: 1;
-	margin: auto;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 17px;
-	font-weight: 500;
-}
-
-.nav-bar-right {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-}
-
-.right-button {
-	font-size: 12px;
-	border-radius: 16px;
-	color: #fff;
-	text-align: center;
-	line-height: 30px;
-	height: 30px;
-	min-width: 60px;
-	background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
-}
-
-.button-box {
-	width: calc(50% - 8rpx);
-	text-align: center;
-	margin-top: 16rpx;
-}
-
-.button {
-	border: 1px solid #E4E4E4;
-	border-radius: 8px;
-	height: 42px;
-	line-height: 42px;
-	font-size: 28rpx;
-}
-
-.tipLayer {
-	box-sizing: border-box;
-	min-width: 200px !important;
-	height: 48px;
-	background: #B8EDFE;
-	border-radius: 8px 8px 8px 8px;
-	position: fixed;
-	/* top: 115px; */
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 999;
-
-
-
-}
-
-.tipLayer-content {
-	position: relative;
-
-
-}
-
-.title {
-	font-weight: 450;
-	font-size: 14px;
-	color: #268FFF;
-	line-height: 48px;
-	text-align: center;
-
-	text {
-		font-size: 14px;
-		font-weight: bold;
-		color: #006ADD;
+	.nav-bar-container {
+		display: flex;
+		flex-direction: column;
+		position: fixed !important;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 999;
 	}
 
-	::v-deep text {
-		font-size: 14px;
-		font-weight: bold;
-		color: #006ADD;
+	.nav-bar {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: relative;
+		z-index: 1;
 	}
-}
 
-.triangleImg {
-	width: 111px;
-	height: 52px;
-	pointer-events: none;
-	position: absolute;
-	top: -23px;
-	left: calc(50% - 111px);
-}
+	.status-placeholder {
+		width: 100%;
+	}
 
-.triangle {
-	position: absolute;
-	top: -57px;
-	left: calc(50% - 40px);
-	pointer-events: none;
-}
+	::v-deep .uni-navbar__content {
+		width: 100%;
+	}
 
-.close {
-	position: absolute;
-	top: -5px;
-	right: -5px;
-	width: 18px;
-	height: 18px;
-}
+	.nav-bar-left {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+	}
+
+	.nav-icon-back {
+		width: 24px;
+		height: 24px;
+	}
+
+	.nav-icon-more {
+		width: 26px;
+		height: 26px;
+	}
+
+	.nav-bar-title {
+		flex: 1;
+		margin: auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 17px;
+		font-weight: 500;
+	}
+
+	.nav-bar-right {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.right-button {
+		font-size: 12px;
+		border-radius: 16px;
+		color: #fff;
+		text-align: center;
+		line-height: 30px;
+		height: 30px;
+		min-width: 60px;
+		background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
+	}
+
+	.button-box {
+		width: calc(50% - 8rpx);
+		text-align: center;
+		margin-top: 16rpx;
+	}
+
+	.button {
+		border: 1px solid #E4E4E4;
+		border-radius: 8px;
+		height: 42px;
+		line-height: 42px;
+		font-size: 28rpx;
+	}
+
+	.tipLayer {
+		box-sizing: border-box;
+		min-width: 200px !important;
+		height: 48px;
+		background: #B8EDFE;
+		border-radius: 8px 8px 8px 8px;
+		position: fixed;
+		/* top: 115px; */
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 999;
+
+
+
+	}
+
+	.tipLayer-content {
+		position: relative;
+
+
+	}
+
+	.title {
+		font-weight: 450;
+		font-size: 14px;
+		color: #268FFF;
+		line-height: 48px;
+		text-align: center;
+
+		text {
+			font-size: 14px;
+			font-weight: bold;
+			color: #006ADD;
+		}
+
+		::v-deep text {
+			font-size: 14px;
+			font-weight: bold;
+			color: #006ADD;
+		}
+	}
+
+	.triangleImg {
+		width: 111px;
+		height: 52px;
+		pointer-events: none;
+		position: absolute;
+		top: -23px;
+		left: calc(50% - 111px);
+	}
+
+	.triangle {
+		position: absolute;
+		top: -57px;
+		left: calc(50% - 40px);
+		pointer-events: none;
+	}
+
+	.close {
+		position: absolute;
+		top: -5px;
+		right: -5px;
+		width: 18px;
+		height: 18px;
+	}
 </style>
\ No newline at end of file
diff --git a/main.js b/main.js
index 11eb229..4580d59 100644
--- a/main.js
+++ b/main.js
@@ -29,7 +29,7 @@ export function createApp() {
 	app.config.globalProperties.$system = plus.os.name;
 	// #endif
 	app.config.globalProperties.$systemInfo = systemInfo
-	uni.setStorageSync('version', '1.0.5.sp5')
+	uni.setStorageSync('version', '1.0.5.sp9')
 	app.config.globalProperties.$version = uni.getStorageSync('version')
 	app.use(globalMethods);
 	return {
diff --git a/pages/bill/add-bill/add-bill.vue b/pages/bill/add-bill/add-bill.vue
index 200ac09..05090c8 100644
--- a/pages/bill/add-bill/add-bill.vue
+++ b/pages/bill/add-bill/add-bill.vue
@@ -56,7 +56,8 @@
 			<!-- 详情信息列表 -->
 			<view class="detail-info-container">
 				<template v-for="item in billData.itemInfoList" :key="item.id">
-					<view class="info-item-box" v-if="item.key != 'paymentReward'">
+					<view class="info-item-box"
+						v-if="item.key != 'paymentReward' && (item.key != 'transferNote' || billData.merchantOption.isTransferNote)">
 						<view class="item-label" :class="{ 'switchable-label': item.key === 'createTime' }"
 							@click="toggleCreateTimeLabel(item)">
 							<text>{{ item.label }}</text>
@@ -132,7 +133,8 @@
 		<view class="switch-option-container">
 			<template v-for="option in data.switchOptions" :key="option.id">
 				<view v-if="option.showTypeIds ? option.showTypeIds.includes(billData.selectId) : true"
-					class="border-bottom" :class="{ 'no-border-bottom': isNoBorderBottom(option) }">
+					class="border-bottom"
+					:class="{ 'no-border-bottom': isNoBorderBottom(option) || option.isMarginBottom, 'margin-bottom-16rpx': option.isMarginBottom }">
 					<view class="switch-option">
 						<view class="switch-option-text">{{ option.name }}</view>
 						<switch v-if="option.isSwitch" color="#1676FE" :checked="billData.merchantOption[option.key]"
@@ -408,89 +410,97 @@ const serviceDetailRightTextList = [{
 }
 ]
 // switch选项
-const switchOptions = [{
-	"id": 7,
-	"name": "账单分类",
-	"isSwitch": false,
-	key: 'billClassify',
-},
-{
-	"id": 8,
-	"name": "标签",
-	"isSwitch": false,
-	key: 'tag',
-},
-{
-	"id": 9,
-	"name": "备注",
-	"isSwitch": false,
-	key: 'note',
-},
-{
-	"id": 1,
-	"name": "服务详情",
-	"isSwitch": true,
-	showTypeIds: [3, 4, 10],
-	key: 'serviceDetail',
-},
-{
-	"id": 2,
-	"name": "推荐服务",
-	"isSwitch": true,
-	showTypeIds: [4],
-	key: 'recommendService',
-},
-{
-	"id": 3,
-	"name": "服务推荐",
-	"isSwitch": true,
-	showTypeIds: [6, 7],
-	key: 'serviceRecommend',
-},
-{
-	"id": 4,
-	"name": "退款",
-	"isSwitch": true,
-	showTypeIds: [12, 13],
-	key: 'refund',
-	change: (value) => {
-		if (billData.value.selectId == 12 || billData.value.selectId == 13) {
-			if (value) {
-				billData.value.orderStatus = "已全额退款"
-			} else {
-				billData.value.orderStatus = "交易成功"
+const switchOptions = [
+	{
+		"id": 11,
+		"name": "转账备注",
+		"isSwitch": true,
+		showTypeIds: [7],
+		key: 'isTransferNote',
+		isMarginBottom: true
+	}, {
+		"id": 7,
+		"name": "账单分类",
+		"isSwitch": false,
+		key: 'billClassify',
+	},
+	{
+		"id": 8,
+		"name": "标签",
+		"isSwitch": false,
+		key: 'tag',
+	},
+	{
+		"id": 9,
+		"name": "备注",
+		"isSwitch": false,
+		key: 'note',
+	},
+	{
+		"id": 1,
+		"name": "服务详情",
+		"isSwitch": true,
+		showTypeIds: [3, 4, 10],
+		key: 'serviceDetail',
+	},
+	{
+		"id": 2,
+		"name": "推荐服务",
+		"isSwitch": true,
+		showTypeIds: [4],
+		key: 'recommendService',
+	},
+	{
+		"id": 3,
+		"name": "服务推荐",
+		"isSwitch": true,
+		showTypeIds: [6, 7],
+		key: 'serviceRecommend',
+	},
+	{
+		"id": 4,
+		"name": "退款",
+		"isSwitch": true,
+		showTypeIds: [12, 13],
+		key: 'refund',
+		change: (value) => {
+			if (billData.value.selectId == 12 || billData.value.selectId == 13) {
+				if (value) {
+					billData.value.orderStatus = "已全额退款"
+				} else {
+					billData.value.orderStatus = "交易成功"
+				}
 			}
 		}
+	},
+	{
+		"id": 5,
+		"name": "支付奖励",
+		"isSwitch": true,
+		showTypeIds: [1, 3, 4, 13],
+		key: 'payReward',
+	},
+	{
+		"id": 6,
+		"name": "计入收支",
+		"isSwitch": true,
+		showTypeIds: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
+		key: 'countInAndOut',
+	},
+	{
+		"id": 7,
+		"name": "商家订单号转换条形码",
+		"isSwitch": true,
+		showTypeIds: [1, 2, 3],
+		key: 'isShowBarcode',
+	},
+	{
+		"id": 10,
+		"name": "账单分析",
+		"isSwitch": true,
+		showTypeIds: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
+		key: 'isShowBillAnalysis',
 	}
-},
-{
-	"id": 5,
-	"name": "支付奖励",
-	"isSwitch": true,
-	showTypeIds: [1, 3, 4, 13],
-	key: 'payReward',
-},
-{
-	"id": 6,
-	"name": "计入收支",
-	"isSwitch": true,
-	showTypeIds: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
-	key: 'countInAndOut',
-},
-{
-	"id": 7,
-	"name": "商家订单号转换条形码",
-	"isSwitch": true,
-	showTypeIds: [1, 2, 3],
-	key: 'isShowBarcode',
-},
-{
-	"id": 10,
-	"name": "账单分析",
-	"isSwitch": true,
-	showTypeIds: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
-	key: 'isShowBillAnalysis',
-}
 
 ]
 
@@ -542,6 +552,7 @@ const data = reactive({
 		merchantOption: {
 			serviceDetail: false,
 			isShowBarcode: false,
+			isTransferNote: false,
 			serviceDetailInfo: {
 				imgUrl: '',
 				rightText: 0,
@@ -1400,11 +1411,11 @@ page {
 
 .switch-option-container {
 	margin: 16rpx 24rpx;
-	background-color: #ffffff;
 	border-radius: 16rpx 16rpx 16rpx 16rpx;
 
 	.border-bottom {
-		border-bottom: 1px solid #efefef
+		border-bottom: 1px solid #efefef;
+		background-color: #ffffff;
 	}
 
 	.no-border-bottom {
@@ -1605,4 +1616,8 @@ page {
 		padding: 0 24rpx;
 	}
 }
+
+.margin-bottom-16rpx {
+	margin-bottom: 16rpx;
+}
 </style>
\ No newline at end of file
diff --git a/pages/bill/bill-detail/bill-detail.vue b/pages/bill/bill-detail/bill-detail.vue
index 6f15f68..8339a8e 100644
--- a/pages/bill/bill-detail/bill-detail.vue
+++ b/pages/bill/bill-detail/bill-detail.vue
@@ -42,7 +42,9 @@
 			<!-- 详情信息列表 -->
 			<view class="detail-info-container">
 				<template v-for="item in visibleItemInfoList" :key="item.id">
-					<view class="info-item-box" :class="{ 'bottom-border': item.key == 'relatedRecord' }">
+					<view class="info-item-box"
+						v-if="item.key != 'transferNote' || billData.merchantOption.isTransferNote"
+						:class="{ 'bottom-border': item.key == 'relatedRecord' }">
 						<view class="item-label">
 							{{ item.label }}
 						</view>
diff --git a/pages/other/ranking/ranking.vue b/pages/other/ranking/ranking.vue
index 01ab5b3..ab3f777 100644
--- a/pages/other/ranking/ranking.vue
+++ b/pages/other/ranking/ranking.vue
@@ -117,668 +117,674 @@
 			</l-painter>
 		</view>
 	</view>
+	<!-- 水印 -->
+	<view v-if="$isVip()">
+		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_ranking')">
+			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+		</liu-drag-button>
+	</view>
 </template>
 
 <script setup>
-import {
-	ref,
-	reactive,
-	getCurrentInstance
-} from 'vue';
-import {
-	onLoad
-} from '@dcloudio/uni-app';
-
-const {
-	proxy
-} = getCurrentInstance();
-
-const type = ref("base");
-const title = ref("xx排名");
-const skinBgColor = ref("#FFDFDF");
-const skinHue = ref(0); // 记录色相位置
-const isSnapshot = ref(false);
-const isEdit = ref(false);
-const rightButtonText = ref("编辑");
-
-const tierList = ref([{
-	label: '夯',
-	bgColor: '#D5171C',
-	img: 'hang',
-	textColor: '#FFFFFF',
-	hasStroke: true,
-	images: [],
-	width: 60,
-},
-{
-	label: '顶级',
-	bgColor: '#FF6A0B',
-	img: 'dingji',
-	textColor: '#FFFFFF',
-	hasStroke: true,
-	images: [],
-	width: 104,
-},
-{
-	label: '人上人',
-	bgColor: '#FFF06A',
-	img: 'renshangren',
-	textColor: '#FFFFFF',
-	hasStroke: true,
-	images: [],
-	width: 156,
-},
-{
-	label: 'NPC',
-	bgColor: '#FDF5C8',
-	img: 'npc',
-	textColor: '#FFFFFF',
-	hasStroke: true,
-	images: [],
-	width: 110,
-},
-{
-	label: '拉完了',
-	bgColor: '#FFFFFF',
-	img: 'lawanle',
-	textColor: '#FFFFFF',
-	hasStroke: true,
-	images: [],
-	width: 156,
-}
-]);
-
-// --- 生命周期：加载缓存 ---
-onLoad(() => {
-	// 进入页面埋点
-	proxy.$apiUserEvent('all', {
-		type: 'click',
-		key: 'ranking',
-		value: "从夯倒拉排名"
-	})
-	// 获取缓存数据
-	const cache = uni.getStorageSync('ranking_config_data');
-	if (cache) {
-		title.value = cache.title || title.value;
-		type.value = cache.type || type.value;
-		skinBgColor.value = cache.skinBgColor || skinBgColor.value;
-		skinHue.value = cache.skinHue ?? skinHue.value;
-		if (cache.tierList) tierList.value = cache.tierList;
-		console.log(tierList.value);
-	}
-});
-
-// --- 拖拽排序逻辑 ---
-const drag = reactive({
-	tierIndex: -1,
-	imgIdx: -1,
-	startX: 0,
-	startY: 0,
-	moveX: 0,
-	moveY: 0
-});
-
-// 计算拖拽样式
-const getDragStyle = (tIdx, iIdx) => {
-	if (drag.tierIndex === tIdx && drag.imgIdx === iIdx) {
-		return {
-			transform: `translate(${drag.moveX}px, ${drag.moveY}px)`,
-			zIndex: 99,
-			transition: 'none'
-		};
-	}
-	return {
-		transition: 'transform 0.3s ease'
-	};
-};
-
-const onTouchStart = (e, tIdx, iIdx) => {
-	if (!isEdit.value) return;
-	const touch = e.touches[0];
-	drag.tierIndex = tIdx;
-	drag.imgIdx = iIdx;
-	drag.startX = touch.clientX;
-	drag.startY = touch.clientY;
-	drag.moveX = 0;
-	drag.moveY = 0;
-};
-
-const onTouchMove = (e) => {
-	if (drag.tierIndex === -1) return;
-	const touch = e.touches[0];
-	drag.moveX = touch.clientX - drag.startX;
-	drag.moveY = touch.clientY - drag.startY;
-};
-
-const onTouchEnd = () => {
-	if (drag.tierIndex === -1) return;
+	import {
+		ref,
+		reactive,
+		getCurrentInstance
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
 
 	const {
-		tierIndex,
-		imgIdx,
-		moveX
-	} = drag;
-	const rowData = tierList.value[tierIndex].images;
+		proxy
+	} = getCurrentInstance();
 
-	// 估算单个item跨度 (100rpx宽度 + 12rpx间距 ≈ 56px，建议根据真机微调)
-	const itemWidth = 56;
-	const offset = Math.round(moveX / itemWidth);
-	let newIndex = imgIdx + offset;
+	const type = ref("base");
+	const title = ref("xx排名");
+	const skinBgColor = ref("#FFDFDF");
+	const skinHue = ref(0); // 记录色相位置
+	const isSnapshot = ref(false);
+	const isEdit = ref(false);
+	const rightButtonText = ref("编辑");
 
-	// 限制索引范围
-	newIndex = Math.max(0, Math.min(newIndex, rowData.length - 1));
+	const tierList = ref([{
+			label: '夯',
+			bgColor: '#D5171C',
+			img: 'hang',
+			textColor: '#FFFFFF',
+			hasStroke: true,
+			images: [],
+			width: 60,
+		},
+		{
+			label: '顶级',
+			bgColor: '#FF6A0B',
+			img: 'dingji',
+			textColor: '#FFFFFF',
+			hasStroke: true,
+			images: [],
+			width: 104,
+		},
+		{
+			label: '人上人',
+			bgColor: '#FFF06A',
+			img: 'renshangren',
+			textColor: '#FFFFFF',
+			hasStroke: true,
+			images: [],
+			width: 156,
+		},
+		{
+			label: 'NPC',
+			bgColor: '#FDF5C8',
+			img: 'npc',
+			textColor: '#FFFFFF',
+			hasStroke: true,
+			images: [],
+			width: 110,
+		},
+		{
+			label: '拉完了',
+			bgColor: '#FFFFFF',
+			img: 'lawanle',
+			textColor: '#FFFFFF',
+			hasStroke: true,
+			images: [],
+			width: 156,
+		}
+	]);
 
-	if (newIndex !== imgIdx) {
-		const temp = rowData.splice(imgIdx, 1)[0];
-		rowData.splice(newIndex, 0, temp);
-	}
-
-	// 重置拖拽状态
-	drag.tierIndex = -1;
-	drag.imgIdx = -1;
-};
-
-// --- 其他业务逻辑 ---
-const chooseImage = (index) => {
-	const currentCount = tierList.value[index].images.length;
-	uni.chooseImage({
-		count: 4 - currentCount,
-		sizeType: ['compressed'],
-		success: (res) => {
-			tierList.value[index].images.push(...res.tempFilePaths);
+	// --- 生命周期：加载缓存 ---
+	onLoad(() => {
+		// 进入页面埋点
+		proxy.$apiUserEvent('all', {
+			type: 'click',
+			key: 'ranking',
+			value: "从夯倒拉排名"
+		})
+		// 获取缓存数据
+		const cache = uni.getStorageSync('ranking_config_data');
+		if (cache) {
+			title.value = cache.title || title.value;
+			type.value = cache.type || type.value;
+			skinBgColor.value = cache.skinBgColor || skinBgColor.value;
+			skinHue.value = cache.skinHue ?? skinHue.value;
+			if (cache.tierList) tierList.value = cache.tierList;
+			console.log(tierList.value);
 		}
 	});
-};
 
-const deleteImage = (tIdx, iIdx) => {
-	const path = tierList.value[tIdx].images[iIdx];
-	removeLocalFile(path); // 物理删除已有文件
-	tierList.value[tIdx].images.splice(iIdx, 1);
-};
+	// --- 拖拽排序逻辑 ---
+	const drag = reactive({
+		tierIndex: -1,
+		imgIdx: -1,
+		startX: 0,
+		startY: 0,
+		moveX: 0,
+		moveY: 0
+	});
 
-const onRightClick = async () => {
-	if (isEdit.value) {
-		uni.showLoading({
-			title: '正在持久化图片...',
-			mask: true
+	// 计算拖拽样式
+	const getDragStyle = (tIdx, iIdx) => {
+		if (drag.tierIndex === tIdx && drag.imgIdx === iIdx) {
+			return {
+				transform: `translate(${drag.moveX}px, ${drag.moveY}px)`,
+				zIndex: 99,
+				transition: 'none'
+			};
+		}
+		return {
+			transition: 'transform 0.3s ease'
+		};
+	};
+
+	const onTouchStart = (e, tIdx, iIdx) => {
+		if (!isEdit.value) return;
+		const touch = e.touches[0];
+		drag.tierIndex = tIdx;
+		drag.imgIdx = iIdx;
+		drag.startX = touch.clientX;
+		drag.startY = touch.clientY;
+		drag.moveX = 0;
+		drag.moveY = 0;
+	};
+
+	const onTouchMove = (e) => {
+		if (drag.tierIndex === -1) return;
+		const touch = e.touches[0];
+		drag.moveX = touch.clientX - drag.startX;
+		drag.moveY = touch.clientY - drag.startY;
+	};
+
+	const onTouchEnd = () => {
+		if (drag.tierIndex === -1) return;
+
+		const {
+			tierIndex,
+			imgIdx,
+			moveX
+		} = drag;
+		const rowData = tierList.value[tierIndex].images;
+
+		// 估算单个item跨度 (100rpx宽度 + 12rpx间距 ≈ 56px，建议根据真机微调)
+		const itemWidth = 56;
+		const offset = Math.round(moveX / itemWidth);
+		let newIndex = imgIdx + offset;
+
+		// 限制索引范围
+		newIndex = Math.max(0, Math.min(newIndex, rowData.length - 1));
+
+		if (newIndex !== imgIdx) {
+			const temp = rowData.splice(imgIdx, 1)[0];
+			rowData.splice(newIndex, 0, temp);
+		}
+
+		// 重置拖拽状态
+		drag.tierIndex = -1;
+		drag.imgIdx = -1;
+	};
+
+	// --- 其他业务逻辑 ---
+	const chooseImage = (index) => {
+		const currentCount = tierList.value[index].images.length;
+		uni.chooseImage({
+			count: 4 - currentCount,
+			sizeType: ['compressed'],
+			success: (res) => {
+				tierList.value[index].images.push(...res.tempFilePaths);
+			}
 		});
-		// 1. 深度遍历并持久化所有临时图片
-		for (let tierIdx = 0; tierIdx < tierList.value.length; tierIdx++) {
-			const tier = tierList.value[tierIdx];
-			for (let i = 0; i < tier.images.length; i++) {
-				const path = tier.images[i];
-				// 逻辑逻辑：如果是 static 或者是已经保存的 _doc/usr 路径，则跳过
-				const isStatic = path.startsWith('/static/') || path.startsWith('static/');
-				const isPersistent = path.indexOf('_doc/') !== -1 || path.indexOf('usr/') !== -1;
+	};
 
-				if (!isStatic && !isPersistent) {
-					console.log('检测到待持久化图片:', path);
-					const newPath = await saveImageToLocal(path);
-					if (newPath) {
-						tier.images[i] = newPath;
-						console.log('持久化成功，新路径:', newPath);
+	const deleteImage = (tIdx, iIdx) => {
+		const path = tierList.value[tIdx].images[iIdx];
+		removeLocalFile(path); // 物理删除已有文件
+		tierList.value[tIdx].images.splice(iIdx, 1);
+	};
+
+	const onRightClick = async () => {
+		if (isEdit.value) {
+			uni.showLoading({
+				title: '正在持久化图片...',
+				mask: true
+			});
+			// 1. 深度遍历并持久化所有临时图片
+			for (let tierIdx = 0; tierIdx < tierList.value.length; tierIdx++) {
+				const tier = tierList.value[tierIdx];
+				for (let i = 0; i < tier.images.length; i++) {
+					const path = tier.images[i];
+					// 逻辑逻辑：如果是 static 或者是已经保存的 _doc/usr 路径，则跳过
+					const isStatic = path.startsWith('/static/') || path.startsWith('static/');
+					const isPersistent = path.indexOf('_doc/') !== -1 || path.indexOf('usr/') !== -1;
+
+					if (!isStatic && !isPersistent) {
+						console.log('检测到待持久化图片:', path);
+						const newPath = await saveImageToLocal(path);
+						if (newPath) {
+							tier.images[i] = newPath;
+							console.log('持久化成功，新路径:', newPath);
+						}
 					}
 				}
 			}
+
+			// 2. 全部处理完后，进行数据持久化
+			uni.setStorageSync('ranking_config_data', {
+				title: title.value,
+				type: type.value,
+				skinBgColor: skinBgColor.value,
+				skinHue: skinHue.value,
+				tierList: tierList.value
+			});
+			uni.hideLoading();
+			uni.showToast({
+				title: '已保存',
+				icon: 'none'
+			});
 		}
+		isEdit.value = !isEdit.value;
+		rightButtonText.value = isEdit.value ? "确定" : "编辑";
+	};
 
-		// 2. 全部处理完后，进行数据持久化
-		uni.setStorageSync('ranking_config_data', {
-			title: title.value,
-			type: type.value,
-			skinBgColor: skinBgColor.value,
-			skinHue: skinHue.value,
-			tierList: tierList.value
-		});
-		uni.hideLoading();
-		uni.showToast({
-			title: '已保存',
-			icon: 'none'
-		});
-	}
-	isEdit.value = !isEdit.value;
-	rightButtonText.value = isEdit.value ? "确定" : "编辑";
-};
-
-/**
- * 将临时图片保存到本地永久目录
- */
-const saveImageToLocal = (tempFilePath) => {
-	return new Promise((resolve) => {
-		// 如果已经是持久化路径，直接返回
-		if (tempFilePath.indexOf('_doc/') !== -1 || tempFilePath.indexOf('usr/') !== -1) {
-			return resolve(tempFilePath);
-		}
-
-		uni.saveFile({
-			tempFilePath: tempFilePath,
-			success: (res) => {
-				resolve(res.savedFilePath);
-			},
-			fail: (err) => {
-				console.error('本地持久化保存失败:', err);
-				// 提示：H5 环境不支持 saveFile 持久化，仅 App/小程序支持
-				resolve(null);
+	/**
+	 * 将临时图片保存到本地永久目录
+	 */
+	const saveImageToLocal = (tempFilePath) => {
+		return new Promise((resolve) => {
+			// 如果已经是持久化路径，直接返回
+			if (tempFilePath.indexOf('_doc/') !== -1 || tempFilePath.indexOf('usr/') !== -1) {
+				return resolve(tempFilePath);
 			}
+
+			uni.saveFile({
+				tempFilePath: tempFilePath,
+				success: (res) => {
+					resolve(res.savedFilePath);
+				},
+				fail: (err) => {
+					console.error('本地持久化保存失败:', err);
+					// 提示：H5 环境不支持 saveFile 持久化，仅 App/小程序支持
+					resolve(null);
+				}
+			});
 		});
-	});
-};
-
-/**
- * 物理删除本地已保存的文件
- */
-const removeLocalFile = (path) => {
-	if (!path) return;
-	// 仅针对非静态资源的本地文件进行删除
-	if (path.indexOf('_doc/') !== -1 || path.indexOf('usr/') !== -1) {
-		uni.removeSavedFile({
-			filePath: path,
-			success: () => console.log('文件物理删除成功:', path),
-			fail: (err) => console.log('文件删除失败:', err)
-		});
-	}
-};
-
-const handleSave = () => {
-	uni.showLoading({
-		title: '生成中...',
-		mask: true
-	});
-	isSnapshot.value = true;
-};
-
-const onPainterSuccess = (path) => {
-	const done = () => {
-		isSnapshot.value = false;
-		uni.hideLoading();
 	};
-	if (!path) return done();
 
-	uni.saveImageToPhotosAlbum({
-		filePath: path,
-		success: () => uni.showToast({
-			title: '保存成功'
-		}),
-		fail: () => uni.showToast({
-			title: '保存失败',
-			icon: 'none'
-		}),
-		complete: done
-	});
-};
-
-const switchType = (val) => {
-	type.value = val;
-	if (val == 'skin') {
-		tierList.value[0].bgColor = '#F3575B'
-		tierList.value[1].bgColor = '#FF9B5B'
-		tierList.value[2].bgColor = '#FFF59E'
-		tierList.value[3].bgColor = '#FFFBE1'
-		tierList.value[4].bgColor = '#FFFFFF'
-	} else {
-		tierList.value[0].bgColor = '#D5171C'
-		tierList.value[1].bgColor = '#FF6A0B'
-		tierList.value[2].bgColor = '#FFF06A'
-		tierList.value[3].bgColor = '#FDF5C8'
-		tierList.value[4].bgColor = '#FFFFFF'
-	}
-
-	// 切换时由于改变了 type，立即同步到缓存中以便记录最后选择的模式
-	const cache = uni.getStorageSync('ranking_config_data') || {};
-	cache.type = val;
-	uni.setStorageSync('ranking_config_data', cache);
-}
-
-/**
- * 循环切换行背景色 (编辑模式下)
- */
-const changeRowBgColor = (index) => {
-	if (!isEdit.value) return;
-	const colors = ['#D5171C', '#FF6A0B', '#FFF06A', '#FDF5C8', '#FFFFFF', '#1777FF', '#333333'];
-	const curr = tierList.value[index].bgColor;
-	let nextIdx = (colors.indexOf(curr.toUpperCase()) + 1) % colors.length;
-	if (nextIdx === -1) nextIdx = 0;
-	tierList.value[index].bgColor = colors[nextIdx];
-
-	// 自动适配文字颜色 (深色背景用白色，浅色用黑色)
-	const darkColors = ['#D5171C', '#1777FF', '#333333'];
-	tierList.value[index].textColor = darkColors.includes(colors[nextIdx]) ? '#FFFFFF' : '#FFFFFF';
-};
-
-/**
- * 处理色域滑动
- */
-const handleHueTouch = (e) => {
-	const touch = e.touches[0];
-	uni.createSelectorQuery().select('.spectrum-picker').boundingClientRect(rect => {
-		if (rect) {
-			const x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
-			skinHue.value = Math.round((x / rect.width) * 360);
-
-			// 1. 获取 HSL 的数值
-			const h = skinHue.value;
-			const s = 70;
-			const l = 90;
-
-			// 2. 转换为 16 进制色值
-			skinBgColor.value = hslToHex(h, s, l);
+	/**
+	 * 物理删除本地已保存的文件
+	 */
+	const removeLocalFile = (path) => {
+		if (!path) return;
+		// 仅针对非静态资源的本地文件进行删除
+		if (path.indexOf('_doc/') !== -1 || path.indexOf('usr/') !== -1) {
+			uni.removeSavedFile({
+				filePath: path,
+				success: () => console.log('文件物理删除成功:', path),
+				fail: (err) => console.log('文件删除失败:', err)
+			});
 		}
-	}).exec();
-};
-
-/**
- * HSL 转 Hex 工具函数
- */
-function hslToHex(h, s, l) {
-	l /= 100;
-	const a = s * Math.min(l, 1 - l) / 100;
-	const f = n => {
-		const k = (n + h / 30) % 12;
-		const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-		return Math.round(255 * color).toString(16).padStart(2, '0');
 	};
-	return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
-}
+
+	const handleSave = () => {
+		uni.showLoading({
+			title: '生成中...',
+			mask: true
+		});
+		isSnapshot.value = true;
+	};
+
+	const onPainterSuccess = (path) => {
+		const done = () => {
+			isSnapshot.value = false;
+			uni.hideLoading();
+		};
+		if (!path) return done();
+
+		uni.saveImageToPhotosAlbum({
+			filePath: path,
+			success: () => uni.showToast({
+				title: '保存成功'
+			}),
+			fail: () => uni.showToast({
+				title: '保存失败',
+				icon: 'none'
+			}),
+			complete: done
+		});
+	};
+
+	const switchType = (val) => {
+		type.value = val;
+		if (val == 'skin') {
+			tierList.value[0].bgColor = '#F3575B'
+			tierList.value[1].bgColor = '#FF9B5B'
+			tierList.value[2].bgColor = '#FFF59E'
+			tierList.value[3].bgColor = '#FFFBE1'
+			tierList.value[4].bgColor = '#FFFFFF'
+		} else {
+			tierList.value[0].bgColor = '#D5171C'
+			tierList.value[1].bgColor = '#FF6A0B'
+			tierList.value[2].bgColor = '#FFF06A'
+			tierList.value[3].bgColor = '#FDF5C8'
+			tierList.value[4].bgColor = '#FFFFFF'
+		}
+
+		// 切换时由于改变了 type，立即同步到缓存中以便记录最后选择的模式
+		const cache = uni.getStorageSync('ranking_config_data') || {};
+		cache.type = val;
+		uni.setStorageSync('ranking_config_data', cache);
+	}
+
+	/**
+	 * 循环切换行背景色 (编辑模式下)
+	 */
+	const changeRowBgColor = (index) => {
+		if (!isEdit.value) return;
+		const colors = ['#D5171C', '#FF6A0B', '#FFF06A', '#FDF5C8', '#FFFFFF', '#1777FF', '#333333'];
+		const curr = tierList.value[index].bgColor;
+		let nextIdx = (colors.indexOf(curr.toUpperCase()) + 1) % colors.length;
+		if (nextIdx === -1) nextIdx = 0;
+		tierList.value[index].bgColor = colors[nextIdx];
+
+		// 自动适配文字颜色 (深色背景用白色，浅色用黑色)
+		const darkColors = ['#D5171C', '#1777FF', '#333333'];
+		tierList.value[index].textColor = darkColors.includes(colors[nextIdx]) ? '#FFFFFF' : '#FFFFFF';
+	};
+
+	/**
+	 * 处理色域滑动
+	 */
+	const handleHueTouch = (e) => {
+		const touch = e.touches[0];
+		uni.createSelectorQuery().select('.spectrum-picker').boundingClientRect(rect => {
+			if (rect) {
+				const x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
+				skinHue.value = Math.round((x / rect.width) * 360);
+
+				// 1. 获取 HSL 的数值
+				const h = skinHue.value;
+				const s = 70;
+				const l = 90;
+
+				// 2. 转换为 16 进制色值
+				skinBgColor.value = hslToHex(h, s, l);
+			}
+		}).exec();
+	};
+
+	/**
+	 * HSL 转 Hex 工具函数
+	 */
+	function hslToHex(h, s, l) {
+		l /= 100;
+		const a = s * Math.min(l, 1 - l) / 100;
+		const f = n => {
+			const k = (n + h / 30) % 12;
+			const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+			return Math.round(255 * color).toString(16).padStart(2, '0');
+		};
+		return `#${f(0)}${f(8)}${f(4)}`.toUpperCase();
+	}
 </script>
 
 <style lang="less" scoped>
-.ranking-page {
-	min-height: 100vh;
-	background-color: #F8F8F8;
-	padding-bottom: 200rpx;
-}
-
-.content-container {
-	position: relative;
-	padding: 12rpx 24rpx;
-
-}
-
-.table-box {
-	position: relative;
-
-	.watermark {
-		position: absolute;
-		height: 56rpx;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		z-index: 99;
+	.ranking-page {
+		min-height: 100vh;
+		background-color: #F8F8F8;
+		padding-bottom: 200rpx;
 	}
-}
 
-.ranking-table {
-	border: 3rpx solid #333;
-	background-color: #fff;
-}
+	.content-container {
+		position: relative;
+		padding: 12rpx 24rpx;
 
-.ranking-row {
-	display: flex;
-	min-height: 148rpx;
-	border-bottom: 3rpx solid #333;
-
-	&:last-child {
-		border-bottom: none;
 	}
-}
 
-.label-box {
-	width: 176rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-right: 3rpx solid #333;
-}
+	.table-box {
+		position: relative;
 
-.label-text {
-	font-size: 48rpx;
-	font-weight: bold;
-
-	&.with-stroke {
-		text-shadow: 2rpx 2rpx 0 #000, -2rpx -2rpx 0 #000, 2rpx -2rpx 0 #000, -2rpx 2rpx 0 #000;
-	}
-}
-
-.items-box {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	padding: 14rpx 12rpx;
-	flex-wrap: wrap;
-}
-
-.item-wrapper {
-	width: 105rpx;
-	height: 105rpx;
-	position: relative;
-	margin: 0 6rpx;
-	touch-action: none;
-	/* 关键：禁止浏览器默认触摸行为 */
-
-	&.is-dragging {
-		opacity: 0.7;
-		scale: 1.1;
-		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
-	}
-}
-
-.item-img {
-	width: 100%;
-	height: 100%;
-	border-radius: 4rpx;
-}
-
-.del-btn {
-	position: absolute;
-	top: -12rpx;
-	right: -12rpx;
-	width: 36rpx;
-	height: 36rpx;
-	background: #ff4d4f;
-	color: #fff;
-	border-radius: 50%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 24rpx;
-	z-index: 10;
-}
-
-.add-btn {
-	width: 100rpx;
-	height: 100rpx;
-	background: #eee;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 4rpx;
-
-	.add-icon {
-		width: 40rpx;
-		height: 40rpx;
-	}
-}
-
-.save-btn {
-	margin-top: 60rpx;
-	width: 400rpx;
-	background: #1777FF;
-	color: #fff;
-	border-radius: 50rpx;
-}
-
-.bottom-tabs {
-	position: fixed;
-	bottom: 40rpx;
-	bottom: calc(32rpx + env(safe-area-inset-bottom));
-	bottom: calc(32rpx + constant(safe-area-inset-bottom));
-	width: 100%;
-	display: flex;
-	justify-content: center;
-
-	.tab-item {
-		width: 180rpx;
-		height: 80rpx;
-		line-height: 80rpx;
-		text-align: center;
-		background: #fff;
-		margin: 0 20rpx;
-		border-radius: 10rpx;
-
-		&.active {
-			border: 4rpx solid #1777FF;
-			color: #1777FF;
+		.watermark {
+			position: absolute;
+			height: 56rpx;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			z-index: 99;
 		}
 	}
-}
 
-.skin-box {
-	position: relative;
-	padding: 120rpx 12rpx;
-	background-color: #FFDFDF;
-
-	.watermark {
-		height: 56rpx !important;
-		position: absolute;
-		right: 14rpx !important;
-		bottom: 32rpx !important;
+	.ranking-table {
+		border: 3rpx solid #333;
+		background-color: #fff;
 	}
 
-	.title {
-		width: 260px;
-		position: absolute;
-		top: 30rpx;
-		left: 50%;
-		transform: translateX(-50%);
+	.ranking-row {
+		display: flex;
+		min-height: 148rpx;
+		border-bottom: 3rpx solid #333;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+
+	.label-box {
+		width: 176rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-right: 3rpx solid #333;
+	}
+
+	.label-text {
+		font-size: 48rpx;
 		font-weight: bold;
-		text-align: center;
-		font-size: 36rpx;
-		color: #333;
+
+		&.with-stroke {
+			text-shadow: 2rpx 2rpx 0 #000, -2rpx -2rpx 0 #000, 2rpx -2rpx 0 #000, -2rpx 2rpx 0 #000;
+		}
 	}
 
-	.title-input {
-		min-width: 260px;
-		background: rgba(255, 255, 255, 0.5);
-		border-radius: 8rpx;
-		padding: 4rpx 12rpx;
-		border: 1rpx dashed #1777FF;
+	.items-box {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		padding: 14rpx 12rpx;
+		flex-wrap: wrap;
 	}
 
-	.title-input {
-		background: rgba(255, 255, 255, 0.5);
-		border-radius: 8rpx;
-		padding: 4rpx 12rpx;
-		width: 300rpx;
-		border: 1rpx dashed #1777FF;
+	.item-wrapper {
+		width: 105rpx;
+		height: 105rpx;
+		position: relative;
+		margin: 0 6rpx;
+		touch-action: none;
+		/* 关键：禁止浏览器默认触摸行为 */
+
+		&.is-dragging {
+			opacity: 0.7;
+			scale: 1.1;
+			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
+		}
 	}
 
-	.img {
+	.item-img {
+		width: 100%;
+		height: 100%;
+		border-radius: 4rpx;
+	}
+
+	.del-btn {
 		position: absolute;
-		width: 90rpx;
-		height: 90rpx;
+		top: -12rpx;
+		right: -12rpx;
+		width: 36rpx;
+		height: 36rpx;
+		background: #ff4d4f;
+		color: #fff;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 24rpx;
+		z-index: 10;
 	}
 
-	.happy {
-		top: 40rpx;
-		right: 30rpx;
+	.add-btn {
+		width: 100rpx;
+		height: 100rpx;
+		background: #eee;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 4rpx;
+
+		.add-icon {
+			width: 40rpx;
+			height: 40rpx;
+		}
 	}
 
-	.sad {
-		bottom: 60rpx;
-		left: 100rpx;
+	.save-btn {
+		margin-top: 60rpx;
+		width: 400rpx;
+		background: #1777FF;
+		color: #fff;
+		border-radius: 50rpx;
 	}
-}
 
-.save-action {
-	margin-top: 60rpx;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding-bottom: 60rpx;
-}
+	.bottom-tabs {
+		position: fixed;
+		bottom: 40rpx;
+		bottom: calc(32rpx + env(safe-area-inset-bottom));
+		bottom: calc(32rpx + constant(safe-area-inset-bottom));
+		width: 100%;
+		display: flex;
+		justify-content: center;
 
-.bottom-edit-actions {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	width: 100%;
-}
+		.tab-item {
+			width: 180rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			background: #fff;
+			margin: 0 20rpx;
+			border-radius: 10rpx;
 
-.edit-tip {
-	font-size: 22rpx;
-	color: #999;
-	margin-top: 10rpx;
-}
+			&.active {
+				border: 4rpx solid #1777FF;
+				color: #1777FF;
+			}
+		}
+	}
 
-.color-picker {
-	display: flex;
-	gap: 16rpx;
-	background: #fff;
-	padding: 12rpx 20rpx;
-	border-radius: 40rpx;
-	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
-}
+	.skin-box {
+		position: relative;
+		padding: 120rpx 12rpx;
+		background-color: #FFDFDF;
 
-.color-picker-wrapper {
-	display: flex;
-	align-items: center;
-	margin: 12rpx 0;
-}
+		.watermark {
+			height: 56rpx !important;
+			position: absolute;
+			right: 14rpx !important;
+			bottom: 32rpx !important;
+		}
 
-.hex-input {
-	width: 150rpx;
-	height: 56rpx;
-	background: #fff;
-	border-radius: 28rpx;
-	font-size: 24rpx;
-	text-align: center;
-	color: #333;
-	border: 1rpx solid #eee;
-	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
-}
+		.title {
+			width: 260px;
+			position: absolute;
+			top: 30rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			font-weight: bold;
+			text-align: center;
+			font-size: 36rpx;
+			color: #333;
+		}
 
-.spectrum-picker {
-	width: 600rpx;
-	height: 32rpx;
-	background: #fff;
-	border-radius: 16rpx;
-	padding: 4rpx;
-	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-	position: relative;
-	margin: 12rpx 0;
-}
+		.title-input {
+			min-width: 260px;
+			background: rgba(255, 255, 255, 0.5);
+			border-radius: 8rpx;
+			padding: 4rpx 12rpx;
+			border: 1rpx dashed #1777FF;
+		}
 
-.slider-thumb {
-	position: absolute;
-	top: 50%;
-	width: 38rpx;
-	height: 38rpx;
-	background: #fff;
-	border-radius: 50%;
-	transform: translate(-50%, -50%);
-	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
-	border: 2rpx solid #fff;
-	pointer-events: none;
-}
+		.title-input {
+			background: rgba(255, 255, 255, 0.5);
+			border-radius: 8rpx;
+			padding: 4rpx 12rpx;
+			width: 300rpx;
+			border: 1rpx dashed #1777FF;
+		}
 
-.spectrum-bar {
-	width: 100%;
-	height: 100%;
-	border-radius: 12rpx;
-	background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-}
+		.img {
+			position: absolute;
+			width: 90rpx;
+			height: 90rpx;
+		}
 
-.color-dot {
-	width: 32rpx;
-	height: 32rpx;
-	border-radius: 50%;
-	border: 2rpx solid #fff;
-	box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
-	margin: 0 10rpx;
-}
+		.happy {
+			top: 40rpx;
+			right: 30rpx;
+		}
 
-.painter-container {
-	position: fixed;
-	left: -9999rpx;
-}
+		.sad {
+			bottom: 60rpx;
+			left: 100rpx;
+		}
+	}
+
+	.save-action {
+		margin-top: 60rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-bottom: 60rpx;
+	}
+
+	.bottom-edit-actions {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+	}
+
+	.edit-tip {
+		font-size: 22rpx;
+		color: #999;
+		margin-top: 10rpx;
+	}
+
+	.color-picker {
+		display: flex;
+		gap: 16rpx;
+		background: #fff;
+		padding: 12rpx 20rpx;
+		border-radius: 40rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.color-picker-wrapper {
+		display: flex;
+		align-items: center;
+		margin: 12rpx 0;
+	}
+
+	.hex-input {
+		width: 150rpx;
+		height: 56rpx;
+		background: #fff;
+		border-radius: 28rpx;
+		font-size: 24rpx;
+		text-align: center;
+		color: #333;
+		border: 1rpx solid #eee;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+	}
+
+	.spectrum-picker {
+		width: 600rpx;
+		height: 32rpx;
+		background: #fff;
+		border-radius: 16rpx;
+		padding: 4rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+		position: relative;
+		margin: 12rpx 0;
+	}
+
+	.slider-thumb {
+		position: absolute;
+		top: 50%;
+		width: 38rpx;
+		height: 38rpx;
+		background: #fff;
+		border-radius: 50%;
+		transform: translate(-50%, -50%);
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
+		border: 2rpx solid #fff;
+		pointer-events: none;
+	}
+
+	.spectrum-bar {
+		width: 100%;
+		height: 100%;
+		border-radius: 12rpx;
+		background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+	}
+
+	.color-dot {
+		width: 32rpx;
+		height: 32rpx;
+		border-radius: 50%;
+		border: 2rpx solid #fff;
+		box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
+		margin: 0 10rpx;
+	}
+
+	.painter-container {
+		position: fixed;
+		left: -9999rpx;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/shopping/jingdong/order-detail/order-detail.vue b/pages/shopping/jingdong/order-detail/order-detail.vue
index 879a63c..3ea9509 100644
--- a/pages/shopping/jingdong/order-detail/order-detail.vue
+++ b/pages/shopping/jingdong/order-detail/order-detail.vue
@@ -130,7 +130,7 @@
 					</view>
 				</view>
 				<view class="progress-box" style="height: 192rpx;">
-					<text class="text">快递运输 · 温馨提示：您的订单预计3月11日09:00- 15:53送达</text>
+					<text class="text">{{ order.trackingDesc2 }}</text>
 					<view class="upload-box">
 						<view class="info-box">
 							<view class="image-box">
diff --git a/pages/shopping/taobao/shangou-order-detail/shangou-order-detail.vue b/pages/shopping/taobao/shangou-order-detail/shangou-order-detail.vue
index f331145..0ab00ca 100644
--- a/pages/shopping/taobao/shangou-order-detail/shangou-order-detail.vue
+++ b/pages/shopping/taobao/shangou-order-detail/shangou-order-detail.vue
@@ -424,7 +424,8 @@ const items = [
 	{
 		image: "/static/image/shopping/taobao/waimai/cuidan.png",
 		text: "催单",
-		show: () => order.value.statusType == 'wait_recv'
+		show: () => order.value.statusType == 'wait_recv',
+		color: "#CDCDCD"
 	},
 	{
 		image: "/static/image/shopping/taobao/waimai/quxiaodingdan.png",
diff --git a/static/json/add-bill.json b/static/json/add-bill.json
index 1ea1740..abfab4f 100644
--- a/static/json/add-bill.json
+++ b/static/json/add-bill.json
@@ -403,6 +403,13 @@
 					"key": "payMethod",
 					"required": true
 				},
+				{
+					"label": "转账备注",
+					"value": "转账",
+					"type": "text",
+					"focus": false,
+					"key": "transferNote"
+				},
 				{
 					"label": "对方账户",
 					"value": "",