commit 9fea127de151fe8f3aff9d9e3cd9364286736569
Author: liangjian <1394459087@qq.com>
Date:   Mon Jun 29 09:42:53 2026 +0800

    chore: initial import

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c70b81
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+.dbg/
+.hbuilderx/
+.history/
+unpackage/
+
+.DS_Store
+Thumbs.db
diff --git a/App.vue b/App.vue
new file mode 100644
index 0000000..e3ee0b9
--- /dev/null
+++ b/App.vue
@@ -0,0 +1,97 @@
+<script>
+  import Vue from 'vue'
+  import store from './store/index.js'
+  import updateCustomBarInfo from './tuniao-ui/libs/function/updateCustomBarInfo.js'
+  
+	export default {
+		onLaunch: function() {
+			uni.getSystemInfo({
+			  success: function(e) {
+			    // #ifndef H5
+			    // 获取手机系统版本
+			    const system = e.system.toLowerCase()
+			    const platform = e.platform.toLowerCase()
+			    // 判断是否为ios设备
+			    if (platform.indexOf('ios') != -1 && (system.indexOf('ios') != -1 || system.indexOf('macos') != -1)) {
+			      Vue.prototype.SystemPlatform = 'apple'
+			    } else if (platform.indexOf('android') != -1 && (system.indexOf('android') != -1)) {
+			      Vue.prototype.SystemPlatform = 'android'
+			    } else {
+			      Vue.prototype.SystemPlatform = 'devtools'
+			    }
+			    // #endif
+			  }
+			})
+      
+      // 获取设备的状态栏信息和自定义顶栏信息
+      // store.dispatch('updateCustomBarInfo')
+      updateCustomBarInfo().then((res) => {
+        store.commit('$tStore', {
+          name: 'vuex_status_bar_height',
+          value: res.statusBarHeight
+        })
+        store.commit('$tStore', {
+          name: 'vuex_custom_bar_height',
+          value: res.customBarHeight
+        })
+      })
+			
+			// #ifdef MP-WEIXIN
+			//更新检测
+			if (wx.canIUse('getUpdateManager')) {
+			  const updateManager = wx.getUpdateManager();
+			  updateManager && updateManager.onCheckForUpdate((res) => {
+			    if (res.hasUpdate) {
+			      updateManager.onUpdateReady(() => {
+			        uni.showModal({
+			          title: '更新提示',
+			          content: '新版本已经准备就绪，是否需要重新启动应用？',
+			          success: (res) => {
+			            if (res.confirm) {
+			              uni.clearStorageSync() // 更新完成后刷新storage的数据
+			              updateManager.applyUpdate()
+			            }
+			          }
+			        })
+			      })
+			
+			      updateManager.onUpdateFailed(() => {
+			        uni.showModal({
+			          title: '已有新版本上线',
+			          content: '小程序自动更新失败，请删除该小程序后重新搜索打开哟~~~',
+                showCancel: false
+			        })
+			      })
+			    } else {
+			      //没有更新
+			    }
+			  })
+			} else {
+			  uni.showModal({
+			    title: '提示',
+			    content: '当前微信版本过低，无法使用该功能，请更新到最新的微信后再重试。',
+          showCancel: false
+			  })
+			}
+      // #endif
+		},
+		onShow: function() {
+			// console.log('App Show')
+		},
+		onHide: function() {
+			// console.log('App Hide')
+		}
+	}
+</script>
+
+<style lang="scss">
+  /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
+  @import '@/static/remixicon/remixicon.css';
+  @import './tuniao-ui/index.scss';
+  @import './tuniao-ui/iconfont.css';
+  @import './tuniao-ui/TnDouble.css';
+  /* 图鸟东东温馨提醒：在这里设置全局背景颜色吖*/
+  page {
+      background-color: #F6F6F6;
+  }
+</style>
diff --git a/api/index.js b/api/index.js
new file mode 100644
index 0000000..32514c5
--- /dev/null
+++ b/api/index.js
@@ -0,0 +1,704 @@
+import { API_BASE_URL, request } from '../utils/request'
+import { getCurrentLanguage, getLocaleShort } from '@/utils/i18n'
+
+function resolveLanguageHeader(language) {
+  return getLocaleShort(language || getCurrentLanguage())
+}
+
+function resolveIotApiBaseUrl() {
+  const normalizedBaseUrl = String(API_BASE_URL || '').trim()
+  if (!normalizedBaseUrl) {
+    return ''
+  }
+
+  if (normalizedBaseUrl.includes('/admin/')) {
+    return normalizedBaseUrl.replace('/admin/', '/iot/')
+  }
+
+  if (/\/admin$/i.test(normalizedBaseUrl)) {
+    return normalizedBaseUrl.replace(/\/admin$/i, '/iot')
+  }
+
+  return normalizedBaseUrl.replace(/\/$/, '') + '/iot'
+}
+
+function buildIotGatewayUrl(path = '') {
+  const iotBaseUrl = resolveIotApiBaseUrl()
+  const normalizedPath = String(path || '').startsWith('/')
+    ? String(path || '')
+    : `/${String(path || '')}`
+  return `${iotBaseUrl}${normalizedPath}`
+}
+
+function normalizeUploadResponse(data) {
+  if (typeof data !== 'string') {
+    return Promise.resolve(data)
+  }
+
+  const trimmed = data.trim()
+  const looksLikeJson = (
+    (trimmed.startsWith('{') && trimmed.endsWith('}'))
+    || (trimmed.startsWith('[') && trimmed.endsWith(']'))
+  )
+
+  if (!looksLikeJson) {
+    return Promise.resolve(data)
+  }
+
+  return Promise.resolve(trimmed)
+    .then(JSON.parse)
+    .catch(() => data)
+}
+
+function normalizeRequestCacheValue(value) {
+  if (Array.isArray(value)) {
+    return value.map(item => normalizeRequestCacheValue(item))
+  }
+  if (value && typeof value === 'object') {
+    return Object.keys(value).sort().reduce((result, key) => {
+      result[key] = normalizeRequestCacheValue(value[key])
+      return result
+    }, {})
+  }
+  return value
+}
+
+function buildRequestCacheKey(prefix, params = {}, language) {
+  return `${prefix}:${language}:${JSON.stringify(normalizeRequestCacheValue(params || {}))}`
+}
+
+const notificationPageRequestCache = new Map()
+const notificationPageResponseCache = new Map()
+const NOTIFICATION_PAGE_CACHE_TTL = 1200
+
+function getNotificationPageCachedResponse(requestKey) {
+  const cachedEntry = notificationPageResponseCache.get(requestKey)
+  if (!cachedEntry) {
+    return null
+  }
+  if (cachedEntry.expiresAt <= Date.now()) {
+    notificationPageResponseCache.delete(requestKey)
+    return null
+  }
+  return cachedEntry.response
+}
+
+function clearNotificationPageCache() {
+  notificationPageRequestCache.clear()
+  notificationPageResponseCache.clear()
+}
+
+// --- 字典与枚举 ---
+export function sysdictPage(params = {}, language) {
+  return request({
+    url: '/sysdict/page',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function getCountryList(language) {
+  return request({
+    url: '/sysdict/countries',
+    method: 'GET',
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function getEnums(params = {}, language) {
+  return request({
+    url: '/enums',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+// --- 用户与登录 ---
+export function usersLogin(data = {}, language) {
+  return request({
+    url: '/user/login',
+    method: 'POST',
+    data,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function userMe(params = {}, language) {
+  return request({
+    url: '/user/me',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+// --- 注册与申请 ---
+export function submitRegistrationApplication(data = {}, language) {
+  return request({
+    url: '/applicationform/registration/submit',
+    method: 'POST',
+    data,
+    header: {
+      'Content-Type': 'application/json-patch+json',
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function submitApplicationForm(data = {}, language) {
+  return request({
+    url: '/applicationform/submit',
+    method: 'POST',
+    data,
+    header: {
+      'Content-Type': 'application/json-patch+json',
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function registrationApplicationMePage(params = {}, language) {
+  return request({
+    url: '/applicationform/registration/me/page',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function registrationMyorder(params = {}, language) {
+  return request({
+    url: '/applicationform/registration/myorder',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function applicationFormMePage(params = {}, language) {
+  return request({
+    url: '/applicationform/me/page',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+// --- 订单与入住 ---
+export function orderSearchedHistoryPage(params = {}, language) {
+  return request({
+    url: '/order/searched/history/page',
+    method: 'GET',
+    params: params || {},
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function orderSearchedMePage(params = {}, language) {
+  return request({
+    url: '/order/searched/me/page',
+    method: 'GET',
+    params: params || {},
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function orderSearchedMeHistoryPage(params = {}, language) {
+  return request({
+    url: '/order/searched/me/history/page',
+    method: 'GET',
+    params: params || {},
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function orderSearchedDetail(orderNo = '', language) {
+  return request({
+    url: `/order/searched/detail/${encodeURIComponent(orderNo || '')}`,
+    method: 'GET',
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function orderSearchedCheckInPage(params = {}, language) {
+  return request({
+    url: '/order/searched/checkin/page',
+    method: 'GET',
+    params: params || {},
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function orderSearchedReservationPage(params = {}, language) {
+  return request({
+    url: '/order/searched/reservation/page',
+    method: 'GET',
+    params: params || {},
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function checkRecordByChecked(params = {}, language) {
+  const query = params || {}
+  const orderNo = String(query.orderNo || '').trim()
+  if (!orderNo) {
+    return Promise.resolve([])
+  }
+
+  return request({
+    url: '/checkrecord/by-checked',
+    method: 'GET',
+    params: {
+      ...query,
+      orderNo
+    },
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function accountQueryBills(params = {}, language) {
+  const query = params || {}
+  return request({
+    url: '/accountquery/bills',
+    method: 'GET',
+    params: query,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function paymentBillPay(data = {}, language) {
+  const payload = data || {}
+  return request({
+    url: '/payment/bill-pay',
+    method: 'POST',
+    data: payload,
+    header: {
+      'Content-Type': 'application/json-patch+json',
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function paymentPayingBills(params = {}, language) {
+  const query = params || {}
+  const BillNo = String(query.BillNo || query.billNo || '').trim()
+  if (!BillNo) {
+    return Promise.reject(new Error('账单号不能为空'))
+  }
+  return request({
+    url: '/payment/paying-bills',
+    method: 'GET',
+    params: {
+      BillNo
+    },
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function paymentStatusByBillNo(params = {}, language) {
+  const query = params || {}
+  const BillNo = String(query.BillNo || query.billNo || '').trim()
+  if (!BillNo) {
+    return Promise.reject(new Error('账单号不能为空'))
+  }
+  return request({
+    url: '/payment/status-by-billno',
+    method: 'GET',
+    params: {
+      BillNo
+    },
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function userDetailCancel(data = {}, language) {
+  const payload = data || {}
+  return request({
+    url: '/ApplicationForm/user/detail/cancel',
+    method: 'POST',
+    data: payload,
+    header: {
+      'Content-Type': 'application/json-patch+json',
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+// --- 合同 ---
+export function getMyPendingSignContracts(params = {}, language) {
+  return request({
+    url: '/contract/my/pending-sign',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function getMyEffectiveContracts(params = {}, language) {
+  return request({
+    url: '/contract/my/effective',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function contractPreview(data = {}, language) {
+  return request({
+    url: '/contract/preview',
+    method: 'POST',
+    data,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function contractSign(data = {}, language) {
+  return request({
+    url: '/contract/sign',
+    method: 'POST',
+    data,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+// --- 消息通知 ---
+export function notificationPage(params = {}, language) {
+  const query = params || {}
+  const requestKey = buildRequestCacheKey('notificationPage', query, language)
+
+  if (notificationPageRequestCache.has(requestKey)) {
+    return notificationPageRequestCache.get(requestKey)
+  }
+
+  const cachedResponse = getNotificationPageCachedResponse(requestKey)
+  if (cachedResponse) {
+    return Promise.resolve(cachedResponse)
+  }
+
+  const requestPromise = request({
+    url: '/notification/page',
+    method: 'GET',
+    params: query,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+
+  const managedRequestPromise = requestPromise.then((response) => {
+    notificationPageResponseCache.set(requestKey, {
+      response,
+      expiresAt: Date.now() + NOTIFICATION_PAGE_CACHE_TTL
+    })
+    return response
+  })
+
+  notificationPageRequestCache.set(requestKey, managedRequestPromise)
+
+  return managedRequestPromise.finally(() => {
+    if (notificationPageRequestCache.get(requestKey) === managedRequestPromise) {
+      notificationPageRequestCache.delete(requestKey)
+    }
+  })
+}
+
+export function notificationRead(code, language) {
+  return request({
+    url: `/notification/read/${code}`,
+    method: 'POST',
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  }).finally(() => {
+    clearNotificationPageCache()
+  })
+}
+
+// --- 房源与区域 ---
+export function areaPagination(params = {}, language) {
+  return request({
+    url: '/index/pagination',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    },
+    withAuth: false
+  })
+}
+
+export function facilityManagers(params = {}, language) {
+  return request({
+    url: '/facility/managers',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    },
+    withAuth: false
+  })
+}
+
+export function roomtypeList(params = {}, language) {
+  return request({
+    url: '/roomtype/list',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    },
+    withAuth: false
+  })
+}
+
+export function roomTypeDetail(params = {}, language) {
+  return request({
+    url: '/roomtype/detail',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function roomPagination(params = {}, language) {
+  return request({
+    url: '/room/pagination',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    },
+    withAuth: false
+  })
+}
+
+export function roomDetail(params = {}, language) {
+  return request({
+    url: '/room/detail',
+    method: 'GET',
+    params,
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    },
+    withAuth: false
+  })
+}
+
+// --- 智能设备 ---
+export function gatewayRoomDeviceList(brandId = '', roomCode = '', language) {
+  const resolvedBrandId = String(brandId || '').trim()
+  const resolvedRoomCode = String(roomCode || '').trim()
+
+  if (!resolvedBrandId) {
+    return Promise.reject(new Error('brandId 不能为空'))
+  }
+
+  if (!resolvedRoomCode) {
+    return Promise.reject(new Error('roomCode 不能为空'))
+  }
+
+  return request({
+    url: buildIotGatewayUrl(`/gateway/${encodeURIComponent(resolvedBrandId)}/rooms/${encodeURIComponent(resolvedRoomCode)}`),
+    method: 'POST',
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+function stringifyGatewayExecuteValue(value = '') {
+  if (value === undefined || value === null) {
+    return ''
+  }
+  if (typeof value === 'object') {
+    try {
+      return JSON.stringify(value)
+    } catch (error) {
+      return String(value)
+    }
+  }
+  return String(value)
+}
+
+function buildGatewayExecuteValues(data = {}) {
+  if (data === undefined || data === null) {
+    return ''
+  }
+
+  if (typeof data !== 'object' || Array.isArray(data)) {
+    return stringifyGatewayExecuteValue(data)
+  }
+
+  const keys = Object.keys(data)
+  if (!keys.length) {
+    return ''
+  }
+
+  if (keys.length === 1) {
+    return stringifyGatewayExecuteValue(data[keys[0]])
+  }
+
+  if (Object.prototype.hasOwnProperty.call(data, 'value')) {
+    return stringifyGatewayExecuteValue(data.value)
+  }
+
+  if (Object.prototype.hasOwnProperty.call(data, 'command')) {
+    return stringifyGatewayExecuteValue(data.command)
+  }
+
+  if (Object.prototype.hasOwnProperty.call(data, 'action')) {
+    return stringifyGatewayExecuteValue(data.action)
+  }
+
+  return stringifyGatewayExecuteValue(data)
+}
+
+export function gatewayExecuteDeviceCommand(brandId = '', deviceNo = '', functionCode = '', data = {}, language) {
+  const resolvedBrandId = String(brandId || '').trim()
+  const resolvedDeviceNo = String(deviceNo || '').trim()
+  const resolvedFunctionCode = String(functionCode || '').trim()
+
+  if (!resolvedBrandId) {
+    return Promise.reject(new Error('brandId 不能为空'))
+  }
+
+  if (!resolvedDeviceNo) {
+    return Promise.reject(new Error('deviceNo 不能为空'))
+  }
+
+  if (!resolvedFunctionCode) {
+    return Promise.reject(new Error('functionCode 不能为空'))
+  }
+
+  return request({
+    url: buildIotGatewayUrl(`/gateway/${encodeURIComponent(resolvedBrandId)}/execute`),
+    method: 'POST',
+    data: {
+      deviceNo: resolvedDeviceNo,
+      cmd: resolvedFunctionCode,
+      values: buildGatewayExecuteValues(data)
+    },
+    header: {
+      'Content-Type': 'application/json-patch+json',
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+export function gatewaySyncDeviceInfo(brandId = '', deviceNo = '', language) {
+  const resolvedBrandId = String(brandId || '').trim()
+  const resolvedDeviceNo = String(deviceNo || '').trim()
+
+  if (!resolvedBrandId) {
+    return Promise.reject(new Error('brandId 不能为空'))
+  }
+
+  if (!resolvedDeviceNo) {
+    return Promise.reject(new Error('deviceNo 不能为空'))
+  }
+
+  return request({
+    url: buildIotGatewayUrl(`/gateway/${encodeURIComponent(resolvedBrandId)}/devices/${encodeURIComponent(resolvedDeviceNo)}`),
+    method: 'POST',
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    }
+  })
+}
+
+// --- 内容 ---
+export function bannerAll(language) {
+  return request({
+    url: '/content/banner/all',
+    method: 'GET',
+    header: {
+      'X-Requested-Language': resolveLanguageHeader(language)
+    },
+    withAuth: false
+  })
+}
+
+// --- 上传 ---
+export function uploadCommonFile(filePath, formData = {}, name = 'file', header = {}) {
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: `${API_BASE_URL}/file/common/upload`,
+      filePath,
+      name,
+      formData: {
+        ...(formData || {}),
+        ProviderType: 'WechatMiniProgram'
+      },
+      header: {
+        'X-Requested-Language': resolveLanguageHeader(),
+        ...header
+      },
+      success: (res) => {
+        const { statusCode, data } = res
+
+        normalizeUploadResponse(data)
+          .then(parsedData => {
+            if (statusCode >= 200 && statusCode < 300) {
+              resolve(parsedData)
+              return
+            }
+
+            reject(parsedData || res)
+          })
+          .catch(() => {
+            reject(res)
+          })
+      },
+      fail: (error) => {
+        reject(error)
+      }
+    })
+  })
+}
diff --git a/components/ContractSignDialog.vue b/components/ContractSignDialog.vue
new file mode 100644
index 0000000..dd25676
--- /dev/null
+++ b/components/ContractSignDialog.vue
@@ -0,0 +1,1028 @@
+<template>
+  <view v-if="show" class="contract-sign-dialog" @touchmove.stop.prevent="noop">
+    <view class="contract-sign-dialog__mask" @tap="handleRequestClose"></view>
+    <view
+      class="contract-sign-dialog__panel tn-safe-area-inset-bottom"
+      :class="{ 'is-landscape': isLandscape }"
+      @touchmove.stop.prevent="noop"
+    >
+      <view class="contract-sign-dialog__canvas-card">
+        <view class="contract-sign-dialog__canvas-tip">
+          <view class="contract-sign-dialog__canvas-tip-text">
+            <text class="ri-edit-2-line"></text>
+            <text>{{ writingHint }}</text>
+          </view>
+          <view class="contract-sign-dialog__inline-name">
+            <text class="ri-user-3-fill"></text>
+            <text>{{ displaySignerName }}</text>
+          </view>
+        </view>
+        <view class="contract-sign-dialog__canvas-box" @touchmove.stop.prevent="noop">
+          <view class="contract-sign-dialog__canvas-guide" :class="{ 'is-chinese': isChineseName }">
+            <view v-if="isChineseName" class="contract-sign-dialog__canvas-guide-grid" :style="guideGridStyle">
+              <view
+                v-for="(char, index) in chineseGuideChars"
+                :key="`${char}-${index}`"
+                class="contract-sign-dialog__canvas-guide-cell"
+                :style="guideCellStyle"
+              >
+                <view class="contract-sign-dialog__guide-cross contract-sign-dialog__guide-cross--horizontal"></view>
+                <view class="contract-sign-dialog__guide-cross contract-sign-dialog__guide-cross--vertical"></view>
+                <text class="contract-sign-dialog__canvas-guide-char" :style="{ fontSize: guideFontSize, fontFamily: guideFontFamily }">
+                  {{ char }}
+                </text>
+              </view>
+            </view>
+            <view v-else class="contract-sign-dialog__canvas-guide-line" :style="guideAreaStyle">
+              <view class="contract-sign-dialog__guide-baseline"></view>
+              <text
+                class="contract-sign-dialog__canvas-guide-text is-en"
+                :style="{ fontSize: guideFontSize, fontFamily: guideFontFamily }"
+              >
+                {{ displaySignerName }}
+              </text>
+            </view>
+          </view>
+          <canvas
+            class="contract-sign-dialog__canvas"
+            canvas-id="contract-sign-canvas"
+            disable-scroll="true"
+            @touchstart="handleTouchStart"
+            @touchmove="handleTouchMove"
+            @touchend="handleTouchEnd"
+          ></canvas>
+        </view>
+      </view>
+
+      <view class="contract-sign-dialog__toolbar">
+        <view class="tool-btn tool-btn--soft" :class="{ disabled: !canUndo }" @tap="handleUndo">
+          <text class="ri-play-reverse-line"></text>
+          <text>{{ t('undo') }}</text>
+        </view>
+        <view class="tool-btn tool-btn--soft" :class="{ disabled: !hasSignature }" @tap="handleClear">
+          <text class="ri-delete-bin-line"></text>
+          <text>{{ t('rewrite') }}</text>
+        </view>
+        <view class="tool-btn tool-btn--ghost" @tap="handleRequestClose">
+          <text class="ri-close-line"></text>
+          <text>{{ t('close') }}</text>
+        </view>
+        <view class="tool-btn tool-btn--primary" :class="{ disabled: !hasSignature }" @tap="handleSave">
+          <text class="ri-check-line-circle"></text>
+          {{ t('confirmSignature') }}
+        </view>
+      </view>
+      <view v-if="!isLandscape" class="contract-sign-dialog__footer-tip">
+        <text class="ri-shield-check-line-fill"></text>
+        <text>{{ t('footerTip') }}</text>
+      </view>
+    </view>
+    <view
+      v-if="showCloseConfirm"
+      class="contract-sign-dialog__confirm-layer"
+      @touchmove.stop.prevent="noop"
+    >
+      <view class="contract-sign-dialog__confirm-mask"></view>
+      <view class="contract-sign-dialog__confirm-card">
+        <view class="contract-sign-dialog__confirm-title">{{ t('closeBoardTitle') }}</view>
+        <view class="contract-sign-dialog__confirm-desc">
+          {{ t('closeBoardDesc') }}
+        </view>
+        <view class="contract-sign-dialog__confirm-actions">
+          <view class="contract-sign-dialog__confirm-btn is-cancel" @tap="cancelRequestClose">{{ t('continueSigning') }}</view>
+          <view class="contract-sign-dialog__confirm-btn is-confirm" @tap="confirmRequestClose">{{ t('continueClosing') }}</view>
+        </view>
+      </view>
+    </view>
+    <view class="contract-sign-dialog__export-canvas-wrap">
+      <canvas
+        canvas-id="contract-sign-export-canvas"
+        :style="{ width: `${exportCanvasWidth}px`, height: `${exportCanvasHeight}px` }"
+      ></canvas>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ContractSignDialog',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    signerName: {
+      type: String,
+      default: ''
+    }
+  },
+  i18n: {
+    zh: {
+      undo: '撤销',
+      rewrite: '重写',
+      close: '关闭',
+      confirmSignature: '确认签名',
+      footerTip: '签名前请确认您已完整阅读合同内容',
+      closeBoardTitle: '关闭提示',
+      closeBoardDesc: '您还未完成签名，确认要关闭吗？',
+      continueSigning: '继续签名',
+      continueClosing: '确认关闭',
+      missingSignerName: '签名人缺失',
+      writingHintZh: '请在此处手写中文正楷签名',
+      writingHintEn: 'Please write your signature here',
+      signerNameMissingToast: '签名人信息缺失',
+      signatureRequiredToast: '请先完成签名',
+      boundsFailedToast: '获取签名范围失败',
+      signatureTooSmallToast: '签名范围太小，请重新签名',
+      exportFailedToast: '导出签名失败，请重试'
+    },
+    en: {
+      undo: 'Undo',
+      rewrite: 'Rewrite',
+      close: 'Close',
+      confirmSignature: 'Confirm',
+      footerTip: 'Please confirm that you have fully read the contract before signing',
+      closeBoardTitle: 'Notice',
+      closeBoardDesc: 'You have not finished signing. Are you sure to close?',
+      continueSigning: 'Continue Signing',
+      continueClosing: 'Close',
+      missingSignerName: 'Missing Signer',
+      writingHintZh: 'Please write your Chinese signature here',
+      writingHintEn: 'Please write your signature here',
+      signerNameMissingToast: 'Missing signer name',
+      signatureRequiredToast: 'Please sign first',
+      boundsFailedToast: 'Failed to get signature bounds',
+      signatureTooSmallToast: 'Signature is too small, please try again',
+      exportFailedToast: 'Failed to export signature, please try again'
+    }
+  },
+  data() {
+    return {
+      canvasId: 'contract-sign-canvas',
+      ctx: null,
+      canvasWidth: 0,
+      canvasHeight: 0,
+      isLandscape: false,
+      ready: false,
+      drawing: false,
+      strokes: [],
+      currentStroke: [],
+      showCloseConfirm: false,
+      lineWidth: 5,
+      minPointDistance: 2,
+      strokeColor: '#0F172A'
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage ? this.$getLanguage() : 'zh'
+    },
+    displaySignerName() {
+      const name = String(this.signerName || '').trim()
+      return name || this.t('missingSignerName')
+    },
+    hasSignerName() {
+      return !!String(this.signerName || '').trim()
+    },
+    isChineseName() {
+      return /^[\u4E00-\u9FA5·]+$/.test(this.displaySignerName)
+    },
+    chineseGuideChars() {
+      return this.isChineseName
+        ? this.displaySignerName.split('').filter(char => char && char.trim())
+        : []
+    },
+    hasSignature() {
+      return this.strokes.length > 0
+    },
+    canUndo() {
+      return this.strokes.length > 0
+    },
+    writingHint() {
+      return this.isChineseName ? this.t('writingHintZh') : this.t('writingHintEn')
+    },
+    guideFontSize() {
+      const length = this.displaySignerName.length
+      if (this.isChineseName) {
+        if (length <= 2) return this.isLandscape ? '176rpx' : '160rpx'
+        if (length === 3) return this.isLandscape ? '156rpx' : '142rpx'
+        if (length === 4) return this.isLandscape ? '138rpx' : '128rpx'
+        if (length <= 6) return this.isLandscape ? '122rpx' : '112rpx'
+        return this.isLandscape ? '108rpx' : '100rpx'
+      }
+      if (length >= 18) return this.isLandscape ? '88rpx' : '78rpx'
+      if (length >= 12) return this.isLandscape ? '100rpx' : '90rpx'
+      if (length >= 8) return this.isLandscape ? '116rpx' : '102rpx'
+      return this.isLandscape ? '132rpx' : '116rpx'
+    },
+    guideFontFamily() {
+      if (this.isChineseName) {
+        return '"STKaiti", "KaiTi", "Kaiti SC", "DFKai-SB", serif'
+      }
+      return '"Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive'
+    },
+    guideCellStyle() {
+      const count = Math.max(this.chineseGuideChars.length, 1)
+      const gapRpx = this.isLandscape ? 12 : 8
+      const gapPx = uni.upx2px(gapRpx)
+      const totalGapPx = gapPx * Math.max(count - 1, 0)
+      const availableWidth = this.canvasWidth ? this.canvasWidth * 0.9 : 0
+      const availableHeight = this.canvasHeight ? this.canvasHeight * 0.9 : 0
+      if (!availableWidth || !availableHeight) {
+        return {}
+      }
+      const cellPx = Math.max(
+        Math.min((availableWidth - totalGapPx) / count, availableHeight),
+        0
+      )
+      return {
+        width: `${cellPx}px`,
+        height: `${cellPx}px`
+      }
+    },
+    guideAreaStyle() {
+      return {
+        width: '90%',
+        height: '90%'
+      }
+    },
+    guideGridStyle() {
+      return {
+        width: '90%',
+        height: '90%'
+      }
+    },
+    exportCanvasWidth() {
+      return this.isLandscape ? this.canvasHeight || 1 : this.canvasWidth || 1
+    },
+    exportCanvasHeight() {
+      return this.isLandscape ? this.canvasWidth || 1 : this.canvasHeight || 1
+    }
+  },
+  watch: {
+    show(value) {
+      if (value) {
+        this.isLandscape = true
+        this.applyLandscapeOrientation()
+        this.$nextTick(() => {
+          this.initCanvas()
+        })
+      } else {
+        this.restorePortraitOrientation()
+      }
+    },
+    isLandscape(value, oldValue) {
+      if (value === oldValue) return
+      this.clearSignatureContent()
+    }
+  },
+  beforeDestroy() {
+    this.restorePortraitOrientation()
+    this.ctx = null
+  },
+  methods: {
+    t(key) {
+      return this.$translate(this.$options.i18n, key)
+    },
+    clearSignatureContent() {
+      this.strokes = []
+      this.currentStroke = []
+      this.drawing = false
+      if (this.ready) {
+        this.resetCanvas()
+      }
+    },
+    initCanvas() {
+      this.clearSignatureContent()
+      const query = uni.createSelectorQuery().in(this)
+      query.select('.contract-sign-dialog__canvas-box').boundingClientRect(rect => {
+        if (!rect) return
+        this.canvasWidth = rect.width
+        this.canvasHeight = rect.height
+        this.ctx = uni.createCanvasContext(this.canvasId, this)
+        this.ready = true
+        this.resetCanvas()
+      }).exec()
+    },
+    resetCanvas() {
+      if (!this.ctx || !this.ready) return
+      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+      this.ctx.setLineCap('round')
+      this.ctx.setLineJoin('round')
+      this.ctx.draw()
+    },
+    redrawCanvas() {
+      if (!this.ctx || !this.ready) return
+      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+      this.ctx.setLineCap('round')
+      this.ctx.setLineJoin('round')
+      this.strokes.forEach(stroke => {
+        this.drawStroke(stroke)
+      })
+      this.ctx.draw()
+    },
+    drawStroke(stroke) {
+      if (!Array.isArray(stroke) || stroke.length === 0) return
+      if (stroke.length === 1) {
+        const point = stroke[0]
+        this.ctx.beginPath()
+        this.ctx.arc(point.x, point.y, this.lineWidth / 2, 0, Math.PI * 2)
+        this.ctx.setFillStyle(this.strokeColor)
+        this.ctx.fill()
+        return
+      }
+      if (stroke.length === 2) {
+        this.ctx.beginPath()
+        this.ctx.setStrokeStyle(this.strokeColor)
+        this.ctx.setLineWidth(this.lineWidth)
+        this.ctx.moveTo(stroke[0].x, stroke[0].y)
+        this.ctx.lineTo(stroke[1].x, stroke[1].y)
+        this.ctx.stroke()
+        return
+      }
+      this.ctx.beginPath()
+      this.ctx.setStrokeStyle(this.strokeColor)
+      this.ctx.setLineWidth(this.lineWidth)
+      this.ctx.moveTo(stroke[0].x, stroke[0].y)
+      for (let index = 1; index < stroke.length - 1; index += 1) {
+        const currentPoint = stroke[index]
+        const nextPoint = stroke[index + 1]
+        const midPoint = this.getMidPoint(currentPoint, nextPoint)
+        this.ctx.quadraticCurveTo(currentPoint.x, currentPoint.y, midPoint.x, midPoint.y)
+      }
+      const secondLastPoint = stroke[stroke.length - 2]
+      const lastPoint = stroke[stroke.length - 1]
+      this.ctx.quadraticCurveTo(secondLastPoint.x, secondLastPoint.y, lastPoint.x, lastPoint.y)
+      this.ctx.stroke()
+    },
+    getMidPoint(pointA, pointB) {
+      return {
+        x: (pointA.x + pointB.x) / 2,
+        y: (pointA.y + pointB.y) / 2
+      }
+    },
+    getDistance(pointA, pointB) {
+      const dx = pointA.x - pointB.x
+      const dy = pointA.y - pointB.y
+      return Math.sqrt(dx * dx + dy * dy)
+    },
+    applyLandscapeOrientation() {
+      try {
+        if (typeof plus !== 'undefined' && plus.screen && plus.screen.lockOrientation) {
+          plus.screen.lockOrientation('landscape-primary')
+          return
+        }
+      } catch (error) {
+        console.error('切换系统横屏失败', error)
+      }
+      try {
+        if (
+          typeof window !== 'undefined' &&
+          window.screen &&
+          window.screen.orientation &&
+          window.screen.orientation.lock
+        ) {
+          window.screen.orientation.lock('landscape').catch(() => {})
+        }
+      } catch (error) {
+        console.error('浏览器横屏锁定失败', error)
+      }
+    },
+    restorePortraitOrientation() {
+      try {
+        if (typeof plus !== 'undefined' && plus.screen && plus.screen.lockOrientation) {
+          plus.screen.lockOrientation('portrait-primary')
+          return
+        }
+      } catch (error) {
+        console.error('恢复竖屏失败', error)
+      }
+      try {
+        if (
+          typeof window !== 'undefined' &&
+          window.screen &&
+          window.screen.orientation &&
+          window.screen.orientation.lock
+        ) {
+          window.screen.orientation.lock('portrait').catch(() => {})
+        }
+      } catch (error) {
+        console.error('浏览器竖屏锁定失败', error)
+      }
+    },
+    handleRequestClose() {
+      if (this.hasSignature) {
+        this.showCloseConfirm = true
+        return
+      }
+      this.handleClose()
+    },
+    cancelRequestClose() {
+      this.showCloseConfirm = false
+    },
+    confirmRequestClose() {
+      this.showCloseConfirm = false
+      this.handleClose()
+    },
+    noop() {},
+    buildPoint(event, key) {
+      const touches = event[key]
+      if (!touches || !touches.length) return null
+      return {
+        x: touches[0].x,
+        y: touches[0].y
+      }
+    },
+    handleTouchStart(event) {
+      if (!this.ready) return
+      const point = this.buildPoint(event, 'touches')
+      if (!point) return
+      this.drawing = true
+      this.currentStroke = [point]
+      this.strokes.push(this.currentStroke)
+      this.redrawCanvas()
+    },
+    handleTouchMove(event) {
+      if (!this.ready || !this.drawing) return
+      if (event.cancelable && !event.defaultPrevented) {
+        event.preventDefault()
+      }
+      const point = this.buildPoint(event, 'touches')
+      if (!point) return
+      const lastPoint = this.currentStroke[this.currentStroke.length - 1]
+      if (lastPoint && this.getDistance(lastPoint, point) < this.minPointDistance) {
+        return
+      }
+      this.currentStroke.push(point)
+      this.redrawCanvas()
+    },
+    handleTouchEnd(event) {
+      if (!this.ready || !this.drawing) return
+      const point = this.buildPoint(event, 'changedTouches')
+      if (point) {
+        this.currentStroke.push(point)
+      }
+      this.drawing = false
+      this.currentStroke = []
+      this.redrawCanvas()
+    },
+    handleUndo() {
+      if (!this.canUndo) return
+      this.strokes.pop()
+      this.redrawCanvas()
+    },
+    handleClear() {
+      this.clearSignatureContent()
+    },
+    handleClose() {
+      this.showCloseConfirm = false
+      this.isLandscape = false
+      this.restorePortraitOrientation()
+      this.$emit('close')
+    },
+    getSignatureBounds() {
+      if (!this.hasSignature) return null
+      let minX = Number.POSITIVE_INFINITY
+      let minY = Number.POSITIVE_INFINITY
+      let maxX = 0
+      let maxY = 0
+      this.strokes.forEach(stroke => {
+        ;(stroke || []).forEach(point => {
+          if (!point) return
+          minX = Math.min(minX, point.x)
+          minY = Math.min(minY, point.y)
+          maxX = Math.max(maxX, point.x)
+          maxY = Math.max(maxY, point.y)
+        })
+      })
+      if (!Number.isFinite(minX) || !Number.isFinite(minY)) return null
+      const padding = Math.max(this.lineWidth * 4, 12)
+      const x = Math.max(Math.floor(minX - padding), 0)
+      const y = Math.max(Math.floor(minY - padding), 0)
+      const width = Math.min(Math.ceil(maxX - minX + padding * 2), this.canvasWidth - x)
+      const height = Math.min(Math.ceil(maxY - minY + padding * 2), this.canvasHeight - y)
+      return {
+        x,
+        y,
+        width: Math.max(width, 1),
+        height: Math.max(height, 1)
+      }
+    },
+    getSignaturePointCount() {
+      return this.strokes.reduce((total, stroke) => total + ((stroke && stroke.length) || 0), 0)
+    },
+    isSignatureQualified(bounds) {
+      if (!bounds) return false
+      const pointCount = this.getSignaturePointCount()
+      const minWidth = Math.max(this.canvasWidth * 0.06, 24)
+      const minHeight = Math.max(this.canvasHeight * 0.05, 18)
+      const minArea = Math.max(this.canvasWidth * this.canvasHeight * 0.0035, 900)
+      const actualArea = bounds.width * bounds.height
+      return pointCount >= 4 && (bounds.width >= minWidth || bounds.height >= minHeight) && actualArea >= minArea
+    },
+    exportCurrentCanvas(cropRect) {
+      return new Promise((resolve, reject) => {
+        uni.canvasToTempFilePath({
+          canvasId: this.canvasId,
+          fileType: 'png',
+          quality: 1,
+          x: cropRect.x,
+          y: cropRect.y,
+          width: cropRect.width,
+          height: cropRect.height,
+          success: res => resolve(res.tempFilePath),
+          fail: reject
+        }, this)
+      })
+    },
+    normalizeLandscapeImage(tempFilePath, sourceWidth, sourceHeight) {
+      return new Promise((resolve, reject) => {
+        const tempCtx = uni.createCanvasContext('contract-sign-export-canvas', this)
+        tempCtx.restore()
+        tempCtx.save()
+        tempCtx.clearRect(0, 0, this.exportCanvasWidth, this.exportCanvasHeight)
+        tempCtx.translate(0, sourceWidth)
+        tempCtx.rotate(-90 * Math.PI / 180)
+        tempCtx.drawImage(tempFilePath, 0, 0, sourceWidth, sourceHeight)
+        tempCtx.draw(false, () => {
+          uni.canvasToTempFilePath({
+            canvasId: 'contract-sign-export-canvas',
+            fileType: 'png',
+            x: 0,
+            y: 0,
+            width: sourceHeight,
+            height: sourceWidth,
+            success: res => resolve(res.tempFilePath),
+            fail: reject
+          }, this)
+        })
+      })
+    },
+    handleSave() {
+      if (!this.hasSignerName) {
+        uni.showToast({
+          title: this.t('signerNameMissingToast'),
+          icon: 'none'
+        })
+        return
+      }
+      if (!this.hasSignature) {
+        uni.showToast({
+          title: this.t('signatureRequiredToast'),
+          icon: 'none'
+        })
+        return
+      }
+      const cropRect = this.getSignatureBounds()
+      if (!cropRect) {
+        uni.showToast({
+          title: this.t('boundsFailedToast'),
+          icon: 'none'
+        })
+        return
+      }
+      if (!this.isSignatureQualified(cropRect)) {
+        uni.showToast({
+          title: this.t('signatureTooSmallToast'),
+          icon: 'none'
+        })
+        return
+      }
+      this.exportCurrentCanvas(cropRect)
+        .then(tempFilePath => {
+          if (this.isLandscape) {
+            return this.normalizeLandscapeImage(tempFilePath, cropRect.width, cropRect.height)
+          }
+          return tempFilePath
+        })
+        .then(finalPath => {
+          this.$emit('save', finalPath)
+        })
+        .catch(error => {
+          console.error('导出签名图片失败', error)
+          uni.showToast({
+            title: this.t('exportFailedToast'),
+            icon: 'none'
+          })
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-sign-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+}
+
+.contract-sign-dialog__mask {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at top, rgba(73, 119, 196, 0.18), transparent 45%),
+    rgba(15, 23, 42, 0.58);
+}
+
+.contract-sign-dialog__panel {
+  position: absolute;
+  left: 20rpx;
+  right: 20rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 36rpx;
+  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
+  box-shadow: 0 28rpx 90rpx rgba(15, 23, 42, 0.24);
+  padding: 36rpx 32rpx 30rpx;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.78);
+}
+
+.contract-sign-dialog__panel.is-landscape {
+  left: 12rpx;
+  right: 12rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 22rpx 22rpx 18rpx;
+  max-height: calc(100vh - 24rpx);
+  height: calc(100vh - 24rpx);
+  display: flex;
+  flex-direction: column;
+}
+
+.contract-sign-dialog__canvas-card {
+  margin-top: 28rpx;
+  border-radius: 30rpx;
+  border: 1px solid rgba(42, 92, 170, 0.10);
+  background: linear-gradient(180deg, #FBFDFF 0%, #F2F7FD 100%);
+  padding: 26rpx;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.contract-sign-dialog__canvas-tip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.contract-sign-dialog__canvas-tip-text {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 24rpx;
+  color: #607086;
+  font-weight: 600;
+}
+
+.contract-sign-dialog__inline-name {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  min-width: 168rpx;
+  height: 64rpx;
+  padding: 0 20rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(180deg, #EEF3FA 0%, #E5ECF6 100%);
+  color: #314966;
+  font-size: 22rpx;
+  font-weight: 600;
+  box-shadow: inset 0 0 0 1px rgba(85, 108, 141, 0.08);
+}
+
+.contract-sign-dialog__canvas-box {
+  margin-top: 18rpx;
+  height: 460rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(247,250,255,0.98) 100%);
+  border: 1px solid rgba(42, 92, 170, 0.14);
+  position: relative;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 12rpx 30rpx rgba(34, 64, 110, 0.06);
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__canvas-card {
+  margin-top: 0;
+  padding: 18rpx;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__canvas-box {
+  flex: 1;
+  min-height: 0;
+  height: auto;
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__canvas-guide {
+  padding: 14rpx 18rpx;
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__canvas-guide-grid {
+  flex-wrap: nowrap;
+  gap: 10rpx;
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__toolbar {
+  gap: 10rpx;
+  margin-top: 12rpx;
+  flex-shrink: 0;
+}
+
+.contract-sign-dialog__panel.is-landscape .tool-btn {
+  height: 64rpx;
+  border-radius: 18rpx;
+  gap: 6rpx;
+  font-size: 22rpx;
+}
+
+.contract-sign-dialog__panel.is-landscape .tool-btn text:first-child {
+  font-size: 22rpx;
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__canvas-tip {
+  flex-shrink: 0;
+  gap: 10rpx;
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__canvas-tip-text {
+  font-size: 22rpx;
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__inline-name {
+  min-width: 132rpx;
+  height: 52rpx;
+  padding: 0 16rpx;
+  font-size: 20rpx;
+}
+
+.contract-sign-dialog__panel.is-landscape .contract-sign-dialog__footer-tip {
+  margin-top: 10rpx;
+}
+
+.contract-sign-dialog__canvas-box::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(transparent 95%, rgba(42, 92, 170, 0.035) 100%);
+  background-size: 100% 72rpx;
+  pointer-events: none;
+}
+
+.contract-sign-dialog__canvas-guide {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx;
+  box-sizing: border-box;
+}
+
+.contract-sign-dialog__canvas-guide-grid {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 8rpx;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}
+
+.contract-sign-dialog__canvas-guide-cell {
+  border-radius: 20rpx;
+  background: rgba(42, 92, 170, 0.035);
+  border: 1px dashed rgba(42, 92, 170, 0.12);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.contract-sign-dialog__canvas-guide-line {
+  width: 90%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.contract-sign-dialog__canvas-guide-line::after {
+  content: '';
+  position: absolute;
+  left: 12rpx;
+  right: 12rpx;
+  top: 50%;
+  border-top: 1px dashed rgba(42, 92, 170, 0.14);
+}
+
+.contract-sign-dialog__guide-cross {
+  position: absolute;
+  background: rgba(15, 23, 42, 0.08);
+}
+
+.contract-sign-dialog__guide-cross--horizontal {
+  left: 12rpx;
+  right: 12rpx;
+  top: 50%;
+  height: 1px;
+  transform: translateY(-50%);
+}
+
+.contract-sign-dialog__guide-cross--vertical {
+  top: 12rpx;
+  bottom: 12rpx;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+}
+
+.contract-sign-dialog__guide-baseline {
+  position: absolute;
+  left: 18rpx;
+  right: 18rpx;
+  top: 50%;
+  border-top: 1px dashed rgba(15, 23, 42, 0.08);
+}
+
+.contract-sign-dialog__canvas {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+.contract-sign-dialog__canvas-guide-text {
+  position: relative;
+  z-index: 2;
+  max-width: calc(100% - 12rpx);
+  color: rgba(15, 23, 42, 0.14);
+  font-weight: 500;
+  letter-spacing: 2rpx;
+  text-align: center;
+  word-break: break-all;
+  transform: scaleY(1.08);
+  text-shadow: 0 0 1px rgba(15, 23, 42, 0.04);
+}
+
+.contract-sign-dialog__canvas-guide-text.is-en {
+  letter-spacing: 0;
+  font-style: italic;
+  transform: scaleY(1.02) rotate(-4deg);
+}
+
+.contract-sign-dialog__canvas-guide-char {
+  position: relative;
+  z-index: 1;
+  color: rgba(15, 23, 42, 0.14);
+  font-weight: 500;
+  line-height: 1;
+  transform: scale(1.08) rotate(-3deg);
+  text-shadow: 0 0 1px rgba(15, 23, 42, 0.04);
+}
+
+.contract-sign-dialog__toolbar {
+  margin-top: 30rpx;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16rpx;
+}
+
+.tool-btn {
+  height: 84rpx;
+  border-radius: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #35506F;
+  background: #F2F5F9;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.tool-btn:active {
+  transform: scale(0.97);
+}
+
+.tool-btn--soft {
+  background: linear-gradient(180deg, #F7FAFE 0%, #EEF3F9 100%);
+  box-shadow: inset 0 0 0 1px rgba(85, 108, 141, 0.06);
+}
+
+.tool-btn--ghost {
+  color: #516173;
+  background: linear-gradient(180deg, #F4F7FB 0%, #E9EEF5 100%);
+}
+
+.tool-btn--primary {
+  color: #FFFFFF;
+  background: linear-gradient(135deg, #2A5CAA 0%, #3C74CB 100%);
+  box-shadow: 0 10rpx 24rpx rgba(42, 92, 170, 0.26);
+}
+
+.tool-btn.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.contract-sign-dialog__footer-tip {
+  margin-top: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  font-size: 22rpx;
+  color: #74859A;
+}
+
+.contract-sign-dialog__export-canvas-wrap {
+  position: fixed;
+  left: -9999px;
+  top: -9999px;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.contract-sign-dialog__confirm-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 10020;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32rpx;
+  box-sizing: border-box;
+}
+
+.contract-sign-dialog__confirm-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.5);
+}
+
+.contract-sign-dialog__confirm-card {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 560rpx;
+  border-radius: 28rpx;
+  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
+  box-shadow: 0 24rpx 72rpx rgba(15, 23, 42, 0.22);
+  padding: 34rpx 28rpx 28rpx;
+  border: 1px solid rgba(255, 255, 255, 0.78);
+}
+
+.contract-sign-dialog__confirm-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #10233F;
+  text-align: center;
+}
+
+.contract-sign-dialog__confirm-desc {
+  margin-top: 18rpx;
+  font-size: 24rpx;
+  line-height: 1.7;
+  color: #6B7A90;
+  text-align: center;
+}
+
+.contract-sign-dialog__confirm-actions {
+  margin-top: 28rpx;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16rpx;
+}
+
+.contract-sign-dialog__confirm-btn {
+  height: 78rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  font-weight: 600;
+}
+
+.contract-sign-dialog__confirm-btn.is-cancel {
+  color: #516173;
+  background: linear-gradient(180deg, #F4F7FB 0%, #E9EEF5 100%);
+}
+
+.contract-sign-dialog__confirm-btn.is-confirm {
+  color: #FFFFFF;
+  background: linear-gradient(135deg, #2A5CAA 0%, #3C74CB 100%);
+}
+</style>
diff --git a/components/contract-alert/contract-alert.vue b/components/contract-alert/contract-alert.vue
new file mode 100644
index 0000000..94540da
--- /dev/null
+++ b/components/contract-alert/contract-alert.vue
@@ -0,0 +1,190 @@
+<template>
+  <view v-if="activeAlert" class="contract-alert-float">
+    <view class="alert-panel" :class="{ 'is-collapsed': !isExpanded }" @click="handleBoxClick">
+      <view class="alert-icon-wrap">
+        <text class="tn-icon-edit-write-fill"></text>
+      </view>
+      <view class="alert-main">
+        <view class="alert-text">
+          <view class="alert-title">{{ activeAlert.title }}</view>
+          <view class="alert-desc">{{ activeAlert.desc }}</view>
+        </view>
+        <view class="alert-action" @click.stop="handlePrimaryAction">{{ activeAlert.actionText }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ContractAlert',
+  props: {
+    pendingContracts: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      isExpanded: true,
+      collapseTimer: null
+    }
+  },
+  computed: {
+    activeAlert() {
+      if (!Array.isArray(this.pendingContracts) || !this.pendingContracts.length) {
+        return null
+      }
+      return {
+        title: this.t('pendingTitle'),
+        desc: this.t('pendingDesc', { count: this.pendingContracts.length }),
+        actionText: this.t('actionText')
+      }
+    }
+  },
+  watch: {
+    activeAlert: {
+      immediate: true,
+      handler(value) {
+        if (!value) {
+          this.clearCollapseTimer()
+          return
+        }
+        this.isExpanded = true
+        this.startCollapseTimer()
+      }
+    }
+  },
+  beforeDestroy() {
+    this.clearCollapseTimer()
+  },
+  methods: {
+    t(key, params) {
+      return this.$translate(this.i18n, key, params)
+    },
+    clearCollapseTimer() {
+      if (this.collapseTimer) {
+        clearTimeout(this.collapseTimer)
+        this.collapseTimer = null
+      }
+    },
+    startCollapseTimer() {
+      this.clearCollapseTimer()
+      this.collapseTimer = setTimeout(() => {
+        this.isExpanded = false
+      }, 3000)
+    },
+    handleBoxClick() {
+      if (!this.activeAlert) {
+        return
+      }
+      if (!this.isExpanded) {
+        this.isExpanded = true
+        this.startCollapseTimer()
+        return
+      }
+      this.handlePrimaryAction()
+    },
+    handlePrimaryAction() {
+      const contract = this.pendingContracts[0]
+      if (!contract) {
+        return
+      }
+      uni.navigateTo({
+        url: `/pkgService/contract_sign/contract_sign?no=${encodeURIComponent(contract.no || contract.contractNo || '')}&orderNo=${encodeURIComponent(contract.orderNo || '')}`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-alert-float {
+  position: fixed;
+  right: 0;
+  bottom: calc(180rpx + env(safe-area-inset-bottom));
+  z-index: 999;
+}
+
+.alert-panel {
+  display: flex;
+  align-items: center;
+  max-width: 530rpx;
+  padding: 16rpx 18rpx;
+  border-radius: 28rpx 0 0 28rpx;
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid rgba($brand-primary, 0.12);
+  border-right: none;
+  box-shadow: 0 16rpx 36rpx rgba($brand-primary, 0.12);
+  backdrop-filter: blur(16px);
+  transition: all 0.35s ease;
+}
+
+.alert-panel.is-collapsed {
+  transform: translateX(calc(100% - 106rpx));
+  padding-right: 0;
+}
+
+.alert-panel.is-collapsed .alert-main {
+  width: 0;
+  margin-left: 0;
+  opacity: 0;
+}
+
+.alert-icon-wrap {
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+  color: #ffffff;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.2);
+}
+
+.alert-main {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  opacity: 1;
+  transition: all 0.35s ease;
+}
+
+.alert-text {
+  margin-right: 18rpx;
+  max-width: 260rpx;
+}
+
+.alert-title {
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #1f2d3d;
+}
+
+.alert-desc {
+  margin-top: 6rpx;
+  font-size: 22rpx;
+  color: #7c8da0;
+  white-space: nowrap;
+}
+
+.alert-action {
+  padding: 10rpx 28rpx;
+  border-radius: 30rpx;
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #ffffff;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.2);
+  white-space: nowrap;
+  transition: all 0.3s;
+}
+
+.alert-action:active {
+  transform: scale(0.96);
+  box-shadow: 0 4rpx 10rpx rgba($brand-primary, 0.15);
+}
+</style>
diff --git a/components/filter/select.vue b/components/filter/select.vue
new file mode 100644
index 0000000..07667c5
--- /dev/null
+++ b/components/filter/select.vue
@@ -0,0 +1,417 @@
+<template>
+  <view
+    v-if="openModal"
+    class="wx-modal"
+  >
+    <view
+      class="wam__mask"
+      @touchmove.prevent=""
+      @tap.stop="closeModal"
+    ></view>
+    
+    <!-- 内容区域 -->
+    <view class="wam__wrapper">
+      <!-- 关闭按钮 -->
+      <view class="wam__close-btn" @tap.stop="closeModal">
+        <tn-button size="lg" shape="icon" backgroundColor="#00000000" fontColor="#AAAAAA">
+          <text class="tn-icon-close"></text>
+        </tn-button>
+        <!-- <text class="ri-close-circle-fill tn-color-white"></text> -->
+      </view>
+      <view class="tn-margin-left tn-flex tn-flex-col-center">
+        <view class="tn-text-bold tn-text-lg">综合筛选</view>
+      </view>
+      
+      <view class="tn-margin-top-sm" style="border-top: 1rpx solid #F8F7F8;">
+        
+        <scroll-view scroll-y="true" style="max-height: 55vh;">
+          <!-- 内容 start-->
+          <view class="tn-padding-top-sm" style="margin: 30rpx;">
+            
+            <view class="">
+              应用权益
+            </view>
+            
+            <view class="justify-content-item">
+              <view class="tn-tag-content tn-text-justify">
+                <view v-for="(item, index) in redpacket" :key="index" class="tn-tag-content__item tn-margin-right tn-text-sm" :class="[item.select ? 'bg-select' : 'bg-select-no']"  @click="handleRedpacketClick(index)">
+                   {{ item.title }}
+                </view>
+              </view>
+            </view>
+            
+            <view class="tn-margin-top-xl">
+              价格区间
+            </view>
+            
+            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top">
+              <view class="" style="width:30vw;border-radius: 100rpx;background-color: #F5F5F5;">
+                <view class="tn-color-gray tn-color-black tn-text-center" style="padding: 14rpx;">
+                  <input type="number" placeholder="最低价" name="input" placeholder-style="color:#AAAAAA;margin-left: 10rpx" value=""></input>
+                </view>
+              </view>
+              <view class="tn-icon-sort">
+                
+              </view>
+              <view class="" style="width:30vw;border-radius: 100rpx;background-color: #F5F5F5;">
+                <view class="tn-color-gray tn-color-black tn-text-center" style="padding: 14rpx;">
+                  <input type="number" placeholder="最高价" name="input" placeholder-style="color:#AAAAAA;margin-left: 10rpx" value=""></input>
+                </view>
+              </view>
+            </view>
+            
+          </view>
+          <!-- 内容 end-->
+        
+        </scroll-view>
+        
+        <!-- 悬浮按钮-->
+        <view class="tn-flex tn-footerfixed" style="border-top: 1rpx solid #F8F7F8;">
+          <view class="tn-flex-1 justify-content-item tn-text-center tn-margin-right-sm">
+            <tn-button :plain="true" backgroundColor="#AAAAAA " padding="39rpx 0" width="100%" :fontSize="28" fontColor="#AAAAAA" shape="round" @click="tn('')">
+              <text class="">重 置</text>
+            </tn-button>
+          </view>
+          <view class="tn-flex-1 justify-content-item tn-text-center tn-margin-left-sm">
+            <tn-button backgroundColor="$brand-primary " padding="40rpx 0" width="100%" :fontSize="28" fontColor="#FFFFFF" shape="round" @click="tn('')">
+              <text class="">确 定</text>
+            </tn-button>
+          </view>
+        </view>
+        
+        <view class="tn-tabbar-height"></view>
+        
+        
+      </view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    options: {
+      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+      virtualHost: true
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        openModal: false,
+        content: [{
+            play: '12K',
+            number: '16',
+            title: '类型名称',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '1.08W',
+            number: '17',
+            title: '类型名称',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '2.06K',
+            number: '12',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '1.02W',
+            number: '22',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '2.92W',
+            number: '12',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '2.03W',
+            number: '5',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '1.69W',
+            number: '8',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '118K',
+            number: '6',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '2.03W',
+            number: '16',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '2.16W',
+            number: '8',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '1.89W',
+            number: '6',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '3.03W',
+            number: '6',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '1.32W',
+            number: '18',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '1.92W',
+            number: '6',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '1.52W',
+            number: '16',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '4.35W',
+            number: '15',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '4.57W',
+            number: '19',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '4.86W',
+            number: '12',
+            title: '那只猪不见了',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          }
+        ],
+        
+        redpacket: [
+          {
+            title: "包邮",
+            select: true
+          },
+          {
+            title: "积分抵扣",
+            select: false
+          },
+          {
+            title: "24小时发货",
+            select: false
+          },
+          {
+            title: "赠送运险费",
+            select: false
+          },
+          {
+            title: "会员折扣",
+            select: false
+          },
+        ],
+ 
+      }
+    },
+    watch: {
+      value: {
+        handler(val) {
+          this.openModal = val
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+        uni.navigateTo({
+          url: e,
+        });
+      },
+      // 关闭弹框
+      closeModal() {
+        this.$emit('input', false)
+      },
+      
+      // 处理点击事件
+      handleRedpacketClick(index) {
+        this.redpacket[index].select = !this.redpacket[index].select
+      },
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  
+  .wx-modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 99998 !important;
+    
+    view {
+      box-sizing: border-box;
+    }
+    
+    .image {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+    
+    .wam {
+      z-index: 9999 !important;
+      /* mask */
+      &__mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        animation: showMask 0.25s linear 0s forwards;
+      }
+      
+      /* close-btn */
+      &__close-btn {
+        position: absolute;
+        top: 20rpx;
+        right: 10rpx;
+        z-index: 99999;
+        font-size: 40rpx;
+      }
+      
+      /* wrapper */
+      &__wrapper {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        background-color: #FFFFFF;
+        border-radius: 40rpx 40rpx 0rpx 0rpx;
+        padding-top: 40rpx;
+        // padding-bottom: 40rpx;
+        // padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
+        // padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
+        transform-origin: center bottom;
+        transform: scaleY(0);
+        animation: showWrapper 0.25s linear 0s forwards;
+        z-index: 99999;
+      }
+      
+    }
+  }
+  
+  @keyframes showMask {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes showWrapper {
+    0% {
+      transform: scaleY(0);
+      opacity: 0;
+    }
+    100% {
+      transform: scaleY(1);
+      opacity: 1;
+    }
+  }
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 20rpx;
+  	height: calc(40rpx + env(safe-area-inset-bottom) / 2);
+    height: calc(40rpx + constant(safe-area-inset-bottom));
+  }
+  .tn-footerfixed {
+    width: 100%;
+    margin-bottom: calc(env(safe-area-inset-bottom)- 20rpx );
+    padding: 30rpx;
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+  
+  }
+  /* 底部悬浮按钮 end*/
+  
+  /* 标签内容 start*/
+  .tn-tag-content {
+    &__item {
+      display: inline-block;
+      line-height: 45rpx;
+      padding: 8rpx 24rpx;
+      margin: 24rpx 30rpx 5rpx 0rpx;
+      border-radius: 100rpx;
+      min-width: 140rpx;
+      text-align: center;
+      
+      &--prefix {
+        padding-right: 10rpx;
+      }  
+    }
+  }
+  /* 标签内容 end*/
+  
+  .bg-select-no{
+    background-color: #F5F5F5;
+    border: 1rpx solid #F5F5F5;
+  }
+  
+  .bg-select{
+    background-color: rgba($brand-primary, 0.125);
+    border: 1rpx solid $brand-primary;
+    color: $brand-primary;
+  }
+  
+</style>
\ No newline at end of file
diff --git a/components/filter/type.vue b/components/filter/type.vue
new file mode 100644
index 0000000..1d50410
--- /dev/null
+++ b/components/filter/type.vue
@@ -0,0 +1,304 @@
+<template>
+  <view
+    v-if="openModal"
+    class="wx-modal"
+  >
+    <view
+      class="wam__mask"
+      @touchmove.prevent=""
+      @tap.stop="closeModal"
+    ></view>
+    
+    <!-- 内容区域 -->
+    <view class="wam__wrapper">
+      <!-- 关闭按钮 -->
+      <view class="wam__close-btn" @tap.stop="closeModal">
+        <tn-button size="lg" shape="icon" backgroundColor="#00000000" fontColor="#AAAAAA">
+          <text class="tn-icon-close"></text>
+        </tn-button>
+        <!-- <text class="ri-close-circle-fill tn-color-white"></text> -->
+      </view>
+      <view class="tn-margin-left tn-flex tn-flex-col-center">
+        <view class="tn-text-bold tn-text-lg">应用类型</view>
+      </view>
+      
+      <view class="tn-margin-top-sm" style="border-top: 1rpx solid #F8F7F8;">
+        
+        <scroll-view scroll-y="true" style="max-height: 55vh;">
+          <!-- 内容 start-->
+          <view class="tn-flex tn-flex-wrap tn-padding-top-sm" style="margin: 0 20rpx;">
+            <block v-for="(item, index) in content" :key="index">
+              <view class="" style="width: 50%;" @click="tn('/pageA/video/video')">
+                <view class="real-content">
+                  <view class="image-pic2" :style="'background-image:url(' + item.mainImage + ')'">
+                    <view class="image-real">
+                      <view class="tn-flex tn-flex-col-center tn-text-center" style="height: 38rpx;position: absolute;top: 10rpx;left:10rpx;background-color: #00000080;border-radius: 10rpx;">
+                        <view class="tn-margin-xs tn-color-white">热门</view>
+                      </view>
+                      <view class="tn-text-df" style="width: 100%;height: 40rpx;background: linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0));position: absolute;bottom: 0;">
+                        <view class="tn-padding-left-xs tn-padding-right-xs tn-color-white clamp-text-1">
+                          <text class="tn-icon-my"></text>
+                          <text class="tn-padding-left-xs">{{ item.play }} 人选择</text>
+                        </view>
+                      </view>
+                    </view>
+                  </view>
+          
+                  <view class="tn-text-justify tn-padding-top-sm">
+                    <text class="clamp-text-1">{{ item.title }}</text>
+                  </view>
+                </view>
+              </view>
+            </block>
+          </view>
+          <!-- 内容 end-->
+        
+        </scroll-view>
+        
+        <!-- 悬浮按钮-->
+        <view class="tn-flex tn-footerfixed" style="border-top: 1rpx solid #F8F7F8;">
+          <view class="tn-flex-1 justify-content-item tn-text-center">
+            <tn-button backgroundColor="$brand-primary " padding="40rpx 0" width="100%" :fontSize="28" fontColor="#FFFFFF" shape="round" @click="tn('')">
+              <text class="">确定选择</text>
+            </tn-button>
+          </view>
+        </view>
+        
+        <view class="tn-tabbar-height"></view>
+        
+        
+      </view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    options: {
+      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+      virtualHost: true
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        openModal: false,
+        content: [{
+            play: '12K',
+            number: '16',
+            title: '经营策略',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1685709204898-assets/web-upload/30641b38-b047-4df8-abc3-034dd7b44b0f.jpeg',
+          },
+          {
+            play: '1.08W',
+            number: '17',
+            title: '动作射击',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1685709204901-assets/web-upload/f665e2cd-9e54-42b2-b347-c4fac4ff7c49.jpeg',
+          },
+          {
+            play: '2.06K',
+            number: '12',
+            title: '角色扮演',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1685709204932-assets/web-upload/8323e8a1-b33e-47ac-96e1-82bc2e84e180.jpeg',
+          },
+          {
+            play: '1.02W',
+            number: '22',
+            title: '休闲益智',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1685709204911-assets/web-upload/f97f8bf5-ec93-4a35-b28e-d37387af66a0.jpeg',
+          },
+          {
+            play: '2.92W',
+            number: '12',
+            title: '体育竞速',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '2.03W',
+            number: '5',
+            title: '棋牌桌游',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            play: '1.69W',
+            number: '8',
+            title: '其他',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          }
+        ],
+ 
+      }
+    },
+    watch: {
+      value: {
+        handler(val) {
+          this.openModal = val
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+        uni.navigateTo({
+          url: e,
+        });
+      },
+      // 关闭弹框
+      closeModal() {
+        this.$emit('input', false)
+      },
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  
+  .wx-modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 99998 !important;
+    
+    view {
+      box-sizing: border-box;
+    }
+    
+    .image {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+    
+    .wam {
+      z-index: 9999 !important;
+      /* mask */
+      &__mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        animation: showMask 0.25s linear 0s forwards;
+      }
+      
+      /* close-btn */
+      &__close-btn {
+        position: absolute;
+        top: 20rpx;
+        right: 10rpx;
+        z-index: 99999;
+        font-size: 40rpx;
+      }
+      
+      /* wrapper */
+      &__wrapper {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        background-color: #FFFFFF;
+        border-radius: 40rpx 40rpx 0rpx 0rpx;
+        padding-top: 40rpx;
+        // padding-bottom: 40rpx;
+        // padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
+        // padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
+        transform-origin: center bottom;
+        transform: scaleY(0);
+        animation: showWrapper 0.25s linear 0s forwards;
+        z-index: 99999;
+      }
+      
+    }
+  }
+  
+  @keyframes showMask {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes showWrapper {
+    0% {
+      transform: scaleY(0);
+      opacity: 0;
+    }
+    100% {
+      transform: scaleY(1);
+      opacity: 1;
+    }
+  }
+  
+  /* 底部悬浮按钮 start*/
+  .tn-tabbar-height {
+  	min-height: 20rpx;
+  	height: calc(40rpx + env(safe-area-inset-bottom) / 2);
+    height: calc(40rpx + constant(safe-area-inset-bottom));
+  }
+  .tn-footerfixed {
+    width: 100%;
+    margin-bottom: calc(env(safe-area-inset-bottom)- 20rpx );
+    padding: 30rpx;
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+  
+  }
+  /* 底部悬浮按钮 end*/
+  
+  /* 内容 start*/
+  .real-content {
+    // box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
+    border-radius: 15rpx;
+    // background-color: rgba(255, 255, 255, 1);
+    margin: 10rpx 10rpx 30rpx 10rpx;
+  }
+  
+  .image-real {
+    height: 200rpx;
+    font-size: 16rpx;
+    font-weight: 300;
+    position: relative;
+    border-radius: 15rpx;
+    overflow: hidden;
+  }
+  
+  .image-pic2 {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: center;
+    border-radius: 15rpx;
+  }
+  
+</style>
\ No newline at end of file
diff --git a/components/user/user.vue b/components/user/user.vue
new file mode 100644
index 0000000..f822589
--- /dev/null
+++ b/components/user/user.vue
@@ -0,0 +1,351 @@
+<template>
+  <view
+    v-if="openModal"
+    class="wx-modal"
+  >
+    <view
+      class="wam__mask"
+      @touchmove.prevent="closeModal"
+      @tap.stop="closeModal"
+    ></view>
+    
+    <!-- 内容区域 -->
+    <view class="wam__wrapper dd-glass">
+      <!-- 关闭按钮 -->
+      <!-- <view class="wam__close-btn" @tap.stop="closeModal">
+        <text class="tn-icon-close"></text>
+      </view> -->
+      
+      <view class="tn-flex tn-flex-col-top" :style="{paddingTop: vuex_custom_bar_height - 40 +'px'}">
+            
+        <view class="tn-padding-bottom">
+          <view class="logo-pic">
+            <view class="logo-image" style="background-image:url('https://resource.tuniaokj.com/images/flower/guye1.jpg');width: 90rpx;height: 90rpx;background-size: cover;overflow: hidden;">
+            </view>
+          </view>
+          <!-- <view class="tn-icon-fire tn-color-red" style="position: absolute;margin: -105rpx 0 0 72rpx;border-radius: 100rpx;padding: 5rpx;"></view> -->
+        </view>
+        <view class="tn-padding-left-sm" style="width: 100%;">
+          <view class="tn-padding-top-xs">
+            <text class="tn-text-bold tn-text-lg">抓住那只猪</text>
+          </view>
+          <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-padding-top-xs">
+            <view class="justify-content-item">
+              <text class="tn-text-sm">眼里有光，世界将为你亮起！</text>
+            </view>
+            <view class="justify-content-item tn-round tn-text-xs tn-color-gray--light">
+              <!-- <text class="tn-padding-right-xs"></text> 预留 -->
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <scroll-view scroll-y="true" style="max-height: 70vh;margin: 20rpx 0;">
+        <view class="tn-margin-top-sm" style="border-radius: 24rpx;color: #1D1F24;">
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center" v-for="(item,index) in app" :key="index" @click="tn('')" style="padding: 30rpx 10rpx;">
+            <view class="justify-content-item tn-flex tn-flex-col-center">
+              <view class="app-pic">
+                <view class="app-image" :style="'background-image:url(' + item.mainImage + ');background-size: cover;'">
+                </view>
+              </view>
+              <view class="tn-padding-left-xs clamp-text-1">{{ item.title }}</view>
+            </view>
+            <view class="justify-content-item">
+              <text class="tn-icon-right"></text>
+            </view>
+          </view>
+        </view>
+        
+        <view class="tn-padding-bottom">
+          
+        </view>
+        
+      </scroll-view>
+      
+      <!-- 悬浮按钮-->
+      <!-- <view class="tn-flex tn-footerfixed">
+        <view class="tn-flex-1 justify-content-item tn-text-center">
+          <tn-button backgroundColor="$brand-primary" padding="40rpx 0" width="100%" :fontSize="28" fontColor="#FFFFFF" shape="round" @click="tn('')">
+            <text class="">添加应用</text>
+          </tn-button>
+        </view>
+      </view> -->
+      
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    options: {
+      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+      virtualHost: true
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        openModal: false,
+        
+        app: [
+          {
+            title: '蛋仔派对',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716013944651-assets/web-upload/32eafb0d-1e25-452b-9ad9-d14c18ec90f6.jpeg',
+          },
+          {
+            title: '保卫萝卜',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            title: '旅行青蛙',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716014232876-assets/web-upload/5e1d7c68-048e-4b54-afda-68164a5bebd0.jpeg',
+          },
+          {
+            title: '辐射避难所',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716025506668-assets/web-upload/b6d123a2-4f1d-46c9-9474-f62a87d05a74.jpeg',
+          },
+          {
+            title: '王国保卫战',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716025891640-assets/web-upload/8b4440ce-710b-4d3c-afff-5d49e6c7a16a.jpeg',
+          },
+          {
+            title: '崩坏 · 星穹铁道',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716040399286-assets/web-upload/7a715327-f597-4a8e-ac3c-2ba7ab45b6b9.jpeg',
+          },
+          {
+            title: '纪念碑谷',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716014593433-assets/web-upload/6e1ba4f3-4757-4693-b827-b8803072c5c9.jpeg',
+          },
+          {
+            title: '蛋仔派对',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716013944651-assets/web-upload/32eafb0d-1e25-452b-9ad9-d14c18ec90f6.jpeg',
+          },
+          {
+            title: '保卫萝卜',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            title: '旅行青蛙',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716014232876-assets/web-upload/5e1d7c68-048e-4b54-afda-68164a5bebd0.jpeg',
+          },
+          {
+            title: '辐射避难所',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716025506668-assets/web-upload/b6d123a2-4f1d-46c9-9474-f62a87d05a74.jpeg',
+          },
+          {
+            title: '王国保卫战',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716025891640-assets/web-upload/8b4440ce-710b-4d3c-afff-5d49e6c7a16a.jpeg',
+          },
+          {
+            title: '崩坏 · 星穹铁道',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716040399286-assets/web-upload/7a715327-f597-4a8e-ac3c-2ba7ab45b6b9.jpeg',
+          },
+          {
+            title: '纪念碑谷',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716014593433-assets/web-upload/6e1ba4f3-4757-4693-b827-b8803072c5c9.jpeg',
+          },
+        ],
+        
+      }
+    },
+    watch: {
+      value: {
+        handler(val) {
+          this.openModal = val
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      // 跳转
+      tn(e) {
+        if (typeof uni !== 'undefined' && uni.vibrateShort) {
+          uni.vibrateShort({ fail: () => {} });
+        }
+        uni.navigateTo({
+          url: e,
+        });
+      },
+      
+      // 关闭弹框
+      closeModal() {
+        this.$emit('input', false)
+      },
+      
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* 用户头像 start */
+  .logo-image {
+    width: 90rpx;
+    height: 90rpx;
+    position: relative;
+    overflow: hidden;
+    border-radius: 100rpx;
+  }
+  
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border: 6rpx solid rgba(255,255,255,0.6);
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.1);
+    border-radius: 100rpx;
+    overflow: hidden;
+    // background-color: #FFFFFF;
+  }
+  
+  /* 应用头像 start */
+  .app-image {
+    width: 40rpx;
+    height: 40rpx;
+    position: relative;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+  
+  .app-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: top;
+    border: 1rpx solid rgba(255,255,255,0.6);
+    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    overflow: hidden;
+    // background-color: #FFFFFF;
+  }
+  
+  .wx-modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 99998 !important;
+    
+    view {
+      box-sizing: border-box;
+    }
+    
+    .image {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+    
+    .wam {
+      /* mask */
+      &__mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.2);
+        opacity: 0;
+        animation: showMask 0.25s ease 0s forwards;
+      }
+      
+      /* close-btn */
+      &__close-btn {
+        position: absolute;
+        top: 30rpx;
+        right: 30rpx;
+        z-index: 99999;
+        font-size: 40rpx;
+      }
+      
+      /* wrapper */
+      &__wrapper {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 64%;
+        height: 100%;
+        border-radius: 0rpx;
+        padding: 20rpx;
+        padding-top: 60rpx;
+        padding-bottom: 40rpx;
+        padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
+        padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
+        transform-origin: center bottom;
+        transform: scaleY(0);
+        animation: showWrapper 0.4s ease 0.05s forwards;
+        z-index: 99999;
+      }
+      
+    }
+  }
+  
+  .tn-btn-hover-class {
+    box-shadow: inset 10rpx 2rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
+  }
+  
+  @keyframes showMask {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes showWrapper {
+    0% {
+      transform: translateX(-80vw);
+    }
+    100% {
+      transform: translateX(0vw);
+    }
+  }
+  
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  /* 毛玻璃*/
+  .dd-glass {
+    width: 100%;
+    backdrop-filter: blur(8rpx);
+    -webkit-backdrop-filter: blur(8rpx);
+    // background-color: rgba(255,255,255,0.4);
+    background: linear-gradient(90deg, #56FFFF80, #FFFFFF80);
+    border-right: 2rpx solid #e1e1e1e0;
+  }
+  
+  /* 底部悬浮按钮 start*/
+  .tn-footerfixed {
+    width: 100%;
+    margin-top: 30rpx;
+    margin-bottom: calc(60rpx + env(safe-area-inset-bottom) / 2);
+    margin-bottom: calc(60rpx + constant(safe-area-inset-bottom));
+    z-index: 1024;
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
+  
+  }
+  /* 底部悬浮按钮 end*/
+</style>
\ No newline at end of file
diff --git a/config.js b/config.js
new file mode 100644
index 0000000..d788dc3
--- /dev/null
+++ b/config.js
@@ -0,0 +1,9 @@
+export const config = {
+  // 根据不同环境维护接口基准地址
+  // baseURL: 'http://192.168.199.115:5003/api',
+	// baseURL: 'http://192.168.199.124:5111/admin/api',
+	// baseURL: 'https://api.xhct.yaens.com/admin/api',
+  baseURL: 'https://apartment.lvjuwuye.cn/admin/api',
+  filePrefix: 'https://apartment.lvjuwuye.cn/p'
+  // filePrefix: 'https://api.xhct.yaens.com/p'
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b61f63e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/libs/components/demo-title.vue b/libs/components/demo-title.vue
new file mode 100644
index 0000000..1386ff8
--- /dev/null
+++ b/libs/components/demo-title.vue
@@ -0,0 +1,94 @@
+<template>
+  <view class="demo-title">
+    <view>
+      <view v-if="type === 'first'" class="main_title">
+        <view v-if="leftIcon" class="main_title__icon main_title__icon--left" :class="[`tn-icon-${leftIcon}`]"></view>
+        <view class="main_title__content">{{ title }}</view>
+        <view v-if="rightIcon" class="main_title__icon main_title__icon--right" :class="[`tn-icon-${rightIcon}`]"></view>
+      </view>
+      <view v-if="type === 'second'" class="second_title">
+        <view class="second_title__content">{{ title }}</view>
+      </view>
+    </view>
+    <view class="content" :class="[{
+      'content--padding': contentPadding
+    }]">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'demo-title',
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    props: {
+      // 标题类型
+      type: {
+        type: String,
+        default: 'first'
+      },
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 左图标
+      leftIcon: {
+        type: String,
+        default: 'star'
+      },
+      // 右图标
+      rightIcon: {
+        type: String,
+        default: 'star'
+      },
+      // 内容容器是否有两边边距
+      contentPadding: {
+        type: Boolean,
+        default: true
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .main_title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 50rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+    
+    &__content {
+      padding: 0 18rpx;
+    }
+    
+    &__icon {
+      font-size: 34rpx;
+    }
+  }
+  
+  .second_title {
+    margin: 24rpx 0;
+    margin-left: 30rpx;
+    
+    &__content {
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+  }
+  
+  .content {
+    margin-top: 30rpx;
+    
+    &--padding {
+      margin-left: 30rpx;
+      margin-right: 30rpx;
+    }
+  }
+</style>
diff --git a/libs/components/dynamic-demo-template.vue b/libs/components/dynamic-demo-template.vue
new file mode 100644
index 0000000..37332b2
--- /dev/null
+++ b/libs/components/dynamic-demo-template.vue
@@ -0,0 +1,689 @@
+<template>
+  <view class="dynamic-demo">
+
+    <!-- 效果预览窗口 -->
+    <view v-if="!noDemo" class="demo-container" :class="{'demo-container--full': full}">
+      <view class="demo">
+        <slot></slot>
+      </view>
+      <!-- 提示信息 -->
+      <view v-if="haveTips">
+        <view class="demo__tips__icon" @click="demoTipsClick">
+          <view class="icon tn-icon-help-question"></view>
+        </view>
+        <view class="demo__tips__content"
+          :class="[showContentTips ? 'demo__tips__content--show' : 'demo__tips__content--hide']">
+          <view v-for="(item,index) in tipsData" :key="index" class="demo__tips__content--item">{{ item }}</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 模式切换 -->
+    <view v-if="multiMode" class="mode-switch">
+      <view class="mode-switch__container">
+        <view v-for="(item, index) in sectionModeListInfos" :key="index" class="mode-switch__item"
+          :class="[`mode-switch-item-${index}`,{'mode-switch__item--active': modeIndex === index}]"
+          @click="switchMode(index)">{{ item.name }}</view>
+
+        <!-- 滑块样式 -->
+        <view class="mode-switch__slider" :style="[modeSwitchSliderStyle]"></view>
+      </view>
+    </view>
+
+    <!-- 组件对应可选项容器 -->
+    <view class="section-container">
+      <scroll-view
+        class="section__scroll-view"
+        :class="{'section__scroll-view--auto': sectionScrollViewStyle.height === 'auto'}"
+        :style="[sectionScrollViewStyle]"
+        :scroll-y="sectionScrollViewStyle.height !== 'auto'"
+      >
+        <block v-for="(item,index) in btnsList" :key="index">
+          <view class="section__content" :class="{'section__content--visible': item.show}">
+            <view class="section__content__title">
+              <view class="section__content__title__left-line" :class="[`tn-main-gradient-${tuniaoColorList[index]}`]"></view>
+              <view class="section__content__title--text tn-text-ellipsis" :class="[`tn-main-gradient-${tuniaoColorList[index]}`]">{{ item.title }}</view>
+              <view class="section__content__title__right-line" :class="[`tn-main-gradient-${tuniaoColorList[index]}`]"></view>
+            </view>
+            <view class="section__content__btns">
+              <view v-for="(section_btn,section_index) in item.optional" :key="section_index"
+                class="section__content__btns__item" :class="[`tn-main-gradient-${tuniaoColorList[index]}--light`]" @click="sectionBtnClick(index, section_index)">
+                <view class="section__content__btns__item__bg"
+                  :class="[`tn-main-gradient-${tuniaoColorList[index]}`, {'section__content__btns__item__bg--active':sectionIndex[modeIndex][index]['value'] === section_index}]"></view>
+                <view class="section__content__btns__item--text tn-text-ellipsis"
+                  :class="[sectionIndex[modeIndex][index]['value'] === section_index ? 'section__content__btns__item--text--active' : `tn-color-${tuniaoColorList[index]}`]">{{ section_btn }}</view>
+              </view>
+            </view>
+          </view>
+        </block>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'dynamic-demo-template',
+    props: {
+      // 可选项列表数据
+      sectionList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 提示信息
+      tips: {
+        type: [String, Array],
+        default: ''
+      },
+      // 演示框的内容是否为铺满
+      full: {
+        type: Boolean,
+        default: false
+      },
+      // 是否使用了自定义顶部导航栏
+      customBar: {
+        type: Boolean,
+        default: true
+      },
+      // 是否全屏滚动
+      fullWindowsScroll: {
+        type: Boolean,
+        default: false
+      },
+      // 没有演示内容
+      noDemo: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      tipsData() {
+        if (typeof this.tips === 'string') {
+          return [this.tips]
+        }
+        return this.tips
+      },
+      haveTips() {
+        return this.tips && this.tips.length > 0
+      },
+      multiMode() {
+        return this.sectionList.length > 1
+      },
+      sectionModeList() {
+        return this.sectionList.map((item) => {
+          return item.name
+        })
+      }
+    },
+    data() {
+      return {
+        // 图鸟颜色列表
+        tuniaoColorList: this.$t.color.getTuniaoColorList(),
+        // 保存选项列表信息（由于prop中的数据时不能被修改的）
+        _sectionList: [],
+        // 模式列表信息
+        sectionModeListInfos: [],
+        // 所选模式的序号
+        modeIndex: 0,
+        // 模式选择滑块样式
+        modeSwitchSliderStyle: {
+          width: 0,
+          left: 0
+        },
+        // 显示组件相关提示信息
+        showContentTips: false,
+        // 可选项滚动容器样式
+        sectionScrollViewStyle: {
+          height: 0
+        },
+        // 按钮列表信息
+        btnsList: [],
+        // 标记当前所选按钮
+        sectionIndex: [],
+        // 标记选项按钮是否可以滑动（使用scroll-view进行包裹）
+        sectionScrollFlag: true
+      }
+    },
+    watch: {
+      sectionList: {
+        handler(value) {
+          // 如果sectionList发生改变，重新初始化选项列表信息
+          this.initSectionBtns()
+        },
+        deep: true
+      },
+      sectionScrollFlag(value) {
+        if (!value) {
+          this.sectionScrollViewStyle.height = 'auto'
+        }
+      },
+      fullWindowsScroll: {
+        handler(value) {
+          if (value) {
+            this.sectionScrollViewStyle.height = 'auto'
+          }
+        },
+        immediate: true
+      }
+    },
+    created() {
+      // 初始化可选项模式列表
+      this.sectionModeListInfos = this.sectionModeList.map((item) => {
+        return {
+          name: item
+        }
+      })
+      // 初始化选项按钮默认信息
+      this.initSectionBtns()
+    },
+    mounted() {
+      // 等待加载组件完成
+      // setTimeout(() => {
+      //   // 计算出底部scroll-view的高度
+      //   this.initSectionScrollView()
+
+      //   if (this.multiMode) {
+      //     // 获取模式切换标签的信息
+      //     this.getModeTabsInfo()
+      //   }
+      // }, 10)
+      this.$nextTick(() => {
+        // 计算出底部scroll-view的高度
+        this.initSectionScrollView()
+        
+        if (this.multiMode) {
+          // 获取模式切换标签的信息
+          this.getModeTabsInfo()
+        }
+      })
+    },
+    methods: {
+      // 初始化选项滑动窗口的高度
+      initSectionScrollView() {
+        // 全屏滚动时不进行任何的操作
+        if (this.fullWindowsScroll) {
+          return
+        }
+        // 获取屏幕的高度
+        uni.getSystemInfo({
+          success: (systemInfo) => {
+            // 通过当前屏幕的安全高度减去上一个元素的底部和距离上一个元素的外边距，然后减获取到的值减去标题栏的高度即可
+            const navBarHeight = this.customBar ? 0 : this.vuex_custom_bar_height
+            if (this.multiMode) {
+              uni.createSelectorQuery().in(this).select('.mode-switch').boundingClientRect(data => {
+                if (data.bottom >= systemInfo.safeArea.height) {
+                  this.sectionScrollFlag = false
+                } else {
+                  this.sectionScrollFlag = true
+                  const containerBaseHeight = systemInfo.safeArea.height - data.bottom
+                  this.sectionScrollViewStyle.height = (containerBaseHeight - navBarHeight) + systemInfo.statusBarHeight - uni.upx2px(75) + 'px'
+                }
+              }).exec()
+            } else {
+              if (!this.noDemo) {
+                uni.createSelectorQuery().in(this).select('.demo-container').boundingClientRect(data => {
+                  if (data.bottom >= systemInfo.safeArea.height) {
+                    this.sectionScrollFlag = false
+                  } else {
+                    this.sectionScrollFlag = true
+                    const containerBaseHeight = systemInfo.safeArea.height - data.bottom
+                    this.sectionScrollViewStyle.height = (containerBaseHeight - navBarHeight) + systemInfo.statusBarHeight - uni.upx2px(75) + 'px'
+                  }
+                }).exec()
+              } else {
+                this.sectionScrollFlag = false
+              }
+            }
+            
+          }
+        })
+      },
+      // 更新选项滑动容器的高度
+      updateSectionScrollView() {
+        this.$nextTick(() => {
+          this.initSectionScrollView()
+        })
+      },
+      // 获取各个模式tab的节点信息
+      getModeTabsInfo() {
+        let view = uni.createSelectorQuery().in(this)
+        for (let i = 0; i < this.sectionModeListInfos.length; i++) {
+          view.select('.mode-switch-item-' + i).boundingClientRect()
+        }
+        view.exec(res => {
+          // 如果没有获取到，则重新获取
+          if (!res.length) {
+            setTimeout(() => {
+              this.getModeTabsInfo()
+            }, 10)
+            return
+          }
+          // 将每个模式的宽度放入list中
+          res.map((item, index) => {
+            this.sectionModeListInfos[index].width = item.width
+          })
+          // 初始化滑块的宽度
+          this.modeSwitchSliderStyle.width = this.sectionModeListInfos[0].width + 'px'
+
+          // 初始化滑块的位置
+          this.modeSliderPosition()
+        })
+      },
+      // 设置模式滑块的位置
+      modeSliderPosition() {
+        let left = 0
+        // 计算当前所选模式选项到组件左边的距离
+        this.sectionModeListInfos.map((item, index) => {
+          if (index < this.modeIndex) left += item.width
+        })
+
+        this.modeSwitchSliderStyle.left = left + 'px'
+      },
+      // 切换模式
+      switchMode(index) {
+        // 不允许点击当前激活的选项
+        if (index === this.modeIndex) return
+        this.modeIndex = index
+        this.modeSliderPosition()
+        this.updateSectionBtns()
+        this.$emit('modeClick', {
+          index: index
+        })
+      },
+      // 点击内容提示信息
+      demoTipsClick() {
+        this.showContentTips = !this.showContentTips
+      },
+      // 初始化被选中选项按钮
+      initSectionBtns() {
+        this.sectionIndex = []
+        this.sectionIndex = this.sectionList.map((item) => {
+          if (item.hasOwnProperty('section') && item.section.length > 0) {
+            return Array(item.section.length).fill({
+              value: 0,
+              change: false
+            })
+          } else {
+            return []
+          }
+        })
+        
+        this._sectionList = this.$t.deepClone(this.sectionList)
+        // 给本地选项按钮列表给默认show属性
+        this._sectionList.map((item) => {
+          const section = item.section.map((section_item) => {
+            if (!section_item.hasOwnProperty('show')) {
+              section_item.show = true
+            }
+            return section_item
+          })
+          item.section = section
+          return item
+        })
+        
+        // 更新按钮信息
+        this.updateSectionBtns()
+      },
+      // 跟新选项按钮信息
+      updateSectionBtns(sectionIndex = -1, showState = true) {
+        let sectionOptional = this._sectionList[this.modeIndex]['section']
+        this.btnsList = sectionOptional.map((item, index) => {
+          // 判断是否已经修改了对应的值
+          let changeValue = this.sectionIndex[this.modeIndex][index]['change'] || false
+          let currentSectionIndexValue = this.sectionIndex[this.modeIndex][index]['value'] || 0
+          // 取出默认值(如果是已经修改过的选项，则使用之前的选项信息)
+          let indexValue = changeValue ? currentSectionIndexValue : item.hasOwnProperty('current') ? item.current : 0
+          // 取出是否显示当前选项
+          let show = (sectionIndex !== -1 && sectionIndex === index) ? showState : item.hasOwnProperty('show') ? item.show : true
+          // 处理最大最小值
+          if (indexValue < 0) {
+            indexValue = 0
+          }
+          if (indexValue >= item.optional.length) {
+            indexValue = item.optional.length
+          }
+          // this.sectionIndex[this.modeIndex][index]['value'] = indexValue
+          this.$set(this.sectionIndex[this.modeIndex], index, {value: indexValue, change: changeValue})
+          item.show = show
+          return item
+        })
+      },
+      // 更新选项按钮状态信息
+      updateSectionBtnsState(sectionIndex = -1, showState = true) {
+        // 判断sectionIndex是否为数组
+        if (this.$t.array.isArray(sectionIndex)) {
+          if (sectionIndex.length === 0) {
+            return
+          }
+          sectionIndex = sectionIndex.filter((item) => item >= 0 && item < this.sectionList[this.modeIndex]['section'].length)
+          sectionIndex.map((item) => {
+            this.btnsList[item]['show'] = showState
+            this._sectionList[this.modeIndex]['section'][item]['show'] = showState
+          })
+        } else {
+          if (sectionIndex < 0 || sectionIndex >= this.sectionList[this.modeIndex]['section'].length) {
+            return
+          }
+          // 将按键的对应显示状态设置为对应的状态
+          this.btnsList[sectionIndex]['show'] = showState
+          this._sectionList[this.modeIndex]['section'][sectionIndex]['show'] = showState
+        }
+        
+      },
+      // 更新选项按钮选中信息
+      updateSectionBtnsValue(modeIndex = 0, sectionIndex = -1, value = 0) {
+        if (sectionIndex < 0 || sectionIndex >= this.sectionList[modeIndex]['section'].length) {
+          return
+        }
+        // 如果showState为false则移除对应的选项按钮，否则往对应的位置添加上对应的选项按钮
+        this.sectionIndex[modeIndex][sectionIndex] = {
+          value,
+          change: true
+        }
+      },
+      // 选项按钮点击事件
+      sectionBtnClick(index, sectionIndex) {
+        // if (this.sectionIndex[this.modeIndex][index] === sectionIndex) {
+        //   return
+        // }
+        this.$set(this.sectionIndex[this.modeIndex], index, {value: sectionIndex, change: true})
+        this.$emit('click', {
+          methods: this.btnsList[index]['methods'],
+          index: sectionIndex,
+          name: this.btnsList[index]['optional'][sectionIndex]
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dynamic-demo {
+    padding-top: 78rpx;
+
+    /* 顶部模式切换start */
+    .mode-switch {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 75rpx;
+      padding: 0 30rpx;
+
+      &__container {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 476rpx;
+        height: 62rpx;
+        background-color: #FFFFFF;
+        box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+        border-radius: 31rpx;
+      }
+
+      &__item {
+        flex: 1;
+        height: 62rpx;
+        width: 100%;
+        line-height: 62rpx;
+        text-align: center;
+        font-size: 28rpx;
+        color: $tn-font-sub-color;
+        z-index: 2;
+        transition: all 0.3s;
+
+        &--active {
+          color: #FFFFFF;
+          font-weight: bold;
+        }
+      }
+
+      &__slider {
+        position: absolute;
+        height: 62rpx;
+        border-radius: 31rpx;
+        // background-image: linear-gradient(-86deg, #FF8359 0%, #FFDF40 100%);
+        background-image: linear-gradient(-86deg, #00C3FF 0%, #58FFF5 100%);
+        box-shadow: 1rpx 10rpx 24rpx 0rpx #00C3FF77;
+        z-index: 1;
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+    }
+
+    /* 顶部模式切换end */
+
+    /* 演示内容展示start */
+    .demo-container {
+      min-height: 327rpx;
+      width: calc(100% - 60rpx);
+      background-color: #FFFFFF;
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      margin: 0 30rpx 5rpx 30rpx;
+      border-radius: 20rpx;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &--full {
+        display: inline-block;
+        padding-bottom: 20rpx;
+        min-height: 0rpx;
+        padding: 10rpx 20rpx 30rpx;
+      }
+
+      .demo {
+        padding-top: 70rpx;
+
+        &__tips {
+          &__icon {
+            position: absolute;
+            top: 20rpx;
+            right: 16rpx;
+            width: 39rpx;
+            height: 39rpx;
+            line-height: 39rpx;
+            font-size: 39rpx;
+
+            .icon {
+              background: linear-gradient(-45deg, #FF8359 0%, #FFDF40 100%);
+              -webkit-background-clip: text;
+              color: transparent;
+              text-shadow: 0rpx 10rpx 10rpx rgba(255, 156, 82, 0.2);
+            }
+          }
+
+          &__content {
+            position: absolute;
+            top: 65rpx;
+            right: 16rpx;
+            font-size: 20rpx;
+            margin-left: 20rpx;
+            word-wrap: normal;
+            display: flex;
+            flex-direction: column;
+            background-color: #E6E6E6;
+            padding: 20rpx;
+            border-radius: 10rpx;
+            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1);
+            transform-origin: 0 0;
+            z-index: 999999;
+
+            &--hide {
+              transform: scaleY(0);
+            }
+
+            &--show {
+              transform: scaleY(100%);
+
+              &::after {
+                content: "";
+                width: 0px;
+                height: 0px;
+                border-width: 4px;
+                border-style: solid;
+                border-color: transparent transparent rgba(149, 149, 149, 0.1) transparent;
+                position: absolute;
+                top: -8px;
+                right: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /* 演示内容展示end */
+
+    /* 可选项start */
+    .section-container {
+      width: 100%;
+      height: auto;
+      margin-top: 70rpx;
+
+      .section {
+        &__content {
+          margin-top: 70rpx;
+          display: none;
+          
+          &--visible {
+            display: block;
+            
+            &:last-child {
+              padding-bottom: calc(70rpx + env(safe-area-inset-bottom));
+            }
+          }
+
+          &:nth-child(1) {
+            margin-top: 0rpx;
+          }
+
+          &__title {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 30rpx;
+            text-align: center;
+
+            &__left-line,
+            &__right-line {
+
+              width: 100rpx;
+              height: 2rpx;
+              position: relative;
+            }
+
+            &__left-line {
+              &::after {
+                content: '';
+                background: inherit;
+                width: 12rpx;
+                height: 12rpx;
+                position: absolute;
+                top: -12rpx;
+                right: 0rpx;
+                border-radius: 50%;
+                transform: translateY(50%);
+              }
+            }
+
+            &__right-line {
+              &::after {
+                content: '';
+                background: inherit;
+                width: 12rpx;
+                height: 12rpx;
+                position: absolute;
+                top: -12rpx;
+                left: 0rpx;
+                border-radius: 50%;
+                transform: translateY(50%);
+              }
+            }
+
+            &--text {
+              -webkit-background-clip: text;
+              color: transparent;
+              min-width: 124rpx;
+              height: 30rpx;
+              font-size: 32rpx;
+              line-height: 1;
+              margin: 0 35rpx;
+            }
+          }
+
+          &__btns {
+            width: calc(100% - 60rpx);
+            margin: 0 30rpx;
+            margin-top: 29rpx;
+            padding: 50rpx 30rpx 0rpx 0rpx;
+            background-color: #FFFFFF;
+            box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+            border-radius: 20rpx;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+
+            &__item {
+              max-width: 30%;
+              padding: 17rpx 36rpx;
+              border-radius: 10rpx;
+              margin-bottom: 40rpx;
+              margin-left: 40rpx;
+              position: relative;
+              z-index: 1;
+
+              // &::before {
+              //   content: " ";
+              //   position: absolute;
+              //   top: 10rpx;
+              //   left: 1rpx;
+              //   width: 100%;
+              //   height: 100%;
+              //   background: inherit;
+              //   filter: blur(24rpx);
+              //   opacity: 1;
+              //   z-index: -1;
+              // }
+
+              &__bg {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: inherit;
+                z-index: -1;
+                opacity: 0;
+                transform: scale(0);
+                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+                &--active {
+                  opacity: 1;
+                  transform: scale(1);
+                }
+              }
+
+              &--text {
+                font-size: 24rpx;
+                line-height: 1.2em;
+                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+                
+                &--active {
+                  color: #FFFFFF;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    /* 可选项end */
+  }
+</style>
diff --git a/libs/components/multiple-options-demo.vue b/libs/components/multiple-options-demo.vue
new file mode 100644
index 0000000..f3644b6
--- /dev/null
+++ b/libs/components/multiple-options-demo.vue
@@ -0,0 +1,147 @@
+<template>
+  <view class="multiple-options">
+    <view class="list">
+      <block v-for="(item, index) in listData" :key="index">
+        <view
+          class="list__item"
+          :class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]"
+          @tap="navOptionsPage(item.url)"
+        >
+          <view class="list__content">
+            <view class="list__content__title">{{ item.title }}</view>
+            <view class="list__content__desc">{{ item.desc }}</view>
+          </view>
+          <view class="list__icon">
+            <view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
+            <view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
+          </view>
+        </view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'multiple-options-demo',
+    props: {
+      // 显示的列表数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      }
+    },
+    data() {
+      return {
+        // 图鸟颜色列表
+        tuniaoColorList: [
+          'red',
+          'purplered',
+          'purple',
+          'bluepurple',
+          'aquablue',
+          'blue',
+          'indigo',
+          'cyan',
+          'teal',
+          'green',
+          'orange',
+          'orangered'
+        ],
+        listData: []
+      }
+    },
+    watch: {
+      list(val) {
+        this.initList()
+      }
+    },
+    created() {
+      this.initList()
+    },
+    methods: {
+      // 初始化列表数据
+      initList() {
+        // 给列表添加背景颜色数据
+        this.listData = this.list.map((item, index) => {
+          item.bgColorIndex = this.getBgNum()
+          item.mainIcon = item?.mainIcon || 'computer-fill'
+          item.subIcon = item?.subIcon || 'share'
+          return item
+        })
+      },
+      // 跳转到对应的选项页面
+      navOptionsPage(url) {
+        uni.navigateTo({
+          url: url
+        })
+      },
+      // 获取酷炫背景随机数
+      getBgNum() {
+        return Math.floor((Math.random() * this.tuniaoColorList.length))
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .list {
+    
+    &__item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      width: calc(100% - 60rpx);
+      margin: 108rpx 30rpx 0rpx 30rpx;
+      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
+      border-radius: 20rpx;
+    }
+    
+    &__content {
+      flex: 1;
+      // color: $tn-font-color;
+      margin: 34rpx 0rpx 27rpx 37rpx;
+      
+      &__title {
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-bottom: 12rpx;
+      }
+      &__desc {
+        font-size: 28rpx;
+      }
+    }
+    
+    &__icon {
+      flex: 1;
+      margin-right: 26rpx;
+      position: relative;
+      
+      &__main, &__sub {
+        -webkit-background-clip: text;
+        color: transparent;
+        position: absolute;
+        transition: transform 0.25s ease;
+      }
+      
+      &__main {
+        font-size: 200rpx;
+        width: 190rpx;
+        line-height: 200rpx;
+        top: 0;
+        right: 0rpx;
+        transform: translateY(-60%);
+      }
+      &__sub {
+        font-size: 70rpx;
+        top: 0;
+        right: 175rpx;
+        transform: translateY(-5rpx);
+      }
+    }
+  }
+</style>
diff --git a/libs/components/nav-index-button.vue b/libs/components/nav-index-button.vue
new file mode 100644
index 0000000..8301940
--- /dev/null
+++ b/libs/components/nav-index-button.vue
@@ -0,0 +1,169 @@
+<template>
+  <view class="nav-index-button" :style="{bottom: `${bottom}rpx`, right: `${right}rpx`}" @tap.stop="navIndex">
+    <view class="nav-index-button__content">
+        <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-5">
+          <view class="tn-icon-home-fill"></view>
+        </view>  
+    </view>
+  
+    <view class="nav-index-button__meteor">
+      <view class="nav-index-button__meteor__wrapper">
+        <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
+          <view class="nav-index-button__meteor__item--pic"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'nav-index-button',
+    props: {
+      // 距离底部的距离
+      bottom: {
+        type: [Number, String],
+        default: 300
+      },
+      // 距离右边的距离
+      right: {
+        type: [Number, String],
+        default: 75
+      },
+      // 首页地址
+      indexPath: {
+        type: String,
+        default: '/pages/index'
+      }
+    },
+    methods: {
+      // 跳转回首页
+      navIndex() {
+        // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
+        const pages = getCurrentPages()
+        if (pages && pages.length > 0) {
+          const indexPath = this.indexPath || '/pages/index'
+          const firstPage = pages[0]
+          if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length))) {
+            uni.reLaunch({
+              url: indexPath
+            })
+          } else {
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+        } else {
+          uni.reLaunch({
+            url: indexPath
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .nav-index-button {
+    position: fixed;
+    animation: suspension 3s ease-in-out infinite;
+    z-index: 999999;
+    
+    &__content {
+      position: absolute;
+      width: 100rpx;
+      height: 100rpx;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      
+      &--icon {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 60rpx;
+        border-radius: 50%;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        transform: scale(0.85);
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
+        }
+      }
+    }
+    
+    &__meteor {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100rpx;
+      height: 100rpx;
+      transform-style: preserve-3d;
+      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
+      
+      &__wrapper {
+        width: 100rpx;
+        height: 100rpx;
+        transform-style: preserve-3d;
+        animation: spin 20s linear infinite;
+      }
+      
+      &__item {
+        position: absolute;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 1000rpx;
+        left: 0;
+        top: 0;
+        
+        &--pic {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc3.png) no-repeat center center;
+          background-size: 100% 100%;
+          animation: arc 4s linear infinite;
+        }
+      }
+    }
+  }
+  
+  
+  @keyframes suspension {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-0.8rem);
+    }
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotateX(0deg);
+    }
+  
+    100% {
+      transform: rotateX(-360deg);
+    }
+  }
+  
+  @keyframes arc {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/libs/mixin/dynamic_demo_mixin.js b/libs/mixin/dynamic_demo_mixin.js
new file mode 100644
index 0000000..66ff992
--- /dev/null
+++ b/libs/mixin/dynamic_demo_mixin.js
@@ -0,0 +1,52 @@
+/**
+ * 动态参数演示mixin
+ */
+module.exports = {
+  data() {
+    return {
+      // 效果显示框top的值
+      contentContainerTop: '0px',
+      contentContainerIsTop: false,
+      
+      // 参数显示框top的值
+      sectionContainerTop: '0px'
+    }
+  },
+  onReady() {
+    this.updateSectionContainerTop()
+  },
+  methods: {
+    // 处理演示效果框的位置
+    async _handleContentConatinerPosition() {
+      // 获取效果演示框的节点信息
+      const contentContainer = await this._tGetRect('#content_container')
+      // 获取参数框的节点信息
+      this._tGetRect('#section_container').then((res) => {
+        // 判断参数框是否在移动，如果是则更新效果框的位置
+        // 如果效果框的顶部已经触控到顶部导航栏就停止跟随
+        if (res.top - contentContainer.bottom != 15) {
+          const newTop = res.top - (contentContainer.height + uni.upx2px(20))
+          const minTop = this.vuex_custom_bar_height + 1
+          if (newTop < minTop) {
+            this.contentContainerTop = minTop + 'px'
+            this.contentContainerIsTop = true
+          } else {
+            this.contentContainerTop = newTop + 'px'
+            this.contentContainerIsTop = false
+          }
+        }
+      })
+    },
+    // 更新状态切换栏位置信息
+    updateSectionContainerTop() {
+      this._tGetRect('#content_container').then((res) => {
+        this.contentContainerTop = (this.vuex_custom_bar_height + 148) + 'px'
+        this.sectionContainerTop = (res.height + 20) + 'px'
+      })
+    }
+  },
+  // 监听页面滚动
+  onPageScroll() {
+    this._handleContentConatinerPosition()
+  }
+}
diff --git a/libs/mixin/template_page_mixin.js b/libs/mixin/template_page_mixin.js
new file mode 100644
index 0000000..671db23
--- /dev/null
+++ b/libs/mixin/template_page_mixin.js
@@ -0,0 +1,60 @@
+/**
+ * 演示页面mixin
+ */
+module.exports = {
+  data() {
+    return {
+      
+    }
+  },
+  onLoad() {
+    // 更新顶部导航栏信息
+    this.updateCustomBarInfo()
+  },
+  methods: {
+    // 点击左上角返回按钮时触发事件
+    goBack() {
+      // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
+      const pages = getCurrentPages()
+      if (pages && pages.length > 0) {
+        const firstPage = pages[0]
+        if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
+          uni.reLaunch({
+            url: '/pages/index/index'
+          })
+        } else {
+          uni.navigateBack({
+            delta: 1
+          })
+        }
+      } else {
+        uni.reLaunch({
+          url: '/pages/index/index'
+        })
+      }
+    },
+    // 更新顶部导航栏信息
+    async updateCustomBarInfo() {
+      // 获取vuex中的自定义顶栏的高度
+      let customBarHeight = this.vuex_custom_bar_height
+      let statusBarHeight = this.vuex_status_bar_height
+      // 如果获取失败则重新获取
+      if (!customBarHeight) {
+        try {
+          const navBarInfo = await this.$t.updateCustomBar()
+          customBarHeight = navBarInfo.customBarHeight
+          statusBarHeight = navBarInfo.statusBarHeight
+        } catch(e) {
+          setTimeout(() => {
+            this.updateCustomBarInfo()
+          }, 10)
+          return
+        }
+      }
+      
+      // 更新vuex中的导航栏信息
+      this.$t.vuex('vuex_status_bar_height', statusBarHeight)
+      this.$t.vuex('vuex_custom_bar_height', customBarHeight)
+    }
+  }
+}
\ No newline at end of file
diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js
new file mode 100644
index 0000000..821e0d0
--- /dev/null
+++ b/libs/navigation/navigation.js
@@ -0,0 +1,17 @@
+/**
+ * 页面展示列表数据
+ */
+export default {
+  data: [{
+      title: '图鸟首页',
+      backgroundColor: 'tn-cool-bg-color-1',
+      list: [{
+          icon: 'code',
+          title: '商品详情',
+          url: '/Pages/details/details',
+          author: '图鸟北北'
+        }
+      ]
+    }
+  ]
+}
diff --git a/locales/messages.js b/locales/messages.js
new file mode 100644
index 0000000..9ed18a6
--- /dev/null
+++ b/locales/messages.js
@@ -0,0 +1,2416 @@
+const messages = {
+  en: {
+    navigation: {
+      routes: {
+        "pages/index/index": "Luju Apartments",
+        "pkgAccount/auth_result/auth_result": "Verification Result",
+        "pkgAccount/login/login": "Sign In",
+        "pkgAccount/register/register": "Register",
+        "pkgAccount/registration_records/registration_records": "Registration Records",
+        "pkgBooking/book/book": "Booking Confirm",
+        "pkgBooking/book_viewing/book_viewing": "Book Viewing",
+        "pkgBooking/booking_detail/booking_detail": "Booking Detail",
+        "pkgBooking/booking_list/booking_list": "Booking Records",
+        "pkgBooking/pay/pay": "Online Payment",
+        "pkgExplore/download/download": "Gallery",
+        "pkgExplore/filter/filter": "Filter",
+        "pkgExplore/room_detail/room_detail": "Room Detail",
+        "pkgExplore/sign/sign": "Check In",
+        "pkgExplore/store_detail/store_detail": "Community Detail",
+        "pkgExplore/vr_preview/vr_preview": "VR Viewing",
+        "pkgService/application_detail/application_detail": "Application Detail",
+        "pkgService/contract_detail/contract_detail": "Contract Detail",
+        "pkgService/contract_sign/contract_sign": "Contract Signing",
+        "pkgService/device_control/device_control": "Device Control",
+        "pkgService/message_detail/message_detail": "Message Detail",
+        "pkgService/my_application/my_application": "My Applications",
+        "pkgService/my_contract/my_contract": "My Contracts",
+        "pkgService/service_stub/service_stub": "Service Center",
+        "pkgService/smart_control/smart_control": "Smart Control",
+        "pkgService/submit_request/submit_request": "Submit Request",
+        "pkgService/utility_recharge/utility_recharge": "Utility Recharge"
+      }
+    },
+    pages: {
+      index: {
+        component: {
+          MessageCenterTab: {
+            acknowledged: "Got It",
+            butler: "Butler",
+            checkResultDefault: "Inspection Result",
+            checkResultFix: "Needs Fix",
+            checkResultNormal: "Normal",
+            checkResultReview: "Pending Review",
+            checkStatusDefault: "Status Pending",
+            checkStatusDone: "Completed",
+            checkStatusPending: "Pending",
+            checkStatusProcessing: "Processing",
+            checkTypeCheckout: "Checkout Check",
+            checkTypeDefault: "Inspection Record",
+            checkTypeRoutine: "Routine Check",
+            checkTypeSpecial: "Special Check",
+            checkerLabel: "Inspector: ",
+            compensationLabel: "Compensation: ",
+            emptyDesc: "Notifications and inspection reminders will appear here.",
+            emptyTitle: "No Messages",
+            inspectionChecker: "Inspector",
+            inspectionCountUnit: "alerts",
+            inspectionDesc: "Inspection reminders are summarized automatically.",
+            inspectionItemPrefix: "Item {index}",
+            inspectionItemsTitle: "Inspection Items",
+            inspectionNeedManualHandle: "Inspection reminders need manual handling",
+            inspectionRemarkTitle: "Inspection Remark",
+            inspectionResult: "Result",
+            inspectionStatus: "Status",
+            inspectionSummaryFallback: "Inspection reminder, tap to view details.",
+            inspectionTitle: "Inspection",
+            loadingDesc: "Syncing notifications and inspections.",
+            loadingTitle: "Loading Messages",
+            markNotificationRead: "Read Notifications",
+            noUnreadNotification: "No unread notifications",
+            notificationFallbackDesc: "You have a new system message",
+            notificationFallbackTitle: "System Notification",
+            payment: "Payment",
+            problemLabel: "Problem: ",
+            recentMessages: "Recent",
+            remarkLabel: "Remark: ",
+            remoteMarkedRead: "Notifications marked as read",
+            remoteMarkedReadWithInspection: "Notifications marked as read, inspection reminders still need handling",
+            subtitle: "You have {count} unread messages",
+            system: "System",
+            title: "Messages",
+            unassignedRoom: "Room Unlinked",
+            viewDetail: "Details"
+          },
+          MyApplicationTab: {
+            agreeAndPay: "Agree and Pay",
+            apartmentLabel: "Apartment",
+            cancelOrder: "Cancel Order",
+            cancelOrderContent: "This will close the current unpaid deposit order. Continue?",
+            cancelOrderFailed: "Failed to cancel order",
+            cancelOrderLoading: "Canceling...",
+            cancelOrderSuccess: "Order canceled",
+            cancelOrderTitle: "Cancel Order",
+            continuePay: "Continue Pay",
+            dateRangeJoiner: " to ",
+            depositNoticeTitle: "Rental Deposit Notice",
+            emptyDesc: "You have not submitted any application yet. Go select a room to start a stay or viewing application.",
+            emptyTitle: "No applications yet",
+            goSelectRoom: "Select Room",
+            leaseTermLabel: "Lease Term",
+            loadError: "Failed to load applications",
+            loadingDesc: "Syncing your application records. Please wait.",
+            missingApplicationCode: "Missing application number",
+            missingBillCode: "Missing application bill number",
+            noMore: "No more applications",
+            occupantLabel: "Resident",
+            pageDesc: "Your stay and viewing application records",
+            pageTitle: "My Applications",
+            payDeposit: "Pay Deposit",
+            pendingPaymentAmountLabel: "Order Amount",
+            pendingPaymentDescLabel: "Description",
+            pendingPaymentExpireLabel: "Time Left",
+            pendingPaymentExpired: "Expired",
+            pendingPaymentOrderNoLabel: "Payment Order No.",
+            pendingPaymentTitle: "Unfinished Payment",
+            pullUpMore: "Pull up to load more",
+            refresh: "Refresh Status",
+            refreshEmptySuccess: "No application found. Reservation records synced.",
+            refreshSuccess: "Application status refreshed",
+            refreshing: "Refreshing...",
+            remarkLabel: "Remarks",
+            scrollToRead: "Scroll to bottom",
+            statusApproved: "Approved",
+            statusFinished: "Closed",
+            statusPending: "Pending",
+            statusPendingPayment: "Please Pay Deposit",
+            statusProcessing: "Processing",
+            statusRejected: "Rejected",
+            statusReminderTitle: "Current Progress",
+            statusWaitingRoomAssign: "Waiting for Room Assignment",
+            stayApplicationTitle: "Stay Application",
+            submittedAtLabel: "Submitted At",
+            toolbarSummary: "{total} applications",
+            viewingApplicationTitle: "Viewing Request",
+            viewingTimeLabel: "Viewing Time"
+          },
+          ProfileCenterTab: {
+            activities: "Activities",
+            application: "Applications",
+            applicationStatus: "Application Status",
+            bill: "Billing",
+            bookingList: "Bookings",
+            bookingNo: "Booking No.",
+            bookingPlaceholder: "Your booking will appear here after payment",
+            bookingProgressDesc: "Booking will be reviewed after payment. Butler will be assigned upon approval.",
+            bookingStatusTitle: "Booking Progress",
+            clickToLogin: "Click to Sign In",
+            comingSoon: "Soon",
+            comingSoonDesc: "{title} is under development. The formal entry and data will be available here later.",
+            completeFormBeforeSubmit: "Please complete the form before submitting.",
+            contact: "Contact",
+            contract: "My Contract",
+            contractPendingDesc: "You have contracts waiting for signature. Please review them soon.",
+            contractPendingTag: "Pending",
+            contractStatusTitle: "Contract Status",
+            coreServices: "My Services",
+            daysIn: "Days Stayed",
+            done: "Done",
+            edit: "Edit",
+            exclusiveButler: "Exclusive Butler",
+            guest: "Guest",
+            languageSwitch: "Language",
+            languageToggleLabel: "中文",
+            logout: "Log Out",
+            logoutConfirmContent: "Are you sure to log out?",
+            logoutConfirmTitle: "Notice",
+            logoutSuccess: "Logged out",
+            notSubmittedYet: "No registration submitted",
+            onlineService: "24/7 Online Service",
+            pendingCountText: "Pending Contracts",
+            points: "Points",
+            registrationApprovedDesc: "Registration approved, ready to sign in",
+            registrationEmptyDesc: "No registration submitted",
+            registrationPendingDesc: "Registration is under review",
+            registrationRecordGuestDesc: "You can still review registration records submitted with this Wechat account before signing in.",
+            registrationRecordSubmittedDesc: "A registration has been submitted with this Wechat account. You can review its history and approval status.",
+            registrationRecordTitle: "Registration Records",
+            registrationRejectedDesc: "Registration rejected, please review the reason",
+            registrationStatusTitle: "Registration Status",
+            remind: "Remind",
+            settings: "Preferences",
+            statusApproved: "Approved",
+            statusPending: "Under Review",
+            statusRejected: "Rejected",
+            submitRequest: "Submit Request",
+            userFallback: "User",
+            viewDetail: "Details",
+            viewNow: "View Now"
+          },
+          SelectRoomTab: {
+            all: "All",
+            allAreas: "All Areas",
+            allTags: "All Tags",
+            apartmentDetail: "Apartment Detail",
+            areaStatus: "Area Status",
+            areaStatusDesc: "No areas matched the current filter.",
+            areaUnavailableTitle: "Area information unavailable",
+            bookViewing: "Book Viewing",
+            defaultAreaAddressPrefix: "Located at ",
+            distancePlaceholder: "Nearby",
+            emptyAreaDesc: "No rooms available under the current filters.",
+            emptyAreaTitle: "No matched rooms",
+            emptyBannerDesc: "No active banners available.",
+            emptyBannerTitle: "No banners",
+            learnMore: "Learn More",
+            loadingAreaStatus: "Loading areas",
+            pricePending: "TBD",
+            priceUnit: "/month",
+            searchApartment: "Search by area, apartment or room type",
+            shareTitle: "Luju Apartments - International Youth Community",
+            sortDefault: "Default",
+            sortNameAsc: "Name",
+            sortPriceAsc: "Price: Low to High",
+            sortPriceDesc: "Price: High to Low",
+            tagFilter: "Tags",
+            viewCommunity: "View Details"
+          },
+          StayServiceTab: {
+            activeStatus: "Active",
+            addSmartDevice: "Add Smart Device",
+            bedPrefix: "Bed {label}",
+            billCount: "Bills",
+            billEmpty: "No unpaid bills",
+            billRecordFallback: "Bill",
+            billType: "Type",
+            billUnit: "",
+            bookedRoomType: "Room Type",
+            bookingInfo: "Booking Info",
+            bookingPendingDesc: "Deposit has been paid. The booking is waiting for approval and butler assignment.",
+            bookingPendingNote: "Your booking has been submitted. More stay details will appear after review.",
+            bookingPendingTitle: "Your booking is under review",
+            butler: "Community Butler",
+            callNow: "Call",
+            checkinStep: "Check-in",
+            communityEvent: "Community Events",
+            completeFormBeforeSubmit: "Please complete the form before submitting.",
+            contactPhonePrefix: "Phone ",
+            contractPendingNote: "The flow stays at the contract step until the contract is signed.",
+            contractRoom: "Contract Room",
+            contractStep: "Contract",
+            controllable: "Controllable",
+            currentStay: "Current Stay",
+            deviceFallback: "Device {index}",
+            goSelectRoom: "Explore Rooms",
+            joinEvent: "Join Now",
+            lastCreateTime: "Latest",
+            leaseTerm: "Lease",
+            loadingButlerInfo: "Syncing butler info...",
+            loadingManagerInfo: "Loading butler info",
+            loadingShort: "Syncing",
+            managerContactSummary: "{count} butlers are available in this area",
+            managerFallback: "Community Butler",
+            managerInitialFallback: "B",
+            managerWechatCopied: "Butler Wechat copied",
+            multiButlerName: "{name} +{count}",
+            myBill: "Monthly Bill",
+            noButlerInfo: "No butler information yet",
+            noContactPhone: "No contact number",
+            noManagerWechat: "No butler Wechat",
+            notCheckedInDesc: "We provide premium co-living services.\nPlease explore and find your suite first.",
+            notCheckedInTitle: "No Leased Room Yet",
+            onDutyCount: "{count} on duty",
+            online: "Online · Response < 5 mins",
+            onlineSingle: "1 online",
+            paidOff: "Paid Off",
+            payBill: "Pay Now",
+            pendingAssignment: "Pending assignment",
+            pendingContractFound: "Pending contract found",
+            pendingSync: "Pending",
+            primaryButlerTag: "Lead",
+            publicService: "Facility Booking",
+            refreshFailed: "Refresh failed, please try again later",
+            refreshStatus: "Refresh Status",
+            refreshing: "Refreshing...",
+            reviewStep: "Review",
+            roomDeviceUnconfigured: "Smart devices are not configured for this room",
+            signContract: "Sign Contract",
+            signContractDesc: "A contract is ready for signature. You are now at the contract signing step.",
+            signContractNow: "Please sign your contract",
+            smartAvailableAfterCheckin: "Smart devices are available after check-in",
+            smartControl: "Smart Control",
+            smartDeviceConnected: "{count} smart devices connected",
+            smartDeviceEmpty: "No smart devices in this room",
+            smartDeviceLoadFailed: "Failed to load smart devices",
+            smartDeviceSyncFailed: "Smart device sync failed",
+            statusUpdated: "Status updated",
+            stayService: "Service Request",
+            submitBookingStep: "Submit",
+            submitRequest: "Submit Request",
+            syncingSmartDevices: "Syncing smart devices...",
+            title: "My Stay",
+            unpaid: "Unpaid",
+            viewAll: "View All",
+            viewBill: "View Bills"
+          }
+        },
+        index: {
+          loadingBrand: "Luju Apartments",
+          shareTitle: "Luju Apartments - International Youth Community",
+          tabMessageCenter: "Messages",
+          tabMyApplication: "Applications",
+          tabProfileCenter: "Profile",
+          tabSelectRoom: "Explore",
+          tabStayService: "Stay"
+        }
+      }
+    },
+    pkgAccount: {
+      auth_result: {
+        auth_result: {
+          approvedPleaseLogin: "Approved. Please sign in.",
+          descApproved: "Your registration is approved and you can sign in now.",
+          descPendingDefault: "Your application is under review and sign-in is unavailable before approval.",
+          descPendingRecords: "This page shows the approval status of the selected application. Pull down or tap the button to refresh.",
+          descRejectedDefault: "Please update the information and resubmit based on the rejection reason.",
+          descRejectedRecords: "This page shows the approval result of the selected application. Please update the information and resubmit based on the rejection reason.",
+          descUnsubmitted: "Please submit a registration application first. Registration is completed only after approval.",
+          fallbackNone: "-",
+          fetchStatusFailed: "Failed to fetch approval status",
+          goLogin: "Sign In",
+          labelAccount: "Account",
+          labelCertificateNo: "Certificate No.",
+          labelIdentityType: "Identity Type",
+          labelName: "Name",
+          latestDetailMissing: "Latest details are unavailable. Showing the list record instead.",
+          navTitle: "Registration Result",
+          refreshStatus: "Refresh Status",
+          refreshing: "Refreshing...",
+          remarkApproved: "Approval Note",
+          remarkPending: "Approval Note",
+          remarkRejected: "Rejection Reason",
+          resubmitRegister: "Submit Registration Again",
+          roleDomestic: "Chinese",
+          roleForeign: "Foreign",
+          statusApproved: "Approved",
+          statusPending: "Under Review",
+          statusRejected: "Rejected",
+          submittedInfoTitle: "Submitted Information",
+          titleApproved: "Registration approved",
+          titlePending: "Registration submitted",
+          titleRejected: "Registration was not approved",
+          titleUnsubmitted: "No registration application submitted yet",
+          unsubmitted: "Not Submitted",
+          viewRegistrationRecords: "View Registration Records"
+        }
+      },
+      login: {
+        login: {
+          accountLabel: "Account / Email",
+          accountPlaceholder: "Enter account or email",
+          goRegister: "Register",
+          loading: "Loading...",
+          loginFailed: "Sign-in failed, please try again later",
+          loginSuccess: "Signed in successfully",
+          noAccount: "No account yet?",
+          pageDesc: "Sign in to Luju Apartments and explore your international youth community.",
+          pageTitle: "Welcome Back",
+          passwordLabel: "Password",
+          passwordPlaceholder: "Enter password",
+          submitLogin: "Sign In",
+          submitting: "Signing In...",
+          validateRequired: "Please enter both account and password",
+          viewRegistrationRecords: "View Registration Records",
+          viewRegistrationRecordsDesc: "You can review registration records submitted by this Wechat account even without signing in."
+        }
+      },
+      register: {
+        register: {
+          accountLabel: "Account",
+          accountPlaceholder: "Enter account name",
+          accountSection: "Account Information",
+          attachmentNotImage: "The current attachment is not an image",
+          basicSection: "Basic Verification",
+          chinaText: "China",
+          countryFixedText: "Fixed for Chinese users",
+          countryLabel: "Country",
+          countryLoadFailed: "Failed to load country list",
+          countryPlaceholder: "Select country",
+          dictLoadFailed: "Failed to load dictionaries",
+          dietaryLabel: "Dietary Habit",
+          dietaryPlaceholder: "Select dietary habit",
+          domesticIdentity: "Chinese",
+          draftTipDefault: "Unfinished content is auto-saved and can be continued later",
+          draftTipSaved: "Current content has been auto-saved",
+          emailCodeLabel: "Email Code",
+          emailCodePlaceholder: "Enter email verification code",
+          emailLabel: "Email",
+          emailPlaceholder: "Enter email",
+          foreignIdentity: "Foreign",
+          genderLabel: "Gender",
+          genderMale: "Male",
+          genderFemale: "Female",
+          goLogin: "Sign In",
+          hangzhouPropertyLabel: "Property in Hangzhou",
+          hasAccount: "Already have an account?",
+          hobbyLabel: "Hobby",
+          hobbyPlaceholder: "Select hobby",
+          idCardBackAttachmentLabel: "ID Card Back",
+          idCardFrontAttachmentLabel: "ID Card Front",
+          idCardLabel: "ID Card Number",
+          idCardPlaceholder: "Enter ID card number",
+          imageUploadedTip: "Image uploaded, tap to preview",
+          loading: "Loading...",
+          nameLabel: "Name",
+          namePlaceholder: "Enter your real name",
+          navTitle: "Register",
+          noSelectableCountry: "No selectable country",
+          noSelectableOptions: "No selectable options",
+          noText: "No",
+          pageDesc: "Account information and identity verification materials must be completed together. Registration succeeds only after approval.",
+          pageTitle: "Register and Submit Verification",
+          passportAttachmentLabel: "Passport Attachment",
+          passportImageOnlyTip: "Passport attachment only supports images, please re-upload",
+          passportExpiryLabel: "Passport Expiry Date",
+          passportLabel: "Passport Number",
+          passportPlaceholder: "Enter passport number",
+          passwordLabel: "Password",
+          passwordPlaceholder: "Enter at least 6 characters",
+          phoneLabel: "Phone",
+          phonePlaceholder: "Enter phone number",
+          preferenceSection: "Preferences",
+          profileSection: "Profile",
+          religionLabel: "Religion",
+          religionPlaceholder: "Select religion",
+          restoreDraftCancel: "No",
+          restoreDraftConfirm: "Restore",
+          restoreDraftContent: "Would you like to restore the last unfinished or failed registration data?",
+          restoreDraftSuccess: "Previous draft restored",
+          restoreDraftTitle: "Unfinished Data Found",
+          reupload: "Re-upload",
+          schoolLabel: "School",
+          schoolPlaceholder: "Enter school (optional)",
+          selectDate: "Select date",
+          submitFailed: "Submission failed, please try again later",
+          submitPending: "Application submitted, pending approval",
+          submitRegister: "Submit Registration",
+          submitting: "Submitting...",
+          uploadFailed: "Upload failed, please retry",
+          uploadIdBack: "Upload ID card back",
+          uploadIdFront: "Upload ID card front",
+          uploadImageOption: "Upload Image",
+          uploadPassport: "Upload passport image",
+          uploadSuccess: "Upload successful",
+          uploading: "Uploading...",
+          validateEmail: "Please enter a valid email address",
+          validateIdCard: "Please enter your ID card number",
+          validateIdCardAttachments: "Please upload both sides of the ID card",
+          validateIdentityBasic: "Please complete gender, phone number, and country",
+          validatePassportAttachment: "Please upload the passport image",
+          validatePassportAttachmentImage: "Passport attachment only supports image files",
+          validatePassportBasic: "Please enter passport number and expiry date",
+          validatePasswordLength: "Password must be at least 6 characters",
+          validatePhone: "Please enter a valid phone number",
+          validateProfile: "Please complete work unit and property status in Hangzhou",
+          validateRequiredBasic: "Please complete the account, password, email, and name fields first",
+          viewImage: "Preview",
+          viewRegistrationRecords: "View Registration Records",
+          viewRegistrationRecordsDesc: "If this Wechat account has submitted before, you can review the history and approval status directly.",
+          workUnitLabel: "Work Unit",
+          workUnitPlaceholder: "Enter work unit",
+          yesText: "Yes"
+        }
+      },
+      registration_records: {
+        accountLabel: "Account",
+        approvalRemarkLabel: "Review Notes",
+        approvedAtLabel: "Approved At",
+        emptyDesc: "This Wechat account has not submitted any registration application yet.",
+        emptyTitle: "No registration records",
+        goRegister: "Submit Registration",
+        idNumberLabel: "ID Number",
+        loadError: "Failed to load registration records",
+        loadingDesc: "Syncing registration records submitted by this Wechat account. Please wait.",
+        loadingMore: "Loading...",
+        loadingTitle: "Loading registration records",
+        navTitle: "Registration Records",
+        noMore: "No more records",
+        phoneLabel: "Phone",
+        providerUnavailableDesc: "Please open this page in Wechat Mini Program to view registration records submitted by this Wechat account.",
+        providerUnavailableTitle: "Unable to access Wechat identity",
+        pullUpMore: "Pull up to load more",
+        registrationFallbackTitle: "Registration Application",
+        rejectReasonLabel: "Rejection Reason",
+        statusAll: "All",
+        statusApproved: "Approved",
+        statusPending: "Under Review",
+        statusProcessing: "Processing",
+        statusRejected: "Rejected",
+        submittedAtLabel: "Submitted At"
+      }
+    },
+    pkgBooking: {
+      book: {
+        book: {
+          bookingFor: "Booking For",
+          bookingStatus: "Status",
+          checkInDate: "Booking Period",
+          checkInDesc: "Payment will create a booking order first, without occupying room inventory.",
+          deposit: "Deposit",
+          endDate: "Check-out Date",
+          nightUnit: "nights",
+          pendingPayment: "Deposit Pending",
+          roomTypeLabel: "Room Type: ",
+          selectDate: "Select Date",
+          startDate: "Check-in Date",
+          stayNights: "Stay Nights",
+          submitOrder: "Go To Payment",
+          title: "Booking Confirm"
+        }
+      },
+      book_viewing: {
+        book_viewing: {
+          backTitle: "Back",
+          budgetLabel: "Budget (CNY/month)",
+          budgetPlaceholder: "Enter your expected budget",
+          defaultInfoDesc: "A dedicated manager will arrange a one-on-one viewing for you",
+          duration1: "1-3 months",
+          duration2: "4-6 months",
+          duration3: "7-9 months",
+          duration4: "10-12 months",
+          duration5: "Over 1 year",
+          durationLabel: "Expected Stay Duration",
+          navTitle: "On-site Viewing",
+          remarkArea: "Preferred Area: {area}",
+          remarkBudget: "Budget: {budget} CNY/month",
+          remarkDuration: "Expected Stay: {duration}",
+          remarkPayMethod: "Payment Method: {payMethod}",
+          remarkRoomType: "Preferred Room Type: {roomType}",
+          remarkSource: "Current Source: {room}",
+          remarkTail: "Note: Please confirm the viewing schedule with the manager. After viewing and locking a room number, the order can be converted into a booking for payment.",
+          remarkTime: "Viewing Time: {date} {time}",
+          remarkTitle: "Viewing Request",
+          remarkWorkplace: "Work / Commute Location: {workplace}",
+          rentalNeeds: "Rental Needs",
+          rentalNeedsDesc: "Help the manager recommend a suitable room",
+          selectDurationRequired: "Please select the expected stay duration",
+          selectTimeRequired: "Please select a viewing time slot",
+          selectViewingTime: "Select Viewing Time",
+          selectViewingTimeDesc: "Choose a time slot that works for you",
+          submitBooking: "Submit Request",
+          submitFailed: "Failed to submit the booking",
+          submitSuccessContent: "Your viewing request has been submitted.\nThe system will forward it to the authorized manager of the selected area. After the manager confirms the viewing, the order can be completed directly or converted into a booking for payment once a room is selected.",
+          submitSuccessTitle: "Booking Submitted",
+          submitting: "Submitting...",
+          today: "Today",
+          tomorrow: "Tomorrow",
+          week0: "Sun",
+          week1: "Mon",
+          week2: "Tue",
+          week3: "Wed",
+          week4: "Thu",
+          week5: "Fri",
+          week6: "Sat",
+          workplaceLabel: "Work / Commute Location",
+          workplacePlaceholder: "Enter your main commute location"
+        }
+      },
+      booking_detail: {
+        booking_detail: {
+          areaLabel: "Area",
+          buildingFloorLabel: "Building / Floor",
+          cachedDetailShown: "Network issue detected. Showing the latest synced detail.",
+          dateRangeJoiner: " to ",
+          emptyDesc: "No booking detail is available right now. Please check your booking records first.",
+          emptyTitle: "No booking record",
+          flowStep1: "1. Paid and waiting for approval",
+          flowStep2: "2. Approved and waiting for butler assignment",
+          flowStep3: "3. Butler assigned and waiting for room allocation",
+          flowTitle: "Current Flow",
+          loadFailed: "Failed to load booking detail",
+          loadingDesc: "Syncing the latest booking details. Please wait.",
+          loadingTitle: "Loading booking",
+          navTitle: "Booking Detail",
+          orderNoLabel: "Booking No.",
+          rejectReasonTitle: "Rejection Reason",
+          roomNoLabel: "Room No.",
+          roomTypeLabel: "Room Type",
+          stayDateLabel: "Stay Dates",
+          submittedAtLabel: "Submitted At"
+        }
+      },
+      booking_list: {
+        booking_list: {
+          bookingFallbackTitle: "Room Booking",
+          buildingFloorLabel: "Building / Floor",
+          cachedListShown: "Network issue detected. Showing the latest synced records.",
+          dateRangeJoiner: " to ",
+          emptyDesc: "No booking record is available yet. Completed bookings will appear here.",
+          emptyTitle: "No booking records",
+          goSelectRoom: "Select Room",
+          loadFailed: "Failed to load booking records",
+          loadingDesc: "Syncing your latest booking records. Please wait.",
+          loadingTitle: "Loading bookings",
+          navTitle: "Booking Records",
+          stayDateLabel: "Stay Dates",
+          submittedAtLabel: "Submitted At"
+        }
+      },
+      pay: {
+        pay: {
+          billTo: "Bill To",
+          bookingPeriod: "Booking Period",
+          company: "Lüju Property Management",
+          fallbackAction: "Submit Application Instead",
+          fallbackDesc: "The real deposit payment flow is not ready yet. You can submit an application first and let staff follow up.",
+          fallbackNavigateDesc: "The payment API is not ready yet. Submit a stay application first and let staff follow up.",
+          fallbackNavigateTitle: "Stay Application",
+          fallbackTitle: "Payment API Pending",
+          laterAction: "Later",
+          location: "Location",
+          nightUnit: "nights",
+          payNow: "Pay and Submit",
+          paying: "Processing...",
+          paymentAmount: "Deposit Amount",
+          paymentMethod: "Payment Method",
+          pendingTitle: "Payment API Pending",
+          roomType: "Style",
+          roomTypeNameLabel: "Room Type",
+          stayNights: "Stay Nights",
+          title: "Deposit Payment",
+          toLabel: "to",
+          total: "Total"
+        }
+      }
+    },
+    pkgExplore: {
+      download: {
+        download: {
+          galleryImage: "Guide Image",
+          galleryImageLong: "Guide Image Guide Image Guide Image",
+          navTitle: "Gallery",
+          searchButton: "Search",
+          searchPlaceholder: "Enter search keywords"
+        }
+      },
+      filter: {
+        filter: {
+          comprehensiveLabel: "All",
+          navTitle: "App Zone",
+          priceLabel: "Price",
+          product1: "Eggy Party",
+          product2: "Carrot Defense",
+          product3: "Travel Frog",
+          product4: "Fallout Shelter",
+          product5: "Kingdom Rush",
+          product6: "Honkai: Star Rail",
+          product7: "Monument Valley",
+          purchasedSuffix: "purchased",
+          salesLabel: "Sales",
+          sortDefault: "Default",
+          typeLabel: "Type"
+        }
+      },
+      sign: {
+        sign: {
+          checkInNow: "Check In Now",
+          checkInRewardHint: "Daily continuous check-ins unlock multiple rewards",
+          checkInSuccess: "Check-in Successful",
+          checkedInFor: "Checked in for",
+          continuousCheckIn: "Continuous check-in",
+          daysAndEarned: "days and earned",
+          daysRewardHint: "days unlocks extra rewards!",
+          goComplete: "Go",
+          more: "More",
+          notice1: "Congrats to Fu*qi for 7 consecutive check-ins and earning 300 points",
+          notice2: "Congrats to Xu*yuan for 7 consecutive check-ins and earning 300 points",
+          notice3: "Congrats to Cai*dong for 7 consecutive check-ins and earning 300 points",
+          pointsRecord: "Points History",
+          pointsUnit: "Points",
+          taskDesc: "Catch That Pig",
+          taskName: "Task Name",
+          taskSectionTitle: "Complete Tasks for Coins",
+          warmTip: "Tips:",
+          warmTipDesc: "Daily check-in grants 10 points. Completing 7 consecutive days may unlock extra rewards, and the record resets after day 7."
+        }
+      },
+      store_detail: {
+        store_detail: {
+          apartmentName: "Community",
+          collapse: "Collapse",
+          contactManager: "Contact Butler",
+          expandAll: "Expand",
+          loading: "Loading...",
+          loadingManagerInfo: "Loading butler info",
+          navigate: "Navigate",
+          noAddress: "No address available",
+          noImage: "No image",
+          noLocation: "Location unavailable",
+          noServicePhone: "No contact number",
+          parseStoreDataFailed: "Failed to parse community data",
+          phoneConsult: "Phone Consult",
+          selectContact: "Select Contact",
+          pricePending: "TBD",
+          priceUnit: "/month",
+          roomSectionTitle: "Available Rooms ({count})",
+          sectionTitle: "Supporting Facilities",
+          share: "Share",
+          shareTitle: "Community Detail",
+          storeIntro: "Community Intro",
+          viewDetails: "View Details"
+        }
+      },
+      room_detail: {
+        room_detail: {
+          addressHint: "View on map",
+          allRoomsLoginContent: "Please sign in before booking this room.",
+          apartmentName: "Apartment",
+          applyStay: "Apply Stay",
+          applyViewing: "Book Viewing",
+          areaLabel: "Area",
+          basicInfo: "Basic Info",
+          bookRoom: "Book Room",
+          bookingInfo: "Booking Info",
+          bookingRules: "Booking Rules",
+          buildingLabel: "Building",
+          collapse: "Collapse",
+          englishNameLabel: "English Name",
+          expandAll: "Expand",
+          floorLabel: "Floor",
+          imageCount: "{count} Images",
+          imageTab: "Images",
+          loginTitle: "Sign In Required",
+          navigate: "Navigate",
+          needApproval: "Approval Required",
+          noAddress: "No address available",
+          noApprovalNeeded: "Instant Booking",
+          noImage: "No image",
+          noLocation: "Location unavailable",
+          noPreviewImage: "No preview image",
+          navDetail: "Room Detail",
+          orientationLabel: "Orientation",
+          payMethodLabel: "Payment",
+          payMethodPrefix: "Payment: ",
+          priceLabel: "Price",
+          pricePending: "TBD",
+          pricePrefix: "Price: ",
+          priceUnit: "/month",
+          roomCodeLabel: "Room No.",
+          roomDesc: "Room Description",
+          roomTypeCodePrefix: "Room Type Code: ",
+          roomTypeDesc: "Room Type Description",
+          roomTypeFallback: "Room",
+          roomTypeLabel: "Room Type",
+          roomTypeNameLabel: "Room Type Name",
+          roomTypeApplyLoginContent: "Please sign in before submitting a viewing request for this room type.",
+          roomSectionTitle: "Room Assets",
+          sectionTitle: "Room Assets",
+          sectionSubtitle: "{count} items",
+          share: "Share",
+          shareTitle: "Room Detail",
+          statusLabel: "Status",
+          stayApplicationSuffix: "Stay Application",
+          stayLoginContent: "Please sign in before submitting a stay application.",
+          swipeUpHint: "Swipe up for details",
+          unitLabel: "Unit",
+          viewLargeImage: "View Large Image",
+          viewLargeImageDesc: "Tap to open the current image in full screen.",
+          vrPreview: "VR Preview",
+          vrPreviewDesc: "Switch to immersive room viewing.",
+          vrTab: "VR",
+          vrViewingTitle: "VR Viewing"
+        }
+      },
+      vr_preview: {
+        vr_preview: {
+          defaultTitle: "VR Viewing",
+          emptyPreview: "No VR preview available",
+          modeChip: "VR Preview",
+          noAsset: "No VR preview asset available",
+          placeholderSubtitle: "This room type keeps its VR entry reserved for richer immersive assets later.",
+          posterSubtitle: "The current VR preview poster is displayed. Tap to view the full image.",
+          viewFullscreen: "View Fullscreen",
+          waitingAsset: "Waiting for assets"
+        }
+      }
+    },
+    pkgService: {
+      application_detail: {
+        application_detail: {
+          apartmentLabel: "Apartment",
+          applicantLabel: "Applicant",
+          applicationCodeLabel: "Application No.",
+          applicationRemarkTitle: "Application Notes",
+          applicationTypeLabel: "Application Type",
+          appliedRoomTypeLabel: "Requested Room Type",
+          backList: "Back to List",
+          basicInfoTitle: "Basic Information",
+          budgetKey: "Budget",
+          codeCopied: "Application number copied",
+          commuteKey: "Work / Commute Location",
+          copy: "Copy",
+          dateRangeJoiner: " to ",
+          emptyRemark: "No additional remarks",
+          intendedRoomTypeLabel: "Preferred Room Type",
+          leaseDurationKey: "Expected Stay Duration",
+          leaseTermLabel: "Lease Term",
+          missingBillCode: "Missing application bill number",
+          navTitle: "Application Detail",
+          paymentMethodKey: "Payment Method",
+          preferredAreaKey: "Preferred Area",
+          preferredRoomTypeKey: "Preferred Room Type",
+          remarkTitle: "Remarks",
+          statusApproved: "Approved",
+          statusFinished: "Closed",
+          statusLabel: "Status",
+          statusPending: "Pending",
+          statusPendingPayment: "Please Pay Deposit",
+          statusProcessing: "Processing",
+          statusRejected: "Rejected",
+          statusReminderTitle: "Current Progress",
+          statusWaitingRoomAssign: "Waiting for Room Assignment",
+          stayApplicationTitle: "Stay Application",
+          stayApplicationType: "Stay Application",
+          submittedAtLabel: "Submitted At",
+          viewBill: "View Related Bill",
+          viewingApplicationTitle: "Viewing Request",
+          viewingApplicationType: "Viewing Request",
+          viewingInfoTitle: "Viewing Details",
+          viewingTimeKey: "Viewing Time",
+          viewingTimeLabel: "Viewing Time"
+        }
+      },
+      components: {
+        CurrentApplicationBillPanel: {
+          applicationNoPrefix: "Application No: ",
+          billInfoIncomplete: "Incomplete bill information",
+          billLoadFailed: "Failed to load bills",
+          billNoLabel: "Bill No.",
+          billPaymentDesc: "Bill Payment",
+          billRecordFallback: "Bill Record",
+          buttonConfirming: "Confirming...",
+          buttonLaunching: "Launching...",
+          buttonPolling: "Checking ({current}/{total})",
+          continuePayButton: "Continue Pay",
+          createTimeLabel: "Created At",
+          currentPaymentLabel: "This Payment",
+          emptyApplicationDesc: "No related application is found. Please go to \"My Applications\" and select an application first.",
+          emptyApplicationTitle: "No Application Available",
+          emptyPendingDesc: "No pending bills are found under the current application. New bills will appear here later.",
+          emptyPendingTitle: "No Pending Bills",
+          goToMyApplication: "Go to My Applications",
+          heroDescAutoResolve: "The latest application number will be used first to query related bills.",
+          heroDescResolved: "This page is querying pending bills by the current application number.",
+          heroTitle: "Pending Bills",
+          loadingDesc: "Syncing your pending bills, please wait.",
+          loadingTitle: "Loading Bills",
+          paidAmountLabel: "Paid Amount",
+          paymentActionAcknowledge: "Got It",
+          paymentCanceled: "Payment canceled",
+          paymentDescFailed: "The system cannot confirm the payment for now. Please review the tips and try again later.",
+          paymentDescLaunching: "Wechat Pay is being launched. Complete the payment in Wechat and return here.",
+          paymentDescPolling: "After payment, the system checks the payment status automatically. No manual refresh is needed.",
+          paymentDescSuccess: "This payment has been synchronized and the bill status is updated.",
+          paymentFailedError: "Payment failed",
+          paymentFailedHint: "Payment success is not confirmed yet. Please refresh the bill later.",
+          paymentHintLaunching: "Payment information is ready. Waiting for Wechat payment to complete.",
+          paymentHintLaunchingToast: "Launching Wechat Pay. Please complete the payment in Wechat.",
+          paymentHintPaidWaiting: "Payment succeeded. Waiting for backend confirmation of the bill status.",
+          paymentHintPolling: "Checking payment status with the backend, please wait.",
+          paymentParamIncomplete: "Incomplete Wechat payment parameters",
+          paymentProgressLabel: "Confirmation Progress",
+          paymentProgressWaiting: "Waiting for Payment",
+          paymentResultFailed: "Backend returned payment failure",
+          paymentResultFailedRetry: "Payment confirmation failed. Please refresh the bill later.",
+          paymentResultPending: "Backend is still processing",
+          paymentResultSuccess: "Backend confirmed payment success",
+          paymentStageDefault: "Processing Payment",
+          paymentStageFailed: "Payment Incomplete",
+          paymentStageLaunching: "Launching Wechat Pay",
+          paymentStagePolling: "Syncing Payment Result",
+          paymentStageSuccess: "Payment Confirmed",
+          paymentStatusPending: "Processing",
+          paymentSuccessAllDone: "Payment is confirmed. All bills under this application are completed.",
+          paymentSuccessPendingBills: "Payment is confirmed. There are still other unpaid bills under this application.",
+          paymentTimeoutError: "Payment confirmation timed out. Please refresh the bill later.",
+          paymentTipsDefault1: "After successful payment, the system may need a few seconds to sync the bill status.",
+          paymentTipsDefault2: "Do not tap the pay button repeatedly or close this page too early.",
+          paymentTipsDefault3: "If the process times out, the system checks the bill status again automatically.",
+          paymentTipsFailed1: "If you have completed the payment, refresh the bill later to avoid duplicate payment.",
+          paymentTipsFailed2: "If Wechat has deducted the amount but the page is not updated, contact your manager or support for verification.",
+          paymentTipsFailed3: "If no deduction occurred, return to the bill list and try again.",
+          paymentTipsSuccess1: "If there are other pending bills under this application, you can continue paying on this page.",
+          paymentTipsSuccess2: "If all bills are paid, the system returns to the home page automatically.",
+          paymentTipsSuccess3: "Payment record synchronization may be slightly delayed. Refresh to see the latest status.",
+          paymentTipsTitleDefault: "Tips",
+          paymentTipsTitleFailed: "Suggestions",
+          paymentTipsTitleSuccess: "Completion Notes",
+          paymentTitleDefault: "Processing Payment",
+          paymentTitleFailed: "Payment Confirmation Failed",
+          paymentTitleLaunching: "Complete Wechat Pay",
+          paymentTitlePolling: "Confirming Payment Result",
+          paymentTitleSuccess: "Payment Successful",
+          pendingPaymentAmountLabel: "Order Amount",
+          pendingPaymentChannelLabel: "Channel",
+          pendingPaymentDescLabel: "Description",
+          pendingPaymentExpireLabel: "Time Left",
+          pendingPaymentExpired: "Expired",
+          pendingPaymentOrderNoLabel: "Payment Order No.",
+          pendingPaymentTitle: "Unfinished Payment",
+          pendingAmountLabel: "Pending Amount",
+          pendingCountLabel: "Pending Count",
+          refundStatusLabel: "Refund Status",
+          relatedBusinessNoLabel: "Related Business No.",
+          remainingAmountLabel: "Remaining Amount",
+          remarkLabel: "Remark",
+          resultLabel: "Result",
+          totalChargeLabel: "Total Charge",
+          wechatCodeFailed: "Failed to get Wechat login code",
+          wechatPayButton: "Wechat Pay"
+        }
+      },
+      contract_detail: {
+        contract_detail: {
+          contractNoLabel: "Contract No.: ",
+          emptyDesc: "No previewable contract content was provided by image URL or contract number.",
+          emptyTitle: "No contract content",
+          imageModeChip: "A4 Image Mode",
+          loadingDesc: "Fetching contract images and content. Please wait.",
+          loadingTitle: "Loading contract",
+          navTitle: "Contract Detail",
+          notAvailable: "N/A",
+          overviewTitle: "Contract Preview",
+          signedChip: "Signed Contract",
+          textModeChip: "Text Preview Mode",
+          zoomSupportedChip: "Zoom Supported"
+        }
+      },
+      contract_sign: {
+        contract_sign: {
+          back: "Back",
+          contractNoLabel: "Contract No.: ",
+          contractNoMissing: "Missing contract number",
+          emptyDesc: "No signable contract content is available at the moment. Please try again later.",
+          emptyTitle: "No contract content",
+          footerTip: "Please confirm that you have fully read the contract before signing",
+          fullscreenPreview: "Open Fullscreen",
+          fullscreenTitle: "Full Contract",
+          loadingDesc: "Fetching contract content. Please wait.",
+          loadingTitle: "Loading contract",
+          navTitle: "Contract Signing",
+          notAvailable: "N/A",
+          overviewMeta: "Read the contract content before submitting your signature. The result will sync to My Contracts.",
+          overviewTitle: "Before Signing",
+          signAction: "I have read and agree. Sign now",
+          signFailed: "Failed to sign contract",
+          signSuccess: "Contract signed successfully",
+          signerMissing: "Missing signer name",
+          signingLoading: "Submitting contract...",
+          submitting: "Submitting...",
+          uploadFailed: "Failed to upload signature"
+        }
+      },
+      device_control: {
+        device_control: {
+          actionSuccess: "Action completed",
+          applySetting: "Apply",
+          commandFailed: "Failed to send command",
+          commandSending: "Sending command...",
+          controlPanel: "Control Panel",
+          currentRoom: "Current Room",
+          curtainClose: "Close",
+          curtainClosed: "Curtain closed",
+          curtainOpen: "Open",
+          curtainOpened: "Curtain opened",
+          curtainPause: "Pause",
+          curtainPaused: "Curtain paused",
+          deviceClosed: "Closed",
+          deviceDetail: "Device Details",
+          deviceEnabled: "Enabled",
+          deviceIdMissing: "Missing device ID",
+          deviceMissing: "Missing device information",
+          deviceOpened: "Opened",
+          functionCodeMissing: "Missing function code",
+          functionCount: "{count} functions",
+          pendingTag: "Pending",
+          schemaApplied: "{name} parameters sent",
+          sliderLabel: "Brightness / Value",
+          sliderUpdated: "Slider value updated",
+          syncHint: "Device status refreshes automatically after each action",
+          unknownSchema: "No parameter template recognized",
+          unsupportedBoxText: "This function is not available yet. Tap to send feedback.",
+          unsupportedFunction: "{name} is not fully supported yet"
+        }
+      },
+      message_detail: {
+        message_detail: {
+          actionButler: "View Service",
+          actionDefault: "Continue to Page",
+          actionPayment: "Handle Bill",
+          actionSystem: "Open Related Page",
+          backList: "Back to Messages",
+          categoryButler: "Butler Message",
+          categoryLabel: "Category",
+          categoryPayment: "Payment Bill",
+          categorySystem: "System Notice",
+          codeCopied: "Notice code copied",
+          codeLabel: "Notice Code",
+          contentTitle: "Content",
+          copy: "Copy",
+          emptyContent: "No detailed content available",
+          expiredDesc: "This message detail has expired. Please return to the message center and open it again.",
+          expiredHint: "Message cache expired",
+          localSource: "Local Business Message",
+          messageFallbackTitle: "Notification",
+          navTitle: "Message Detail",
+          remoteSource: "Remote Notification API",
+          sourceLabel: "Source",
+          statusLabel: "Status",
+          summaryTitle: "Summary"
+        }
+      },
+      my_application: {
+        my_application: {
+          apartmentLabel: "Apartment",
+          dateRangeJoiner: " to ",
+          emptyDesc: "You have not submitted any application yet. Go select a room to start a stay or viewing application.",
+          emptyTitle: "No applications yet",
+          goSelectRoom: "Select Room",
+          leaseTermLabel: "Lease Term",
+          loadError: "Failed to load applications",
+          loadingDesc: "Syncing your application records. Please wait.",
+          loadingMore: "Loading...",
+          loadingTitle: "Loading applications",
+          missingApplicationCode: "Missing application number",
+          missingBillCode: "Missing application bill number",
+          navTitle: "My Applications",
+          noMore: "No more applications",
+          occupantLabel: "Resident",
+          pullUpMore: "Pull up to load more",
+          refresh: "Refresh Status",
+          refreshSuccess: "Application status refreshed",
+          refreshing: "Refreshing...",
+          remarkLabel: "Remarks",
+          statusAll: "All",
+          statusApproved: "Approved",
+          statusFinished: "Closed",
+          statusPending: "Pending",
+          statusPendingPayment: "Please Pay Deposit",
+          statusProcessing: "Processing",
+          statusRejected: "Rejected",
+          statusReminderTitle: "Current Progress",
+          statusWaitingRoomAssign: "Waiting for Room Assignment",
+          stayApplicationTitle: "Stay Application",
+          submittedAtLabel: "Submitted At",
+          toolbarSummary: "{total} applications",
+          viewBill: "View Related Bill",
+          viewingApplicationTitle: "Viewing Request",
+          viewingTimeLabel: "Viewing Time"
+        }
+      },
+      my_contract: {
+        my_contract: {
+          actionSign: "Sign Now",
+          actionViewDetail: "View Detail",
+          contractPeriodLabel: "Contract Period",
+          contractTitle: "Stay Contract",
+          dateRangeJoiner: " to ",
+          displayMetricLabel: "Displayed",
+          emptyDesc: "Switch filters or wait for new contract data to be generated.",
+          emptyTitle: "No contract record found",
+          loadingDesc: "Syncing your contract data. Please wait.",
+          loadingTitle: "Loading contracts",
+          mySignatureLabel: "My Signature",
+          navTitle: "My Contracts",
+          overviewSubtitle: "Check stay contracts, signing status, and effective period",
+          overviewTitle: "Contract Overview",
+          pendingMetricLabel: "Pending Sign / Review",
+          recordTipLabel: "Notes",
+          relatedOrderLabel: "Related Order",
+          signStatusLabel: "Signing Status",
+          signed: "Signed",
+          statusApproved: "Approved",
+          statusPending: "Pending Review",
+          statusProcessing: "Processing",
+          statusRejected: "Rejected",
+          tabAll: "All",
+          tabPending: "Pending Sign",
+          tipApproved: "The contract is effective now. You can view the signing result.",
+          tipDefault: "Please pay attention to the latest contract status.",
+          tipNeedSign: "Please complete your signature to enter the review process.",
+          tipPending: "Signing information has been submitted and is waiting for review.",
+          tipRejected: "The contract did not pass review. Please contact the administrator.",
+          unsigned: "Unsigned"
+        }
+      },
+      service_stub: {
+        service_stub: {
+          accessAssignDesc: "After completing check-in signing and face / identity enrollment,\nthe system will automatically assign your access permission.",
+          accessCodeDesc: "Use it for community gates, unit doors, and elevators",
+          accessCodeTitle: "My Access QR Code",
+          authRecordTitle: "Access Records",
+          backHome: "Back Home",
+          backPrev: "Go Back",
+          comingSoonTitle: "Coming Soon",
+          coupon: "Coupons",
+          couponDesc: "Offset rent and utilities",
+          currentStatusDesc: "This capability is still under development and is not yet officially available. You can go back or return to the home page to browse available features.",
+          currentStatusTitle: "Current Status",
+          dailyPoints: "Daily check-in rewards",
+          defaultPageDesc: "This capability is being improved and will appear in the related personal center entry when available.",
+          defaultPageTitle: "Service Center",
+          goCheckIn: "Check In",
+          lockEmptyRecord: "No door lock records",
+          lockNoAccessDesc: "No smart lock is assigned yet, or the lock is currently offline.\nAfter check-in, one-tap unlock and temporary password features will be available.",
+          lockNoAccessTitle: "No door lock access",
+          noAccessPermission: "No access permission",
+          noteDesc: "After the real capability is connected, this page will display the formal service entry, status data, and processing records.",
+          noteTitle: "Notes",
+          oneTapUnlock: "Unlock Now",
+          pointsAvailable: "Available Points",
+          pointsEmpty: "No points record",
+          pointsMall: "Points Mall",
+          pointsMallDesc: "Redeem for selected items",
+          pointsRecordTitle: "Points History",
+          redeemRules: "Redeem Rules",
+          tempPassword: "Temporary Code",
+          visitorAccessAction: "Temporary visitor authorization",
+          visitorAccessTitle: "Visitor Access",
+          visitorEmpty: "No visitor access records"
+        }
+      },
+      smart_control: {
+        smart_control: {
+          commandFailed: "Failed to send command",
+          currentRoom: "Current Room",
+          deviceOff: "Off",
+          deviceRunning: "Running",
+          deviceSummary: "{count} devices available. Tap to control in detail view",
+          disabled: "Disabled",
+          emptyDesc: "No smart devices are bound to this room",
+          emptyTitle: "No controllable devices",
+          enabled: "Enabled",
+          loadFailedTitle: "Failed to load devices",
+          loadingDesc: "Checking controllable devices in the current room...",
+          loadingShort: "Loading",
+          loadingTitle: "Connecting devices",
+          missingFunctionCode: "Missing function code",
+          missingRoomCode: "Missing room code",
+          navTitle: "Smart Home",
+          refreshStatus: "Refresh Status",
+          requestFailed: "Failed to request device list",
+          retry: "Retry",
+          sending: "Sending...",
+          syncingStatus: "Syncing device status",
+          toolbarTip: "Tap a device to open details and send control commands",
+          unsupportedQuickControl: "Quick control is not supported for this device",
+          unsupportedSwitch: "This device does not support quick switching"
+        }
+      },
+      submit_request: {
+        components: {
+          DateRangeSelector: {
+            dateDivider: "to",
+            endLabel: "Expected Check-out",
+            endPlaceholder: "Select check-out date",
+            startLabel: "Expected Check-in",
+            startPlaceholder: "Select check-in date"
+          },
+          TagSelector: {
+            emptyText: "No tags available",
+            loadingText: "Loading tags..."
+          }
+        },
+        submit_request: {
+          applicationInfo: "Application Details",
+          applicationType: "Application Type",
+          applyRemarkPlaceholder: "Enter your additional notes",
+          applyRoomType: "Requested Room Type",
+          areaLabel: "Area",
+          currentRoom: "Current Room",
+          dateCannotBefore: "{endLabel} cannot be earlier than {startLabel}",
+          emptyHobbyTags: "No hobby tags",
+          emptyLifestyleTags: "No lifestyle tags",
+          expectedCheckin: "Expected Check-in",
+          expectedCheckout: "Expected Checkout",
+          hobbyLabel: "Hobbies",
+          leaseRange: "Lease Period",
+          lifestyleLabel: "Lifestyle Habits",
+          paymentMethod: "Payment Method",
+          referencePrice: "Reference Price",
+          remarkLabel: "Additional Notes",
+          remarkRequired: "Please enter additional notes",
+          roomTypeApplyBlockDesc: "The live application API is connected and can submit with room and area codes.",
+          roomTypeApplyBlockTitle: "Application Details",
+          roomTypeApplyDesc: "Confirm the room type, area, preference tags, and lease period before submitting.",
+          roomTypeApplyTitle: "Room Type Application",
+          selectCheckinDate: "Select check-in date",
+          selectCheckoutDate: "Select checkout date",
+          selectDateEnd: "Please select {label}",
+          selectDateStart: "Please select {label}",
+          sourceDefaultDesc: "Fill in your stay intention, lease period, and notes.",
+          stayApplyDefaultDesc: "Fill in your stay intention, preferences, and lease period before submission.",
+          stayApplyDefaultTitle: "Stay Application",
+          submitFailed: "Failed to submit application",
+          submitRoomTypeApply: "Submit Application",
+          submitSuccess: "Application submitted",
+          submitting: "Submitting...",
+          tagLoadFailed: "Failed to load preference tags"
+        }
+      },
+      utility_recharge: {
+        utility_recharge: {
+          navTitle: "Bill Management"
+        }
+      }
+    }
+  },
+  zh: {
+    navigation: {
+      routes: {
+        "pages/index/index": "绿居公寓",
+        "pkgAccount/auth_result/auth_result": "实名结果",
+        "pkgAccount/login/login": "登录",
+        "pkgAccount/register/register": "注册账号",
+        "pkgAccount/registration_records/registration_records": "注册记录",
+        "pkgBooking/book/book": "预订确认",
+        "pkgBooking/book_viewing/book_viewing": "预约看房",
+        "pkgBooking/booking_detail/booking_detail": "预订详情",
+        "pkgBooking/booking_list/booking_list": "预订记录",
+        "pkgBooking/pay/pay": "在线支付",
+        "pkgExplore/download/download": "资料图库",
+        "pkgExplore/filter/filter": "数据筛选",
+        "pkgExplore/room_detail/room_detail": "房型详情",
+        "pkgExplore/sign/sign": "签到打卡",
+        "pkgExplore/store_detail/store_detail": "小区详情",
+        "pkgExplore/vr_preview/vr_preview": "VR看房",
+        "pkgService/application_detail/application_detail": "申请详情",
+        "pkgService/contract_detail/contract_detail": "合同详情",
+        "pkgService/contract_sign/contract_sign": "合同签约",
+        "pkgService/device_control/device_control": "设备控制",
+        "pkgService/message_detail/message_detail": "消息详情",
+        "pkgService/my_application/my_application": "我的申请",
+        "pkgService/my_contract/my_contract": "我的合同",
+        "pkgService/service_stub/service_stub": "业务办理",
+        "pkgService/smart_control/smart_control": "智能控制",
+        "pkgService/submit_request/submit_request": "我要提交",
+        "pkgService/utility_recharge/utility_recharge": "水电充值"
+      }
+    },
+    pages: {
+      index: {
+        component: {
+          MessageCenterTab: {
+            acknowledged: "我知道了",
+            butler: "管家消息",
+            checkResultDefault: "检查结果",
+            checkResultFix: "需整改",
+            checkResultNormal: "正常",
+            checkResultReview: "待复核",
+            checkStatusDefault: "状态待定",
+            checkStatusDone: "已完成",
+            checkStatusPending: "待确认",
+            checkStatusProcessing: "处理中",
+            checkTypeCheckout: "退房检查",
+            checkTypeDefault: "检查记录",
+            checkTypeRoutine: "日常检查",
+            checkTypeSpecial: "专项检查",
+            checkerLabel: "检查人：",
+            compensationLabel: "赔付金额：",
+            emptyDesc: "系统通知和巡查提醒会在这里显示。",
+            emptyTitle: "暂无消息",
+            inspectionChecker: "检查人",
+            inspectionCountUnit: "条提醒",
+            inspectionDesc: "根据当前入住订单自动汇总巡查提醒记录",
+            inspectionItemPrefix: "检查项 {index}",
+            inspectionItemsTitle: "检查项明细",
+            inspectionNeedManualHandle: "巡查提醒需单独查看处理",
+            inspectionRemarkTitle: "检查备注",
+            inspectionResult: "检查结果",
+            inspectionStatus: "当前状态",
+            inspectionSummaryFallback: "巡查提醒，请查看详情",
+            inspectionTitle: "巡查提醒",
+            loadingDesc: "正在同步系统通知和巡查提醒，请稍候。",
+            loadingTitle: "消息加载中",
+            markNotificationRead: "通知已读",
+            noUnreadNotification: "暂无未读通知",
+            notificationFallbackDesc: "您有一条新的系统消息",
+            notificationFallbackTitle: "系统通知",
+            payment: "缴费账单",
+            problemLabel: "问题：",
+            recentMessages: "近期消息",
+            remarkLabel: "备注：",
+            remoteMarkedRead: "系统通知已全部标记为已读",
+            remoteMarkedReadWithInspection: "系统通知已标记，巡查提醒需单独处理",
+            subtitle: "你有 {count} 条未读消息待处理",
+            system: "系统通知",
+            title: "消息中心",
+            unassignedRoom: "未关联房间",
+            viewDetail: "查看详情"
+          },
+          MyApplicationTab: {
+            agreeAndPay: "同意并支付",
+            apartmentLabel: "所属公寓",
+            cancelOrder: "取消订单",
+            cancelOrderContent: "取消后将关闭当前未支付的定金订单，是否继续？",
+            cancelOrderFailed: "取消订单失败",
+            cancelOrderLoading: "取消中...",
+            cancelOrderSuccess: "订单已取消",
+            cancelOrderTitle: "取消订单",
+            continuePay: "继续支付",
+            dateRangeJoiner: " 至 ",
+            depositNoticeTitle: "租房定金须知",
+            emptyDesc: "您还没有提交任何申请，去选房后可发起入住申请或预约看房。",
+            emptyTitle: "暂无申请记录",
+            goSelectRoom: "去选房",
+            leaseTermLabel: "预计租期",
+            loadError: "申请记录加载失败",
+            loadingDesc: "正在同步您的入住申请记录，请稍候。",
+            missingApplicationCode: "申请编号缺失",
+            missingBillCode: "申请单编号缺失",
+            noMore: "没有更多申请了",
+            occupantLabel: "入住人",
+            pageDesc: "您的入住和预约看房申请记录",
+            pageTitle: "我的申请",
+            payDeposit: "支付定金",
+            pendingPaymentAmountLabel: "订单金额",
+            pendingPaymentDescLabel: "支付说明",
+            pendingPaymentExpireLabel: "剩余支付时间",
+            pendingPaymentExpired: "已失效",
+            pendingPaymentOrderNoLabel: "支付单号",
+            pendingPaymentTitle: "未完成支付订单",
+            pullUpMore: "上拉加载更多",
+            refresh: "刷新状态",
+            refreshEmptySuccess: "未查到申请单，已同步预订单",
+            refreshSuccess: "申请状态已刷新",
+            refreshing: "刷新中...",
+            remarkLabel: "补充说明",
+            scrollToRead: "请滑动阅读至底部",
+            statusApproved: "已通过",
+            statusFinished: "已结束",
+            statusPending: "待审核",
+            statusPendingPayment: "请支付定金",
+            statusProcessing: "处理中",
+            statusRejected: "已拒绝",
+            statusReminderTitle: "当前进度提醒",
+            statusWaitingRoomAssign: "等待预订中心分配房间",
+            stayApplicationTitle: "入住申请",
+            submittedAtLabel: "提交时间",
+            toolbarSummary: "共 {total} 条申请",
+            viewingApplicationTitle: "预约看房申请",
+            viewingTimeLabel: "预约时间"
+          },
+          ProfileCenterTab: {
+            activities: "参与活动",
+            application: "入住申请",
+            applicationStatus: "申请进度",
+            bill: "账单",
+            bookingList: "预订记录",
+            bookingNo: "预定单号",
+            bookingPlaceholder: "支付后生成的预定单会显示在这里",
+            bookingProgressDesc: "支付完成后会进入审核，审核通过后分配管家并等待分房号。",
+            bookingStatusTitle: "预订审核进度",
+            clickToLogin: "点击登录",
+            comingSoon: "建设中",
+            comingSoonDesc: "{title} 功能正在建设中，后续开放后会在这里提供正式入口和数据。",
+            completeFormBeforeSubmit: "请完善表单信息后提交。",
+            contact: "联系",
+            contract: "我的合同",
+            contractPendingDesc: "您当前有待签署合同，请尽快查看并完成签约。",
+            contractPendingTag: "待签约",
+            contractStatusTitle: "合同状态",
+            coreServices: "我的服务",
+            daysIn: "入住天数",
+            done: "已完成",
+            edit: "编辑资料",
+            exclusiveButler: "专属管家",
+            guest: "游客",
+            languageSwitch: "语言切换",
+            languageToggleLabel: "EN",
+            logout: "退出登录",
+            logoutConfirmContent: "确定要退出登录吗？",
+            logoutConfirmTitle: "提示",
+            logoutSuccess: "已退出",
+            notSubmittedYet: "暂未提交注册申请",
+            onlineService: "24小时在线服务",
+            pendingCountText: "待签合同",
+            points: "积分",
+            registrationApprovedDesc: "注册申请已通过，可前往登录",
+            registrationEmptyDesc: "暂未提交注册申请",
+            registrationPendingDesc: "注册申请审核中，审批通过后才可登录",
+            registrationRecordGuestDesc: "未登录也可查看当前微信账号提交的注册申请记录。",
+            registrationRecordSubmittedDesc: "当前微信账号已提交注册申请，可查看历史记录与审批状态。",
+            registrationRecordTitle: "注册记录",
+            registrationRejectedDesc: "注册申请已驳回，请查看原因后重新提交",
+            registrationStatusTitle: "注册申请进度",
+            remind: "催一下",
+            settings: "偏好设置",
+            statusApproved: "已通过",
+            statusPending: "审核中",
+            statusRejected: "已拒绝",
+            submitRequest: "提交申请",
+            userFallback: "用户",
+            viewDetail: "查看详情",
+            viewNow: "立即查看"
+          },
+          SelectRoomTab: {
+            all: "全部",
+            allAreas: "全部区域",
+            allTags: "全部标签",
+            apartmentDetail: "公寓详情",
+            areaStatus: "区域状态",
+            areaStatusDesc: "暂无符合筛选条件的区域",
+            areaUnavailableTitle: "该区域暂未开放",
+            bookViewing: "预约看房",
+            defaultAreaAddressPrefix: "位于",
+            distancePlaceholder: "附近",
+            emptyAreaDesc: "当前筛选条件下暂无可用房源",
+            emptyAreaTitle: "暂无匹配房源",
+            emptyBannerDesc: "暂无可展示的轮播图",
+            emptyBannerTitle: "暂无轮播图",
+            learnMore: "了解更多",
+            loadingAreaStatus: "区域加载中",
+            pricePending: "待定",
+            priceUnit: "元/月起",
+            searchApartment: "搜索区域、公寓或房型",
+            shareTitle: "绿居公寓 - 国际化青年社区",
+            sortDefault: "默认排序",
+            sortNameAsc: "名称排序",
+            sortPriceAsc: "价格从低到高",
+            sortPriceDesc: "价格从高到低",
+            tagFilter: "标签筛选",
+            viewCommunity: "查看详情"
+          },
+          StayServiceTab: {
+            activeStatus: "使用中",
+            addSmartDevice: "添加智能设备",
+            bedPrefix: "床位 {label}",
+            billCount: "账单数量",
+            billEmpty: "暂无待支付账单",
+            billRecordFallback: "账单记录",
+            billType: "账单类型",
+            billUnit: "笔",
+            bookedRoomType: "预定房型",
+            bookingInfo: "预定信息",
+            bookingPendingDesc: "定金已支付，预定单正在审批流中。审批通过后将分配管家并等待分房号。",
+            bookingPendingNote: "订单已提交，管家审核通过后会同步更多入住信息。",
+            bookingPendingTitle: "您的预订正在审核中",
+            butler: "专属社区管家",
+            callNow: "拨打",
+            checkinStep: "办理入住",
+            communityEvent: "近期活动",
+            completeFormBeforeSubmit: "请完善表单信息后提交。",
+            contactPhonePrefix: "联系电话 ",
+            contractPendingNote: "检测到待签合同后，流程将停留在签订合同节点，请先完成签名。",
+            contractRoom: "合同房型",
+            contractStep: "签订合同",
+            controllable: "可控制",
+            currentStay: "当前入住房间",
+            deviceFallback: "设备 {index}",
+            goSelectRoom: "去选房",
+            joinEvent: "立即报名",
+            lastCreateTime: "最近生成",
+            leaseTerm: "租期",
+            loadingButlerInfo: "正在同步管家信息...",
+            loadingManagerInfo: "正在加载管家信息",
+            loadingShort: "同步中",
+            managerContactSummary: "当前区域共有 {count} 位管家可联系",
+            managerFallback: "社区管家",
+            managerInitialFallback: "管",
+            managerWechatCopied: "管家微信已复制",
+            multiButlerName: "{name} 等{count}位管家",
+            myBill: "本月账单",
+            noButlerInfo: "暂未获取到管家信息",
+            noContactPhone: "暂无联系电话",
+            noManagerWechat: "暂无管家微信",
+            notCheckedInDesc: "长租公寓为海外青年提供高端社区服务\n请先前往选房大厅挑选心仪套间",
+            notCheckedInTitle: "您还没有在租房间",
+            onDutyCount: "{count}人值班",
+            online: "当前在线 · 响应时间 < 5分钟",
+            onlineSingle: "1人在线",
+            paidOff: "已结清",
+            payBill: "去支付",
+            pendingAssignment: "待审核分配",
+            pendingContractFound: "发现待签合同",
+            pendingSync: "待同步",
+            primaryButlerTag: "主责",
+            publicService: "社区设施预约",
+            refreshFailed: "刷新失败，请稍后重试",
+            refreshStatus: "刷新状态",
+            refreshing: "刷新中...",
+            reviewStep: "管家审核",
+            roomDeviceUnconfigured: "房间智能设备未配置",
+            signContract: "去签约",
+            signContractDesc: "系统已生成待签合同，当前流程已进入签订合同阶段，完成签约后即可继续后续入住流程。",
+            signContractNow: "请尽快签订合同",
+            smartAvailableAfterCheckin: "入住后可使用智能设备",
+            smartControl: "全屋智能",
+            smartDeviceConnected: "已接入 {count} 台智能设备",
+            smartDeviceEmpty: "当前房间暂无智能设备",
+            smartDeviceLoadFailed: "智能设备加载失败",
+            smartDeviceSyncFailed: "智能设备同步失败",
+            statusUpdated: "状态已刷新",
+            stayService: "住中申请",
+            submitBookingStep: "提交预定",
+            submitRequest: "提交申请",
+            syncingSmartDevices: "正在同步智能设备...",
+            title: "我的入住",
+            unpaid: "待支付",
+            viewAll: "全部",
+            viewBill: "查看账单"
+          }
+        },
+        index: {
+          loadingBrand: "绿居公寓",
+          shareTitle: "绿居公寓 - 国际化青年社区",
+          tabMessageCenter: "消 息",
+          tabMyApplication: "申请单",
+          tabProfileCenter: "我 的",
+          tabSelectRoom: "选 房",
+          tabStayService: "入 住"
+        }
+      }
+    },
+    pkgAccount: {
+      auth_result: {
+        auth_result: {
+          approvedPleaseLogin: "审批已通过，请登录",
+          descApproved: "您的注册申请已审批通过，现在可以前往登录。",
+          descPendingDefault: "当前申请正在审批中，审批通过前无法登录。",
+          descPendingRecords: "当前展示的是该申请单的审批状态，可下拉或点击按钮刷新最新结果。",
+          descRejectedDefault: "请根据驳回原因修改信息后重新提交注册申请。",
+          descRejectedRecords: "当前展示的是该申请单的审批结果，请根据驳回原因修改信息后重新提交注册申请。",
+          descUnsubmitted: "请先提交注册申请单，审批通过后才算注册成功。",
+          fallbackNone: "-",
+          fetchStatusFailed: "获取审批状态失败",
+          goLogin: "去登录",
+          labelAccount: "注册账号",
+          labelCertificateNo: "证件号",
+          labelIdentityType: "人员类型",
+          labelName: "姓名",
+          latestDetailMissing: "未查到最新详情，已展示列表记录",
+          navTitle: "注册申请结果",
+          refreshStatus: "刷新审批状态",
+          refreshing: "刷新中...",
+          remarkApproved: "通过备注",
+          remarkPending: "审批备注",
+          remarkRejected: "驳回原因",
+          resubmitRegister: "重新提交注册申请",
+          roleDomestic: "中国籍",
+          roleForeign: "外籍人员",
+          statusApproved: "已通过",
+          statusPending: "审核中",
+          statusRejected: "已驳回",
+          submittedInfoTitle: "已提交信息",
+          titleApproved: "注册审批已通过",
+          titlePending: "注册申请已提交",
+          titleRejected: "注册审批未通过",
+          titleUnsubmitted: "您还未提交注册申请",
+          unsubmitted: "未提交",
+          viewRegistrationRecords: "查看注册记录"
+        }
+      },
+      login: {
+        login: {
+          accountLabel: "账号 / 邮箱",
+          accountPlaceholder: "请输入账号或邮箱",
+          goRegister: "去注册",
+          loading: "加载中...",
+          loginFailed: "登录失败，请稍后重试",
+          loginSuccess: "登录成功",
+          noAccount: "还没有账号？",
+          pageDesc: "登录绿居公寓，探索您的国际化青年社区",
+          pageTitle: "欢迎回来",
+          passwordLabel: "密码",
+          passwordPlaceholder: "请输入密码",
+          submitLogin: "立即登录",
+          submitting: "登录中...",
+          validateRequired: "请输入账号和密码",
+          viewRegistrationRecords: "查看注册记录",
+          viewRegistrationRecordsDesc: "未登录也可查看当前微信账号提交的注册申请记录"
+        }
+      },
+      register: {
+        register: {
+          accountLabel: "登录账号",
+          accountPlaceholder: "请输入登录账号",
+          accountSection: "账号信息",
+          attachmentNotImage: "当前附件不是图片",
+          basicSection: "基础实名信息",
+          chinaText: "中国",
+          countryFixedText: "中国籍固定",
+          countryLabel: "国籍",
+          countryLoadFailed: "国家列表加载失败",
+          countryPlaceholder: "请选择国籍",
+          dictLoadFailed: "字典加载失败，稍后可重试",
+          dietaryLabel: "饮食习惯",
+          dietaryPlaceholder: "请选择饮食习惯",
+          domesticIdentity: "中国籍",
+          draftTipDefault: "未完成内容会自动保存，可随时返回继续填写",
+          draftTipSaved: "当前填写内容已自动保存",
+          emailCodeLabel: "邮箱验证码",
+          emailCodePlaceholder: "请输入邮箱验证码",
+          emailLabel: "邮箱",
+          emailPlaceholder: "请输入邮箱",
+          foreignIdentity: "外籍人员",
+          genderLabel: "性别",
+          genderMale: "男",
+          genderFemale: "女",
+          goLogin: "去登录",
+          hangzhouPropertyLabel: "杭州有无房产",
+          hasAccount: "已有账号？",
+          hobbyLabel: "兴趣爱好",
+          hobbyPlaceholder: "请选择兴趣爱好",
+          idCardBackAttachmentLabel: "身份证反面附件",
+          idCardFrontAttachmentLabel: "身份证正面附件",
+          idCardLabel: "身份证号",
+          idCardPlaceholder: "请输入身份证号",
+          imageUploadedTip: "已上传图片，可点击查看大图",
+          loading: "加载中...",
+          nameLabel: "姓名",
+          namePlaceholder: "请输入真实姓名",
+          navTitle: "注册账号",
+          noSelectableCountry: "当前暂无可选国家",
+          noSelectableOptions: "当前暂无可选项",
+          noText: "无",
+          pageDesc: "账号信息和实名认证资料需要一起填写完成，提交的是注册申请单，审批通过后才算注册成功。",
+          pageTitle: "注册并提交实名资料",
+          passportAttachmentLabel: "护照附件",
+          passportImageOnlyTip: "护照附件仅支持图片，请重新上传",
+          passportExpiryLabel: "护照到期时间",
+          passportLabel: "护照号",
+          passportPlaceholder: "请输入护照号",
+          passwordLabel: "登录密码",
+          passwordPlaceholder: "请输入 6 位及以上密码",
+          phoneLabel: "手机号",
+          phonePlaceholder: "请输入手机号",
+          preferenceSection: "偏好信息",
+          profileSection: "认证档案",
+          religionLabel: "宗教信仰",
+          religionPlaceholder: "请选择宗教信仰",
+          restoreDraftCancel: "不用",
+          restoreDraftConfirm: "填入",
+          restoreDraftContent: "是否填入上次未完成或提交失败时缓存的注册信息？",
+          restoreDraftSuccess: "已填入上次失败数据",
+          restoreDraftTitle: "发现未完成的数据",
+          reupload: "重新上传",
+          schoolLabel: "就读学校",
+          schoolPlaceholder: "请输入就读学校（选填）",
+          selectDate: "请选择日期",
+          submitFailed: "提交失败，请稍后重试",
+          submitPending: "申请已提交，待审批",
+          submitRegister: "提交注册申请",
+          submitting: "提交中...",
+          uploadFailed: "上传失败，请重试",
+          uploadIdBack: "点击上传身份证反面",
+          uploadIdFront: "点击上传身份证正面",
+          uploadImageOption: "上传图片",
+          uploadPassport: "点击上传护照图片",
+          uploadSuccess: "上传成功",
+          uploading: "上传中...",
+          validateEmail: "请输入正确的邮箱地址",
+          validateIdCard: "请填写身份证号",
+          validateIdCardAttachments: "请上传身份证正反面附件",
+          validateIdentityBasic: "请完善性别、手机号和国籍",
+          validatePassportAttachment: "请上传护照图片",
+          validatePassportAttachmentImage: "护照附件仅支持图片格式",
+          validatePassportBasic: "请填写护照号和护照到期时间",
+          validatePasswordLength: "登录密码至少 6 位",
+          validatePhone: "请输入正确的手机号",
+          validateProfile: "请完善工作单位和杭州房产情况",
+          validateRequiredBasic: "请先填写账号、密码、邮箱和姓名",
+          viewImage: "查看图片",
+          viewRegistrationRecords: "查看注册记录",
+          viewRegistrationRecordsDesc: "如果当前微信账号已提交过申请，可直接查看历史记录和审批状态",
+          workUnitLabel: "工作单位",
+          workUnitPlaceholder: "请输入工作单位",
+          yesText: "有"
+        }
+      },
+      registration_records: {
+        accountLabel: "注册账号",
+        approvalRemarkLabel: "审批意见",
+        approvedAtLabel: "审批时间",
+        emptyDesc: "当前微信账号还没有提交过人员注册申请。",
+        emptyTitle: "暂无注册记录",
+        goRegister: "去提交注册申请",
+        idNumberLabel: "证件号",
+        loadError: "注册记录加载失败",
+        loadingDesc: "正在同步当前微信账号提交的注册申请记录，请稍候。",
+        loadingMore: "加载中...",
+        loadingTitle: "注册记录加载中",
+        navTitle: "注册记录",
+        noMore: "没有更多记录了",
+        phoneLabel: "手机号",
+        providerUnavailableDesc: "请在微信小程序中打开后，再查看当前微信账号提交的注册记录。",
+        providerUnavailableTitle: "当前无法获取微信身份",
+        pullUpMore: "上拉加载更多",
+        registrationFallbackTitle: "人员注册申请",
+        rejectReasonLabel: "驳回原因",
+        statusAll: "全部",
+        statusApproved: "已通过",
+        statusPending: "审核中",
+        statusProcessing: "处理中",
+        statusRejected: "已驳回",
+        submittedAtLabel: "提交时间"
+      }
+    },
+    pkgBooking: {
+      book: {
+        book: {
+          bookingFor: "你正在预约",
+          bookingStatus: "当前状态",
+          checkInDate: "填写预订时间",
+          checkInDesc: "支付后会先生成预定单并进入审核，不会直接占用房间资源。",
+          deposit: "定金",
+          endDate: "离开日期 (Check-out)",
+          nightUnit: "晚",
+          pendingPayment: "待支付定金",
+          roomTypeLabel: "房型：",
+          selectDate: "请选择日期",
+          startDate: "入住日期 (Check-in)",
+          stayNights: "入住晚数",
+          submitOrder: "进入支付页",
+          title: "预订确认"
+        }
+      },
+      book_viewing: {
+        book_viewing: {
+          backTitle: "返回",
+          budgetLabel: "租金预算 (元/月)",
+          budgetPlaceholder: "请输入您的心理价位",
+          defaultInfoDesc: "专属管家为您提供一对一带看服务",
+          duration1: "1-3个月",
+          duration2: "4-6个月",
+          duration3: "7-9个月",
+          duration4: "10-12个月",
+          duration5: "1年以上",
+          durationLabel: "预计租住时长",
+          navTitle: "预约现场带看",
+          remarkArea: "意向区域：{area}",
+          remarkBudget: "租金预算：{budget} 元/月",
+          remarkDuration: "预计租住时长：{duration}",
+          remarkPayMethod: "支付方式：{payMethod}",
+          remarkRoomType: "意向房型：{roomType}",
+          remarkSource: "当前来源：{room}",
+          remarkTail: "备注：请宿管确认带看安排；若带看完成并锁定房号，可转为预定单通知租客支付。",
+          remarkTime: "看房时间：{date} {time}",
+          remarkTitle: "预约看房申请",
+          remarkWorkplace: "工作/通勤地点：{workplace}",
+          rentalNeeds: "您的租住需求",
+          rentalNeedsDesc: "帮助管家更好地为您推荐房源",
+          selectDurationRequired: "请选择预计租住时长",
+          selectTimeRequired: "请选择看房时间段",
+          selectViewingTime: "选择看房时间",
+          selectViewingTimeDesc: "请选择您方便的时间段",
+          submitBooking: "提交预约",
+          submitFailed: "预约提交失败",
+          submitSuccessContent: "您的预约看房申请已提交。\n系统会自动转发给对应区域有房间权限的宿管，宿管确认带看后可直接完结订单，或选定房型房号后转为预定单发送给租客支付。",
+          submitSuccessTitle: "预约成功",
+          submitting: "提交中...",
+          today: "今天",
+          tomorrow: "明天",
+          week0: "周日",
+          week1: "周一",
+          week2: "周二",
+          week3: "周三",
+          week4: "周四",
+          week5: "周五",
+          week6: "周六",
+          workplaceLabel: "工作/通勤地点",
+          workplacePlaceholder: "请输入主要通勤地点"
+        }
+      },
+      booking_detail: {
+        booking_detail: {
+          areaLabel: "所属区域",
+          buildingFloorLabel: "楼栋楼层",
+          cachedDetailShown: "网络异常，已展示最近同步详情",
+          dateRangeJoiner: " 至 ",
+          emptyDesc: "当前暂无可查看的预订详情，请先前往预订记录确认订单。",
+          emptyTitle: "暂无预订记录",
+          flowStep1: "1. 已支付，等待角色审批",
+          flowStep2: "2. 审批通过，等待分配管家",
+          flowStep3: "3. 已分配管家，等待分配房号",
+          flowTitle: "当前流程",
+          loadFailed: "预订详情加载失败",
+          loadingDesc: "正在同步该预订的真实详情，请稍候。",
+          loadingTitle: "订单加载中",
+          navTitle: "预订详情",
+          orderNoLabel: "预定单号",
+          rejectReasonTitle: "驳回原因",
+          roomNoLabel: "房间号",
+          roomTypeLabel: "风格房型",
+          stayDateLabel: "入住时间",
+          submittedAtLabel: "提交时间"
+        }
+      },
+      booking_list: {
+        booking_list: {
+          bookingFallbackTitle: "房源预订",
+          buildingFloorLabel: "楼栋楼层",
+          cachedListShown: "网络异常，已展示最近同步记录",
+          dateRangeJoiner: " 至 ",
+          emptyDesc: "当前暂无预订记录，完成预订后会在这里展示。",
+          emptyTitle: "暂无预订记录",
+          goSelectRoom: "去选房",
+          loadFailed: "预订记录加载失败",
+          loadingDesc: "正在同步您的真实预订记录，请稍候。",
+          loadingTitle: "订单加载中",
+          navTitle: "预订记录",
+          stayDateLabel: "入住时间",
+          submittedAtLabel: "提交时间"
+        }
+      },
+      pay: {
+        pay: {
+          billTo: "收款方",
+          bookingPeriod: "预订时间",
+          company: "绿居物业管理有限公司",
+          fallbackAction: "改为提交入住申请",
+          fallbackDesc: "当前版本还未接通真实定金支付。你可以先改走已接好的入住申请提交流程，后续由工作人员跟进。",
+          fallbackNavigateDesc: "支付接口暂未接入，先提交入住申请，由工作人员继续跟进。",
+          fallbackNavigateTitle: "入住申请",
+          fallbackTitle: "支付接口暂未接入",
+          laterAction: "我知道了",
+          location: "楼栋位置",
+          nightUnit: "晚",
+          payNow: "确认支付并提交预订",
+          paying: "支付中...",
+          paymentAmount: "应付定金",
+          paymentMethod: "选择支付方式",
+          pendingTitle: "支付接口待接入",
+          roomType: "房源风格",
+          roomTypeNameLabel: "房型",
+          stayNights: "入住晚数",
+          title: "支付定金",
+          toLabel: "至",
+          total: "合计"
+        }
+      }
+    },
+    pkgExplore: {
+      download: {
+        download: {
+          galleryImage: "游戏攻略图",
+          galleryImageLong: "游戏攻略图游戏攻略图游戏攻略图",
+          navTitle: "资料图库",
+          searchButton: "搜 索",
+          searchPlaceholder: "请输入搜索关键词"
+        }
+      },
+      filter: {
+        filter: {
+          comprehensiveLabel: "综合",
+          navTitle: "应用专区",
+          priceLabel: "价格",
+          product1: "蛋仔派对",
+          product2: "保卫萝卜",
+          product3: "旅行青蛙",
+          product4: "辐射避难所",
+          product5: "王国保卫战",
+          product6: "崩坏 · 星穹铁道",
+          product7: "纪念碑谷",
+          purchasedSuffix: "人已购",
+          salesLabel: "销量",
+          sortDefault: "默认",
+          typeLabel: "类型"
+        }
+      },
+      sign: {
+        sign: {
+          checkInNow: "立即签到",
+          checkInRewardHint: "坚持每天连续签到可以获得多重奖励哦",
+          checkInSuccess: "签到成功",
+          checkedInFor: "已连续签到",
+          continuousCheckIn: "连续签到",
+          daysAndEarned: "天，获得",
+          daysRewardHint: "天可获得额外奖励哦！",
+          goComplete: "去完成",
+          more: "更多",
+          notice1: "恭喜 付*其 连续7天签到，获得 300积分 奖励",
+          notice2: "恭喜 徐*圆 连续7天签到，获得 300积分 奖励",
+          notice3: "恭喜 蔡*东 连续7天签到，获得 300积分 奖励",
+          pointsRecord: "积分记录",
+          pointsUnit: "积分",
+          taskDesc: "抓住那只猪吖",
+          taskName: "任务名称",
+          taskSectionTitle: "做任务领金币",
+          warmTip: "温馨提示：",
+          warmTipDesc: "每日签到可获得10积分奖励，连续完成7天签到可能获得额外奖励，连续签到满7天后将会重置签到记录。"
+        }
+      },
+      store_detail: {
+        store_detail: {
+          apartmentName: "公寓详情",
+          collapse: "收起",
+          contactManager: "联系管家",
+          expandAll: "展开全部",
+          loading: "加载中...",
+          loadingManagerInfo: "正在加载管家信息",
+          navigate: "导航",
+          noAddress: "暂无地址",
+          noImage: "暂无图片",
+          noLocation: "暂无位置信息",
+          noServicePhone: "暂无联系电话",
+          parseStoreDataFailed: "解析小区数据失败",
+          phoneConsult: "电话咨询",
+          selectContact: "选择联系人",
+          pricePending: "待定",
+          priceUnit: "/月",
+          roomSectionTitle: "在租房型（{count}）",
+          sectionTitle: "配套设施",
+          share: "分享",
+          shareTitle: "小区详情",
+          storeIntro: "小区简介",
+          viewDetails: "查看详情"
+        }
+      },
+      room_detail: {
+        room_detail: {
+          addressHint: "查看地图位置",
+          allRoomsLoginContent: "请先登录后再预订该房间。",
+          apartmentName: "公寓",
+          applyStay: "申请入住",
+          applyViewing: "预约看房",
+          areaLabel: "所属区域",
+          basicInfo: "基础信息",
+          bookRoom: "立即预订",
+          bookingInfo: "预订信息",
+          bookingRules: "预订规则",
+          buildingLabel: "楼栋",
+          collapse: "收起",
+          englishNameLabel: "英文名称",
+          expandAll: "展开全部",
+          floorLabel: "楼层",
+          imageCount: "{count} 张图片",
+          imageTab: "图片",
+          loginTitle: "请先登录",
+          navigate: "导航",
+          needApproval: "需审核",
+          noAddress: "暂无地址",
+          noApprovalNeeded: "无需审核",
+          noImage: "暂无图片",
+          noLocation: "暂无位置信息",
+          noPreviewImage: "暂无预览图片",
+          navDetail: "房型详情",
+          orientationLabel: "朝向",
+          payMethodLabel: "支付方式",
+          payMethodPrefix: "支付方式：",
+          priceLabel: "价格",
+          pricePending: "待定",
+          pricePrefix: "价格：",
+          priceUnit: "/月",
+          roomCodeLabel: "房号",
+          roomDesc: "房间介绍",
+          roomTypeApplyLoginContent: "请先登录后再提交该房型的看房申请。",
+          roomTypeCodePrefix: "房型编码：",
+          roomTypeDesc: "房型介绍",
+          roomTypeFallback: "房型",
+          roomTypeLabel: "房型",
+          roomTypeNameLabel: "房型名称",
+          roomSectionTitle: "房间配置",
+          sectionTitle: "房间配置",
+          sectionSubtitle: "{count} 项配置",
+          share: "分享",
+          shareTitle: "房型详情",
+          statusLabel: "状态",
+          stayApplicationSuffix: "入住申请",
+          stayLoginContent: "请先登录后再提交入住申请。",
+          swipeUpHint: "上滑查看详情",
+          unitLabel: "单元",
+          viewLargeImage: "查看大图",
+          viewLargeImageDesc: "点击查看当前图片的大图预览。",
+          vrPreview: "VR预览",
+          vrPreviewDesc: "切换到沉浸式看房模式。",
+          vrTab: "VR",
+          vrViewingTitle: "VR看房"
+        }
+      },
+      vr_preview: {
+        vr_preview: {
+          defaultTitle: "VR看房",
+          emptyPreview: "暂无VR预览画面",
+          modeChip: "VR预览模式",
+          noAsset: "暂无VR预览素材",
+          placeholderSubtitle: "当前房型已保留 VR 入口，后续可继续接入更完整的沉浸式资源。",
+          posterSubtitle: "当前展示 VR 预览海报，可点击查看大图。",
+          viewFullscreen: "查看全屏预览",
+          waitingAsset: "等待素材接入"
+        }
+      }
+    },
+    pkgService: {
+      application_detail: {
+        application_detail: {
+          apartmentLabel: "所属公寓",
+          applicantLabel: "申请人",
+          applicationCodeLabel: "申请编号",
+          applicationRemarkTitle: "申请说明",
+          applicationTypeLabel: "申请类型",
+          appliedRoomTypeLabel: "申请房型",
+          backList: "返回列表",
+          basicInfoTitle: "基础信息",
+          budgetKey: "租金预算",
+          codeCopied: "申请编号已复制",
+          commuteKey: "工作/通勤地点",
+          copy: "复制",
+          dateRangeJoiner: " 至 ",
+          emptyRemark: "暂无补充说明",
+          intendedRoomTypeLabel: "意向房型",
+          leaseDurationKey: "预计租住时长",
+          leaseTermLabel: "预计租期",
+          missingBillCode: "申请单编号缺失",
+          navTitle: "申请详情",
+          paymentMethodKey: "支付方式",
+          preferredAreaKey: "意向区域",
+          preferredRoomTypeKey: "意向房型",
+          remarkTitle: "补充说明",
+          statusApproved: "已通过",
+          statusFinished: "已结束",
+          statusLabel: "当前状态",
+          statusPending: "待审核",
+          statusPendingPayment: "请支付定金",
+          statusProcessing: "处理中",
+          statusRejected: "已拒绝",
+          statusReminderTitle: "当前进度提醒",
+          statusWaitingRoomAssign: "等待预订中心分配房间",
+          stayApplicationTitle: "入住申请",
+          stayApplicationType: "入住申请",
+          submittedAtLabel: "提交时间",
+          viewBill: "查看关联账单",
+          viewingApplicationTitle: "预约看房申请",
+          viewingApplicationType: "预约看房",
+          viewingInfoTitle: "带看信息",
+          viewingTimeKey: "看房时间",
+          viewingTimeLabel: "预约时间"
+        }
+      },
+      components: {
+        CurrentApplicationBillPanel: {
+          applicationNoPrefix: "申请单号：",
+          billInfoIncomplete: "账单信息不完整",
+          billLoadFailed: "账单加载失败",
+          billNoLabel: "账单号",
+          billPaymentDesc: "账单支付",
+          billRecordFallback: "账单记录",
+          buttonConfirming: "确认结果中...",
+          buttonLaunching: "拉起支付中...",
+          buttonPolling: "查询结果中({current}/{total})",
+          continuePayButton: "继续支付",
+          createTimeLabel: "创建时间",
+          currentPaymentLabel: "本次支付",
+          emptyApplicationDesc: "当前未找到可关联的申请单，请先前往“我的申请”选择具体申请后查看账单。",
+          emptyApplicationTitle: "暂无可查询申请单",
+          emptyPendingDesc: "当前申请单下没有查询到待支付账单，后续有新账单时会在这里展示。",
+          emptyPendingTitle: "暂无待支付账单",
+          goToMyApplication: "前往我的申请",
+          heroDescAutoResolve: "当前将优先读取最近申请单的编号来查询关联账单。",
+          heroDescResolved: "当前页面已按申请单编号查询其关联的待支付账单记录。",
+          heroTitle: "待支付账单",
+          loadingDesc: "正在同步您的待支付账单，请稍候。",
+          loadingTitle: "账单加载中",
+          paidAmountLabel: "已付金额",
+          paymentActionAcknowledge: "我知道了",
+          paymentCanceled: "已取消支付",
+          paymentDescFailed: "系统暂时未能确认支付成功，您可以查看提示后稍后重试。",
+          paymentDescLaunching: "系统正在调起微信支付，请在微信收银台中完成付款后返回。",
+          paymentDescPolling: "支付完成后，系统会自动向后台查询支付状态，无需手动刷新。",
+          paymentDescSuccess: "本次支付已同步完成，账单状态已更新。",
+          paymentFailedError: "支付失败",
+          paymentFailedHint: "暂未查询到支付成功结果，请稍后刷新账单确认。",
+          paymentHintLaunching: "已为您准备好支付信息，等待微信支付完成。",
+          paymentHintLaunchingToast: "正在唤起微信支付，请在微信内完成付款。",
+          paymentHintPaidWaiting: "已支付成功，正在等待后台确认账单状态。",
+          paymentHintPolling: "正在与后台核对支付状态，请稍候。",
+          paymentParamIncomplete: "微信支付参数不完整",
+          paymentProgressLabel: "结果确认进度",
+          paymentProgressWaiting: "等待支付完成",
+          paymentResultFailed: "后台返回支付失败",
+          paymentResultFailedRetry: "支付结果确认失败，请稍后刷新账单确认",
+          paymentResultPending: "后台仍在处理中",
+          paymentResultSuccess: "后台确认支付成功",
+          paymentStageDefault: "支付处理中",
+          paymentStageFailed: "支付未完成",
+          paymentStageLaunching: "正在唤起微信收银台",
+          paymentStagePolling: "正在同步支付结果",
+          paymentStageSuccess: "支付结果已确认",
+          paymentStatusPending: "处理中",
+          paymentSuccessAllDone: "支付结果已确认，当前申请单账单已全部完成。",
+          paymentSuccessPendingBills: "支付结果已确认，当前申请单仍有其他待支付账单。",
+          paymentTimeoutError: "支付结果确认超时，请稍后刷新账单确认",
+          paymentTipsDefault1: "支付成功后，系统可能需要几秒钟同步账单状态。",
+          paymentTipsDefault2: "请不要重复点击支付，也不要提前关闭当前页面。",
+          paymentTipsDefault3: "如果超时未完成，系统会自动再校验一次账单状态。",
+          paymentTipsFailed1: "若您已完成付款，请稍后刷新账单，避免重复支付。",
+          paymentTipsFailed2: "若微信侧已扣款但页面未更新，请联系管家或客服协助核实。",
+          paymentTipsFailed3: "若未扣款，可返回账单列表后重新发起支付。",
+          paymentTipsSuccess1: "若当前申请单还有其他待付账单，可继续在当前页完成支付。",
+          paymentTipsSuccess2: "若当前账单已全部支付完成，系统会自动返回首页。",
+          paymentTipsSuccess3: "支付记录同步可能略有延迟，刷新后即可看到最新状态。",
+          paymentTipsTitleDefault: "温馨提示",
+          paymentTipsTitleFailed: "处理建议",
+          paymentTipsTitleSuccess: "完成说明",
+          paymentTitleDefault: "支付处理中",
+          paymentTitleFailed: "支付结果确认失败",
+          paymentTitleLaunching: "请完成微信支付",
+          paymentTitlePolling: "正在确认是否支付成功",
+          paymentTitleSuccess: "支付成功",
+          pendingPaymentAmountLabel: "订单金额",
+          pendingPaymentChannelLabel: "支付渠道",
+          pendingPaymentDescLabel: "支付说明",
+          pendingPaymentExpireLabel: "剩余支付时间",
+          pendingPaymentExpired: "已失效",
+          pendingPaymentOrderNoLabel: "支付单号",
+          pendingPaymentTitle: "未完成支付订单",
+          pendingAmountLabel: "待支付总额",
+          pendingCountLabel: "待支付数量",
+          refundStatusLabel: "退款状态",
+          relatedBusinessNoLabel: "关联业务编号",
+          remainingAmountLabel: "待付金额",
+          remarkLabel: "备注",
+          resultLabel: "处理结果",
+          totalChargeLabel: "应收合计",
+          wechatCodeFailed: "获取微信登录凭证失败",
+          wechatPayButton: "微信支付"
+        }
+      },
+      contract_detail: {
+        contract_detail: {
+          contractNoLabel: "合同编号：",
+          emptyDesc: "页面未带入影像地址，且通过合同编号也未获取到可预览的合同内容。",
+          emptyTitle: "暂无合同内容",
+          imageModeChip: "A4 影像模式",
+          loadingDesc: "正在获取合同影像与正文，请稍候。",
+          loadingTitle: "合同加载中",
+          navTitle: "合同详情",
+          notAvailable: "未获取",
+          overviewTitle: "合同影像",
+          signedChip: "已签合同",
+          textModeChip: "正文预览模式",
+          zoomSupportedChip: "支持缩放"
+        }
+      },
+      contract_sign: {
+        contract_sign: {
+          back: "返回",
+          contractNoLabel: "合同编号：",
+          contractNoMissing: "缺少合同编号",
+          emptyDesc: "当前合同暂未返回可签约正文，请稍后再试。",
+          emptyTitle: "暂无合同正文",
+          footerTip: "签名前请确认您已完整阅读合同内容",
+          fullscreenPreview: "点击全屏查看",
+          fullscreenTitle: "合同全文",
+          loadingDesc: "正在获取合同正文，请稍候。",
+          loadingTitle: "合同加载中",
+          navTitle: "合同签约",
+          notAvailable: "未获取",
+          overviewMeta: "阅读合同正文后完成签名提交，签约结果会同步到我的合同。",
+          overviewTitle: "签约前确认",
+          signAction: "我已阅读并同意，去签名",
+          signFailed: "签约失败",
+          signSuccess: "签约成功",
+          signerMissing: "未获取到签名人姓名",
+          signingLoading: "签约提交中...",
+          submitting: "提交中...",
+          uploadFailed: "签名上传失败"
+        }
+      },
+      device_control: {
+        device_control: {
+          actionSuccess: "操作成功",
+          applySetting: "应用设置",
+          commandFailed: "指令下发失败",
+          commandSending: "指令下发中...",
+          controlPanel: "控制面板",
+          currentRoom: "当前房间",
+          curtainClose: "关闭",
+          curtainClosed: "窗帘已关闭",
+          curtainOpen: "打开",
+          curtainOpened: "窗帘已打开",
+          curtainPause: "暂停",
+          curtainPaused: "窗帘已暂停",
+          deviceClosed: "已关闭",
+          deviceDetail: "设备详情",
+          deviceEnabled: "已开启",
+          deviceIdMissing: "设备ID缺失",
+          deviceMissing: "设备信息缺失",
+          deviceOpened: "已打开",
+          functionCodeMissing: "功能编码缺失",
+          functionCount: "{count}项功能",
+          pendingTag: "待完善",
+          schemaApplied: "{name}参数已下发",
+          sliderLabel: "亮度 / 数值",
+          sliderUpdated: "滑块值已更新",
+          syncHint: "操作完成后会自动刷新设备状态",
+          unknownSchema: "未识别到参数模板",
+          unsupportedBoxText: "当前功能暂未开放使用，点击反馈",
+          unsupportedFunction: "{name}操作功能未完善"
+        }
+      },
+      message_detail: {
+        message_detail: {
+          actionButler: "去查看服务",
+          actionDefault: "继续前往业务页",
+          actionPayment: "去处理账单",
+          actionSystem: "前往相关页面",
+          backList: "返回消息页",
+          categoryButler: "管家消息",
+          categoryLabel: "消息分类",
+          categoryPayment: "缴费账单",
+          categorySystem: "系统通知",
+          codeCopied: "通知编号已复制",
+          codeLabel: "通知编码",
+          contentTitle: "通知内容",
+          copy: "复制",
+          emptyContent: "暂无详细内容",
+          expiredDesc: "当前消息详情已失效，请返回消息中心重新打开。",
+          expiredHint: "消息缓存已失效",
+          localSource: "本地业务消息",
+          messageFallbackTitle: "消息通知",
+          navTitle: "消息详情",
+          remoteSource: "系统通知接口",
+          sourceLabel: "消息来源",
+          statusLabel: "当前状态",
+          summaryTitle: "摘要"
+        }
+      },
+      my_application: {
+        my_application: {
+          apartmentLabel: "所属公寓",
+          dateRangeJoiner: " 至 ",
+          emptyDesc: "您还没有提交任何申请，去选房后可发起入住申请或预约看房。",
+          emptyTitle: "暂无申请记录",
+          goSelectRoom: "去选房",
+          leaseTermLabel: "预计租期",
+          loadError: "申请记录加载失败",
+          loadingDesc: "正在同步您的入住申请记录，请稍候。",
+          loadingMore: "加载中...",
+          loadingTitle: "申请列表加载中",
+          missingApplicationCode: "申请编号缺失",
+          missingBillCode: "申请单编号缺失",
+          navTitle: "我的申请",
+          noMore: "没有更多申请了",
+          occupantLabel: "入住人",
+          pullUpMore: "上拉加载更多",
+          refresh: "刷新状态",
+          refreshSuccess: "申请状态已刷新",
+          refreshing: "刷新中...",
+          remarkLabel: "补充说明",
+          statusAll: "全部",
+          statusApproved: "已通过",
+          statusFinished: "已结束",
+          statusPending: "待审核",
+          statusPendingPayment: "请支付定金",
+          statusProcessing: "处理中",
+          statusRejected: "已拒绝",
+          statusReminderTitle: "当前进度提醒",
+          statusWaitingRoomAssign: "等待预订中心分配房间",
+          stayApplicationTitle: "入住申请",
+          submittedAtLabel: "提交时间",
+          toolbarSummary: "共 {total} 条申请",
+          viewBill: "查看关联账单",
+          viewingApplicationTitle: "预约看房申请",
+          viewingTimeLabel: "预约时间"
+        }
+      },
+      my_contract: {
+        my_contract: {
+          actionSign: "去签约",
+          actionViewDetail: "查看详情",
+          contractPeriodLabel: "合同期限",
+          contractTitle: "住宿合同",
+          dateRangeJoiner: " 至 ",
+          displayMetricLabel: "当前展示",
+          emptyDesc: "切换筛选条件，或等待系统生成新的合同数据。",
+          emptyTitle: "暂无对应的合同记录",
+          loadingDesc: "正在同步您的合同数据，请稍候。",
+          loadingTitle: "合同记录加载中",
+          mySignatureLabel: "我的签名",
+          navTitle: "我的合同",
+          overviewSubtitle: "查看住宿合同、签约状态与有效期限",
+          overviewTitle: "合同概览",
+          pendingMetricLabel: "待签约/审批",
+          recordTipLabel: "记录说明",
+          relatedOrderLabel: "关联订单",
+          signStatusLabel: "签署状态",
+          signed: "已签名",
+          statusApproved: "已通过",
+          statusPending: "待审批",
+          statusProcessing: "处理中",
+          statusRejected: "已拒绝",
+          tabAll: "全部",
+          tabPending: "待签约",
+          tipApproved: "合同已生效，可查看签约结果。",
+          tipDefault: "请关注合同最新状态。",
+          tipNeedSign: "待您完成签名后进入审批流程。",
+          tipPending: "已提交签约信息，等待审批结果。",
+          tipRejected: "合同未通过审批，请联系管理员处理。",
+          unsigned: "待签名"
+        }
+      },
+      service_stub: {
+        service_stub: {
+          accessAssignDesc: "请在完成入住签约并录入人脸/实名信息后\n系统将自动为您分配通行权限",
+          accessCodeDesc: "可用于社区大门、单元门及电梯通行",
+          accessCodeTitle: "我的通行二维码",
+          authRecordTitle: "授权记录",
+          backHome: "返回首页",
+          backPrev: "返回上一页",
+          comingSoonTitle: "功能建设中",
+          coupon: "优惠券",
+          couponDesc: "租金水电抵扣",
+          currentStatusDesc: "该功能当前仍在建设中，暂未开放正式办理入口。你可以先返回上一页，或回到首页继续查看已开放功能。",
+          currentStatusTitle: "当前状态",
+          dailyPoints: "每日签到领积分",
+          defaultPageDesc: "该能力正在完善中，开放后会同步到个人中心的对应入口。",
+          defaultPageTitle: "业务办理",
+          goCheckIn: "去签到",
+          lockEmptyRecord: "暂无门锁操作记录",
+          lockNoAccessDesc: "您当前暂未分配智能门锁，或门锁暂未联网。\n入住后即可使用一键开门与临时密码下发功能。",
+          lockNoAccessTitle: "暂无门锁权限",
+          noAccessPermission: "未获取通行权限",
+          noteDesc: "后续接入真实能力后，这里会展示正式的业务入口、状态数据和办理记录。",
+          noteTitle: "说明",
+          oneTapUnlock: "一键开锁",
+          pointsAvailable: "当前可用积分",
+          pointsEmpty: "暂无积分明细",
+          pointsMall: "积分商城",
+          pointsMallDesc: "超值好物兑换",
+          pointsRecordTitle: "积分明细",
+          redeemRules: "兑换规则",
+          tempPassword: "临时密码",
+          visitorAccessAction: "临时访客授权",
+          visitorAccessTitle: "访客通行",
+          visitorEmpty: "暂无访客通行记录"
+        }
+      },
+      smart_control: {
+        smart_control: {
+          commandFailed: "指令下发失败",
+          currentRoom: "当前房间",
+          deviceOff: "已关闭",
+          deviceRunning: "运行中",
+          deviceSummary: "共 {count} 台设备，可进入详情页控制",
+          disabled: "已关闭",
+          emptyDesc: "当前房间未绑定智能设备",
+          emptyTitle: "暂无可控设备",
+          enabled: "已开启",
+          loadFailedTitle: "设备加载失败",
+          loadingDesc: "正在查询当前房间的可控设备...",
+          loadingShort: "加载中",
+          loadingTitle: "正在连接设备",
+          missingFunctionCode: "功能编码缺失",
+          missingRoomCode: "缺少房间编码",
+          navTitle: "全屋智能",
+          refreshStatus: "刷新状态",
+          requestFailed: "设备列表请求失败",
+          retry: "重新加载",
+          sending: "发送中...",
+          syncingStatus: "正在同步设备状态",
+          toolbarTip: "点击设备进入详情并下发控制指令",
+          unsupportedQuickControl: "设备暂不支持快捷控制",
+          unsupportedSwitch: "该设备不支持快捷开关"
+        }
+      },
+      submit_request: {
+        components: {
+          DateRangeSelector: {
+            dateDivider: "至",
+            endLabel: "预计离开",
+            endPlaceholder: "请选择离开日期",
+            startLabel: "预计入住",
+            startPlaceholder: "请选择入住日期"
+          },
+          TagSelector: {
+            emptyText: "暂无标签",
+            loadingText: "标签加载中..."
+          }
+        },
+        submit_request: {
+          applicationInfo: "申请信息",
+          applicationType: "申请类型",
+          applyRemarkPlaceholder: "请输入您的申请补充说明",
+          applyRoomType: "申请房型",
+          areaLabel: "所属区域",
+          currentRoom: "当前房间",
+          dateCannotBefore: "{endLabel}不能早于{startLabel}",
+          emptyHobbyTags: "暂无兴趣爱好标签",
+          emptyLifestyleTags: "暂无生活习惯标签",
+          expectedCheckin: "预计入住",
+          expectedCheckout: "预计离开",
+          hobbyLabel: "兴趣爱好",
+          leaseRange: "租期时间",
+          lifestyleLabel: "生活习惯",
+          paymentMethod: "支付方式",
+          referencePrice: "参考价格",
+          remarkLabel: "补充说明",
+          remarkRequired: "请输入补充说明",
+          roomTypeApplyBlockDesc: "已接入真实申请单接口，支持带出房型与区域编码后直接提交。",
+          roomTypeApplyBlockTitle: "房型申请信息",
+          roomTypeApplyDesc: "请确认房型、区域、偏好标签和租期信息后提交申请。",
+          roomTypeApplyTitle: "房型申请",
+          selectCheckinDate: "请选择入住日期",
+          selectCheckoutDate: "请选择离开日期",
+          selectDateEnd: "请选择{label}",
+          selectDateStart: "请选择{label}",
+          sourceDefaultDesc: "请填写您的入住意向、租期和补充说明。",
+          stayApplyDefaultDesc: "请填写您的入住意向、生活偏好与预计租期后提交申请单。",
+          stayApplyDefaultTitle: "入住申请",
+          submitFailed: "申请单提交失败",
+          submitRoomTypeApply: "提交房型申请",
+          submitSuccess: "申请单提交成功",
+          submitting: "提交中...",
+          tagLoadFailed: "偏好标签加载失败"
+        }
+      },
+      utility_recharge: {
+        utility_recharge: {
+          navTitle: "账单管理"
+        }
+      }
+    }
+  }
+}
+
+export default messages
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..797bbaf
--- /dev/null
+++ b/main.js
@@ -0,0 +1,26 @@
+import App from './App'
+import store from './store'
+
+import Vue from 'vue'
+Vue.config.productionTip = false
+App.mpType = 'app'
+
+// 引入全局TuniaoUI
+import TuniaoUI from 'tuniao-ui'
+Vue.use(TuniaoUI)
+
+// 引入TuniaoUI提供的vuex简写方法
+let vuexStore = require('@/store/$t.mixin.js')
+Vue.mixin(vuexStore)
+
+// 引入TuniaoUI对小程序分享的mixin封装
+let mpShare = require('tuniao-ui/libs/mixin/mpShare.js')
+Vue.mixin(mpShare)
+
+const app = new Vue({
+  store,
+  ...App
+})
+
+
+app.$mount()
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..7d9638b
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,81 @@
+{
+    "name" : "测试",
+    "appid" : "__UNI__056D753",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "wx92fd9a1cd56f1185",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true,
+        "requiredPrivateInfos" : [ "chooseAddress" ]
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "sassImplementationName" : "node-sass",
+    "vueVersion" : "2",
+    "h5" : {
+        "template" : "",
+        "devServer" : {
+            "https" : false
+        },
+        "title" : "测试"
+    }
+}
diff --git a/pages.json b/pages.json
new file mode 100644
index 0000000..d51d408
--- /dev/null
+++ b/pages.json
@@ -0,0 +1,201 @@
+{
+  "easycom": {
+    "^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
+  },
+	"pages": [
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "Luju Apartments"
+			}
+		}
+	],
+  "subPackages": [
+    {
+      "root": "pkgAccount",
+      "pages": [
+        {
+          "path": "login/login",
+          "style": {
+            "navigationBarTitleText": "Sign In"
+          }
+        },
+        {
+          "path": "register/register",
+          "style": {
+            "navigationBarTitleText": "Register"
+          }
+        },
+        {
+          "path": "auth_result/auth_result",
+          "style": {
+            "navigationBarTitleText": "Verification Result"
+          }
+        },
+        {
+          "path": "registration_records/registration_records",
+          "style": {
+            "navigationBarTitleText": "注册记录"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pkgBooking",
+      "pages": [
+        {
+          "path": "book_viewing/book_viewing",
+          "style": {
+            "navigationBarTitleText": "Book Viewing"
+          }
+        },
+        {
+          "path": "book/book",
+          "style": {
+            "navigationBarTitleText": "Booking Confirm"
+          }
+        },
+        {
+          "path": "pay/pay",
+          "style": {
+            "navigationBarTitleText": "Online Payment"
+          }
+        },
+        {
+          "path": "booking_detail/booking_detail",
+          "style": {
+            "navigationBarTitleText": "Booking Detail"
+          }
+        },
+        {
+          "path": "booking_list/booking_list",
+          "style": {
+            "navigationBarTitleText": "Booking Records"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pkgService",
+      "pages": [
+        {
+          "path": "application_detail/application_detail",
+          "style": {
+            "navigationBarTitleText": "Application Detail"
+          }
+        },
+        {
+          "path": "my_application/my_application",
+          "style": {
+            "navigationBarTitleText": "My Applications"
+          }
+        },
+        {
+          "path": "my_contract/my_contract",
+          "style": {
+            "navigationBarTitleText": "My Contracts"
+          }
+        },
+        {
+          "path": "contract_detail/contract_detail",
+          "style": {
+            "navigationBarTitleText": "Contract Detail"
+          }
+        },
+        {
+          "path": "contract_sign/contract_sign",
+          "style": {
+            "navigationBarTitleText": "Contract Signing"
+          }
+        },
+        {
+          "path": "message_detail/message_detail",
+          "style": {
+            "navigationBarTitleText": "Message Detail"
+          }
+        },
+        {
+          "path": "submit_request/submit_request",
+          "style": {
+            "navigationBarTitleText": "Submit Request"
+          }
+        },
+        {
+          "path": "service_stub/service_stub",
+          "style": {
+            "navigationBarTitleText": "Service Center"
+          }
+        },
+        {
+          "path": "utility_recharge/utility_recharge",
+          "style": {
+            "navigationBarTitleText": "Utility Recharge"
+          }
+        },
+        {
+          "path": "smart_control/smart_control",
+          "style": {
+            "navigationBarTitleText": "Smart Control",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "device_control/device_control",
+          "style": {
+            "navigationBarTitleText": "Device Control",
+            "navigationStyle": "custom"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pkgExplore",
+      "pages": [
+        {
+          "path": "filter/filter",
+          "style": {
+            "navigationBarTitleText": "Filter"
+          }
+        },
+        {
+          "path": "sign/sign",
+          "style": {
+            "navigationBarTitleText": "Check In"
+          }
+        },
+        {
+          "path": "download/download",
+          "style": {
+            "navigationBarTitleText": "Gallery"
+          }
+        },
+        {
+          "path": "room_detail/room_detail",
+          "style": {
+            "navigationBarTitleText": "Room Detail"
+          }
+        },
+        {
+          "path": "store_detail/store_detail",
+          "style": {
+            "navigationBarTitleText": "Community Detail"
+          }
+        },
+        {
+          "path": "vr_preview/vr_preview",
+          "style": {
+            "navigationBarTitleText": "VR Viewing"
+          }
+        }
+      ]
+    }
+  ],
+	"globalStyle": {
+    "navigationStyle": "custom",
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "Luju Apartments",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"uniIdRouter": {}
+}
diff --git a/pages/index/component/MessageCenterTab.vue b/pages/index/component/MessageCenterTab.vue
new file mode 100644
index 0000000..67ea38e
--- /dev/null
+++ b/pages/index/component/MessageCenterTab.vue
@@ -0,0 +1,1080 @@
+<template>
+  <view class="message-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="transparent" :customBackStyle="{ transition: 'all 0.3s ease' }">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('title') }}</view>
+    </tn-nav-bar>
+
+    <view class="message-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
+      <view class="page-header tn-margin-bottom-xl">
+        <view class="tn-text-bold tn-color-black page-title">{{ t('title') }}</view>
+        <view class="tn-color-gray tn-text-sm tn-margin-top-xs">{{ subtitleText }}</view>
+      </view>
+
+      <view class="msg-category tn-flex tn-flex-row-between tn-margin-bottom">
+        <view class="category-item tn-flex tn-flex-direction-column tn-flex-col-center">
+          <view class="category-icon-box active-box">
+            <text class="tn-icon-notice-fill tn-text-xxl"></text>
+            <view v-if="stats.systemUnread" class="badge tn-flex tn-flex-col-center tn-flex-row-center">{{ stats.systemUnread }}</view>
+          </view>
+          <view class="tn-text-sm tn-margin-top-sm tn-text-bold tn-color-black">{{ t('system') }}</view>
+        </view>
+        <view class="category-item tn-flex tn-flex-direction-column tn-flex-col-center">
+          <view class="category-icon-box normal-box">
+            <text class="tn-icon-coupon-fill tn-text-xxl"></text>
+            <view v-if="stats.paymentUnread" class="badge tn-flex tn-flex-col-center tn-flex-row-center">{{ stats.paymentUnread }}</view>
+          </view>
+          <view class="tn-text-sm tn-margin-top-sm tn-text-bold tn-color-gray">{{ t('payment') }}</view>
+        </view>
+        <view class="category-item tn-flex tn-flex-direction-column tn-flex-col-center">
+          <view class="category-icon-box normal-box">
+            <text class="tn-icon-service-fill tn-text-xxl"></text>
+            <view v-if="stats.butlerUnread" class="badge tn-flex tn-flex-col-center tn-flex-row-center">{{ stats.butlerUnread }}</view>
+          </view>
+          <view class="tn-text-sm tn-margin-top-sm tn-text-bold tn-color-gray">{{ t('butler') }}</view>
+        </view>
+      </view>
+
+      <view v-if="inspectionList.length" class="section-card tn-margin-bottom">
+        <view class="section-head">
+          <view>
+            <view class="section-title">{{ t('inspectionTitle') }}</view>
+            <view class="section-desc">{{ t('inspectionDesc') }}</view>
+          </view>
+          <view class="section-chip is-primary">{{ inspectionReminderCount }} {{ t('inspectionCountUnit') }}</view>
+        </view>
+
+        <view
+          v-for="(record, index) in inspectionList"
+          :key="record.code || index"
+          class="inspection-card tn-margin-top-sm"
+          @click="openInspectionPopup(record)"
+        >
+          <view class="inspection-head">
+            <view class="inspection-main-wrap">
+              <view class="inspection-icon">
+                <text class="tn-icon-home-fill tn-color-white"></text>
+              </view>
+              <view class="inspection-main">
+                <view class="inspection-title">{{ record.typeText }}</view>
+                <view class="inspection-meta">{{ record.roomCode || t('unassignedRoom') }} · {{ record.timeText }}</view>
+              </view>
+            </view>
+            <view class="inspection-chips">
+              <view class="inspection-status-chip" :class="record.resultClass">{{ record.resultText }}</view>
+              <view class="inspection-status-chip" :class="record.statusClass">{{ record.statusText }}</view>
+            </view>
+          </view>
+          <view class="inspection-desc">{{ record.summaryText }}</view>
+          <view class="inspection-footer">
+            <view class="inspection-footer-text">{{ t('checkerLabel') }}{{ record.checkerUserCode || '--' }}</view>
+            <view class="inspection-action">{{ t('viewDetail') }}</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="tn-flex tn-flex-row-between tn-flex-col-bottom tn-margin-bottom">
+        <view class="tn-text-bold tn-text-lg tn-color-black">{{ t('recentMessages') }}</view>
+        <view class="tn-text-sm tn-color-gray" @click="handleReadAll">
+          <text class="tn-icon-delete tn-margin-right-xs"></text>{{ t('markNotificationRead') }}
+        </view>
+      </view>
+
+      <view class="msg-list">
+        <view v-if="loading" class="empty-card">
+          <view class="tn-text-bold tn-text-lg tn-color-black">{{ t('loadingTitle') }}</view>
+          <view class="tn-color-gray tn-text-sm tn-margin-top-xs">{{ t('loadingDesc') }}</view>
+        </view>
+        <view
+          v-for="(msg, index) in messages"
+          :key="msg.id || msg.code || index"
+          class="msg-card tn-flex tn-flex-col-center tn-padding tn-margin-bottom-sm"
+          @click="openMessage(msg)"
+        >
+          <view class="msg-avatar tn-flex tn-flex-col-center tn-flex-row-center" :class="msg.unread ? 'avatar-unread' : ''">
+            <text :class="msg.icon" class="tn-text-xl tn-color-white"></text>
+            <view v-if="msg.unread" class="unread-dot"></view>
+          </view>
+          <view class="msg-info tn-flex-1 tn-margin-left">
+            <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+              <view class="tn-text-bold tn-text-md tn-color-black clamp-text-1 msg-title">{{ msg.title }}</view>
+              <view class="tn-color-gray tn-text-xs">{{ msg.time }}</view>
+            </view>
+            <view class="tn-color-gray tn-text-sm tn-margin-top-xs clamp-text-1">{{ msg.desc }}</view>
+          </view>
+        </view>
+        <view v-if="!loading && !messages.length && !inspectionList.length" class="empty-card">
+          <view class="tn-text-bold tn-text-lg tn-color-black">{{ t('emptyTitle') }}</view>
+          <view class="tn-color-gray tn-text-sm tn-margin-top-xs">{{ t('emptyDesc') }}</view>
+        </view>
+      </view>
+
+      <view style="height: 100rpx;"></view>
+    </view>
+
+    <view v-if="inspectionPopupVisible && activeInspectionRecord" class="inspect-popup">
+      <view class="inspect-popup-mask" @click="closeInspectionPopup"></view>
+      <view class="inspect-popup-panel">
+        <view class="inspect-popup-head">
+          <view>
+            <view class="inspect-popup-title">{{ activeInspectionRecord.typeText }}</view>
+            <view class="inspect-popup-subtitle">{{ activeInspectionRecord.roomCode || t('unassignedRoom') }} · {{ activeInspectionRecord.timeText }}</view>
+          </view>
+          <view class="inspect-popup-close" @click="closeInspectionPopup">
+            <text class="tn-icon-close"></text>
+          </view>
+        </view>
+
+        <scroll-view scroll-y class="inspect-popup-body">
+          <view class="inspect-detail-card">
+            <view class="inspect-detail-row">
+              <text class="inspect-detail-label">{{ t('inspectionChecker') }}</text>
+              <text class="inspect-detail-value">{{ activeInspectionRecord.checkerUserCode || '--' }}</text>
+            </view>
+            <view class="inspect-detail-row">
+              <text class="inspect-detail-label">{{ t('inspectionResult') }}</text>
+              <text class="inspect-detail-value">{{ activeInspectionRecord.resultText }}</text>
+            </view>
+            <view class="inspect-detail-row">
+              <text class="inspect-detail-label">{{ t('inspectionStatus') }}</text>
+              <text class="inspect-detail-value">{{ activeInspectionRecord.statusText }}</text>
+            </view>
+          </view>
+
+          <view v-if="activeInspectionRecord.remark" class="inspect-block">
+            <view class="inspect-block-title">{{ t('inspectionRemarkTitle') }}</view>
+            <view class="inspect-block-content">{{ activeInspectionRecord.remark }}</view>
+          </view>
+
+          <view v-if="activeInspectionRecord.items.length" class="inspect-block">
+            <view class="inspect-block-title">{{ t('inspectionItemsTitle') }}</view>
+            <view
+              v-for="(detail, index) in activeInspectionRecord.items"
+              :key="detail.code || index"
+              class="inspect-item"
+            >
+              <view class="inspect-item-head">
+                <view class="inspect-item-title">{{ t('inspectionItemPrefix', { index: index + 1 }) }}</view>
+                <view class="inspect-item-tag">{{ getCheckTypeLabel(detail.checkType) }}</view>
+              </view>
+              <view v-if="detail.problemDescription" class="inspect-item-text">{{ t('problemLabel') }}{{ detail.problemDescription }}</view>
+              <view v-if="detail.remark" class="inspect-item-text">{{ t('remarkLabel') }}{{ detail.remark }}</view>
+              <view v-if="detail.compensationAmount !== '' && detail.compensationAmount !== null && detail.compensationAmount !== undefined" class="inspect-item-text">
+                {{ t('compensationLabel') }}{{ detail.compensationAmount }}
+              </view>
+              <view v-if="detail.imageUrls.length" class="inspect-image-list">
+                <image
+                  v-for="(url, imageIndex) in detail.imageUrls"
+                  :key="`${detail.code || index}-${imageIndex}`"
+                  class="inspect-image"
+                  :src="url"
+                  mode="aspectFill"
+                  @click.stop="previewImages(detail.imageUrls, imageIndex)"
+                ></image>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+
+        <view class="inspect-popup-foot">
+          <view class="inspect-popup-btn" @click="closeInspectionPopup">{{ t('acknowledged') }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getSessionSnapshot } from '../../../utils/app-state'
+import { checkRecordByChecked, notificationPage, notificationRead } from '@/api/index.js'
+import {
+  countPendingInspectionRecords,
+  extractInspectionList,
+  formatMessageDateTime,
+  isPendingInspectionRecord,
+  resolveNotificationList,
+  resolveNotificationUnreadTotal
+} from '../../../utils/message-helper'
+import { compactEnglishText } from '../../../utils/select-room-normalizers'
+import { saveMessageDetailPayload, saveMessageListSnapshot } from '../../../utils/messages'
+
+export default {
+  name: 'MessageCenterTab',
+  data() {
+    return {
+      loading: false,
+      messages: [],
+      remoteMessages: [],
+      remoteUnreadCount: 0,
+      inspectionList: [],
+      inspectionPopupVisible: false,
+      activeInspectionRecord: null,
+      stats: {
+        totalUnread: 0,
+        systemUnread: 0,
+        paymentUnread: 0,
+        butlerUnread: 0
+      },
+      i18n: {
+        zh: {
+          title: '消息中心',
+          subtitle: '你有 {count} 条未读消息待处理',
+          system: '系统通知',
+          payment: '缴费账单',
+          butler: '管家消息',
+          inspectionTitle: '巡查提醒',
+          inspectionDesc: '根据当前入住订单自动汇总巡查提醒记录',
+          inspectionCountUnit: '条提醒',
+          recentMessages: '近期消息',
+          markNotificationRead: '通知已读',
+          loadingTitle: '消息加载中',
+          loadingDesc: '正在同步系统通知和巡查提醒，请稍候。',
+          emptyTitle: '暂无消息',
+          emptyDesc: '系统通知和巡查提醒会在这里显示。',
+          noUnreadNotification: '暂无未读通知',
+          inspectionNeedManualHandle: '巡查提醒需单独查看处理',
+          remoteMarkedRead: '系统通知已全部标记为已读',
+          remoteMarkedReadWithInspection: '系统通知已标记，巡查提醒需单独处理',
+          unassignedRoom: '未关联房间',
+          checkerLabel: '检查人：',
+          viewDetail: '查看详情',
+          inspectionChecker: '检查人',
+          inspectionResult: '检查结果',
+          inspectionStatus: '当前状态',
+          inspectionRemarkTitle: '检查备注',
+          inspectionItemsTitle: '检查项明细',
+          inspectionItemPrefix: '检查项 {index}',
+          problemLabel: '问题：',
+          remarkLabel: '备注：',
+          compensationLabel: '赔付金额：',
+          acknowledged: '我知道了',
+          notificationFallbackTitle: '系统通知',
+          notificationFallbackDesc: '您有一条新的系统消息',
+          inspectionSummaryFallback: '巡查提醒，请查看详情',
+          checkTypeRoutine: '日常检查',
+          checkTypeCheckout: '退房检查',
+          checkTypeSpecial: '专项检查',
+          checkTypeDefault: '检查记录',
+          checkStatusPending: '待确认',
+          checkStatusProcessing: '处理中',
+          checkStatusDone: '已完成',
+          checkStatusDefault: '状态待定',
+          checkResultNormal: '正常',
+          checkResultFix: '需整改',
+          checkResultReview: '待复核',
+          checkResultDefault: '检查结果'
+        },
+        en: {
+          title: 'Messages',
+          subtitle: 'You have {count} unread messages',
+          system: 'System',
+          payment: 'Payment',
+          butler: 'Butler',
+          inspectionTitle: 'Inspection',
+          inspectionDesc: 'Inspection reminders are summarized automatically.',
+          inspectionCountUnit: 'alerts',
+          recentMessages: 'Recent',
+          markNotificationRead: 'Read Notifications',
+          loadingTitle: 'Loading Messages',
+          loadingDesc: 'Syncing notifications and inspections.',
+          emptyTitle: 'No Messages',
+          emptyDesc: 'Notifications and inspection reminders will appear here.',
+          noUnreadNotification: 'No unread notifications',
+          inspectionNeedManualHandle: 'Inspection reminders need manual handling',
+          remoteMarkedRead: 'Notifications marked as read',
+          remoteMarkedReadWithInspection: 'Notifications marked as read, inspection reminders still need handling',
+          unassignedRoom: 'Room Unlinked',
+          checkerLabel: 'Inspector: ',
+          viewDetail: 'Details',
+          inspectionChecker: 'Inspector',
+          inspectionResult: 'Result',
+          inspectionStatus: 'Status',
+          inspectionRemarkTitle: 'Inspection Remark',
+          inspectionItemsTitle: 'Inspection Items',
+          inspectionItemPrefix: 'Item {index}',
+          problemLabel: 'Problem: ',
+          remarkLabel: 'Remark: ',
+          compensationLabel: 'Compensation: ',
+          acknowledged: 'Got It',
+          notificationFallbackTitle: 'System Notification',
+          notificationFallbackDesc: 'You have a new system message',
+          inspectionSummaryFallback: 'Inspection reminder, tap to view details.',
+          checkTypeRoutine: 'Routine Check',
+          checkTypeCheckout: 'Checkout Check',
+          checkTypeSpecial: 'Special Check',
+          checkTypeDefault: 'Inspection Record',
+          checkStatusPending: 'Pending',
+          checkStatusProcessing: 'Processing',
+          checkStatusDone: 'Completed',
+          checkStatusDefault: 'Status Pending',
+          checkResultNormal: 'Normal',
+          checkResultFix: 'Needs Fix',
+          checkResultReview: 'Pending Review',
+          checkResultDefault: 'Inspection Result'
+        }
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    subtitleText() {
+      const text = this.t('subtitle').replace('{count}', this.stats.totalUnread)
+      return this.language === 'en' ? compactEnglishText(text, 48) : text
+    },
+    inspectionReminderCount() {
+      return countPendingInspectionRecords(this.inspectionList)
+    }
+  },
+  watch: {
+    language() {
+      this.refreshMessages(true)
+    }
+  },
+  onShow() {
+    this.load()
+  },
+  methods: {
+    load(force = false) {
+      return this.refreshMessages(force)
+    },
+    t(key, params) {
+      return this.$tm('pages.index.component.MessageCenterTab', key, params)
+    },
+    getStoreUser() {
+      return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
+    },
+    getStoreCurrentOrder() {
+      return (this.$store && this.$store.state && this.$store.state.vuex_current_order) || null
+    },
+    isCurrentLogin() {
+      const storeUser = this.getStoreUser()
+      if (storeUser && Object.keys(storeUser).length) {
+        return true
+      }
+      return !!getSessionSnapshot().isLogin
+    },
+    resetMessageState() {
+      this.messages = []
+      this.remoteMessages = []
+      this.remoteUnreadCount = 0
+      this.inspectionList = []
+      this.inspectionPopupVisible = false
+      this.activeInspectionRecord = null
+      this.stats = {
+        totalUnread: 0,
+        systemUnread: 0,
+        paymentUnread: 0,
+        butlerUnread: 0
+      }
+      uni.$emit('messageBadgeCountChange', 0)
+    },
+    getCurrentUserCode() {
+      const session = getSessionSnapshot()
+      const storeUser = this.getStoreUser()
+      const user = Object.keys(storeUser).length
+        ? storeUser
+        : (session.currentUser || session.registeredUser || session.resolvedUser || {})
+      return user.code || user.userCode || ''
+    },
+    getCurrentOrderNo() {
+      const session = getSessionSnapshot()
+      const room = session.myRoomData || {}
+      const user = session.currentUser || session.registeredUser || session.resolvedUser || {}
+      const currentOrder = this.getStoreCurrentOrder() || (user && user.currentOrder) || {}
+      return String(room.orderNo || currentOrder.orderNo || '').trim()
+    },
+    isPendingInspectionRecord(record) {
+      return isPendingInspectionRecord(record)
+    },
+    refreshMessages(force = false) {
+      if (!this.isCurrentLogin()) {
+        this.resetMessageState()
+        return Promise.resolve()
+      }
+
+      const now = Date.now()
+      if (!force && this._refreshMessagesPromise) {
+        return this._refreshMessagesPromise
+      }
+      if (!force && this._lastRefreshMessagesAt && now - this._lastRefreshMessagesAt < 600) {
+        return Promise.resolve()
+      }
+      this._lastRefreshMessagesAt = now
+      this.loading = true
+      this._refreshMessagesPromise = Promise.all([
+          this.fetchRemoteMessages(),
+          this.fetchInspectionList()
+        ])
+        .catch((error) => {
+          console.error('refresh messages failed', error)
+        })
+        .finally(() => {
+          this.buildMessageView()
+          this.loading = false
+          this._refreshMessagesPromise = null
+        })
+      return this._refreshMessagesPromise
+    },
+    async fetchRemoteMessages() {
+      const [listResponse, unreadResponse] = await Promise.all([
+        notificationPage({
+          PageIndex: 1,
+          PageSize: 20
+        }, this.language).catch(() => []),
+        notificationPage({
+          IsRead: false,
+          PageIndex: 1,
+          PageSize: 1,
+          Search: '',
+          IsExport: false
+        }, this.language).catch(() => [])
+      ])
+
+      this.remoteMessages = resolveNotificationList(listResponse).map(item => this.normalizeRemoteMessage(item))
+      this.remoteUnreadCount = resolveNotificationUnreadTotal(unreadResponse)
+    },
+    fetchInspectionList() {
+      const checkedUserCode = this.getCurrentUserCode()
+      const orderNo = this.getCurrentOrderNo()
+      if (!orderNo) {
+        this.inspectionList = []
+        return Promise.resolve()
+      }
+
+      return checkRecordByChecked({
+          checkedUserCode,
+          orderNo
+        }, this.language)
+        .then((response) => {
+          const list = extractInspectionList(response)
+          this.inspectionList = list
+            .map(item => this.normalizeInspectionRecord(item))
+            .sort((prev, next) => new Date(next.rawCreateTime || 0).getTime() - new Date(prev.rawCreateTime || 0).getTime())
+        })
+        .catch((error) => {
+          console.error('fetch inspection list failed', error)
+          this.inspectionList = []
+        })
+    },
+    normalizeRemoteMessage(item = {}) {
+      const rawTitleZh = item.titleZh || item.title || ''
+      const rawTitleEn = item.titleEn || item.title || item.titleZh || ''
+      const rawDescZh = item.content || item.desc || ''
+      const rawDescEn = item.contentEn || item.content || item.desc || ''
+      const rawTitle = this.language === 'zh' ? rawTitleZh : rawTitleEn
+      const rawDesc = this.language === 'zh' ? rawDescZh : rawDescEn
+      const title = this.language === 'en' ? compactEnglishText(rawTitle, 28) : rawTitle
+      const desc = this.language === 'en' ? compactEnglishText(rawDesc, 60) : rawDesc
+
+      return {
+        id: item.code || item.id || `remote-${Date.now()}`,
+        code: item.code || '',
+        category: this.resolveRemoteCategory(item, title, desc),
+        titleZh: rawTitleZh || this.t('notificationFallbackTitle'),
+        titleEn: rawTitleEn || this.t('notificationFallbackTitle'),
+        descZh: rawDescZh || this.t('notificationFallbackDesc'),
+        descEn: rawDescEn || this.t('notificationFallbackDesc'),
+        contentZh: rawDescZh || this.t('notificationFallbackDesc'),
+        contentEn: rawDescEn || this.t('notificationFallbackDesc'),
+        title: title || this.t('notificationFallbackTitle'),
+        desc: desc || this.t('notificationFallbackDesc'),
+        content: desc || this.t('notificationFallbackDesc'),
+        time: formatMessageDateTime(item.createTime || item.updateTime || ''),
+        rawTime: item.createTime || item.updateTime || '',
+        unread: item.isRead !== true,
+        icon: this.resolveRemoteIcon(item, title, desc),
+        actionUrl: item.path || item.actionUrl || '',
+        path: item.path || item.actionUrl || '',
+        source: 'remote'
+      }
+    },
+    normalizeInspectionRecord(record = {}) {
+      const items = Array.isArray(record.items)
+        ? record.items.map(item => ({
+          code: item && item.code ? item.code : '',
+          remark: item && item.remark ? item.remark : '',
+          checkType: item && item.checkType !== undefined ? item.checkType : '',
+          problemDescription: item && item.problemDescription ? item.problemDescription : '',
+          compensationAmount: item && item.compensationAmount,
+          imageUrls: Array.isArray(item && item.imageUrls) ? item.imageUrls.filter(Boolean) : []
+        }))
+        : []
+      const issueTexts = items.map(item => item.problemDescription || item.remark || '').filter(Boolean)
+      const summaryText = record.remark || issueTexts[0] || this.t('inspectionSummaryFallback')
+      return {
+        code: record.code || '',
+        roomCode: record.roomCode || '',
+        checkedUserCode: record.checkedUserCode || '',
+        checkerUserCode: record.checkerUserCode || '',
+        checkedUserAgree: record.checkedUserAgree,
+        status: record.status,
+        resultStatus: record.resultStatus,
+        remark: record.remark || '',
+        items,
+        typeText: this.getCheckTypeLabel(record.checkType),
+        resultText: this.getCheckResultStatusLabel(record.resultStatus),
+        resultClass: this.getCheckResultStatusClass(record.resultStatus),
+        statusText: this.getCheckRecordStatusLabel(record.status),
+        statusClass: this.getCheckRecordStatusClass(record.status),
+        summaryText,
+        rawCreateTime: record.createTime || '',
+        timeText: formatMessageDateTime(record.createTime),
+        pending: this.isPendingInspectionRecord(record)
+      }
+    },
+    resolveRemoteCategory(item = {}, title = '', desc = '') {
+      const text = `${item.category || ''} ${title} ${desc}`.toLowerCase()
+      if (/(充值|账单|支付|payment|bill|fee)/i.test(text)) {
+        return 'payment'
+      }
+      if (/(管家|butler|service|报修|入住|合同|申请)/i.test(text)) {
+        return 'butler'
+      }
+      return 'system'
+    },
+    resolveRemoteIcon(item = {}, title = '', desc = '') {
+      const category = this.resolveRemoteCategory(item, title, desc)
+      if (category === 'payment') {
+        return 'tn-icon-coupon-fill'
+      }
+      if (category === 'butler') {
+        return 'tn-icon-service-fill'
+      }
+      return 'tn-icon-notice-fill'
+    },
+    getCheckTypeLabel(value) {
+      const map = {
+        0: this.t('checkTypeRoutine'),
+        1: this.t('checkTypeCheckout'),
+        2: this.t('checkTypeSpecial')
+      }
+      return map[Number(value)] || this.t('checkTypeDefault')
+    },
+    getCheckRecordStatusLabel(value) {
+      const map = {
+        0: this.t('checkStatusPending'),
+        1: this.t('checkStatusProcessing'),
+        2: this.t('checkStatusDone')
+      }
+      return map[Number(value)] || this.t('checkStatusDefault')
+    },
+    getCheckResultStatusLabel(value) {
+      const map = {
+        0: this.t('checkResultNormal'),
+        1: this.t('checkResultFix'),
+        2: this.t('checkResultReview')
+      }
+      return map[Number(value)] || this.t('checkResultDefault')
+    },
+    getCheckResultStatusClass(value) {
+      const map = {
+        0: 'is-success',
+        1: 'is-warning',
+        2: 'is-primary'
+      }
+      return map[Number(value)] || 'is-muted'
+    },
+    getCheckRecordStatusClass(value) {
+      const map = {
+        0: 'is-warning',
+        1: 'is-primary',
+        2: 'is-success'
+      }
+      return map[Number(value)] || 'is-muted'
+    },
+    buildMessageView() {
+      const remoteStats = this.getRemoteStats()
+      const inspectionPendingCount = this.inspectionReminderCount
+
+      this.messages = [...this.remoteMessages].sort((prev, next) => {
+        return new Date(next.rawTime || 0).getTime() - new Date(prev.rawTime || 0).getTime()
+      })
+      saveMessageListSnapshot(this.messages, this.language)
+      this.stats = {
+        totalUnread: remoteStats.totalUnread + inspectionPendingCount,
+        systemUnread: remoteStats.systemUnread,
+        paymentUnread: remoteStats.paymentUnread,
+        butlerUnread: remoteStats.butlerUnread + inspectionPendingCount
+      }
+      uni.$emit('messageBadgeCountChange', this.stats.totalUnread)
+    },
+    getRemoteStats() {
+      const unreadMessages = this.remoteMessages.filter(item => item.unread)
+      return {
+        totalUnread: this.remoteUnreadCount || unreadMessages.length,
+        systemUnread: unreadMessages.filter(item => item.category === 'system').length,
+        paymentUnread: unreadMessages.filter(item => item.category === 'payment').length,
+        butlerUnread: unreadMessages.filter(item => item.category === 'butler').length
+      }
+    },
+    async handleReadAll() {
+      if (!this.isCurrentLogin()) {
+        this.resetMessageState()
+        return
+      }
+
+      const unreadRemoteCodes = this.remoteMessages.filter(item => item.unread && item.code).map(item => item.code)
+      if (!unreadRemoteCodes.length) {
+        uni.showToast({
+          title: this.inspectionReminderCount
+            ? this.t('inspectionNeedManualHandle')
+            : this.t('noUnreadNotification'),
+          icon: 'none'
+        })
+        return
+      }
+
+      if (unreadRemoteCodes.length) {
+        await Promise.all(unreadRemoteCodes.map(code => {
+          return notificationRead(code, this.language).catch(error => {
+            console.error('mark remote message read failed', error)
+            return null
+          })
+        }))
+      }
+
+      this.remoteMessages = this.remoteMessages.map(item => ({
+        ...item,
+        unread: false
+      }))
+      this.remoteUnreadCount = 0
+      this.buildMessageView()
+      uni.showToast({
+        title: this.inspectionReminderCount
+          ? this.t('remoteMarkedReadWithInspection')
+          : this.t('remoteMarkedRead'),
+        icon: 'none'
+      })
+    },
+    openMessage(msg) {
+      if (!this.isCurrentLogin()) {
+        this.resetMessageState()
+        return
+      }
+
+      if (msg.unread && msg.source === 'remote' && msg.code) {
+        return notificationRead(msg.code, this.language)
+          .then(() => {
+          this.remoteMessages = this.remoteMessages.map(item => ({
+            ...item,
+            unread: item.id === msg.id ? false : item.unread
+          }))
+          this.remoteUnreadCount = Math.max(this.remoteUnreadCount - 1, 0)
+          })
+          .catch((error) => {
+          console.error('read remote message failed', error)
+          })
+          .finally(() => {
+            this.navigateToMessageDetail(msg)
+          })
+      }
+
+      this.navigateToMessageDetail(msg)
+    },
+    navigateToMessageDetail(msg) {
+      this.buildMessageView()
+      const detailPayload = {
+        id: msg.id || msg.code || '',
+        titleZh: msg.titleZh || msg.title || '',
+        titleEn: msg.titleEn || msg.title || '',
+        descZh: msg.descZh || msg.desc || '',
+        descEn: msg.descEn || msg.desc || '',
+        contentZh: msg.contentZh || msg.content || msg.desc || '',
+        contentEn: msg.contentEn || msg.content || msg.desc || '',
+        title: msg.title || '',
+        desc: msg.desc || '',
+        content: msg.content || msg.desc || '',
+        time: msg.time || '',
+        category: msg.category || 'system',
+        source: msg.source || 'remote',
+        code: msg.code || '',
+        path: msg.actionUrl || msg.path || ''
+      }
+      saveMessageDetailPayload(detailPayload, this.language)
+      uni.navigateTo({
+        url: `/pkgService/message_detail/message_detail?id=${encodeURIComponent(msg.id || msg.code || '')}`
+      })
+    },
+    openInspectionPopup(record) {
+      this.activeInspectionRecord = record
+      this.inspectionPopupVisible = true
+    },
+    closeInspectionPopup() {
+      this.inspectionPopupVisible = false
+      this.activeInspectionRecord = null
+    },
+    previewImages(urls, currentIndex = 0) {
+      const safeUrls = Array.isArray(urls) ? urls.filter(Boolean) : []
+      if (!safeUrls.length) {
+        return
+      }
+      uni.previewImage({
+        urls: safeUrls,
+        current: safeUrls[currentIndex] || safeUrls[0]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.message-page {
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  min-height: 100vh;
+}
+
+.page-header {
+  padding-top: 20rpx;
+}
+
+.page-title {
+  font-size: 56rpx;
+  letter-spacing: 2rpx;
+  line-height: 1.25;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.msg-category {
+  padding: 0 20rpx;
+}
+
+.category-icon-box {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  transition: all 0.2s;
+}
+
+.active-box {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #FFFFFF;
+  box-shadow: 0 10rpx 20rpx rgba($brand-primary, 0.25);
+}
+
+.normal-box {
+  background-color: #FFFFFF;
+  color: $brand-primary;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+}
+
+.badge {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  background-color: #FF5A5F;
+  color: #FFFFFF;
+  font-size: 22rpx;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 20rpx;
+  font-weight: bold;
+  border: 4rpx solid #FFFFFF;
+}
+
+.section-card,
+.msg-card,
+.empty-card,
+.inspect-detail-card,
+.inspect-block,
+.inspect-item {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+
+.section-card,
+.empty-card {
+  padding: 32rpx;
+}
+
+.section-head,
+.inspection-head,
+.inspection-footer,
+.inspect-detail-row,
+.inspect-item-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-title,
+.inspect-popup-title,
+.empty-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #111827;
+}
+
+.section-desc,
+.inspection-meta,
+.inspection-desc,
+.inspection-footer-text,
+.empty-desc,
+.inspect-popup-subtitle,
+.inspect-detail-label,
+.inspect-block-content,
+.inspect-item-text {
+  color: #6B7280;
+  font-size: 24rpx;
+  line-height: 1.6;
+}
+
+.section-chip {
+  padding: 8rpx 18rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.section-chip.is-primary {
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.1);
+  border: 1rpx solid rgba($brand-primary, 0.2);
+}
+
+.inspection-card {
+  padding: 24rpx;
+  background: rgba($brand-primary, 0.02);
+  border-radius: 16rpx;
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+
+.inspection-main-wrap {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.inspection-icon {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  margin-right: 18rpx;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.2);
+}
+
+.inspection-title,
+.inspect-item-title {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #111827;
+}
+
+.inspection-chips {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  margin-left: 16rpx;
+}
+
+.inspection-status-chip,
+.inspect-item-tag {
+  padding: 8rpx 16rpx;
+  border-radius: 999rpx;
+  font-size: 20rpx;
+  font-weight: 700;
+}
+
+.is-success {
+  color: #15803d;
+  background: rgba(34, 197, 94, 0.12);
+}
+
+.is-warning {
+  color: #b45309;
+  background: rgba(245, 158, 11, 0.16);
+}
+
+.is-primary {
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.12);
+}
+
+.is-muted {
+  color: #64748b;
+  background: rgba(148, 163, 184, 0.14);
+}
+
+.inspection-desc,
+.inspection-footer {
+  margin-top: 16rpx;
+}
+
+.inspection-action {
+  color: $brand-primary;
+  font-size: 24rpx;
+  font-weight: 700;
+}
+
+.msg-card {
+  transition: transform 0.2s;
+}
+
+.msg-card:active {
+  transform: scale(0.98);
+}
+
+.msg-avatar {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 24rpx;
+  background-color: rgba($brand-primary, 0.2);
+  position: relative;
+  color: $brand-primary;
+}
+
+.avatar-unread {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #FFFFFF;
+  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.2);
+}
+
+.msg-avatar .tn-text-xl {
+  color: inherit !important;
+}
+
+.unread-dot {
+  position: absolute;
+  top: -6rpx;
+  right: -6rpx;
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 10rpx;
+  background-color: #FF5A5F;
+  border: 4rpx solid #FFFFFF;
+}
+
+.msg-title {
+  max-width: 350rpx;
+}
+
+.clamp-text-1 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.inspect-popup {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+
+.inspect-popup-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+}
+
+.inspect-popup-panel {
+  position: absolute;
+  left: 24rpx;
+  right: 24rpx;
+  top: 8vh;
+  bottom: 8vh;
+  background: #ffffff;
+  border-radius: 32rpx;
+  padding: 32rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.inspect-popup-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.inspect-popup-close {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background: rgba(148, 163, 184, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.inspect-popup-body {
+  flex: 1;
+  margin-top: 24rpx;
+}
+
+.inspect-detail-card,
+.inspect-block,
+.inspect-item {
+  padding: 24rpx;
+}
+
+.inspect-detail-row + .inspect-detail-row,
+.inspect-item-text + .inspect-item-text {
+  margin-top: 16rpx;
+}
+
+.inspect-detail-value,
+.inspect-block-title {
+  font-size: 26rpx;
+  color: #111827;
+  font-weight: 700;
+}
+
+.inspect-block {
+  margin-top: 20rpx;
+}
+
+.inspect-block-content {
+  margin-top: 12rpx;
+}
+
+.inspect-item {
+  margin-top: 16rpx;
+  background: #f8fafc;
+  box-shadow: none;
+}
+
+.inspect-image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+  margin-top: 16rpx;
+}
+
+.inspect-image {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 20rpx;
+}
+
+.inspect-popup-foot {
+  padding-top: 24rpx;
+}
+
+.inspect-popup-btn {
+  height: 84rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 28rpx;
+  font-weight: 700;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.25);
+}
+</style>
diff --git a/pages/index/component/MyApplicationTab.vue b/pages/index/component/MyApplicationTab.vue
new file mode 100644
index 0000000..94da39f
--- /dev/null
+++ b/pages/index/component/MyApplicationTab.vue
@@ -0,0 +1,1421 @@
+<template>
+  <view class="my-application-page tn-flex tn-flex-direction-column" :style="{ height: 'calc(100vh - 100rpx - env(safe-area-inset-bottom))', boxSizing: 'border-box', paddingTop: (vuex_custom_bar_height) + 'px' }">
+    <view class="page-header tn-padding">
+      <view class="tn-text-bold tn-text-xl tn-color-black page-title">{{ t('pageTitle') }}</view>
+      <view class="tn-color-gray tn-text-sm tn-margin-top-xs">{{ t('pageDesc') }}</view>
+    </view>
+
+    <scroll-view v-if="list.length" scroll-y class="list-scroll-view tn-padding" @scrolltolower="loadMore">
+      <view
+        v-for="(item, index) in list"
+        :key="getApplicationKey(item)"
+        class="application-card tn-margin-bottom-lg"
+        @click="goToApplicationDetail(item)"
+      >
+        <view class="card-head tn-flex tn-flex-row-between tn-flex-col-center">
+          <view class="card-title-wrap tn-flex tn-flex-col-center">
+            <view class="title-icon tn-flex tn-flex-col-center tn-flex-row-center tn-margin-right-sm">
+              <text :class="item.isViewingApplication ? 'tn-icon-calendar' : 'tn-icon-safe'"></text>
+            </view>
+            <view class="card-title-block">
+              <view class="card-title">{{ getApplicationTitle(item) }}</view>
+            </view>
+          </view>
+          <view :class="['status-badge', 'status-' + resolveStatusType(item)]">
+            {{ getDisplayStatusText(item) }}
+          </view>
+        </view>
+
+        <view class="card-body tn-margin-top-lg">
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('apartmentLabel') }}</text>
+            <text class="info-value">{{ item.intendedAreaName || '--' }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('occupantLabel') }}</text>
+            <text class="info-value">{{ item.userName || item.phone || '--' }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ item.isViewingApplication ? t('viewingTimeLabel') : t('leaseTermLabel') }}</text>
+            <text class="info-value">{{ formatDateRange(item.start, item.end) }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('submittedAtLabel') }}</text>
+            <text class="info-value">{{ formatDateTime(item.createTime) }}</text>
+          </view>
+        </view>
+
+        <view v-if="item.remark" class="remark-panel tn-margin-top-lg">
+          <view class="remark-line">
+            <text class="remark-label">{{ t('remarkLabel') }}</text>
+            <text class="remark-text">{{ item.remark }}</text>
+          </view>
+        </view>
+
+        <view v-if="getStatusReminderText(item) && !shouldPayDeposit(item)" class="reminder-panel tn-margin-top-lg">
+          <view class="reminder-title">{{ t('statusReminderTitle') }}</view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('statusReminderTitle') }}</text>
+            <text class="info-value">{{ getStatusReminderText(item) }}</text>
+          </view>
+        </view>
+
+        <view v-if="!isPaidApplication(item) && getApplicationPendingPaymentOrder(item)" class="pending-payment-panel tn-margin-top-lg" @click.stop>
+          <view class="pending-payment-title">{{ t('pendingPaymentTitle') }}</view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('pendingPaymentAmountLabel') }}</text>
+            <text class="info-value info-value--highlight">¥{{ formatMoney(getApplicationPendingPaymentAmount(item)) }}</text>
+          </view>
+          <view v-if="getApplicationPendingPaymentExpireText(item)" class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('pendingPaymentExpireLabel') }}</text>
+            <text class="info-value" :class="{ 'info-value--expired': isApplicationPendingPaymentExpired(item) }">
+              {{ getApplicationPendingPaymentExpireText(item) }}
+            </text>
+          </view>
+          <view v-if="getApplicationPendingPaymentDescription(item)" class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('pendingPaymentDescLabel') }}</text>
+            <text class="info-value">{{ getApplicationPendingPaymentDescription(item) }}</text>
+          </view>
+        </view>
+
+        <view class="card-footer tn-margin-top-xl" @click.stop>
+          <view
+            v-if="canCancelOrder(item)"
+            class="cancel-btn"
+            :class="{ 'cancel-btn--loading': cancelingReferenceTypeNo === resolveReferenceTypeNo(item) }"
+            :data-reference-type-no="resolveReferenceTypeNo(item)"
+            @click.stop="cancelOrderAction"
+          >
+            <text class="tn-text-bold">{{ getCancelButtonText(item) }}</text>
+          </view>
+          
+          <view
+            v-if="!isPaidApplication(item) && getApplicationPendingPaymentOrder(item)"
+            class="pay-btn"
+            :data-reference-type-no="resolveReferenceTypeNo(item)"
+            @click.stop="continuePendingPaymentAction"
+          >
+            <text class="tn-text-bold">{{ getPendingPaymentActionText(item) }}</text>
+          </view>
+          <view
+            v-else-if="canViewBill(item)"
+            class="pay-btn"
+            :data-reference-type-no="resolveReferenceTypeNo(item)"
+            @click.stop="payDepositAction"
+          >
+            <text class="tn-text-bold">{{ t('payDeposit') }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="hasMore || loadingMore" class="load-more-item tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center tn-padding-bottom">
+        <tn-loading v-if="loadingMore" mode="circle" color="#00BBE8"></tn-loading>
+        <text v-else-if="hasMore" class="tn-color-gray">{{ t('pullUpMore') }}</text>
+        <text v-else class="tn-color-gray">{{ t('noMore') }}</text>
+      </view>
+    </scroll-view>
+
+    <view v-else-if="!loading" class="empty-panel tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center animation-fade-in tn-padding-left tn-padding-right">
+      <tn-empty icon="order" :text="t('emptyTitle')"></tn-empty>
+      <view class="empty-desc tn-margin-top tn-text-center">{{ t('emptyDesc') }}</view>
+      <view class="empty-action tn-margin-top-xl" @click="goSelectRoom">
+        <text class="tn-text-bold">{{ t('goSelectRoom') }}</text>
+      </view>
+    </view>
+
+    <view v-if="loading && !list.length" class="empty-panel tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center tn-padding-left tn-padding-right">
+      <tn-loading mode="circle" color="#00BBE8" size="60"></tn-loading>
+      <view class="empty-desc tn-margin-top-lg">{{ t('loadingDesc') }}</view>
+    </view>
+
+    <!-- 支付定金须知弹窗 -->
+    <tn-popup v-model="showDepositNotice" mode="bottom" length="80%" :borderRadius="32" :closeBtn="true" @close="closeDepositNotice">
+      <view class="deposit-notice-popup">
+        <view class="popup-header">
+          <view class="popup-title">{{ t('depositNoticeTitle') }}</view>
+        </view>
+        <scroll-view scroll-y class="popup-body" @scrolltolower="onNoticeScrollToBottom">
+          <view class="notice-content">
+            <view class="notice-item">
+              <view class="notice-item-zh">1、缴纳线上定金可锁定房源并预约专属看房，平台收取定金后该房源临时下架，不再接待其他客户看房。</view>
+              <view class="notice-item-en">Payment of the online deposit reserves the housing unit and arranges exclusive on-site viewing for you. After receiving the deposit, we will temporarily remove the property from the rental list and stop arranging viewings for other clients.</view>
+            </view>
+            <view class="notice-item">
+              <view class="notice-item-zh">2、请于约定时间完成实地看房，并在看房结束后 3 个工作日内签署租赁合同；若逾期未看房或未完成签约，视作您主动放弃房源，定金不予退还。</view>
+              <view class="notice-item-en">You shall complete the on-site viewing at the agreed time and sign the rental contract within 3 working days after the viewing. Failure to complete the viewing or sign the contract within the time limit shall be deemed your voluntary waiver of the property, and the deposit will not be refunded.</view>
+            </view>
+            <view class="notice-item">
+              <view class="notice-item-zh">3、如因租客个人原因取消看房、看房后不愿承租房屋或拒绝签署租赁合同，定金不予退还。</view>
+              <view class="notice-item-en">The deposit is non-refundable if you cancel the viewing, refuse to rent the property or decline to sign the contract due to personal reasons.</view>
+            </view>
+            <view class="notice-item">
+              <view class="notice-item-zh">4、若因我方房源信息虚假、房屋无法正常交付等我方过错，造成无法看房或签约，定金将全额按原支付路径退还。</view>
+              <view class="notice-item-en">If the viewing or contract signing cannot be conducted due to our liabilities such as false property information or failure to deliver the housing normally, the full deposit will be refunded via your original payment channel.</view>
+            </view>
+            <view class="notice-item">
+              <view class="notice-item-zh">5、待双方正式签署租赁合同后，该定金可直接抵扣首期租金。</view>
+              <view class="notice-item-en">After both parties formally sign the rental contract, this deposit may be directly deducted from your initial rent.</view>
+            </view>
+            <view class="notice-item">
+              <view class="notice-item-zh">6、您支付定金，即代表已完整知晓房源全部信息，并自愿接受本须知全部条款约束。</view>
+              <view class="notice-item-en">By making the deposit payment, you confirm that you have fully reviewed all property information and voluntarily accept all terms and conditions set forth in this notice.</view>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="popup-footer">
+          <view
+            class="action-btn"
+            :class="{ 'action-btn--disabled': !hasReadNotice }"
+            @click="confirmAndPayDeposit"
+          >
+            <text class="tn-text-bold">{{ t('agreeAndPay') }}</text>
+            <text v-if="!hasReadNotice" class="tn-margin-left-xs tn-text-sm">({{ t('scrollToRead') }})</text>
+          </view>
+        </view>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+import { applicationFormMePage, accountQueryBills, paymentBillPay, paymentPayingBills, userDetailCancel } from '@/api/index.js'
+import { getMyApplicationList, saveActiveApplicationCode, saveMyApplicationList } from '@/utils/app-state'
+
+function formatPageResponse(response) {
+  const payload = response && response.data ? response.data : response
+  return payload && typeof payload === 'object' ? payload : {}
+}
+
+function normalizeApplicationList(list = []) {
+  if (!Array.isArray(list)) {
+    return []
+  }
+  return list
+    .filter(item => item && typeof item === 'object')
+    .map((item) => {
+      const remark = item && item.remark ? String(item.remark) : ''
+      const isViewingApplication = /预约看房申请|看房时间[:：]|意向房型[:：]|意向区域[:：]|viewing request|viewing time[:：]|preferred room type[:：]|preferred area[:：]/i.test(remark)
+      return {
+        ...item,
+        isViewingApplication
+      }
+    })
+}
+
+function parseExpireTimeToTimestamp(value) {
+  if (value === null || typeof value === 'undefined' || value === '') {
+    return 0
+  }
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value > 1e12 ? value : value * 1000
+  }
+  const text = String(value).trim()
+  if (!text) {
+    return 0
+  }
+  if (/^\d+$/.test(text)) {
+    const numericValue = Number(text)
+    if (!Number.isFinite(numericValue)) {
+      return 0
+    }
+    return numericValue > 1e12 ? numericValue : numericValue * 1000
+  }
+  const normalizedText = text.includes('T') ? text : text.replace(/-/g, '/')
+  const timestamp = Date.parse(normalizedText)
+  return Number.isFinite(timestamp) ? timestamp : 0
+}
+
+function padCountdownUnit(value) {
+  return String(Math.max(0, Number(value) || 0)).padStart(2, '0')
+}
+
+export default {
+  i18n: {
+    zh: {
+      pageTitle: '我的申请',
+      pageDesc: '您的入住和预约看房申请记录',
+      toolbarSummary: '共 {total} 条申请',
+      refreshing: '刷新中...',
+      refresh: '刷新状态',
+      apartmentLabel: '所属公寓',
+      occupantLabel: '入住人',
+      viewingTimeLabel: '预约时间',
+      leaseTermLabel: '预计租期',
+      submittedAtLabel: '提交时间',
+      remarkLabel: '补充说明',
+      payDeposit: '支付定金',
+      continuePay: '继续支付',
+      pendingPaymentTitle: '未完成支付订单',
+      pendingPaymentOrderNoLabel: '支付单号',
+      pendingPaymentAmountLabel: '订单金额',
+      pendingPaymentDescLabel: '支付说明',
+      pendingPaymentExpireLabel: '剩余支付时间',
+      pendingPaymentExpired: '已失效',
+      noMore: '没有更多申请了',
+      pullUpMore: '上拉加载更多',
+      emptyTitle: '暂无申请记录',
+      emptyDesc: '您还没有提交任何申请，去选房后可发起入住申请或预约看房。',
+      goSelectRoom: '去选房',
+      loadingDesc: '正在同步您的入住申请记录，请稍候。',
+      statusPending: '待审核',
+      statusApproved: '已通过',
+      statusRejected: '已拒绝',
+      statusFinished: '已结束',
+      statusProcessing: '处理中',
+      statusPendingPayment: '请支付定金',
+      statusWaitingRoomAssign: '等待预订中心分配房间',
+      statusReminderTitle: '当前进度提醒',
+      refreshEmptySuccess: '未查到申请单，已同步预订单',
+      refreshSuccess: '申请状态已刷新',
+      loadError: '申请记录加载失败',
+      cancelOrder: '取消订单',
+      cancelOrderLoading: '取消中...',
+      cancelOrderTitle: '取消订单',
+      cancelOrderContent: '取消后将关闭当前未支付的定金订单，是否继续？',
+      cancelOrderSuccess: '订单已取消',
+      cancelOrderFailed: '取消订单失败',
+      viewingApplicationTitle: '预约看房申请',
+      stayApplicationTitle: '入住申请',
+      missingBillCode: '申请单编号缺失',
+      missingApplicationCode: '申请编号缺失',
+      dateRangeJoiner: ' 至 ',
+      depositNoticeTitle: '租房定金须知',
+      agreeAndPay: '同意并支付',
+      scrollToRead: '请滑动阅读至底部',
+      fetchPaymentParamsFailed: '获取支付参数失败',
+      fetchWechatLoginCodeFailed: '获取微信登录凭证失败',
+      loadingBill: '正在获取账单...',
+      noPendingDepositBill: '暂无待支付定金账单',
+      loadingPayment: '正在拉起支付...',
+      depositPaymentDesc: '支付定金',
+      paymentSuccess: '支付成功',
+      paymentCanceled: '已取消支付',
+      paymentFailed: '支付失败'
+    },
+    en: {
+      pageTitle: 'My Applications',
+      pageDesc: 'Your stay and viewing application records',
+      toolbarSummary: '{total} applications',
+      refreshing: 'Refreshing...',
+      refresh: 'Refresh Status',
+      apartmentLabel: 'Apartment',
+      occupantLabel: 'Resident',
+      viewingTimeLabel: 'Viewing Time',
+      leaseTermLabel: 'Lease Term',
+      submittedAtLabel: 'Submitted At',
+      remarkLabel: 'Remarks',
+      payDeposit: 'Pay Deposit',
+      continuePay: 'Continue Pay',
+      pendingPaymentTitle: 'Unfinished Payment',
+      pendingPaymentOrderNoLabel: 'Payment Order No.',
+      pendingPaymentAmountLabel: 'Order Amount',
+      pendingPaymentDescLabel: 'Description',
+      pendingPaymentExpireLabel: 'Time Left',
+      pendingPaymentExpired: 'Expired',
+      noMore: 'No more applications',
+      pullUpMore: 'Pull up to load more',
+      emptyTitle: 'No applications yet',
+      emptyDesc: 'You have not submitted any application yet. Go select a room to start a stay or viewing application.',
+      goSelectRoom: 'Select Room',
+      loadingDesc: 'Syncing your application records. Please wait.',
+      statusPending: 'Pending',
+      statusApproved: 'Approved',
+      statusRejected: 'Rejected',
+      statusFinished: 'Closed',
+      statusProcessing: 'Processing',
+      statusPendingPayment: 'Please Pay Deposit',
+      statusWaitingRoomAssign: 'Waiting for Room Assignment',
+      statusReminderTitle: 'Current Progress',
+      refreshEmptySuccess: 'No application found. Reservation records synced.',
+      refreshSuccess: 'Application status refreshed',
+      loadError: 'Failed to load applications',
+      cancelOrder: 'Cancel Order',
+      cancelOrderLoading: 'Canceling...',
+      cancelOrderTitle: 'Cancel Order',
+      cancelOrderContent: 'This will close the current unpaid deposit order. Continue?',
+      cancelOrderSuccess: 'Order canceled',
+      cancelOrderFailed: 'Failed to cancel order',
+      viewingApplicationTitle: 'Viewing Request',
+      stayApplicationTitle: 'Stay Application',
+      missingBillCode: 'Missing application bill number',
+      missingApplicationCode: 'Missing application number',
+      dateRangeJoiner: ' to ',
+      depositNoticeTitle: 'Rental Deposit Notice',
+      agreeAndPay: 'Agree and Pay',
+      scrollToRead: 'Scroll to bottom',
+      fetchPaymentParamsFailed: 'Failed to get payment parameters',
+      fetchWechatLoginCodeFailed: 'Failed to get WeChat login code',
+      loadingBill: 'Loading bill...',
+      noPendingDepositBill: 'No pending deposit bill available',
+      loadingPayment: 'Opening payment...',
+      depositPaymentDesc: 'Deposit Payment',
+      paymentSuccess: 'Payment succeeded',
+      paymentCanceled: 'Payment canceled',
+      paymentFailed: 'Payment failed'
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      status: 0,
+      pageIndex: 1,
+      pageSize: 10,
+      total: 0,
+      list: [],
+      loading: false,
+      loadingMore: false,
+      hasMore: true,
+      showDepositNotice: false,
+      hasReadNotice: false,
+      pendingDepositReferenceTypeNo: '',
+      countdownNow: Date.now(),
+      cancelingReferenceTypeNo: ''
+    }
+  },
+  watch: {
+    language() {
+      this.reloadList(true)
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    }
+  },
+  onShow() {
+    this.load()
+  },
+  mounted() {
+    this.startCountdownTimer()
+  },
+  beforeDestroy() {
+    this.clearCountdownTimer()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pages.index.component.MyApplicationTab', key, params)
+    },
+    load(force = false) {
+      return this.reloadList(force)
+    },
+    getStatusText(status) {
+      const map = {
+        0: this.t('statusPending'),
+        10: this.t('statusApproved'),
+        20: this.t('statusRejected'),
+        99: this.t('statusFinished')
+      }
+      return map[status] || this.t('statusProcessing')
+    },
+    getDisplayStatusText(item = {}) {
+      if (this.$getLanguage() !== 'en' && item.statusDesc) {
+        return item.statusDesc
+      }
+      return this.getStatusText(item.status)
+    },
+    resolveStatusType(source = {}) {
+      const item = source && typeof source === 'object'
+        ? source
+        : { status: source }
+      const status = Number(item.status)
+      if (status === 10) {
+        return 'approved'
+      }
+      if (status === 20) {
+        return 'rejected'
+      }
+      if (status === 99) {
+        return 'finished'
+      }
+      return 'pending'
+    },
+    isPaidApplication(item = {}) {
+      return !item.isViewingApplication && Number(item.payStatus) === 10
+    },
+    shouldPayDeposit(item = {}) {
+      return !item.isViewingApplication
+        && Number(item.status) === 0
+        && Number(item.payStatus) !== 10
+    },
+    isWaitingRoomAssignment(item = {}) {
+      return !item.isViewingApplication
+        && Number(item.status) === 0
+        && Number(item.payStatus) === 10
+    },
+    getStatusReminderText(item = {}) {
+      if (this.shouldPayDeposit(item)) {
+        return this.t('statusPendingPayment')
+      }
+      if (this.isWaitingRoomAssignment(item)) {
+        return this.t('statusWaitingRoomAssign')
+      }
+      return ''
+    },
+    formatDateTime(value) {
+      if (!value) {
+        return '--'
+      }
+      const text = String(value).replace('T', ' ')
+      return text.length > 16 ? text.slice(0, 16) : text
+    },
+    formatDate(value) {
+      if (!value) {
+        return '--'
+      }
+      return String(value).slice(0, 10)
+    },
+    formatDateRange(start, end) {
+      if (!start && !end) {
+        return '--'
+      }
+      if (start && end) {
+        const startText = this.formatDateTime(start)
+        const endText = this.formatDateTime(end)
+        if (String(start).includes('T') || String(end).includes('T')) {
+          return `${startText}${this.t('dateRangeJoiner')}${endText}`
+        }
+      }
+      return `${this.formatDate(start)}${this.t('dateRangeJoiner')}${this.formatDate(end)}`
+    },
+    formatMoney(value) {
+      const amount = Number(value || 0)
+      return amount.toFixed(2)
+    },
+    getBillNo(item = {}) {
+      return item.no || item.billNo || ''
+    },
+    normalizeBillList(response) {
+      const payload = response && response.data ? response.data : response
+      if (Array.isArray(payload)) {
+        return payload.filter(item => item && typeof item === 'object')
+      }
+      if (payload && Array.isArray(payload.data)) {
+        return payload.data.filter(item => item && typeof item === 'object')
+      }
+      return []
+    },
+    parsePaymentInfo(paymentInfo) {
+      if (!paymentInfo) {
+        return {}
+      }
+      if (typeof paymentInfo === 'object') {
+        return paymentInfo
+      }
+      const text = String(paymentInfo).trim()
+      if (!text) {
+        return {}
+      }
+      try {
+        return JSON.parse(text)
+      } catch (error) {
+        return {}
+      }
+    },
+    normalizeWechatPayOptions(paymentInfo) {
+      const source = this.parsePaymentInfo(paymentInfo)
+      return {
+        provider: 'wxpay',
+        timeStamp: String(source.timeStamp || source.timestamp || source.time_stamp || ''),
+        nonceStr: source.nonceStr || source.noncestr || source.nonce_str || '',
+        package: source.package || source.packageValue || source.package_value || '',
+        signType: source.signType || source.sign_type || 'MD5',
+        paySign: source.paySign || source.paysign || source.pay_sign || ''
+      }
+    },
+    requestWechatPayment(paymentInfo) {
+      const payOptions = this.normalizeWechatPayOptions(paymentInfo)
+      if (!payOptions.timeStamp || !payOptions.nonceStr || !payOptions.package || !payOptions.paySign) {
+        return Promise.reject(new Error(this.t('fetchPaymentParamsFailed')))
+      }
+      return new Promise((resolve, reject) => {
+        uni.requestPayment({
+          ...payOptions,
+          success: resolve,
+          fail: reject
+        })
+      })
+    },
+    getWechatLoginCode() {
+      return new Promise((resolve, reject) => {
+        uni.login({
+          provider: 'weixin',
+          success: (res) => {
+            if (!res || !res.code) {
+              reject(new Error(this.t('fetchWechatLoginCodeFailed')))
+              return
+            }
+            resolve(res.code)
+          },
+          fail: reject
+        })
+      })
+    },
+    normalizePayingBills(response) {
+      const payload = response && response.data ? response.data : response
+      if (Array.isArray(payload)) {
+        return payload.filter(item => item && typeof item === 'object')
+      }
+      if (payload && Array.isArray(payload.data)) {
+        return payload.data.filter(item => item && typeof item === 'object')
+      }
+      return []
+    },
+    async getPendingPaymentOrder(billNo = '') {
+      const normalizedBillNo = String(billNo || '').trim()
+      if (!normalizedBillNo) {
+        return null
+      }
+      const response = await paymentPayingBills({
+        BillNo: normalizedBillNo
+      })
+      const orderList = this.normalizePayingBills(response)
+      return orderList.length ? orderList[0] : null
+    },
+    getApplicationPendingPaymentOrder(item = {}) {
+      return item && item.pendingPaymentOrder ? item.pendingPaymentOrder : null
+    },
+    getApplicationPendingPaymentOrderNo(item = {}) {
+      const order = this.getApplicationPendingPaymentOrder(item)
+      return order ? (order.payRequestNo || order.payNo || order.paymentNo || '--') : '--'
+    },
+    getApplicationPendingPaymentAmount(item = {}) {
+      const order = this.getApplicationPendingPaymentOrder(item)
+      const bill = item && item.pendingDepositBill ? item.pendingDepositBill : {}
+      if (order && (order.amount || order.amount === 0)) {
+        return order.amount
+      }
+      return bill.remainingAmount || bill.amount || 0
+    },
+    getApplicationPendingPaymentDescription(item = {}) {
+      const order = this.getApplicationPendingPaymentOrder(item)
+      return order ? (order.description || '') : ''
+    },
+    startCountdownTimer() {
+      if (this._countdownTimer) {
+        return
+      }
+      this._countdownTimer = setInterval(() => {
+        this.countdownNow = Date.now()
+      }, 1000)
+    },
+    clearCountdownTimer() {
+      if (this._countdownTimer) {
+        clearInterval(this._countdownTimer)
+        this._countdownTimer = null
+      }
+    },
+    getPendingPaymentExpireTimestamp(order = {}) {
+      return parseExpireTimeToTimestamp(order.expireTime || (order.cashier && order.cashier.expireTime) || '')
+    },
+    getPendingPaymentRemainingSeconds(order = {}) {
+      const expireTimestamp = this.getPendingPaymentExpireTimestamp(order)
+      if (!expireTimestamp) {
+        return 0
+      }
+      return Math.max(0, Math.ceil((expireTimestamp - this.countdownNow) / 1000))
+    },
+    formatPendingPaymentCountdown(seconds = 0) {
+      const totalSeconds = Math.max(0, Number(seconds) || 0)
+      const day = Math.floor(totalSeconds / 86400)
+      const hour = Math.floor((totalSeconds % 86400) / 3600)
+      const minute = Math.floor((totalSeconds % 3600) / 60)
+      const second = totalSeconds % 60
+      const timeText = `${padCountdownUnit(hour)}:${padCountdownUnit(minute)}:${padCountdownUnit(second)}`
+      return day > 0
+        ? (this.language === 'en' ? `${day}d ${timeText}` : `${day}天 ${timeText}`)
+        : timeText
+    },
+    isApplicationPendingPaymentExpired(item = {}) {
+      const order = this.getApplicationPendingPaymentOrder(item)
+      if (!order) {
+        return false
+      }
+      const expireTimestamp = this.getPendingPaymentExpireTimestamp(order)
+      if (!expireTimestamp) {
+        return false
+      }
+      return expireTimestamp <= this.countdownNow
+    },
+    getApplicationPendingPaymentExpireText(item = {}) {
+      const order = this.getApplicationPendingPaymentOrder(item)
+      if (!order) {
+        return ''
+      }
+      const expireTimestamp = this.getPendingPaymentExpireTimestamp(order)
+      if (!expireTimestamp) {
+        return ''
+      }
+      if (expireTimestamp <= this.countdownNow) {
+        return this.t('pendingPaymentExpired')
+      }
+      return this.formatPendingPaymentCountdown(this.getPendingPaymentRemainingSeconds(order))
+    },
+    getPendingPaymentActionText(item = {}) {
+      return this.isApplicationPendingPaymentExpired(item) ? this.t('payDeposit') : this.t('continuePay')
+    },
+    async loadPendingPaymentOrdersForList(list = []) {
+      const baseList = Array.isArray(list) ? list : []
+      const requestToken = Date.now()
+      this._pendingPaymentRequestToken = requestToken
+
+      await Promise.all(baseList.map(async (item, index) => {
+        if (!this.canViewBill(item)) {
+          return
+        }
+
+        const referenceTypeNo = this.resolveReferenceTypeNo(item)
+        if (!referenceTypeNo) {
+          return
+        }
+
+        try {
+          console.log('[MyApplicationTab] query bills for pending payment order', referenceTypeNo)
+          const billRes = await accountQueryBills({
+            referenceTypeNo,
+            status: 10,
+            paymentStatus: 0,
+            ProviderType: 'WechatMiniProgram'
+          })
+          const billList = this.normalizeBillList(billRes)
+          const bill = Array.isArray(billList) && billList.length ? billList[0] : null
+          if (!bill || this._pendingPaymentRequestToken !== requestToken) {
+            return
+          }
+
+          const billNo = this.getBillNo(bill)
+          if (!billNo) {
+            return
+          }
+
+          console.log('[MyApplicationTab] query payment/paying-bills', billNo)
+          const pendingPaymentOrder = await this.getPendingPaymentOrder(billNo).catch(() => null)
+          if (this._pendingPaymentRequestToken !== requestToken) {
+            return
+          }
+
+          const currentItem = this.list[index]
+          if (!currentItem || this.getApplicationKey(currentItem) !== this.getApplicationKey(item)) {
+            return
+          }
+
+          const updatedItem = {
+            ...currentItem,
+            pendingDepositBill: bill,
+            pendingPaymentOrder
+          }
+          this.$set(this.list, index, updatedItem)
+        } catch (error) {
+          console.log('[MyApplicationTab] load pending payment order failed', error)
+        }
+      }))
+    },
+    async refreshStatus() {
+      if (this.loading || this.loadingMore) {
+        return
+      }
+      await this.reloadList(true)
+      if (this.total === 0) {
+        this.$emit('refresh-shell-state')
+        uni.showToast({
+          title: this.t('refreshEmptySuccess'),
+          icon: 'none'
+        })
+        return
+      }
+      if (this.list.length) {
+        uni.showToast({
+          title: this.t('refreshSuccess'),
+          icon: 'none'
+        })
+      }
+    },
+    async reloadList(force = false) {
+      const now = Date.now()
+      if (!force && this._lastReloadListAt && now - this._lastReloadListAt < 600) {
+        return Promise.resolve()
+      }
+      if (!force && this._reloadListPromise) {
+        return this._reloadListPromise
+      }
+      this._lastReloadListAt = now
+      this.pageIndex = 1
+      this.hasMore = true
+      this.currentIndex = 0
+      this._reloadListPromise = this.fetchList(true).finally(() => {
+        this._reloadListPromise = null
+      })
+      return this._reloadListPromise
+    },
+    onSwiperChange(e) {
+      this.currentIndex = e.detail.current
+      if (this.currentIndex >= this.list.length - 2 && this.hasMore) {
+        this.loadMore()
+      }
+    },
+    async loadMore() {
+      if (!this.hasMore || this.loading || this.loadingMore) {
+        return
+      }
+      this.pageIndex += 1
+      await this.fetchList(false)
+    },
+    async fetchList(isReload = false) {
+      if (isReload) {
+        this.loading = true
+      } else {
+        this.loadingMore = true
+      }
+
+      const params = {
+        PageIndex: this.pageIndex,
+        PageSize: this.pageSize
+      }
+      if (this.status !== '' && this.status !== null && typeof this.status !== 'undefined') {
+        params.Status = this.status
+      }
+
+      await applicationFormMePage(params, this.language)
+        .then(async (response) => {
+          const pageData = formatPageResponse(response)
+          console.log('pageData', pageData)
+          const nextList = normalizeApplicationList(pageData.data || [])
+          const total = Number(pageData.total || 0)
+          const mergedList = normalizeApplicationList(isReload ? nextList : this.list.concat(nextList))
+            .map(item => ({
+              ...item,
+              pendingDepositBill: item && item.pendingDepositBill ? item.pendingDepositBill : null,
+              pendingPaymentOrder: item && item.pendingPaymentOrder ? item.pendingPaymentOrder : null
+            }))
+
+          this.total = total
+          this.list = mergedList
+          this.hasMore = this.list.length < total && nextList.length > 0
+          saveMyApplicationList(this.list)
+
+          const activeCode = this.resolvePreferredReferenceTypeNo(this.list)
+          if (activeCode) {
+            saveActiveApplicationCode(activeCode)
+          }
+
+          await this.loadPendingPaymentOrdersForList(this.list)
+        })
+        .catch((error) => {
+          if (!isReload) {
+            this.pageIndex = Math.max(1, this.pageIndex - 1)
+          }
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('loadError'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.loading = false
+          this.loadingMore = false
+        })
+    },
+    changeStatus(value) {
+      if (this.status === value) {
+        return
+      }
+      this.status = value
+      this.reloadList()
+    },
+    getApplicationCode(item = {}) {
+      return item.detailCode || '--'
+    },
+    getApplicationKey(item = {}) {
+      return item.detailCode || item.formId || `${item.createTime || 'application'}-${item.phone || item.userName || 'unknown'}`
+    },
+    getApplicationTitle(item = {}) {
+      if (item.isViewingApplication) {
+        return this.t('viewingApplicationTitle')
+      }
+      return item.intendedRoomTypeName || this.t('stayApplicationTitle')
+    },
+    resolveReferenceTypeNo(item = {}) {
+      return item.detailCode || ''
+    },
+    canViewBill(item = {}) {
+      return this.shouldPayDeposit(item)
+        && this.resolveReferenceTypeNo(item)
+    },
+    canCancelOrder(item = {}) {
+      return this.shouldPayDeposit(item)
+        && this.resolveReferenceTypeNo(item)
+    },
+    getCancelButtonText(item = {}) {
+      return this.cancelingReferenceTypeNo === this.resolveReferenceTypeNo(item)
+        ? this.t('cancelOrderLoading')
+        : this.t('cancelOrder')
+    },
+    confirmCancelOrder() {
+      return new Promise((resolve) => {
+        uni.showModal({
+          title: this.t('cancelOrderTitle'),
+          content: this.t('cancelOrderContent'),
+          confirmColor: '#ef4444',
+          success: (res) => resolve(!!(res && res.confirm)),
+          fail: () => resolve(false)
+        })
+      })
+    },
+    syncCanceledItem(referenceTypeNo = '') {
+      const targetCode = String(referenceTypeNo || '')
+      if (!targetCode) {
+        return
+      }
+      const updateItem = (item = {}) => {
+        if (String(this.resolveReferenceTypeNo(item)) !== targetCode) {
+          return item
+        }
+        return {
+          ...item,
+          status: 99,
+          statusDesc: this.t('statusFinished'),
+          pendingDepositBill: null,
+          pendingPaymentOrder: null
+        }
+      }
+      this.list = normalizeApplicationList(this.list.map(updateItem))
+      saveMyApplicationList(this.list)
+      const cachedList = normalizeApplicationList(getMyApplicationList())
+      if (cachedList.length) {
+        saveMyApplicationList(cachedList.map(updateItem))
+      }
+    },
+    cancelOrderAction(event) {
+      const dataset = event && event.currentTarget ? event.currentTarget.dataset || {} : {}
+      const referenceTypeNo = dataset.referenceTypeNo || dataset.referenceTypeNo === 0
+        ? String(dataset.referenceTypeNo)
+        : ''
+      if (!referenceTypeNo || this.cancelingReferenceTypeNo) {
+        return
+      }
+      this.confirmCancelOrder()
+        .then((confirmed) => {
+          if (!confirmed) {
+            return
+          }
+          this.cancelingReferenceTypeNo = referenceTypeNo
+          return userDetailCancel({
+            detailCode: referenceTypeNo,
+            code: referenceTypeNo,
+            referenceTypeNo
+          }, this.language)
+            .then(async () => {
+              this.syncCanceledItem(referenceTypeNo)
+              await this.reloadList(true)
+              this.$emit('refresh-shell-state')
+              uni.showToast({
+                title: this.t('cancelOrderSuccess'),
+                icon: 'success'
+              })
+            })
+        })
+        .catch((error) => {
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('cancelOrderFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.cancelingReferenceTypeNo = ''
+        })
+    },
+    continuePendingPaymentAction(event) {
+      const dataset = event && event.currentTarget ? event.currentTarget.dataset || {} : {}
+      const referenceTypeNo = dataset.referenceTypeNo || dataset.referenceTypeNo === 0
+        ? String(dataset.referenceTypeNo)
+        : ''
+      if (!referenceTypeNo) {
+        uni.showToast({
+          title: this.t('missingBillCode'),
+          icon: 'none'
+        })
+        return
+      }
+      this.payDepositByReferenceTypeNo(referenceTypeNo)
+    },
+    resolvePreferredReferenceTypeNo(list = []) {
+      const sortedList = [...list]
+        .filter(item => !item.isViewingApplication && this.resolveReferenceTypeNo(item))
+        .sort((a, b) => new Date(b.createTime || 0).getTime() - new Date(a.createTime || 0).getTime())
+
+      if (!sortedList.length) {
+        return ''
+      }
+
+      const preferredItem = sortedList.find(item => Number(item.status) !== 99) || sortedList[0]
+      return this.resolveReferenceTypeNo(preferredItem)
+    },
+    async payDepositAction(event) {
+      const dataset = event && event.currentTarget ? event.currentTarget.dataset || {} : {}
+      const referenceTypeNo = dataset.referenceTypeNo || dataset.referenceTypeNo === 0
+        ? String(dataset.referenceTypeNo)
+        : ''
+      if (!referenceTypeNo) {
+        uni.showToast({
+          title: this.t('missingBillCode'),
+          icon: 'none'
+        })
+        return
+      }
+
+      this.pendingDepositReferenceTypeNo = referenceTypeNo
+      this.hasReadNotice = false
+      this.showDepositNotice = true
+    },
+    onNoticeScrollToBottom() {
+      this.hasReadNotice = true
+    },
+    closeDepositNotice() {
+      this.showDepositNotice = false
+      this.pendingDepositReferenceTypeNo = ''
+    },
+    async payDepositByReferenceTypeNo(referenceTypeNo = '') {
+      if (!referenceTypeNo) {
+        return
+      }
+
+      saveActiveApplicationCode(referenceTypeNo)
+
+      uni.showLoading({ title: this.t('loadingBill') })
+      try {
+        const billRes = await accountQueryBills({
+          referenceTypeNo,
+          status: 10,
+          paymentStatus: 0,
+          ProviderType: 'WechatMiniProgram'
+        })
+        const billList = billRes && billRes.data ? billRes.data : billRes
+        if (!Array.isArray(billList) || !billList.length) {
+          uni.showToast({ title: this.t('noPendingDepositBill'), icon: 'none' })
+          return
+        }
+        const bill = billList[0]
+        const billNo = this.getBillNo(bill)
+        const pendingPaymentOrder = await this.getPendingPaymentOrder(billNo).catch(() => null)
+
+        uni.showLoading({ title: this.t('loadingPayment') })
+
+        const reusablePendingPaymentOrder = pendingPaymentOrder && !this.isApplicationPendingPaymentExpired({
+          pendingPaymentOrder
+        })
+          ? pendingPaymentOrder
+          : null
+
+        if (reusablePendingPaymentOrder && reusablePendingPaymentOrder.cashier && reusablePendingPaymentOrder.cashier.paymentInfo) {
+          await this.requestWechatPayment(reusablePendingPaymentOrder.cashier.paymentInfo)
+        } else {
+          const wechatCode = await this.getWechatLoginCode()
+          const payRes = await paymentBillPay({
+            referenceTypeNo,
+            billNo,
+            payMethod: 'Wechat',
+            amount: Number(bill.remainingAmount || bill.amount || 0),
+            description: bill.billName || bill.name || this.t('depositPaymentDesc'),
+            ExtraInfo: wechatCode
+          })
+
+          const payload = payRes && payRes.data ? payRes.data : payRes
+          const cashier = payload && payload.cashier ? payload.cashier : {}
+          await this.requestWechatPayment(cashier.paymentInfo)
+        }
+
+        uni.showToast({ title: this.t('paymentSuccess'), icon: 'success' })
+      } catch (error) {
+        const errMsg = error && (error.errMsg || error.message || error.msg) ? (error.errMsg || error.message || error.msg) : this.t('paymentFailed')
+        if (/cancel/i.test(errMsg)) {
+          uni.showToast({ title: this.t('paymentCanceled'), icon: 'none' })
+        } else {
+          uni.showToast({ title: errMsg, icon: 'none' })
+        }
+      } finally {
+        uni.hideLoading()
+        setTimeout(() => {
+          this.refreshStatus()
+        }, 1500)
+      }
+    },
+    async confirmAndPayDeposit() {
+      if (!this.hasReadNotice) {
+        return
+      }
+      const referenceTypeNo = this.pendingDepositReferenceTypeNo
+      this.showDepositNotice = false
+      this.pendingDepositReferenceTypeNo = ''
+      return this.payDepositByReferenceTypeNo(referenceTypeNo)
+    },
+    goToApplicationDetail(item = {}) {
+      const code = item.detailCode || ''
+      if (!code) {
+        uni.showToast({
+          title: this.t('missingApplicationCode'),
+          icon: 'none'
+        })
+        return
+      }
+      uni.navigateTo({
+        url: `/pkgService/application_detail/application_detail?code=${encodeURIComponent(code)}&payload=${encodeURIComponent(JSON.stringify(item))}`
+      })
+    },
+    goSelectRoom() {
+      uni.reLaunch({
+        url: '/pages/index/index?index=0&pageId=select-room'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.my-application-page {
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  overflow: hidden;
+}
+
+.page-header {
+  flex-shrink: 0;
+  padding-bottom: 20rpx;
+}
+
+.page-title {
+  font-size: 44rpx;
+  font-weight: 800;
+  letter-spacing: 1rpx;
+}
+
+.list-scroll-view {
+  flex: 1;
+  height: 0;
+}
+
+.application-card,
+.empty-panel {
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+
+.card-title-wrap {
+  display: flex;
+  align-items: center;
+}
+
+.title-icon {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 12rpx;
+  background: rgba($brand-primary, 0.08);
+  color: $brand-primary;
+  font-size: 28rpx;
+}
+
+.card-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1A2233;
+}
+
+.card-code,
+.info-label,
+.remark-label {
+  color: #6A7A99;
+}
+
+.card-code,
+.info-label,
+.info-value,
+.remark-text {
+  font-size: 24rpx;
+}
+
+.status-badge {
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.status-pending {
+  color: #b45309;
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.status-approved {
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.12);
+}
+
+.status-rejected {
+  color: #DC2626;
+  background: rgba(220, 38, 38, 0.12);
+}
+
+.status-finished {
+  color: #64748B;
+  background: #F1F5F9;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.info-row {
+  padding: 16rpx 0;
+  border-bottom: 1px dashed rgba($brand-primary, 0.15);
+  gap: 24rpx;
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  flex: 0 0 170rpx;
+  color: #6A7A99;
+}
+
+.info-value {
+  flex: 1;
+  color: #1A2233;
+  text-align: right;
+  word-break: break-all;
+  font-weight: 500;
+}
+
+.info-value--highlight {
+  color: #c2410c;
+  font-weight: 700;
+}
+
+.info-value--expired {
+  color: #dc2626;
+  font-weight: 700;
+}
+
+.remark-panel,
+.reminder-panel {
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: rgba($brand-primary, 0.02);
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+
+.pending-payment-panel {
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: linear-gradient(180deg, rgba(255, 247, 237, 0.9) 0%, rgba(255, 251, 245, 0.95) 100%);
+  border: 1rpx solid rgba(249, 115, 22, 0.16);
+}
+
+.pending-payment-title,
+.reminder-title {
+  margin-bottom: 12rpx;
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #c2410c;
+}
+
+.reminder-title {
+  color: $brand-primary;
+}
+
+.remark-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
+}
+
+.remark-label {
+  flex: 0 0 96rpx;
+  font-size: 22rpx;
+  color: #6A7A99;
+}
+
+.remark-text {
+  flex: 1;
+  color: #1A2233;
+  line-height: 1.7;
+}
+
+.card-footer {
+  display: flex;
+  gap: 20rpx;
+  justify-content: flex-end;
+}
+
+.cancel-btn,
+.pay-btn {
+  min-width: 220rpx;
+  height: 84rpx;
+  padding: 0 36rpx;
+  border-radius: 999rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.25);
+  font-size: 26rpx;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: all 0.3s;
+}
+
+.cancel-btn {
+  background: #ffffff;
+  color: #ef4444;
+  border: 1rpx solid rgba(239, 68, 68, 0.3);
+  box-shadow: 0 8rpx 20rpx rgba(239, 68, 68, 0.08);
+}
+
+.pay-btn:active,
+.cancel-btn:active {
+  transform: scale(0.98);
+}
+
+.cancel-btn--loading,
+.pay-btn--loading {
+  opacity: 0.72;
+}
+
+.empty-action {
+  width: 100%;
+  height: 96rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+  transition: all 0.3s;
+}
+
+.empty-action:active {
+  transform: scale(0.98);
+}
+
+.empty-panel .empty-action {
+  width: 80%;
+}
+
+.empty-desc {
+  color: #94A3B8;
+  font-size: 28rpx;
+  line-height: 1.6;
+}
+
+.animation-fade-in {
+  animation: fadeIn 0.4s ease forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 隐藏 scroll-view 滚动条 */
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+.deposit-notice-popup {
+  background: #FFFFFF;
+  border-radius: 32rpx 32rpx 0 0;
+  display: flex;
+  flex-direction: column;
+  height: 80vh;
+}
+
+.popup-header {
+  padding: 32rpx;
+  text-align: center;
+  border-bottom: 1px solid #F1F5F9;
+}
+
+.popup-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #1A2233;
+}
+
+.popup-body {
+  flex: 1;
+  padding: 32rpx;
+  overflow-y: auto;
+}
+
+.notice-content {
+  padding-bottom: 40rpx;
+}
+
+.notice-item {
+  margin-bottom: 32rpx;
+}
+
+.notice-item-zh {
+  font-size: 28rpx;
+  color: #334155;
+  line-height: 1.6;
+  margin-bottom: 8rpx;
+  font-weight: 500;
+}
+
+.notice-item-en {
+  font-size: 24rpx;
+  color: #64748B;
+  line-height: 1.5;
+}
+
+.popup-footer {
+  padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+  border-top: 1px solid #F1F5F9;
+  background: #FFFFFF;
+  display: flex;
+  justify-content: center;
+}
+
+.action-btn {
+  min-width: 420rpx;
+  max-width: 100%;
+  height: 92rpx;
+  padding: 0 40rpx;
+  border-radius: 999rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  color: #ffffff;
+  box-shadow: 0 16rpx 34rpx rgba(34, 197, 94, 0.24);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.action-btn:active {
+  transform: scale(0.98);
+}
+
+.action-btn--disabled {
+  opacity: 0.6;
+  background: #94A3B8;
+  box-shadow: none;
+}
+</style>
diff --git a/pages/index/component/ProfileCenterTab.vue b/pages/index/component/ProfileCenterTab.vue
new file mode 100644
index 0000000..f9dcd5a
--- /dev/null
+++ b/pages/index/component/ProfileCenterTab.vue
@@ -0,0 +1,1031 @@
+<template>
+  <view class="profile-page tn-safe-area-inset-bottom">
+    
+    <!-- 头部背景与用户信息 (悬浮质感设计) -->
+    <view class="profile-header-bg">
+      <view class="bg-shape-1"></view>
+      <view class="bg-shape-2"></view>
+    </view>
+
+    <view class="profile-header tn-padding" :style="{ paddingTop: headerPaddingTop + 'px' }">
+      <view class="user-profile-card tn-padding-lg">
+        <view class="card-decor"></view>
+        
+        <!-- 用户身份信息 -->
+        <view class="user-info-row tn-flex tn-flex-row-between tn-flex-col-center">
+          <view class="tn-flex tn-flex-col-center" v-if="isLogin" style="flex: 1; overflow: hidden;">
+            <view class="avatar-wrapper" style="position: relative;">
+              <view class="avatar-box avatar-text">
+                <image v-if="displayAvatar" :src="displayAvatar" class="avatar-image" mode="aspectFill"></image>
+                <template v-else>{{ displayUserInitial }}</template>
+              </view>
+              <view 
+                v-if="userInfo.gender"
+                class="gender-badge tn-flex tn-flex-col-center tn-flex-row-center"
+                :class="userInfo.gender === 1 || userInfo.gender === 'M' || userInfo.gender === '男' ? 'gender-male' : 'gender-female'"
+              >
+                <text :class="userInfo.gender === 1 || userInfo.gender === 'M' || userInfo.gender === '男' ? 'tn-icon-male' : 'tn-icon-female'" class="gender-badge-icon"></text>
+              </view>
+            </view>
+            <view class="tn-margin-left-md" style="flex: 1; overflow: hidden;">
+              <view class="user-name clamp-text-1">
+                {{ displayUserName }}
+              </view>
+              <view class="user-id-wrap tn-margin-top-xs clamp-text-1">
+                <text class="user-id">ID: {{ displayUserId }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="tn-flex tn-flex-col-center" v-else @click="handleGuestEntry" style="flex: 1;">
+            <view class="avatar-box guest-avatar-box">
+              <text class="tn-icon-my-fill guest-avatar-icon"></text>
+            </view>
+            <view class="tn-margin-left-md">
+              <view class="user-name clamp-text-1">
+                {{ t('guest') }}
+              </view>
+              <view class="tn-color-gray tn-text-sm tn-margin-top-xs">{{ guestHeaderDesc }}</view>
+            </view>
+          </view>
+
+          <view v-if="isLogin">
+            <view class="edit-btn">
+              <text class="tn-icon-edit edit-btn-icon"></text>
+            </view>
+          </view>
+        </view>
+        
+        <view class="card-divider"></view>
+        
+        <!-- 数据统计面板 -->
+        <view class="stats-row tn-flex tn-flex-row-between">
+          <view class="stat-item">
+            <view class="stat-value">{{ getStayDaysText() }}</view>
+            <view class="stat-label">{{ t('daysIn') }}</view>
+          </view>
+          <view class="stat-divider"></view>
+          <view class="stat-item">
+            <view class="stat-value">{{ getActivityCountText() }}</view>
+            <view class="stat-label">{{ t('activities') }}</view>
+          </view>
+          <view class="stat-divider"></view>
+          <view class="stat-item">
+            <view class="stat-value">{{ getPointsText() }}</view>
+            <view class="stat-label">{{ t('points') }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 下方内容区 -->
+    <view class="profile-content tn-padding">
+
+      <view class="guest-registration-card tn-padding-lg tn-margin-bottom-lg" v-if="!isLogin">
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+          <view>
+            <view class="tn-text-bold tn-text-lg tn-color-black">{{ t('registrationRecordTitle') }}</view>
+            <view class="tn-margin-top-sm tn-text-sm tn-color-gray">
+              {{ registrationApplication ? t('registrationRecordSubmittedDesc') : t('registrationRecordGuestDesc') }}
+            </view>
+          </view>
+          <view class="custom-btn btn-primary guest-registration-btn" @click="goToRegistrationRecords">
+            <text class="tn-text-sm tn-text-bold">{{ t('viewNow') }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="application-status-card tn-padding-lg tn-margin-bottom-lg" v-if="isLogin && pendingContractCount">
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+          <view class="tn-text-bold tn-text-lg tn-color-black">{{ t('contractStatusTitle') }}</view>
+          <view class="status-tag status-pending">
+            {{ t('contractPendingTag') + ' ' + pendingContractCount }}
+          </view>
+        </view>
+        <view class="tn-margin-top-sm tn-color-gray tn-text-sm">
+          {{ t('contractPendingDesc') }}
+        </view>
+        <view class="tn-margin-top tn-flex tn-flex-row-between tn-flex-col-center">
+          <view class="tn-color-gray tn-text-xs">
+            {{ t('pendingCountText') + '：' + pendingContractCount }}
+          </view>
+          <view class="custom-btn btn-primary" style="padding: 8rpx 28rpx;" @click="goToContractList">
+            <text class="tn-text-sm tn-text-bold">{{ t('viewDetail') }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 核心服务 (宫格) -->
+      <view class="core-services-card tn-padding-lg tn-margin-bottom-lg" v-if="isLogin">
+        <view class="tn-text-bold tn-text-lg tn-color-black tn-margin-bottom">{{ t('coreServices') }}</view>
+        <view class="tn-flex tn-flex-row-between">
+          <view 
+            class="core-service-item tn-flex tn-flex-direction-column tn-flex-col-center" 
+            v-for="item in coreServices" 
+            :key="item.key"
+            @click="handleCoreService(item.key)"
+          >
+            <view class="service-icon-box tn-flex tn-flex-col-center tn-flex-row-center">
+              <text :class="item.icon" class="service-icon-symbol"></text>
+            </view>
+            <text class="tn-margin-top-sm tn-text-sm tn-color-black">{{ t(item.i18nKey) }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 快捷菜单 -->
+      <view class="menu-group" v-if="isLogin">
+        <view
+          class="menu-item tn-flex tn-flex-row-between tn-flex-col-center"
+          v-for="item in businessMenus"
+          :key="item.key"
+          @click="openBusinessPage(item)"
+        >
+          <view class="tn-flex tn-flex-col-center">
+            <view class="menu-icon"><text :class="item.icon" class="menu-icon-symbol"></text></view>
+            <text class="tn-margin-left-sm tn-text-md tn-color-black tn-text-bold">{{ getMenuLabel(item) }}</text>
+          </view>
+          <view class="tn-flex tn-flex-col-center">
+            <view v-if="item.available === false" class="menu-coming-soon">{{ t('comingSoon') }}</view>
+            <text class="tn-icon-right menu-arrow"></text>
+          </view>
+        </view>
+        <view class="menu-item tn-flex tn-flex-row-between tn-flex-col-center" @click="handleLanguageToggle">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="menu-icon"><text class="tn-icon-set menu-icon-symbol"></text></view>
+            <text class="tn-margin-left-sm tn-text-md tn-color-black tn-text-bold">{{ t('languageSwitch') }}</text>
+          </view>
+          <text class="tn-text-sm tn-color-gray">{{ t('languageToggleLabel') }}</text>
+        </view>
+        
+      </view>
+      
+      <!-- 退出登录 -->
+      <view class="tn-margin-top-xl tn-text-center" v-if="isLogin">
+        <view class="custom-btn btn-danger" style="width: 80%; height: 90rpx;" @click="handleLogout">
+          <text class="tn-text-bold">{{ t('logout') }}</text>
+        </view>
+      </view>
+      
+      <!-- 底部占位避开 Tabbar -->
+      <view style="height: 150rpx;"></view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+import { clearLoginSession, getSessionSnapshot } from '../../../utils/app-state'
+import { registrationMyorder } from '../../../api/index.js'
+import { fetchEnums, getApprovalStatusLabel } from '../../../utils/enum-store'
+import { getBookingStatusText, getBookingTagType, getStoredUser } from '../../../utils/flow'
+import { compactEnglishText } from '../../../utils/select-room-normalizers'
+import { addFilePrefix } from '../../../utils/common'
+
+export default {
+  name: 'ProfileCenterTab',
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    headerPaddingTop() {
+      return typeof this.vuex_custom_bar_height === 'number' ? this.vuex_custom_bar_height : 0
+    },
+    displayUserName() {
+      return this.userInfo.name || this.userInfo.account || this.userInfo.username || this.userInfo.mobile || this.t('userFallback')
+    },
+    displayUserInitial() {
+      const firstChar = this.userInfo.firstChar
+      if (firstChar) return String(firstChar).charAt(0).toUpperCase()
+      return this.displayUserName.charAt(0).toUpperCase()
+    },
+    displayUserId() {
+      return this.userInfo.id || this.userInfo.account || this.userInfo.username || '--'
+    },
+    displayAvatar() {
+      return addFilePrefix(this.userInfo.avatar || this.userInfo.base64Face || '')
+    },
+    registrationStatus() {
+      if (!this.registrationApplication) {
+        return 'unsubmitted'
+      }
+      const status = this.registrationApplication.approvalStatus
+      if (status === 1) return 'approved'
+      if (status === -1) return 'rejected'
+      if (status === 0) return 'pending'
+      return 'unsubmitted'
+    },
+    guestHeaderDesc() {
+      return this.registrationApplication
+        ? `${this.t('registrationStatusTitle')}：${this.getRegistrationStatusText(this.registrationStatus)}`
+        : this.t('clickToLogin')
+    },
+    registrationStatusDesc() {
+      if (!this.registrationApplication) return this.t('clickToLogin')
+      if (this.registrationStatus === 'pending') {
+        return this.t('registrationPendingDesc')
+      }
+      if (this.registrationStatus === 'approved') {
+        return this.t('registrationApprovedDesc')
+      }
+      if (this.registrationStatus === 'rejected') {
+        return this.registrationApplication.approveReason || this.t('registrationRejectedDesc')
+      }
+      return this.t('registrationEmptyDesc')
+    },
+    currentBookingCard() {
+      if (!this.isLogin) {
+        return null
+      }
+      const booking = this.userInfo.currentBooking || null
+      if (!booking) {
+        return null
+      }
+      return {
+        orderNo: booking.orderNo || '',
+        status: booking.status || booking.statusKey || this.userInfo.bookingStatus || 'none',
+        rejectReason: booking.rejectReasonText || booking.rejectReason || this.userInfo.bookingRejectReason || ''
+      }
+    }
+  },
+  watch: {
+    language() {
+      fetchEnums(false, this.language)
+      if (!this.isLogin) {
+        this.fetchActiveRegistration()
+      }
+    }
+  },
+  data() {
+    return {
+      isLogin: false,
+      hasCheckedIn: false,
+      userInfo: {},
+      registrationApplication: null,
+      pendingContractCount: 0,
+      businessMenus: [
+        { key: 'lock', label: '门锁授权', labelEn: 'Smart Lock', icon: 'tn-icon-lock', title: '门锁授权', titleEn: 'Smart Lock', desc: '管理门锁授权对象、时段和权限状态。', descEn: 'Manage smart lock authorization, schedule, and permission status.', available: true },
+        { key: 'serviceOrder', label: '服务订单', labelEn: 'Service Orders', labelEnShort: 'Orders', icon: 'tn-icon-calendar', title: '服务订单', titleEn: 'Service Orders', desc: '查看报修、投诉、续住、退房等服务订单。', descEn: 'View repair, complaint, renewal, and checkout service orders.', available: true },
+        { key: 'registrationRecord', label: '注册记录', labelEn: 'Registration Records', labelEnShort: 'Records', icon: 'tn-icon-form', title: '注册记录', titleEn: 'Registration Records', desc: '查看当前微信账号提交的人员注册申请记录与审批状态。', descEn: 'Review registration records and approval status for this Wechat account.', available: true },
+        { key: 'points', label: '积分', labelEn: 'Points', icon: 'tn-icon-star-fill', title: '积分', titleEn: 'Points', desc: '查看积分余额、获取记录和使用说明。', descEn: 'Check point balance, earning records, and usage instructions.', available: true },
+        { key: 'code', label: '一码通', labelEn: 'Pass Code', icon: 'tn-icon-qr-code', title: '一码通', titleEn: 'Pass Code', desc: '查看门禁码、访客码和社区通行二维码。', descEn: 'View access codes, visitor codes, and community QR passes.', available: true },
+        { key: 'butler', label: '联系管家', labelEn: 'Contact Butler', icon: 'tn-icon-service-fill', title: '联系管家', titleEn: 'Contact Butler', desc: '联系专属管家，沟通入住和住中服务事项。', descEn: 'Contact your butler about move-in and in-stay services.', available: true }
+      ],
+      coreServices: [
+        { key: 'application', i18nKey: 'application', icon: 'tn-icon-edit-form' },
+        { key: 'bookingList', i18nKey: 'bookingList', icon: 'tn-icon-order-fill' },
+        { key: 'contract', i18nKey: 'contract', icon: 'tn-icon-copy' },
+        { key: 'bill', i18nKey: 'bill', icon: 'tn-icon-money' }
+      ],
+      i18n: {
+        zh: {
+          edit: '编辑资料',
+          guest: '游客',
+          clickToLogin: '点击登录',
+          daysIn: '入住天数',
+          activities: '参与活动',
+          points: '积分',
+          applicationStatus: '申请进度',
+          registrationStatusTitle: '注册申请进度',
+          notSubmittedYet: '暂未提交注册申请',
+          registrationPendingDesc: '注册申请审核中，审批通过后才可登录',
+          registrationApprovedDesc: '注册申请已通过，可前往登录',
+          registrationRejectedDesc: '注册申请已驳回，请查看原因后重新提交',
+          registrationEmptyDesc: '暂未提交注册申请',
+          registrationRecordTitle: '注册记录',
+          registrationRecordSubmittedDesc: '当前微信账号已提交注册申请，可查看历史记录与审批状态。',
+          registrationRecordGuestDesc: '未登录也可查看当前微信账号提交的注册申请记录。',
+          viewNow: '立即查看',
+          statusPending: '审核中',
+          statusApproved: '已通过',
+          statusRejected: '已拒绝',
+          remind: '催一下',
+          done: '已完成',
+          viewDetail: '查看详情',
+          exclusiveButler: '专属管家',
+          onlineService: '24小时在线服务',
+          contact: '联系',
+          application: '入住申请',
+          bookingList: '预订记录',
+          bookingStatusTitle: '预订审核进度',
+          contractStatusTitle: '合同状态',
+          bookingNo: '预定单号',
+          bookingPlaceholder: '支付后生成的预定单会显示在这里',
+          bookingProgressDesc: '支付完成后会进入审核，审核通过后分配管家并等待分房号。',
+          contractPendingTag: '待签约',
+          contractPendingDesc: '您当前有待签署合同，请尽快查看并完成签约。',
+          pendingCountText: '待签合同',
+          contract: '我的合同',
+          bill: '账单',
+          coreServices: '我的服务',
+          comingSoon: '建设中',
+          settings: '偏好设置',
+          languageSwitch: '语言切换',
+          languageToggleLabel: 'EN',
+          logout: '退出登录',
+          logoutConfirmTitle: '提示',
+          logoutConfirmContent: '确定要退出登录吗？',
+          logoutSuccess: '已退出',
+          userFallback: '用户',
+          submitRequest: '提交申请',
+          completeFormBeforeSubmit: '请完善表单信息后提交。',
+          comingSoonDesc: '{title} 功能正在建设中，后续开放后会在这里提供正式入口和数据。'
+        },
+        en: {
+          edit: 'Edit',
+          guest: 'Guest',
+          clickToLogin: 'Click to Sign In',
+          daysIn: 'Days Stayed',
+          activities: 'Activities',
+          points: 'Points',
+          applicationStatus: 'Application Status',
+          registrationStatusTitle: 'Registration Status',
+          notSubmittedYet: 'No registration submitted',
+          registrationPendingDesc: 'Registration is under review',
+          registrationApprovedDesc: 'Registration approved, ready to sign in',
+          registrationRejectedDesc: 'Registration rejected, please review the reason',
+          registrationEmptyDesc: 'No registration submitted',
+          registrationRecordTitle: 'Registration Records',
+          registrationRecordSubmittedDesc: 'A registration has been submitted with this Wechat account. You can review its history and approval status.',
+          registrationRecordGuestDesc: 'You can still review registration records submitted with this Wechat account before signing in.',
+          viewNow: 'View Now',
+          statusPending: 'Under Review',
+          statusApproved: 'Approved',
+          statusRejected: 'Rejected',
+          remind: 'Remind',
+          done: 'Done',
+          viewDetail: 'Details',
+          exclusiveButler: 'Exclusive Butler',
+          onlineService: '24/7 Online Service',
+          contact: 'Contact',
+          application: 'Applications',
+          bookingList: 'Bookings',
+          bookingStatusTitle: 'Booking Progress',
+          contractStatusTitle: 'Contract Status',
+          bookingNo: 'Booking No.',
+          bookingPlaceholder: 'Your booking will appear here after payment',
+          bookingProgressDesc: 'Booking will be reviewed after payment. Butler will be assigned upon approval.',
+          contractPendingTag: 'Pending',
+          contractPendingDesc: 'You have contracts waiting for signature. Please review them soon.',
+          pendingCountText: 'Pending Contracts',
+          contract: 'My Contract',
+          bill: 'Billing',
+          coreServices: 'My Services',
+          comingSoon: 'Soon',
+          settings: 'Preferences',
+          languageSwitch: 'Language',
+          languageToggleLabel: '中文',
+          logout: 'Log Out',
+          logoutConfirmTitle: 'Notice',
+          logoutConfirmContent: 'Are you sure to log out?',
+          logoutSuccess: 'Logged out',
+          userFallback: 'User',
+          submitRequest: 'Submit Request',
+          completeFormBeforeSubmit: 'Please complete the form before submitting.',
+          comingSoonDesc: '{title} is under development. The formal entry and data will be available here later.'
+        }
+      }
+    }
+  },
+  async mounted() {
+    await fetchEnums(false, this.language)
+    this.checkLoginStatus();
+  },
+  methods: {
+    handleCoreService(key) {
+      if (key === 'application') this.handleApplicationEntry();
+      else if (key === 'bookingList') this.goToBookingList();
+      else if (key === 'contract') this.goToContractList();
+      else if (key === 'bill') this.goToUtilityRecharge();
+    },
+    t(key, params) {
+      return this.$tm('pages.index.component.ProfileCenterTab', key, params)
+    },
+    getMenuLabel(item = {}) {
+      return this.language === 'en'
+        ? (item.labelEnShort || item.labelEn || item.label || '')
+        : (item.label || item.labelEn || '')
+    },
+    getStoreUser() {
+      return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
+    },
+    getCurrentOrder() {
+      const storeState = (this.$store && this.$store.state) || {}
+      const session = getSessionSnapshot()
+      return storeState.vuex_current_order || session.currentOrder || null
+    },
+    getStayDaysText() {
+      if (!this.isLogin || !this.hasCheckedIn) {
+        return '-'
+      }
+      const currentOrder = this.getCurrentOrder() || {}
+      const startText = currentOrder.startDate || currentOrder.start || currentOrder.checkinDate || ''
+      if (!startText) {
+        return '--'
+      }
+      const startDate = new Date(String(startText).replace(/-/g, '/'))
+      if (Number.isNaN(startDate.getTime())) {
+        return '--'
+      }
+      const diffDays = Math.floor((Date.now() - startDate.getTime()) / (24 * 60 * 60 * 1000)) + 1
+      return String(Math.max(diffDays, 1))
+    },
+    getActivityCountText() {
+      return this.isLogin ? '--' : '-'
+    },
+    getPointsText() {
+      return this.isLogin ? '--' : '-'
+    },
+    getWechatCode() {
+      return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
+        uni.login({
+          provider: 'weixin',
+          success: (res) => {
+            resolve(res.code || '')
+          },
+          fail: (err) => {
+            console.error('getWechatCode failed', err)
+            resolve('')
+          }
+        })
+        // #endif
+        // #ifndef MP-WEIXIN
+        resolve('')
+        // #endif
+      })
+    },
+    async fetchActiveRegistration() {
+      try {
+        const providerValue = await this.getWechatCode()
+        if (!providerValue) {
+          this.registrationApplication = null
+          return
+        }
+        const response = await registrationMyorder({
+          providerValue
+        }, this.language)
+        
+        const rawTarget = response && response.data && typeof response.data === 'object' ? response.data : response
+        const target = rawTarget.data !== undefined ? rawTarget.data : rawTarget
+        
+        if (target && typeof target === 'object' && Object.keys(target).length > 0) {
+          this.registrationApplication = target
+        } else {
+          this.registrationApplication = null
+        }
+      } catch (e) {
+        console.error('fetch active registration failed', e)
+        this.registrationApplication = null
+      }
+    },
+    checkLoginStatus() {
+      const session = getSessionSnapshot()
+      const storeState = (this.$store && this.$store.state) || {}
+      this.isLogin = session.isLogin;
+      this.hasCheckedIn = !!storeState.vuex_checkin_status || session.hasCheckedIn;
+      this.pendingContractCount = Number(storeState.vuex_pending_contract_count || session.pendingContractCount || 0)
+      
+      if (this.isLogin) {
+        this.userInfo = getStoredUser();
+      } else {
+        this.userInfo = {};
+        this.pendingContractCount = 0
+        this.fetchActiveRegistration()
+      }
+    },
+    goToLogin() {
+      uni.navigateTo({
+        url: '/pkgAccount/login/login'
+      });
+    },
+    handleGuestEntry() {
+      if (this.registrationApplication) {
+        this.goToAuthResult()
+        return
+      }
+      this.goToLogin()
+    },
+    handleLanguageToggle() {
+      this.$toggleLocale()
+    },
+    handleLogout() {
+      uni.showModal({
+        title: this.t('logoutConfirmTitle'),
+        content: this.t('logoutConfirmContent'),
+        success: (res) => {
+          if (res.confirm) {
+            clearLoginSession()
+            this.checkLoginStatus();
+            this.$parent.changeTabbar && this.$parent.changeTabbar(0, 'select-room');
+            uni.showToast({ title: this.t('logoutSuccess'), icon: 'success' });
+          }
+        }
+      });
+    },
+    getBookingStatusTextLocal(status) {
+      return getBookingStatusText(status);
+    },
+    getBookingTag(status) {
+      return getBookingTagType(status);
+    },
+    getRegistrationStatusText(status) {
+      if (this.registrationApplication && typeof this.registrationApplication.approvalStatus === 'number') {
+        return getApprovalStatusLabel(this.registrationApplication.approvalStatus, this.t('notSubmittedYet'))
+      }
+      const map = {
+        unsubmitted: this.t('notSubmittedYet'),
+        pending: this.t('statusPending'),
+        approved: this.t('statusApproved'),
+        rejected: this.t('statusRejected')
+      }
+      return map[status] || map.unsubmitted
+    },
+    goToAuthResult() {
+      uni.navigateTo({
+        url: '/pkgAccount/auth_result/auth_result'
+      });
+    },
+    goToRegistrationRecords() {
+      uni.navigateTo({
+        url: '/pkgAccount/registration_records/registration_records'
+      })
+    },
+    goToBookingDetail() {
+      const booking = this.currentBookingCard
+      uni.navigateTo({
+        url: booking && booking.orderNo
+          ? `/pkgBooking/booking_detail/booking_detail?orderNo=${encodeURIComponent(booking.orderNo)}`
+          : '/pkgBooking/booking_detail/booking_detail'
+      });
+    },
+    goToBookingList() {
+      uni.navigateTo({
+        url: '/pkgBooking/booking_list/booking_list'
+      });
+    },
+    goToContractList() {
+      uni.navigateTo({
+        url: '/pkgService/my_contract/my_contract'
+      });
+    },
+    goToUtilityRecharge() {
+      uni.navigateTo({
+        url: '/pkgService/utility_recharge/utility_recharge'
+      });
+    },
+    goToSubmitRequest(title, desc, payload = {}, titleZh = '', titleEn = '', descZh = '', descEn = '') {
+      uni.navigateTo({
+        url: `/pkgService/submit_request/submit_request?title=${encodeURIComponent(title || this.t('submitRequest'))}&titleZh=${encodeURIComponent(titleZh || title || this.t('submitRequest'))}&titleEn=${encodeURIComponent(titleEn || title || this.t('submitRequest'))}&desc=${encodeURIComponent(desc || this.t('completeFormBeforeSubmit'))}&descZh=${encodeURIComponent(descZh || desc || this.t('completeFormBeforeSubmit'))}&descEn=${encodeURIComponent(descEn || desc || this.t('completeFormBeforeSubmit'))}&payload=${encodeURIComponent(JSON.stringify(payload || {}))}`
+      })
+    },
+    handleApplicationEntry() {
+      uni.navigateTo({
+        url: '/pkgService/my_application/my_application'
+      });
+      // if (this.userInfo.currentBooking) {
+      //   this.goToBookingDetail();
+      //   return;
+      // }
+    },
+    openBusinessPage(item) {
+      const itemTitleZh = item.title || item.titleEn || item.label || ''
+      const itemTitleEn = item.labelEnShort || item.titleEn || item.title || item.label || ''
+      const itemDescZh = item.desc || item.descEn || ''
+      const itemDescEn = compactEnglishText(item.descEn || item.desc || '', 72) || item.descEn || item.desc || ''
+      const itemTitle = this.language === 'en'
+        ? itemTitleEn
+        : itemTitleZh
+      const itemDesc = this.language === 'en'
+        ? itemDescEn
+        : itemDescZh
+      if (item.key === 'contract') {
+        this.goToContractList()
+        return
+      }
+      if (item.key === 'bill') {
+        this.goToUtilityRecharge()
+        return
+      }
+      if (item.key === 'serviceOrder') {
+        this.handleApplicationEntry()
+        return
+      }
+      if (item.key === 'registrationRecord') {
+        this.goToRegistrationRecords()
+        return
+      }
+      if (item.key === 'butler') {
+        this.goToSubmitRequest(itemTitle, itemDesc, {
+          businessType: 'butler-contact',
+          sourceType: 'profile-center'
+        }, itemTitleZh, itemTitleEn, itemDescZh, itemDescEn)
+        return
+      }
+      const comingSoonDesc = this.t('comingSoonDesc', { title: itemTitle })
+      const comingSoonDescZh = this.$tm('pages.index.component.ProfileCenterTab', 'comingSoonDesc', { title: itemTitleZh || itemTitle })
+      const comingSoonDescEn = this.$tm('pages.index.component.ProfileCenterTab', 'comingSoonDesc', { title: itemTitleEn || itemTitle })
+      uni.navigateTo({
+        url: `/pkgService/service_stub/service_stub?title=${encodeURIComponent(itemTitle)}&titleZh=${encodeURIComponent(itemTitleZh || itemTitle)}&titleEn=${encodeURIComponent(itemTitleEn || itemTitle)}&desc=${encodeURIComponent(comingSoonDesc)}&descZh=${encodeURIComponent(comingSoonDescZh)}&descEn=${encodeURIComponent(comingSoonDescEn)}&key=${item.key}`
+      });
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.profile-page {
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  min-height: 100vh;
+  position: relative;
+}
+
+/* 顶部炫酷背景 */
+.profile-header-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 520rpx;
+  background: linear-gradient(135deg, #E8F2FF 0%, #F8FAFF 100%);
+  z-index: 0;
+  overflow: hidden;
+  border-bottom-left-radius: 60rpx;
+  border-bottom-right-radius: 60rpx;
+}
+.bg-shape-1 {
+  position: absolute;
+  top: -100rpx;
+  right: -50rpx;
+  width: 500rpx;
+  height: 500rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba($brand-primary, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
+}
+.bg-shape-2 {
+  position: absolute;
+  bottom: -50rpx;
+  left: -50rpx;
+  width: 400rpx;
+  height: 400rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba($brand-primary, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
+}
+
+.profile-header {
+  position: relative;
+  z-index: 1;
+}
+
+/* 用户卡片重构 */
+.user-profile-card {
+  margin-top: 20rpx;
+  background: #ffffff;
+  border-radius: 32rpx;
+  box-shadow: 0 16rpx 40rpx rgba(43, 142, 255, 0.08);
+  position: relative;
+  overflow: hidden;
+  border: 1rpx solid rgba(255, 255, 255, 0.8);
+}
+.card-decor {
+  position: absolute;
+  top: -60rpx;
+  right: -40rpx;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(43, 142, 255, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
+  z-index: 0;
+}
+.user-info-row {
+  position: relative;
+  z-index: 1;
+}
+.user-name {
+  font-size: 44rpx;
+  font-weight: 800;
+  color: #1e293b;
+  letter-spacing: 2rpx;
+}
+.user-id-wrap {
+  display: inline-flex;
+}
+.user-id {
+  padding: 4rpx 16rpx;
+  background: rgba(43, 142, 255, 0.08);
+  color: #2b8eff;
+  border-radius: 12rpx;
+  font-size: 24rpx;
+  font-family: monospace;
+}
+.edit-btn {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 32rpx;
+  background: rgba(43, 142, 255, 0.05);
+  color: #2b8eff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s;
+}
+.edit-btn:active {
+  background: rgba(43, 142, 255, 0.15);
+  transform: scale(0.95);
+}
+.card-divider {
+  height: 2rpx;
+  background: linear-gradient(90deg, rgba(226, 232, 240, 0.2) 0%, rgba(226, 232, 240, 1) 50%, rgba(226, 232, 240, 0.2) 100%);
+  margin: 32rpx 0;
+}
+.stats-row {
+  padding: 0 10rpx;
+}
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+.stat-value {
+  font-size: 40rpx;
+  font-weight: 800;
+  color: #0f172a;
+  font-family: 'Helvetica Neue', sans-serif;
+}
+.stat-label {
+  font-size: 24rpx;
+  color: #64748b;
+  margin-top: 8rpx;
+}
+.stat-divider {
+  width: 2rpx;
+  height: 40rpx;
+  background: #e2e8f0;
+  margin-top: 16rpx;
+}
+
+.avatar-box {
+  width: 130rpx;
+  height: 130rpx;
+  border-radius: 65rpx;
+  border: 6rpx solid #FFFFFF;
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.15);
+  position: relative;
+  overflow: hidden;
+}
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.avatar-text {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #FFFFFF;
+  font-size: 56rpx;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.guest-avatar-box {
+  background-color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.guest-avatar-icon {
+  color: $brand-primary;
+  font-size: 48rpx;
+}
+
+.gender-badge {
+  position: absolute;
+  bottom: 0;
+  right: -8rpx;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 20rpx;
+  border: 4rpx solid #FFFFFF;
+}
+
+.gender-male {
+  background-color: #2b8eff;
+}
+
+.gender-female {
+  background-color: #ff5a92;
+}
+
+.gender-badge-icon {
+  color: #FFFFFF;
+  font-size: 24rpx;
+}
+
+.edit-btn {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 30rpx;
+  background-color: #FFFFFF;
+  color: $brand-primary;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.1);
+}
+
+.edit-btn-icon {
+  font-size: 28rpx;
+  color: $brand-primary;
+}
+
+/* 数据统计面板 */
+.stats-panel {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+.stats-divider {
+  width: 2rpx;
+  height: 60rpx;
+  background-color: rgba($brand-primary, 0.1);
+}
+
+/* 专属管家横幅 */
+.butler-banner {
+  background: linear-gradient(135deg, #F0F6FF 0%, #E8F2FF 100%);
+  border-radius: 24rpx;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.05);
+}
+.butler-icon {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 20rpx;
+  background: #ffffff;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.1);
+}
+
+.butler-icon-symbol {
+  color: $brand-primary;
+  font-size: 36rpx;
+}
+
+/* 申请状态卡片 */
+.application-status-card {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+.guest-registration-card {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+.guest-registration-btn {
+  flex-shrink: 0;
+  min-width: 152rpx;
+  padding-left: 24rpx;
+  padding-right: 24rpx;
+}
+/* 核心服务卡片 */
+.core-services-card {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+.core-service-item {
+  width: 25%;
+}
+.service-icon-box {
+  width: 90rpx;
+  height: 90rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.05) 0%, rgba($brand-primary, 0.15) 100%);
+  transition: all 0.2s;
+}
+.core-service-item:active .service-icon-box {
+  transform: scale(0.9);
+  background: linear-gradient(135deg, rgba($brand-primary, 0.1) 0%, rgba($brand-primary, 0.2) 100%);
+}
+.service-icon-symbol {
+  font-size: 48rpx;
+  color: $brand-primary;
+}
+.status-tag {
+  padding: 6rpx 20rpx;
+  border-radius: 12rpx;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+.status-pending {
+  background-color: rgba(255, 165, 0, 0.1);
+  color: #FFA500;
+}
+.status-unsubmitted {
+  background-color: rgba(189, 189, 189, 0.16);
+  color: #6d6d6d;
+}
+.status-approved {
+  background-color: rgba(43, 142, 60, 0.1);
+  color: #2B8E3C;
+}
+.status-rejected {
+  background-color: rgba(255, 90, 95, 0.1);
+  color: #FF5A5F;
+}
+.menu-group {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 10rpx 40rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+.menu-item {
+  padding: 40rpx 0;
+  border-bottom: 2rpx solid #F5F5F5;
+  min-width: 0;
+}
+.menu-item:last-child {
+  border-bottom: none;
+}
+.menu-icon {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 16rpx;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.1) 0%, rgba($brand-primary, 0.2) 100%);
+  color: $brand-primary;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu-icon-symbol {
+  font-size: 32rpx;
+  line-height: 1;
+  color: $brand-primary;
+}
+
+.menu-arrow {
+  color: $icon-tone-muted;
+  font-size: 28rpx;
+  line-height: 1;
+}
+
+.menu-item .tn-flex:first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.menu-item .tn-flex:first-child text:last-child {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.menu-coming-soon {
+  margin-right: 12rpx;
+  padding: 6rpx 16rpx;
+  border-radius: 999rpx;
+  background: rgba($brand-primary, 0.1);
+  color: $brand-primary;
+  font-size: 20rpx;
+  font-weight: 600;
+}
+
+.status-card-icon {
+  color: $icon-tone-brand-deep;
+  font-size: 32rpx;
+}
+
+/* 自定义按钮样式 */
+.custom-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100rpx;
+  padding: 12rpx 36rpx;
+  transition: all 0.2s;
+  border: 1rpx solid transparent;
+}
+.custom-btn:active {
+  transform: scale(0.95);
+}
+.btn-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.2);
+}
+.btn-dark {
+  background-color: #222222;
+  color: $brand-primary;
+}
+.btn-danger {
+  background-color: #ffffff;
+  color: #FF5A5F;
+  border: 1rpx solid rgba(255, 90, 95, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba(255, 90, 95, 0.05);
+}
+</style>
diff --git a/pages/index/component/SelectRoomAreaPanel.vue b/pages/index/component/SelectRoomAreaPanel.vue
new file mode 100644
index 0000000..0996c00
--- /dev/null
+++ b/pages/index/component/SelectRoomAreaPanel.vue
@@ -0,0 +1,828 @@
+<template>
+  <view class="panel-container">
+    <view
+      v-if="bannerList.length"
+      id="content-start"
+      class="compact-banner-wrap"
+      :style="{ top: 0 }"
+    >
+      <!-- 收缩轮播图 -->
+      <view class="compact-swiper-container">
+        <swiper
+          class="compact-swiper"
+          circular
+          :current="currentBannerIndex"
+          @change="handleBannerChange"
+        >
+          <swiper-item v-for="(item, index) in bannerList" :key="index">
+            <image :src="item.image" mode="aspectFill" class="compact-swiper__image"></image>
+            <view class="compact-swiper__mask"></view>
+          </swiper-item>
+        </swiper>
+      </view>
+
+      <!-- 搜索栏 -->
+      <view class="search-header tn-flex tn-flex-row-between tn-flex-col-center">
+        <view class="back-btn tn-flex tn-flex-col-center tn-flex-row-center" @click="$emit('collapse-to-hero')">
+          <text class="tn-icon-up nav-icon"></text>
+        </view>
+        <view class="search-box tn-flex tn-flex-col-center">
+          <text class="tn-icon-search search-icon"></text>
+          <text class="search-placeholder">{{ t('searchApartment') }}</text>
+        </view>
+        <view
+          class="sort-trigger tn-flex tn-flex-col-center tn-flex-row-center"
+          :class="{ 'sort-trigger--active': selectedSortKey !== 'default' }"
+          @click="showSortActionSheet"
+        >
+          <text class="sort-trigger__text">{{ currentSortLabel }}</text>
+          <text class="tn-icon-down sort-trigger__arrow"></text>
+        </view>
+      </view>
+
+      <view class="quick-filter-card">
+        <view class="quick-filter-head tn-flex tn-flex-row-between tn-flex-col-center">
+          <view class="quick-filter-title-box tn-flex tn-flex-col-center">
+            <view class="quick-filter-dot"></view>
+            <text class="quick-filter-title">{{ t('tagFilter') }}</text>
+          </view>
+          <text class="quick-filter-current">{{ displayTag(currentTagLabel) }}</text>
+        </view>
+
+        <!-- 快捷标签栏 (横向滚动) -->
+        <scroll-view class="quick-tags-scroll" scroll-x :show-scrollbar="false">
+          <view class="quick-tags-wrap tn-flex tn-flex-col-center">
+            <view
+              class="quick-tag"
+              :class="{ 'quick-tag--active': !selectedTag }"
+              @click="$emit('select-tag', '')"
+            >
+              {{ t('all') }}
+            </view>
+            <view
+              v-for="tag in availableFilterTags"
+              :key="tag"
+              class="quick-tag"
+              :class="{ 'quick-tag--active': selectedTag === tag }"
+              @click="$emit('select-tag', tag)"
+            >
+              {{ displayTag(tag) }}
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+
+    <view class="content-section">
+      <view class="content-panel">
+
+        <view
+          v-if="isAreaLoading || roomLoadError || areaLoadError"
+          class="room-status-card tn-margin-bottom-lg"
+        >
+          <view class="room-status-card__title">
+            {{ isAreaLoading ? t('loadingAreaStatus') : t('areaStatus') }}
+          </view>
+          <view class="room-status-card__desc">
+            {{ roomLoadError || areaLoadError || t('areaStatusDesc') }}
+          </view>
+        </view>
+
+        <view v-if="!isAreaLoading && !displayAreaSections.length" class="empty-state-card tn-margin-bottom-lg">
+          <view class="empty-state-card__title">{{ bannerList.length ? t('emptyAreaTitle') : t('emptyBannerTitle') }}</view>
+          <view class="empty-state-card__desc">
+            {{ bannerList.length ? t('emptyAreaDesc') : t('emptyBannerDesc') }}
+          </view>
+        </view>
+
+        <!-- 小区/区域卡片 -->
+        <view v-for="area in displayAreaSections" :key="area.code" class="store-card">
+          <!-- 小区头部信息 -->
+          <view class="store-header" @click="openStoreDetail(area)">
+            <view class="store-title-bar tn-flex tn-flex-row-between tn-flex-col-center">
+              <view class="store-title tn-text-ellipsis">{{ getAreaName(area) }}</view>
+              <view class="store-detail-btn tn-flex tn-flex-col-center">
+                <text class="btn-text">{{ t('viewCommunity') }}</text>
+                <text class="tn-icon-right btn-icon"></text>
+              </view>
+            </view>
+            
+            <view class="store-tags tn-flex tn-flex-wrap">
+              <view v-for="tag in getDisplayTags(area)" :key="tag" class="store-tag">{{ displayTag(tag) }}</view>
+            </view>
+
+            <view class="store-location-info tn-flex tn-flex-row-between tn-flex-col-center">
+              <view class="store-address tn-flex tn-flex-col-center tn-text-ellipsis">
+                <view class="address-icon-box tn-flex tn-flex-col-center tn-flex-row-center">
+                  <text class="tn-icon-location location-icon"></text>
+                </view>
+                <text class="address-text">{{ getAreaAddress(area) || defaultAreaAddress(getAreaName(area)) }}</text>
+              </view>
+              <view class="store-distance">{{ t('distancePlaceholder') }}</view>
+            </view>
+          </view>
+
+          <!-- 横向滚动房型列表 -->
+          <scroll-view class="room-scroll" scroll-x :show-scrollbar="false">
+            <view class="room-list-wrap tn-flex">
+              <view
+                v-for="(roomType, idx) in area.roomTypes"
+                :key="roomType.code"
+                class="room-item"
+                @click="$emit('open-room-type', area, roomType)"
+              >
+                <view class="room-image-box">
+                  <image
+                    :src="roomType.images && roomType.images.length ? roomType.images[0] : ''"
+                    mode="aspectFill"
+                    class="room-image"
+                  ></image>
+                  <view class="room-tag-overlay" v-if="roomType.payMethod">{{ getPayMethodText(roomType.payMethod) }}</view>
+                </view>
+                
+                <view class="room-info">
+                  <view class="room-name tn-text-ellipsis">{{ formatRoomTypeName(getRoomTypeName(roomType)) }}</view>
+                  <view class="room-price-row tn-flex tn-flex-row-between tn-flex-col-bottom">
+                    <view class="price-content">
+                      <text class="price-symbol">¥</text>
+                      <text class="price-val">{{ formatDisplayPrice(roomType.price) || t('pricePending') }}</text>
+                      <text class="price-unit">{{ t('priceUnit') }}</text>
+                    </view>
+                    <view class="room-go-icon tn-flex tn-flex-col-center tn-flex-row-center">
+                      <text class="tn-icon-right"></text>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+
+        <!-- 底部安全区占位，防止最后一张卡片被 tabBar 遮挡 -->
+        <view class="safe-area-bottom-padding"></view>
+
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { localizeHousingTag, localizePayMethodText } from '../../../utils/select-room-normalizers'
+
+export default {
+  name: 'SelectRoomAreaPanel',
+  props: {
+    isBannerLoading: {
+      type: Boolean,
+      default: false
+    },
+    bannerLoadError: {
+      type: String,
+      default: ''
+    },
+    bannerLoadedFromApi: {
+      type: Boolean,
+      default: false
+    },
+    currentBanner: {
+      type: Object,
+      default: () => ({})
+    },
+    selectedAreaCode: {
+      type: String,
+      default: ''
+    },
+    areaList: {
+      type: Array,
+      default: () => []
+    },
+    currentAreaLabel: {
+      type: String,
+      default: ''
+    },
+    selectedTag: {
+      type: String,
+      default: ''
+    },
+    currentTagLabel: {
+      type: String,
+      default: '全部标签'
+    },
+    availableFilterTags: {
+      type: Array,
+      default: () => []
+    },
+    selectedSortKey: {
+      type: String,
+      default: 'default'
+    },
+    currentSortLabel: {
+      type: String,
+      default: ''
+    },
+    isAreaLoading: {
+      type: Boolean,
+      default: false
+    },
+    roomLoadError: {
+      type: String,
+      default: ''
+    },
+    areaLoadError: {
+      type: String,
+      default: ''
+    },
+    isLogin: {
+      type: Boolean,
+      default: false
+    },
+    userInfo: {
+      type: Object,
+      default: null
+    },
+    displayAreaSections: {
+      type: Array,
+      default: () => []
+    },
+    bannerList: {
+      type: Array,
+      default: () => []
+    },
+    currentBannerIndex: {
+      type: Number,
+      default: 0
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    },
+    compactBannerTop: {
+      type: Number,
+      default: 88
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    displayTag(tag = '') {
+      const text = String(tag || '').trim()
+      if (text === '全部标签' && this.language === 'en') {
+        return 'All Tags'
+      }
+      return localizeHousingTag(text, this.language)
+    },
+    t(key) {
+      return this.$tm('pages.index.component.SelectRoomTab', key)
+    },
+    formatRoomTypeName(name) {
+      const normalizedName = String(name || '')
+      return normalizedName.replace(/^[^·]+·/, '')
+    },
+    getAreaName(area = {}) {
+      if (this.language === 'en') {
+        return area.nameEnDisplay || area.nameEn || area.name || ''
+      }
+      return area.name || ''
+    },
+    getAreaAddress(area = {}) {
+      if (this.language === 'en') {
+        return area.addressEnDisplay || area.addressEn || area.address || ''
+      }
+      return area.address || ''
+    },
+    getRoomTypeName(roomType = {}) {
+      if (this.language === 'en') {
+        return roomType.nameEnDisplay || roomType.nameEn || roomType.name || ''
+      }
+      return roomType.name || ''
+    },
+    getPayMethodText(payMethod = '') {
+      return localizePayMethodText(payMethod, this.language)
+    },
+    formatDisplayPrice(price) {
+      if (!price) {
+        return ''
+      }
+      const normalizedPrice = String(price).replace(/,/g, '')
+      const matched = normalizedPrice.match(/(\d+(?:\.\d+)?)/)
+      return matched ? matched[1] : ''
+    },
+    getDisplayTags(area) {
+      const areaTags = Array.isArray(area.tags) ? area.tags : []
+      if (areaTags.length) {
+        return areaTags.slice(0, 4)
+      }
+
+      const roomTypeTags = (area.roomTypes || [])
+        .flatMap((roomType) => roomType.tags || [])
+        .filter(Boolean)
+
+      return [...new Set(roomTypeTags)].slice(0, 4)
+    },
+    showTagActionSheet() {
+      const tagOptions = [this.t('allTags'), ...this.availableFilterTags]
+      if (!tagOptions.length) {
+        return
+      }
+      uni.showActionSheet({
+        itemList: tagOptions.map((tag) => this.displayTag(tag)),
+        success: ({ tapIndex }) => {
+          const selectedTag = tapIndex === 0 ? '' : tagOptions[tapIndex]
+          this.$emit('select-tag', selectedTag)
+        }
+      })
+    },
+    showSortActionSheet() {
+      const sortOptions = [
+        { label: this.t('sortDefault'), value: 'default' },
+        { label: this.t('sortPriceAsc'), value: 'price-asc' },
+        { label: this.t('sortPriceDesc'), value: 'price-desc' },
+        { label: this.t('sortNameAsc'), value: 'name-asc' }
+      ]
+      uni.showActionSheet({
+        itemList: sortOptions.map((item) => item.label),
+        success: ({ tapIndex }) => {
+          const selected = sortOptions[tapIndex]
+          if (selected) {
+            this.$emit('select-sort', selected.value)
+          }
+        }
+      })
+    },
+    handleBannerChange(e) {
+      this.$emit('banner-change', e.detail.current)
+    },
+    openStoreDetail(area) {
+      uni.navigateTo({
+        url: `/pkgExplore/store_detail/store_detail?storeData=${encodeURIComponent(JSON.stringify(area))}`
+      })
+    },
+    defaultAreaAddress(areaName = '') {
+      if (this.language === 'en') {
+        return `${this.t('defaultAreaAddressPrefix')}${areaName} CBD`
+      }
+      return `${this.t('defaultAreaAddressPrefix')}${areaName}核心商圈`
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.panel-container {
+  min-height: 100vh;
+  background-color: transparent;
+}
+.content-panel {
+  padding: 24rpx;
+  box-sizing: border-box;
+}
+/* 顶部搜索栏包装 */
+.compact-banner-wrap {
+  position: sticky;
+  z-index: 99;
+  padding: 0 0 24rpx;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.compact-swiper-container {
+  width: 100%;
+  height: 420rpx;
+  position: relative;
+}
+
+.compact-swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.compact-swiper__image {
+  width: 100%;
+  height: 100%;
+}
+
+.compact-swiper__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, 
+    rgba(0,0,0,0.15) 0%, 
+    rgba(0,0,0,0) 30%, 
+    rgba(255,255,255,0) 60%, 
+    rgba(255,255,255,1) 100%
+  );
+}
+
+.search-header {
+  position: relative;
+  z-index: 100;
+  margin-top: -96rpx;
+  min-height: 92rpx;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 46rpx;
+  padding: 0 36rpx;
+  box-sizing: border-box;
+  margin-left: 24rpx;
+  margin-right: 24rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.8);
+  box-shadow: 
+    0 10rpx 30rpx rgba(0, 0, 0, 0.05),
+    0 4rpx 10rpx rgba($brand-primary, 0.05);
+}
+
+.back-btn {
+  width: 60rpx;
+  height: 60rpx;
+  flex-shrink: 0;
+  color: #333;
+  margin-right: 20rpx;
+  background: #f8f9fa;
+  border-radius: 50%;
+  border: 1rpx solid rgba(0, 0, 0, 0.03);
+}
+
+.nav-icon {
+  font-size: 28rpx;
+  font-weight: bold;
+}
+
+.search-box {
+  flex: 1;
+  color: #333;
+}
+
+.search-icon {
+  font-size: 34rpx;
+  margin-right: 16rpx;
+  line-height: 1;
+  color: $brand-primary;
+}
+
+.search-placeholder {
+  font-size: 28rpx;
+  color: #a0a7b5;
+  letter-spacing: 1rpx;
+  font-weight: 400;
+}
+
+.sort-trigger {
+  max-width: 200rpx;
+  min-width: 144rpx;
+  height: 64rpx;
+  padding: 0 24rpx;
+  flex-shrink: 0;
+  border-radius: 32rpx;
+  border: 1rpx solid rgba($brand-primary, 0.12);
+  background: #f0f7ff;
+  color: #0C6E8B;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.sort-trigger--active {
+  background: $brand-primary;
+  color: #ffffff;
+  border-color: $brand-primary;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.2);
+}
+
+.sort-trigger__text {
+  max-width: 128rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sort-trigger__arrow {
+  margin-left: 10rpx;
+  font-size: 20rpx;
+  line-height: 1;
+  opacity: 0.8;
+}
+
+.quick-filter-card {
+  margin: 18rpx 24rpx 0;
+  padding: 22rpx 0 18rpx;
+  border-radius: 28rpx;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1rpx solid rgba(255, 255, 255, 0.88);
+  box-shadow:
+    0 12rpx 28rpx rgba(15, 23, 42, 0.05),
+    0 6rpx 16rpx rgba($brand-primary, 0.06);
+}
+
+.quick-filter-head {
+  padding: 0 24rpx 14rpx;
+}
+
+.quick-filter-title-box {
+  color: #1E293B;
+}
+
+.quick-filter-dot {
+  width: 12rpx;
+  height: 12rpx;
+  margin-right: 12rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, $brand-primary 0%, #76B8FF 100%);
+  box-shadow: 0 0 0 6rpx rgba($brand-primary, 0.08);
+}
+
+.quick-filter-title {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #334155;
+  letter-spacing: 1rpx;
+}
+
+.quick-filter-current {
+  max-width: 220rpx;
+  font-size: 22rpx;
+  color: #94A3B8;
+  text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 横向快捷标签 */
+.quick-tags-scroll {
+  background-color: transparent;
+  padding: 0;
+  width: 100%;
+}
+
+.quick-tags-wrap {
+  padding: 0 24rpx;
+}
+
+.quick-tag {
+  flex-shrink: 0;
+  min-width: 96rpx;
+  text-align: center;
+  background: #F8FBFF;
+  color: #475569;
+  font-size: 24rpx;
+  padding: 12rpx 26rpx;
+  border-radius: 999rpx;
+  margin-right: 16rpx;
+  font-weight: 500;
+  border: 1rpx solid rgba($brand-primary, 0.08);
+  box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+}
+
+.quick-tag--active {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.16) 0%, rgba(118, 184, 255, 0.24) 100%);
+  color: #0C6E8B;
+  border-color: rgba($brand-primary, 0.22);
+  box-shadow: 0 8rpx 18rpx rgba($brand-primary, 0.10);
+}
+
+/* 小区卡片整体 */
+.store-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+  border-radius: 32rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.08);
+  border: 1rpx solid rgba(255, 255, 255, 1);
+}
+
+/* 小区头部信息 */
+.store-header {
+  margin-bottom: 32rpx;
+}
+
+.store-title-bar {
+  min-width: 0;
+  margin-bottom: 20rpx;
+}
+
+.store-title {
+  font-size: 38rpx;
+  font-weight: 700;
+  color: #1A1D24;
+  max-width: 75%;
+  letter-spacing: 1rpx;
+}
+
+.store-detail-btn {
+  background: rgba($brand-primary, 0.08);
+  padding: 8rpx 20rpx;
+  border-radius: 24rpx;
+  color: $brand-primary;
+  
+  .btn-text {
+    font-size: 22rpx;
+    font-weight: 600;
+  }
+  
+  .btn-icon {
+    font-size: 20rpx;
+    margin-left: 4rpx;
+  }
+}
+
+.store-tags {
+  margin-bottom: 24rpx;
+  gap: 12rpx;
+}
+
+.store-tag {
+  color: #0C6E8B;
+  background: #F0F9FF;
+  font-size: 22rpx;
+  padding: 6rpx 18rpx;
+  border-radius: 12rpx;
+  font-weight: 500;
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+
+.store-location-info {
+  color: #64748B;
+  font-size: 24rpx;
+  background: #F8FAFC;
+  padding: 16rpx 24rpx;
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(0, 0, 0, 0.02);
+}
+
+.store-address {
+  flex: 1;
+  min-width: 0;
+  margin-right: 24rpx;
+}
+
+.address-icon-box {
+  width: 44rpx;
+  height: 44rpx;
+  background: #fff;
+  border-radius: 12rpx;
+  margin-right: 12rpx;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03);
+}
+
+.location-icon {
+  font-size: 26rpx;
+  color: $brand-primary;
+}
+
+.address-text {
+  min-width: 0;
+  color: #475569;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.store-distance {
+  color: #1E293B;
+  font-weight: 600;
+  font-size: 22rpx;
+}
+
+/* 横向滚动房型列表 */
+.room-scroll {
+  width: 100%;
+}
+
+.room-list-wrap {
+  gap: 16rpx;
+  padding-bottom: 12rpx;
+}
+
+.room-item {
+  width: 240rpx;
+  flex-shrink: 0;
+  background: #ffffff;
+  border-radius: 16rpx;
+  padding-bottom: 16rpx;
+  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+  border: 1rpx solid #F1F5F9;
+  transition: all 0.2s ease;
+}
+
+.room-item:active {
+  transform: translateY(-2rpx);
+  box-shadow: 0 10rpx 24rpx rgba($brand-primary, 0.1);
+}
+
+.room-image-box {
+  width: 100%;
+  height: 180rpx;
+  position: relative;
+  overflow: hidden;
+}
+
+.room-image {
+  width: 100%;
+  height: 100%;
+  background-color: #F8FAFC;
+  transition: transform 0.4s ease;
+}
+
+.room-tag-overlay {
+  position: absolute;
+  top: 12rpx;
+  right: 12rpx;
+  max-width: calc(100% - 24rpx);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8rpx);
+  color: #fff;
+  font-size: 18rpx;
+  padding: 4rpx 10rpx;
+  border-radius: 999rpx;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.room-info {
+  width: 100%;
+  padding: 16rpx 16rpx 0;
+}
+
+.room-name {
+  font-size: 26rpx;
+  color: #1E293B;
+  font-weight: 600;
+  margin-bottom: 12rpx;
+}
+
+.room-price-row {
+  width: 100%;
+}
+
+.price-symbol {
+  font-size: 20rpx;
+  color: #EF4444;
+  font-weight: 700;
+  margin-right: 2rpx;
+}
+
+.price-val {
+  color: #EF4444;
+  font-size: 32rpx;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.price-unit {
+  color: #94A3B8;
+  font-size: 18rpx;
+  margin-left: 4rpx;
+  font-weight: 500;
+}
+
+.room-go-icon {
+  width: 32rpx;
+  height: 32rpx;
+  background: #F8FAFC;
+  border-radius: 50%;
+  color: #94A3B8;
+  font-size: 18rpx;
+  border: 1rpx solid #F1F5F9;
+}
+
+.safe-area-bottom-padding {
+  height: calc(140rpx + env(safe-area-inset-bottom));
+  width: 100%;
+}
+
+.room-status-card,
+.empty-state-card {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10rpx);
+  border-radius: 20rpx;
+  padding: 32rpx;
+  text-align: center;
+  border: 1rpx solid rgba($brand-primary, 0.1);
+  box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.04);
+}
+
+.room-status-card__title,
+.empty-state-card__title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12rpx;
+}
+
+.room-status-card__desc,
+.empty-state-card__desc {
+  font-size: 26rpx;
+  color: #666;
+}
+</style>
diff --git a/pages/index/component/SelectRoomHero.vue b/pages/index/component/SelectRoomHero.vue
new file mode 100644
index 0000000..289a47f
--- /dev/null
+++ b/pages/index/component/SelectRoomHero.vue
@@ -0,0 +1,459 @@
+<template>
+  <view>
+    <view v-if="bannerList.length" class="hero-shell">
+      <swiper
+        class="hero-swiper"
+        circular
+        :autoplay="true"
+        interval="6000"
+        duration="800"
+        :current="currentBannerIndex"
+        @change="handleBannerChange"
+      >
+        <swiper-item v-for="item in bannerList" :key="item.id">
+          <image :src="item.image" mode="aspectFill" class="hero-image"></image>
+        </swiper-item>
+      </swiper>
+      <view class="hero-mask"></view>
+
+      <view class="hero-content">
+        <!-- 顶部横向 Tabs -->
+        <view class="hero-tabs tn-flex tn-flex-row-center" :class="{ 'hero-tabs--en': language === 'en' }">
+          <view
+            v-for="(item, index) in bannerList"
+            :key="item.id"
+            class="hero-tab-item tn-flex tn-flex-direction-column tn-flex-col-center"
+            :class="{
+              'hero-tab-item--active': currentBannerIndex === index,
+              'hero-tab-item--en': language === 'en'
+            }"
+            @click="switchBanner(index)"
+          >
+            <text class="tab-title" :class="{ 'tab-title--en': language === 'en' }">{{ displayTabTitle(item) }}</text>
+            <text class="tab-subtitle" :class="{ 'tab-subtitle--en': language === 'en' }">{{ displayTabSubtitle(item) }}</text>
+          </view>
+        </view>
+
+        <!-- 居中文案区 -->
+        <view
+          class="hero-typography tn-flex tn-flex-direction-column tn-flex-col-center"
+          :class="{ 'hero-typography--no-logo': !(currentBanner.logoType === 'image' && currentBanner.logoImage) && !currentBanner.logoIconClass }"
+        >
+          <image
+            v-if="currentBanner.logoType === 'image' && currentBanner.logoImage"
+            :src="currentBanner.logoImage"
+            mode="aspectFit"
+            class="hero-logo-image"
+          ></image>
+          <text
+            v-else-if="currentBanner.logoIconClass"
+            :class="[currentBanner.logoIconClass, 'hero-logo-icon']"
+          ></text>
+          <view class="hero-eng-title" :class="{ 'hero-eng-title--en': language === 'en' }">{{ getBannerText(currentBanner, 'subtitle') }}</view>
+          <view class="hero-title" :class="{ 'hero-title--en': language === 'en' }">{{ getBannerText(currentBanner, 'title') }}</view>
+          <view class="hero-desc" :class="{ 'hero-desc--en': language === 'en' }">{{ getBannerText(currentBanner, 'desc') }}</view>
+        </view>
+
+        <!-- 底部操作区 -->
+        <view class="hero-bottom tn-flex tn-flex-direction-column tn-flex-col-center">
+          <view class="hero-actions tn-flex tn-flex-row-between" :class="{ 'hero-actions--en': language === 'en' }">
+            <view class="action-btn outline-btn" :class="{ 'action-btn--en': language === 'en' }" @click="$emit('consult')">{{ t('apartmentDetail') }}</view>
+            <view class="action-btn primary-btn" :class="{ 'action-btn--en': language === 'en' }" @click="$emit('submit')">{{ t('bookViewing') }}</view>
+          </view>
+
+          <view class="scroll-hint tn-flex tn-flex-direction-column tn-flex-col-center" @click="$emit('collapse')">
+            <text class="scroll-hint__text">{{ t('learnMore') }}</text>
+            <view class="scroll-hint__double-icon">
+              <text class="tn-icon-down scroll-hint__icon"></text>
+              <text class="tn-icon-down scroll-hint__icon scroll-hint__icon--second"></text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'SelectRoomHero',
+  props: {
+    bannerList: {
+      type: Array,
+      default: () => []
+    },
+    currentBanner: {
+      type: Object,
+      default: () => ({})
+    },
+    currentBannerIndex: {
+      type: Number,
+      default: 0
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    },
+    isHeroCollapsed: {
+      type: Boolean,
+      default: false
+    },
+    compactBannerTop: {
+      type: Number,
+      default: 88
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    getBannerText(item = {}, field = '') {
+      const key = String(field || '').trim()
+      if (!key) {
+        return ''
+      }
+      const zhText = item[key]
+      const enText = item[`${key}En`]
+      if (this.language === 'en') {
+        return enText || zhText || ''
+      }
+      return zhText || ''
+    },
+    getBannerDisplayText(item = {}, field = '') {
+      const key = String(field || '').trim()
+      if (!key) {
+        return ''
+      }
+      if (this.language === 'en') {
+        return item[`${key}EnDisplay`] || item[`${key}En`] || item[key] || ''
+      }
+      return item[key] || ''
+    },
+    displayTabTitle(item = {}) {
+      return this.formatTabTitle(this.getBannerDisplayText(item, 'title'))
+    },
+    displayTabSubtitle(item = {}) {
+      return this.getBannerDisplayText(item, 'tab')
+    },
+    t(key) {
+      return this.$tm('pages.index.component.SelectRoomTab', key)
+    },
+    formatTabTitle(title) {
+      const normalizedTitle = String(title || '')
+      return normalizedTitle
+        .replace(/^[^·]+·/, '')
+        .replace(/^\s*CBD/, '')
+        .trim()
+    },
+    handleBannerChange(e) {
+      this.$emit('banner-change', e.detail.current)
+    },
+    switchBanner(index) {
+      this.$emit('banner-switch', index)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.hero-shell {
+  position: relative;
+  height: 100vh;
+  min-height: 1100rpx;
+  overflow: hidden;
+}
+
+.hero-swiper,
+.hero-image {
+  width: 100%;
+  height: 100%;
+}
+
+.hero-mask {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.7) 100%);
+}
+
+.hero-content {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 180rpx 0 40rpx;
+  pointer-events: none; /* 让事件穿透到 swiper */
+}
+
+.hero-tabs, .hero-typography, .hero-bottom {
+  pointer-events: auto; /* 恢复子元素事件 */
+}
+
+/* 顶部横向 Tabs */
+.hero-tabs {
+  padding: 0 40rpx;
+  gap: 60rpx;
+  align-items: flex-start;
+}
+
+.hero-tabs--en {
+  padding: 0 24rpx;
+  gap: 16rpx;
+}
+
+.hero-tab-item {
+  opacity: 0.6;
+  transition: all 0.3s ease;
+  max-width: 240rpx;
+  min-width: 0;
+}
+
+.hero-tab-item--en {
+  flex: 1;
+  max-width: none;
+  min-width: 0;
+}
+
+.hero-tab-item--active {
+  opacity: 1;
+}
+
+.tab-title {
+  display: block;
+  width: 100%;
+  color: #ffffff;
+  font-size: 34rpx;
+  font-weight: bold;
+  letter-spacing: 2rpx;
+  margin-bottom: 8rpx;
+  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tab-subtitle {
+  display: block;
+  width: 100%;
+  color: #ffffff;
+  font-size: 22rpx;
+  letter-spacing: 2rpx;
+  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tab-title--en {
+  font-size: 24rpx;
+  letter-spacing: 0.5rpx;
+  line-height: 1.25;
+  min-height: 60rpx;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: unset;
+}
+
+.tab-subtitle--en {
+  font-size: 18rpx;
+  letter-spacing: 0.5rpx;
+  line-height: 1.2;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: unset;
+}
+
+/* 居中文案区 */
+.hero-typography {
+  position: relative;
+  margin-top: -100rpx; /* 微调垂直居中位置 */
+  padding: 0 48rpx;
+}
+
+.hero-logo-icon {
+  font-size: 80rpx;
+  color: $icon-tone-luxury;
+  margin-bottom: 24rpx;
+  text-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.28);
+}
+
+.hero-logo-image {
+  width: 160rpx;
+  height: 80rpx;
+  margin-bottom: 24rpx;
+}
+
+.hero-typography--no-logo {
+  margin-top: -36rpx;
+}
+
+.hero-typography--no-logo::before {
+  content: '';
+  display: block;
+  width: 88rpx;
+  height: 2rpx;
+  margin: 0 auto 28rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
+}
+
+.hero-eng-title {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 22rpx;
+  letter-spacing: 4rpx;
+  text-transform: uppercase;
+  margin-bottom: 16rpx;
+  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+}
+
+.hero-eng-title--en {
+  font-size: 20rpx;
+  letter-spacing: 3rpx;
+}
+
+.hero-typography--no-logo .hero-eng-title {
+  margin-bottom: 20rpx;
+}
+
+.hero-title {
+  color: #ffffff;
+  font-size: 56rpx;
+  font-weight: bold;
+  letter-spacing: 6rpx;
+  margin-bottom: 24rpx;
+  text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.4);
+}
+
+.hero-title--en {
+  font-size: 48rpx;
+  letter-spacing: 1rpx;
+  text-align: center;
+}
+
+.hero-typography--no-logo .hero-title {
+  margin-bottom: 28rpx;
+}
+
+.hero-desc {
+  color: #ffffff;
+  font-size: 30rpx;
+  letter-spacing: 4rpx;
+  max-width: 560rpx;
+  text-align: center;
+  line-height: 1.7;
+  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
+}
+
+.hero-desc--en {
+  font-size: 26rpx;
+  letter-spacing: 1rpx;
+  max-width: 600rpx;
+}
+
+/* 底部操作区 */
+.hero-bottom {
+  width: 100%;
+  /* 避开首页自定义 tabbar（114rpx），同时别抬得太高 */
+  padding-bottom: calc(132rpx + env(safe-area-inset-bottom));
+}
+
+.hero-actions {
+  width: 100%;
+  padding: 0 120rpx;
+  margin-bottom: 60rpx;
+  gap: 40rpx;
+}
+
+.hero-actions--en {
+  padding: 0 92rpx;
+  gap: 24rpx;
+}
+
+.action-btn {
+  flex: 1;
+  height: 88rpx;
+  border-radius: 44rpx;
+  border: 2rpx solid rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+  font-weight: 500;
+  letter-spacing: 2rpx;
+  line-height: 1;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+}
+
+.action-btn--en {
+  font-size: 28rpx;
+  letter-spacing: 1rpx;
+}
+
+.action-btn:active {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.outline-btn {
+  border-color: rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.primary-btn {
+  border-color: transparent;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.92) 100%);
+  color: #0f172a;
+  box-shadow: 0 14rpx 30rpx rgba(0, 0, 0, 0.18);
+}
+
+.primary-btn:active {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(235, 242, 252, 0.84) 100%);
+}
+
+.scroll-hint {
+  cursor: pointer;
+}
+
+.scroll-hint__text {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 24rpx;
+  letter-spacing: 4rpx;
+  margin-bottom: 8rpx;
+}
+
+.scroll-hint__double-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: -4rpx;
+}
+
+.scroll-hint__icon {
+  color: $icon-tone-overlay;
+  font-size: 32rpx;
+  animation: bounce 2s infinite;
+}
+
+.scroll-hint__icon--second {
+  margin-top: -14rpx;
+  opacity: 0.8;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(12rpx); }
+  60% { transform: translateY(6rpx); }
+}
+</style>
diff --git a/pages/index/component/SelectRoomTab.vue b/pages/index/component/SelectRoomTab.vue
new file mode 100644
index 0000000..e380ef0
--- /dev/null
+++ b/pages/index/component/SelectRoomTab.vue
@@ -0,0 +1,617 @@
+<template>
+  <view class="select-room-page tn-safe-area-inset-bottom">
+    <tn-nav-bar
+      v-if="currentScreen === 0"
+      :isBack="false"
+      :bottomShadow="false"
+      :backgroundColor="navBarBg"
+      :fixed="true"
+      :customBackStyle="navBarTransition"
+    >
+      <view class="custom-nav tn-flex tn-flex-col-center">
+        <view class="nav-left">
+          <view class="lang-text-toggle tn-flex tn-flex-col-center" @click="toggleLang">
+            <text class="lang-text" :class="{ 'lang-text--active': currentLang === 'zh' }">中</text>
+            <text class="lang-split">/</text>
+            <text class="lang-text" :class="{ 'lang-text--active': currentLang === 'en' }">EN</text>
+          </view>
+        </view>
+      </view>
+    </tn-nav-bar>
+
+    <swiper
+      class="page-swiper"
+      vertical
+      :current="currentScreen"
+      @change="handleScreenChange"
+      :disable-touch="currentScreen === 1"
+    >
+      <swiper-item>
+        <SelectRoomHero
+          :language="currentLang"
+          :banner-list="bannerList"
+          :current-banner="currentBanner"
+          :current-banner-index="currentBannerIndex"
+          @banner-change="handleBannerChange"
+          @banner-switch="switchBanner"
+          @consult="handleConsult"
+          @submit="handleSubmit"
+          @collapse="collapseToTopBanner"
+        />
+      </swiper-item>
+
+      <swiper-item>
+        <scroll-view
+          class="panel-scroll"
+          scroll-y
+          scroll-with-animation
+          :show-scrollbar="false"
+        >
+          <SelectRoomAreaPanel
+            :language="currentLang"
+            :banner-list="bannerList"
+            :current-banner-index="currentBannerIndex"
+            :compact-banner-top="compactBannerTop"
+            :is-banner-loading="isBannerLoading"
+            :banner-load-error="bannerLoadError"
+            :banner-loaded-from-api="bannerLoadedFromApi"
+            :current-banner="currentBanner"
+            :selected-area-code="selectedAreaCode"
+            :area-list="areaList"
+            :current-area-label="currentAreaLabel"
+            :selected-tag="selectedTag"
+            :current-tag-label="currentTagLabel"
+            :available-filter-tags="availableFilterTags"
+            :selected-sort-key="selectedSortKey"
+            :current-sort-label="currentSortLabel"
+            :is-area-loading="isAreaLoading"
+            :room-load-error="roomLoadError"
+            :area-load-error="areaLoadError"
+            :is-login="isLogin"
+            :user-info="userInfo"
+            :display-area-sections="displayAreaSections"
+            @retry-banner="retryLoadBanner"
+            @select-area="selectArea"
+            @select-tag="selectTag"
+            @select-sort="selectSort"
+            @open-room-type="openRoomTypeEntry"
+            @banner-change="handleBannerChange"
+            @collapse-to-hero="collapseToHero"
+          />
+        </scroll-view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+import { getSessionSnapshot } from '../../../utils/app-state'
+import { ensureBookingAccess } from '../../../utils/booking-guard'
+import { getStoredUser } from '../../../utils/flow'
+import { areaPagination, bannerAll } from '@/api/index.js'
+import { normalizeAreaItem, normalizeBannerItem } from '../../../utils/select-room-normalizers'
+import SelectRoomHero from './SelectRoomHero.vue'
+import SelectRoomAreaPanel from './SelectRoomAreaPanel.vue'
+
+const SORT_LABEL_MAP = {
+  zh: {
+    default: '默认排序',
+    'price-asc': '价格从低到高',
+    'price-desc': '价格从高到低',
+    'name-asc': '名称排序'
+  },
+  en: {
+    default: 'Default',
+    'price-asc': 'Price: Low to High',
+    'price-desc': 'Price: High to Low',
+    'name-asc': 'Name'
+  }
+}
+
+export default {
+  name: 'SelectRoomTab',
+  components: {
+    SelectRoomHero,
+    SelectRoomAreaPanel
+  },
+  i18n: {
+    zh: {
+      shareTitle: '绿居公寓 - 国际化青年社区',
+      all: '全部',
+      allAreas: '全部区域',
+      allTags: '全部标签',
+      apartmentDetail: '公寓详情',
+      areaStatus: '区域状态',
+      areaStatusDesc: '暂无符合筛选条件的区域',
+      areaUnavailableTitle: '该区域暂未开放',
+      bookViewing: '预约看房',
+      defaultAreaAddressPrefix: '位于',
+      distancePlaceholder: '附近',
+      emptyAreaDesc: '当前筛选条件下暂无可用房源',
+      emptyAreaTitle: "暂无匹配房源",
+      emptyBannerDesc: "暂无可展示的轮播图",
+      emptyBannerTitle: "暂无轮播图",
+      learnMore: "了解更多",
+      loadingAreaStatus: "区域加载中",
+      pricePending: "待定",
+      priceUnit: "元/月起",
+      searchApartment: "搜索区域、公寓或房型",
+      sortDefault: "默认排序",
+      sortNameAsc: "名称排序",
+      sortPriceAsc: "价格从低到高",
+      sortPriceDesc: "价格从高到低",
+      tagFilter: "标签筛选",
+      viewCommunity: "查看详情"
+    },
+    en: {
+      shareTitle: 'Luju Apartments - International Youth Community',
+      all: "All",
+      allAreas: "All Areas",
+      allTags: "All Tags",
+      apartmentDetail: "Apartment Detail",
+      areaStatus: "Area Status",
+      areaStatusDesc: "No areas matched the current filter.",
+      areaUnavailableTitle: "Area information unavailable",
+      bookViewing: "Book Viewing",
+      defaultAreaAddressPrefix: "Located at ",
+      distancePlaceholder: "Nearby",
+      emptyAreaDesc: "No rooms available under the current filters.",
+      emptyAreaTitle: "No matched rooms",
+      emptyBannerDesc: "No active banners available.",
+      emptyBannerTitle: "No banners",
+      learnMore: "Learn More",
+      loadingAreaStatus: "Loading areas",
+      pricePending: "TBD",
+      priceUnit: "/month",
+      searchApartment: "Search by area, apartment or room type",
+      sortDefault: "Default",
+      sortNameAsc: "Name",
+      sortPriceAsc: "Price: Low to High",
+      sortPriceDesc: "Price: High to Low",
+      tagFilter: "Tags",
+      viewCommunity: "View Details"
+    }
+  },
+  data() {
+    return {
+      isLogin: false,
+      userInfo: null,
+      currentBannerIndex: 0,
+      currentScreen: 0,
+      isHeroCollapsed: false,
+      isBannerLoading: false,
+      bannerLoadedFromApi: false,
+      bannerLoadError: '',
+      isAreaLoading: false,
+      areaLoadError: '',
+      areaList: [],
+      selectedAreaCode: '',
+      selectedTag: '',
+      selectedSortKey: 'default',
+      roomLoadError: '',
+      navBarBg: 'transparent',
+      navBarTransition: { transition: 'background-color 0.3s ease' },
+      bannerList: []
+    }
+  },
+  computed: {
+    currentLang() {
+      return this.$getLanguage()
+    },
+    currentBanner() {
+      return this.bannerList[this.currentBannerIndex] || {}
+    },
+    compactBannerTop() {
+      if (this.currentScreen === 0) {
+        return this.vuex_custom_bar_height || 88
+      }
+      return (this.vuex_status_bar_height || 20) + 12
+    },
+    currentAreaLabel() {
+      const matchedArea = this.areaList.find((item) => item.code === this.resolveBannerAreaCode())
+      if (matchedArea) {
+        return this.getLocalizedAreaText(matchedArea)
+      }
+      if (this.currentLang === 'en') {
+        return this.currentBanner.areaLabelEnDisplay || this.currentBanner.areaLabelEn || this.currentBanner.areaLabel || this.t('allAreas')
+      }
+      return this.currentBanner.areaLabel || this.t('allAreas')
+    },
+    currentTagLabel() {
+      return this.selectedTag || this.t('allTags')
+    },
+    availableFilterTags() {
+      const preferredOrder = ['押一付一', '生活便利', '独立厨卫', '商圈环绕', '民水民电', '拎包入住', '近地铁', '智能家居']
+      const tagSet = new Set()
+
+      this.areaList.forEach((area) => {
+        ;(area.tags || []).forEach((tag) => tagSet.add(tag))
+        ;(area.roomTypes || []).forEach((roomType) => {
+          ;(roomType.tags || []).forEach((tag) => tagSet.add(tag))
+        })
+      })
+
+      const preferredTags = preferredOrder.filter((tag) => tagSet.has(tag))
+      const extraTags = [...tagSet].filter((tag) => !preferredOrder.includes(tag))
+
+      return [...preferredTags, ...extraTags]
+    },
+    currentSortLabel() {
+      const labelMap = SORT_LABEL_MAP[this.currentLang] || SORT_LABEL_MAP.zh
+      return labelMap[this.selectedSortKey] || labelMap.default
+    },
+    displayAreaSections() {
+      const filteredAreas = this.areaList
+        .map((area) => ({
+          ...area,
+          roomTypes: this.filterAndSortRoomTypes(area)
+        }))
+        .filter((area) => (area.code || area.name) && area.roomTypes.length)
+
+      return this.sortAreaSections(filteredAreas)
+    }
+  },
+  watch: {
+    currentLang() {
+      this.loadBannerList()
+      this.loadAreaList()
+    }
+  },
+  async mounted() {
+    this.checkLoginStatus()
+    await Promise.all([this.loadBannerList(), this.loadAreaList()])
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pages.index.component.SelectRoomTab', key)
+    },
+    getLocalizedBannerText(banner = {}, field = '') {
+      const key = String(field || '').trim()
+      if (!key) {
+        return ''
+      }
+      const zhText = banner[key]
+      const enText = banner[`${key}En`]
+      if (this.currentLang === 'en') {
+        return enText || zhText || ''
+      }
+      return zhText || ''
+    },
+    getLocalizedAreaText(area = {}) {
+      if (this.currentLang === 'en') {
+        return area.nameEnDisplay || area.nameEn || area.name || ''
+      }
+      return area.name || ''
+    },
+    getLocalizedRoomTypeText(roomType = {}) {
+      if (this.currentLang === 'en') {
+        return roomType.nameEnDisplay || roomType.nameEn || roomType.name || ''
+      }
+      return roomType.name || ''
+    },
+    toggleLang() {
+      this.$toggleLocale()
+    },
+    checkLoginStatus() {
+      const session = getSessionSnapshot()
+      this.isLogin = session.isLogin
+      this.userInfo = this.isLogin ? getStoredUser() : null
+    },
+    loadBannerList() {
+      this.isBannerLoading = true
+      this.bannerLoadError = ''
+
+      return bannerAll(this.currentLang)
+        .then((res) => {
+          return Array.isArray(res?.data)
+            ? res.data
+            : Array.isArray(res)
+              ? res
+              : []
+        })
+        .catch((e) => {
+          console.warn('bannerAll API failed, using fallback', e)
+          return []
+        })
+        .then((rawList) => {
+          const enabledList = rawList
+          .filter((item) => item && item.enabled !== false)
+          .sort((a, b) => (a.sort || 0) - (b.sort || 0))
+          .map((item, index) => normalizeBannerItem(item, index))
+
+          this.bannerList = enabledList
+          this.bannerLoadedFromApi = true
+          this.currentBannerIndex = 0
+        })
+        .finally(() => {
+        this.isBannerLoading = false
+        })
+    },
+    loadAreaList() {
+      this.isAreaLoading = true
+      this.areaLoadError = ''
+
+      return areaPagination({ PageIndex: 1, PageSize: 10000 }, this.currentLang)
+        .then((res) => {
+          return Array.isArray(res?.data?.data)
+            ? res.data.data
+            : Array.isArray(res?.data)
+              ? res.data
+              : []
+        })
+        .catch((e) => {
+          console.warn('areaPagination API failed, using fallback', e)
+          return []
+        })
+        .then((rawList) => {
+        if (rawList && rawList.length) {
+          this.areaList = rawList.map((item) => normalizeAreaItem(item))
+        } else {
+          this.areaList = []
+        }
+        })
+        .finally(() => {
+        this.isAreaLoading = false
+        })
+    },
+    resolveBannerAreaCode() {
+      if (!this.areaList.length) {
+        return ''
+      }
+
+      if (this.currentBanner.areaCode) {
+        const codeMatched = this.areaList.find((item) => item.code === this.currentBanner.areaCode)
+        if (codeMatched) {
+          return codeMatched.code
+        }
+      }
+
+      const byName = this.areaList.find((item) => {
+        const labels = [
+          item.name,
+          item.nameEn
+        ].filter(Boolean)
+        return labels.includes(this.currentBanner.areaLabel) || labels.includes(this.currentBanner.areaLabelEn)
+      })
+      if (byName) {
+        return byName.code
+      }
+
+      const fuzzy = this.areaList.find((item) => {
+        const labels = [
+          this.currentBanner.areaLabel,
+          this.currentBanner.areaLabelEn
+        ].filter(Boolean)
+        return labels.some((label) => label.includes(item.name) || label.includes(item.nameEn || ''))
+      })
+      return fuzzy ? fuzzy.code : ''
+    },
+    applyBannerFilters() {
+      const resolvedAreaCode = this.resolveBannerAreaCode()
+      this.selectedAreaCode = resolvedAreaCode
+    },
+    selectArea(areaCode = '') {
+      this.selectedAreaCode = areaCode
+    },
+    selectTag(tag = '') {
+      this.selectedTag = this.selectedTag === tag ? '' : tag
+    },
+    selectSort(sortKey = 'default') {
+      this.selectedSortKey = sortKey
+    },
+    getPriceValue(priceText) {
+      if (!priceText) {
+        return Number.MAX_SAFE_INTEGER
+      }
+      const matched = String(priceText).match(/(\d+(\.\d+)?)/)
+      return matched ? Number(matched[1]) : Number.MAX_SAFE_INTEGER
+    },
+    getRoomTypePriceValue(roomType = {}) {
+      if (Number.isFinite(roomType.priceValue)) {
+        return roomType.priceValue
+      }
+      return this.getPriceValue(roomType.price)
+    },
+    isTagMatched(tags = [], tag = '') {
+      if (!tag) {
+        return true
+      }
+      return Array.isArray(tags) && tags.includes(tag)
+    },
+    filterAndSortRoomTypes(area = {}) {
+      const areaMatched = this.isTagMatched(area.tags, this.selectedTag)
+      const roomTypes = areaMatched || !this.selectedTag
+        ? (area.roomTypes || [])
+        : (area.roomTypes || []).filter((roomType) => this.isTagMatched(roomType.tags, this.selectedTag))
+
+      return this.sortRoomTypes(roomTypes)
+    },
+    sortRoomTypes(roomTypes = []) {
+      const list = [...roomTypes]
+      if (this.selectedSortKey === 'price-asc') {
+        return list.sort((a, b) => this.getRoomTypePriceValue(a) - this.getRoomTypePriceValue(b))
+      }
+      if (this.selectedSortKey === 'price-desc') {
+        return list.sort((a, b) => this.getRoomTypePriceValue(b) - this.getRoomTypePriceValue(a))
+      }
+      if (this.selectedSortKey === 'name-asc') {
+        return list.sort((a, b) => String(this.getLocalizedRoomTypeText(a) || '').localeCompare(String(this.getLocalizedRoomTypeText(b) || ''), this.currentLang === 'en' ? 'en' : 'zh-Hans-CN'))
+      }
+      return list
+    },
+    getAreaSortPrice(area = {}, mode = 'min') {
+      const values = (area.roomTypes || [])
+        .map((roomType) => this.getRoomTypePriceValue(roomType))
+        .filter((value) => Number.isFinite(value) && value !== Number.MAX_SAFE_INTEGER)
+
+      if (!values.length) {
+        return Number.MAX_SAFE_INTEGER
+      }
+
+      return mode === 'max' ? Math.max(...values) : Math.min(...values)
+    },
+    sortAreaSections(areas = []) {
+      const list = [...areas]
+      if (this.selectedSortKey === 'price-asc') {
+        return list.sort((a, b) => this.getAreaSortPrice(a, 'min') - this.getAreaSortPrice(b, 'min'))
+      }
+      if (this.selectedSortKey === 'price-desc') {
+        return list.sort((a, b) => this.getAreaSortPrice(b, 'max') - this.getAreaSortPrice(a, 'max'))
+      }
+      if (this.selectedSortKey === 'name-asc') {
+        return list.sort((a, b) => String(this.getLocalizedAreaText(a) || '').localeCompare(String(this.getLocalizedAreaText(b) || ''), this.currentLang === 'en' ? 'en' : 'zh-Hans-CN'))
+      }
+      return list
+    },
+    openServiceEntry({ path, title, desc, key, payload }) {
+      uni.navigateTo({
+        url: `${path}?title=${encodeURIComponent(title)}&desc=${encodeURIComponent(desc)}&key=${encodeURIComponent(key)}&payload=${encodeURIComponent(JSON.stringify(payload || {}))}`
+      })
+    },
+    handleBannerChange(index) {
+      this.currentBannerIndex = index
+    },
+    switchBanner(index) {
+      this.currentBannerIndex = index
+    },
+    collapseToTopBanner() {
+      this.currentScreen = 1
+    },
+    collapseToHero() {
+      this.currentScreen = 0
+    },
+    handleScreenChange(e) {
+      this.currentScreen = e.detail.current
+      this.isHeroCollapsed = this.currentScreen === 1
+      this.navBarBg = this.isHeroCollapsed ? 'rgba(17, 17, 17, 0.92)' : 'transparent'
+    },
+    retryLoadBanner() {
+      this.loadBannerList()
+    },
+    openRoomTypeEntry(area, roomType) {
+      uni.navigateTo({
+        url: `/pkgExplore/room_detail/room_detail?roomTypeData=${encodeURIComponent(JSON.stringify(roomType))}&areaData=${encodeURIComponent(JSON.stringify({
+          code: area.code,
+          name: area.name,
+          nameEn: area.nameEn || '',
+          address: area.address
+          ,
+          addressEn: area.addressEn || ''
+        }))}`
+      })
+    },
+    handleConsult() {
+      // 从 areaList 中匹配当前 banner 对应的小区信息
+      const resolvedAreaCode = this.resolveBannerAreaCode()
+      const area = this.areaList.find(item => item.code === resolvedAreaCode)
+      
+      if (area) {
+        uni.navigateTo({
+          url: `/pkgExplore/store_detail/store_detail?storeData=${encodeURIComponent(JSON.stringify(area))}`
+        })
+      } else {
+        // 容错处理
+        uni.showToast({
+          title: this.t('areaUnavailableTitle'),
+          icon: 'none'
+        })
+      }
+    },
+    handleSubmit() {
+      const bookingUrl = `/pkgBooking/book_viewing/book_viewing?payload=${encodeURIComponent(JSON.stringify({
+        sourceType: 'banner',
+        bannerTitle: this.getLocalizedBannerText(this.currentBanner, 'title'),
+        bannerTitleEn: this.currentBanner.titleEn || '',
+        bannerSubtitle: this.getLocalizedBannerText(this.currentBanner, 'subtitle'),
+        bannerSubtitleEn: this.currentBanner.subtitleEn || '',
+        bannerDesc: this.getLocalizedBannerText(this.currentBanner, 'desc'),
+        bannerDescEn: this.currentBanner.descEn || '',
+        areaLabel: this.currentAreaLabel,
+        areaLabelEn: this.currentLang === 'en'
+          ? this.currentAreaLabel
+          : ((this.areaList.find((item) => item.code === this.resolveBannerAreaCode()) || {}).nameEn || this.currentBanner.areaLabelEn || ''),
+        areaCode: this.resolveBannerAreaCode()
+      }))}`
+      if (!ensureBookingAccess({
+        language: this.currentLang,
+        userInfo: this.userInfo,
+        loginRedirectUrl: bookingUrl
+      })) {
+        return
+      }
+      uni.navigateTo({
+        url: bookingUrl
+      })
+    }
+  }
+  ,
+  onShareAppMessage() {
+    return {
+      title: this.t('shareTitle'),
+      path: '/pages/index/index'
+    }
+  },
+  onShareTimeline() {
+    return {
+      title: this.t('shareTitle')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-room-page {
+  height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  overflow: hidden;
+}
+
+.page-swiper {
+  height: 100vh;
+}
+
+.panel-scroll {
+  height: calc(100vh - env(safe-area-inset-bottom));
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+}
+
+/* 隐藏整个页面的滚动条 */
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+.custom-nav {
+  width: 100%;
+  padding: 0 40rpx;
+  height: 100%;
+}
+
+.lang-text-toggle {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 24rpx;
+  font-weight: 500;
+  cursor: pointer;
+  letter-spacing: 2rpx;
+}
+
+.lang-text {
+  transition: all 0.3s ease;
+  padding: 10rpx 0;
+}
+
+.lang-text--active {
+  color: #ffffff;
+  font-weight: 700;
+  text-shadow: 0 0 12rpx rgba(255, 255, 255, 0.4);
+}
+
+.lang-split {
+  margin: 0 12rpx;
+  opacity: 0.3;
+  font-size: 20rpx;
+}
+</style>
diff --git a/pages/index/component/StayServiceTab.vue b/pages/index/component/StayServiceTab.vue
new file mode 100644
index 0000000..30bb9ac
--- /dev/null
+++ b/pages/index/component/StayServiceTab.vue
@@ -0,0 +1,2227 @@
+<template>
+  <view class="service-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="transparent" :customBackStyle="{ transition: 'all 0.3s ease' }">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('title') }}</view>
+    </tn-nav-bar>
+
+    <scroll-view class="service-scroll" scroll-y :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view v-if="!hasCheckedIn" class="empty-state tn-padding animation-fade-in">
+        <!-- 无预订：去选房 -->
+        <view v-if="!currentBooking" class="no-booking-card">
+          <view class="no-booking-bg"></view>
+          <view class="no-booking-content tn-flex tn-flex-direction-column tn-flex-col-center">
+             <view class="icon-wrap tn-margin-bottom">
+               <text class="tn-icon-home-smile tn-color-white"></text>
+             </view>
+             <view class="tn-text-bold tn-color-white" style="font-size: 40rpx;">{{ t('notCheckedInTitle') }}</view>
+             <view class="tn-color-white tn-margin-top-sm tn-text-center" style="opacity: 0.8; line-height: 1.6;">
+               {{ t('notCheckedInDesc') }}
+             </view>
+             <view class="custom-btn btn-glass tn-margin-top-xl" @click="goSelectRoom" style="width: 80%;">
+               <text class="tn-text-bold">{{ t('goSelectRoom') }}</text>
+             </view>
+          </view>
+        </view>
+
+        <!-- 有预订：审核中 -->
+        <view v-else class="pending-booking-card animation-fade-in" style="animation-delay: 0.1s;">
+          <!-- 顶部状态大图与标识 -->
+          <view class="pending-hero">
+            <view class="hero-bg-shape"></view>
+            <view class="hero-content tn-flex tn-flex-col-center tn-flex-row-center">
+              <view class="status-icon-ring tn-flex tn-flex-col-center tn-flex-row-center">
+                <text class="tn-icon-time-fill status-icon"></text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="pending-body tn-padding-xl">
+            <!-- 核心文案 -->
+            <view class="status-text-area tn-text-center">
+              <view class="tn-text-bold tn-text-xxl tn-color-black">{{ pendingStageTitle }}</view>
+              <view class="tn-color-gray tn-margin-top-sm tn-text-sm status-desc">
+                {{ pendingStageDesc }}
+              </view>
+            </view>
+
+            <!-- 预定信息卡片 (玻璃态拟物风格) -->
+            <view class="booking-ticket-card tn-margin-top-xl">
+              <view class="ticket-header tn-flex tn-flex-row-between tn-flex-col-center">
+                <view class="tn-flex tn-flex-col-center">
+                  <view class="ticket-icon-wrap"><text class="tn-icon-order-fill"></text></view>
+                  <text class="tn-text-bold tn-text-lg tn-color-black tn-margin-left-sm">{{ t('bookingInfo') }}</text>
+                </view>
+                <view class="ticket-status-badge">{{ bookingStatusText }}</view>
+              </view>
+              
+              <view class="ticket-divider">
+                <view class="divider-line"></view>
+              </view>
+              
+              <view class="ticket-content">
+                <view class="ticket-row">
+                <text class="ticket-label">{{ pendingInfoLabel }}</text>
+                <text class="ticket-value tn-text-bold">{{ bookingRoomText }}</text>
+              </view>
+              <view class="ticket-note tn-margin-top-sm">
+                {{ pendingStageNote }}
+              </view>
+            </view>
+            </view>
+
+            <!-- 流程节点 (微动效进度条) -->
+            <view class="process-track tn-margin-top-xl">
+              <view class="track-item active">
+                <view class="track-dot"><text class="tn-icon-success"></text></view>
+                <text class="track-text">{{ t('submitBookingStep') }}</text>
+              </view>
+              <view class="track-line active-line"></view>
+              <view class="track-item" :class="isContractSigningStep ? 'active' : 'current'">
+                <view class="track-dot">
+                  <view v-if="!isContractSigningStep" class="dot-pulse"></view>
+                  <view v-if="!isContractSigningStep" class="dot-inner"></view>
+                  <text v-if="isContractSigningStep" class="tn-icon-success"></text>
+                </view>
+                <text class="track-text">{{ t('reviewStep') }}</text>
+              </view>
+              <view class="track-line" :class="{ 'active-line': isContractSigningStep }"></view>
+              <view class="track-item" :class="{ active: hasSignedContract, current: isContractSigningStep && !hasSignedContract }">
+                <view class="track-dot">
+                  <view v-if="isContractSigningStep && !hasSignedContract" class="dot-pulse"></view>
+                  <view v-if="isContractSigningStep && !hasSignedContract" class="dot-inner"></view>
+                  <text v-if="hasSignedContract" class="tn-icon-success"></text>
+                </view>
+                <text class="track-text">{{ t('contractStep') }}</text>
+              </view>
+              <view class="track-line" :class="{ 'active-line': hasSignedContract }"></view>
+              <view class="track-item">
+                <view class="track-dot"></view>
+                <text class="track-text">{{ t('checkinStep') }}</text>
+              </view>
+            </view>
+
+            <!-- 底部操作按钮 -->
+            <view class="action-btn-group action-btn-group--single tn-margin-top-xxl tn-flex tn-flex-row-between">
+              <view class="pending-action-btn pending-action-btn--primary" @click="handlePendingPrimaryAction">
+                <text class="tn-text-bold">{{ pendingPrimaryActionText }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+        <!-- 已入住状态下的服务大厅内容 -->
+        <view v-else class="animation-fade-in tn-padding-bottom">
+          <view class="tn-margin-top tn-margin-left tn-margin-right">
+            <view class="tn-text-bold tn-text tn-color-black tn-margin-bottom">{{ t('stayService') }}</view>
+            <view class="tn-flex tn-flex-row-between">
+              <view
+                v-for="item in stayActions"
+                :key="item.key"
+                class="stay-action-card"
+                @click="openServicePage(item)"
+              >
+                <view class="stay-action-icon"><text :class="item.icon" class="stay-action-icon-symbol"></text></view>
+                <view class="stay-action-title tn-margin-top-sm">{{ pickItemText(item, 'label', 'labelEn') }}</view>
+              </view>
+            </view>
+          </view>
+          
+          <!-- 融合房卡与智能控制的新卡片 -->
+          <view class="integrated-room-card tn-margin-left tn-margin-right tn-margin-top">
+            <!-- 房卡背景 -->
+            <image v-if="roomCardCover" :src="roomCardCover" mode="aspectFill" class="irc-bg"></image>
+            <view v-else class="irc-placeholder">
+              <view class="irc-placeholder-glow"></view>
+            </view>
+            <view class="irc-mask"></view>
+            
+            <view class="irc-content">
+              <!-- 顶部信息 -->
+              <view class="irc-header">
+                <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+                  <view class="irc-room-no">{{ roomDisplayText }}</view>
+                  <view class="irc-status-badge">
+                    <text class="tn-icon-vip-fill tn-margin-right-xs"></text>{{ t('activeStatus') }}
+                  </view>
+                </view>
+                <view class="irc-room-title clamp-text-1 tn-margin-top-xs">{{ roomTitleText }}</view>
+                <view class="irc-lease tn-margin-top-sm">{{ t('leaseTerm') }}：{{ leaseTermText }}</view>
+              </view>
+
+              <!-- 环境与客控区 -->
+              <view class="irc-smart-area">
+                <view class="irc-env-row tn-flex tn-flex-row-between tn-flex-col-center">
+                  <view class="irc-env-text">{{ smartSummaryText }}</view>
+                  <view class="irc-smart-btn" @click="goSmartControl">
+                    {{ t('smartControl') }} <text class="tn-icon-right tn-margin-left-xs"></text>
+                  </view>
+                </view>
+                
+                <scroll-view scroll-x show-scrollbar="false" class="irc-quick-controls tn-margin-top">
+                  <view v-if="smartQuickDeviceCards.length" class="irc-qc-list">
+                    <view
+                      v-for="item in smartQuickDeviceCards"
+                      :key="item.key"
+                      class="irc-qc-item"
+                      :class="{'is-active': item.active}"
+                      @click.stop="openSmartDevice(item)"
+                    >
+                      <view class="irc-qc-icon"><text :class="item.iconClass || 'tn-icon-my-computer'"></text></view>
+                      <view class="irc-qc-name">{{ item.name }}</view>
+                    </view>
+                  </view>
+                  <view v-else class="irc-qc-empty" @click.stop="goSmartControl">
+                    <text class="tn-icon-add tn-margin-right-xs"></text>
+                    {{ t('addSmartDevice') }}
+                  </view>
+                </scroll-view>
+              </view>
+            </view>
+          </view>
+
+        <view class="tn-margin-top tn-margin-left tn-margin-right">
+          <view class="tn-flex tn-flex-row-between tn-flex-col-bottom tn-margin-bottom">
+            <view class="tn-text-bold tn-text tn-color-black">{{ t('publicService') }}</view>
+            <view class="tn-text-sm tn-color-gray">{{ t('viewAll') }} <text class="tn-icon-right section-arrow-icon"></text></view>
+          </view>
+          
+          <view class="tn-flex tn-flex-wrap tn-flex-row-between">
+            <view class="service-item tn-margin-bottom-sm" v-for="item in services" :key="item.key" @click="openServicePage(item)">
+              <view class="service-card-visual">
+                <image :src="item.image" mode="aspectFill" class="service-card-bg"></image>
+                <view class="service-card-mask"></view>
+                <view class="service-card-content tn-padding-sm tn-flex tn-flex-direction-column tn-flex-row-between" style="height: 100%;">
+                  <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+                    <view class="service-icon-box tn-flex tn-flex-col-center tn-flex-row-center">
+                      <text :class="item.icon" class="service-icon-symbol"></text>
+                    </view>
+                    <view class="status-tag tn-text-xs" :class="item.isBusy ? 'tag-busy' : 'tag-free'">
+                      {{ pickItemText(item, 'statusZh', 'statusEn') }}
+                    </view>
+                  </view>
+                  <view>
+                    <view class="tn-text-bold tn-text tn-color-white">{{ pickItemText(item, 'nameZh', 'nameEn') }}</view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view class="bill-section tn-margin-top tn-margin-left tn-margin-right tn-padding-lg">
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+            <view class="tn-text-bold tn-text tn-color-black">{{ t('myBill') }}</view>
+            <view class="status-tag tn-text-xs" :class="unpaidBillCount ? 'tag-busy' : 'tag-free'">{{ unpaidBillCount ? t('unpaid') : t('paidOff') }}</view>
+          </view>
+          <view class="tn-flex tn-flex-row-between tn-flex-col-bottom tn-margin-bottom-sm">
+            <view class="tn-text-bold tn-color-black" style="font-size: 60rpx;">
+              <text class="tn-text-lg tn-margin-right-xs">¥</text>{{ formatMoney(unpaidBillTotal) }}
+            </view>
+            <view class="custom-btn btn-primary" style="padding: 10rpx 30rpx;" @click.stop="goUtilityRecharge">
+              <text class="tn-text-sm tn-text-bold">{{ unpaidBillCount ? t('payBill') : t('viewBill') }}</text>
+            </view>
+          </view>
+          <view class="tn-flex tn-flex-row-between tn-margin-top">
+            <view class="tn-flex tn-flex-direction-column">
+              <text class="tn-color-gray tn-text-xs">{{ t('billType') }}</text>
+              <text class="tn-text-bold tn-text-sm tn-margin-top-xs tn-color-black clamp-text-1">{{ unpaidBillPrimaryType }}</text>
+            </view>
+            <view class="tn-flex tn-flex-direction-column">
+              <text class="tn-color-gray tn-text-xs">{{ t('billCount') }}</text>
+              <text class="tn-text-bold tn-text-sm tn-margin-top-xs tn-color-black">{{ unpaidBillCount }} {{ t('billUnit') }}</text>
+            </view>
+            <view class="tn-flex tn-flex-direction-column">
+              <text class="tn-color-gray tn-text-xs">{{ t('lastCreateTime') }}</text>
+              <text class="tn-text-bold tn-text-sm tn-margin-top-xs tn-color-black">{{ latestBillTimeText }}</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 专属管家 (原活动位置) -->
+        <view class="butler-card-new tn-margin-top tn-margin-left tn-margin-right">
+          <view class="tn-text-bold tn-text tn-color-black tn-margin-bottom">{{ t('butler') }}</view>
+          <view class="butler-card-new__inner">
+            <view v-if="areaManagers.length" class="butler-card-new__list">
+              <view
+                v-for="(manager, index) in areaManagers"
+                :key="manager.userCode || manager.userName || manager.name || index"
+                class="butler-member-new"
+              >
+                <view class="butler-member-new__identity">
+                  <view class="butler-avatar-new">
+                    <image v-if="getManagerAvatar(manager)" :src="getManagerAvatar(manager)" mode="aspectFill"></image>
+                    <view v-else class="butler-avatar-new-fallback tn-flex tn-flex-col-center tn-flex-row-center">
+                      <text class="butler-avatar-new-fallback-text">{{ getManagerInitial(manager) }}</text>
+                    </view>
+                    <view class="online-dot"></view>
+                  </view>
+                  <view class="butler-member-new__info">
+                    <view class="butler-member-new__name">
+                      {{ getManagerName(manager) }}
+                      <text v-if="index === 0" class="butler-member-new__tag">{{ t('primaryButlerTag') }}</text>
+                    </view>
+                    <view class="butler-member-new__phone">{{ getManagerPhone(manager) || t('noContactPhone') }}</view>
+                  </view>
+                </view>
+                <view
+                  class="butler-member-new__action"
+                  :class="{ 'disabled': !getManagerPhone(manager) }"
+                  @click.stop="handleAreaManagerCall(manager)"
+                >
+                  <text class="tn-icon-phone-fill"></text>
+                </view>
+              </view>
+            </view>
+            <view v-else class="butler-card-new__list">
+              <view class="butler-member-new">
+                <view class="butler-member-new__identity">
+                  <view class="butler-avatar-new">
+                    <view class="butler-avatar-new-fallback tn-flex tn-flex-col-center tn-flex-row-center">
+                      <text class="tn-icon-service-fill" style="font-size: 32rpx; color: #fff;"></text>
+                    </view>
+                  </view>
+                  <view class="butler-member-new__info">
+                    <view class="butler-member-new__name">{{ t('butler') }}</view>
+                    <view class="butler-member-new__phone">{{ isAreaManagerLoading ? t('loadingButlerInfo') : t('noButlerInfo') }}</view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { accountQueryBills, facilityManagers, gatewayRoomDeviceList, orderSearchedDetail } from '../../../api/index.js'
+import { getSessionSnapshot, saveMyRoomData } from '../../../utils/app-state'
+import { ACCOUNT_BILL_PAYMENT_STATUS, ACCOUNT_BILL_STATUS, fetchEnums, getAccountReferenceTypeLabel, getApplicationDetailStatusLabel } from '../../../utils/enum-store'
+import { getBookingStatusText } from '../../../utils/flow'
+import { normalizeBookingDetail, parseOrderDetailResponse } from '../../../utils/booking-helper'
+import { normalizeSmartDeviceList } from '../../../utils/smart-device'
+import { syncLoginStayState } from '../../../utils/session-sync'
+import { compactEnglishText } from '../../../utils/select-room-normalizers'
+import { addFilePrefix } from '../../../utils/common'
+
+const DEFAULT_SMART_BRAND_ID = 'Tuya'
+
+function normalizeBillList(response) {
+  const payload = response && response.data ? response.data : response
+  if (Array.isArray(payload)) {
+    return payload
+  }
+  if (payload && Array.isArray(payload.data)) {
+    return payload.data
+  }
+  return []
+}
+
+function looksLikeInternalCode(value) {
+  if (!value) {
+    return false
+  }
+  const text = String(value).trim()
+  if (!text) {
+    return false
+  }
+  return /^[A-Z0-9]{20,}$/i.test(text)
+}
+
+function pickReadableValue(...values) {
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i]
+    if (value === undefined || value === null) {
+      continue
+    }
+    const text = String(value).trim()
+    if (!text || looksLikeInternalCode(text)) {
+      continue
+    }
+    return text
+  }
+  return ''
+}
+
+function pickFirstFilledValue(...values) {
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i]
+    if (value === undefined || value === null) {
+      continue
+    }
+    const text = String(value).trim()
+    if (text) {
+      return text
+    }
+  }
+  return ''
+}
+
+function formatStayDate(value) {
+  if (!value) {
+    return ''
+  }
+  return String(value).replace('T', ' ').slice(0, 10)
+}
+
+function buildRoomDataFromOrder(order = {}) {
+  if (!order || typeof order !== 'object' || !Object.keys(order).length) {
+    return null
+  }
+
+  const stayStart = order.startDate || order.start || (order.checkInPeriod && order.checkInPeriod.start)
+  const stayEnd = order.endDate || order.end || (order.checkInPeriod && order.checkInPeriod.end)
+  const imageUrls = Array.isArray(order.imageUrls)
+    ? order.imageUrls
+    : typeof order.imageUrls === 'string'
+      ? order.imageUrls.split(',').map(item => item.trim()).filter(Boolean)
+      : []
+
+  return {
+    ...order,
+    roomLabel: pickReadableValue(order.roomLabel, order.roomNo),
+    titleZh: pickReadableValue(order.titleZh, order.roomTypeName, order.roomName) || '当前入住房间',
+    titleEn: pickReadableValue(order.titleEn, order.roomTypeNameEn, order.roomTypeName) || 'Current Stay',
+    leaseText: order.leaseText || [stayStart, stayEnd].filter(Boolean).map(item => formatStayDate(item)).join(' - '),
+    image: order.image || order.imageUrl || imageUrls[0] || ''
+  }
+}
+
+export default {
+  name: 'StayServiceTab',
+  data() {
+    return {
+      hasCheckedIn: false, // 模拟未入住/已入住状态
+      myRoomData: null, // 从缓存获取的房间信息
+      currentBooking: null,
+      isPendingStatusRefreshing: false,
+      areaManager: null,
+      areaManagers: [],
+      isAreaManagerLoading: false,
+      unpaidBillList: [],
+      smartDevices: [],
+      isSmartDevicesLoading: false,
+      smartDeviceError: '',
+      stayActions: [
+        { key: 'change-room', label: '换房申请', labelEn: 'Change Room', icon: 'tn-icon-home-smile-fill', title: '换房申请', titleEn: 'Change Room Request', titleEnShort: 'Room Change', desc: '提交换房原因、期望房型和管家审核说明。', descEn: 'Submit your reason, expected room type, and butler review notes.' },
+        { key: 'renew-stay', label: '续住申请', labelEn: 'Renew Stay', icon: 'tn-icon-calendar-fill', title: '续住申请', titleEn: 'Renew Stay Request', titleEnShort: 'Renew Stay', desc: '提交续住时长、续住原因和新的租期需求。', descEn: 'Submit extension duration, reason, and new lease request.' },
+        { key: 'checkout', label: '退房申请', labelEn: 'Check Out', icon: 'tn-icon-home-in-fill', title: '退房申请', titleEn: 'Checkout Request', titleEnShort: 'Check Out', desc: '提交退房时间、离场说明和验房申请。', descEn: 'Submit checkout time, leave notes, and inspection request.' }
+      ],
+      services: [
+        {
+          key: 'repair',
+          icon: 'tn-icon-set-fill',
+          nameZh: '报修',
+          nameEn: 'Repair',
+          statusZh: '24小时',
+          statusEn: '24 Hours',
+          isBusy: false,
+          image: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_19.png',
+          title: '报修申请',
+          titleEn: 'Repair Request',
+          titleEnShort: 'Repair',
+          desc: '提交报修位置、问题说明和期望上门时间。',
+          descEn: 'Submit the repair location, issue details, and preferred visit time.'
+        },
+        {
+          key: 'water-delivery',
+          icon: 'tn-icon-shop-fill',
+          nameZh: '送水服务',
+          nameEn: 'Water Delivery',
+          statusZh: '可提交',
+          statusEn: 'Available',
+          isBusy: false,
+          image: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_14.png',
+          title: '送水服务申请',
+          titleEn: 'Water Delivery Request',
+          titleEnShort: 'Water Delivery',
+          desc: '填写备注说明需要几桶水后提交申请。',
+          descEn: 'Submit the quantity of water needed and any notes.'
+        },
+        {
+          key: 'cleaning',
+          icon: 'tn-icon-clean',
+          nameZh: '清洁服务',
+          nameEn: 'Cleaning Service',
+          statusZh: '可预约',
+          statusEn: 'Book Now',
+          isBusy: false,
+          image: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_20.png',
+          title: '清洁服务申请',
+          titleEn: 'Cleaning Service Request',
+          titleEnShort: 'Cleaning',
+          desc: '选择上门清洁日期并提交服务申请。',
+          descEn: 'Choose a cleaning date and submit the service request.'
+        },
+        {
+          key: 'complaint',
+          icon: 'tn-icon-message-fill',
+          nameZh: '投诉建议',
+          nameEn: 'Feedback',
+          statusZh: '随时提交',
+          statusEn: 'Anytime',
+          isBusy: false,
+          image: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_8.png',
+          title: '投诉建议',
+          titleEn: 'Feedback',
+          titleEnShort: 'Feedback',
+          desc: '填写投诉内容或建议意见后提交反馈。',
+          descEn: 'Submit your complaint details or suggestions.'
+        },
+        {
+          key: 'lost-found',
+          icon: 'tn-icon-search',
+          nameZh: '失物拾物',
+          nameEn: 'Lost and Found',
+          statusZh: '登记中',
+          statusEn: 'Open',
+          isBusy: false,
+          image: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_13.png',
+          title: '失物拾物登记',
+          titleEn: 'Lost and Found',
+          titleEnShort: 'Lost & Found',
+          desc: '提交失物或拾获物品信息，方便社区协助查找。',
+          descEn: 'Submit lost or found item details so the community can help.'
+        }
+      ],
+      i18n: {
+        zh: {
+          title: '我的入住',
+          bookingInfo: '预定信息',
+          submitBookingStep: '提交预定',
+          reviewStep: '管家审核',
+          contractStep: '签订合同',
+          checkinStep: '办理入住',
+          notCheckedInTitle: '您还没有在租房间',
+          notCheckedInDesc: '长租公寓为海外青年提供高端社区服务\n请先前往选房大厅挑选心仪套间',
+          bookingPendingTitle: '您的预订正在审核中',
+          bookingPendingDesc: '定金已支付，预定单正在审批流中。审批通过后将分配管家并等待分房号。',
+          goSelectRoom: '去选房',
+          stayService: '住中申请',
+          butler: '专属社区管家',
+          online: '当前在线 · 响应时间 < 5分钟',
+          callNow: '拨打',
+          publicService: '社区设施预约',
+          viewAll: '全部',
+          leaseTerm: '租期',
+          activeStatus: '使用中',
+          myBill: '本月账单',
+          unpaid: '待支付',
+          paidOff: '已结清',
+          payBill: '去支付',
+          viewBill: '查看账单',
+          smartControl: '全屋智能',
+          addSmartDevice: '添加智能设备',
+          smartAvailableAfterCheckin: '入住后可使用智能设备',
+          syncingSmartDevices: '正在同步智能设备...',
+          smartDeviceConnected: '已接入 {count} 台智能设备',
+          smartDeviceSyncFailed: '智能设备同步失败',
+          smartDeviceEmpty: '当前房间暂无智能设备',
+          roomDeviceUnconfigured: '房间智能设备未配置',
+          smartDeviceLoadFailed: '智能设备加载失败',
+          primaryButlerTag: '主责',
+          noContactPhone: '暂无联系电话',
+          loadingButlerInfo: '正在同步管家信息...',
+          noButlerInfo: '暂未获取到管家信息',
+          managerContactSummary: '当前区域共有 {count} 位管家可联系',
+          contactPhonePrefix: '联系电话 ',
+          loadingShort: '同步中',
+          onlineSingle: '1人在线',
+          pendingSync: '待同步',
+          billEmpty: '暂无待支付账单',
+          billRecordFallback: '账单记录',
+          pendingContractFound: '发现待签合同',
+          statusUpdated: '状态已刷新',
+          refreshFailed: '刷新失败，请稍后重试',
+          managerWechatCopied: '管家微信已复制',
+          noManagerWechat: '暂无管家微信',
+          loadingManagerInfo: '正在加载管家信息',
+          managerInitialFallback: '管',
+          billCount: '账单数量',
+          billUnit: '笔',
+          billType: '账单类型',
+          lastCreateTime: '最近生成',
+          communityEvent: '近期活动',
+          joinEvent: '立即报名',
+          signContractNow: '请尽快签订合同',
+          signContractDesc: '系统已生成待签合同，当前流程已进入签订合同阶段，完成签约后即可继续后续入住流程。',
+          contractSignedTitle: '合同已签署，等待办理入住',
+          contractSignedDesc: '您的住宿合同已经完成签署，管家会尽快为您安排办理入住流程。',
+          contractPendingNote: '检测到待签合同后，流程将停留在签订合同节点，请先完成签名。',
+          contractSignedNote: '合同签署完成，请等待管家通知办理入住。',
+          bookingPendingNote: '订单已提交，管家审核通过后会同步更多入住信息。',
+          contractRoom: '合同房型',
+          bookedRoomType: '预定房型',
+          refreshing: '刷新中...',
+          signContract: '去签约',
+          refreshStatus: '刷新状态',
+          pendingAssignment: '待审核分配',
+          currentStay: '当前入住房间',
+          controllable: '可控制',
+          deviceFallback: '设备 {index}',
+          bedPrefix: '床位 {label}',
+          multiButlerName: '{name} 等{count}位管家',
+          onDutyCount: '{count}人值班',
+          submitRequest: '提交申请',
+          completeFormBeforeSubmit: '请完善表单信息后提交。'
+        },
+        en: {
+          title: 'My Stay',
+          bookingInfo: 'Booking Info',
+          submitBookingStep: 'Submit',
+          reviewStep: 'Review',
+          contractStep: 'Contract',
+          checkinStep: 'Check-in',
+          notCheckedInTitle: 'No Leased Room Yet',
+          notCheckedInDesc: 'We provide premium co-living services.\nPlease explore and find your suite first.',
+          bookingPendingTitle: 'Your booking is under review',
+          bookingPendingDesc: 'Deposit has been paid. The booking is waiting for approval and butler assignment.',
+          goSelectRoom: 'Explore Rooms',
+          stayService: 'Service Request',
+          butler: 'Community Butler',
+          online: 'Online · Response < 5 mins',
+          callNow: 'Call',
+          publicService: 'Facility Booking',
+          viewAll: 'View All',
+          leaseTerm: 'Lease',
+          activeStatus: 'Active',
+          myBill: 'Monthly Bill',
+          unpaid: 'Unpaid',
+          paidOff: 'Paid Off',
+          payBill: 'Pay Now',
+          viewBill: 'View Bills',
+          smartControl: 'Smart Control',
+          addSmartDevice: 'Add Smart Device',
+          smartAvailableAfterCheckin: 'Smart devices are available after check-in',
+          syncingSmartDevices: 'Syncing smart devices...',
+          smartDeviceConnected: '{count} smart devices connected',
+          smartDeviceSyncFailed: 'Smart device sync failed',
+          smartDeviceEmpty: 'No smart devices in this room',
+          roomDeviceUnconfigured: 'Smart devices are not configured for this room',
+          smartDeviceLoadFailed: 'Failed to load smart devices',
+          primaryButlerTag: 'Lead',
+          noContactPhone: 'No contact number',
+          loadingButlerInfo: 'Syncing butler info...',
+          noButlerInfo: 'No butler information yet',
+          managerContactSummary: '{count} butlers are available in this area',
+          contactPhonePrefix: 'Phone ',
+          loadingShort: 'Syncing',
+          onlineSingle: '1 online',
+          pendingSync: 'Pending',
+          billEmpty: 'No unpaid bills',
+          billRecordFallback: 'Bill',
+          pendingContractFound: 'Pending contract found',
+          statusUpdated: 'Status updated',
+          refreshFailed: 'Refresh failed, please try again later',
+          managerWechatCopied: 'Butler Wechat copied',
+          noManagerWechat: 'No butler Wechat',
+          loadingManagerInfo: 'Loading butler info',
+          managerInitialFallback: 'B',
+          billCount: 'Bills',
+          billUnit: '',
+          billType: 'Type',
+          lastCreateTime: 'Latest',
+          communityEvent: 'Community Events',
+          joinEvent: 'Join Now',
+          signContractNow: 'Please sign your contract',
+          signContractDesc: 'A contract is ready for signature. You are now at the contract signing step.',
+          contractSignedTitle: 'Contract Signed',
+          contractSignedDesc: 'Your stay contract has been signed. The butler will arrange check-in for you shortly.',
+          contractPendingNote: 'The flow stays at the contract step until the contract is signed.',
+          contractSignedNote: 'Contract signed successfully. Awaiting check-in arrangement.',
+          bookingPendingNote: 'Your booking has been submitted. More stay details will appear after review.',
+          contractRoom: 'Contract Room',
+          bookedRoomType: 'Room Type',
+          refreshing: 'Refreshing...',
+          signContract: 'Sign Contract',
+          refreshStatus: 'Refresh Status',
+          pendingAssignment: 'Pending assignment',
+          currentStay: 'Current Stay',
+          controllable: 'Controllable',
+          deviceFallback: 'Device {index}',
+          bedPrefix: 'Bed {label}',
+          multiButlerName: '{name} +{count}',
+          onDutyCount: '{count} on duty',
+          submitRequest: 'Submit Request',
+          completeFormBeforeSubmit: 'Please complete the form before submitting.'
+        }
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    bookingStatusText() {
+      if (!this.currentBooking) {
+        return ''
+      }
+      const statusCodeCandidates = [
+        this.currentBooking.statusCode,
+        this.currentBooking.orderStatus,
+        this.currentBooking.approvalStatus,
+        this.currentBooking.auditStatus,
+        this.currentBooking.status
+      ]
+      const numericStatusCode = statusCodeCandidates
+        .map(value => Number(value))
+        .find(value => Number.isFinite(value))
+
+      return this.currentBooking.statusText
+        || this.currentBooking.statusDesc
+        || (numericStatusCode !== undefined ? getApplicationDetailStatusLabel(numericStatusCode) : '')
+        || getBookingStatusText(this.currentBooking.status || this.currentBooking.statusKey, this.language)
+    },
+    pendingContracts() {
+      const storeContracts = this.$store && this.$store.state && this.$store.state.vuex_pending_contracts
+      if (Array.isArray(storeContracts) && storeContracts.length) {
+        return storeContracts
+      }
+      const session = getSessionSnapshot()
+      return Array.isArray(session.pendingContracts) ? session.pendingContracts : []
+    },
+    isContractSigningStep() {
+      if (!this.hasCheckedIn && this.pendingContracts.length > 0) {
+        return true
+      }
+      return false
+    },
+    hasSignedContract() {
+      if (!this.hasCheckedIn && this.currentBooking && this.currentBooking.contractStatus === 1) {
+        return true
+      }
+      return false
+    },
+    pendingStageTitle() {
+      if (this.hasSignedContract) {
+        return this.t('contractSignedTitle')
+      }
+      if (this.isContractSigningStep) {
+        return this.t('signContractNow')
+      }
+      return this.t('bookingPendingTitle')
+    },
+    pendingStageDesc() {
+      if (this.hasSignedContract) {
+        return this.t('contractSignedDesc')
+      }
+      if (this.isContractSigningStep) {
+        return this.t('signContractDesc')
+      }
+      return this.t('bookingPendingDesc')
+    },
+    pendingInfoLabel() {
+      return this.hasSignedContract || this.isContractSigningStep ? this.t('contractRoom') : this.t('bookedRoomType')
+    },
+    pendingStageNote() {
+      if (this.hasSignedContract) {
+        return this.t('contractSignedNote')
+      }
+      if (this.isContractSigningStep) {
+        return this.t('contractPendingNote')
+      }
+      return this.t('bookingPendingNote')
+    },
+    pendingPrimaryActionText() {
+      if (this.isPendingStatusRefreshing) {
+        return this.t('refreshing')
+      }
+      if (this.isContractSigningStep && !this.hasSignedContract) {
+        return this.t('signContract')
+      }
+      return this.t('refreshStatus')
+    },
+    bookingRoomText() {
+      if (!this.currentBooking) {
+        return '--'
+      }
+      return this.currentBooking.roomName
+        || this.currentBooking.roomTypeName
+        || this.currentBooking.roomTypeNameEn
+        || this.t('pendingAssignment')
+    },
+    roomCardCover() {
+      return this.myRoomData && this.myRoomData.image ? this.myRoomData.image : ''
+    },
+    roomTitleText() {
+      if (!this.myRoomData) {
+        return this.t('currentStay')
+      }
+      return this.language === 'zh'
+        ? (pickReadableValue(this.myRoomData.titleZh, this.myRoomData.roomTypeName, this.myRoomData.roomName, this.myRoomData.titleEn) || this.t('currentStay'))
+        : (pickReadableValue(this.myRoomData.titleEn, this.myRoomData.roomTypeNameEn, this.myRoomData.roomTypeName, this.myRoomData.titleZh) || this.t('currentStay'))
+    },
+    roomDisplayText() {
+      if (!this.myRoomData) {
+        return '--'
+      }
+      return pickReadableValue(
+        this.myRoomData.roomNo,
+        this.myRoomData.roomLabel,
+        this.myRoomData.roomName
+      ) || '--'
+    },
+    leaseTermText() {
+      if (!this.myRoomData) {
+        return '--'
+      }
+      const start = this.myRoomData.startDate || this.myRoomData.start || (this.myRoomData.checkInPeriod && this.myRoomData.checkInPeriod.start)
+      const end = this.myRoomData.endDate || this.myRoomData.end || (this.myRoomData.checkInPeriod && this.myRoomData.checkInPeriod.end)
+      const leaseText = this.myRoomData.leaseText || [start, end].filter(Boolean).map(item => formatStayDate(item)).join(' - ')
+      return leaseText || '--'
+    },
+    unpaidBillCount() {
+      return this.unpaidBillList.length
+    },
+    unpaidBillTotal() {
+      return this.unpaidBillList.reduce((sum, item) => {
+        return sum + Number(item && item.remainingAmount ? item.remainingAmount : 0)
+      }, 0)
+    },
+    unpaidBillPrimaryType() {
+      if (!this.unpaidBillList.length) {
+        return this.t('billEmpty')
+      }
+      const firstBill = this.unpaidBillList[0] || {}
+      return firstBill.referenceTypeDesc || getAccountReferenceTypeLabel(firstBill.referenceType, this.t('billRecordFallback'))
+    },
+    latestBillTimeText() {
+      if (!this.unpaidBillList.length || !this.unpaidBillList[0].createTime) {
+        return '--'
+      }
+      return this.formatDateTime(this.unpaidBillList[0].createTime)
+    },
+    smartSummaryText() {
+      if (!this.hasCheckedIn) {
+        return this.t('smartAvailableAfterCheckin')
+      }
+      if (this.isSmartDevicesLoading) {
+        return this.t('syncingSmartDevices')
+      }
+      if (this.smartDevices.length) {
+        return this.t('smartDeviceConnected').replace('{count}', this.smartDevices.length)
+      }
+      if (this.smartDeviceError) {
+        return this.t('smartDeviceSyncFailed')
+      }
+      return this.t('smartDeviceEmpty')
+    },
+    smartQuickDeviceCards() {
+      return this.smartDevices.map((device, index) => ({
+        ...device,
+        key: device.renderKey || device.deviceId || device.deviceNo || `smart-device-${index}`,
+        name: device.deviceName || this.t('deviceFallback').replace('{index}', index + 1),
+        stateText: device.stateText || this.t('controllable')
+      }))
+    },
+    stayLocationText() {
+      if (!this.myRoomData) {
+        return ''
+      }
+      const bedLabel = this.myRoomData.slot || this.myRoomData.slotCode
+      return [
+        this.myRoomData.areaName || this.myRoomData.campusName || '',
+        this.myRoomData.buildingName || '',
+        this.myRoomData.buildingSectionName || '',
+        this.myRoomData.floorName || this.myRoomData.floor || '',
+        bedLabel ? this.t('bedPrefix').replace('{label}', bedLabel) : ''
+      ].filter(Boolean).join(' · ')
+    },
+    butlerAvatar() {
+      const manager = this.primaryAreaManager || {}
+      return addFilePrefix(
+        manager.avatar
+        || manager.avatarUrl
+        || manager.headImg
+        || manager.photo
+        || ''
+      )
+    },
+    primaryAreaManager() {
+      return this.areaManagers[0] || this.areaManager || null
+    },
+    butlerDisplayName() {
+      const manager = this.primaryAreaManager || {}
+      const managerName = manager.displayName || manager.name || manager.userName || manager.nickname || manager.userCode || ''
+      if (!managerName) {
+        return this.t('butler')
+      }
+      if (this.areaManagers.length > 1) {
+        return this.t('multiButlerName')
+          .replace('{name}', managerName)
+          .replace('{count}', this.language === 'zh' ? this.areaManagers.length : this.areaManagers.length - 1)
+      }
+      return managerName
+    },
+    butlerSubtitle() {
+      if (this.isAreaManagerLoading) {
+        return this.t('loadingButlerInfo')
+      }
+      if (this.areaManagers.length > 1) {
+        return this.t('managerContactSummary').replace('{count}', this.areaManagers.length)
+      }
+      const manager = this.primaryAreaManager || {}
+      const phone = this.getManagerPhone(manager)
+      if (phone) {
+        return `${this.t('contactPhonePrefix')}${phone}`
+      }
+      return this.t('online')
+    },
+    butlerCountText() {
+      if (this.isAreaManagerLoading) {
+        return this.t('loadingShort')
+      }
+      if (this.areaManagers.length > 1) {
+        return this.t('onDutyCount').replace('{count}', this.areaManagers.length)
+      }
+      if (this.areaManagers.length === 1) {
+        return this.t('onlineSingle')
+      }
+      return this.t('pendingSync')
+    },
+    butlerPhoneNumber() {
+      const manager = this.primaryAreaManager || {}
+      return this.getManagerPhone(manager)
+    }
+  },
+  mounted() {
+    fetchEnums(false, this.language)
+    this.checkLocalStatus()
+    this.loadUnpaidBills()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pages.index.component.StayServiceTab', key, params)
+    },
+    pickItemText(item = {}, zhField, enField, fallback = '') {
+      if (this.language === 'en') {
+        const shortField = `${enField}Short`
+        return item[shortField] || item[enField] || item[zhField] || fallback
+      }
+      return item[zhField] || item[enField] || fallback
+    },
+    normalizeManager(manager = {}) {
+      if (!manager || typeof manager !== 'object') {
+        return null
+      }
+      const phoneSource = manager.phone || manager.mobile || manager.tel || manager.managerPhone || ''
+      const phone = typeof phoneSource === 'string' ? phoneSource.trim() : phoneSource
+      const userCode = manager.userCode || manager.code || ''
+      const displayName = manager.name || manager.userName || manager.nickname || userCode || ''
+      return {
+        ...manager,
+        phone,
+        userCode,
+        displayName
+      }
+    },
+    getStoreUser() {
+      return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
+    },
+    getStoreCurrentOrder() {
+      return (this.$store && this.$store.state && this.$store.state.vuex_current_order) || null
+    },
+    getStoreCheckinStatus() {
+      return !!(this.$store && this.$store.state && this.$store.state.vuex_checkin_status)
+    },
+    isCurrentLogin() {
+      const storeUser = this.getStoreUser()
+      if (storeUser && Object.keys(storeUser).length) {
+        return true
+      }
+      return !!getSessionSnapshot().isLogin
+    },
+    formatMoney(value) {
+      const amount = Number(value || 0)
+      return amount.toFixed(2)
+    },
+    formatDateTime(value) {
+      if (!value) {
+        return '--'
+      }
+      const text = String(value).replace('T', ' ')
+      return text.length > 16 ? text.slice(0, 16) : text
+    },
+    getCurrentOrderNo() {
+      const storeCurrentOrder = this.getStoreCurrentOrder()
+      if (storeCurrentOrder && storeCurrentOrder.orderNo) {
+        return String(storeCurrentOrder.orderNo).trim()
+      }
+      const roomData = this.myRoomData || {}
+      return String(roomData.orderNo || '').trim()
+    },
+    getCurrentAreaCode() {
+      const roomData = this.myRoomData || {}
+      return String(
+        roomData.areaCode
+        || roomData.code
+        || roomData.areaNo
+        || ''
+      ).trim()
+    },
+    getCurrentSmartBrandId() {
+      const roomData = this.myRoomData || {}
+      return pickFirstFilledValue(
+        roomData.brandId,
+        roomData.platform,
+        roomData.brand,
+        DEFAULT_SMART_BRAND_ID
+      ) || DEFAULT_SMART_BRAND_ID
+    },
+    getCurrentSmartRoomCode() {
+      const roomData = this.myRoomData || {}
+      return pickFirstFilledValue(
+        roomData.roomCode,
+        roomData.facilityCode,
+        roomData.gatewayRoomCode,
+        roomData.iotRoomCode
+      )
+    },
+    getCurrentSmartRoomName() {
+      const roomData = this.myRoomData || {}
+      return pickReadableValue(
+        roomData.roomName,
+        roomData.roomLabel,
+        roomData.roomNo
+      )
+    },
+    mergeCurrentOrderDetail(orderDetail = {}) {
+      const detail = buildRoomDataFromOrder(orderDetail)
+      if (!detail) {
+        return
+      }
+
+      this.myRoomData = {
+        ...(this.myRoomData || {}),
+        ...detail
+      }
+      saveMyRoomData(this.myRoomData)
+
+      if (this.$store && this.$store.commit) {
+        const currentOrder = this.getStoreCurrentOrder()
+        this.$store.commit('$tStore', {
+          name: 'vuex_current_order',
+          value: {
+            ...(currentOrder || {}),
+            ...orderDetail
+          }
+        })
+        this.$store.commit('$tStore', {
+          name: 'vuex_user',
+          value: {
+            ...this.getStoreUser(),
+            currentOrder: {
+              ...((this.getStoreUser() && this.getStoreUser().currentOrder) || {}),
+              ...orderDetail
+            }
+          }
+        })
+      }
+
+      this.loadSmartDevices()
+    },
+    resetSmartDevicesState() {
+      this.smartDevices = []
+      this.smartDeviceError = ''
+    },
+    loadSmartDevices() {
+      if (!this.hasCheckedIn) {
+        this.resetSmartDevicesState()
+        return Promise.resolve()
+      }
+
+      const brandId = this.getCurrentSmartBrandId()
+      const roomCode = this.getCurrentSmartRoomCode()
+      if (!brandId || !roomCode) {
+        this.resetSmartDevicesState()
+        this.smartDeviceError = this.t('roomDeviceUnconfigured')
+        return Promise.resolve()
+      }
+
+      const requestKey = `${brandId}::${roomCode}`
+      if (this._loadSmartDevicesPromise && this._loadSmartDevicesKey === requestKey) {
+        return this._loadSmartDevicesPromise
+      }
+
+      this._loadSmartDevicesKey = requestKey
+      this.isSmartDevicesLoading = true
+      const requestPromise = gatewayRoomDeviceList(brandId, roomCode)
+        .then((response) => {
+          if (`${this.getCurrentSmartBrandId()}::${this.getCurrentSmartRoomCode()}` !== requestKey) {
+            return
+          }
+          const deviceList = normalizeSmartDeviceList(response)
+          this.smartDevices = deviceList
+          this.smartDeviceError = ''
+        })
+        .catch((error) => {
+          console.error('load stay smart devices failed', error)
+          this.smartDevices = []
+          this.smartDeviceError = (error && (error.message || error.msg)) || this.t('smartDeviceLoadFailed')
+        })
+        .finally(() => {
+          this.isSmartDevicesLoading = false
+          this._loadSmartDevicesPromise = null
+        })
+
+      this._loadSmartDevicesPromise = requestPromise
+      return requestPromise
+    },
+    loadAreaManager() {
+      if (!this.hasCheckedIn) {
+        this.areaManager = null
+        this.areaManagers = []
+        return Promise.resolve()
+      }
+
+      const areaCode = this.getCurrentAreaCode()
+      if (!areaCode) {
+        this.areaManager = null
+        this.areaManagers = []
+        return Promise.resolve()
+      }
+
+      if (this._loadAreaManagerPromise && this._loadAreaManagerAreaCode === areaCode) {
+        return this._loadAreaManagerPromise
+      }
+
+      this._loadAreaManagerAreaCode = areaCode
+      this.isAreaManagerLoading = true
+      this._loadAreaManagerPromise = facilityManagers({
+        FacilityType: 10,
+        FacilityCode: areaCode
+      }, this.language)
+        .then((res) => {
+          if (this.getCurrentAreaCode() !== areaCode) {
+            return
+          }
+          const rawData = res && res.data !== undefined ? res.data : res
+          const managerList = Array.isArray(rawData)
+            ? rawData
+            : (
+              Array.isArray(rawData && rawData.data)
+                ? rawData.data
+                : (Array.isArray(rawData && rawData.managers) ? rawData.managers : [])
+            )
+          const normalizedManagers = Array.isArray(managerList)
+            ? managerList.map(item => this.normalizeManager(item)).filter(item => item && item.phone)
+            : []
+          this.areaManagers = normalizedManagers
+          this.areaManager = normalizedManagers[0] || null
+        })
+        .catch((error) => {
+          console.warn('load area manager failed', error)
+          this.areaManager = null
+          this.areaManagers = []
+        })
+        .finally(() => {
+          this.isAreaManagerLoading = false
+          this._loadAreaManagerPromise = null
+        })
+
+      return this._loadAreaManagerPromise
+    },
+    fetchCurrentOrderDetail() {
+      if (!this.hasCheckedIn) {
+        return Promise.resolve()
+      }
+
+      const orderNo = this.getCurrentOrderNo()
+      if (!orderNo) {
+        return Promise.resolve()
+      }
+
+      if (this._fetchCurrentOrderDetailPromise && this._fetchCurrentOrderDetailOrderNo === orderNo) {
+        return this._fetchCurrentOrderDetailPromise
+      }
+
+      this._fetchCurrentOrderDetailOrderNo = orderNo
+      this._fetchCurrentOrderDetailPromise = orderSearchedDetail(orderNo)
+        .then((response) => {
+          if (this.getCurrentOrderNo() !== orderNo) {
+            return
+          }
+          const detail = normalizeBookingDetail(parseOrderDetailResponse(response))
+          if (detail) {
+            this.mergeCurrentOrderDetail(detail)
+          }
+        })
+        .catch((error) => {
+          console.error('fetch current order detail failed', error)
+        })
+        .finally(() => {
+          this._fetchCurrentOrderDetailPromise = null
+        })
+
+      return this._fetchCurrentOrderDetailPromise
+    },
+    checkLocalStatus() {
+      const session = getSessionSnapshot()
+      const storeUser = this.getStoreUser()
+      const storeCurrentOrder = this.getStoreCurrentOrder()
+      if (!this.isCurrentLogin()) {
+        this.hasCheckedIn = false
+        this.currentBooking = null
+        this.myRoomData = null
+        return
+      }
+
+      this.currentBooking = storeUser.currentBooking || session.currentBooking || null
+      if (this.getStoreCheckinStatus() || session.hasCheckedIn) {
+        this.hasCheckedIn = true
+        this.myRoomData = buildRoomDataFromOrder(storeCurrentOrder) || buildRoomDataFromOrder(session.myRoomData) || session.myRoomData || null
+        this.fetchCurrentOrderDetail()
+        this.loadAreaManager()
+        this.loadSmartDevices()
+      } else {
+        this.hasCheckedIn = false
+        this.myRoomData = null
+        this.areaManager = null
+        this.areaManagers = []
+        this.resetSmartDevicesState()
+      }
+    },
+    loadUnpaidBills() {
+      if (!this.isCurrentLogin()) {
+        this.unpaidBillList = []
+        return Promise.resolve()
+      }
+      return accountQueryBills({
+        status: ACCOUNT_BILL_STATUS.ACTIVE,
+        paymentStatus: ACCOUNT_BILL_PAYMENT_STATUS.UNPAID
+      })
+        .then((response) => {
+          const list = normalizeBillList(response)
+          this.unpaidBillList = Array.isArray(list) ? list : []
+        })
+        .catch(() => {
+          this.unpaidBillList = []
+        })
+    },
+    handlePendingPrimaryAction() {
+      if (this.isContractSigningStep && !this.hasSignedContract) {
+        this.goSignContract()
+        return
+      }
+      this.refreshPendingStatus()
+    },
+    goSignContract() {
+      const contract = this.pendingContracts[0]
+      if (!contract) {
+        this.refreshPendingStatus()
+        return
+      }
+      uni.navigateTo({
+        url: `/pkgService/contract_sign/contract_sign?no=${encodeURIComponent(contract.no || contract.contractNo || '')}&orderNo=${encodeURIComponent(contract.orderNo || '')}`
+      })
+    },
+    refreshPendingStatus() {
+      if (this.isPendingStatusRefreshing) {
+        return
+      }
+      let refreshedStayState = {}
+      this.isPendingStatusRefreshing = true
+      syncLoginStayState({ force: true })
+        .then((result = {}) => {
+          refreshedStayState = result
+          this.checkLocalStatus()
+          return this.loadUnpaidBills()
+        })
+        .then(() => {
+          const pendingContracts = Array.isArray(refreshedStayState.pendingContracts)
+            ? refreshedStayState.pendingContracts
+            : []
+          this.$emit('refresh-shell-state', {
+            pendingContracts
+          })
+          uni.showToast({
+            title: pendingContracts.length
+              ? this.t('pendingContractFound')
+              : this.t('statusUpdated'),
+            icon: 'success'
+          })
+        })
+        .catch((error) => {
+          console.error('refresh pending status failed', error)
+          uni.showToast({
+            title: this.t('refreshFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.isPendingStatusRefreshing = false
+        })
+    },
+    goSelectRoom() {
+      uni.reLaunch({
+        url: '/pages/index/index?index=0&pageId=select-room'
+      });
+    },
+    goBookingDetail() {
+      const orderNo = this.currentBooking && this.currentBooking.orderNo
+        ? encodeURIComponent(this.currentBooking.orderNo)
+        : ''
+      uni.navigateTo({
+        url: orderNo
+          ? `/pkgBooking/booking_detail/booking_detail?orderNo=${orderNo}`
+          : '/pkgBooking/booking_detail/booking_detail'
+      });
+    },
+    buildServiceSubmitUrl(item = {}) {
+      const roomData = this.myRoomData || {}
+      const titleZh = item.title || item.titleEn || item.nameZh || item.nameEn || this.t('submitRequest')
+      const titleEn = item.titleEnShort || item.titleEn || item.title || item.nameEn || item.nameZh || this.t('submitRequest')
+      const descZh = item.desc || item.descEn || this.t('completeFormBeforeSubmit')
+      const descEn = compactEnglishText(item.descEn || item.desc || '', 68) || item.descEn || item.desc || this.t('completeFormBeforeSubmit')
+      const title = this.language === 'en'
+        ? titleEn
+        : titleZh
+      const desc = this.language === 'en'
+        ? descEn
+        : descZh
+      const payload = {
+        businessType: item.key || '',
+        sourceType: 'stay-service',
+        roomLabel: roomData.roomLabel || '',
+        currentRoomLabel: roomData.roomLabel || '',
+        areaCode: roomData.areaCode || '',
+        areaName: roomData.areaName || '',
+        roomTypeCode: item.key === 'change-room' ? (roomData.roomTypeCode || '') : '',
+        roomTypeName: item.key === 'change-room' ? (roomData.roomTypeName || roomData.titleZh || '') : '',
+        roomName: roomData.roomLabel || ''
+      }
+      return `/pkgService/submit_request/submit_request?title=${encodeURIComponent(title || this.t('submitRequest'))}&titleZh=${encodeURIComponent(titleZh)}&titleEn=${encodeURIComponent(titleEn)}&desc=${encodeURIComponent(desc || this.t('completeFormBeforeSubmit'))}&descZh=${encodeURIComponent(descZh)}&descEn=${encodeURIComponent(descEn)}&payload=${encodeURIComponent(JSON.stringify(payload))}`
+    },
+    openServicePage(item) {
+      if (item.key === 'utility') {
+        uni.navigateTo({
+          url: '/pkgService/utility_recharge/utility_recharge'
+        });
+        return
+      }
+      uni.navigateTo({
+        url: this.buildServiceSubmitUrl(item)
+      });
+    },
+    getManagerName(manager = {}) {
+      return manager.displayName || manager.name || manager.userName || manager.nickname || manager.userCode || manager.phone || ''
+    },
+    getManagerPhone(manager = {}) {
+      return manager.phone || manager.mobile || manager.tel || manager.managerPhone || ''
+    },
+    getManagerAvatar(manager = {}) {
+      return addFilePrefix(manager.avatar || manager.avatarUrl || manager.headImg || manager.photo || '')
+    },
+    getManagerInitial(manager = {}) {
+      const name = this.getManagerName(manager)
+      return String(name).trim().slice(0, 1) || this.t('managerInitialFallback')
+    },
+    handleButlerWechat() {
+      const manager = this.primaryAreaManager || {}
+      const wechat = manager.wechat || manager.wechatNo || manager.wechatCode || ''
+      if (wechat) {
+        uni.setClipboardData({
+          data: String(wechat),
+          success: () => {
+            uni.showToast({
+              title: this.t('managerWechatCopied'),
+              icon: 'success'
+            })
+          }
+        })
+        return
+      }
+      uni.showToast({
+        title: this.t('noManagerWechat'),
+        icon: 'none'
+      })
+    },
+    handleAreaManagerCall(manager = {}) {
+      const phone = this.getManagerPhone(manager)
+      if (!phone) {
+        uni.showToast({
+          title: this.t('noContactPhone'),
+          icon: 'none'
+        })
+        return
+      }
+      uni.makePhoneCall({
+        phoneNumber: String(phone)
+      })
+    },
+    handleButlerCall() {
+      if (!this.butlerPhoneNumber) {
+        uni.showToast({
+          title: this.isAreaManagerLoading ? this.t('loadingManagerInfo') : this.t('noContactPhone'),
+          icon: 'none'
+        })
+        return
+      }
+      uni.makePhoneCall({
+        phoneNumber: String(this.butlerPhoneNumber)
+      })
+    },
+    goUtilityRecharge() {
+      uni.navigateTo({
+        url: '/pkgService/utility_recharge/utility_recharge'
+      });
+    },
+    goSmartControl() {
+      const roomCode = this.getCurrentSmartRoomCode()
+      const roomName = this.getCurrentSmartRoomName()
+      const brandId = this.getCurrentSmartBrandId()
+      uni.navigateTo({
+        url: `/pkgService/smart_control/smart_control?brandId=${encodeURIComponent(brandId)}&roomCode=${encodeURIComponent(roomCode || '')}&roomName=${encodeURIComponent(roomName || '')}`
+      })
+    },
+    openSmartDevice(device = {}) {
+      if (!device || !Object.keys(device).length) {
+        this.goSmartControl()
+        return
+      }
+
+      const roomCode = this.getCurrentSmartRoomCode()
+      const roomName = this.getCurrentSmartRoomName()
+      const brandId = this.getCurrentSmartBrandId()
+      const payload = encodeURIComponent(JSON.stringify(device))
+      uni.vibrateShort()
+      uni.navigateTo({
+        url: `/pkgService/device_control/device_control?brandId=${encodeURIComponent(brandId)}&roomCode=${encodeURIComponent(roomCode || '')}&roomName=${encodeURIComponent(roomName || '')}&device=${payload}`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.service-page {
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  min-height: 100vh;
+}
+.service-scroll {
+  height: calc(100vh - 100rpx);
+}
+
+.empty-state {
+  min-height: calc(100vh - 100rpx);
+}
+
+/* 无预订卡片 */
+.no-booking-card {
+  position: relative;
+  border-radius: 32rpx;
+  overflow: hidden;
+  box-shadow: 0 16rpx 40rpx rgba($brand-primary, 0.15);
+  margin-top: 20rpx;
+}
+.no-booking-bg {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #1f4f8a 0%, #2a5caa 45%, #15345e 100%);
+  z-index: 1;
+}
+.no-booking-content {
+  position: relative;
+  z-index: 2;
+  padding: 80rpx 40rpx;
+}
+.icon-wrap {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 60rpx;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon-wrap .tn-icon-home-smile {
+  font-size: 60rpx;
+}
+.btn-glass {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1rpx solid rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(10px);
+  color: #ffffff;
+}
+
+/* 审核中卡片 - 重新设计 */
+.pending-booking-card {
+  background: #ffffff;
+  border-radius: 32rpx;
+  box-shadow: 0 16rpx 40rpx rgba(43, 142, 255, 0.08);
+  overflow: hidden;
+  margin-top: 20rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.8);
+  position: relative;
+}
+
+.pending-hero {
+  height: 220rpx;
+  position: relative;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.06) 0%, rgba($brand-primary, 0.12) 100%);
+  overflow: hidden;
+}
+
+.hero-bg-shape {
+  position: absolute;
+  top: -100rpx;
+  right: -50rpx;
+  width: 300rpx;
+  height: 300rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba($brand-primary, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+}
+
+.hero-content {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+
+.status-icon-ring {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 70rpx;
+  background: #ffffff;
+  box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.12);
+  border: 8rpx solid rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(8px);
+}
+
+.status-icon {
+  font-size: 70rpx;
+  color: #FFA500; /* 使用琥珀色表示审核中，与规范一致 */
+}
+
+.status-text-area {
+  margin-top: -10rpx;
+}
+
+.status-desc {
+  line-height: 1.6;
+  padding: 0 20rpx;
+}
+
+/* 预定信息卡片拟物化 */
+.booking-ticket-card {
+  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
+  border-radius: 24rpx;
+  border: 1rpx solid rgba($brand-primary, 0.08);
+  box-shadow: inset 0 2rpx 0 rgba(255, 255, 255, 1), 0 8rpx 20rpx rgba(15, 23, 42, 0.03);
+  margin: 0 10rpx;
+}
+
+.ticket-header {
+  padding: 24rpx 32rpx;
+}
+
+.ticket-icon-wrap {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 12rpx;
+  background: rgba($brand-primary, 0.1);
+  color: $brand-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+}
+
+.ticket-status-badge {
+  font-size: 22rpx;
+  color: #FFA500;
+  background: rgba(255, 165, 0, 0.1);
+  padding: 6rpx 16rpx;
+  border-radius: 12rpx;
+  font-weight: bold;
+}
+
+.ticket-divider {
+  padding: 0 32rpx;
+}
+
+.divider-line {
+  height: 2rpx;
+  background: repeating-linear-gradient(to right, rgba($brand-primary, 0.15) 0, rgba($brand-primary, 0.15) 8rpx, transparent 8rpx, transparent 16rpx);
+}
+
+.ticket-content {
+  padding: 32rpx;
+}
+
+.ticket-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.ticket-label {
+  color: #64748b;
+  font-size: 26rpx;
+  min-width: 120rpx;
+}
+
+.ticket-value {
+  color: #1e293b;
+  font-size: 28rpx;
+  flex: 1;
+  text-align: right;
+  margin-left: 20rpx;
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.ticket-note {
+  color: #64748b;
+  font-size: 24rpx;
+  line-height: 1.6;
+}
+
+/* 进度条样式升级 */
+.process-track {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0 10rpx;
+}
+
+.track-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  flex: 1;
+}
+
+.track-dot {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 20rpx;
+  background: #e2e8f0;
+  border: 4rpx solid #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 20rpx;
+  position: relative;
+}
+
+.track-item.active .track-dot {
+  background: $brand-primary;
+}
+
+/* 呼吸灯效果 */
+.track-item.current .track-dot {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.dot-pulse {
+  position: absolute;
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background: rgba(#FFA500, 0.4);
+  animation: pulse 2s infinite;
+}
+
+.dot-inner {
+  position: relative;
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  background: #FFA500;
+  z-index: 2;
+  box-shadow: 0 0 10rpx rgba(#FFA500, 0.6);
+}
+
+@keyframes pulse {
+  0% { transform: scale(0.8); opacity: 1; }
+  100% { transform: scale(2); opacity: 0; }
+}
+
+.track-text {
+  font-size: 22rpx;
+  color: #94a3b8;
+  margin-top: 16rpx;
+  white-space: nowrap;
+}
+
+.track-item.active .track-text {
+  color: $brand-primary;
+  font-weight: bold;
+}
+
+.track-item.current .track-text {
+  color: #FFA500;
+  font-weight: bold;
+}
+
+.track-line {
+  flex: 1;
+  height: 4rpx;
+  background: #e2e8f0;
+  margin: 18rpx -30rpx 0;
+  z-index: 1;
+  border-radius: 2rpx;
+}
+
+.track-line.active-line {
+  background: linear-gradient(90deg, $brand-primary 0%, rgba($brand-primary, 0.3) 100%);
+}
+
+/* 操作按钮 */
+.action-btn-group {
+  gap: 24rpx;
+}
+
+.action-btn-group--single {
+  justify-content: center;
+}
+
+.pending-action-btn {
+  flex: 1;
+  height: 92rpx;
+  border-radius: 24rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 24rpx;
+  transition: all 0.3s ease;
+  font-size: 28rpx;
+}
+
+.action-btn-group--single .pending-action-btn {
+  flex: none;
+  width: 100%;
+}
+
+.pending-action-btn:active {
+  transform: scale(0.98);
+}
+
+.pending-action-btn--secondary {
+  background: #ffffff;
+  color: $brand-primary;
+  border: 2rpx solid rgba($brand-primary, 0.22);
+  box-shadow: 0 8rpx 18rpx rgba($brand-primary, 0.08);
+}
+
+.pending-action-btn--secondary:active {
+  box-shadow: 0 4rpx 10rpx rgba($brand-primary, 0.06);
+}
+
+.pending-action-btn--primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  border: 2rpx solid transparent;
+  box-shadow: 0 10rpx 24rpx rgba($brand-primary, 0.22);
+}
+
+.pending-action-btn--primary:active {
+  box-shadow: 0 6rpx 14rpx rgba($brand-primary, 0.16);
+}
+
+.stay-action-card {
+  width: 31%;
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 24rpx 12rpx;
+  text-align: center;
+  box-shadow: 0 10rpx 26rpx rgba(0, 0, 0, 0.03);
+}
+
+.stay-action-icon {
+  width: 72rpx;
+  height: 72rpx;
+  margin: 0 auto;
+  border-radius: 50%;
+  background: linear-gradient(135deg, $icon-surface-brand-soft 0%, rgba($brand-primary, 0.04) 100%);
+  color: $icon-tone-brand-deep;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 34rpx;
+  box-shadow: inset 0 0 0 1rpx rgba($brand-primary, 0.08);
+}
+
+.stay-action-icon-symbol {
+  font-size: 32rpx;
+  line-height: 1;
+}
+
+.stay-action-title {
+  font-size: 24rpx;
+  font-weight: bold;
+  color: #222222;
+  line-height: 1.3;
+  text-align: center;
+  word-break: break-word;
+}
+
+.half-btn {
+  width: 48%;
+  height: 92rpx;
+}
+
+/* --- 融合版房卡 (Integrated Room Card) --- */
+.integrated-room-card {
+  border-radius: 36rpx;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(135deg, #122d52 0%, #1c4678 46%, #16355d 100%);
+  box-shadow: 0 20rpx 54rpx rgba(15, 36, 68, 0.2);
+  border: 1rpx solid rgba(255, 255, 255, 0.08);
+}
+
+.irc-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  transform: scale(1.04);
+}
+
+.irc-placeholder {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(135deg, #143764 0%, #255694 46%, #102b4d 100%);
+}
+
+.irc-placeholder-glow {
+  position: absolute;
+  width: 360rpx;
+  height: 360rpx;
+  right: -100rpx;
+  top: -100rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 72%);
+}
+
+.irc-mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 3;
+  background:
+    linear-gradient(135deg, rgba(5, 18, 38, 0.85) 0%, rgba(8, 27, 55, 0.6) 42%, rgba(6, 18, 36, 0.8) 100%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.irc-content {
+  position: relative;
+  z-index: 4;
+  padding: 36rpx;
+}
+
+.irc-header {
+  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 30rpx;
+}
+
+.irc-room-no {
+  font-size: 64rpx;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: 2rpx;
+  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
+}
+
+.irc-status-badge {
+  height: 48rpx;
+  padding: 0 20rpx;
+  border-radius: 999rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(255, 219, 128, 0.9) 0%, rgba(255, 190, 92, 0.9) 100%);
+  color: #7a4c00;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.irc-room-title {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+
+.irc-lease {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.irc-smart-area {
+  padding-top: 30rpx;
+}
+
+.irc-env-text {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.irc-smart-btn {
+  font-size: 24rpx;
+  color: #4facfe;
+  background: rgba(79, 172, 254, 0.1);
+  padding: 8rpx 20rpx;
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(79, 172, 254, 0.2);
+}
+
+.irc-smart-btn:active {
+  background: rgba(79, 172, 254, 0.2);
+}
+
+.irc-quick-controls {
+  width: 100%;
+  white-space: nowrap;
+  margin-top: 24rpx;
+}
+
+.irc-qc-list {
+  display: inline-flex;
+  gap: 20rpx;
+  min-width: 100%;
+  padding-bottom: 4rpx;
+}
+
+.irc-qc-item {
+  width: 144rpx;
+  height: 144rpx;
+  padding: 0 8rpx;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1rpx solid rgba(255, 255, 255, 0.06);
+  border-radius: 24rpx;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.irc-qc-item:active {
+  transform: scale(0.95);
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.irc-qc-item.is-active {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.irc-qc-icon {
+  font-size: 46rpx;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 12rpx;
+  transition: all 0.3s;
+}
+
+.irc-qc-item.is-active .irc-qc-icon {
+  color: #ffffff;
+  text-shadow: 0 0 16rpx rgba(255, 255, 255, 0.4);
+}
+
+.irc-qc-name {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.7);
+  transition: all 0.3s;
+  width: 100%;
+  text-align: center;
+  font-weight: 500;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+}
+
+.irc-qc-item.is-active .irc-qc-name {
+  color: #ffffff;
+}
+
+.irc-qc-empty {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 136rpx;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1rpx dashed rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 26rpx;
+  letter-spacing: 2rpx;
+}
+
+/* --- 新版管家列表 (Butler Card New) --- */
+.butler-card-new {
+  background-color: #ffffff;
+  border-radius: 24rpx;
+  padding: 30rpx;
+  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.03);
+}
+
+.butler-card-new__inner {
+  margin-top: 10rpx;
+}
+
+.butler-member-new {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.butler-member-new:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.butler-member-new__identity {
+  display: flex;
+  align-items: center;
+}
+
+.butler-avatar-new {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  position: relative;
+}
+
+.butler-avatar-new image {
+  width: 100%;
+  height: 100%;
+  border-radius: 40rpx;
+}
+
+.butler-avatar-new-fallback {
+  width: 100%;
+  height: 100%;
+  border-radius: 40rpx;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.6) 0%, rgba($brand-primary, 0.8) 100%);
+}
+
+.butler-avatar-new-fallback-text {
+  font-size: 32rpx;
+  color: #fff;
+  font-weight: 700;
+}
+
+.butler-member-new__info {
+  margin-left: 20rpx;
+}
+
+.butler-member-new__name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+  display: flex;
+  align-items: center;
+}
+
+.butler-member-new__tag {
+  font-size: 20rpx;
+  background: rgba($brand-primary, 0.1);
+  color: $brand-primary;
+  padding: 2rpx 10rpx;
+  border-radius: 8rpx;
+  margin-left: 10rpx;
+}
+
+.butler-member-new__phone {
+  font-size: 24rpx;
+  color: #888888;
+  margin-top: 6rpx;
+}
+
+.butler-member-new__action {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 32rpx;
+  background: #f0f6ff;
+  color: $brand-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+}
+
+.butler-member-new__action:active {
+  background: #e6f0ff;
+}
+
+.butler-member-new__action.disabled {
+  background: #f5f5f5;
+  color: #cccccc;
+}
+
+.service-item {
+  width: 48%;
+}
+
+.service-card-visual {
+  height: 260rpx;
+  border-radius: 24rpx;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.03);
+}
+
+.service-card-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+}
+
+.service-card-mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
+}
+
+.service-card-content {
+  position: relative;
+  z-index: 3;
+}
+
+.service-icon-box {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 30rpx;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba($brand-primary, 0.18) 100%);
+  box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, 0.28);
+}
+
+.service-icon-symbol {
+  font-size: 28rpx;
+  color: $icon-tone-strong;
+  line-height: 1;
+}
+
+.section-arrow-icon {
+  margin-left: 4rpx;
+  font-size: 24rpx;
+  line-height: 1;
+  color: $icon-tone-muted;
+}
+
+.status-tag {
+  padding: 4rpx 16rpx;
+  border-radius: 20rpx;
+  font-weight: bold;
+}
+
+.tag-free {
+  background-color: rgba(255,255,255,0.2);
+  color: #FFFFFF;
+  backdrop-filter: blur(4px);
+}
+
+.tag-busy {
+  background-color: rgba(255, 90, 95, 0.9);
+  color: #FFFFFF;
+}
+
+/* 自定义按钮样式 */
+.custom-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100rpx;
+  padding: 12rpx 36rpx;
+  transition: all 0.3s;
+}
+.custom-btn:active {
+  transform: scale(0.98);
+}
+.btn-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.25);
+}
+.btn-dark {
+  background: #ffffff;
+  color: $brand-primary;
+  border: 1rpx solid rgba($brand-primary, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+}
+
+.animation-fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.bill-section {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.03);
+}
+
+.event-card {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.02);
+  transition: all 0.3s;
+}
+
+.event-card:active {
+  transform: scale(0.98);
+}
+
+.event-img-box {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.event-img {
+  width: 100%;
+  height: 100%;
+}
+
+.avatar-stack {
+  display: flex;
+  align-items: center;
+}
+
+.stack-item {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 24rpx;
+  border: 4rpx solid #FFFFFF;
+  margin-left: -16rpx;
+}
+
+.stack-item:first-child {
+  margin-left: 0;
+}
+
+.stack-more {
+  background-color: #F5F5F5;
+  color: #888888;
+}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
new file mode 100644
index 0000000..7715909
--- /dev/null
+++ b/pages/index/index.vue
@@ -0,0 +1,828 @@
+<template>
+  <view class="index" style="background-color: #F6F6F6;">
+    
+    <!-- 启动全屏加载遮罩 -->
+    <view v-if="isAppInitLoading" class="init-loading-mask tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
+      <view class="loading-logo">
+        <text class="tn-icon-moon tn-color-white" style="font-size: 80rpx; transform: rotate(-45deg); display: block;"></text>
+      </view>
+      <view class="loading-desc tn-margin-top-lg" style="color: rgba(255,255,255,0.8); letter-spacing: 4rpx; font-size: 32rpx; font-weight: bold;">{{ t('loadingBrand') }}</view>
+      <view class="loading-spinner tn-margin-top-xl">
+        <tn-loading mode="circle" color="#00BBE8" size="60"></tn-loading>
+      </view>
+    </view>
+
+    <!-- 二级页面 -->
+    <view v-if="hasPage('select-room')" v-show="currentPageId === 'select-room'">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <select-room-tab ref="selectRoomTab"></select-room-tab>
+      </scroll-view>
+    </view>
+    <view v-if="hasPage('stay-service')" v-show="currentPageId === 'stay-service'">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <stay-service-tab
+          ref="stayServiceTab"
+          @refresh-shell-state="handleStayServiceRefreshState"
+        ></stay-service-tab>
+      </scroll-view>
+    </view>
+    <view v-if="hasPage('my-application')" v-show="currentPageId === 'my-application'">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <my-application-tab
+          ref="myApplicationTab"
+          @refresh-shell-state="handleMyApplicationRefreshState"
+        ></my-application-tab>
+      </scroll-view>
+    </view>
+    <view v-if="hasPage('message-center')" v-show="currentPageId === 'message-center'">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <message-center-tab ref="messageCenterTab"></message-center-tab>
+      </scroll-view>
+    </view>
+    <view v-if="hasPage('profile-center')" v-show="currentPageId === 'profile-center'">
+      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
+        <profile-center-tab ref="profileCenterTab"></profile-center-tab>
+      </scroll-view>
+    </view>
+    <contract-alert
+      v-if="sessionState.isLogin && sessionState.pendingContracts.length"
+      :pending-contracts="sessionState.pendingContracts"
+    />
+    <!-- <view class="bg-tabbar-shadow"></view> -->
+    <!-- 底部导航栏 -->
+    <view class="tabbar">
+      <view class="tabbar__bg" :style="[wrapStyle]"></view>
+      <view class="tabbar__list">
+        <block v-for="(item, index) in currentTabbarList" :key="item.id">
+          <view :id="`tabbar_item_${index}`" class="tabbar__item"
+            :class="[{'tabbar__item--active': index === currentTabbarIndex}]" @click="changeTabbar(index, item.id)">
+            <!-- 可以用字体图标的方式 -->
+            <view class="tabbar__item__icon-wrap">
+              <view class="tabbar__item__icon" :class="[item.icon]"></view>
+              <view
+                v-if="item.id === 'message-center' && messageBadgeCount > 0"
+                class="tabbar__item__badge"
+              >
+                {{ getMessageBadgeText() }}
+              </view>
+            </view>
+
+            <!-- <image class="tabbar__item__image" :src="item.image"></image> -->
+            <!-- 底部文字，需要自行显示出来-->
+            <view class="tabbar__item__text">{{ item.name }}</view>
+          </view>
+        </block>
+      </view>
+      <!-- <view class="tabbar__select-active-bg" :class="[showActiceBg ? 'tabbar__select-active-bg--show' : 'tabbar__select-active-bg--hide']" :style="[activeBgStyle]"></view> -->
+      <view class="tabbar__select-active-bg" :animation="activeBgAnimation"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import SelectRoomTab from './component/SelectRoomTab.vue'
+  import StayServiceTab from './component/StayServiceTab.vue'
+  import MessageCenterTab from './component/MessageCenterTab.vue'
+  import ProfileCenterTab from './component/ProfileCenterTab.vue'
+  import MyApplicationTab from './component/MyApplicationTab.vue'
+  import ContractAlert from '../../components/contract-alert/contract-alert.vue'
+  import { clearLegacyDemoCache, getHomePageTabId, getSessionSnapshot, saveHomePageTabId } from '../../utils/app-state'
+  import { checkRecordByChecked, notificationPage, applicationFormMePage } from '@/api/index.js'
+  import { countPendingInspectionRecords, extractInspectionList, resolveNotificationUnreadTotal } from '../../utils/message-helper'
+  import { syncLoginStayState } from '../../utils/session-sync'
+
+  export default {
+    components: {
+      SelectRoomTab,
+      StayServiceTab,
+      MessageCenterTab,
+      ProfileCenterTab,
+      MyApplicationTab,
+      ContractAlert
+    },
+    data() {
+      return {
+        wrapMaskPositionLeft: -15,
+        activeBgPositionLeft: 0,
+        currentPageId: 'select-room',
+        tabbarRectInfo: [],
+        activeBgAnimation: {},
+        messageBadgeCount: 0,
+        sessionState: {
+          isLogin: false,
+          hasCheckedIn: false,
+          hasStayOrder: false,
+          hasPendingApplication: false,
+          pendingContracts: []
+        },
+        tabDefinitions: [
+          { id: 'select-room', labelKey: 'tabSelectRoom', icon: 'tn-icon-home-fill', image: '/static/tabbar/tn-tabbar0.png', component: 'SelectRoomTab', ref: 'selectRoomTab', refreshMethod: 'checkLoginStatus' },
+          { id: 'stay-service', labelKey: 'tabStayService', icon: 'tn-icon-safe', image: '/static/tabbar/tn-tabbar1.png', component: 'StayServiceTab', ref: 'stayServiceTab', refreshMethod: 'checkLocalStatus' },
+          { id: 'my-application', labelKey: 'tabMyApplication', icon: 'tn-icon-order', image: '/static/tabbar/tn-tabbar2.png', component: 'MyApplicationTab', ref: 'myApplicationTab', refreshMethod: 'load' },
+          { id: 'message-center', labelKey: 'tabMessageCenter', icon: 'tn-icon-message', image: '/static/tabbar/tn-tabbar3.png', component: 'MessageCenterTab', ref: 'messageCenterTab', refreshMethod: 'load' },
+          { id: 'profile-center', labelKey: 'tabProfileCenter', icon: 'tn-icon-my-fill', image: '/static/tabbar/tn-tabbar3.png', component: 'ProfileCenterTab', ref: 'profileCenterTab', refreshMethod: 'checkLoginStatus' }
+        ],
+        loadedPages: ['select-room'],
+        isAppInitLoading: true,
+        isTabSwitching: false,
+        i18n: {
+          zh: {
+            loadingBrand: '绿居公寓',
+            shareTitle: '绿居公寓 - 国际化青年社区',
+            tabSelectRoom: '选 房',
+            tabStayService: '入 住',
+            tabMyApplication: '申请单',
+            tabMessageCenter: '消 息',
+            tabProfileCenter: '我 的'
+          },
+          en: {
+            loadingBrand: 'Luju Apartments',
+            shareTitle: 'Luju Apartments - International Youth Community',
+            tabSelectRoom: 'Explore',
+            tabStayService: 'Stay',
+            tabMyApplication: 'Applications',
+            tabMessageCenter: 'Messages',
+            tabProfileCenter: 'Profile'
+          }
+        }
+      }
+    },
+    computed: {
+      wrapStyle() {
+        return {
+          '-webkit-mask-position': `${this.wrapMaskPositionLeft}px -1px, 100%`
+        }
+      },
+      visibleTabIds() {
+        if (!this.sessionState.isLogin) {
+          return ['select-room', 'profile-center']
+        }
+        const tabs = []
+        if (this.sessionState.hasStayOrder) {
+          tabs.push('stay-service')
+        } else if (this.sessionState.hasPendingApplication) {
+          tabs.push('my-application')
+        } else {
+          tabs.push('select-room')
+        }
+        if (this.sessionState.hasPendingApplication && !tabs.includes('my-application')) {
+          tabs.push('my-application')
+        }
+        tabs.push('message-center', 'profile-center')
+        return tabs
+      },
+      currentTabbarList() {
+        return this.tabDefinitions
+          .filter(item => this.visibleTabIds.includes(item.id))
+          .map(item => ({
+            ...item,
+            name: this.t(item.labelKey)
+          }))
+      },
+      currentTabbarIndex() {
+        const index = this.currentTabbarList.findIndex(item => item.id === this.currentPageId)
+        return index === -1 ? 0 : index
+      },
+    },
+    onShow() {
+      this.handlePageShow()
+    },
+    onLoad(options) {
+      clearLegacyDemoCache()
+      uni.$on('messageBadgeCountChange', this.handleMessageBadgeCountChange)
+      this.handlePageLoad(options)
+    },
+    onUnload() {
+      uni.$off('messageBadgeCountChange', this.handleMessageBadgeCountChange)
+    },
+    onReady() {
+      this.$nextTick(() => {
+        this.getTabbarItemInfo()
+      })
+    },
+    methods: {
+      t(key) {
+      return this.$tm('pages.index.index', key)
+    },
+      getStoreUser() {
+        return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
+      },
+      isCurrentLogin() {
+        const storeUser = this.getStoreUser()
+        if (storeUser && Object.keys(storeUser).length) {
+          return true
+        }
+        return !!getSessionSnapshot().isLogin
+      },
+      getStoreCheckinStatus() {
+        return !!(this.$store && this.$store.state && this.$store.state.vuex_checkin_status)
+      },
+      getStoreCurrentOrder() {
+        return (this.$store && this.$store.state && this.$store.state.vuex_current_order) || null
+      },
+      getStoreCurrentBooking() {
+        const user = this.getStoreUser()
+        return (user && user.currentBooking) || null
+      },
+      getStorePendingContracts() {
+        const list = this.$store && this.$store.state && this.$store.state.vuex_pending_contracts
+        return Array.isArray(list) ? list : []
+      },
+      syncStayState(force = false) {
+        if (!this.isCurrentLogin()) {
+          this.refreshSessionState()
+          return Promise.resolve()
+        }
+
+        return syncLoginStayState({ force }).catch((error) => {
+          console.error('sync login stay state failed', error)
+        })
+      },
+      refreshShellState(force = false, options = {}) {
+        const { skipMessageBadge = false } = options
+        const tasks = [
+          this.$store && this.$store.dispatch ? this.$store.dispatch('fetchGlobalEnums').catch(() => ({})) : Promise.resolve(),
+          this.syncStayState(force)
+        ]
+        if (!skipMessageBadge) {
+          tasks.push(this.refreshMessageBadgeCount())
+        }
+        if (this.isCurrentLogin()) {
+          tasks.push(
+            applicationFormMePage({ Status: 0, PageIndex: 1, PageSize: 1 })
+              .then(res => {
+                const payload = res && res.data ? res.data : res
+                const total = payload && payload.total ? Number(payload.total) : (payload && payload.data && payload.data.length ? payload.data.length : 0)
+                this.sessionState.hasPendingApplication = total > 0
+              })
+              .catch(() => {
+                this.sessionState.hasPendingApplication = false
+              })
+          )
+        } else {
+          this.sessionState.hasPendingApplication = false
+        }
+        return Promise.all(tasks).finally(() => {
+          this.refreshSessionState()
+        })
+      },
+      async handlePageLoad(options = {}) {
+        await this.refreshShellState(true, {
+          skipMessageBadge: options.pageId === 'message-center'
+        })
+        this.syncCurrentTab({
+          pageId: options.pageId,
+          index: Number(options.index || 0)
+        })
+
+        setTimeout(() => {
+          this.isAppInitLoading = false
+        }, 1500)
+      },
+      async handlePageShow() {
+        await this.refreshShellState(true, {
+          skipMessageBadge: this.currentPageId === 'message-center'
+        })
+        this.syncCurrentTab()
+
+        this.$nextTick(() => {
+          this.loadedPages.forEach(pageId => {
+            this.refreshTabPageState(pageId)
+          })
+          this.getTabbarItemInfo()
+        })
+      },
+      hasPage(id) {
+        return this.loadedPages.includes(id)
+      },
+      ensurePageLoaded(id) {
+        if (!id || this.loadedPages.includes(id)) return
+        this.loadedPages = [...this.loadedPages, id]
+      },
+      refreshSessionState() {
+        const session = getSessionSnapshot()
+        const storePendingContracts = this.getStorePendingContracts()
+        const storeUser = this.getStoreUser()
+        const storeHasCheckedIn = this.getStoreCheckinStatus()
+        const storeCurrentBooking = this.getStoreCurrentBooking()
+        const pendingContracts = storePendingContracts.length
+          ? storePendingContracts
+          : (storeUser.pendingContracts || (Array.isArray(session.pendingContracts) ? session.pendingContracts : []))
+        const hasStayOrder = !!(storeHasCheckedIn || storeCurrentBooking || session.currentBooking)
+        this.sessionState = {
+          isLogin: this.isCurrentLogin(),
+          hasCheckedIn: storeHasCheckedIn || session.hasCheckedIn,
+          hasStayOrder: hasStayOrder || pendingContracts.length > 0,
+          hasPendingApplication: !!this.sessionState.hasPendingApplication,
+          pendingContracts
+        }
+      },
+      getCurrentUserCode() {
+        const storeUser = this.getStoreUser()
+        if (Object.keys(storeUser).length) {
+          return storeUser.code || storeUser.userCode || ''
+        }
+        const session = getSessionSnapshot()
+        const user = session.currentUser || session.registeredUser || session.resolvedUser || {}
+        return user.code || user.userCode || ''
+      },
+      getCurrentOrderNo() {
+        const storeCurrentOrder = this.getStoreCurrentOrder()
+        if (storeCurrentOrder && storeCurrentOrder.orderNo) {
+          return String(storeCurrentOrder.orderNo).trim()
+        }
+        const session = getSessionSnapshot()
+        const room = session.myRoomData || {}
+        const user = session.currentUser || session.registeredUser || session.resolvedUser || {}
+        const currentOrder = (user && user.currentOrder) || {}
+        return String(room.orderNo || currentOrder.orderNo || '').trim()
+      },
+      isPendingInspectionRecord(record) {
+        return countPendingInspectionRecords([record]) > 0
+      },
+      refreshMessageBadgeCount() {
+        if (!this.isCurrentLogin()) {
+          this.messageBadgeCount = 0
+          return Promise.resolve()
+        }
+
+        const tasks = [
+          notificationPage({
+            IsRead: false,
+            PageIndex: 1,
+            PageSize: 1,
+            Search: '',
+            IsExport: false
+          })
+        ]
+        const userCode = this.getCurrentUserCode()
+        const orderNo = this.getCurrentOrderNo()
+        if (orderNo) {
+          tasks.push(checkRecordByChecked({
+            checkedUserCode: userCode,
+            orderNo
+          }))
+        }
+
+        return Promise.all(tasks)
+          .then(([notificationResponse, inspectionResponse]) => {
+            const remoteUnread = resolveNotificationUnreadTotal(notificationResponse)
+            const inspectionList = extractInspectionList(inspectionResponse)
+            const pendingInspectionCount = countPendingInspectionRecords(inspectionList)
+            this.messageBadgeCount = remoteUnread + pendingInspectionCount
+          })
+          .catch((error) => {
+            console.error('refresh message badge count failed', error)
+            this.messageBadgeCount = 0
+          })
+      },
+      handleMessageBadgeCountChange(count) {
+        this.messageBadgeCount = Math.max(Number(count) || 0, 0)
+      },
+      getMessageBadgeText() {
+        if (!this.messageBadgeCount) return ''
+        return this.messageBadgeCount > 99 ? '99+' : String(this.messageBadgeCount)
+      },
+      resolveTargetTab({ pageId, index = 0 } = {}) {
+        const list = this.currentTabbarList
+        if (!list.length) return null
+        if (pageId) {
+          const explicitMatchedTab = list.find(item => item.id === pageId)
+          if (explicitMatchedTab) return explicitMatchedTab
+        }
+        const preferredPageId = getHomePageTabId()
+        const shouldPreferStayService = this.sessionState.isLogin && this.sessionState.hasStayOrder
+        if (shouldPreferStayService && (!preferredPageId || preferredPageId === 'select-room')) {
+          const stayServiceTab = list.find(item => item.id === 'stay-service')
+          if (stayServiceTab) return stayServiceTab
+        }
+        if (preferredPageId) {
+          const matchedTab = list.find(item => item.id === preferredPageId)
+          if (matchedTab) return matchedTab
+        }
+        return list[index] || list[0]
+      },
+      syncCurrentTab({ pageId, index = 0 } = {}) {
+        const targetTab = this.resolveTargetTab({ pageId, index })
+        if (!targetTab) return
+        this.ensurePageLoaded(targetTab.id)
+        this.currentPageId = targetTab.id
+        saveHomePageTabId(targetTab.id)
+      },
+      getPageRef(refName) {
+        const ref = this.$refs[refName]
+        return Array.isArray(ref) ? ref[0] : ref
+      },
+      refreshTabPageState(pageId, retryCount = 0) {
+        const page = this.tabDefinitions.find(item => item.id === pageId)
+        if (!page || !page.refreshMethod) return
+        const pageVm = this.getPageRef(page.ref)
+        if (pageVm && typeof pageVm[page.refreshMethod] === 'function') {
+          pageVm[page.refreshMethod]()
+          return
+        }
+        if (retryCount < 8) {
+          setTimeout(() => {
+            this.refreshTabPageState(pageId, retryCount + 1)
+          }, 60)
+        }
+      },
+      handleStayServiceRefreshState() {
+        this.refreshSessionState()
+      },
+      async handleMyApplicationRefreshState() {
+        await this.refreshShellState(true)
+        this.syncCurrentTab()
+        this.$nextTick(() => {
+          this.refreshTabPageState(this.currentPageId)
+          this.getTabbarItemInfo()
+        })
+      },
+      tabbarPageScrollLower(e) {
+        if (this.currentPageId === 'select-room') {
+          const selectRoomTab = this.getPageRef('selectRoomTab')
+          selectRoomTab && selectRoomTab.getRandomData && selectRoomTab.getRandomData()
+        }
+      },
+
+      // 获取底部元素的位置
+      getTabbarItemInfo() {
+        const view = uni.createSelectorQuery().in(this)
+        for (let i = 0; i < this.currentTabbarList.length; i++) {
+          view.select('#tabbar_item_' + i).boundingClientRect()
+        }
+        view.exec(res => {
+          if (!res || !res.length) {
+            if (!this._tabbarRetryCount) this._tabbarRetryCount = 0;
+            if (this._tabbarRetryCount < 20) {
+              this._tabbarRetryCount++;
+              setTimeout(() => {
+                this.getTabbarItemInfo()
+              }, 50)
+            }
+            return
+          }
+
+          // 将信息存入数组中
+          this.tabbarRectInfo = [];
+          res.map((item) => {
+            if (item) {
+              this.tabbarRectInfo.push({
+                left: item.left,
+                width: item.width
+              })
+            }
+          })
+          if (this.tabbarRectInfo[this.currentTabbarIndex]) {
+            this.updateHollowsPosition()
+            this.updateActiveBgPosition(true)
+          }
+        })
+      },
+      // 更新凹陷位置
+      updateHollowsPosition() {
+        if (!this.tabbarRectInfo[this.currentTabbarIndex]) return;
+        const {
+          width,
+          left
+        } = this.tabbarRectInfo[this.currentTabbarIndex]
+        // 计算掩模图片的宽高比
+        // const imageRatio = 200 / 92
+        // 计算定高的宽比
+        const imageFixedHeightWidthRatioValue = 300 * (uni.upx2px(20) / 92)
+        this.wrapMaskPositionLeft = left - ((imageFixedHeightWidthRatioValue - width) / 2)
+      },
+      // 更新激活时背景的位置
+      updateActiveBgPosition(init = false) {
+        if (!this.tabbarRectInfo[this.currentTabbarIndex]) return;
+        const {
+          width,
+          left
+        } = this.tabbarRectInfo[this.currentTabbarIndex]
+        const oldActiveBgPositionLeft = this.activeBgPositionLeft
+        this.activeBgPositionLeft = left + ((width - uni.upx2px(16)) / 2)
+        if (!init) {
+          const animation = uni.createAnimation({
+            duration: 160,
+            timingFunction: "linear"
+          })
+          animation.top(uni.upx2px(-60)).left(oldActiveBgPositionLeft + ((this.activeBgPositionLeft -
+            oldActiveBgPositionLeft) / 2)).scale(1).step()
+          animation.left(this.activeBgPositionLeft).top(uni.upx2px(-10)).scale(1).step()
+          this.activeBgAnimation = animation.export()
+        } else {
+          const animation = uni.createAnimation({
+            duration: 160,
+            timingFunction: "linear"
+          })
+          animation.left(this.activeBgPositionLeft).top(uni.upx2px(-10)).step()
+          this.activeBgAnimation = animation.export()
+        }
+
+      },
+      async changeTabbar(index, id) {
+        if (this.currentTabbarIndex === index && this.currentPageId === id) return;
+        if (this.isTabSwitching) return
+        
+        // 兼容处理：防止 H5 等非小程序环境下找不到 wx 对象导致 JS 报错，从而中断后续页面切换逻辑
+        if (typeof uni !== 'undefined' && uni.vibrateShort) {
+          uni.vibrateShort({
+            fail: () => {} // 忽略 H5 环境下的不支持报错
+          });
+        }
+
+        this.isTabSwitching = true
+
+        try {
+          await this.refreshShellState(true, {
+            skipMessageBadge: id === 'message-center'
+          })
+
+          const targetTab = this.resolveTargetTab({
+            pageId: id,
+            index
+          })
+          const nextPageId = targetTab ? targetTab.id : id
+
+          this.ensurePageLoaded(nextPageId)
+          this.currentPageId = nextPageId
+          saveHomePageTabId(nextPageId)
+
+          this.$nextTick(() => {
+            this.refreshTabPageState(nextPageId)
+            this.updateHollowsPosition()
+            this.updateActiveBgPosition()
+          })
+        } finally {
+          this.isTabSwitching = false
+        }
+      },
+
+
+    },
+    // 分享到朋友
+    onShareAppMessage() {
+      return {
+        title: this.t('shareTitle'),
+        path: '/pages/index/index'
+      }
+    },
+    // 分享到朋友圈
+    onShareTimeline() {
+      return {
+        title: this.t('shareTitle')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 页面初始化全屏遮罩 */
+  .init-loading-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #111111;
+    z-index: 99999;
+  }
+  
+  .loading-logo {
+    animation: pulse 2s infinite ease-in-out;
+  }
+
+  @keyframes pulse {
+    0% { transform: scale(1); opacity: 0.8; }
+    50% { transform: scale(1.1); opacity: 1; }
+    100% { transform: scale(1); opacity: 0.8; }
+  }
+
+  /*整体样式 */
+  .index {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+
+    .custom-tabbar-page {
+      width: 100%;
+      height: calc(100vh - 114rpx - constant(safe-area-inset-bottom));
+      height: calc(100vh - 114rpx - env(safe-area-inset-bottom));
+      box-sizing: border-box;
+    }
+
+
+    /* 底部导航 statr */
+    .tabbar {
+      width: 100%;
+      height: 114rpx;
+      height: calc(114rpx + constant(safe-area-inset-bottom));
+      height: calc(114rpx + env(safe-area-inset-bottom));
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      z-index: 998;
+      /* 图鸟温馨提醒，裁剪式也生效的阴影样式，不用box-shadow*/
+      filter: drop-shadow(0rpx 0rpx 30rpx rgba(0, 0, 0, 0.08));
+
+      &__bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        bottom: 0;
+        left: 0;
+        background-color: #FFFFFF;
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 61.5'%3E%3Cpath d='M100 0H0c32.9 0 49.3 61.5 100 61.5S167.1 0 200 0H100z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
+        -webkit-mask-size: auto 20rpx, cover;
+        -webkit-mask-position: center top;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-composite: xor;
+        /*只显示不重合的地方， chorem 、safari 支持*/
+        z-index: -1;
+        transition: 0.5s;
+      }
+
+      &__list {
+        position: absolute;
+        z-index: 999;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      &__item {
+        height: 100%;
+        width: 100%;
+        flex: 1;
+        text-align: center;
+        position: relative;
+        margin-top: 10rpx;
+
+        &--active {
+          .tabbar__item__icon {
+            // top: 10rpx;
+            color: $icon-tone-brand;
+          }
+
+          .tabbar__item__image {
+            top: -42rpx;
+          }
+
+          .tabbar__item__text {
+            opacity: 1;
+            color: $icon-tone-strong;
+            font-size: 20rpx;
+          }
+        }
+
+        &__icon {
+          font-size: 48rpx;
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 22rpx;
+          transition: 0.5s;
+          color: $icon-tone-muted;
+        }
+
+        &__icon-wrap {
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          height: 88rpx;
+        }
+
+        &__badge {
+          position: absolute;
+          top: 10rpx;
+          right: 50%;
+          margin-right: -42rpx;
+          min-width: 30rpx;
+          height: 30rpx;
+          padding: 0 8rpx;
+          border-radius: 999rpx;
+          background: #ff5b5b;
+          color: #ffffff;
+          font-size: 18rpx;
+          line-height: 30rpx;
+          text-align: center;
+          box-shadow: 0 8rpx 18rpx rgba(255, 91, 91, 0.25);
+          z-index: 2;
+        }
+
+        &__image {
+          width: 58rpx;
+          height: 58rpx;
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 20rpx;
+          transition: 0.5s;
+          margin: 0 auto;
+        }
+
+        &__text {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 20rpx;
+          bottom: calc(20rpx + constant(safe-area-inset-bottom)*0.8);
+          bottom: calc(20rpx + env(safe-area-inset-bottom)*0.8);
+          transition: 0.5s;
+          font-size: 20rpx;
+          color: $icon-tone-muted;
+        }
+      }
+
+      &__select-active-bg {
+        position: absolute;
+        width: 16rpx;
+        height: 16rpx;
+        border-radius: 50%;
+        background-color: $brand-primary;
+        border: 2rpx solid #FFFFFF;
+        // transition: 0.5s;
+        z-index: -1;
+        left: calc(64rpx);
+        box-shadow: 0rpx 10rpx 30rpx 0rpx rgba($brand-primary, 0.28);
+        // box-shadow: inset 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.05);
+        // box-shadow: 0rpx 10rpx 30rpx rgba(70,23,129, 0.07),
+        //   0rpx -8rpx 40rpx rgba(255, 255, 255, 0.07),
+        //   inset 0rpx -10rpx 10rpx rgba(70,23,129, 0.07),
+        //   inset 0rpx 10rpx 20rpx rgba(255, 255, 255, 1);
+        transition: box-shadow .2s ease-out;
+
+        &--hide {
+          top: calc(110rpx + 50rpx);
+        }
+
+        &--show {
+          top: -54rpx;
+        }
+      }
+    }
+
+    /* 底部导航 end */
+
+
+    /* 移动背景部分 start*/
+    .bg-contaniner {
+      position: fixed;
+      top: -0rpx;
+      left: -300rpx;
+      --text-color: hsl(0 95% 60%);
+      --bg-color: #F6F6F6;
+      --bg-size: 200px;
+      height: 100%;
+      display: grid;
+      place-items: center;
+      place-content: center;
+      overflow: hidden;
+      background-color: var(--bg-color);
+      z-index: -1;
+    }
+
+    .bg-contaniner::before {
+      --size: 150vmax;
+      content: "";
+      inline-size: var(--size);
+      block-size: var(--size);
+      background-image: url("https://cdn.nlark.com/yuque/0/2022/png/280373/1663568736856-assets/web-upload/97cab67d-6f17-4c6e-a3f9-ac81961d571a.png");
+      background-size: var(--bg-size);
+      background-repeat: repeat;
+      transform: rotate(45deg);
+      opacity: 0.1;
+      animation: bg 6s linear infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .bg-contaniner::before {
+        animation-duration: 0s;
+      }
+    }
+
+    @keyframes bg {
+      to {
+        background-position: 0 calc(var(--bg-size) * -1);
+      }
+    }
+
+    /* 移动背景部分 end*/
+  }
+  
+  /* 毛玻璃*/
+  .dd-glass {
+     width: 100%;
+     backdrop-filter: blur(20rpx);
+    -webkit-backdrop-filter: blur(20rpx);
+  }
+</style>
diff --git a/patch.diff b/patch.diff
new file mode 100644
index 0000000..532d812
--- /dev/null
+++ b/patch.diff
@@ -0,0 +1,793 @@
+--- pages/index/component/MyApplicationTab.vue
++++ pages/index/component/MyApplicationTab.vue
+@@ -1146,569 +1146,211 @@
+ 
+ .swiper-container {
+   flex: 1;
+   width: 100%;
+-  padding-bottom: 20rpx;
+ }
+ 
+ .application-swiper {
+   height: 100%;
+ }
+ 
+ .swiper-item-wrapper {
+-  padding: 8rpx 18rpx 26rpx;
+   height: 100%;
+   box-sizing: border-box;
+-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+-  transform: scale(0.94);
+-  opacity: 0.7;
+-}
+-
+-.swiper-item-wrapper--active {
+-  transform: scale(1);
+-  opacity: 1;
++  background-color: #FFFFFF;
+ }
+ 
+ .swiper-scroll-view {
+   height: 100%;
+ }
+ 
+-.application-card {
+-  min-height: calc(100% - 40rpx);
+-  background: transparent;
+-  border-radius: 0;
+-  padding: 22rpx 14rpx 34rpx;
+-  box-shadow: none;
+-  border: none;
++.application-list-item {
++  min-height: 100%;
++  padding: 40rpx 40rpx 80rpx;
+   display: flex;
+   flex-direction: column;
+-  transition: none;
+ }
+ 
+-.empty-panel {
+-  background: transparent;
+-  padding: 60rpx 40rpx;
+-  min-height: 50vh;
++.item-header {
++  padding-bottom: 40rpx;
++  border-bottom: 1px solid #F1F5F9;
+ }
+ 
+-.card-hero {
+-  position: relative;
+-  padding: 6rpx 0 20rpx;
+-  border-radius: 0;
+-  overflow: visible;
+-  background: transparent;
+-  border: none;
+-  box-shadow: none;
+-  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+-}
+-
+-.card-hero__glow {
+-  display: none;
+-}
+-
+-.card-head {
++.item-meta-top {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+-  gap: 16rpx;
++  margin-bottom: 24rpx;
+ }
+ 
+-.card-title-wrap {
+-  display: flex;
+-  align-items: center;
+-  min-width: 0;
+-  flex: 1;
+-}
+-
+-.card-title-block {
+-  min-width: 0;
+-  flex: 1;
+-}
+-
+-.card-title-meta {
+-  display: flex;
+-  align-items: center;
+-  gap: 12rpx;
+-  min-width: 0;
+-  margin-bottom: 8rpx;
+-}
+-
+-.card-kicker {
+-  display: inline-flex;
+-  align-items: center;
+-  padding: 0;
+-  border-radius: 0;
+-  background: transparent;
+-  color: $brand-primary;
+-  font-size: 19rpx;
++.item-kicker {
++  font-size: 22rpx;
+   font-weight: 700;
++  color: #64748B;
++  letter-spacing: 1px;
++  text-transform: uppercase;
+ }
+ 
+-.card-title {
+-  font-size: 36rpx;
+-  font-weight: 800;
+-  color: #0F172A;
+-  line-height: 1.22;
+-  word-break: break-word;
++.item-status {
++  font-size: 22rpx;
++  font-weight: 700;
++  padding: 8rpx 20rpx;
++  border-radius: 999rpx;
+ }
+ 
+-.card-code-inline {
+-  min-width: 0;
+-  flex: 1;
+-  color: #64748B;
+-  font-size: 20rpx;
+-  font-weight: 500;
+-  overflow: hidden;
+-  text-overflow: ellipsis;
+-  white-space: nowrap;
+-}
+-
+-.status-badge {
+-  display: inline-flex;
+-  align-items: center;
+-  padding: 0;
+-  border-radius: 0;
+-  font-size: 20rpx;
+-  font-weight: 700;
+-  white-space: nowrap;
+-  
+-  .status-dot {
+-    width: 10rpx;
+-    height: 10rpx;
+-    border-radius: 50%;
+-    margin-right: 10rpx;
+-  }
+-}
+-
+-.status-pending {
+-  color: #D97706;
+-  .status-dot { background: #D97706; }
+-}
+-
+-.status-approved {
+-  color: $brand-primary;
+-  .status-dot { background: $brand-primary; }
+-}
+-
+-.status-rejected {
+-  color: #DC2626;
+-  .status-dot { background: #DC2626; }
+-}
+-
+-.status-finished {
+-  color: #64748B;
+-  .status-dot { background: #64748B; }
+-}
+-
+-.hero-summary {
+-  display: flex;
+-  align-items: center;
+-  gap: 18rpx;
+-  padding-top: 16rpx;
+-}
+-
+-.hero-summary__item {
+-  flex: 1;
+-  min-width: 0;
+-}
+-
+-.hero-summary__item--compact {
+-  flex: 0 0 180rpx;
+-}
+-
+-.hero-summary__divider {
+-  width: 1px;
+-  align-self: stretch;
+-  background: rgba(148, 163, 184, 0.16);
+-}
+-
+-.hero-summary__label {
+-  color: #94A3B8;
+-  font-size: 20rpx;
+-  margin-bottom: 8rpx;
+-}
+-
+-.hero-summary__value {
++.item-title {
++  font-size: 48rpx;
++  font-weight: 900;
+   color: #0F172A;
+-  font-weight: 700;
+-  font-size: 28rpx;
+-  line-height: 1.3;
+-  word-break: break-word;
++  line-height: 1.2;
++  margin-bottom: 12rpx;
+ }
+ 
+-.card-body {
+-  position: relative;
++.item-code {
++  font-size: 24rpx;
++  color: #94A3B8;
++  font-family: monospace;
+ }
+ 
+-.meta-panel {
+-  padding: 8rpx 0 2rpx;
++.item-body {
++  padding: 40rpx 0;
+ }
+ 
+-.meta-panel__row {
+-  display: flex;
+-  align-items: flex-start;
+-  justify-content: space-between;
+-  gap: 28rpx;
+-  padding: 18rpx 0;
+-  border-bottom: 1px dashed rgba(148, 163, 184, 0.24);
+-}
+-
+-.meta-panel__row:last-child {
+-  border-bottom: none;
+-}
+-
+-.meta-panel__label {
+-  color: #94A3B8;
+-  font-size: 24rpx;
+-  display: flex;
+-  align-items: center;
+-  flex-shrink: 0;
+-}
+-
+-.meta-panel__value {
+-  color: #334155;
+-  font-size: 28rpx;
+-  font-weight: 700;
+-  text-align: right;
+-  line-height: 1.5;
+-  word-break: break-word;
+-}
+-
+-.info-label {
+-  color: #94A3B8;
+-  font-size: 24rpx;
+-  margin-bottom: 12rpx;
+-  display: flex;
+-  align-items: center;
+-}
+-
+-.info-value {
+-  color: #0F172A;
+-  font-weight: 700;
+-  font-size: 30rpx;
+-}
+-
+-.info-row {
+-  padding: 12rpx 0;
+-  
+-  .info-label {
+-    color: #94A3B8;
+-    margin-bottom: 0;
+-  }
+-  
+-  .info-value {
+-    color: #334155;
+-    font-size: 28rpx;
+-    font-weight: 600;
+-  }
+-}
+-
+-.remark-label {
+-  color: #94A3B8;
+-  font-size: 24rpx;
+-  margin-bottom: 8rpx;
+-}
+-
+-.remark-panel {
+-  display: flex;
+-  align-items: stretch;
+-  gap: 14rpx;
+-  padding: 14rpx 0 0;
+-  border-radius: 0;
+-  background: transparent;
+-  border: none;
+-}
+-
+-.remark-panel__accent {
+-  width: 4rpx;
+-  border-radius: 999rpx;
+-  background: rgba($brand-primary, 0.45);
+-  flex-shrink: 0;
+-}
+-
+-.remark-panel__main {
+-  min-width: 0;
+-}
+-
+-.remark-text {
+-  color: #334155;
+-  font-size: 28rpx;
+-  line-height: 1.6;
+-}
+-
+-.deposit-action-panel {
+-  margin-top: auto;
+-  padding: 24rpx 0 0;
+-  border-radius: 0;
+-  background: transparent;
+-  border: none;
+-  box-shadow: none;
+-  border-top: 1px solid rgba(148, 163, 184, 0.16);
+-}
+-
+-.deposit-action-panel__hero {
++.data-grid {
++  display: grid;
++  grid-template-columns: 1fr 1fr;
++  gap: 32rpx;
++  padding-bottom: 40rpx;
++  border-bottom: 1px solid #F1F5F9;
++}
++
++.data-group {
+   display: flex;
+   flex-direction: column;
+-  align-items: stretch;
+-  gap: 18rpx;
+-}
+-
+-.deposit-action-panel__hero-main {
+-  display: flex;
+-  align-items: center;
+-  min-width: 0;
+-  width: 100%;
+-}
+-
+-.deposit-action-panel__icon {
+-  width: 40rpx;
+-  height: 40rpx;
+-  border-radius: 0;
+-  display: flex;
+-  align-items: center;
+-  justify-content: center;
+-  flex-shrink: 0;
+-  background: transparent;
+-  color: #EA580C;
+-  font-size: 24rpx;
+-}
+-
+-.deposit-action-panel__heading {
+-  min-width: 0;
+-  flex: 1;
+-  margin-left: 14rpx;
+-}
+-
+-.deposit-action-panel__eyebrow {
+-  color: #94A3B8;
+-  font-size: 20rpx;
+-  font-weight: 500;
+-}
+-
+-.deposit-action-panel__title {
+-  margin-top: 4rpx;
+-  color: #0F172A;
+-  font-size: 34rpx;
+-  line-height: 1.3;
+-  font-weight: 800;
+-  word-break: break-word;
+-}
+-
+-.deposit-action-panel__subtitle {
+-  margin-top: 6rpx;
+-  color: #64748B;
+-  font-size: 20rpx;
+-  font-weight: 500;
+-}
+-
+-.deposit-action-panel__actions {
+-  display: flex;
+-  align-items: center;
+-  justify-content: stretch;
+-  gap: 16rpx;
+-  width: 100%;
+-}
+-
+-.deposit-action-panel__actions .card-action-btn {
+-  flex: 1;
+-  min-width: 0;
+-}
+-
+-.deposit-action-panel__content {
+-  padding-top: 4rpx;
+-}
+-
+-.deposit-action-panel__remark {
+-  margin-bottom: 16rpx;
+-  padding: 0;
+-  border-radius: 0;
+-  background: transparent;
+-  border: none;
+-}
+-
+-.deposit-action-panel__remark-label {
+-  color: #94A3B8;
+-  font-size: 22rpx;
+-  margin-bottom: 10rpx;
+-}
+-
+-.deposit-action-panel__remark-text {
+-  color: #475569;
+-  font-size: 26rpx;
+-  line-height: 1.55;
+-}
+-
+-.deposit-action-panel__amount-card {
+-  padding: 0 0 18rpx;
+-  border-radius: 0;
+-  background: transparent;
+-  border: none;
+-  min-height: 0;
+-  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+-}
+-
+-.deposit-action-panel__amount-label {
+-  color: #94A3B8;
++}
++
++.data-label {
+   font-size: 22rpx;
+-}
+-
+-.deposit-action-panel__amount-value {
+-  margin-top: 12rpx;
+-  color: #0F172A;
+-  font-size: 48rpx;
+-  line-height: 1;
+-  font-weight: 800;
+-}
+-
+-.deposit-action-panel__meta {
+-  display: grid;
+-  gap: 12rpx;
+-  padding-top: 2rpx;
+-}
+-
+-.deposit-action-panel__meta-row {
+-  display: flex;
+-  align-items: flex-start;
+-  justify-content: space-between;
+-  gap: 24rpx;
+-  padding: 0 2rpx;
+-}
+-
+-.deposit-action-panel__meta-label {
+   color: #94A3B8;
+-  font-size: 22rpx;
+-  flex-shrink: 0;
+-  min-width: 120rpx;
++  margin-bottom: 8rpx;
+ }
+ 
+-.deposit-action-panel__meta-value {
+-  flex: 1;
+-  text-align: right;
+-  word-break: break-word;
+-  color: #334155;
+-  font-size: 26rpx;
+-  font-weight: 600;
+-}
+-
+-.deposit-action-panel__meta-value--expired {
+-  color: #DC2626 !important;
+-}
+-
+-.status-reminder {
+-  display: flex;
+-  align-items: flex-start;
+-  gap: 18rpx;
+-  padding: 24rpx 0 0;
+-  border-radius: 0;
+-  box-shadow: none;
+-  border-top: 1px solid rgba(148, 163, 184, 0.16);
+-}
+-
+-.status-reminder--warning {
+-  background: transparent;
+-}
+-
+-.status-reminder--info {
+-  background: transparent;
+-}
+-
+-.status-reminder__icon {
+-  width: 40rpx;
+-  height: 40rpx;
+-  border-radius: 0;
+-  display: flex;
+-  align-items: center;
+-  justify-content: center;
+-  flex-shrink: 0;
+-  font-size: 24rpx;
+-}
+-
+-.status-reminder--warning .status-reminder__icon {
+-  color: #C2410C;
+-  background: transparent;
+-}
+-
+-.status-reminder--info .status-reminder__icon {
+-  color: #1D4ED8;
+-  background: transparent;
+-}
+-
+-.status-reminder__content {
+-  flex: 1;
+-  min-width: 0;
+-}
+-
+-.status-reminder__action {
+-  min-width: 164rpx;
+-  height: 68rpx;
+-  padding: 0 26rpx;
+-  border-radius: 999rpx;
+-  display: inline-flex;
+-  align-items: center;
+-  justify-content: center;
+-  flex-shrink: 0;
+-  background: transparent;
+-  color: #DC2626;
+-  border: 1px solid rgba(239, 68, 68, 0.24);
+-  box-shadow: none;
+-}
+-
+-.status-reminder__action--loading {
+-  opacity: 0.72;
+-}
+-
+-.status-reminder__title {
+-  font-size: 24rpx;
+-  font-weight: 700;
+-  color: #64748B;
+-}
+-
+-.status-reminder__text {
+-  margin-top: 8rpx;
+-  font-size: 30rpx;
+-  line-height: 1.45;
+-  font-weight: 800;
++.data-value {
++  font-size: 28rpx;
++  font-weight: 600;
+   color: #1E293B;
+ }
+ 
+-.card-footer {
+-  margin-top: auto;
+-  padding-top: 24rpx;
+-  display: flex;
+-  justify-content: flex-end;
+-}
+-
+-.card-action-btn {
+-  height: 72rpx;
+-  padding: 0 32rpx;
+-  display: inline-flex;
+-  align-items: center;
+-  justify-content: center;
+-  border-radius: 999rpx;
+-  font-size: 26rpx;
+-  font-weight: 700;
+-  margin-left: 20rpx;
+-  transition: opacity 0.2s;
+-}
+-
+-.card-action-btn:active {
+-  opacity: 0.7;
+-}
+-
+-.card-action-btn--solid {
+-  background: $brand-primary;
+-  color: #FFFFFF;
+-  border: 1px solid transparent;
+-  box-shadow: none;
+-}
+-
+-.card-action-btn--ghost {
+-  background: #FFFFFF;
+-  color: #000000;
+-  border: 1px solid #E2E8F0;
+-  box-shadow: none;
+-}
+-
+-.card-action-btn--ghost-danger {
+-  background: #FFFFFF;
+-  color: #DC2626;
+-  border: 1px solid #F3C4C4;
+-  box-shadow: none;
+-}
+-
+-.card-action-btn--loading {
+-  opacity: 0.72;
+-}
+-
+-.action-btn {
+-  width: 100%;
+-  height: 90rpx;
+-  display: flex;
+-  align-items: center;
++.data-list {
++  display: flex;
++  flex-direction: column;
++  gap: 24rpx;
++}
++
++.data-row {
++  display: flex;
++  justify-content: space-between;
++  align-items: center;
++}
++
++.data-row-label {
++  font-size: 26rpx;
++  color: #64748B;
++}
++
++.data-row-value {
++  font-size: 26rpx;
++  font-weight: 600;
++  color: #0F172A;
++}
++
++.text-danger {
++  color: #DC2626 !important;
++}
++
++.status-pending { color: #D97706; background: #FEF3C7; }
++.status-approved { color: $brand-primary; background: rgba($brand-primary, 0.12); }
++.status-rejected { color: #DC2626; background: #FEE2E2; }
++.status-finished { color: #475569; background: #F1F5F9; }
++
++.remark-block {
++  background: #F8FAFC;
++  padding: 24rpx;
++  border-radius: 16rpx;
++}
++
++.remark-label {
++  font-size: 22rpx;
++  font-weight: 700;
++  color: #64748B;
++  margin-bottom: 8rpx;
++}
++
++.remark-text {
++  font-size: 26rpx;
++  line-height: 1.5;
++  color: #334155;
++}
++
++.action-block {
++  margin-top: auto;
++  padding-top: 40rpx;
++  border-top: 2px solid #F1F5F9;
++}
++
++.action-block-header {
++  margin-bottom: 32rpx;
++}
++
++.action-title {
++  font-size: 32rpx;
++  font-weight: 800;
++  color: #0F172A;
++}
++
++.action-subtitle {
++  font-size: 24rpx;
++  color: #64748B;
++  margin-top: 4rpx;
++}
++
++.amount-display {
++  display: flex;
++  align-items: baseline;
++  margin-bottom: 32rpx;
++}
++
++.amount-currency {
++  font-size: 36rpx;
++  font-weight: 700;
++  color: #0F172A;
++  margin-right: 8rpx;
++}
++
++.amount-number {
++  font-size: 80rpx;
++  font-weight: 900;
++  color: #0F172A;
++  line-height: 1;
++  letter-spacing: -1px;
++}
++
++.action-buttons {
++  display: flex;
++  gap: 20rpx;
++}
++
++.btn-minimal {
++  flex: 1;
++  height: 96rpx;
++  border-radius: 16rpx;
++  display: flex;
++  align-items: center;
++  justify-content: center;
++  font-size: 28rpx;
++  font-weight: 700;
++  transition: opacity 0.2s;
++}
++
++.btn-minimal:active {
++  opacity: 0.8;
++}
++
++.btn-minimal--solid {
++  background: #000000;
++  color: #FFFFFF;
++}
++
++.btn-minimal--ghost {
++  background: transparent;
++  color: #000000;
++  border: 1px solid #E2E8F0;
++}
++
++.btn-loading {
++  opacity: 0.5;
++  pointer-events: none;
++}
++
++.reminder-block {
++  background: #F8FAFC;
++  padding: 32rpx;
++  border-radius: 16rpx;
++  border-left: 4px solid #3B82F6;
++}
++
++.reminder-title {
++  font-size: 24rpx;
++  font-weight: 700;
++  color: #3B82F6;
++  margin-bottom: 8rpx;
++}
++
++.reminder-text {
++  font-size: 28rpx;
++  color: #1E293B;
++  line-height: 1.5;
++  font-weight: 600;
++}
++
++.empty-panel {
++  background: transparent;
++  padding: 60rpx 40rpx;
++  min-height: 50vh;
++}
++
++.action-btn {
++  width: 100%;
++  height: 90rpx;
++  display: flex;
++  align-items: center;
\ No newline at end of file
diff --git a/pkgAccount/auth_result/auth_result.vue b/pkgAccount/auth_result/auth_result.vue
new file mode 100644
index 0000000..817e74d
--- /dev/null
+++ b/pkgAccount/auth_result/auth_result.vue
@@ -0,0 +1,629 @@
+<template>
+  <view class="auth-result-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+    <view class="page-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view class="status-card fade-in">
+        <!-- 状态大图标 -->
+        <view class="status-icon-wrapper tn-flex tn-flex-row-center tn-flex-col-center" :class="authStatus">
+          <text v-if="authStatus === 'approved'" class="tn-icon-success-circle-fill status-icon icon-success"></text>
+          <text v-else-if="authStatus === 'rejected'" class="tn-icon-close-circle-fill status-icon icon-rejected"></text>
+          <text v-else-if="authStatus === 'pending'" class="tn-icon-time-fill status-icon icon-pending"></text>
+          <text v-else class="tn-icon-warning-fill status-icon icon-unsubmitted"></text>
+        </view>
+
+        <!-- 状态标题与描述 -->
+        <view class="tn-text-center tn-margin-top-lg tn-padding-left-lg tn-padding-right-lg">
+          <view class="card-title">{{ titleText }}</view>
+          <!-- <view class="card-desc tn-margin-top-sm">{{ descText }}</view> -->
+        </view>
+
+        <!-- <view v-if="applicationCode" class="code-chip tn-margin-top-lg">
+          申请编号：{{ applicationCode }}
+        </view> -->
+
+        <!-- 审批备注 -->
+        <view v-if="approvalRemark" class="reason-box tn-margin-top-xl tn-margin-left-lg tn-margin-right-lg" :class="authStatus">
+          <view class="reason-title tn-flex tn-flex-row-center tn-flex-col-center">
+            <text :class="remarkIconClass" class="tn-margin-right-xs"></text>{{ approvalRemarkTitle }}
+          </view>
+          <view class="reason-content tn-margin-top-sm tn-text-center">{{ approvalRemark }}</view>
+        </view>
+
+        <!-- 提交信息摘要 -->
+        <view v-if="profileSummary.length" class="summary-box tn-margin-top-xl tn-margin-bottom-lg tn-margin-left-lg tn-margin-right-lg">
+          <view class="summary-title tn-margin-bottom-sm">{{ t('submittedInfoTitle') }}</view>
+          <view v-for="item in profileSummary" :key="item.label" class="summary-row tn-flex tn-flex-row-between tn-padding-top-sm tn-padding-bottom-sm">
+            <text class="summary-label">{{ item.label }}</text>
+            <text class="summary-value tn-text-ellipsis">{{ item.value }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 操作按钮 -->
+      <view class="action-group tn-margin-top-xl fade-in-up">
+        <view v-if="authStatus === 'approved'" class="custom-btn btn-primary" @click="goToLogin">
+          <text class="tn-text-bold">{{ t('goLogin') }}</text>
+        </view>
+        <view v-else-if="authStatus === 'rejected'" class="custom-btn btn-primary" @click="resubmit">
+          <text class="tn-text-bold">{{ t('resubmitRegister') }}</text>
+        </view>
+        <view v-else class="custom-btn btn-dark" @click="refreshStatus">
+          <text class="tn-text-bold tn-flex tn-flex-row-center tn-flex-col-center">
+            <text v-if="loading" class="tn-icon-loading tn-margin-right-xs spin"></text>
+            {{ loading ? t('refreshing') : t('refreshStatus') }}
+          </text>
+        </view>
+        <view class="custom-btn btn-light tn-margin-top" @click="goToRegistrationRecords">
+          <text class="tn-text-bold">{{ t('viewRegistrationRecords') }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { saveRegisteredUser } from '../../utils/app-state'
+import { registrationApplicationMePage, registrationMyorder } from '@/api/index.js'
+import { fetchEnums, getApprovalStatusLabel } from '../../utils/enum-store'
+import { buildUserFromRegistrationApplication, mapRegistrationApprovalToAuthStatus, resolveRegistrationApplicationCode } from '../../utils/flow'
+
+function formatPageResponse(response) {
+  const payload = response && response.data ? response.data : response
+  return payload && typeof payload === 'object' ? payload : {}
+}
+
+export default {
+  data() {
+    return {
+      loading: false,
+      applicationInfo: null,
+      targetCode: '',
+      sourceType: '',
+      i18n: {
+        zh: {
+          navTitle: '注册申请结果',
+          submittedInfoTitle: '已提交信息',
+          goLogin: '去登录',
+          resubmitRegister: '重新提交注册申请',
+          refreshing: '刷新中...',
+          refreshStatus: '刷新审批状态',
+          viewRegistrationRecords: '查看注册记录',
+          unsubmitted: '未提交',
+          titleUnsubmitted: '您还未提交注册申请',
+          titlePending: '注册申请已提交',
+          titleApproved: '注册审批已通过',
+          titleRejected: '注册审批未通过',
+          descUnsubmitted: '请先提交注册申请单，审批通过后才算注册成功。',
+          descPendingRecords: '当前展示的是该申请单的审批状态，可下拉或点击按钮刷新最新结果。',
+          descPendingDefault: '当前申请正在审批中，审批通过前无法登录。',
+          descApproved: '您的注册申请已审批通过，现在可以前往登录。',
+          descRejectedRecords: '当前展示的是该申请单的审批结果，请根据驳回原因修改信息后重新提交注册申请。',
+          descRejectedDefault: '请根据驳回原因修改信息后重新提交注册申请。',
+          remarkApproved: '通过备注',
+          remarkRejected: '驳回原因',
+          remarkPending: '审批备注',
+          roleForeign: '外籍人员',
+          roleDomestic: '中国籍',
+          labelIdentityType: '人员类型',
+          labelName: '姓名',
+          labelAccount: '注册账号',
+          labelCertificateNo: '证件号',
+          fallbackNone: '-',
+          latestDetailMissing: '未查到最新详情，已展示列表记录',
+          approvedPleaseLogin: '审批已通过，请登录',
+          fetchStatusFailed: '获取审批状态失败',
+          statusPending: '审核中',
+          statusApproved: '已通过',
+          statusRejected: '已驳回'
+        },
+        en: {
+          navTitle: 'Registration Result',
+          submittedInfoTitle: 'Submitted Information',
+          goLogin: 'Sign In',
+          resubmitRegister: 'Submit Registration Again',
+          refreshing: 'Refreshing...',
+          refreshStatus: 'Refresh Status',
+          viewRegistrationRecords: 'View Registration Records',
+          unsubmitted: 'Not Submitted',
+          titleUnsubmitted: 'No registration application submitted yet',
+          titlePending: 'Registration submitted',
+          titleApproved: 'Registration approved',
+          titleRejected: 'Registration was not approved',
+          descUnsubmitted: 'Please submit a registration application first. Registration is completed only after approval.',
+          descPendingRecords: 'This page shows the approval status of the selected application. Pull down or tap the button to refresh.',
+          descPendingDefault: 'Your application is under review and sign-in is unavailable before approval.',
+          descApproved: 'Your registration is approved and you can sign in now.',
+          descRejectedRecords: 'This page shows the approval result of the selected application. Please update the information and resubmit based on the rejection reason.',
+          descRejectedDefault: 'Please update the information and resubmit based on the rejection reason.',
+          remarkApproved: 'Approval Note',
+          remarkRejected: 'Rejection Reason',
+          remarkPending: 'Approval Note',
+          roleForeign: 'Foreign',
+          roleDomestic: 'Chinese',
+          labelIdentityType: 'Identity Type',
+          labelName: 'Name',
+          labelAccount: 'Account',
+          labelCertificateNo: 'Certificate No.',
+          fallbackNone: '-',
+          latestDetailMissing: 'Latest details are unavailable. Showing the list record instead.',
+          approvedPleaseLogin: 'Approved. Please sign in.',
+          fetchStatusFailed: 'Failed to fetch approval status',
+          statusPending: 'Under Review',
+          statusApproved: 'Approved',
+          statusRejected: 'Rejected'
+        }
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    authStatus() {
+      const status = this.applicationInfo ? this.applicationInfo.approvalStatus : undefined
+      return mapRegistrationApprovalToAuthStatus(status)
+    },
+    applicationCode() {
+      return this.targetCode || resolveRegistrationApplicationCode(this.applicationInfo) || ''
+    },
+    approvalStatusText() {
+      const status = this.applicationInfo ? this.applicationInfo.approvalStatus : undefined
+      if (typeof status === 'number') {
+        return this.getApprovalStatusLabelLocal(status)
+      }
+      return this.t('unsubmitted')
+    },
+    titleText() {
+      const map = {
+        unsubmitted: this.t('titleUnsubmitted'),
+        pending: this.t('titlePending'),
+        approved: this.t('titleApproved'),
+        rejected: this.t('titleRejected')
+      }
+      return map[this.authStatus] || map.unsubmitted
+    },
+    descText() {
+      const map = {
+        unsubmitted: this.t('descUnsubmitted'),
+        pending: this.sourceType === 'registration-records'
+          ? this.t('descPendingRecords')
+          : this.t('descPendingDefault'),
+        approved: this.t('descApproved'),
+        rejected: this.sourceType === 'registration-records'
+          ? this.t('descRejectedRecords')
+          : this.t('descRejectedDefault')
+      }
+      return map[this.authStatus] || map.unsubmitted
+    },
+    approvalRemarkTitle() {
+      const map = {
+        approved: this.t('remarkApproved'),
+        rejected: this.t('remarkRejected'),
+        pending: this.t('remarkPending'),
+        unsubmitted: this.t('remarkPending')
+      }
+      return map[this.authStatus] || map.pending
+    },
+    approvalRemark() {
+      return this.applicationInfo && this.applicationInfo.approveReason
+        ? this.applicationInfo.approveReason
+        : ''
+    },
+    remarkIconClass() {
+      const map = {
+        approved: 'tn-icon-success',
+        rejected: 'tn-icon-warning',
+        pending: 'tn-icon-time',
+        unsubmitted: 'tn-icon-warning'
+      }
+      return map[this.authStatus] || map.pending
+    },
+    profileSummary() {
+      const profile = this.applicationInfo || {}
+      const identityType = profile.passportNumber ? 'foreign' : 'domestic'
+      const roleText = identityType === 'foreign' ? this.t('roleForeign') : identityType === 'domestic' ? this.t('roleDomestic') : this.t('fallbackNone')
+      const certificateNo = profile.passportNumber || profile.idCard || this.t('fallbackNone')
+      return [
+        { label: this.t('labelIdentityType'), value: roleText },
+        { label: this.t('labelName'), value: profile.name || this.t('fallbackNone') },
+        { label: this.t('labelAccount'), value: profile.account || this.t('fallbackNone') },
+        { label: this.t('labelCertificateNo'), value: certificateNo },
+        // { label: '国籍', value: profile.country || profile.nationality || '-' },
+        // { label: '工作单位', value: profile.workUnit || '-' },
+        // { label: '兴趣爱好', value: hobbyText }
+      ]
+    }
+  },
+  watch: {
+    language() {
+      this.refreshStatus()
+    }
+  },
+  onLoad(options = {}) {
+    this.sourceType = options.from || ''
+    this.targetCode = decodeURIComponent(options.code || '').trim()
+
+    const payloadText = options.payload ? decodeURIComponent(options.payload) : ''
+    if (!payloadText) {
+      return
+    }
+
+    try {
+      const payload = JSON.parse(payloadText)
+      if (payload && typeof payload === 'object') {
+        this.applicationInfo = payload
+        if (!this.targetCode) {
+          this.targetCode = resolveRegistrationApplicationCode(payload)
+        }
+      }
+    } catch (error) {
+      console.error('parse auth result payload failed', error)
+    }
+  },
+  async onShow() {
+    await fetchEnums(false, this.language)
+    this.refreshStatus()
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgAccount.auth_result.auth_result', key)
+    },
+    getWechatCode() {
+      return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
+        uni.login({
+          provider: 'weixin',
+          success: (res) => {
+            resolve(res.code || '')
+          },
+          fail: (err) => {
+            console.error('getWechatCode failed', err)
+            resolve('')
+          }
+        })
+        // #endif
+        // #ifndef MP-WEIXIN
+        resolve('')
+        // #endif
+      })
+    },
+    async fetchApplicationByCode(providerValue, applicationCode) {
+      if (!providerValue || !applicationCode) {
+        return null
+      }
+
+      const response = await registrationApplicationMePage({
+        ProviderValue: providerValue,
+        Search: applicationCode,
+        PageIndex: 1,
+        PageSize: 20
+      }, this.language)
+      const pageData = formatPageResponse(response)
+      const list = Array.isArray(pageData.data) ? pageData.data : []
+      return list.find(item => resolveRegistrationApplicationCode(item) === applicationCode) || list[0] || null
+    },
+    async refreshStatus() {
+      this.loading = true
+      try {
+        const providerValue = await this.getWechatCode()
+        const applicationCode = this.applicationCode
+        let target = null
+
+        if (applicationCode) {
+          target = await this.fetchApplicationByCode(providerValue || '', applicationCode)
+        } else {
+          const response = await registrationMyorder({
+            providerValue: providerValue || ''
+          }, this.language)
+          const rawTarget = response && response.data && typeof response.data === 'object' ? response.data : response
+          target = rawTarget.data !== undefined ? rawTarget.data : rawTarget
+        }
+
+        if (!target || typeof target !== 'object' || !Object.keys(target).length) {
+          if (this.applicationInfo && this.applicationCode) {
+            uni.showToast({
+              title: this.t('latestDetailMissing'),
+              icon: 'none'
+            })
+            return
+          }
+
+          this.applicationInfo = {
+            approvalStatus: 1
+          }
+          uni.showToast({
+            title: this.t('approvedPleaseLogin'),
+            icon: 'success'
+          })
+          setTimeout(() => {
+            this.goToLogin()
+          }, 800)
+          return
+        }
+
+        this.applicationInfo = target
+        this.targetCode = resolveRegistrationApplicationCode(target) || this.targetCode
+        if (target.approvalStatus === 1) {
+          const approvedUser = buildUserFromRegistrationApplication(target, {
+            password: ''
+          })
+          saveRegisteredUser(approvedUser)
+        }
+      } catch (error) {
+        console.error('refresh registration status failed', error)
+        uni.showToast({
+          title: this.t('fetchStatusFailed'),
+          icon: 'none'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    getApprovalStatusLabelLocal(status) {
+      return getApprovalStatusLabel(
+        status,
+        this.authStatus === 'pending'
+          ? this.t('statusPending')
+          : this.authStatus === 'approved'
+            ? this.t('statusApproved')
+            : this.authStatus === 'rejected'
+              ? this.t('statusRejected')
+              : this.t('unsubmitted'),
+        this.language
+      )
+    },
+    goToLogin() {
+      uni.reLaunch({
+        url: '/pkgAccount/login/login?bypass=1'
+      })
+    },
+    resubmit() {
+      uni.redirectTo({
+        url: '/pkgAccount/register/register?bypass=1'
+      })
+    },
+    goToRegistrationRecords() {
+      uni.navigateTo({
+        url: '/pkgAccount/registration_records/registration_records'
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.auth-result-page {
+  /* 白蓝主题渐变背景 */
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  min-height: 100vh;
+}
+
+.status-card {
+  background: #ffffff;
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+  position: relative;
+  z-index: 1;
+  margin-top: 120rpx;
+  padding-bottom: 40rpx;
+}
+
+.status-icon-wrapper {
+  width: 140rpx;
+  height: 140rpx;
+  margin: 0 auto;
+  border-radius: 50%;
+  margin-top: -70rpx;
+  background: #ffffff;
+  box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.08);
+}
+
+.status-icon-wrapper.approved {
+  background: rgba($brand-primary, 0.1);
+}
+
+.status-icon-wrapper.rejected {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.status-icon-wrapper.pending,
+.status-icon-wrapper.unsubmitted {
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.status-icon {
+  font-size: 80rpx;
+}
+
+.icon-success {
+  color: $brand-primary;
+}
+
+.icon-rejected {
+  color: #cf3c3c;
+}
+
+.icon-pending,
+.icon-unsubmitted {
+  color: #c98512;
+}
+
+.card-title {
+  font-size: 44rpx;
+  font-weight: bold;
+  color: #1f1f1f;
+}
+
+.card-desc {
+  font-size: 28rpx;
+  color: #888888;
+  line-height: 1.6;
+}
+
+.code-chip {
+  width: fit-content;
+  max-width: calc(100% - 64rpx);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 12rpx 24rpx;
+  border-radius: 999rpx;
+  background: rgba($brand-primary, 0.08);
+  color: $brand-primary;
+  font-size: 24rpx;
+  font-weight: 600;
+}
+
+.reason-box {
+  padding: 30rpx;
+  border-radius: 20rpx;
+}
+
+.reason-box.approved {
+  background: rgba($brand-primary, 0.05);
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+.reason-box.approved .reason-title,
+.reason-box.approved .reason-content {
+  color: $brand-primary;
+}
+
+.reason-box.rejected {
+  background: rgba(239, 68, 68, 0.05);
+  border: 1rpx solid rgba(239, 68, 68, 0.1);
+}
+.reason-box.rejected .reason-title,
+.reason-box.rejected .reason-content {
+  color: #ef4444;
+}
+
+.reason-box.pending,
+.reason-box.unsubmitted {
+  background: rgba(245, 158, 11, 0.05);
+  border: 1rpx solid rgba(245, 158, 11, 0.1);
+}
+.reason-box.pending .reason-title,
+.reason-box.pending .reason-content,
+.reason-box.unsubmitted .reason-title,
+.reason-box.unsubmitted .reason-content {
+  color: #f59e0b;
+}
+
+.reason-title {
+  font-size: 28rpx;
+  font-weight: bold;
+}
+
+.reason-content {
+  font-size: 26rpx;
+  line-height: 1.6;
+}
+
+.summary-box {
+  padding: 30rpx;
+  background: rgba($brand-primary, 0.02);
+  border-radius: 20rpx;
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+
+.summary-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #1A2233;
+}
+
+.summary-row {
+  border-bottom: 1rpx dashed rgba($brand-primary, 0.15);
+}
+.summary-row:last-child {
+  border-bottom: none;
+}
+
+.summary-label {
+  font-size: 28rpx;
+  color: #6A7A99;
+}
+
+.summary-value {
+  font-size: 28rpx;
+  color: #1A2233;
+  font-weight: 500;
+  max-width: 65%;
+  text-align: right;
+}
+
+.custom-btn {
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999rpx;
+  font-size: 32rpx;
+  transition: all 0.3s;
+}
+
+.custom-btn:active {
+  transform: scale(0.98);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+}
+
+.btn-dark {
+  background: #ffffff;
+  color: $brand-primary;
+  border: 1rpx solid rgba($brand-primary, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+}
+
+.btn-light {
+  background: #ffffff;
+  color: #1A2233;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.04);
+}
+
+/* 动画效果 */
+.fade-in {
+  animation: fadeIn 0.6s ease-out forwards;
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+  animation-delay: 0.2s;
+  opacity: 0;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(40rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.spin {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/pkgAccount/login/login.vue b/pkgAccount/login/login.vue
new file mode 100644
index 0000000..628556c
--- /dev/null
+++ b/pkgAccount/login/login.vue
@@ -0,0 +1,577 @@
+<template>
+  <view class="login-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <!-- 可保留标题或留空保持简洁 -->
+    </tn-nav-bar>
+
+    <view class="login-content tn-padding-xl" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <!-- 页面头部大标题 -->
+      <view class="page-header tn-margin-bottom-xl tn-margin-top-xl fade-in">
+        <view class="tn-text-bold tn-color-black title-text">{{ t('pageTitle') }}</view>
+        <view class="tn-color-gray tn-text-sm tn-margin-top-sm subtitle-text">{{ t('pageDesc') }}</view>
+      </view>
+
+      <!-- 登录表单 -->
+      <view class="form-area tn-margin-top-xl fade-in-up">
+        <view class="form-item tn-margin-bottom-lg">
+          <view class="form-label tn-text-bold tn-margin-bottom-sm">{{ t('accountLabel') }}</view>
+          <view class="input-wrapper" :class="{ 'is-focused': accountFocused }">
+            <text class="tn-icon-my input-icon"></text>
+            <input 
+              class="form-input" 
+              :placeholder="t('accountPlaceholder')" 
+              placeholder-class="input-placeholder" 
+              v-model="form.account"
+              @focus="accountFocused = true"
+              @blur="accountFocused = false"
+            />
+          </view>
+        </view>
+
+        <view class="form-item tn-margin-bottom-xl">
+          <view class="form-label tn-text-bold tn-margin-bottom-sm">{{ t('passwordLabel') }}</view>
+          <view class="input-wrapper" :class="{ 'is-focused': passwordFocused }">
+            <text class="tn-icon-lock input-icon"></text>
+            <input 
+              class="form-input" 
+              type="password" 
+              :placeholder="t('passwordPlaceholder')" 
+              placeholder-class="input-placeholder" 
+              v-model="form.password"
+              @focus="passwordFocused = true"
+              @blur="passwordFocused = false"
+            />
+          </view>
+        </view>
+      </view>
+
+      <!-- 操作按钮 -->
+      <view class="action-area tn-margin-top-xxl fade-in-up" style="animation-delay: 0.2s;">
+        <view class="custom-btn btn-primary" @click="handleLogin" :class="{ 'btn-disabled': isSubmitting }">
+          <text v-if="isSubmitting" class="tn-icon-loading tn-margin-right-xs spin"></text>
+          <text class="tn-text-bold tn-text-lg">{{ isSubmitting ? t('submitting') : t('submitLogin') }}</text>
+        </view>
+
+        <view class="secondary-entry-card tn-margin-top-lg" @click="goToRegistrationRecords">
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+            <view>
+              <view class="secondary-entry-title">{{ t('viewRegistrationRecords') }}</view>
+              <view class="secondary-entry-desc tn-margin-top-xs">{{ t('viewRegistrationRecordsDesc') }}</view>
+            </view>
+            <text class="tn-icon-right secondary-entry-arrow"></text>
+          </view>
+        </view>
+        
+        <view class="tn-flex tn-flex-row-center tn-margin-top-xl">
+          <view class="tn-color-gray tn-text-sm">{{ t('noAccount') }}</view>
+          <view class="tn-color-black tn-text-bold tn-text-sm tn-margin-left-xs register-link" @click="goToRegister">{{ t('goRegister') }}</view>
+        </view>
+      </view>
+
+    </view>
+  </view>
+</template>
+
+<script>
+import { getRegisteredUser, saveRegisteredUser, startAuthorizedLoginSession } from '../../utils/app-state'
+import { mergeBackendUserInfo, normalizeUser, resolveRegistrationApplicationCode } from '../../utils/flow'
+import {
+  extractLoginSession,
+  matchRegisteredUser,
+  pickLatestRegistration,
+  resolveLoginPreparation
+} from '../../utils/login-helper'
+import { registrationMyorder, userMe, usersLogin } from '@/api/index.js'
+
+export default {
+  data() {
+    return {
+      isSubmitting: false,
+      redirectUrl: '',
+      accountFocused: false,
+      passwordFocused: false,
+      form: {
+        account: '',
+        password: ''
+      },
+      i18n: {
+        zh: {
+          pageTitle: '欢迎回来',
+          pageDesc: '登录绿居公寓，探索您的国际化青年社区',
+          accountLabel: '账号 / 邮箱',
+          accountPlaceholder: '请输入账号或邮箱',
+          passwordLabel: '密码',
+          passwordPlaceholder: '请输入密码',
+          submitting: '登录中...',
+          submitLogin: '立即登录',
+          viewRegistrationRecords: '查看注册记录',
+          viewRegistrationRecordsDesc: '未登录也可查看当前微信账号提交的注册申请记录',
+          noAccount: '还没有账号？',
+          goRegister: '去注册',
+          loading: '加载中...',
+          validateRequired: '请输入账号和密码',
+          loginSuccess: '登录成功',
+          loginFailed: '登录失败，请稍后重试'
+        },
+        en: {
+          pageTitle: 'Welcome Back',
+          pageDesc: 'Sign in to Luju Apartments and explore your international youth community.',
+          accountLabel: 'Account / Email',
+          accountPlaceholder: 'Enter account or email',
+          passwordLabel: 'Password',
+          passwordPlaceholder: 'Enter password',
+          submitting: 'Signing In...',
+          submitLogin: 'Sign In',
+          viewRegistrationRecords: 'View Registration Records',
+          viewRegistrationRecordsDesc: 'You can review registration records submitted by this Wechat account even without signing in.',
+          noAccount: 'No account yet?',
+          goRegister: 'Register',
+          loading: 'Loading...',
+          validateRequired: 'Please enter both account and password',
+          loginSuccess: 'Signed in successfully',
+          loginFailed: 'Sign-in failed, please try again later'
+        }
+      }
+    }
+  },
+  async onLoad(options) {
+    this.redirectUrl = this.normalizeRedirectUrl(options && options.redirect)
+    const bypass = options && options.bypass === '1'
+    await this.checkPendingRegistration(bypass)
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgAccount.login.login', key)
+    },
+    normalizeRedirectUrl(value = '') {
+      if (!value) {
+        return ''
+      }
+      if (String(value).startsWith('/')) {
+        return String(value)
+      }
+      try {
+        return decodeURIComponent(value)
+      } catch (error) {
+        console.error('decode login redirect failed', error)
+        return ''
+      }
+    },
+    isHomePageUrl(url = '') {
+      return /^\/pages\/index\/index(?:\?|$)/.test(String(url || ''))
+    },
+    navigateAfterLogin() {
+      const targetUrl = this.redirectUrl
+      const pages = getCurrentPages()
+      if (targetUrl) {
+        if (this.isHomePageUrl(targetUrl)) {
+          uni.reLaunch({
+            url: targetUrl
+          })
+          return
+        }
+        if (Array.isArray(pages) && pages.length > 1) {
+          uni.redirectTo({
+            url: targetUrl
+          })
+          return
+        }
+        uni.reLaunch({
+          url: targetUrl
+        })
+        return
+      }
+      if (Array.isArray(pages) && pages.length > 1) {
+        uni.navigateBack()
+        return
+      }
+      uni.reLaunch({
+        url: '/pages/index/index'
+      })
+    },
+    async checkPendingRegistration(bypassRedirect = false) {
+      uni.showLoading({ title: this.t('loading') })
+      try {
+        const providerValue = await this.getWechatCode()
+        if (!providerValue) {
+           return false
+        }
+        const response = await registrationMyorder({
+          providerValue
+        }, this.$getLanguage())
+        
+        const rawLatest = response && response.data && typeof response.data === 'object' ? response.data : response
+        const latest = rawLatest.data !== undefined ? rawLatest.data : rawLatest
+        
+        if (latest && typeof latest === 'object' && Object.keys(latest).length > 0) {
+            
+            if (!bypassRedirect) {
+              uni.redirectTo({ url: '/pkgAccount/auth_result/auth_result' })
+              return true
+            } else {
+              if (latest.approvalStatus === 1) {
+                 this.form.account = latest.account || latest.email || ''
+              }
+            }
+         }
+      } catch (e) {
+        console.error('check pending registration failed', e)
+      } finally {
+        uni.hideLoading()
+      }
+      return false
+    },
+    validateForm() {
+      if (this.form.account && this.form.password) {
+        return true
+      }
+
+      uni.showToast({
+        title: this.t('validateRequired'),
+        icon: 'none'
+      })
+      return false
+    },
+    getWechatCode() {
+      return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
+        uni.login({
+          provider: 'weixin',
+          success: (res) => {
+            resolve(res.code || '')
+          },
+          fail: (err) => {
+            console.error('getWechatCode failed', err)
+            resolve('')
+          }
+        })
+        // #endif
+        // #ifndef MP-WEIXIN
+        resolve('')
+        // #endif
+      })
+    },
+    async fetchLatestRegistration() {
+      const providerValue = await this.getWechatCode()
+      const response = await registrationMyorder({
+        Account: this.form.account,
+        providerValue: providerValue || ''
+      }, this.$getLanguage())
+
+      const rawLatest = response && response.data && typeof response.data === 'object' ? response.data : response
+      const latest = rawLatest.data !== undefined ? rawLatest.data : rawLatest
+      
+      if (latest && typeof latest === 'object' && Object.keys(latest).length > 0) {
+        return latest
+      }
+      return null
+    },
+    async loginByApi() {
+      const response = await usersLogin({
+        account: this.form.account,
+        password: this.form.password
+      }, this.$getLanguage())
+
+      return extractLoginSession(response, this.$getLanguage())
+    },
+    fetchUserInfoAfterLogin() {
+      return userMe({}, this.$getLanguage())
+        .then(userInfoRes => {
+          return userInfoRes && userInfoRes.data ? userInfoRes.data : userInfoRes
+        })
+        .catch(error => {
+          console.error('fetch userinfo failed', error)
+          return null
+        })
+    },
+    rejectHandledLogin(options = {}) {
+      const {
+        title = '',
+        navigateToAuthResult = false
+      } = options
+
+      uni.hideLoading()
+      this.isSubmitting = false
+
+      if (title) {
+        uni.showToast({
+          title,
+          icon: 'none'
+        })
+      }
+
+      if (navigateToAuthResult) {
+        setTimeout(() => {
+          uni.navigateTo({
+            url: '/pkgAccount/auth_result/auth_result'
+          })
+        }, 600)
+      }
+
+      throw { __handled: true }
+    },
+    async resolveLoginState() {
+      const localRegisteredUser = normalizeUser(getRegisteredUser())
+      const matchedLocalUser = matchRegisteredUser(localRegisteredUser, this.form.account)
+      const { token, expires } = await this.loginByApi()
+      const latestRegistration = await this.fetchLatestRegistration()
+      const loginPreparation = resolveLoginPreparation({
+        language: this.$getLanguage(),
+        matchedLocalUser,
+        latestRegistration,
+        account: this.form.account,
+        password: this.form.password
+      })
+
+      if (!loginPreparation.ok) {
+        this.rejectHandledLogin(loginPreparation.handledError)
+      }
+      return {
+        sessionUser: loginPreparation.sessionUser,
+        token,
+        expires
+      }
+    },
+    async finishLogin(loginState) {
+      const {
+        sessionUser,
+        token,
+        expires
+      } = loginState
+
+      startAuthorizedLoginSession(sessionUser, token, expires)
+      const backendUserInfo = await this.fetchUserInfoAfterLogin()
+      const finalUser = mergeBackendUserInfo(sessionUser, backendUserInfo)
+
+      saveRegisteredUser(finalUser)
+      startAuthorizedLoginSession(finalUser, token, expires)
+      uni.hideLoading()
+      uni.showToast({
+        title: this.t('loginSuccess'),
+        icon: 'success'
+      })
+      setTimeout(() => {
+        this.isSubmitting = false
+        this.navigateAfterLogin()
+      }, 600)
+    },
+    handleLogin() {
+      if (this.isSubmitting || !this.validateForm()) {
+        return
+      }
+
+      this.isSubmitting = true
+      uni.showLoading({ title: this.t('submitting') })
+
+      return this.resolveLoginState()
+        .then(loginState => {
+          return this.finishLogin(loginState)
+        })
+        .catch(error => {
+          if (error && error.__handled) {
+            return
+          }
+
+          console.error('handle login failed', error)
+          uni.hideLoading()
+          this.isSubmitting = false
+          uni.showToast({
+            title: this.t('loginFailed'),
+            icon: 'none'
+          })
+        })
+    },
+    goToRegister() {
+      uni.navigateTo({
+        url: '/pkgAccount/register/register'
+      })
+    },
+    goToRegistrationRecords() {
+      uni.navigateTo({
+        url: '/pkgAccount/registration_records/registration_records'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.login-page {
+  background: #FFFFFF;
+  background-image: radial-gradient(circle at 100% 0%, rgba($brand-primary, 0.15) 0%, transparent 40%),
+                    radial-gradient(circle at 0% 100%, rgba($brand-primary, 0.05) 0%, transparent 40%);
+  min-height: 100vh;
+}
+
+.page-header {
+  padding-top: 20rpx;
+}
+
+.title-text {
+  font-size: 64rpx;
+  letter-spacing: 2rpx;
+  line-height: 1.3;
+}
+
+.subtitle-text {
+  font-size: 28rpx;
+  opacity: 0.8;
+}
+
+/* 表单区域 */
+.form-label {
+  font-size: 30rpx;
+  color: #1f1f1f;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  background-color: #FFFFFF;
+  border-radius: 20rpx;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.05);
+  transition: all 0.3s ease;
+  padding: 0 30rpx;
+  height: 108rpx;
+}
+
+.input-wrapper.is-focused {
+  border-color: $brand-primary;
+  background-color: #FFFFFF;
+  box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.15);
+}
+
+.input-icon {
+  font-size: 36rpx;
+  color: #cccccc;
+  margin-right: 20rpx;
+  transition: color 0.3s ease;
+}
+
+.input-wrapper.is-focused .input-icon {
+  color: $brand-primary;
+}
+
+.form-input {
+  flex: 1;
+  height: 100%;
+  font-size: 30rpx;
+  color: #333333;
+}
+
+.input-placeholder {
+  color: #bbbbbb;
+  font-size: 28rpx;
+}
+
+/* 按钮与操作区 */
+.custom-btn {
+  width: 100%;
+  height: 108rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 999rpx;
+  transition: all 0.3s ease;
+}
+
+.custom-btn:active {
+  transform: scale(0.96);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+}
+
+.btn-disabled {
+  opacity: 0.7;
+  pointer-events: none;
+  box-shadow: none;
+}
+
+.secondary-entry-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 28rpx 32rpx;
+  border: 1rpx solid rgba($brand-primary, 0.12);
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.05);
+}
+
+.secondary-entry-card:active {
+  transform: scale(0.98);
+}
+
+.secondary-entry-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1A2233;
+}
+
+.secondary-entry-desc {
+  font-size: 24rpx;
+  color: #6A7A99;
+  line-height: 1.5;
+}
+
+.secondary-entry-arrow {
+  color: $brand-primary;
+  font-size: 28rpx;
+}
+
+.register-link {
+  position: relative;
+  display: inline-block;
+  padding: 10rpx 0;
+}
+
+.register-link::after {
+  content: '';
+  position: absolute;
+  bottom: 4rpx;
+  left: 0;
+  width: 100%;
+  height: 4rpx;
+  background: $brand-primary;
+  border-radius: 2rpx;
+  opacity: 0.5;
+}
+
+/* 动画 */
+.fade-in {
+  animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  opacity: 0;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(40rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.spin {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  100% { transform: rotate(360deg); }
+}
+</style>
diff --git a/pkgAccount/register/register.vue b/pkgAccount/register/register.vue
new file mode 100644
index 0000000..587004f
--- /dev/null
+++ b/pkgAccount/register/register.vue
@@ -0,0 +1,1739 @@
+<template>
+  <view class="register-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" :backgroundColor="navBackgroundColor">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="register-content" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
+      <view class="page-header animation-fade-in">
+        <view class="tn-text-bold tn-color-black page-title">{{ t('pageTitle') }}</view>
+        <view class="tn-color-gray tn-text-sm page-desc">
+          {{ t('pageDesc') }}
+        </view>
+        <view class="draft-tip-bar tn-margin-top-sm">
+          <text class="tn-icon-safe-fill draft-tip-icon"></text>
+          <text class="draft-tip-text">{{ draftTipText }}</text>
+        </view>
+      </view>
+
+      <view class="form-card animation-fade-in" style="animation-delay: 0.1s;">
+        <view class="section-title tn-text-bold tn-text-lg">
+          <view class="title-indicator"></view>
+          {{ t('accountSection') }}
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('accountLabel') }} <text class="required-mark">*</text></view>
+          <input class="form-input" :placeholder="t('accountPlaceholder')" placeholder-class="input-placeholder" v-model="form.account" />
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('passwordLabel') }} <text class="required-mark">*</text></view>
+          <input class="form-input" type="password" :placeholder="t('passwordPlaceholder')" placeholder-class="input-placeholder" v-model="form.password" />
+        </view>
+
+        <view class="form-item" style="margin-bottom: 0;">
+          <view class="form-label">{{ t('emailLabel') }} <text class="required-mark">*</text></view>
+          <input class="form-input" :placeholder="t('emailPlaceholder')" placeholder-class="input-placeholder" v-model="form.email" />
+        </view>
+
+        <!-- 暂时屏蔽邮箱验证码 -->
+        <view class="form-item" style="margin-bottom: 0;" v-if="false">
+          <view class="form-label">{{ t('emailCodeLabel') }}</view>
+          <input class="form-input" :placeholder="t('emailCodePlaceholder')" placeholder-class="input-placeholder" v-model="form.emailVerifyCode" />
+        </view>
+      </view>
+
+      <view class="form-card animation-fade-in" style="animation-delay: 0.2s;">
+        <view class="section-title tn-text-bold tn-text-lg">
+          <view class="title-indicator"></view>
+          {{ t('basicSection') }}
+        </view>
+
+        <view class="role-switch-wrap">
+          <view class="role-switch tn-flex">
+            <view class="role-tab tn-flex-1" :class="form.identityType === 'ForeignStudents' ? 'role-active' : ''" @click="switchIdentityType('ForeignStudents')">
+              {{ t('foreignIdentity') }}
+            </view>
+            <view class="role-tab tn-flex-1" :class="form.identityType === 'DomesticStudents' ? 'role-active' : ''" @click="switchIdentityType('DomesticStudents')">
+              {{ t('domesticIdentity') }}
+            </view>
+          </view>
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('nameLabel') }} <text class="required-mark">*</text></view>
+          <input class="form-input" :placeholder="t('namePlaceholder')" placeholder-class="input-placeholder" v-model="form.name" />
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('genderLabel') }} <text class="required-mark">*</text></view>
+          <view class="tn-flex">
+            <view
+              v-for="(item, index) in genderOptions"
+              :key="item.key"
+              class="gender-btn tn-flex-1"
+              :class="[form.gender === Number(item.key) ? 'gender-active' : '', index > 0 ? 'tn-margin-left-sm' : '']"
+              @click="form.gender = Number(item.key)"
+            >
+              {{ item.value }}
+            </view>
+          </view>
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('phoneLabel') }} <text class="required-mark">*</text></view>
+          <input class="form-input" type="number" :placeholder="t('phonePlaceholder')" placeholder-class="input-placeholder" v-model="form.phone" />
+        </view>
+
+        <view class="form-item" style="margin-bottom: 0;">
+          <view class="form-label">{{ t('countryLabel') }} <text class="required-mark">*</text></view>
+          <view v-if="isDomesticIdentity" class="form-input picker-input picker-input-disabled">
+            <text class="text-black">{{ form.country || t('chinaText') }}</text>
+            <text class="picker-fixed-text">{{ t('countryFixedText') }}</text>
+          </view>
+          <picker v-else mode="selector" :range="countryRange" @change="onCountryChange">
+            <view class="form-input picker-input">
+              <text :class="form.country ? 'text-black' : 'text-gray'">{{ form.country || t('countryPlaceholder') }}</text>
+              <text class="tn-icon-right tn-color-gray"></text>
+            </view>
+          </picker>
+        </view>
+      </view>
+
+      <view class="form-card animation-fade-in" style="animation-delay: 0.3s;">
+        <view class="section-title tn-text-bold tn-text-lg">
+          <view class="title-indicator"></view>
+          {{ t('profileSection') }}
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('workUnitLabel') }} <text class="required-mark">*</text></view>
+          <input class="form-input" :placeholder="t('workUnitPlaceholder')" placeholder-class="input-placeholder" v-model="form.workUnit" />
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('hangzhouPropertyLabel') }} <text class="required-mark">*</text></view>
+          <view class="tn-flex tn-flex-wrap">
+            <view class="tag-item" :class="form.hasHangzhouProperty === true ? 'tag-active' : ''" @click="form.hasHangzhouProperty = true">{{ t('yesText') }}</view>
+            <view class="tag-item" :class="form.hasHangzhouProperty === false ? 'tag-active' : ''" @click="form.hasHangzhouProperty = false">{{ t('noText') }}</view>
+          </view>
+        </view>
+
+        <template v-if="form.identityType === 'DomesticStudents'">
+          <view class="form-item">
+            <view class="form-label">{{ t('idCardLabel') }} <text class="required-mark">*</text></view>
+            <input class="form-input" :placeholder="t('idCardPlaceholder')" placeholder-class="input-placeholder" v-model="form.idCard" />
+          </view>
+
+          <view class="form-item">
+            <view class="form-label">{{ t('idCardFrontAttachmentLabel') }} <text class="required-mark">*</text></view>
+            <view v-if="!form.idCardFrontAttachment.serverValue" class="upload-box" @click="uploadAttachment('idCardFrontAttachment')">
+              <view class="upload-placeholder">
+                <view class="upload-icon-wrap"><text class="tn-icon-camera-fill"></text></view>
+                <view class="tn-margin-top-sm upload-text">{{ t('uploadIdFront') }}</view>
+              </view>
+            </view>
+            <view v-else class="attachment-file-card">
+              <image
+                class="attachment-preview-image"
+                :src="getAttachmentPreviewUrl(form.idCardFrontAttachment)"
+                mode="aspectFill"
+                @click.stop="previewAttachment('idCardFrontAttachment')"
+              />
+              <view class="attachment-file-info">
+                <view class="attachment-name">{{ form.idCardFrontAttachment.name }}</view>
+                <view class="attachment-type tn-margin-top-xs">{{ t('imageUploadedTip') }}</view>
+              </view>
+              <view class="attachment-action-row">
+                <view class="attachment-action-btn" @click.stop="previewAttachment('idCardFrontAttachment')">
+                  {{ t('viewImage') }}
+                </view>
+                <view class="attachment-action-btn is-primary" @click.stop="uploadAttachment('idCardFrontAttachment')">
+                  {{ t('reupload') }}
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <view class="form-item" style="margin-bottom: 0;">
+            <view class="form-label">{{ t('idCardBackAttachmentLabel') }} <text class="required-mark">*</text></view>
+            <view v-if="!form.idCardBackAttachment.serverValue" class="upload-box" @click="uploadAttachment('idCardBackAttachment')">
+              <view class="upload-placeholder">
+                <view class="upload-icon-wrap"><text class="tn-icon-camera-fill"></text></view>
+                <view class="tn-margin-top-sm upload-text">{{ t('uploadIdBack') }}</view>
+              </view>
+            </view>
+            <view v-else class="attachment-file-card">
+              <image
+                class="attachment-preview-image"
+                :src="getAttachmentPreviewUrl(form.idCardBackAttachment)"
+                mode="aspectFill"
+                @click.stop="previewAttachment('idCardBackAttachment')"
+              />
+              <view class="attachment-file-info">
+                <view class="attachment-name">{{ form.idCardBackAttachment.name }}</view>
+                <view class="attachment-type tn-margin-top-xs">{{ t('imageUploadedTip') }}</view>
+              </view>
+              <view class="attachment-action-row">
+                <view class="attachment-action-btn" @click.stop="previewAttachment('idCardBackAttachment')">
+                  {{ t('viewImage') }}
+                </view>
+                <view class="attachment-action-btn is-primary" @click.stop="uploadAttachment('idCardBackAttachment')">
+                  {{ t('reupload') }}
+                </view>
+              </view>
+            </view>
+          </view>
+        </template>
+
+        <template v-else>
+          <view class="form-item">
+            <view class="form-label">{{ t('passportLabel') }} <text class="required-mark">*</text></view>
+            <input class="form-input" :placeholder="t('passportPlaceholder')" placeholder-class="input-placeholder" v-model="form.passportNumber" />
+          </view>
+
+          <view class="form-item">
+            <view class="form-label">{{ t('passportExpiryLabel') }} <text class="required-mark">*</text></view>
+            <picker mode="date" @change="onPassportDateChange">
+              <view class="form-input picker-input">
+                <text :class="form.passportExpiry ? 'text-black' : 'text-gray'">{{ form.passportExpiry || t('selectDate') }}</text>
+                <text class="tn-icon-calendar tn-color-gray"></text>
+              </view>
+            </picker>
+          </view>
+
+          <view class="form-item">
+            <view class="form-label">{{ t('schoolLabel') }}</view>
+            <input class="form-input" :placeholder="t('schoolPlaceholder')" placeholder-class="input-placeholder" v-model="form.school" />
+          </view>
+
+          <view class="form-item" style="margin-bottom: 0;">
+            <view class="form-label">{{ t('passportAttachmentLabel') }} <text class="required-mark">*</text></view>
+            <view v-if="!form.passportAttachment.serverValue" class="upload-box" @click="uploadAttachment('passportAttachment')">
+              <view v-if="!form.passportAttachment.serverValue" class="upload-placeholder">
+                <view class="upload-icon-wrap"><text class="tn-icon-upload"></text></view>
+                <view class="tn-margin-top-sm upload-text">{{ t('uploadPassport') }}</view>
+              </view>
+            </view>
+            <view v-else class="attachment-file-card">
+              <image
+                v-if="isImageAttachment(form.passportAttachment)"
+                class="attachment-preview-image"
+                :src="getAttachmentPreviewUrl(form.passportAttachment)"
+                mode="aspectFill"
+                @click.stop="previewAttachment('passportAttachment')"
+              />
+              <view v-else class="attachment-file-cover is-unsupported">
+                <text class="attachment-file-ext">FILE</text>
+              </view>
+              <view class="attachment-file-info">
+                <view class="attachment-name">{{ form.passportAttachment.name }}</view>
+                <view class="attachment-type tn-margin-top-xs">
+                  {{ isImageAttachment(form.passportAttachment) ? t('imageUploadedTip') : t('passportImageOnlyTip') }}
+                </view>
+              </view>
+              <view class="attachment-action-row">
+                <view
+                  v-if="isImageAttachment(form.passportAttachment)"
+                  class="attachment-action-btn"
+                  @click.stop="previewAttachment('passportAttachment')"
+                >
+                  {{ t('viewImage') }}
+                </view>
+                <view class="attachment-action-btn is-primary" @click.stop="uploadAttachment('passportAttachment')">
+                  {{ t('reupload') }}
+                </view>
+              </view>
+            </view>
+          </view>
+        </template>
+      </view>
+
+      <view class="form-card animation-fade-in" style="animation-delay: 0.4s;">
+        <view class="section-title tn-text-bold tn-text-lg">
+          <view class="title-indicator"></view>
+          {{ t('preferenceSection') }}
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('dietaryLabel') }}</view>
+          <picker mode="selector" :range="dietaryHabitRange" @change="onDictSelect('dietaryHabit', $event)">
+            <view class="form-input picker-input">
+              <text :class="form.dietaryHabit ? 'text-black' : 'text-gray'">{{ form.dietaryHabit || t('dietaryPlaceholder') }}</text>
+              <text class="tn-icon-right tn-color-gray"></text>
+            </view>
+          </picker>
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">{{ t('hobbyLabel') }}</view>
+          <picker mode="selector" :range="hobbyRange" @change="onDictSelect('hobby', $event)">
+            <view class="form-input picker-input">
+              <text :class="form.hobby ? 'text-black' : 'text-gray'">{{ form.hobby || t('hobbyPlaceholder') }}</text>
+              <text class="tn-icon-right tn-color-gray"></text>
+            </view>
+          </picker>
+        </view>
+
+        <view class="form-item" style="margin-bottom: 0;">
+          <view class="form-label">{{ t('religionLabel') }}</view>
+          <picker mode="selector" :range="religionRange" @change="onDictSelect('religion', $event)">
+            <view class="form-input picker-input">
+              <text :class="form.religion ? 'text-black' : 'text-gray'">{{ form.religion || t('religionPlaceholder') }}</text>
+              <text class="tn-icon-right tn-color-gray"></text>
+            </view>
+          </picker>
+        </view>
+      </view>
+
+      <view class="bottom-btn-area tn-margin-top-xl animation-fade-in" style="animation-delay: 0.5s;">
+        <view class="custom-btn btn-primary submit-btn" @click="submitForm" :class="{ 'btn-disabled': isSubmitting }">
+          <text class="tn-text-bold tn-text-lg">{{ isSubmitting ? t('submitting') : t('submitRegister') }}</text>
+        </view>
+
+        <view class="secondary-entry-card tn-margin-top-lg" @click="goToRegistrationRecords">
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+            <view>
+              <view class="secondary-entry-title">{{ t('viewRegistrationRecords') }}</view>
+              <view class="secondary-entry-desc tn-margin-top-xs">{{ t('viewRegistrationRecordsDesc') }}</view>
+            </view>
+            <text class="tn-icon-right secondary-entry-arrow"></text>
+          </view>
+        </view>
+
+        <view class="tn-flex tn-flex-row-center tn-margin-top-lg">
+          <view class="tn-color-gray tn-text-sm">{{ t('hasAccount') }}</view>
+          <view class="tn-color-black tn-text-bold tn-text-sm tn-margin-left-xs login-link" @click="goToLogin">{{ t('goLogin') }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  clearFailedRegistrationDraft,
+  clearLoginSession,
+  getFailedRegistrationDraft,
+  saveFailedRegistrationDraft
+} from '../../utils/app-state'
+import { getCountryList, submitRegistrationApplication, sysdictPage, uploadCommonFile, registrationMyorder } from '@/api/index.js'
+import { addFilePrefix } from '@/utils/common.js'
+import { getGenderLabel } from '../../utils/enum-store'
+import { resolveRegistrationApplicationCode } from '../../utils/flow'
+
+function createAttachmentState() {
+  return {
+    name: '',
+    serverValue: '',
+    localPath: ''
+  }
+}
+
+function createDefaultForm() {
+  return {
+    identityType: 'ForeignStudents',
+    account: '',
+    password: '',
+    email: '',
+    emailVerifyCode: '',
+    name: '',
+    gender: 1,
+    phone: '',
+    country: '',
+    idCard: '',
+    workUnit: '',
+    hasHangzhouProperty: null,
+    dietaryHabit: '',
+    hobby: '',
+    passportNumber: '',
+    passportExpiry: '',
+    school: '',
+    religion: '',
+    passportAttachment: createAttachmentState(),
+    idCardFrontAttachment: createAttachmentState(),
+    idCardBackAttachment: createAttachmentState()
+  }
+}
+
+function normalizeAttachmentDraft(attachment) {
+  const source = attachment && typeof attachment === 'object' ? attachment : {}
+  return {
+    ...createAttachmentState(),
+    name: source.name || '',
+    serverValue: source.serverValue || '',
+    localPath: source.localPath || ''
+  }
+}
+
+function normalizeRegistrationDraftForm(draft) {
+  const draftSource = draft && typeof draft === 'object' ? draft : {}
+  const source = draftSource.form && typeof draftSource.form === 'object' ? draftSource.form : draftSource
+  return {
+    ...createDefaultForm(),
+    ...source,
+    gender: source.gender === 0 || source.gender === 1 ? Number(source.gender) : 1,
+    hasHangzhouProperty: typeof source.hasHangzhouProperty === 'boolean' ? source.hasHangzhouProperty : null,
+    passportAttachment: normalizeAttachmentDraft(source.passportAttachment),
+    idCardFrontAttachment: normalizeAttachmentDraft(source.idCardFrontAttachment),
+    idCardBackAttachment: normalizeAttachmentDraft(source.idCardBackAttachment)
+  }
+}
+
+export default {
+  data() {
+    return {
+      navBgOpacity: 0,
+      isSubmitting: false,
+      dictLoading: false,
+      hasPromptedFailedDraft: false,
+      draftPersistTimer: null,
+      draftTipText: '',
+      lastForeignCountry: '',
+      form: createDefaultForm(),
+      rawCountryList: [],
+      rawHobbyList: [],
+      rawDietaryHabitList: [],
+      rawReligionList: [],
+      countryOptions: [],
+      hobbyOptions: [],
+      dietaryHabitOptions: [],
+      religionOptions: [],
+      i18n: {
+        zh: {
+          navTitle: '注册账号',
+          pageTitle: '注册并提交实名资料',
+          pageDesc: '账号信息和实名认证资料需要一起填写完成，提交的是注册申请单，审批通过后才算注册成功。',
+          accountSection: '账号信息',
+          accountLabel: '登录账号',
+          accountPlaceholder: '请输入登录账号',
+          passwordLabel: '登录密码',
+          passwordPlaceholder: '请输入 6 位及以上密码',
+          emailLabel: '邮箱',
+          emailPlaceholder: '请输入邮箱',
+          emailCodeLabel: '邮箱验证码',
+          emailCodePlaceholder: '请输入邮箱验证码',
+          basicSection: '基础实名信息',
+          foreignIdentity: '外籍人员',
+          domesticIdentity: '中国籍',
+          nameLabel: '姓名',
+          namePlaceholder: '请输入真实姓名',
+          genderLabel: '性别',
+          genderMale: '男',
+          genderFemale: '女',
+          phoneLabel: '手机号',
+          phonePlaceholder: '请输入手机号',
+          countryLabel: '国籍',
+          chinaText: '中国',
+          countryFixedText: '中国籍固定',
+          countryPlaceholder: '请选择国籍',
+          profileSection: '认证档案',
+          workUnitLabel: '工作单位',
+          workUnitPlaceholder: '请输入工作单位',
+          hangzhouPropertyLabel: '杭州有无房产',
+          yesText: '有',
+          noText: '无',
+          idCardLabel: '身份证号',
+          idCardPlaceholder: '请输入身份证号',
+          idCardFrontAttachmentLabel: '身份证正面附件',
+          idCardBackAttachmentLabel: '身份证反面附件',
+          uploadIdFront: '点击上传身份证正面',
+          uploadIdBack: '点击上传身份证反面',
+          imageUploadedTip: '已上传图片，可点击查看大图',
+          viewImage: '查看图片',
+          reupload: '重新上传',
+          passportLabel: '护照号',
+          passportPlaceholder: '请输入护照号',
+          passportExpiryLabel: '护照到期时间',
+          selectDate: '请选择日期',
+          schoolLabel: '就读学校',
+          schoolPlaceholder: '请输入就读学校（选填）',
+          passportAttachmentLabel: '护照附件',
+          uploadPassport: '点击上传护照图片',
+          passportImageOnlyTip: '护照附件仅支持图片，请重新上传',
+          preferenceSection: '偏好信息',
+          dietaryLabel: '饮食习惯',
+          hobbyLabel: '兴趣爱好',
+          religionLabel: '宗教信仰',
+          dietaryPlaceholder: '请选择饮食习惯',
+          hobbyPlaceholder: '请选择兴趣爱好',
+          religionPlaceholder: '请选择宗教信仰',
+          submitting: '提交中...',
+          submitRegister: '提交注册申请',
+          viewRegistrationRecords: '查看注册记录',
+          viewRegistrationRecordsDesc: '如果当前微信账号已提交过申请，可直接查看历史记录和审批状态',
+          hasAccount: '已有账号？',
+          goLogin: '去登录',
+          loading: '加载中...',
+          restoreDraftTitle: '发现未完成的数据',
+          restoreDraftContent: '是否填入上次未完成或提交失败时缓存的注册信息？',
+          restoreDraftConfirm: '填入',
+          restoreDraftCancel: '不用',
+          restoreDraftSuccess: '已填入上次失败数据',
+          countryLoadFailed: '国家列表加载失败',
+          dictLoadFailed: '字典加载失败，稍后可重试',
+          noSelectableOptions: '当前暂无可选项',
+          noSelectableCountry: '当前暂无可选国家',
+          uploading: '上传中...',
+          uploadSuccess: '上传成功',
+          uploadFailed: '上传失败，请重试',
+          attachmentNotImage: '当前附件不是图片',
+          uploadImageOption: '上传图片',
+          submitPending: '申请已提交，待审批',
+          submitFailed: '提交失败，请稍后重试',
+          draftTipDefault: '未完成内容会自动保存，可随时返回继续填写',
+          draftTipSaved: '当前填写内容已自动保存',
+          validateRequiredBasic: '请先填写账号、密码、邮箱和姓名',
+          validatePasswordLength: '登录密码至少 6 位',
+          validateEmail: '请输入正确的邮箱地址',
+          validateIdentityBasic: '请完善性别、手机号和国籍',
+          validatePhone: '请输入正确的手机号',
+          validateProfile: '请完善工作单位和杭州房产情况',
+          validateIdCard: '请填写身份证号',
+          validateIdCardAttachments: '请上传身份证正反面附件',
+          validatePassportBasic: '请填写护照号和护照到期时间',
+          validatePassportAttachment: '请上传护照图片',
+          validatePassportAttachmentImage: '护照附件仅支持图片格式'
+        },
+        en: {
+          navTitle: 'Register',
+          pageTitle: 'Register and Submit Verification',
+          pageDesc: 'Account information and identity verification materials must be completed together. Registration succeeds only after approval.',
+          accountSection: 'Account Information',
+          accountLabel: 'Account',
+          accountPlaceholder: 'Enter account name',
+          passwordLabel: 'Password',
+          passwordPlaceholder: 'Enter at least 6 characters',
+          emailLabel: 'Email',
+          emailPlaceholder: 'Enter email',
+          emailCodeLabel: 'Email Code',
+          emailCodePlaceholder: 'Enter email verification code',
+          basicSection: 'Basic Verification',
+          foreignIdentity: 'Foreign',
+          domesticIdentity: 'Chinese',
+          nameLabel: 'Name',
+          namePlaceholder: 'Enter your real name',
+          genderLabel: 'Gender',
+          genderMale: 'Male',
+          genderFemale: 'Female',
+          phoneLabel: 'Phone',
+          phonePlaceholder: 'Enter phone number',
+          countryLabel: 'Country',
+          chinaText: 'China',
+          countryFixedText: 'Fixed for Chinese users',
+          countryPlaceholder: 'Select country',
+          profileSection: 'Profile',
+          workUnitLabel: 'Work Unit',
+          workUnitPlaceholder: 'Enter work unit',
+          hangzhouPropertyLabel: 'Property in Hangzhou',
+          yesText: 'Yes',
+          noText: 'No',
+          idCardLabel: 'ID Card Number',
+          idCardPlaceholder: 'Enter ID card number',
+          idCardFrontAttachmentLabel: 'ID Card Front',
+          idCardBackAttachmentLabel: 'ID Card Back',
+          uploadIdFront: 'Upload ID card front',
+          uploadIdBack: 'Upload ID card back',
+          imageUploadedTip: 'Image uploaded, tap to preview',
+          viewImage: 'Preview',
+          reupload: 'Re-upload',
+          passportLabel: 'Passport Number',
+          passportPlaceholder: 'Enter passport number',
+          passportExpiryLabel: 'Passport Expiry Date',
+          selectDate: 'Select date',
+          schoolLabel: 'School',
+          schoolPlaceholder: 'Enter school (optional)',
+          passportAttachmentLabel: 'Passport Attachment',
+          uploadPassport: 'Upload passport image',
+          passportImageOnlyTip: 'Passport attachment only supports images, please re-upload',
+          preferenceSection: 'Preferences',
+          dietaryLabel: 'Dietary Habit',
+          hobbyLabel: 'Hobby',
+          religionLabel: 'Religion',
+          dietaryPlaceholder: 'Select dietary habit',
+          hobbyPlaceholder: 'Select hobby',
+          religionPlaceholder: 'Select religion',
+          submitting: 'Submitting...',
+          submitRegister: 'Submit Registration',
+          viewRegistrationRecords: 'View Registration Records',
+          viewRegistrationRecordsDesc: 'If this Wechat account has submitted before, you can review the history and approval status directly.',
+          hasAccount: 'Already have an account?',
+          goLogin: 'Sign In',
+          loading: 'Loading...',
+          restoreDraftTitle: 'Unfinished Data Found',
+          restoreDraftContent: 'Would you like to restore the last unfinished or failed registration data?',
+          restoreDraftConfirm: 'Restore',
+          restoreDraftCancel: 'No',
+          restoreDraftSuccess: 'Previous draft restored',
+          countryLoadFailed: 'Failed to load country list',
+          dictLoadFailed: 'Failed to load dictionaries',
+          noSelectableOptions: 'No selectable options',
+          noSelectableCountry: 'No selectable country',
+          uploading: 'Uploading...',
+          uploadSuccess: 'Upload successful',
+          uploadFailed: 'Upload failed, please retry',
+          attachmentNotImage: 'The current attachment is not an image',
+          uploadImageOption: 'Upload Image',
+          submitPending: 'Application submitted, pending approval',
+          submitFailed: 'Submission failed, please try again later',
+          draftTipDefault: 'Unfinished content is auto-saved and can be continued later',
+          draftTipSaved: 'Current content has been auto-saved',
+          validateRequiredBasic: 'Please complete the account, password, email, and name fields first',
+          validatePasswordLength: 'Password must be at least 6 characters',
+          validateEmail: 'Please enter a valid email address',
+          validateIdentityBasic: 'Please complete gender, phone number, and country',
+          validatePhone: 'Please enter a valid phone number',
+          validateProfile: 'Please complete work unit and property status in Hangzhou',
+          validateIdCard: 'Please enter your ID card number',
+          validateIdCardAttachments: 'Please upload both sides of the ID card',
+          validatePassportBasic: 'Please enter passport number and expiry date',
+          validatePassportAttachment: 'Please upload the passport image',
+          validatePassportAttachmentImage: 'Passport attachment only supports image files'
+        }
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    navBackgroundColor() {
+      return `rgba(255, 255, 255, ${this.navBgOpacity})`
+    },
+    hobbyRange() {
+      return this.hobbyOptions.length ? this.hobbyOptions.map(item => item.value) : [this.t('noSelectableOptions')]
+    },
+    countryRange() {
+      return this.countryOptions.length ? this.countryOptions.map(item => item.value) : [this.t('noSelectableOptions')]
+    },
+    dietaryHabitRange() {
+      return this.dietaryHabitOptions.length ? this.dietaryHabitOptions.map(item => item.value) : [this.t('noSelectableOptions')]
+    },
+    isDomesticIdentity() {
+      return this.form.identityType === 'DomesticStudents'
+    },
+    religionRange() {
+      return this.religionOptions.length ? this.religionOptions.map(item => item.value) : [this.t('noSelectableOptions')]
+    },
+    genderOptions() {
+      return [
+        { key: 1, value: this.t('genderMale') },
+        { key: 0, value: this.t('genderFemale') }
+      ]
+    }
+  },
+  watch: {
+    language() {
+      this.rebuildLocalizedOptions()
+      this.draftTipText = this.t('draftTipDefault')
+    },
+    form: {
+      deep: true,
+      handler() {
+        this.scheduleDraftPersist()
+      }
+    }
+  },
+  async onLoad(options) {
+    this.draftTipText = this.t('draftTipDefault')
+    const bypass = options && options.bypass === '1'
+    const hasRedirected = await this.checkPendingRegistration(bypass)
+    if (hasRedirected) return
+
+    await Promise.all([
+      this.loadDictOptions(),
+      this.loadCountryOptions()
+    ])
+
+    this.tryRestoreFailedDraft()
+  },
+  onHide() {
+    this.persistRegistrationDraft()
+  },
+  onUnload() {
+    this.persistRegistrationDraft()
+    this.clearDraftPersistTimer()
+  },
+  onPageScroll(e) {
+    let opacity = e.scrollTop / 80
+    if (opacity > 1) {
+      opacity = 1
+    } else if (opacity < 0) {
+      opacity = 0
+    }
+    this.navBgOpacity = opacity
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgAccount.register.register', key)
+    },
+    isChinaCountry(value = '') {
+      const text = String(value || '').trim()
+      return text === '中国' || text === 'China' || text === this.t('chinaText')
+    },
+    async checkPendingRegistration(bypassRedirect = false) {
+      uni.showLoading({ title: this.t('loading') })
+      try {
+        const providerValue = await this.getWechatCode()
+        if (!providerValue) return false
+        const response = await registrationMyorder({ providerValue }, this.language)
+        const rawLatest = response && response.data && typeof response.data === 'object' ? response.data : response
+        const latest = rawLatest.data !== undefined ? rawLatest.data : rawLatest
+        
+        if (latest && typeof latest === 'object' && Object.keys(latest).length > 0) {
+            
+            if (!bypassRedirect) {
+              uni.redirectTo({ url: '/pkgAccount/auth_result/auth_result' })
+              return true
+            }
+         }
+      } catch (e) {
+        console.error('check pending registration failed', e)
+      } finally {
+        uni.hideLoading()
+      }
+      return false
+    },
+    goToLogin() {
+      uni.navigateBack()
+    },
+    goToRegistrationRecords() {
+      uni.navigateTo({
+        url: '/pkgAccount/registration_records/registration_records'
+      })
+    },
+    tryRestoreFailedDraft() {
+      if (this.hasPromptedFailedDraft) {
+        return
+      }
+
+      const cachedDraft = getFailedRegistrationDraft()
+      if (!cachedDraft || typeof cachedDraft !== 'object') {
+        return
+      }
+
+      this.hasPromptedFailedDraft = true
+      uni.showModal({
+        title: this.t('restoreDraftTitle'),
+        content: this.t('restoreDraftContent'),
+        confirmText: this.t('restoreDraftConfirm'),
+        cancelText: this.t('restoreDraftCancel'),
+        success: ({ confirm }) => {
+          if (confirm) {
+            this.applyFailedDraft(cachedDraft)
+            return
+          }
+          clearFailedRegistrationDraft()
+        }
+      })
+    },
+    applyFailedDraft(draft) {
+      this.form = normalizeRegistrationDraftForm(draft)
+      if (!this.isDomesticIdentity && this.form.country && !this.isChinaCountry(this.form.country)) {
+        this.lastForeignCountry = this.form.country
+      }
+      this.applyIdentityCountryRule()
+      uni.showToast({
+        title: this.t('restoreDraftSuccess'),
+        icon: 'success'
+      })
+    },
+    buildFailedDraft() {
+      return normalizeRegistrationDraftForm(this.form)
+    },
+    scheduleDraftPersist() {
+      if (this.isSubmitting) {
+        return
+      }
+      this.clearDraftPersistTimer()
+      this.draftPersistTimer = setTimeout(() => {
+        this.persistRegistrationDraft(true)
+      }, 600)
+    },
+    clearDraftPersistTimer() {
+      if (!this.draftPersistTimer) {
+        return
+      }
+      clearTimeout(this.draftPersistTimer)
+      this.draftPersistTimer = null
+    },
+    hasDraftContent() {
+      const attachmentFields = [
+        'passportAttachment',
+        'idCardFrontAttachment',
+        'idCardBackAttachment'
+      ]
+      const textFields = [
+        'account',
+        'password',
+        'email',
+        'emailVerifyCode',
+        'name',
+        'phone',
+        'country',
+        'idCard',
+        'workUnit',
+        'dietaryHabit',
+        'hobby',
+        'passportNumber',
+        'passportExpiry',
+        'school',
+        'religion'
+      ]
+
+      if (this.form.identityType !== 'ForeignStudents') {
+        return true
+      }
+      if (this.form.gender !== null || this.form.hasHangzhouProperty !== null) {
+        return true
+      }
+      if (textFields.some(field => String(this.form[field] || '').trim())) {
+        return true
+      }
+      return attachmentFields.some((field) => {
+        const attachment = this.form[field]
+        return attachment && (attachment.serverValue || attachment.localPath || attachment.name)
+      })
+    },
+    persistRegistrationDraft(isSilent = false) {
+      if (this.isSubmitting) {
+        return
+      }
+      this.clearDraftPersistTimer()
+      if (!this.hasDraftContent()) {
+        clearFailedRegistrationDraft()
+        this.draftTipText = this.t('draftTipDefault')
+        return
+      }
+      saveFailedRegistrationDraft({
+        form: this.buildFailedDraft(),
+        updatedAt: Date.now()
+      })
+      if (!isSilent) {
+        this.draftTipText = this.t('draftTipSaved')
+      }
+    },
+    switchIdentityType(type) {
+      if (this.form.identityType === type) return
+      if (type === 'DomesticStudents' && this.form.country) {
+        this.lastForeignCountry = this.form.country
+      }
+      this.form.identityType = type
+      this.applyIdentityCountryRule()
+    },
+    onPassportDateChange(e) {
+      this.form.passportExpiry = e.detail.value
+    },
+    loadCountryOptions() {
+      return getCountryList(this.language)
+        .then((countryRes) => {
+          const rawList = this.extractResponseList(countryRes)
+          this.rawCountryList = rawList
+          this.countryOptions = this.normalizeCountryList(rawList)
+          this.applyIdentityCountryRule()
+        })
+        .catch((error) => {
+          console.error('load country options failed', error)
+          uni.showToast({
+            title: this.t('countryLoadFailed'),
+            icon: 'none'
+          })
+        })
+    },
+    loadDictOptions() {
+      this.dictLoading = true
+      return Promise.all([
+          sysdictPage({ Type: 'UserHobbiesAndInterestsTag', PageIndex: 1, PageSize: 100 }, this.$getLanguage()),
+          sysdictPage({ Type: 'UserDietaryHabitsTag', PageIndex: 1, PageSize: 100 }, this.$getLanguage()),
+          sysdictPage({ Type: 'UserReligiousBeliefTag', PageIndex: 1, PageSize: 100 }, this.$getLanguage())
+        ])
+        .then(([hobbyRes, dietaryRes, religionRes]) => {
+          this.rawHobbyList = this.extractResponseList(hobbyRes)
+          this.rawDietaryHabitList = this.extractResponseList(dietaryRes)
+          this.rawReligionList = this.extractResponseList(religionRes)
+          this.hobbyOptions = this.normalizeDictList(this.rawHobbyList)
+          this.dietaryHabitOptions = this.normalizeDictList(this.rawDietaryHabitList)
+          this.religionOptions = this.normalizeDictList(this.rawReligionList)
+        })
+        .catch((error) => {
+          console.error('load dict options failed', error)
+          uni.showToast({
+            title: this.t('dictLoadFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.dictLoading = false
+        })
+    },
+    extractResponseList(response) {
+      const rawList = response && response.data
+        ? (response.data.data || response.data)
+        : (response && response.data ? response.data : response)
+      return Array.isArray(rawList) ? rawList : []
+    },
+    getOptionTextCandidates(item = {}) {
+      return [
+        item.value,
+        item.label,
+        item.description,
+        item.name,
+        item.cname,
+        item.nameZh,
+        item.labelZh,
+        item.valueZh,
+        item.descriptionZh,
+        item.ename,
+        item.nameEn,
+        item.labelEn,
+        item.valueEn,
+        item.descriptionEn,
+        item.code
+      ].map(value => String(value || '').trim()).filter(Boolean)
+    },
+    getLocalizedOptionText(item = {}) {
+      const isEn = this.language === 'en'
+      const preferred = isEn
+        ? [item.descriptionEn, item.ename, item.nameEn, item.labelEn, item.valueEn, item.description, item.value, item.label, item.name, item.cname, item.code]
+        : [item.description, item.cname, item.nameZh, item.labelZh, item.valueZh, item.value, item.label, item.name, item.code]
+      const matched = preferred.map(value => String(value || '').trim()).find(Boolean)
+      return matched || ''
+    },
+    normalizeDictList(rawList = []) {
+      const list = Array.isArray(rawList) ? rawList : []
+      return list
+        .map(item => ({
+          key: item.key || item.code || '',
+          value: this.getLocalizedOptionText(item)
+        }))
+        .filter(item => item.value)
+    },
+    normalizeCountryList(rawList = []) {
+      const list = Array.isArray(rawList) ? rawList : []
+      return list
+        .map(item => ({
+          key: item.code || item.key || item.cname || '',
+          value: this.getLocalizedOptionText(item)
+        }))
+        .filter(item => item.value)
+    },
+    remapSelectedValue(currentValue, rawList = []) {
+      const normalizedCurrent = String(currentValue || '').trim()
+      if (!normalizedCurrent) {
+        return ''
+      }
+      const matched = (Array.isArray(rawList) ? rawList : []).find((item) => {
+        return this.getOptionTextCandidates(item).includes(normalizedCurrent)
+      })
+      return matched ? this.getLocalizedOptionText(matched) : normalizedCurrent
+    },
+    rebuildLocalizedOptions() {
+      this.countryOptions = this.normalizeCountryList(this.rawCountryList)
+      this.hobbyOptions = this.normalizeDictList(this.rawHobbyList)
+      this.dietaryHabitOptions = this.normalizeDictList(this.rawDietaryHabitList)
+      this.religionOptions = this.normalizeDictList(this.rawReligionList)
+      this.form.country = this.remapSelectedValue(this.form.country, this.rawCountryList)
+      this.lastForeignCountry = this.remapSelectedValue(this.lastForeignCountry, this.rawCountryList)
+      this.form.hobby = this.remapSelectedValue(this.form.hobby, this.rawHobbyList)
+      this.form.dietaryHabit = this.remapSelectedValue(this.form.dietaryHabit, this.rawDietaryHabitList)
+      this.form.religion = this.remapSelectedValue(this.form.religion, this.rawReligionList)
+      this.applyIdentityCountryRule()
+    },
+    getChinaCountryOption() {
+      return this.countryOptions.find(item => String(item.key || '').toUpperCase() === 'CHN' || this.isChinaCountry(item.value)) || null
+    },
+    applyIdentityCountryRule() {
+      if (this.isDomesticIdentity) {
+        const chinaOption = this.getChinaCountryOption()
+        this.form.country = chinaOption ? chinaOption.value : this.t('chinaText')
+        return
+      }
+      if (this.isChinaCountry(this.form.country)) {
+        this.form.country = this.lastForeignCountry || ''
+      }
+    },
+    onDictSelect(field, event) {
+      const map = {
+        dietaryHabit: this.dietaryHabitOptions,
+        hobby: this.hobbyOptions,
+        religion: this.religionOptions
+      }
+      const options = map[field] || []
+      if (!options.length) {
+        uni.showToast({
+          title: this.t('noSelectableOptions'),
+          icon: 'none'
+        })
+        return
+      }
+      const selected = options[event.detail.value]
+      this.form[field] = selected ? selected.value : ''
+    },
+    onCountryChange(event) {
+      if (this.isDomesticIdentity) return
+      if (!this.countryOptions.length) {
+        uni.showToast({
+          title: this.t('noSelectableCountry'),
+          icon: 'none'
+        })
+        return
+      }
+      const selected = this.countryOptions[event.detail.value]
+      this.form.country = selected ? selected.value : ''
+      this.lastForeignCountry = this.form.country || ''
+    },
+    uploadAttachment(field) {
+      return this.chooseImageFile()
+        .then((file) => {
+          if (!file || !file.path) return
+          uni.showLoading({
+            title: this.t('uploading')
+          })
+
+          return uploadCommonFile(file.path).then((uploadResult) => {
+            const serverValue = this.resolveUploadedValue(uploadResult, file.path)
+
+            this.form[field] = {
+              name: file.name || this.getDefaultAttachmentName(field, file.path),
+              serverValue,
+              localPath: file.path
+            }
+
+            uni.showToast({
+              title: this.t('uploadSuccess'),
+              icon: 'success'
+            })
+          })
+        })
+        .catch((error) => {
+          if (error && error.cancel) return
+          console.error('upload attachment failed', error)
+          uni.showToast({
+            title: this.t('uploadFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          uni.hideLoading()
+        })
+    },
+    chooseImageFile() {
+      return new Promise((resolve, reject) => {
+        uni.chooseImage({
+          count: 1,
+          sizeType: ['compressed'],
+          success: (res) => {
+            const filePath = res.tempFilePaths && res.tempFilePaths[0]
+            const tempFile = res.tempFiles && res.tempFiles[0]
+            resolve({
+              path: filePath,
+              name: tempFile && tempFile.name ? tempFile.name : this.getFileNameFromPath(filePath)
+            })
+          },
+          fail: (error) => {
+            if (error && /cancel/i.test(JSON.stringify(error))) {
+              reject({ cancel: true })
+              return
+            }
+            reject(error)
+          }
+        })
+      })
+    },
+    previewAttachment(field) {
+      const attachment = this.form[field]
+      const previewUrl = this.getAttachmentPreviewUrl(attachment)
+      if (!previewUrl || !this.isImageAttachment(attachment)) {
+        uni.showToast({
+          title: this.t('attachmentNotImage'),
+          icon: 'none'
+        })
+        return
+      }
+      uni.previewImage({
+        urls: [previewUrl],
+        current: previewUrl
+      })
+    },
+    getAttachmentPreviewUrl(attachment) {
+      if (!attachment) return ''
+      const candidates = [attachment.serverValue, attachment.localPath]
+      for (const item of candidates) {
+        const value = String(item || '').trim()
+        if (!value) continue
+        if (this.isLocalFileUrl(value)) {
+          return value
+        }
+        return addFilePrefix(value)
+      }
+      return ''
+    },
+    isImageAttachment(attachment) {
+      return ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].includes(this.getAttachmentExtension(attachment))
+    },
+    isLocalFileUrl(url = '') {
+      return /^(wxfile:\/\/|file:\/\/|blob:|data:image|_doc\/|\/tmp\/)/i.test(String(url || '').trim())
+    },
+    getAttachmentExtension(attachment) {
+      const candidates = [
+        attachment && attachment.name,
+        attachment && attachment.serverValue,
+        attachment && attachment.localPath
+      ]
+      const matched = candidates.find(item => String(item || '').trim())
+      if (!matched) return ''
+      const cleanValue = String(matched).split('?')[0].split('#')[0]
+      const segments = cleanValue.split('.')
+      return segments.length > 1 ? segments.pop().toLowerCase() : ''
+    },
+    submitForm() {
+      if (this.isSubmitting) return
+
+      const errorMessage = this.validateForm()
+      if (errorMessage) {
+        uni.showToast({
+          title: errorMessage,
+          icon: 'none'
+        })
+        return
+      }
+
+      this.isSubmitting = true
+      uni.showLoading({
+        title: this.t('submitting')
+      })
+
+      const authProfile = this.buildAuthProfile()
+      
+      return this.getWechatCode().then((providerValue) => {
+        const submitPayload = this.buildSubmitPayload(providerValue)
+        return submitRegistrationApplication(submitPayload)
+          .then((response) => {
+            const registrationCode = resolveRegistrationApplicationCode(response)
+  
+            clearLoginSession()
+            clearFailedRegistrationDraft()
+  
+            uni.hideLoading()
+            uni.showToast({
+              title: this.t('submitPending'),
+              icon: 'success'
+            })
+  
+            setTimeout(() => {
+              uni.redirectTo({
+                url: '/pkgAccount/auth_result/auth_result'
+              })
+            }, 800)
+          })
+          .catch((error) => {
+            console.error('submit registration application failed', error)
+            saveFailedRegistrationDraft(this.buildFailedDraft())
+            uni.hideLoading()
+            uni.showToast({
+              title: (error && (error.message || error.msg)) || this.t('submitFailed'),
+              icon: 'none'
+            })
+          })
+          .finally(() => {
+            this.isSubmitting = false
+          })
+      })
+    },
+    getWechatCode() {
+      return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
+        uni.login({
+          provider: 'weixin',
+          success: (res) => {
+            resolve(res.code || '')
+          },
+          fail: (err) => {
+            console.error('getWechatCode failed', err)
+            resolve('')
+          }
+        })
+        // #endif
+        // #ifndef MP-WEIXIN
+        resolve('')
+        // #endif
+      })
+    },
+    resolveUploadedValue(uploadResult, fallback) {
+      const candidates = [
+        uploadResult && uploadResult.data && uploadResult.data.url,
+        uploadResult && uploadResult.data && uploadResult.data.fileUrl,
+        uploadResult && uploadResult.data && uploadResult.data.path,
+        uploadResult && uploadResult.data && uploadResult.data.filePath,
+        uploadResult && uploadResult.url,
+        uploadResult && uploadResult.fileUrl,
+        uploadResult && uploadResult.path,
+        uploadResult && uploadResult.filePath,
+        typeof (uploadResult && uploadResult.data) === 'string' ? uploadResult.data : '',
+        typeof uploadResult === 'string' ? uploadResult : ''
+      ]
+      return candidates.find(item => typeof item === 'string' && item) || fallback
+    },
+    getDefaultAttachmentName(field, filePath) {
+      if (field === 'passportAttachment') return 'passport-attachment'
+      if (field === 'idCardFrontAttachment') return 'id-card-front'
+      if (field === 'idCardBackAttachment') return 'id-card-back'
+      return this.getFileNameFromPath(filePath)
+    },
+    getFileNameFromPath(filePath = '') {
+      const normalizedPath = String(filePath || '').replace(/\\/g, '/')
+      return normalizedPath.split('/').pop() || 'attachment'
+    },
+    validateForm() {
+      if (!this.form.account || !this.form.password || !this.form.email || !this.form.name) {
+        return this.t('validateRequiredBasic')
+      }
+      if (this.form.password.length < 6) {
+        return this.t('validatePasswordLength')
+      }
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.email)) {
+        return this.t('validateEmail')
+      }
+      if (this.form.gender === null || !this.form.phone || !this.form.country) {
+        return this.t('validateIdentityBasic')
+      }
+      if (!/^1\d{10}$/.test(this.form.phone)) {
+        return this.t('validatePhone')
+      }
+      if (!this.form.workUnit || this.form.hasHangzhouProperty === null) {
+        return this.t('validateProfile')
+      }
+
+      if (this.form.identityType === 'DomesticStudents') {
+        if (!this.form.idCard) {
+          return this.t('validateIdCard')
+        }
+        if (!this.form.idCardFrontAttachment.serverValue || !this.form.idCardBackAttachment.serverValue) {
+          return this.t('validateIdCardAttachments')
+        }
+        return ''
+      }
+
+      if (!this.form.passportNumber || !this.form.passportExpiry) {
+        return this.t('validatePassportBasic')
+      }
+      if (!this.form.passportAttachment.serverValue) {
+        return this.t('validatePassportAttachment')
+      }
+      if (!this.isImageAttachment(this.form.passportAttachment)) {
+        return this.t('validatePassportAttachmentImage')
+      }
+      return ''
+    },
+    buildSingleTag(text, options) {
+      if (!text) return []
+      const matched = (options || []).find(item => item.value === text)
+      if (matched) {
+        return [{ key: matched.key, value: matched.value }]
+      }
+      return [{ key: text, value: text }]
+    },
+    buildAuthProfile() {
+      return {
+        identityType: this.form.identityType,
+        account: this.form.account,
+        email: this.form.email,
+        emailVerifyCode: this.form.emailVerifyCode,
+        roleNo: this.form.identityType,
+        name: this.form.name,
+        gender: this.form.gender,
+        genderText: getGenderLabel(this.form.gender, this.form.gender === 1 ? this.t('genderMale') : this.form.gender === 0 ? this.t('genderFemale') : ''),
+        phone: this.form.phone,
+        country: this.form.country,
+        idCard: this.form.identityType === 'DomesticStudents' ? this.form.idCard : '',
+        workUnit: this.form.workUnit,
+        hasHangzhouProperty: this.form.hasHangzhouProperty,
+        dietaryHabit: this.form.dietaryHabit,
+        dietaryHabitTags: this.buildSingleTag(this.form.dietaryHabit, this.dietaryHabitOptions),
+        hobby: this.form.hobby,
+        hobbyTags: this.buildSingleTag(this.form.hobby, this.hobbyOptions),
+        passportNumber: this.form.identityType === 'ForeignStudents' ? this.form.passportNumber : '',
+        passportExpiry: this.form.identityType === 'ForeignStudents' && this.form.passportExpiry
+          ? `${this.form.passportExpiry}T00:00:00`
+          : '',
+        school: this.form.identityType === 'ForeignStudents' ? this.form.school : '',
+        religion: this.form.religion,
+        religionTags: this.buildSingleTag(this.form.religion, this.religionOptions),
+        passportAttachment: this.form.identityType === 'ForeignStudents' ? this.form.passportAttachment.serverValue : '',
+        idCardFrontAttachment: this.form.identityType === 'DomesticStudents' ? this.form.idCardFrontAttachment.serverValue : '',
+        idCardBackAttachment: this.form.identityType === 'DomesticStudents' ? this.form.idCardBackAttachment.serverValue : ''
+      }
+    },
+    buildSubmitPayload(providerValue) {
+      const profile = this.buildAuthProfile()
+      return {
+        providerValue: providerValue || null,
+        account: profile.account,
+        password: this.form.password,
+        email: profile.email,
+        emailVerifyCode: profile.emailVerifyCode || null,
+        roleNo: profile.roleNo,
+        name: profile.name,
+        gender: profile.gender,
+        phone: profile.phone,
+        country: profile.country,
+        idCard: profile.idCard || null,
+        workUnit: profile.workUnit,
+        hasHangzhouProperty: profile.hasHangzhouProperty,
+        dietaryHabitTags: profile.dietaryHabitTags.length ? profile.dietaryHabitTags : null,
+        hobbyTags: profile.hobbyTags.length ? profile.hobbyTags : null,
+        passportNumber: profile.passportNumber || null,
+        passportExpiry: profile.passportExpiry || null,
+        school: profile.school || null,
+        religionTags: profile.religionTags.length ? profile.religionTags : null,
+        passportAttachment: profile.passportAttachment || null,
+        idCardFrontAttachment: profile.idCardFrontAttachment || null,
+        idCardBackAttachment: profile.idCardBackAttachment || null
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.register-page {
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  min-height: 100vh;
+}
+
+.register-content {
+  padding: 0 24rpx 60rpx;
+}
+
+.page-header {
+  margin-top: 40rpx;
+  margin-bottom: 40rpx;
+  padding: 0 10rpx;
+}
+.page-title {
+  font-size: 56rpx;
+  letter-spacing: 2rpx;
+  color: #1A2233;
+  line-height: 1.25;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.page-desc {
+  margin-top: 16rpx;
+  line-height: 1.6;
+  color: #6A7A99;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.draft-tip-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 10rpx;
+  padding: 12rpx 18rpx;
+  border-radius: 999rpx;
+  background: rgba($brand-primary, 0.08);
+  border: 1rpx solid rgba($brand-primary, 0.12);
+}
+
+.draft-tip-icon {
+  color: $brand-primary;
+  font-size: 24rpx;
+}
+
+.draft-tip-text {
+  color: #5C6B8A;
+  font-size: 24rpx;
+  line-height: 1.4;
+}
+
+.tip-text {
+  margin-top: 12rpx;
+  color: #5C6B8A;
+  line-height: 1.6;
+  font-size: 24rpx;
+}
+
+/* 卡片式表单 */
+.form-card {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 40rpx 32rpx;
+  margin-bottom: 30rpx;
+  border: 1rpx solid rgba($brand-primary, 0.05);
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+}
+
+.section-title {
+  margin-bottom: 36rpx;
+  display: flex;
+  align-items: center;
+  color: #1A2233;
+  font-size: 32rpx;
+}
+
+.title-indicator {
+  width: 8rpx;
+  height: 32rpx;
+  background-color: $brand-primary;
+  border-radius: 4rpx;
+  margin-right: 16rpx;
+}
+
+.form-item {
+  margin-bottom: 36rpx;
+}
+
+/* 表单元素 */
+.form-label {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #1A2233;
+  margin-bottom: 20rpx;
+}
+
+.required-mark {
+  color: #FF4D4F;
+  margin-left: 6rpx;
+  font-weight: normal;
+}
+
+.form-input {
+  background-color: #FFFFFF;
+  height: 96rpx;
+  border-radius: 20rpx;
+  padding: 0 32rpx;
+  font-size: 28rpx;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+  color: #1A2233;
+}
+
+.form-input:focus {
+  border: 1rpx solid $brand-primary;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 0 6rpx rgba($brand-primary, 0.1);
+}
+
+.input-placeholder {
+  color: #A0B0C0;
+}
+
+.picker-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.picker-input-disabled {
+  background-color: #F7F9FC;
+  color: #6A7A99;
+}
+
+.picker-fixed-text {
+  color: #8A99B3;
+  font-size: 24rpx;
+}
+
+.text-black {
+  color: #1A2233;
+}
+
+.text-gray {
+  color: #A0B0C0;
+}
+
+/* 双标签切换 */
+.role-switch-wrap {
+  margin-bottom: 36rpx;
+}
+.role-switch {
+  background-color: rgba($brand-primary, 0.05);
+  border-radius: 24rpx;
+  padding: 10rpx;
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+.role-tab {
+  border-radius: 18rpx;
+  color: #6A7A99;
+  padding: 18rpx 0;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-align: center;
+  font-weight: bold;
+  font-size: 28rpx;
+}
+.role-active {
+  background-color: #FFFFFF;
+  color: $brand-primary;
+  box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.15);
+}
+
+/* 性别按钮 */
+.gender-btn {
+  background-color: #FFFFFF;
+  height: 96rpx;
+  line-height: 96rpx;
+  border-radius: 20rpx;
+  font-size: 28rpx;
+  color: #6A7A99;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  transition: all 0.2s;
+  text-align: center;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+}
+.gender-active {
+  background-color: #FFFFFF;
+  border-color: $brand-primary;
+  color: $brand-primary;
+  font-weight: bold;
+  box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.1);
+}
+
+/* 标签 */
+.tag-item {
+  display: inline-block;
+  background-color: #FFFFFF;
+  padding: 16rpx 36rpx;
+  border-radius: 40rpx;
+  font-size: 26rpx;
+  color: #6A7A99;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+  transition: all 0.2s;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+}
+.tag-active {
+  background-color: #FFFFFF;
+  border: 1rpx solid $brand-primary;
+  color: $brand-primary;
+  font-weight: bold;
+  box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.1);
+}
+
+/* 附件上传框 */
+.upload-box {
+  background-color: #FFFFFF;
+  border: 1rpx dashed rgba($brand-primary, 0.4);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+  border-radius: 24rpx;
+  min-height: 240rpx;
+  padding: 32rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.upload-box:active {
+  background-color: rgba($brand-primary, 0.02);
+  border: 1rpx dashed rgba($brand-primary, 0.6);
+}
+
+.upload-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.upload-icon-wrap {
+  width: 88rpx;
+  height: 88rpx;
+  background-color: #FFFFFF;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.1);
+  color: $brand-primary;
+  font-size: 40rpx;
+}
+
+.upload-text {
+  color: #6A7A99;
+  font-size: 26rpx;
+}
+
+.attachment-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.success-icon {
+  font-size: 64rpx;
+  color: $brand-primary;
+  margin-bottom: 16rpx;
+}
+
+.attachment-name {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #1A2233;
+  max-width: 400rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.attachment-type {
+  color: #8A99B3;
+  font-size: 24rpx;
+}
+
+.attachment-file-card {
+  background-color: #FFFFFF;
+  border: 1rpx solid rgba($brand-primary, 0.12);
+  box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.06);
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+
+.attachment-preview-image,
+.attachment-file-cover {
+  width: 100%;
+  height: 320rpx;
+  display: block;
+}
+
+.attachment-file-cover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.14) 0%, rgba($brand-primary, 0.06) 100%);
+}
+
+.attachment-file-cover.is-unsupported {
+  color: $brand-primary;
+}
+
+.attachment-file-ext {
+  font-size: 56rpx;
+  font-weight: bold;
+  letter-spacing: 4rpx;
+}
+
+.attachment-file-info {
+  padding: 24rpx 24rpx 12rpx;
+}
+
+.attachment-action-row {
+  display: flex;
+  padding: 0 24rpx 24rpx;
+}
+
+.attachment-action-btn {
+  flex: 1;
+  height: 76rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  font-weight: bold;
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.08);
+  border: 1rpx solid rgba($brand-primary, 0.12);
+}
+
+.attachment-action-btn + .attachment-action-btn {
+  margin-left: 16rpx;
+}
+
+.attachment-action-btn.is-primary {
+  color: #FFFFFF;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.92) 0%, $brand-primary 100%);
+  border-color: transparent;
+}
+
+/* 动画 */
+.animation-fade-in {
+  opacity: 0;
+  animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(30rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 自定义按钮样式 */
+.custom-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100rpx;
+  padding: 12rpx 36rpx;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.submit-btn {
+  width: 100%;
+  height: 100rpx;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+}
+.custom-btn:active {
+  transform: scale(0.96);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.2);
+}
+.btn-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+}
+
+.btn-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+  box-shadow: none;
+}
+
+.secondary-entry-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 28rpx 32rpx;
+  border: 1rpx solid rgba($brand-primary, 0.12);
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.05);
+}
+
+.secondary-entry-card:active {
+  transform: scale(0.98);
+}
+
+.secondary-entry-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1A2233;
+  line-height: 1.35;
+}
+
+.secondary-entry-desc {
+  font-size: 24rpx;
+  color: #6A7A99;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.secondary-entry-arrow {
+  color: $brand-primary;
+  font-size: 28rpx;
+}
+
+.login-link {
+  padding: 10rpx;
+}
+.login-link:active {
+  opacity: 0.7;
+}
+</style>
diff --git a/pkgAccount/registration_records/registration_records.vue b/pkgAccount/registration_records/registration_records.vue
new file mode 100644
index 0000000..2e6ca46
--- /dev/null
+++ b/pkgAccount/registration_records/registration_records.vue
@@ -0,0 +1,480 @@
+<template>
+  <view class="registration-records-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-main tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '48rpx' }">
+      <scroll-view class="filter-scroll" scroll-x :show-scrollbar="false">
+        <view class="filter-row tn-margin-bottom-lg">
+          <view
+            v-for="item in statusOptions"
+            :key="item.value"
+            class="filter-chip"
+            :class="{ 'filter-chip--active': approvalStatus === item.value }"
+            @click="changeStatus(item.value)"
+          >
+            {{ item.label }}
+          </view>
+        </view>
+      </scroll-view>
+
+      <view v-if="providerUnavailable" class="empty-panel tn-padding-lg">
+        <view class="empty-title">{{ t('providerUnavailableTitle') }}</view>
+        <view class="empty-desc tn-margin-top-sm">{{ t('providerUnavailableDesc') }}</view>
+      </view>
+
+      <view v-else-if="list.length">
+        <view
+          v-for="item in list"
+          :key="getRecordKey(item)"
+          class="record-card tn-margin-bottom-lg"
+          @click="goToRecordDetail(item)"
+        >
+          <view class="card-head tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="card-title-wrap">
+              <view class="card-title">{{ item.name || item.account || t('registrationFallbackTitle') }}</view>
+              <view class="card-code tn-margin-top-xs">{{ item.code || '--' }}</view>
+            </view>
+            <view :class="['status-badge', 'status-' + resolveStatusType(item.approvalStatus)]">
+              {{ getDisplayStatusText(item) }}
+            </view>
+          </view>
+
+          <view class="card-body tn-margin-top">
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('accountLabel') }}</text>
+              <text class="info-value">{{ item.account || '--' }}</text>
+            </view>
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('phoneLabel') }}</text>
+              <text class="info-value">{{ item.phone || '--' }}</text>
+            </view>
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('idNumberLabel') }}</text>
+              <text class="info-value">{{ item.idCard || item.passportNumber || '--' }}</text>
+            </view>
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('submittedAtLabel') }}</text>
+              <text class="info-value">{{ formatDateTime(item.createTime) }}</text>
+            </view>
+            <view v-if="item.approveTime" class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('approvedAtLabel') }}</text>
+              <text class="info-value">{{ formatDateTime(item.approveTime) }}</text>
+            </view>
+            <view v-if="item.approveReason" class="remark-panel tn-margin-top">
+              <view class="remark-label">{{ item.approvalStatus === -1 ? t('rejectReasonLabel') : t('approvalRemarkLabel') }}</view>
+              <view class="remark-text tn-margin-top-xs">{{ item.approveReason }}</view>
+            </view>
+          </view>
+        </view>
+
+        <view class="load-state">
+          <text v-if="loadingMore">{{ t('loadingMore') }}</text>
+          <text v-else-if="!hasMore">{{ t('noMore') }}</text>
+          <text v-else>{{ t('pullUpMore') }}</text>
+        </view>
+      </view>
+
+      <view v-else-if="!loading" class="empty-panel tn-padding-lg">
+        <view class="empty-title">{{ t('emptyTitle') }}</view>
+        <view class="empty-desc tn-margin-top-sm">{{ t('emptyDesc') }}</view>
+        <view class="action-btn tn-margin-top-lg" @click="goToRegister">
+          <text class="tn-text-bold">{{ t('goRegister') }}</text>
+        </view>
+      </view>
+
+      <view v-if="loading && !list.length && !providerUnavailable" class="empty-panel tn-padding-lg">
+        <view class="empty-title">{{ t('loadingTitle') }}</view>
+        <view class="empty-desc tn-margin-top-sm">{{ t('loadingDesc') }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { registrationApplicationMePage } from '@/api/index.js'
+
+function formatPageResponse(response) {
+  const payload = response && response.data ? response.data : response
+  return payload && typeof payload === 'object' ? payload : {}
+}
+
+function normalizeRecordList(list = []) {
+  if (!Array.isArray(list)) {
+    return []
+  }
+  return list.filter(item => item && typeof item === 'object')
+}
+
+export default {
+  data() {
+    return {
+      providerValue: '',
+      providerUnavailable: false,
+      approvalStatus: '',
+      pageIndex: 1,
+      pageSize: 10,
+      total: 0,
+      list: [],
+      loading: false,
+      loadingMore: false,
+      hasMore: true,
+      statusOptions: []
+    }
+  },
+  created() {
+    this.syncStatusOptions()
+    this.syncNavigationTitle()
+  },
+  onShow() {
+    this.syncNavigationTitle()
+    this.reloadList()
+  },
+  onPullDownRefresh() {
+    this.reloadList().finally(() => {
+      uni.stopPullDownRefresh()
+    })
+  },
+  onReachBottom() {
+    this.loadMore()
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    }
+  },
+  watch: {
+    language() {
+      this.syncNavigationTitle()
+      this.syncStatusOptions()
+      this.reloadList()
+    }
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgAccount.registration_records', key, params)
+    },
+    syncStatusOptions() {
+      this.statusOptions = [
+        { label: this.t('statusAll'), value: '' },
+        { label: this.t('statusPending'), value: 0 },
+        { label: this.t('statusApproved'), value: 1 },
+        { label: this.t('statusRejected'), value: -1 }
+      ]
+    },
+    syncNavigationTitle() {
+      this.$syncNavigationTitle()
+    },
+    getWechatCode() {
+      return new Promise((resolve) => {
+        // #ifdef MP-WEIXIN
+        uni.login({
+          provider: 'weixin',
+          success: (res) => {
+            resolve(res.code || '')
+          },
+          fail: (err) => {
+            console.error('getWechatCode failed', err)
+            resolve('')
+          }
+        })
+        // #endif
+        // #ifndef MP-WEIXIN
+        resolve('')
+        // #endif
+      })
+    },
+    getStatusText(status) {
+      const map = {
+        0: this.t('statusPending'),
+        1: this.t('statusApproved'),
+        '-1': this.t('statusRejected')
+      }
+      return map[status] || this.t('statusProcessing')
+    },
+    getDisplayStatusText(item = {}) {
+      if (this.language !== 'en' && item.approvalStatusDesc) {
+        return item.approvalStatusDesc
+      }
+      return this.getStatusText(item.approvalStatus)
+    },
+    resolveStatusType(status) {
+      if (Number(status) === 1) {
+        return 'approved'
+      }
+      if (Number(status) === -1) {
+        return 'rejected'
+      }
+      return 'pending'
+    },
+    formatDateTime(value) {
+      if (!value) {
+        return '--'
+      }
+      const text = String(value).replace('T', ' ')
+      return text.length > 16 ? text.slice(0, 16) : text
+    },
+    getRecordKey(item = {}) {
+      return item.code || `${item.account || 'registration'}-${item.createTime || ''}`
+    },
+    buildRecordRoutePayload(item = {}) {
+      return {
+        code: item.code || '',
+        account: item.account || '',
+        name: item.name || '',
+        gender: typeof item.gender === 'number' ? item.gender : null,
+        genderDesc: item.genderDesc || '',
+        email: item.email || '',
+        phone: item.phone || '',
+        country: item.country || '',
+        idCard: item.idCard || '',
+        workUnit: item.workUnit || '',
+        passportNumber: item.passportNumber || '',
+        school: item.school || '',
+        hobbyTags: item.hobbyTags || [],
+        approvalStatus: typeof item.approvalStatus === 'number' ? item.approvalStatus : undefined,
+        approvalStatusDesc: item.approvalStatusDesc || '',
+        approveReason: item.approveReason || '',
+        approveTime: item.approveTime || '',
+        createTime: item.createTime || ''
+      }
+    },
+    async ensureProviderValue() {
+      const providerValue = await this.getWechatCode()
+      this.providerValue = providerValue || ''
+      this.providerUnavailable = !this.providerValue
+      return this.providerValue
+    },
+    async reloadList() {
+      this.pageIndex = 1
+      this.hasMore = true
+      this.list = []
+
+      const providerValue = await this.ensureProviderValue()
+      if (!providerValue) {
+        this.total = 0
+        return
+      }
+
+      await this.fetchList(true)
+    },
+    async loadMore() {
+      if (!this.hasMore || this.loading || this.loadingMore || this.providerUnavailable) {
+        return
+      }
+      this.pageIndex += 1
+      await this.fetchList(false)
+    },
+    async fetchList(isReload = false) {
+      if (!this.providerValue) {
+        return
+      }
+
+      if (isReload) {
+        this.loading = true
+      } else {
+        this.loadingMore = true
+      }
+
+      const params = {
+        ProviderValue: this.providerValue,
+        PageIndex: this.pageIndex,
+        PageSize: this.pageSize
+      }
+      if (this.approvalStatus !== '' && this.approvalStatus !== null && typeof this.approvalStatus !== 'undefined') {
+        params.ApprovalStatus = this.approvalStatus
+      }
+
+      await registrationApplicationMePage(params, this.language)
+        .then((response) => {
+          const pageData = formatPageResponse(response)
+          const nextList = normalizeRecordList(pageData.data || [])
+          const total = Number(pageData.total || 0)
+
+          this.total = total
+          this.list = isReload ? nextList : this.list.concat(nextList)
+          this.hasMore = this.list.length < total && nextList.length > 0
+        })
+        .catch((error) => {
+          if (!isReload) {
+            this.pageIndex = Math.max(1, this.pageIndex - 1)
+          }
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('loadError'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.loading = false
+          this.loadingMore = false
+        })
+    },
+    changeStatus(value) {
+      if (this.approvalStatus === value) {
+        return
+      }
+      this.approvalStatus = value
+      this.reloadList()
+    },
+    goToRecordDetail(item = {}) {
+      const code = item.code || ''
+      const payload = this.buildRecordRoutePayload(item)
+      uni.navigateTo({
+        url: `/pkgAccount/auth_result/auth_result?from=registration-records&code=${encodeURIComponent(code)}&payload=${encodeURIComponent(JSON.stringify(payload))}`
+      })
+    },
+    goToRegister() {
+      uni.navigateTo({
+        url: '/pkgAccount/register/register'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.registration-records-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+}
+
+.record-card,
+.empty-panel {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba($brand-primary, 0.05);
+}
+.record-card:active {
+  transform: scale(0.99);
+}
+
+.empty-title,
+.card-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1A2233;
+}
+
+.empty-desc,
+.card-code,
+.info-label,
+.remark-label,
+.load-state {
+  color: #6A7A99;
+}
+
+.filter-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.filter-row {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 16rpx;
+  padding: 4rpx;
+}
+
+.filter-chip {
+  flex-shrink: 0;
+  padding: 14rpx 28rpx;
+  border-radius: 999rpx;
+  background: #FFFFFF;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  color: #6A7A99;
+  font-size: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+  transition: all 0.2s;
+}
+
+.filter-chip--active {
+  background: #FFFFFF;
+  border-color: $brand-primary;
+  color: $brand-primary;
+  font-weight: bold;
+  box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.1);
+}
+
+.card-code {
+  font-size: 22rpx;
+}
+
+.status-badge {
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.status-pending {
+  background: rgba(245, 158, 11, 0.12);
+  color: #B45309;
+}
+
+.status-approved {
+  background: rgba($brand-primary, 0.12);
+  color: $brand-primary;
+}
+
+.status-rejected {
+  background: rgba(239, 68, 68, 0.12);
+  color: #B91C1C;
+}
+
+.info-row {
+  padding: 16rpx 0;
+  border-bottom: 1px dashed rgba($brand-primary, 0.15);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-value {
+  max-width: 62%;
+  text-align: right;
+  color: #1A2233;
+  font-weight: 500;
+}
+
+.remark-panel {
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: rgba($brand-primary, 0.02);
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+
+.remark-text {
+  color: #1A2233;
+  line-height: 1.6;
+}
+
+.action-btn {
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999rpx;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #FFFFFF;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+}
+
+.load-state {
+  text-align: center;
+  font-size: 24rpx;
+  padding: 12rpx 0 24rpx;
+}
+
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+</style>
diff --git a/pkgBooking/book/book.vue b/pkgBooking/book/book.vue
new file mode 100644
index 0000000..598c8d8
--- /dev/null
+++ b/pkgBooking/book/book.vue
@@ -0,0 +1,354 @@
+<template>
+  <view class="book-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="#F8F9FA">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('title') }}</view>
+    </tn-nav-bar>
+
+    <view class="book-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '180rpx'}">
+      
+      <!-- 选中的房源卡片 (Room Preview) -->
+      <view v-if="applyData" class="room-preview-card tn-margin-bottom-xl tn-margin-top-sm tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
+        <view class="preview-img-box">
+          <image :src="applyData.image" mode="aspectFit" class="preview-img"></image>
+        </view>
+        <view class="preview-info tn-flex-1 tn-margin-left tn-flex tn-flex-direction-column tn-flex-row-between">
+          <view>
+            <view class="tn-text-sm tn-color-gray">{{ t('bookingFor') }}</view>
+            <view class="tn-text-bold tn-text-lg tn-color-black tn-margin-top-xs clamp-text-2">
+              {{ displayStyleName }}
+            </view>
+            <view v-if="applyData.roomTypeName || applyData.roomTypeNameEn" class="tn-color-gray tn-text-xs tn-margin-top-xs">
+              {{ displayRoomTypeLine }}
+            </view>
+          </view>
+          <view class="tn-flex tn-flex-row-between tn-flex-col-bottom tn-margin-top-sm">
+            <view class="room-tag tn-text-xs tn-text-bold">{{ displayLocationText }}</view>
+            <view class="tn-color-black tn-text tn-text-bold">
+              <text class="tn-text-sm tn-color-gray tn-margin-right-xs">{{ t('deposit') }}</text>$500.00
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 填写日期表单 -->
+      <view class="form-section tn-margin-bottom-xl tn-padding-lg form-card">
+        <view class="section-title tn-text-bold tn-text-xl tn-margin-bottom-xs">{{ t('checkInDate') }}</view>
+        <view class="tn-color-gray tn-text-sm tn-margin-bottom-lg">{{ t('checkInDesc') }}</view>
+        
+        <view class="form-item tn-margin-bottom-lg">
+          <view class="form-label tn-text-bold">{{ t('startDate') }}</view>
+          <picker mode="date" @change="onStartDateChange">
+            <view class="form-input tn-flex tn-flex-row-between tn-flex-col-center">
+              <text :class="form.startDate ? 'tn-color-black tn-text-bold' : 'tn-color-gray'">
+                {{ form.startDate ? form.startDate : t('selectDate') }}
+              </text>
+              <text class="tn-icon-calendar tn-color-black tn-text-xl"></text>
+            </view>
+          </picker>
+        </view>
+
+        <view class="form-item tn-margin-bottom-sm">
+          <view class="form-label tn-text-bold">{{ t('endDate') }}</view>
+          <picker mode="date" @change="onEndDateChange" :start="form.startDate">
+            <view class="form-input tn-flex tn-flex-row-between tn-flex-col-center">
+              <text :class="form.endDate ? 'tn-color-black tn-text-bold' : 'tn-color-gray'">
+                {{ form.endDate ? form.endDate : t('selectDate') }}
+              </text>
+              <text class="tn-icon-calendar tn-color-black tn-text-xl"></text>
+            </view>
+          </picker>
+        </view>
+
+        <view v-if="stayNights > 0" class="tn-margin-top-lg booking-summary">
+          <view class="summary-row tn-flex tn-flex-row-between">
+            <text class="tn-color-gray">{{ t('stayNights') }}</text>
+            <text class="tn-text-bold tn-color-black">{{ stayNights }} {{ t('nightUnit') }}</text>
+          </view>
+          <view class="summary-row tn-flex tn-flex-row-between tn-margin-top-sm">
+            <text class="tn-color-gray">{{ t('bookingStatus') }}</text>
+            <text class="tn-text-bold tn-color-black">{{ t('pendingPayment') }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部固定按钮区 -->
+    <view class="fixed-bottom-btn-area tn-flex tn-flex-row-between tn-flex-col-center">
+      <view class="tn-flex tn-flex-direction-column">
+        <view class="tn-text-sm tn-color-gray">{{ t('deposit') }}</view>
+        <view class="tn-text-bold tn-text-xl" style="color: $brand-primary;">$500.00</view>
+      </view>
+      <view class="custom-btn btn-dark" style="width: 60%; height: 100rpx;" @click="submitBooking" :class="{ 'btn-disabled': isSubmitting }">
+        <text class="tn-text-bold tn-text-lg">{{ isSubmitting ? (language === 'zh' ? '处理中...' : 'Processing...') : t('submitOrder') }}</text>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+import { compactEnglishText } from '../../utils/select-room-normalizers'
+
+export default {
+  data() {
+    return {
+      isSubmitting: false,
+      applyData: null,
+      form: {
+        startDate: '',
+        endDate: ''
+      },
+      i18n: {
+        zh: {
+          title: '预订确认',
+          bookingFor: '你正在预约',
+          deposit: '定金',
+          checkInDate: '填写预订时间',
+          checkInDesc: '支付后会先生成预定单并进入审核，不会直接占用房间资源。',
+          startDate: '入住日期 (Check-in)',
+          endDate: '离开日期 (Check-out)',
+          selectDate: '请选择日期',
+          submitOrder: '进入支付页',
+          stayNights: '入住晚数',
+          nightUnit: '晚',
+          bookingStatus: '当前状态',
+          pendingPayment: '待支付定金',
+          roomTypeLabel: '房型：'
+        },
+        en: {
+          title: 'Booking Confirm',
+          bookingFor: 'Booking For',
+          deposit: 'Deposit',
+          checkInDate: 'Booking Period',
+          checkInDesc: 'Payment will create a booking order first, without occupying room inventory.',
+          startDate: 'Check-in Date',
+          endDate: 'Check-out Date',
+          selectDate: 'Select Date',
+          submitOrder: 'Go To Payment',
+          stayNights: 'Stay Nights',
+          nightUnit: 'nights',
+          bookingStatus: 'Status',
+          pendingPayment: 'Deposit Pending',
+          roomTypeLabel: 'Room Type: '
+        }
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    displayStyleName() {
+      if (!this.applyData) {
+        return ''
+      }
+      return this.language === 'en'
+        ? (this.applyData.styleNameEnDisplay || compactEnglishText(this.applyData.styleNameEn || this.applyData.styleNameZh || '', 24))
+        : (this.applyData.styleNameZh || this.applyData.styleNameEn || '')
+    },
+    displayRoomTypeLine() {
+      if (!this.applyData) {
+        return ''
+      }
+      const roomTypeText = this.language === 'en'
+        ? (this.applyData.roomTypeNameEnDisplay || compactEnglishText(this.applyData.roomTypeNameEn || this.applyData.roomTypeName || '', 22))
+        : (this.applyData.roomTypeName || this.applyData.roomTypeNameEn || '')
+      const areaText = this.language === 'en'
+        ? (this.applyData.roomAreaEnDisplay || compactEnglishText(this.applyData.roomAreaEn || this.applyData.roomArea || '', 28))
+        : (this.applyData.roomArea || this.applyData.roomAreaEn || '')
+      return [roomTypeText ? `${this.t('roomTypeLabel')}${roomTypeText}` : '', areaText].filter(Boolean).join(' | ')
+    },
+    displayLocationText() {
+      if (!this.applyData) {
+        return ''
+      }
+      const buildingText = this.language === 'en'
+        ? (this.applyData.buildingEnDisplay || compactEnglishText(this.applyData.buildingEn || this.applyData.building || '', 18))
+        : (this.applyData.building || this.applyData.buildingEn || '')
+      const floorText = this.language === 'en'
+        ? (this.applyData.floorEnDisplay || compactEnglishText(this.applyData.floorEn || this.applyData.floor || '', 12))
+        : (this.applyData.floor || this.applyData.floorEn || '')
+      return [buildingText, floorText].filter(Boolean).join(' - ')
+    },
+    stayNights() {
+      if (!this.form.startDate || !this.form.endDate) {
+        return 0
+      }
+      const start = new Date(this.form.startDate).getTime()
+      const end = new Date(this.form.endDate).getTime()
+      if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
+        return 0
+      }
+      return Math.ceil((end - start) / (24 * 60 * 60 * 1000))
+    }
+  },
+  onLoad(options) {
+    if (options.applyData) {
+      Promise.resolve(options.applyData)
+        .then(decodeURIComponent)
+        .then(JSON.parse)
+        .then((data) => {
+          this.applyData = data && typeof data === 'object' ? data : {}
+        })
+        .catch((e) => {
+          console.error('Failed to parse apply data', e);
+        })
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgBooking.book.book', key)
+    },
+    onStartDateChange(e) {
+      this.form.startDate = e.detail.value;
+    },
+    onEndDateChange(e) {
+      this.form.endDate = e.detail.value;
+    },
+    submitBooking() {
+      if (this.isSubmitting) return;
+      if (!this.form.startDate || !this.form.endDate) {
+        uni.showToast({ title: this.language === 'zh' ? '请选择入住与离开日期' : 'Please select check-in and check-out dates', icon: 'none' });
+        return;
+      }
+      if (new Date(this.form.endDate).getTime() <= new Date(this.form.startDate).getTime()) {
+        uni.showToast({ title: this.language === 'zh' ? '离开日期需晚于入住日期' : 'Check-out must be later than check-in', icon: 'none' });
+        return;
+      }
+      
+      this.isSubmitting = true;
+      const orderData = {
+        ...this.applyData,
+        startDate: this.form.startDate,
+        endDate: this.form.endDate,
+        stayNights: this.stayNights,
+        sourceType: 'booking-intent'
+      };
+      
+      let roomDataStr = encodeURIComponent(JSON.stringify(orderData));
+      
+      uni.showLoading({ title: this.language === 'zh' ? '正在生成订单...' : 'Creating Order...' });
+      setTimeout(() => {
+        uni.hideLoading();
+        this.isSubmitting = false;
+        uni.redirectTo({
+          url: `/pkgBooking/pay/pay?roomData=${roomDataStr}`
+        });
+      }, 1000);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.book-page {
+  background-color: #F8F9FA;
+  min-height: 100vh;
+}
+
+/* 选中的房源卡片预览 */
+.room-preview-card {
+  background-color: #FFFFFF;
+  border-radius: 32rpx;
+  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.03);
+  border: 2rpx solid transparent;
+  transition: all 0.3s;
+}
+.room-preview-card:hover {
+  border-color: rgba($brand-primary-rgb, 0.3);
+  box-shadow: 0 16rpx 50rpx rgba($brand-primary-rgb, 0.08);
+}
+.preview-img-box {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.05);
+}
+.preview-img {
+  width: 100%;
+  height: 100%;
+}
+.preview-info {
+  height: 150rpx;
+}
+.room-tag {
+  background-color: #FAFFEB;
+  color: #557A2B;
+  padding: 6rpx 20rpx;
+  border-radius: 16rpx;
+}
+.clamp-text-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 表单区域 */
+.form-card {
+  background-color: #FFFFFF;
+  border-radius: 32rpx;
+  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.03);
+}
+.form-label {
+  font-size: 28rpx;
+  color: #333333;
+  margin-bottom: 16rpx;
+}
+.form-input {
+  background-color: #F8F9FA;
+  height: 100rpx;
+  border-radius: 20rpx;
+  padding: 0 36rpx;
+  font-size: 30rpx;
+  border: 2rpx solid transparent;
+  transition: all 0.2s;
+}
+.form-input:active {
+  border-color: rgba($brand-primary-rgb, 0.5);
+  background-color: #FAFFEB;
+}
+
+.booking-summary {
+  padding: 24rpx 28rpx;
+  border-radius: 24rpx;
+  background: #F8F9FA;
+}
+
+/* 底部固定按钮区 */
+.fixed-bottom-btn-area {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #FFFFFF;
+  box-shadow: 0 -10rpx 40rpx rgba(0,0,0,0.04);
+  padding: 30rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
+  z-index: 999;
+}
+
+/* 自定义按钮样式 */
+.custom-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100rpx;
+  padding: 12rpx 36rpx;
+  transition: all 0.2s;
+  box-shadow: 0 10rpx 30rpx rgba(34, 34, 34, 0.2);
+}
+.custom-btn:active {
+  transform: scale(0.95);
+}
+.btn-dark {
+  background-color: #222222;
+  color: $brand-primary;
+}
+.btn-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>
diff --git a/pkgBooking/book_viewing/book_viewing.vue b/pkgBooking/book_viewing/book_viewing.vue
new file mode 100644
index 0000000..8fa9d9e
--- /dev/null
+++ b/pkgBooking/book_viewing/book_viewing.vue
@@ -0,0 +1,705 @@
+<template>
+  <view class="book-viewing-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :backTitle="t('backTitle')" backgroundColor="#F0F6FF" :bottomShadow="false" :fixed="true">
+      <view class="nav-title">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="content-wrapper" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
+      
+      <!-- 房型/区域信息 -->
+      <view class="info-card tn-flex tn-flex-row-between tn-flex-col-center" v-if="displayInfoTitle">
+        <view class="info-left">
+          <view class="info-title">{{ displayInfoTitle }}</view>
+          <view class="info-desc">{{ displayInfoDesc }}</view>
+        </view>
+        <view class="info-icon">
+          <text class="tn-icon-company"></text>
+        </view>
+      </view>
+
+      <!-- 看房时间卡片 -->
+      <view class="form-card">
+        <view class="card-header tn-flex tn-flex-row-between tn-flex-col-bottom">
+          <view class="header-left tn-flex tn-flex-col-bottom">
+            <text class="card-title">{{ t('selectViewingTime') }}</text>
+            <text class="card-subtitle">{{ t('selectViewingTimeDesc') }}</text>
+          </view>
+        </view>
+        
+        <scroll-view class="date-scroll" scroll-x :show-scrollbar="false">
+          <view class="date-flex">
+            <view
+              v-for="(item, index) in dateList"
+              :key="index"
+              class="date-item tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
+              :class="{ 'date-item--active': currentDateIndex === index }"
+              @click="selectDate(index)"
+            >
+              <text class="date-week">{{ item.week }}</text>
+              <text class="date-day">{{ item.label }}</text>
+            </view>
+          </view>
+        </scroll-view>
+
+        <view class="time-grid">
+          <view
+            v-for="(item, index) in timeSlots"
+            :key="index"
+            class="time-slot"
+            :class="{ 'time-slot--active': currentTimeIndex === index }"
+            @click="selectTimeSlot(index)"
+          >
+            {{ item }}
+          </view>
+        </view>
+      </view>
+
+      <!-- 租住需求卡片 -->
+      <view class="form-card">
+        <view class="card-header">
+          <view class="header-left tn-flex tn-flex-col-bottom">
+            <text class="card-title">{{ t('rentalNeeds') }}</text>
+            <text class="card-subtitle">{{ t('rentalNeedsDesc') }}</text>
+          </view>
+        </view>
+
+        <view class="field-item">
+          <view class="field-label">{{ t('durationLabel') }}</view>
+          <view class="tag-grid">
+            <view
+              v-for="(item, index) in durationOptions"
+              :key="index"
+              class="tag-item"
+              :class="{ 'tag-item--active': formData.duration === item }"
+              @click="selectDuration(item)"
+            >
+              {{ item }}
+            </view>
+          </view>
+        </view>
+
+        <view class="field-item">
+          <view class="field-label">{{ t('budgetLabel') }}</view>
+          <view class="input-box tn-flex tn-flex-col-center">
+            <text class="tn-icon-money input-icon"></text>
+            <input
+              class="custom-input"
+              v-model="formData.budget"
+              type="digit"
+              :placeholder="t('budgetPlaceholder')"
+              placeholder-style="color: #A1B0C4;"
+            />
+          </view>
+        </view>
+
+        <view class="field-item">
+          <view class="field-label">{{ t('workplaceLabel') }}</view>
+          <view class="input-box tn-flex tn-flex-col-center">
+            <text class="tn-icon-location input-icon"></text>
+            <input
+              class="custom-input"
+              v-model="formData.workplace"
+              type="text"
+              :placeholder="t('workplacePlaceholder')"
+              placeholder-style="color: #A1B0C4;"
+            />
+          </view>
+        </view>
+      </view>
+
+    </view>
+
+    <!-- 底部操作区 -->
+    <view class="footer-bar tn-safe-area-inset-bottom">
+      <view class="submit-btn" @click="handleSubmit">
+        <text>{{ t('submitBooking') }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { submitApplicationForm } from '@/api/index.js'
+import { compactEnglishText, localizePayMethodText } from '../../utils/select-room-normalizers'
+
+function buildViewingDateTime(date = '', time = '', isEnd = false) {
+  if (!date || !time) {
+    return null
+  }
+  const range = String(time).split('-')
+  const selected = isEnd ? range[1] : range[0]
+  if (!selected) {
+    return null
+  }
+  return `${date}T${selected}:00`
+}
+
+export default {
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    displayInfoTitle() {
+      if (!this.sourceData) {
+        return ''
+      }
+      if (this.language === 'en') {
+        return this.sourceData.roomTypeNameEnDisplay
+          || this.sourceData.roomNameEnDisplay
+          || compactEnglishText(this.sourceData.roomTypeNameEn || this.sourceData.roomNameEn || this.sourceData.bannerTitleEn || this.sourceData.bannerTitle || this.sourceData.areaLabelEn || this.sourceData.areaLabel || this.sourceData.areaNameEn || this.sourceData.areaName || '', 24)
+      }
+      return this.sourceData.roomTypeName || this.sourceData.roomName || this.sourceData.bannerTitle || this.sourceData.areaLabel || this.sourceData.areaName || ''
+    },
+    displayInfoDesc() {
+      if (!this.sourceData) {
+        return this.t('defaultInfoDesc')
+      }
+      const bannerCopy = this.language === 'en'
+        ? compactEnglishText(this.sourceData.bannerSubtitleEn || this.sourceData.bannerDescEn || this.sourceData.bannerSubtitle || this.sourceData.bannerDesc || '', 48)
+        : (this.sourceData.bannerSubtitle || this.sourceData.bannerDesc || this.sourceData.bannerSubtitleEn || this.sourceData.bannerDescEn || '')
+      const areaLabel = this.language === 'en'
+        ? (this.sourceData.areaLabelEnDisplay || this.sourceData.areaNameEnDisplay || compactEnglishText(this.sourceData.areaLabelEn || this.sourceData.areaLabel || this.sourceData.areaNameEn || this.sourceData.areaName || '', 26))
+        : (this.sourceData.areaLabel || this.sourceData.areaName || this.sourceData.areaLabelEn || this.sourceData.areaNameEn || '')
+      const meta = [bannerCopy, areaLabel, localizePayMethodText(this.sourceData.payMethod, this.language)].filter(Boolean).join(' · ')
+      return meta || this.t('defaultInfoDesc')
+    }
+  },
+  data() {
+    return {
+      dateList: [],
+      timeSlots: [
+        '10:00-11:00', '11:00-12:00', '12:00-13:00',
+        '13:00-14:00', '14:00-15:00', '15:00-16:00',
+        '16:00-17:00', '17:00-18:00', '18:00-19:00',
+        '19:00-20:00'
+      ],
+      durationOptions: [],
+      currentDateIndex: 0,
+      currentTimeIndex: -1,
+      formData: {
+        budget: '',
+        duration: '',
+        workplace: ''
+      },
+      sourceData: null,
+      isSubmitting: false,
+      i18n: {
+        zh: {
+          backTitle: '返回',
+          navTitle: '预约现场带看',
+          selectViewingTime: '选择看房时间',
+          selectViewingTimeDesc: '请选择您方便的时间段',
+          rentalNeeds: '您的租住需求',
+          rentalNeedsDesc: '帮助管家更好地为您推荐房源',
+          durationLabel: '预计租住时长',
+          budgetLabel: '租金预算 (元/月)',
+          budgetPlaceholder: '请输入您的心理价位',
+          workplaceLabel: '工作/通勤地点',
+          workplacePlaceholder: '请输入主要通勤地点',
+          submitBooking: '提交预约',
+          defaultInfoDesc: '专属管家为您提供一对一带看服务',
+          duration1: '1-3个月',
+          duration2: '4-6个月',
+          duration3: '7-9个月',
+          duration4: '10-12个月',
+          duration5: '1年以上',
+          week0: '周日',
+          week1: '周一',
+          week2: '周二',
+          week3: '周三',
+          week4: '周四',
+          week5: '周五',
+          week6: '周六',
+          today: '今天',
+          tomorrow: '明天',
+          remarkTitle: '预约看房申请',
+          remarkTime: '看房时间：{date} {time}',
+          remarkDuration: '预计租住时长：{duration}',
+          remarkBudget: '租金预算：{budget} 元/月',
+          remarkWorkplace: '工作/通勤地点：{workplace}',
+          remarkArea: '意向区域：{area}',
+          remarkRoomType: '意向房型：{roomType}',
+          remarkSource: '当前来源：{room}',
+          remarkPayMethod: '支付方式：{payMethod}',
+          remarkTail: '备注：请宿管确认带看安排；若带看完成并锁定房号，可转为预定单通知租客支付。',
+          selectTimeRequired: '请选择看房时间段',
+          selectDurationRequired: '请选择预计租住时长',
+          submitting: '提交中...',
+          submitSuccessTitle: '预约成功',
+          submitSuccessContent: '您的预约看房申请已提交。\n系统会自动转发给对应区域有房间权限的宿管，宿管确认带看后可直接完结订单，或选定房型房号后转为预定单发送给租客支付。',
+          submitFailed: '预约提交失败'
+        },
+        en: {
+          backTitle: 'Back',
+          navTitle: 'On-site Viewing',
+          selectViewingTime: 'Select Viewing Time',
+          selectViewingTimeDesc: 'Choose a time slot that works for you',
+          rentalNeeds: 'Rental Needs',
+          rentalNeedsDesc: 'Help the manager recommend a suitable room',
+          durationLabel: 'Expected Stay Duration',
+          budgetLabel: 'Budget (CNY/month)',
+          budgetPlaceholder: 'Enter your expected budget',
+          workplaceLabel: 'Work / Commute Location',
+          workplacePlaceholder: 'Enter your main commute location',
+          submitBooking: 'Submit Request',
+          defaultInfoDesc: 'A dedicated manager will arrange a one-on-one viewing for you',
+          duration1: '1-3 months',
+          duration2: '4-6 months',
+          duration3: '7-9 months',
+          duration4: '10-12 months',
+          duration5: 'Over 1 year',
+          week0: 'Sun',
+          week1: 'Mon',
+          week2: 'Tue',
+          week3: 'Wed',
+          week4: 'Thu',
+          week5: 'Fri',
+          week6: 'Sat',
+          today: 'Today',
+          tomorrow: 'Tomorrow',
+          remarkTitle: 'Viewing Request',
+          remarkTime: 'Viewing Time: {date} {time}',
+          remarkDuration: 'Expected Stay: {duration}',
+          remarkBudget: 'Budget: {budget} CNY/month',
+          remarkWorkplace: 'Work / Commute Location: {workplace}',
+          remarkArea: 'Preferred Area: {area}',
+          remarkRoomType: 'Preferred Room Type: {roomType}',
+          remarkSource: 'Current Source: {room}',
+          remarkPayMethod: 'Payment Method: {payMethod}',
+          remarkTail: 'Note: Please confirm the viewing schedule with the manager. After viewing and locking a room number, the order can be converted into a booking for payment.',
+          selectTimeRequired: 'Please select a viewing time slot',
+          selectDurationRequired: 'Please select the expected stay duration',
+          submitting: 'Submitting...',
+          submitSuccessTitle: 'Booking Submitted',
+          submitSuccessContent: 'Your viewing request has been submitted.\nThe system will forward it to the authorized manager of the selected area. After the manager confirms the viewing, the order can be completed directly or converted into a booking for payment once a room is selected.',
+          submitFailed: 'Failed to submit the booking'
+        }
+      }
+    }
+  },
+  onLoad(options) {
+    this.syncDurationOptions()
+    this.generateDates()
+    if (options.payload) {
+      try {
+        this.sourceData = JSON.parse(decodeURIComponent(options.payload))
+      } catch (e) {
+        console.error('Failed to parse payload', e)
+      }
+    }
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgBooking.book_viewing.book_viewing', key, params)
+    },
+    syncDurationOptions() {
+      this.durationOptions = [
+        this.t('duration1'),
+        this.t('duration2'),
+        this.t('duration3'),
+        this.t('duration4'),
+        this.t('duration5')
+      ]
+    },
+    generateDates() {
+      const dates = []
+      const today = new Date()
+      const weeks = [
+        this.t('week0'),
+        this.t('week1'),
+        this.t('week2'),
+        this.t('week3'),
+        this.t('week4'),
+        this.t('week5'),
+        this.t('week6')
+      ]
+      
+      for (let i = 0; i < 7; i++) {
+        const d = new Date(today)
+        d.setDate(today.getDate() + i)
+        const month = String(d.getMonth() + 1).padStart(2, '0')
+        const day = String(d.getDate()).padStart(2, '0')
+        
+        let weekStr = weeks[d.getDay()]
+        if (i === 0) weekStr = this.t('today');
+        else if (i === 1) weekStr = this.t('tomorrow');
+
+        dates.push({
+          date: `${d.getFullYear()}-${month}-${day}`,
+          label: `${month}/${day}`,
+          week: weekStr
+        })
+      }
+      this.dateList = dates
+    },
+    selectDate(index) {
+      this.currentDateIndex = index
+      this.currentTimeIndex = -1
+    },
+    selectTimeSlot(index) {
+      this.currentTimeIndex = index
+    },
+    selectDuration(item) {
+      this.formData.duration = item
+    },
+    buildRemark(selectedDate, selectedTime) {
+      const lines = [
+        this.t('remarkTitle'),
+        this.t('remarkTime', { date: selectedDate, time: selectedTime }),
+        this.t('remarkDuration', { duration: this.formData.duration })
+      ]
+
+      if (this.formData.budget) {
+        lines.push(this.t('remarkBudget', { budget: this.formData.budget }))
+      }
+      if (this.formData.workplace) {
+        lines.push(this.t('remarkWorkplace', { workplace: this.formData.workplace }))
+      }
+      if (this.sourceData && (this.sourceData.areaName || this.sourceData.areaNameEn)) {
+        lines.push(this.t('remarkArea', {
+          area: this.language === 'en'
+            ? (this.sourceData.areaNameEnDisplay || this.sourceData.areaLabelEnDisplay || this.sourceData.areaNameEn || this.sourceData.areaLabelEn || this.sourceData.areaName || this.sourceData.areaLabel || '')
+            : (this.sourceData.areaName || this.sourceData.areaLabel || this.sourceData.areaNameEn || this.sourceData.areaLabelEn || '')
+        }))
+      }
+      if (this.sourceData && (this.sourceData.roomTypeName || this.sourceData.roomTypeNameEn)) {
+        lines.push(this.t('remarkRoomType', {
+          roomType: this.language === 'en'
+            ? (this.sourceData.roomTypeNameEnDisplay || this.sourceData.roomTypeNameEn || this.sourceData.roomTypeName || '')
+            : (this.sourceData.roomTypeName || this.sourceData.roomTypeNameEn || '')
+        }))
+      }
+      if (this.sourceData && (this.sourceData.roomName || this.sourceData.roomNameEn)) {
+        lines.push(this.t('remarkSource', {
+          room: this.language === 'en'
+            ? (this.sourceData.roomNameEnDisplay || this.sourceData.roomNameEn || this.sourceData.roomName || '')
+            : (this.sourceData.roomName || this.sourceData.roomNameEn || '')
+        }))
+      }
+      if (this.sourceData && this.sourceData.payMethod) {
+        lines.push(this.t('remarkPayMethod', { payMethod: localizePayMethodText(this.sourceData.payMethod, this.language) }))
+      }
+
+      lines.push(this.t('remarkTail'))
+      return lines.join('\n')
+    },
+    handleSubmit() {
+      if (this.isSubmitting) {
+        return
+      }
+      if (this.currentTimeIndex === -1) {
+        uni.showToast({ title: this.t('selectTimeRequired'), icon: 'none' })
+        return
+      }
+      if (!this.formData.duration) {
+        uni.showToast({ title: this.t('selectDurationRequired'), icon: 'none' })
+        return
+      }
+
+      const selectedDate = this.dateList[this.currentDateIndex].date
+      const selectedTime = this.timeSlots[this.currentTimeIndex]
+      const payload = {
+        intendedAreaCode: this.sourceData && this.sourceData.areaCode ? this.sourceData.areaCode : null,
+        intendedRoomTypeCode: this.sourceData && this.sourceData.roomTypeCode ? this.sourceData.roomTypeCode : null,
+        roomSlotHeight: 1,
+        hobbiesAndInterestsTagKeys: null,
+        lifestyleHabitsTagKeys: null,
+        remark: this.buildRemark(selectedDate, selectedTime),
+        start: buildViewingDateTime(selectedDate, selectedTime, false),
+        end: buildViewingDateTime(selectedDate, selectedTime, true)
+      };
+
+      this.isSubmitting = true
+      uni.showLoading({ title: this.t('submitting'), mask: true })
+      return submitApplicationForm(payload)
+        .then(() => {
+          uni.hideLoading()
+          uni.showModal({
+            title: this.t('submitSuccessTitle'),
+            content: this.t('submitSuccessContent'),
+            showCancel: false,
+            confirmColor: '#01BEFF',
+            success: () => {
+              uni.redirectTo({
+                url: '/pkgService/my_application/my_application'
+              })
+            }
+          })
+        })
+        .catch((error) => {
+          console.error('submit viewing application failed', error)
+          uni.hideLoading()
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('submitFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.isSubmitting = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.book-viewing-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #1D2129;
+}
+
+.content-wrapper {
+  flex: 1;
+  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
+}
+
+/* 顶部信息卡片 */
+.info-card {
+  margin: 30rpx;
+  padding: 40rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(135deg, #01BEFF 0%, #0099FF 100%);
+  box-shadow: 0 16rpx 32rpx rgba(1, 190, 255, 0.2);
+  color: #ffffff;
+}
+
+.info-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.info-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  margin-bottom: 12rpx;
+  letter-spacing: 2rpx;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.info-desc {
+  font-size: 24rpx;
+  opacity: 0.9;
+  letter-spacing: 1rpx;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.info-icon {
+  font-size: 80rpx;
+  opacity: 0.2;
+  margin-left: 20rpx;
+}
+
+/* 通用表单卡片 */
+.form-card {
+  margin: 0 30rpx 30rpx;
+  padding: 40rpx 30rpx;
+  border-radius: 24rpx;
+  background: #ffffff;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.03);
+}
+
+.card-header {
+  margin-bottom: 30rpx;
+}
+
+.card-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #1D2129;
+  margin-right: 16rpx;
+}
+
+.card-subtitle {
+  font-size: 24rpx;
+  color: #86909C;
+}
+
+/* 日期选择 */
+.date-scroll {
+  width: 100%;
+  white-space: nowrap;
+  margin-bottom: 30rpx;
+}
+
+.date-flex {
+  display: inline-flex;
+  gap: 20rpx;
+  padding-bottom: 10rpx;
+}
+
+.date-item {
+  width: 110rpx;
+  height: 130rpx;
+  background: #F4F8FF;
+  border-radius: 16rpx;
+  flex-shrink: 0;
+  border: 2rpx solid transparent;
+  transition: all 0.3s ease;
+}
+
+.date-item--active {
+  background: #EAF0FF;
+  border-color: #01BEFF;
+}
+
+.date-week {
+  font-size: 24rpx;
+  color: #86909C;
+  margin-bottom: 8rpx;
+  transition: all 0.3s ease;
+}
+
+.date-item--active .date-week {
+  color: #01BEFF;
+  font-weight: bold;
+}
+
+.date-day {
+  font-size: 28rpx;
+  color: #1D2129;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.date-item--active .date-day {
+  color: #01BEFF;
+}
+
+/* 时间段选择 */
+.time-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+}
+
+.time-slot {
+  width: calc(33.33% - 14rpx);
+  height: 72rpx;
+  line-height: 72rpx;
+  text-align: center;
+  background: #F4F8FF;
+  border-radius: 12rpx;
+  font-size: 26rpx;
+  color: #4E5969;
+  border: 2rpx solid transparent;
+  transition: all 0.3s ease;
+}
+
+.time-slot--active {
+  background: #01BEFF;
+  color: #ffffff;
+  font-weight: bold;
+  box-shadow: 0 8rpx 16rpx rgba(1, 190, 255, 0.2);
+}
+
+/* 需求字段 */
+.field-item {
+  margin-bottom: 40rpx;
+}
+
+.field-item:last-child {
+  margin-bottom: 0;
+}
+
+.field-label {
+  font-size: 28rpx;
+  color: #1D2129;
+  font-weight: bold;
+  margin-bottom: 24rpx;
+}
+
+/* 标签选择 */
+.tag-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+}
+
+.tag-item {
+  padding: 0 32rpx;
+  height: 68rpx;
+  line-height: 68rpx;
+  background: #F4F8FF;
+  border-radius: 34rpx;
+  font-size: 26rpx;
+  color: #4E5969;
+  border: 2rpx solid transparent;
+  transition: all 0.3s ease;
+}
+
+.tag-item--active {
+  background: #EAF0FF;
+  border-color: #01BEFF;
+  color: #01BEFF;
+  font-weight: bold;
+}
+
+/* 输入框 */
+.input-box {
+  background: #F4F8FF;
+  border-radius: 16rpx;
+  height: 88rpx;
+  padding: 0 30rpx;
+}
+
+.input-icon {
+  font-size: 36rpx;
+  color: #A1B0C4;
+  margin-right: 16rpx;
+}
+
+.custom-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #1D2129;
+}
+
+/* 底部按钮 */
+.footer-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #ffffff;
+  padding: 24rpx 40rpx;
+  box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.04);
+  z-index: 100;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 96rpx;
+  background: linear-gradient(135deg, #01BEFF 0%, #0099FF 100%);
+  border-radius: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: bold;
+  letter-spacing: 2rpx;
+  box-shadow: 0 12rpx 24rpx rgba(1, 190, 255, 0.25);
+  transition: all 0.3s ease;
+}
+
+.submit-btn:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+</style>
diff --git a/pkgBooking/booking_detail/booking_detail.vue b/pkgBooking/booking_detail/booking_detail.vue
new file mode 100644
index 0000000..ff9a2fb
--- /dev/null
+++ b/pkgBooking/booking_detail/booking_detail.vue
@@ -0,0 +1,324 @@
+<template>
+  <view class="booking-detail-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="#FFFFFF">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      <view v-if="loading" class="empty-card tn-padding-lg">
+        <view class="booking-title">{{ t('loadingTitle') }}</view>
+        <view class="demo-desc tn-margin-top-sm">{{ t('loadingDesc') }}</view>
+      </view>
+      <view v-else-if="booking" class="booking-card tn-padding-lg">
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+          <view>
+            <view class="booking-title">{{ t('orderNoLabel') }}</view>
+            <view class="booking-order tn-margin-top-xs">{{ booking.orderNo }}</view>
+          </view>
+          <view class="status-badge" :class="'status-' + booking.tagType">{{ booking.statusText }}</view>
+        </view>
+
+        <view class="info-box tn-margin-top">
+          <view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
+            <text class="info-label">{{ t('roomTypeLabel') }}</text>
+            <text class="info-value">{{ booking.roomTypeText }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
+            <text class="info-label">{{ t('buildingFloorLabel') }}</text>
+            <text class="info-value">{{ booking.buildingFloorText }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
+            <text class="info-label">{{ t('roomNoLabel') }}</text>
+            <text class="info-value">{{ booking.roomNoText }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
+            <text class="info-label">{{ t('areaLabel') }}</text>
+            <text class="info-value">{{ booking.areaText }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
+            <text class="info-label">{{ t('stayDateLabel') }}</text>
+            <text class="info-value">{{ booking.startDateText }}{{ t('dateRangeJoiner') }}{{ booking.endDateText }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('submittedAtLabel') }}</text>
+            <text class="info-value">{{ booking.createdAtText }}</text>
+          </view>
+        </view>
+
+        <view v-if="booking.rejectReasonText" class="reason-box tn-margin-top">
+          <view class="reason-title">{{ t('rejectReasonTitle') }}</view>
+          <view class="reason-content tn-margin-top-xs">{{ booking.rejectReasonText }}</view>
+        </view>
+
+        <view class="flow-box tn-margin-top">
+          <view class="flow-title">{{ t('flowTitle') }}</view>
+          <view class="flow-step tn-margin-top-sm" :class="isStepActive('pending_review') ? 'active' : ''">{{ t('flowStep1') }}</view>
+          <view class="flow-step tn-margin-top-sm" :class="isStepActive('approved_wait_assign') ? 'active' : ''">{{ t('flowStep2') }}</view>
+          <view class="flow-step tn-margin-top-sm" :class="isStepActive('assigned_wait_room') ? 'active' : ''">{{ t('flowStep3') }}</view>
+        </view>
+
+      </view>
+
+      <view v-else class="empty-card tn-padding-lg">
+        <view class="booking-title">{{ t('emptyTitle') }}</view>
+        <view class="demo-desc tn-margin-top-sm">{{ t('emptyDesc') }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { orderSearchedDetail, orderSearchedMePage } from '@/api/index.js'
+import { getSessionSnapshot } from '../../utils/app-state'
+import {
+  normalizeBookingDetail,
+  normalizeBookingList,
+  parseOrderDetailResponse,
+  parseOrderListResponse
+} from '../../utils/booking-helper'
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '预订详情',
+      loadingTitle: '订单加载中',
+      loadingDesc: '正在同步该预订的真实详情，请稍候。',
+      orderNoLabel: '预定单号',
+      roomTypeLabel: '风格房型',
+      buildingFloorLabel: '楼栋楼层',
+      roomNoLabel: '房间号',
+      areaLabel: '所属区域',
+      stayDateLabel: '入住时间',
+      submittedAtLabel: '提交时间',
+      rejectReasonTitle: '驳回原因',
+      flowTitle: '当前流程',
+      flowStep1: '1. 已支付，等待角色审批',
+      flowStep2: '2. 审批通过，等待分配管家',
+      flowStep3: '3. 已分配管家，等待分配房号',
+      emptyTitle: '暂无预订记录',
+      emptyDesc: '当前暂无可查看的预订详情，请先前往预订记录确认订单。',
+      cachedDetailShown: '网络异常，已展示最近同步详情',
+      loadFailed: '预订详情加载失败',
+      dateRangeJoiner: ' 至 '
+    },
+    en: {
+      navTitle: 'Booking Detail',
+      loadingTitle: 'Loading booking',
+      loadingDesc: 'Syncing the latest booking details. Please wait.',
+      orderNoLabel: 'Booking No.',
+      roomTypeLabel: 'Room Type',
+      buildingFloorLabel: 'Building / Floor',
+      roomNoLabel: 'Room No.',
+      areaLabel: 'Area',
+      stayDateLabel: 'Stay Dates',
+      submittedAtLabel: 'Submitted At',
+      rejectReasonTitle: 'Rejection Reason',
+      flowTitle: 'Current Flow',
+      flowStep1: '1. Paid and waiting for approval',
+      flowStep2: '2. Approved and waiting for butler assignment',
+      flowStep3: '3. Butler assigned and waiting for room allocation',
+      emptyTitle: 'No booking record',
+      emptyDesc: 'No booking detail is available right now. Please check your booking records first.',
+      cachedDetailShown: 'Network issue detected. Showing the latest synced detail.',
+      loadFailed: 'Failed to load booking detail',
+      dateRangeJoiner: ' to '
+    }
+  },
+  data() {
+    return {
+      orderNo: '',
+      booking: null,
+      loading: false
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    }
+  },
+  watch: {
+    language() {
+      this.refreshBooking()
+    }
+  },
+  onLoad(options) {
+    this.orderNo = options.orderNo || ''
+  },
+  async onShow() {
+    await this.refreshBooking()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgBooking.booking_detail.booking_detail', key, params)
+    },
+    getStoreUser() {
+      return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
+    },
+    getStoreBookingList() {
+      const list = this.$store && this.$store.state && this.$store.state.vuex_valid_orders
+      return Array.isArray(list) ? list : []
+    },
+    isCurrentLogin() {
+      const storeUser = this.getStoreUser()
+      if (storeUser && Object.keys(storeUser).length) {
+        return true
+      }
+      return !!getSessionSnapshot().isLogin
+    },
+    resolveBookingFromList(orderList = []) {
+      const list = Array.isArray(orderList) ? orderList : []
+      if (this.orderNo) {
+        return list.find(item => String(item.orderNo) === String(this.orderNo)) || null
+      }
+      return list[0] || null
+    },
+    refreshBooking() {
+      if (!this.isCurrentLogin()) {
+        this.booking = null
+        this.loading = false
+        return Promise.resolve()
+      }
+
+      this.loading = true
+      const requestPromise = this.orderNo
+        ? orderSearchedDetail(this.orderNo)
+        : orderSearchedMePage({
+            PageIndex: 1,
+            PageSize: 100,
+            IsExport: false
+          })
+
+      return requestPromise
+        .then((response) => {
+          if (this.orderNo) {
+            this.booking = normalizeBookingDetail(parseOrderDetailResponse(response), this.language)
+            return
+          }
+          const orderList = normalizeBookingList(parseOrderListResponse(response), this.language)
+          this.booking = this.resolveBookingFromList(orderList)
+        })
+        .catch((error) => {
+          console.error('fetch booking detail failed', error)
+          const storeBookingList = this.getStoreBookingList()
+          const session = getSessionSnapshot()
+          const cachedList = storeBookingList.length ? storeBookingList : session.bookingList
+          this.booking = this.resolveBookingFromList(normalizeBookingList(cachedList, this.language))
+          uni.showToast({
+            title: this.booking
+              ? this.t('cachedDetailShown')
+              : ((error && (error.message || error.msg)) || this.t('loadFailed')),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    isStepActive(targetStatus) {
+      if (!this.booking) return false
+      const order = ['pending_review', 'approved_wait_assign', 'assigned_wait_room']
+      return order.indexOf(this.booking.statusKey) >= order.indexOf(targetStatus)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.booking-detail-page {
+  background: #f8f9fa;
+  min-height: 100vh;
+}
+
+.booking-card,
+.empty-card {
+  background: #ffffff;
+  border-radius: 28rpx;
+  box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
+}
+
+.booking-title,
+.flow-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #222222;
+}
+
+.booking-order {
+  font-size: 26rpx;
+  color: #666666;
+}
+
+.status-badge {
+  padding: 10rpx 20rpx;
+  border-radius: 999rpx;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+
+.status-pending,
+.status-pending_review {
+  background: rgba(255, 165, 0, 0.12);
+  color: #d18a00;
+}
+
+.status-approved,
+.status-approved_wait_assign,
+.status-assigned_wait_room {
+  background: rgba($brand-primary-rgb, 0.18);
+  color: #4f6e17;
+}
+
+.status-rejected {
+  background: rgba(255, 90, 95, 0.12);
+  color: #d34d52;
+}
+
+.info-box,
+.flow-box,
+.reason-box {
+  padding: 24rpx;
+  background: #f8f9fa;
+  border-radius: 20rpx;
+}
+
+.info-label,
+.demo-desc,
+.reason-content {
+  color: #777777;
+}
+
+.info-value {
+  max-width: 60%;
+  text-align: right;
+  color: #222222;
+}
+
+.flow-step {
+  padding: 18rpx 22rpx;
+  background: #ffffff;
+  border-radius: 18rpx;
+  color: #777777;
+}
+
+.flow-step.active {
+  background: rgba($brand-primary-rgb, 0.16);
+  color: #4f6e17;
+  font-weight: bold;
+}
+
+.demo-btn {
+  padding: 16rpx 28rpx;
+  border-radius: 999rpx;
+  font-size: 26rpx;
+}
+
+.demo-btn-pass {
+  background: rgba($brand-primary-rgb, 0.18);
+  color: #4f6e17;
+}
+
+.demo-btn-reject {
+  background: rgba(255, 90, 95, 0.12);
+  color: #d34d52;
+}
+</style>
diff --git a/pkgBooking/booking_list/booking_list.vue b/pkgBooking/booking_list/booking_list.vue
new file mode 100644
index 0000000..0b4ffc3
--- /dev/null
+++ b/pkgBooking/booking_list/booking_list.vue
@@ -0,0 +1,267 @@
+<template>
+  <view class="booking-list-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
+      <view v-if="loading" class="empty-card tn-padding-lg">
+        <view class="empty-title">{{ t('loadingTitle') }}</view>
+        <view class="empty-desc tn-margin-top-sm">{{ t('loadingDesc') }}</view>
+      </view>
+      <view v-else-if="bookingList.length">
+        <view
+          v-for="item in bookingList"
+          :key="item.orderNo"
+          class="booking-card tn-margin-bottom-lg"
+          @click="goDetail(item)"
+        >
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+            <view>
+              <view class="booking-title">{{ item.roomTypeText || t('bookingFallbackTitle') }}</view>
+              <view class="booking-subtitle tn-margin-top-xs">{{ item.orderNo }}</view>
+            </view>
+            <view class="status-badge" :class="'status-' + item.tagType">
+              {{ item.statusText }}
+            </view>
+          </view>
+
+          <view class="info-grid tn-margin-top">
+            <view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
+              <text class="info-label">{{ t('buildingFloorLabel') }}</text>
+              <text class="info-value">{{ item.buildingFloorText }}</text>
+            </view>
+            <view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
+              <text class="info-label">{{ t('stayDateLabel') }}</text>
+              <text class="info-value">{{ item.startDateText }}{{ t('dateRangeJoiner') }}{{ item.endDateText }}</text>
+            </view>
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('submittedAtLabel') }}</text>
+              <text class="info-value">{{ item.createdAtText }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-else class="empty-card tn-padding-lg">
+        <view class="empty-title">{{ t('emptyTitle') }}</view>
+        <view class="empty-desc tn-margin-top-sm">{{ t('emptyDesc') }}</view>
+        <view class="custom-btn btn-primary tn-margin-top-lg" @click="goSelectRoom">
+          <text class="tn-text-bold">{{ t('goSelectRoom') }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { orderSearchedMePage } from '@/api/index.js'
+import { getSessionSnapshot } from '../../utils/app-state'
+import { normalizeBookingList, parseOrderListResponse } from '../../utils/booking-helper'
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '预订记录',
+      loadingTitle: '订单加载中',
+      loadingDesc: '正在同步您的真实预订记录，请稍候。',
+      bookingFallbackTitle: '房源预订',
+      buildingFloorLabel: '楼栋楼层',
+      stayDateLabel: '入住时间',
+      submittedAtLabel: '提交时间',
+      emptyTitle: '暂无预订记录',
+      emptyDesc: '当前暂无预订记录，完成预订后会在这里展示。',
+      goSelectRoom: '去选房',
+      cachedListShown: '网络异常，已展示最近同步记录',
+      loadFailed: '预订记录加载失败',
+      dateRangeJoiner: ' 至 '
+    },
+    en: {
+      navTitle: 'Booking Records',
+      loadingTitle: 'Loading bookings',
+      loadingDesc: 'Syncing your latest booking records. Please wait.',
+      bookingFallbackTitle: 'Room Booking',
+      buildingFloorLabel: 'Building / Floor',
+      stayDateLabel: 'Stay Dates',
+      submittedAtLabel: 'Submitted At',
+      emptyTitle: 'No booking records',
+      emptyDesc: 'No booking record is available yet. Completed bookings will appear here.',
+      goSelectRoom: 'Select Room',
+      cachedListShown: 'Network issue detected. Showing the latest synced records.',
+      loadFailed: 'Failed to load booking records',
+      dateRangeJoiner: ' to '
+    }
+  },
+  data() {
+    return {
+      bookingList: [],
+      loading: false
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    }
+  },
+  watch: {
+    language() {
+      this.fetchBookingList()
+    }
+  },
+  async onShow() {
+    await this.fetchBookingList()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgBooking.booking_list.booking_list', key, params)
+    },
+    getStoreUser() {
+      return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
+    },
+    getStoreBookingList() {
+      const list = this.$store && this.$store.state && this.$store.state.vuex_valid_orders
+      return Array.isArray(list) ? list : []
+    },
+    isCurrentLogin() {
+      const storeUser = this.getStoreUser()
+      if (storeUser && Object.keys(storeUser).length) {
+        return true
+      }
+      return !!getSessionSnapshot().isLogin
+    },
+    applyBookingList(list = []) {
+      this.bookingList = Array.isArray(list) ? list : []
+    },
+    fetchBookingList() {
+      if (!this.isCurrentLogin()) {
+        this.applyBookingList()
+        this.loading = false
+        return Promise.resolve()
+      }
+
+      this.loading = true
+      return orderSearchedMePage({
+          PageIndex: 1,
+          PageSize: 100,
+          IsExport: false
+        })
+        .then((response) => {
+          this.applyBookingList(normalizeBookingList(parseOrderListResponse(response), this.language))
+        })
+        .catch((error) => {
+          console.error('fetch booking list failed', error)
+          const storeBookingList = this.getStoreBookingList()
+          const session = getSessionSnapshot()
+          const cachedList = storeBookingList.length ? storeBookingList : session.bookingList
+          this.applyBookingList(normalizeBookingList(cachedList, this.language))
+          uni.showToast({
+            title: this.bookingList.length
+              ? this.t('cachedListShown')
+              : ((error && (error.message || error.msg)) || this.t('loadFailed')),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    goDetail(item) {
+      uni.navigateTo({
+        url: `/pkgBooking/booking_detail/booking_detail?orderNo=${item.orderNo}`
+      })
+    },
+    goSelectRoom() {
+      uni.reLaunch({
+        url: '/pages/index/index?index=0&pageId=select-room'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.booking-list-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+}
+
+.booking-card,
+.empty-card {
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 30rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+
+.booking-title,
+.empty-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #1A2233;
+}
+
+.booking-subtitle,
+.empty-desc,
+.info-label {
+  color: #6A7A99;
+}
+
+.info-value {
+  max-width: 58%;
+  text-align: right;
+  color: #1A2233;
+  font-weight: 500;
+}
+
+.info-row {
+  padding: 16rpx 0;
+  border-bottom: 1px dashed rgba($brand-primary, 0.15);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.status-badge {
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: bold;
+}
+
+.status-pending {
+  background: rgba(245, 158, 11, 0.12);
+  color: #B45309;
+}
+
+.status-approved {
+  background: rgba($brand-primary, 0.12);
+  color: $brand-primary;
+}
+
+.status-rejected {
+  background: rgba(239, 68, 68, 0.12);
+  color: #B91C1C;
+}
+
+.custom-btn {
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999rpx;
+  transition: all 0.3s;
+}
+
+.custom-btn:active {
+  transform: scale(0.98);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+}
+</style>
diff --git a/pkgBooking/pay/pay.vue b/pkgBooking/pay/pay.vue
new file mode 100644
index 0000000..ca59443
--- /dev/null
+++ b/pkgBooking/pay/pay.vue
@@ -0,0 +1,500 @@
+<template>
+  <view class="pay-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="#F8F9FA">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('title') }}</view>
+    </tn-nav-bar>
+
+    <view class="pay-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '200rpx'}">
+      
+      <!-- 支付金额区 -->
+      <view class="amount-area tn-flex tn-flex-direction-column tn-flex-col-center tn-margin-top-xl tn-margin-bottom-xl">
+        <view class="tn-color-gray tn-text-md">{{ t('paymentAmount') }}</view>
+        <view class="tn-text-bold tn-color-black tn-margin-top-sm amount-text">
+          <text class="tn-text-xl tn-margin-right-xs">$</text>500.00
+        </view>
+      </view>
+
+      <!-- 账单详情卡片 -->
+      <view class="bill-card tn-padding-lg tn-margin-bottom-xl">
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="icon-bg-box tn-flex tn-flex-col-center tn-flex-row-center tn-margin-right-sm">
+              <text class="tn-icon-building bill-head-icon"></text>
+            </view>
+            <view class="tn-color-gray tn-text-md">{{ t('billTo') }}</view>
+          </view>
+          <view class="tn-text-bold tn-text-md tn-color-black">{{ t('company') }}</view>
+        </view>
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+          <view class="tn-color-gray tn-text-md">{{ t('roomType') }}</view>
+          <view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
+            {{ displayStyleName }}
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && (roomData.roomTypeName || roomData.roomTypeNameEn)">
+          <view class="tn-color-gray tn-text-md">{{ t('roomTypeNameLabel') }}</view>
+          <view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
+            {{ displayRoomTypeName }}
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
+          <view class="tn-color-gray tn-text-md">{{ t('location') }}</view>
+          <view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">{{ displayLocationText }}</view>
+        </view>
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && roomData.startDate">
+          <view class="tn-color-gray tn-text-md">{{ t('bookingPeriod') }}</view>
+          <view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
+            {{ roomData.startDate }} {{ t('toLabel') }} {{ roomData.endDate }}
+          </view>
+        </view>
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && roomData.stayNights">
+          <view class="tn-color-gray tn-text-md">{{ t('stayNights') }}</view>
+          <view class="tn-text-bold tn-text-md tn-color-black">{{ roomData.stayNights }} {{ t('nightUnit') }}</view>
+        </view>
+        
+        <view class="bill-divider tn-margin-top-md tn-margin-bottom"></view>
+        
+        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-md">
+          <view class="tn-color-black tn-text-bold tn-text-lg">{{ t('total') }}</view>
+          <view class="tn-text-bold" style="color: $brand-primary; font-size: 40rpx;">$500.00</view>
+        </view>
+      </view>
+
+      <!-- 支付方式选择 -->
+      <view class="payment-methods">
+        <view class="tn-text-bold tn-text-xl tn-color-black tn-margin-bottom-lg">{{ t('paymentMethod') }}</view>
+        
+        <view class="method-item tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-margin-bottom" 
+              :class="payMethod === 'Wechat' ? 'method-active' : ''" @click="payMethod = 'Wechat'">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="method-icon-box tn-flex tn-flex-row-center tn-flex-col-center tn-margin-right-md" style="background-color: rgba(9, 184, 62, 0.1);">
+              <text class="tn-icon-wechat-fill method-brand-icon method-brand-icon--wechat"></text>
+            </view>
+            <text class="tn-text-bold tn-text-md tn-color-black">Wechat Pay</text>
+          </view>
+          <view class="radio-box tn-flex tn-flex-col-center tn-flex-row-center" :class="payMethod === 'Wechat' ? 'radio-active' : ''">
+            <text v-if="payMethod === 'Wechat'" class="tn-icon-success-circle-fill method-check-icon"></text>
+          </view>
+        </view>
+
+        <view class="method-item tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-margin-bottom" 
+              :class="payMethod === 'alipay' ? 'method-active' : ''" @click="payMethod = 'alipay'">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="method-icon-box tn-flex tn-flex-row-center tn-flex-col-center tn-margin-right-md" style="background-color: rgba(22, 119, 255, 0.1);">
+              <text class="tn-icon-alipay method-brand-icon method-brand-icon--alipay"></text>
+            </view>
+            <text class="tn-text-bold tn-text-md tn-color-black">AliPay</text>
+          </view>
+          <view class="radio-box tn-flex tn-flex-col-center tn-flex-row-center" :class="payMethod === 'alipay' ? 'radio-active' : ''">
+            <text v-if="payMethod === 'alipay'" class="tn-icon-success-circle-fill method-check-icon"></text>
+          </view>
+        </view>
+        
+        <view class="method-item tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-margin-bottom" 
+              :class="payMethod === 'card' ? 'method-active' : ''" @click="payMethod = 'card'">
+          <view class="tn-flex tn-flex-col-center">
+            <view class="method-icon-box tn-flex tn-flex-row-center tn-flex-col-center tn-margin-right-md" style="background-color: rgba(34, 34, 34, 0.1);">
+              <text class="tn-icon-bankcard-fill method-brand-icon method-brand-icon--card"></text>
+            </view>
+            <text class="tn-text-bold tn-text-md tn-color-black">Credit Card</text>
+          </view>
+          <view class="radio-box tn-flex tn-flex-col-center tn-flex-row-center" :class="payMethod === 'card' ? 'radio-active' : ''">
+            <text v-if="payMethod === 'card'" class="tn-icon-success-circle-fill method-check-icon"></text>
+          </view>
+        </view>
+      </view>
+
+      <view class="tip-panel tn-padding-lg">
+        <view class="tn-text-bold tn-text-lg tn-color-black">{{ t('fallbackTitle') }}</view>
+        <view class="tn-color-gray tn-text-sm tn-margin-top-sm">{{ t('fallbackDesc') }}</view>
+        <view class="tip-action tn-margin-top-lg" @click="fallbackToApplication">
+          <text class="tn-text-bold">{{ t('fallbackAction') }}</text>
+        </view>
+      </view>
+
+    </view>
+
+    <!-- 底部固定支付按钮 -->
+    <view class="fixed-bottom-btn-area tn-flex tn-flex-row-between tn-flex-col-center">
+      <view class="tn-flex tn-flex-direction-column">
+        <view class="tn-text-sm tn-color-gray">{{ t('total') }}</view>
+        <view class="tn-text-bold tn-text-xl tn-color-black">$500.00</view>
+      </view>
+      <view class="custom-btn btn-primary" style="width: 60%; height: 100rpx;" @click="handlePay" :class="{ 'btn-disabled': isSubmitting }">
+        <text class="tn-text-bold tn-text-lg">{{ isSubmitting ? (language === 'zh' ? '支付中...' : 'Processing...') : t('payNow') }}</text>
+      </view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+import { compactEnglishText } from '../../utils/select-room-normalizers'
+
+export default {
+  data() {
+    return {
+      isSubmitting: false,
+      payMethod: 'Wechat',
+      roomData: null,
+      i18n: {
+        zh: {
+          title: '支付定金',
+          paymentAmount: '应付定金',
+          billTo: '收款方',
+          company: '绿居物业管理有限公司',
+          roomType: '房源风格',
+          roomTypeNameLabel: '房型',
+          location: '楼栋位置',
+          bookingPeriod: '预订时间',
+          toLabel: '至',
+          stayNights: '入住晚数',
+          nightUnit: '晚',
+          total: '合计',
+          paymentMethod: '选择支付方式',
+          payNow: '确认支付并提交预订',
+          fallbackTitle: '支付接口暂未接入',
+          fallbackDesc: '当前版本还未接通真实定金支付。你可以先改走已接好的入住申请提交流程，后续由工作人员跟进。',
+          fallbackAction: '改为提交入住申请',
+          fallbackNavigateTitle: '入住申请',
+          fallbackNavigateDesc: '支付接口暂未接入，先提交入住申请，由工作人员继续跟进。',
+          paying: '支付中...',
+          pendingTitle: '支付接口待接入',
+          paymentNoticeTitle: '用户须知',
+          paymentNoticeMethodLabel: '支付方式',
+          paymentNoticeAmountLabel: '支付金额',
+          paymentNoticeItemLabel: '支付项目',
+          paymentNoticeItemValue: '房源定金',
+          paymentNoticeLine1: '请确认支付方式和金额无误后再继续操作。',
+          paymentNoticeLine2: '当前页面为预支付引导页，真实支付接口暂未接入。',
+          paymentNoticeLine3: '确认后将进入后续提交流程，由工作人员继续跟进。',
+          paymentNoticeConfirm: '继续',
+          paymentNoticeCancel: '取消',
+          laterAction: '我知道了'
+        },
+        en: {
+          title: 'Deposit Payment',
+          paymentAmount: 'Deposit Amount',
+          billTo: 'Bill To',
+          company: 'Lüju Property Management',
+          roomType: 'Style',
+          roomTypeNameLabel: 'Room Type',
+          location: 'Location',
+          bookingPeriod: 'Booking Period',
+          toLabel: 'to',
+          stayNights: 'Stay Nights',
+          nightUnit: 'nights',
+          total: 'Total',
+          paymentMethod: 'Payment Method',
+          payNow: 'Pay and Submit',
+          fallbackTitle: 'Payment API Pending',
+          fallbackDesc: 'The real deposit payment flow is not ready yet. You can submit an application first and let staff follow up.',
+          fallbackAction: 'Submit Application Instead',
+          fallbackNavigateTitle: 'Stay Application',
+          fallbackNavigateDesc: 'The payment API is not ready yet. Submit a stay application first and let staff follow up.',
+          paying: 'Processing...',
+          pendingTitle: 'Payment API Pending',
+          paymentNoticeTitle: 'Payment Notice',
+          paymentNoticeMethodLabel: 'Payment Method',
+          paymentNoticeAmountLabel: 'Amount',
+          paymentNoticeItemLabel: 'Charge Item',
+          paymentNoticeItemValue: 'Deposit',
+          paymentNoticeLine1: 'Please confirm the payment method and amount before continuing.',
+          paymentNoticeLine2: 'This page is a pre-payment guide and the real payment API is not connected yet.',
+          paymentNoticeLine3: 'After confirmation, the process continues to the follow-up submission flow for staff handling.',
+          paymentNoticeConfirm: 'Continue',
+          paymentNoticeCancel: 'Cancel',
+          laterAction: 'Later'
+        }
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    displayStyleName() {
+      if (!this.roomData) {
+        return 'Premium Suite'
+      }
+      return this.language === 'en'
+        ? (this.roomData.styleNameEnDisplay || compactEnglishText(this.roomData.styleNameEn || this.roomData.styleNameZh || '', 24) || 'Premium Suite')
+        : (this.roomData.styleNameZh || this.roomData.styleNameEn || 'Premium Suite')
+    },
+    displayRoomTypeName() {
+      if (!this.roomData) {
+        return ''
+      }
+      return this.language === 'en'
+        ? (this.roomData.roomTypeNameEnDisplay || compactEnglishText(this.roomData.roomTypeNameEn || this.roomData.roomTypeName || '', 22))
+        : (this.roomData.roomTypeName || this.roomData.roomTypeNameEn || '')
+    },
+    displayLocationText() {
+      if (!this.roomData) {
+        return '-'
+      }
+      const buildingText = this.language === 'en'
+        ? (this.roomData.buildingEnDisplay || compactEnglishText(this.roomData.buildingEn || this.roomData.building || '', 18))
+        : (this.roomData.building || this.roomData.buildingEn || '')
+      const floorText = this.language === 'en'
+        ? (this.roomData.floorEnDisplay || compactEnglishText(this.roomData.floorEn || this.roomData.floor || '', 12))
+        : (this.roomData.floor || this.roomData.floorEn || '')
+      return [buildingText, floorText].filter(Boolean).join(' - ') || '-'
+    }
+  },
+  onLoad(options) {
+    if (options.roomData) {
+      Promise.resolve(options.roomData)
+        .then(decodeURIComponent)
+        .then(JSON.parse)
+        .then((data) => {
+          this.roomData = data && typeof data === 'object' ? data : {}
+        })
+        .catch((e) => {
+          console.error('Failed to parse room data in pay page', e);
+        })
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgBooking.pay.pay', key)
+    },
+    confirmPaymentNotice() {
+      const content = [
+        `${this.t('paymentNoticeItemLabel')}: ${this.t('paymentNoticeItemValue')}`,
+        `${this.t('paymentNoticeMethodLabel')}: ${this.payMethod}`,
+        `${this.t('paymentNoticeAmountLabel')}: $500.00`,
+        '',
+        `1. ${this.t('paymentNoticeLine1')}`,
+        `2. ${this.t('paymentNoticeLine2')}`,
+        `3. ${this.t('paymentNoticeLine3')}`
+      ].join('\n')
+
+      return new Promise((resolve) => {
+        uni.showModal({
+          title: this.t('paymentNoticeTitle'),
+          content,
+          confirmText: this.t('paymentNoticeConfirm'),
+          cancelText: this.t('paymentNoticeCancel'),
+          success: (res) => resolve(!!(res && res.confirm)),
+          fail: () => resolve(false)
+        })
+      })
+    },
+    buildApplicationPayload() {
+      return {
+        sourceType: 'booking-payment-fallback',
+        areaCode: this.roomData && this.roomData.areaCode ? this.roomData.areaCode : '',
+        areaName: this.roomData && this.roomData.building ? this.roomData.building : '',
+        areaNameEn: this.roomData && (this.roomData.areaNameEn || this.roomData.buildingEn) ? (this.roomData.areaNameEn || this.roomData.buildingEn) : '',
+        areaNameEnDisplay: this.roomData && (this.roomData.areaNameEnDisplay || this.roomData.buildingEnDisplay || this.roomData.areaNameEn || this.roomData.buildingEn)
+          ? (this.roomData.areaNameEnDisplay || this.roomData.buildingEnDisplay || this.roomData.areaNameEn || this.roomData.buildingEn)
+          : '',
+        roomTypeCode: this.roomData && this.roomData.roomTypeCode ? this.roomData.roomTypeCode : '',
+        roomTypeName: this.roomData && this.roomData.roomTypeName ? this.roomData.roomTypeName : '',
+        roomTypeNameEn: this.roomData && (this.roomData.roomTypeNameEn || this.roomData.styleNameEn) ? (this.roomData.roomTypeNameEn || this.roomData.styleNameEn) : '',
+        roomTypeNameEnDisplay: this.roomData && (this.roomData.roomTypeNameEnDisplay || this.roomData.styleNameEnDisplay || this.roomData.roomTypeNameEn || this.roomData.styleNameEn)
+          ? (this.roomData.roomTypeNameEnDisplay || this.roomData.styleNameEnDisplay || this.roomData.roomTypeNameEn || this.roomData.styleNameEn)
+          : '',
+        roomName: this.roomData && this.roomData.styleNameZh ? this.roomData.styleNameZh : '',
+        roomNameEn: this.roomData && this.roomData.styleNameEn ? this.roomData.styleNameEn : '',
+        roomNameEnDisplay: this.roomData && (this.roomData.styleNameEnDisplay || this.roomData.styleNameEn)
+          ? (this.roomData.styleNameEnDisplay || this.roomData.styleNameEn)
+          : '',
+        payMethod: this.payMethod,
+        price: '$500.00',
+        start: this.roomData && this.roomData.startDate ? this.roomData.startDate : '',
+        end: this.roomData && this.roomData.endDate ? this.roomData.endDate : ''
+      }
+    },
+    fallbackToApplication() {
+      const payload = this.buildApplicationPayload()
+      const titleZh = '入住申请'
+      const titleEn = 'Stay Application'
+      const descZh = '支付接口暂未接入，先提交入住申请，由工作人员继续跟进。'
+      const descEn = 'The payment API is not ready yet. Submit a stay application first and let staff follow up.'
+      uni.navigateTo({
+        url: `/pkgService/submit_request/submit_request?title=${encodeURIComponent(this.t('fallbackNavigateTitle'))}&titleZh=${encodeURIComponent(titleZh)}&titleEn=${encodeURIComponent(titleEn)}&desc=${encodeURIComponent(this.t('fallbackNavigateDesc'))}&descZh=${encodeURIComponent(descZh)}&descEn=${encodeURIComponent(descEn)}&payload=${encodeURIComponent(JSON.stringify(payload))}`
+      })
+    },
+    handlePay() {
+      if (this.isSubmitting) return
+      this.confirmPaymentNotice().then((confirmed) => {
+        if (!confirmed) return
+        this.isSubmitting = true
+        uni.showLoading({ title: this.t('paying') })
+
+        setTimeout(() => {
+          uni.hideLoading()
+          this.isSubmitting = false
+          uni.showModal({
+            title: this.t('pendingTitle'),
+            content: this.t('fallbackDesc'),
+            confirmText: this.t('fallbackAction'),
+            cancelText: this.t('laterAction'),
+            success: (res) => {
+              if (res.confirm) {
+                this.fallbackToApplication()
+              }
+            }
+          })
+        }, 1500)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pay-page {
+  background-color: #F8F9FA;
+  min-height: 100vh;
+}
+.amount-area {
+  position: relative;
+  z-index: 1;
+}
+.amount-text {
+  font-size: 88rpx;
+  text-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
+}
+
+.bill-card {
+  background-color: #FFFFFF;
+  border-radius: 32rpx;
+  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.03);
+}
+.icon-bg-box {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 16rpx;
+  background-color: #F8F9FA;
+}
+
+.bill-head-icon {
+  color: #222222;
+  font-size: 28rpx;
+  line-height: 1;
+}
+.bill-divider {
+  height: 2rpx;
+  background-color: transparent;
+  border-bottom: 2rpx dashed #E6E6E6;
+  margin-left: -10rpx;
+  margin-right: -10rpx;
+}
+
+.payment-methods {
+  margin-top: 20rpx;
+}
+.method-item {
+  background-color: #FFFFFF;
+  border-radius: 24rpx;
+  border: 4rpx solid transparent;
+  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.02);
+  transition: all 0.3s ease;
+}
+.method-active {
+  border-color: $brand-primary;
+  background-color: #FAFFEB;
+  box-shadow: 0 12rpx 30rpx rgba($brand-primary-rgb, 0.1);
+  transform: translateY(-2rpx);
+}
+.method-icon-box {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
+}
+
+.method-brand-icon {
+  font-size: 38rpx;
+  line-height: 1;
+}
+
+.method-brand-icon--wechat {
+  color: #09b83e;
+}
+
+.method-brand-icon--alipay {
+  color: #1677ff;
+}
+
+.method-brand-icon--card {
+  color: #222222;
+}
+
+.radio-box {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 22rpx;
+  border: 4rpx solid #E6E6E6;
+  transition: all 0.2s;
+}
+
+.method-check-icon {
+  color: #222222;
+  font-size: 28rpx;
+  line-height: 1;
+}
+.radio-active {
+  border-color: $brand-primary;
+  background-color: $brand-primary;
+}
+
+/* 底部固定按钮区 */
+.fixed-bottom-btn-area {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #FFFFFF;
+  box-shadow: 0 -10rpx 40rpx rgba(0,0,0,0.04);
+  padding: 30rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
+  z-index: 999;
+}
+
+/* 自定义按钮样式 */
+.custom-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100rpx;
+  transition: all 0.2s;
+  box-shadow: 0 10rpx 30rpx rgba($brand-primary-rgb, 0.3);
+}
+.custom-btn:active {
+  transform: scale(0.95);
+  box-shadow: 0 5rpx 15rpx rgba($brand-primary-rgb, 0.2);
+}
+.btn-primary {
+  background-color: $brand-primary;
+  color: #000000;
+}
+.btn-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.clamp-text-1 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tip-panel {
+  background-color: #FFFFFF;
+  border-radius: 32rpx;
+  box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.03);
+}
+
+.tip-action {
+  height: 88rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000000;
+  background-color: rgba($brand-primary-rgb, 0.18);
+}
+</style>
diff --git a/pkgExplore/download/download.vue b/pkgExplore/download/download.vue
new file mode 100644
index 0000000..8138063
--- /dev/null
+++ b/pkgExplore/download/download.vue
@@ -0,0 +1,292 @@
+<template>
+  <view class="template-list">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+      </view>
+      <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
+        <text class="tn-text-bold tn-text-lg tn-color-black">{{ t('navTitle') }}</text>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="tn-search-fixed">
+      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+        
+        <view class="justify-content-item align-content-item" style="width: 100vw;">
+          <view class="tn-flex tn-flex-col-center" style="border: 1rpx solid #D2D2D2;border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 90%;">
+            <text class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
+            <input class="justify-content-item" :placeholder="t('searchPlaceholder')" name="input" placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
+          </view>
+        </view>
+        
+        <view class="align-content-item">
+          <view class="justify-content-item tn-text-center">
+            <!-- 没输入前-->
+            <tn-button backgroundColor="#3C97FF80" shape="round" padding="20rpx 20rpx" width="150rpx" @tap="">
+              <text class="tn-color-white">{{ t('searchButton') }}</text>
+            </tn-button>
+            <!-- 输入后 -->
+            <!-- <tn-button backgroundColor="#3C97FF" shape="round" padding="20rpx 20rpx" width="150rpx" @tap="">
+              <text class="tn-color-white">搜 索</text>
+            </tn-button> -->
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 60 + 'px'}">
+      
+      <!-- 搜索为空 -->
+      <!-- <view class="" style="padding: 5vh 20rpx;opacity: 0.8;">
+        <view class="tn-text-center" style="font-size: 260rpx;padding-top: 30rpx;">
+          <text class="tn-icon-search-list tn-color-gray--disabled"></text>
+        </view>
+        <view class="tn-text-center" style="color: #979797;">搜索内容为空</view>
+      </view> -->
+      
+      <!-- 当前页面内容 -->
+      <view class="tn-bg-white tn-padding-bottom-xs">
+        <view class="list-bg tn-flex tn-flex-row-left tn-flex-col-center" v-for="(item,index) in list" :key="index" @click="tn('/homePages/details')">
+          <view class="">
+            <view class="type-pic">
+              <view class="type-image" :style="'background-image:url(' + item.mainImage + ');background-size: cover;'">
+              </view>
+            </view>
+          </view>
+          <view class="tn-padding-left clamp-text-2">
+            <text class="">{{ item.desc }}</text>
+          </view>
+        </view>
+      </view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'List',
+    mixins: [template_page_mixin],
+    i18n: {
+      zh: {
+        navTitle: '资料图库',
+        searchPlaceholder: '请输入搜索关键词',
+        searchButton: '搜 索',
+        galleryImage: '游戏攻略图',
+        galleryImageLong: '游戏攻略图游戏攻略图游戏攻略图'
+      },
+      en: {
+        navTitle: 'Gallery',
+        searchPlaceholder: 'Enter search keywords',
+        searchButton: 'Search',
+        galleryImage: 'Guide Image',
+        galleryImageLong: 'Guide Image Guide Image Guide Image'
+      }
+    },
+    data(){
+      return {
+        list: [
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724828216161-assets/web-upload/d6ecc4c6-a675-4e30-9681-45b105578b55.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724828359865-assets/web-upload/9e232257-0b68-4169-a997-e23195b2e0aa.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724828485984-assets/web-upload/dd7b313d-e16c-45f3-ad5a-8bb27c2913b8.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724828486008-assets/web-upload/bbea1e86-0db3-4f39-b240-abafa8769d8b.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724828617900-assets/web-upload/8a6c98e4-ed47-4308-92bc-84b224d31e0c.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724828745355-assets/web-upload/7de060fc-d1fc-4890-b6c0-6982fb19b972.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724828818144-assets/web-upload/7a3f1f98-149a-46f2-84cf-31aaa5b84b2e.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724828933196-assets/web-upload/35cda0e5-c495-4ebe-9ed9-3bc1ec3d1645.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724829158713-assets/web-upload/1c3b07ff-d64c-4fe3-8626-275044886400.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724829158748-assets/web-upload/2d83bd1a-1451-44a1-8115-55cadd636b5e.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724829158754-assets/web-upload/9e74ec62-2ae8-46d2-9199-b8fccb62b8a0.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724829158764-assets/web-upload/069cccaa-2439-4cb2-8b96-e53e8b442145.jpeg',
+          },
+          {
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1724830125897-assets/web-upload/e7e50a8b-202f-4cc5-9089-05d4b28dd2c8.jpeg',
+          }
+        ],
+      }
+    },
+    created() {
+      this.syncList()
+    },
+    computed: {
+      language() {
+        return this.$getLanguage()
+      }
+    },
+    watch: {
+      language() {
+        this.syncList()
+      }
+    },
+    methods: {
+      t(key, params) {
+      return this.$tm('pkgExplore.download.download', key, params)
+    },
+      syncList() {
+        this.list = this.list.map((item, index) => ({
+          ...item,
+          desc: index === 1 ? this.t('galleryImageLong') : this.t('galleryImage')
+        }))
+      },
+      // 跳转
+      tn(e) {
+      	uni.navigateTo({
+      		url: e,
+      	});
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 50%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    color: #000000;
+    font-size: 16px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      padding-left: 10rpx;
+      text-align: left;
+    }
+    
+  }
+  
+  .tn-search-fixed{
+    position: fixed;
+    top: 0rpx;
+    width: 100%;
+    transition: all 0.25s ease-out;
+    z-index: 1;
+    background-color: #FFFFFF;
+  }
+  
+  .list-bg{
+    margin: 30rpx;
+    padding-top: 30rpx;
+  }
+  
+  .list-bg + .list-bg{
+    border-top: 1rpx solid #F1F1F1;
+  }
+  
+  /* 图标容器15 start */
+  .icon15 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 90rpx;
+        height: 90rpx;
+        font-size: 60rpx;
+        border-radius: 18rpx;
+        position: relative;
+        z-index: 1;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          bottom: 0;
+          border-radius: inherit;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+  
+            
+        }
+      }
+    }
+  }
+  
+  /* 文件头像 start */
+  .type-image {
+    width: 102rpx;
+    height: 120rpx;
+    position: relative;
+  }
+  
+  .type-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    // background-attachment:fixed;
+    background-position: center;
+    // border: 1rpx solid rgba(255,255,255,0.05);
+    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
+    border-radius: 18rpx;
+    overflow: hidden;
+    // background-color: #FFFFFF;
+  }
+  
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+</style>
diff --git a/pkgExplore/filter/filter.vue b/pkgExplore/filter/filter.vue
new file mode 100644
index 0000000..2b048b2
--- /dev/null
+++ b/pkgExplore/filter/filter.vue
@@ -0,0 +1,333 @@
+<template>
+  <view class="template-filter">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+      </view>
+      <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
+        <text class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</text>
+      </view>
+    </tn-nav-bar>
+    
+    <view class="top-fixed" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
+      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm">
+        <view class="tn-flex tn-flex-col-center tn-padding-sm">
+          <view class="tn-padding-right-xs">{{ t('sortDefault') }}</view>
+          <!-- <view class="ri-bookmark-line tn-color-gray--dark"></view> -->
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-padding-sm" @tap="openTypeModal">
+          <view class="tn-padding-right-xs">{{ t('typeLabel') }}</view>
+          <view class="tn-icon-down-fill icon-active" v-if="showTypeModal"></view>
+          <view class="tn-icon-down-fill tn-color-gray--dark" v-else></view>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-padding-sm">
+          <view class="tn-padding-right-xs">{{ t('salesLabel') }}</view>
+          <view class="tn-icon-sort tn-color-gray--dark"></view>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-padding-sm">
+          <view class="tn-padding-right-xs">{{ t('priceLabel') }}</view>
+          <view class="tn-icon-sort tn-color-gray--dark"></view>
+        </view>
+        <view class="tn-flex tn-flex-col-center tn-padding-sm" @tap="openSelectModal">
+          <view class="tn-padding-right-xs">{{ t('comprehensiveLabel') }}</view>
+          <view class="tn-icon-filter tn-color-gray--dark tn-text-sm"></view>
+        </view>
+      </view>
+    </view>
+    
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 60 + 'px'}">
+      
+      <!-- 商品 start-->
+      <view class="tn-flex tn-flex-wrap" style="margin: 10rpx 14rpx 0 14rpx;">
+        <block v-for="(item, index) in product" :key="index">
+          <view class="" style="width: 50%;" @click="tn('/shopPages/product')">
+            <view class="shop-shadow" style="margin: 0 16rpx 30rpx 16rpx;">
+              <view class="image-pic" :style="'background-image:url(' + item.mainImage + ')'">
+                <view class="image-product">
+                </view>
+              </view> 
+              
+              <view class="tn-text-justify tn-padding-top-sm tn-padding-bottom-xs clamp-text-1 tn-text-bold" style="color: #333333;max-height: 60rpx;">
+                <text class="tn-padding-left-sm tn-padding-right-sm">{{ item.desc }}</text>  
+              </view>
+              
+              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-bottom-sm tn-padding-top-sm">
+                <view class="justify-content-item tn-flex tn-flex-col-center tn-padding-left-sm tn-padding-right-sm" style="margin-left: -6rpx;color: #333333;">
+                  <text class="tn-text-sm">￥</text>
+                  <text class="tn-padding-right-sm tn-text-lg tn-text-bold">{{ item.price }}</text>
+                  <text class="tn-color-gray tn-text-sm" style="color: #C1CACF;"> {{ item.number }} {{ t('purchasedSuffix') }}</text>
+                </view>
+                <!-- <view class="justify-content-item tn-flex tn-flex-col-center">
+                  <tn-button size="sm" shape="icon" backgroundColor="#3e486400" fontColor="#333333" padding="10rpx 0 0 0">
+                    <text class="tn-icon-add-circle tn-text-lg"></text>
+                  </tn-button>
+                </view> -->
+              </view>
+            </view>
+          </view>
+        </block>
+      </view>
+      <!-- 商品 end-->
+      
+      <view class="tn-tabbar-height"></view>
+      
+    </view>
+    
+    <!-- popup会有延迟，采用这种方式来优化弹窗的优化体验-->
+    <type-modal v-model="showTypeModal"></type-modal>
+    
+    <!-- popup会有延迟，采用这种方式来优化弹窗的优化体验-->
+    <select-modal v-model="showSelectModal"></select-modal>
+    
+
+    
+  </view>
+</template>
+
+<script>
+  import TypeModal from '@/components/filter/type.vue'
+  import SelectModal from '@/components/filter/select.vue'
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    components: { TypeModal , SelectModal },
+    name: 'TemplateFilter',
+    mixins: [template_page_mixin],
+    i18n: {
+      zh: {
+        navTitle: '应用专区',
+        sortDefault: '默认',
+        typeLabel: '类型',
+        salesLabel: '销量',
+        priceLabel: '价格',
+        comprehensiveLabel: '综合',
+        purchasedSuffix: '人已购',
+        product1: '蛋仔派对',
+        product2: '保卫萝卜',
+        product3: '旅行青蛙',
+        product4: '辐射避难所',
+        product5: '王国保卫战',
+        product6: '崩坏 · 星穹铁道',
+        product7: '纪念碑谷'
+      },
+      en: {
+        navTitle: 'App Zone',
+        sortDefault: 'Default',
+        typeLabel: 'Type',
+        salesLabel: 'Sales',
+        priceLabel: 'Price',
+        comprehensiveLabel: 'All',
+        purchasedSuffix: 'purchased',
+        product1: 'Eggy Party',
+        product2: 'Carrot Defense',
+        product3: 'Travel Frog',
+        product4: 'Fallout Shelter',
+        product5: 'Kingdom Rush',
+        product6: 'Honkai: Star Rail',
+        product7: 'Monument Valley'
+      }
+    },
+    data(){
+      return {
+        /* 选择弹窗*/
+        showTypeModal: false,
+        
+        /* 选择弹窗*/
+        showSelectModal: true,
+        
+        product: [
+          {
+            price:'129',
+            number:'231',
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716013944651-assets/web-upload/32eafb0d-1e25-452b-9ad9-d14c18ec90f6.jpeg',
+          },
+          {
+            price:'288',
+            number:'157',
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/png/280373/1715960090731-assets/web-upload/156084cd-aa5a-41dc-98ca-eb681d4afcc5.png',
+          },
+          {
+            price:'299',
+            number:'876',
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716014232876-assets/web-upload/5e1d7c68-048e-4b54-afda-68164a5bebd0.jpeg',
+          },
+          {
+            price:'199',
+            number:'29',
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716025506668-assets/web-upload/b6d123a2-4f1d-46c9-9474-f62a87d05a74.jpeg',
+          },
+          {
+            price:'389',
+            number:'643',
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716025891640-assets/web-upload/8b4440ce-710b-4d3c-afff-5d49e6c7a16a.jpeg',
+          },
+          {
+            price:'298',
+            number:'386',
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716040399286-assets/web-upload/7a715327-f597-4a8e-ac3c-2ba7ab45b6b9.jpeg',
+          },
+          {
+            price:'368',
+            number:'439',
+            desc: '',
+            mainImage: 'https://cdn.nlark.com/yuque/0/2024/jpeg/280373/1716014593433-assets/web-upload/6e1ba4f3-4757-4693-b827-b8803072c5c9.jpeg',
+          }
+        ],
+      }
+    },
+    created() {
+      this.syncProducts()
+    },
+    computed: {
+      language() {
+        return this.$getLanguage()
+      }
+    },
+    watch: {
+      language() {
+        this.syncProducts()
+      }
+    },
+    methods: {
+      t(key, params) {
+      return this.$tm('pkgExplore.filter.filter', key, params)
+    },
+      syncProducts() {
+        const keys = ['product1', 'product2', 'product3', 'product4', 'product5', 'product6', 'product7']
+        this.product = this.product.map((item, index) => ({
+          ...item,
+          desc: this.t(keys[index] || 'product1')
+        }))
+      },
+      // 打开选择弹框
+      openTypeModal() {
+        if (typeof uni !== 'undefined' && uni.vibrateShort) {
+          uni.vibrateShort({ fail: () => {} });
+        }
+        this.showTypeModal = true
+      },
+      // 打开选择弹框
+      openSelectModal() {
+        if (typeof uni !== 'undefined' && uni.vibrateShort) {
+          uni.vibrateShort({ fail: () => {} });
+        }
+        this.showSelectModal = true
+      },
+      // 跳转
+      tn(e) {
+        uni.navigateTo({
+          url: e,
+        });
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 40%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    // background-color: rgba(0, 0, 0, 0.15);
+    // border: 1rpx solid rgba(255, 255, 255, 0.5);
+    color: #000000;
+    font-size: 18px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      text-align: center;
+    }
+    
+  }
+  
+  .top-fixed{
+    position: fixed;
+    background-color: rgba(255,255,255,1);
+    top: 0;
+    width: 100%;
+    z-index: 100;
+  }
+  
+  .icon-active{
+    animation:acitve 0.2s forwards 1;
+  }
+  
+  @keyframes acitve{
+    from{
+      
+    }
+    to{
+      -webkit-transform: rotate(-180deg);
+      -ms-transform: rotate(-180deg);
+      transform: rotate(-180deg);
+      color: #000000;
+    }
+  }
+  
+  /* 自定义导航栏内容 end */
+  .bg-radius{
+    background-color: #FFFFFF;
+    border-radius: 16rpx;
+    margin: 30rpx;
+    padding: 30rpx;
+  }
+  
+  .shop-shadow{
+    background-color: #FFFFFF;
+    border-radius: 24rpx;
+  }
+  
+  .image-product{
+    padding: 145rpx 0rpx;
+    font-size: 16rpx;
+    font-weight: 300;
+    position: relative;
+  }
+  .image-pic{
+    background-size: cover;
+    background-repeat:no-repeat;
+    // background-attachment:fixed;
+    background-position:center;
+    border-radius: 24rpx;
+    border: 10rpx solid #FFFFFF;;
+  }
+  
+  /* 底部安全边距 start*/
+  .tn-tabbar-height {
+    min-height: 100rpx;
+    height: calc(120rpx + env(safe-area-inset-bottom) / 2);
+    height: calc(120rpx + constant(safe-area-inset-bottom));
+  }
+  
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+</style>
diff --git a/pkgExplore/room_detail/components/RoomAssets.vue b/pkgExplore/room_detail/components/RoomAssets.vue
new file mode 100644
index 0000000..7df5bd6
--- /dev/null
+++ b/pkgExplore/room_detail/components/RoomAssets.vue
@@ -0,0 +1,179 @@
+<template>
+  <view v-if="assetList.length" class="section-panel">
+    <view class="section-header tn-flex tn-flex-row-between tn-flex-col-center">
+      <view class="title-wrap tn-flex tn-flex-col-center">
+        <view class="title-accent"></view>
+        <text class="section-title">{{ t('sectionTitle') }}</text>
+      </view>
+      <text class="section-subtitle">{{ t('sectionSubtitle', { count: assetList.length }) }}</text>
+    </view>
+
+    <view class="asset-grid">
+      <view
+        v-for="item in assetList"
+        :key="item.key"
+        class="asset-item tn-flex tn-flex-col-center"
+      >
+        <view class="asset-icon-box tn-flex tn-flex-row-center tn-flex-col-center">
+          <text
+            v-if="item.iconClass"
+            :class="[item.iconClass, 'asset-remix-icon', 'asset-icon-font']"
+          ></text>
+          <image
+            v-else-if="item.icon"
+            :src="item.icon"
+            mode="aspectFit"
+            class="asset-icon-image"
+          ></image>
+          <text v-else class="tn-icon-shop asset-icon-font"></text>
+          
+          <!-- 数量角标：仅大于1时显示 -->
+          <view v-if="item.defaultQuantity > 1" class="asset-qty-badge">
+            x{{ item.defaultQuantity }}
+          </view>
+        </view>
+
+        <text class="asset-name tn-text-ellipsis">{{ item.assetName }}</text>
+        <text v-if="item.brand" class="asset-brand tn-text-ellipsis">{{ item.brand }}</text>
+        <text v-else class="asset-brand-placeholder"></text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    assetList: {
+      type: Array,
+      default: () => []
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  methods: {
+    t(key, params = {}) {
+      return this.$tm('pkgExplore.room_detail.room_detail', key, params)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.section-panel {
+  background: #ffffff;
+  padding: 48rpx 32rpx;
+  border-bottom: 1rpx solid #F2F3F5;
+}
+
+.section-header {
+  margin-bottom: 40rpx;
+}
+
+.title-wrap {
+  position: relative;
+}
+
+.title-accent {
+  width: 0rpx;
+  height: 0rpx;
+  display: none;
+}
+
+.section-title {
+  position: relative;
+  font-size: 36rpx;
+  font-weight: 800;
+  color: #1D2129;
+  letter-spacing: 2rpx;
+}
+
+.section-subtitle {
+  font-size: 26rpx;
+  color: #86909C;
+  background: #F2F3F5;
+  padding: 4rpx 16rpx;
+  border-radius: 999rpx;
+}
+
+.asset-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 40rpx 16rpx;
+}
+
+.asset-item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.asset-icon-box {
+  position: relative;
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 28rpx;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.05) 0%, rgba($brand-primary, 0.12) 100%);
+  margin-bottom: 16rpx;
+  transition: all 0.2s ease;
+}
+
+.asset-icon-box:active {
+  transform: scale(0.95);
+  background: linear-gradient(135deg, rgba($brand-primary, 0.08) 0%, rgba($brand-primary, 0.16) 100%);
+}
+
+.asset-icon-image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.asset-icon-font {
+  font-size: 44rpx;
+  color: $brand-primary;
+}
+
+.asset-remix-icon {
+  font-family: 'remixicon' !important;
+}
+
+.asset-qty-badge {
+  position: absolute;
+  top: -10rpx;
+  right: -14rpx;
+  background: #FF5722;
+  color: #FFFFFF;
+  font-size: 20rpx;
+  font-weight: bold;
+  padding: 2rpx 10rpx;
+  border-radius: 16rpx;
+  border: 4rpx solid #FFFFFF;
+  line-height: 1.2;
+  font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  z-index: 2;
+  box-shadow: 0 4rpx 8rpx rgba(255, 87, 34, 0.2);
+}
+
+.asset-name {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #1D2129;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 6rpx;
+}
+
+.asset-brand {
+  font-size: 22rpx;
+  color: #86909C;
+  width: 100%;
+  text-align: center;
+}
+
+.asset-brand-placeholder {
+  height: 30rpx; /* Placeholder to keep grid aligned if some have brand and some don't */
+}
+</style>
diff --git a/pkgExplore/room_detail/components/RoomHero.vue b/pkgExplore/room_detail/components/RoomHero.vue
new file mode 100644
index 0000000..e8cb17a
--- /dev/null
+++ b/pkgExplore/room_detail/components/RoomHero.vue
@@ -0,0 +1,386 @@
+<template>
+  <view class="room-hero">
+    <view v-if="showVrPanel" class="hero-vr-panel" @click="openVR">
+      <image v-if="vrPoster" :src="vrPoster" mode="aspectFill" class="hero-image"></image>
+      <view v-else class="hero-empty tn-flex tn-flex-col-center tn-flex-row-center">{{ t('noImage') }}</view>
+      <view class="hero-vr-glow"></view>
+      <view class="vr-center-entry">
+        <view class="vr-center-ring vr-center-ring--outer"></view>
+        <view class="vr-center-ring vr-center-ring--middle"></view>
+        <view class="vr-center-core">
+          <text class="tn-icon-vr vr-center-core-icon"></text>
+        </view>
+        <view class="vr-center-text">
+          <view class="vr-center-title">{{ t('vrPreview') }}</view>
+          <view class="vr-center-desc">{{ t('vrPreviewDesc') }}</view>
+        </view>
+      </view>
+    </view>
+    <swiper
+      v-else-if="galleryList.length"
+      class="hero-swiper"
+      circular
+      autoplay
+      :interval="4200"
+      :duration="700"
+      @change="onSwiperChange"
+    >
+      <swiper-item v-for="(image, index) in galleryList" :key="`${image}-${index}`">
+        <image :src="image" mode="aspectFill" class="hero-image"></image>
+      </swiper-item>
+    </swiper>
+    <view v-else class="hero-empty tn-flex tn-flex-col-center tn-flex-row-center">
+      {{ t('noImage') }}
+    </view>
+
+    <view class="hero-mask"></view>
+
+    <view class="hero-count" v-if="!showVrPanel && galleryList.length">
+      {{ currentImageIndex + 1 }} / {{ galleryList.length }}
+    </view>
+
+    <view v-if="hasVR" class="media-tabs">
+      <view
+        class="media-tab"
+        :class="{ 'media-tab--active': currentMediaType === 'image' }"
+        @click="switchMedia('image')"
+      >
+        <text class="tn-icon-image media-tab-icon"></text>
+        <text>{{ t('imageTab') }}</text>
+      </view>
+      <view
+        class="media-tab"
+        :class="{ 'media-tab--active': currentMediaType === 'vr' }"
+        @click="switchMedia('vr')"
+      >
+        <text class="tn-icon-vr media-tab-icon"></text>
+      <text>{{ t('vrPreview') }}</text>
+      </view>
+    </view>
+
+    <view class="hero-content">
+      <view class="hero-title">{{ detailData.name }}</view>
+      <view class="hero-subtitle" v-if="showEnglishName">{{ detailData.nameEnDisplay || detailData.nameEn }}</view>
+    </view>
+
+    <!-- 引导下滑箭头 -->
+    <view class="scroll-down-hint tn-flex tn-flex-direction-column tn-flex-col-center">
+      <text class="hint-text">{{ t('swipeUpHint') }}</text>
+      <text class="tn-icon-up arrow-icon"></text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    detailData: {
+      type: Object,
+      default: () => ({})
+    },
+    galleryList: {
+      type: Array,
+      default: () => []
+    },
+    hasVR: {
+      type: Boolean,
+      default: false
+    },
+    showVrPanel: {
+      type: Boolean,
+      default: false
+    },
+    vrPoster: {
+      type: String,
+      default: ''
+    },
+    showEnglishName: {
+      type: Boolean,
+      default: false
+    },
+    currentMediaType: {
+      type: String,
+      default: 'image'
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  data() {
+    return {
+      currentImageIndex: 0
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.room_detail.room_detail', key)
+    },
+    onSwiperChange(e) {
+      this.currentImageIndex = e.detail.current;
+      this.$emit('swiper-change', e);
+    },
+    openVR() {
+      this.$emit('open-vr');
+    },
+    switchMedia(type) {
+      this.$emit('switch-media', type);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.room-hero {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.hero-swiper,
+.hero-image,
+.hero-empty {
+  width: 100%;
+  height: 100%;
+}
+
+.hero-empty {
+  background: linear-gradient(135deg, #2b2f35 0%, #15181d 100%);
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 28rpx;
+}
+
+.hero-mask {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(8, 11, 18, 0.14) 0%, rgba(8, 11, 18, 0.12) 42%, rgba(8, 11, 18, 0.78) 100%),
+    linear-gradient(135deg, rgba($brand-primary, 0.16) 0%, rgba(0, 0, 0, 0) 46%);
+  pointer-events: none;
+}
+
+.hero-count {
+  position: absolute;
+  right: 28rpx;
+  top: calc(110rpx + env(safe-area-inset-top));
+  z-index: 2;
+  padding: 10rpx 18rpx;
+  border-radius: 28rpx;
+  background: rgba(8, 11, 18, 0.42);
+  backdrop-filter: blur(12rpx);
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 22rpx;
+}
+
+.hero-content {
+  position: absolute;
+  left: 32rpx;
+  right: 32rpx;
+  bottom: 120rpx;
+  z-index: 2;
+  color: #ffffff;
+}
+
+.media-tabs {
+  position: absolute;
+  left: 24rpx;
+  right: 24rpx;
+  bottom: 240rpx;
+  z-index: 3;
+  display: flex;
+  gap: 14rpx;
+  padding: 10rpx;
+  border-radius: 26rpx;
+  background: rgba(8, 11, 18, 0.28);
+  backdrop-filter: blur(14rpx);
+  border: 1rpx solid rgba(255, 255, 255, 0.14);
+}
+
+.media-tab {
+  flex: 1;
+  height: 74rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10rpx;
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.78);
+  transition: all 0.18s ease;
+}
+
+.media-tab-icon {
+  font-size: 30rpx;
+  line-height: 1;
+}
+
+.media-tab--active {
+  background: rgba(255, 255, 255, 0.92);
+  color: #0f172a;
+  font-weight: 800;
+}
+
+.hero-vr-panel {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.hero-vr-glow {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 30% 30%, rgba($brand-primary, 0.24) 0%, rgba(0, 0, 0, 0) 55%);
+  pointer-events: none;
+}
+
+.vr-center-entry {
+  position: absolute;
+  left: 50%;
+  top: 46%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  width: 280rpx;
+  height: 280rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vr-center-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2rpx solid rgba(255, 255, 255, 0.18);
+}
+
+.vr-center-ring--outer {
+  width: 280rpx;
+  height: 280rpx;
+  animation: vrPulseOuter 2.8s ease-out infinite;
+}
+
+.vr-center-ring--middle {
+  width: 220rpx;
+  height: 220rpx;
+  animation: vrPulseMiddle 2.2s ease-out infinite;
+}
+
+.vr-center-core {
+  width: 132rpx;
+  height: 132rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.14);
+  border: 2rpx solid rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(18rpx);
+  box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.24);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vr-center-core-icon {
+  font-size: 56rpx;
+  color: #ffffff;
+}
+
+.vr-center-text {
+  position: absolute;
+  left: 50%;
+  bottom: -54rpx;
+  transform: translateX(-50%);
+  width: 320rpx;
+  text-align: center;
+}
+
+.vr-center-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.24);
+}
+
+.vr-center-desc {
+  margin-top: 10rpx;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+@keyframes vrPulseOuter {
+  0% {
+    transform: scale(0.9);
+    opacity: 0.2;
+  }
+  70% {
+    transform: scale(1.08);
+    opacity: 0.65;
+  }
+  100% {
+    transform: scale(1.16);
+    opacity: 0;
+  }
+}
+
+@keyframes vrPulseMiddle {
+  0% {
+    transform: scale(0.92);
+    opacity: 0.18;
+  }
+  70% {
+    transform: scale(1.04);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.1);
+    opacity: 0;
+  }
+}
+
+.hero-title {
+  font-size: 54rpx;
+  font-weight: 700;
+  line-height: 1.16;
+  text-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
+}
+
+.hero-subtitle {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.72);
+  letter-spacing: 1rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.scroll-down-hint {
+  position: absolute;
+  bottom: 40rpx;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  color: rgba(255, 255, 255, 0.8);
+  animation: bounce 2s infinite;
+}
+
+.hint-text {
+  font-size: 22rpx;
+  margin-bottom: 8rpx;
+}
+
+.arrow-icon {
+  font-size: 32rpx;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-16rpx);
+  }
+  60% {
+    transform: translateY(-8rpx);
+  }
+}
+</style>
diff --git a/pkgExplore/room_detail/components/RoomInfo.vue b/pkgExplore/room_detail/components/RoomInfo.vue
new file mode 100644
index 0000000..da149f8
--- /dev/null
+++ b/pkgExplore/room_detail/components/RoomInfo.vue
@@ -0,0 +1,174 @@
+<template>
+  <view class="room-info-wrapper">
+    <view class="section-panel" v-if="basicInfoRows.length">
+      <view class="section-header">
+        <text class="section-title">{{ t('basicInfo') }}</text>
+      </view>
+      <view class="info-list">
+        <view v-for="item in basicInfoRows" :key="item.label" class="info-row tn-flex tn-flex-row-between tn-flex-col-center">
+          <text class="info-label">{{ item.label }}</text>
+          <text class="info-value">{{ item.value }}</text>
+        </view>
+      </view>
+    </view>
+
+    <slot></slot>
+
+    <view class="section-panel" v-if="displayDescriptions.length">
+      <view class="section-header">
+        <text class="section-title">{{ isRoomType ? t('roomTypeDesc') : t('roomDesc') }}</text>
+      </view>
+      <view class="desc-wrap" :class="{ 'desc-wrap--collapsed': isDescCollapsed }">
+        <view
+          v-for="(item, index) in displayDescriptions"
+          :key="`${item}-${index}`"
+          class="desc-text"
+        >
+          <rich-text :nodes="item"></rich-text>
+        </view>
+      </view>
+      <view
+        v-if="shouldShowDescToggle"
+        class="expand-btn tn-flex tn-flex-row-center tn-flex-col-center"
+        @click="toggleDesc"
+      >
+        <text>{{ isDescCollapsed ? t('expandAll') : t('collapse') }}</text>
+        <text :class="isDescCollapsed ? 'tn-icon-down' : 'tn-icon-up'" class="expand-icon"></text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    basicInfoRows: {
+      type: Array,
+      default: () => []
+    },
+    displayDescriptions: {
+      type: Array,
+      default: () => []
+    },
+    isRoomType: {
+      type: Boolean,
+      default: true
+    },
+    shouldShowDescToggle: {
+      type: Boolean,
+      default: false
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  data() {
+    return {
+      isDescCollapsed: true
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.room_detail.room_detail', key)
+    },
+    toggleDesc() {
+      this.isDescCollapsed = !this.isDescCollapsed;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.room-info-wrapper {
+  padding: 0;
+}
+
+.section-panel {
+  background: #ffffff;
+  padding: 48rpx 32rpx;
+  border-bottom: 1rpx solid #F2F3F5;
+}
+
+.section-header {
+  margin-bottom: 32rpx;
+}
+
+.section-title {
+  position: relative;
+  font-size: 36rpx;
+  font-weight: 800;
+  color: #1D2129;
+  letter-spacing: 2rpx;
+}
+
+.info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+}
+
+.info-row {
+  gap: 24rpx;
+  align-items: flex-start;
+}
+
+.info-label {
+  width: 160rpx;
+  font-size: 26rpx;
+  color: #86909C;
+}
+
+.info-value {
+  flex: 1;
+  text-align: right;
+  font-size: 28rpx;
+  line-height: 1.5;
+  color: #1D2129;
+  font-weight: 600;
+}
+
+.desc-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+  transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  max-height: 5000rpx;
+  overflow: hidden;
+}
+
+.desc-wrap--collapsed {
+  max-height: 180rpx;
+}
+
+.desc-wrap--collapsed::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 80rpx;
+  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+  pointer-events: none;
+}
+
+.desc-text {
+  font-size: 28rpx;
+  line-height: 1.8;
+  color: #4E5969;
+  text-align: justify;
+}
+
+.expand-btn {
+  margin-top: 22rpx;
+  color: $brand-primary;
+  font-size: 25rpx;
+  font-weight: 600;
+}
+
+.expand-icon {
+  margin-left: 8rpx;
+  font-size: 26rpx;
+}
+</style>
diff --git a/pkgExplore/room_detail/components/RoomRules.vue b/pkgExplore/room_detail/components/RoomRules.vue
new file mode 100644
index 0000000..3589efe
--- /dev/null
+++ b/pkgExplore/room_detail/components/RoomRules.vue
@@ -0,0 +1,101 @@
+<template>
+  <view class="section-panel" v-if="bookingRuleRows.length">
+    <view class="section-header">
+      <text class="section-title">{{ isRoomType ? t('bookingRules') : t('bookingInfo') }}</text>
+    </view>
+    <view class="rule-list">
+      <view v-for="item in bookingRuleRows" :key="item.label" class="rule-item tn-flex tn-flex-row-between tn-flex-col-center">
+        <view class="rule-left tn-flex tn-flex-col-center">
+          <text class="tn-icon-success-circle-fill rule-icon"></text>
+          <text class="rule-label">{{ item.label }}</text>
+        </view>
+        <text class="rule-value">{{ item.value }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    bookingRuleRows: {
+      type: Array,
+      default: () => []
+    },
+    isRoomType: {
+      type: Boolean,
+      default: true
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.room_detail.room_detail', key)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.section-panel {
+  background: #ffffff;
+  padding: 48rpx 32rpx;
+  margin: 0;
+  border-bottom: 1rpx solid #F2F3F5;
+}
+
+.section-header {
+  margin-bottom: 32rpx;
+}
+
+.section-title {
+  position: relative;
+  font-size: 36rpx;
+  font-weight: 800;
+  color: #1D2129;
+  letter-spacing: 2rpx;
+}
+
+.rule-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.rule-item {
+  min-height: 80rpx;
+  padding: 0;
+  background: transparent;
+  border-bottom: 1rpx dashed #E5E6EB;
+}
+
+.rule-item:last-child {
+  border-bottom: none;
+}
+
+.rule-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.rule-icon {
+  margin-right: 16rpx;
+  font-size: 28rpx;
+  color: #1D2129;
+}
+
+.rule-label {
+  font-size: 26rpx;
+  color: #4E5969;
+}
+
+.rule-value {
+  margin-left: 20rpx;
+  font-size: 26rpx;
+  color: #1D2129;
+  font-weight: 700;
+}
+</style>
diff --git a/pkgExplore/room_detail/components/RoomSummary.vue b/pkgExplore/room_detail/components/RoomSummary.vue
new file mode 100644
index 0000000..cae9ddf
--- /dev/null
+++ b/pkgExplore/room_detail/components/RoomSummary.vue
@@ -0,0 +1,297 @@
+<template>
+  <view class="summary-card">
+    <!-- 价格与标签区 -->
+    <view class="price-header tn-flex tn-flex-row-between tn-flex-col-center">
+      <view class="price-block tn-flex tn-flex-col-bottom">
+        <template v-if="hasPrice">
+          <text class="price-symbol">¥</text>
+          <text class="price-value">{{ detailData.priceValue }}</text>
+          <text class="price-unit">{{ t('priceUnit') }}</text>
+        </template>
+        <template v-else>
+          <text class="price-empty">{{ t('pricePending') }}</text>
+        </template>
+      </view>
+      
+      <!-- 支付方式作为高亮小签 -->
+      <view class="pay-method-tag" v-if="detailData.payMethod">
+        <text class="tn-icon-trusty-fill tag-icon"></text>
+        <text>{{ displayPayMethod }}</text>
+      </view>
+    </view>
+
+    <!-- 标签列表区 -->
+    <view class="tags-row tn-flex tn-flex-wrap" v-if="summaryBadges && summaryBadges.length">
+      <view v-for="(item, index) in summaryBadges" :key="index" class="badge-item">
+        {{ item }}
+      </view>
+    </view>
+
+    <!-- 地址导航区 -->
+    <view class="address-banner" v-if="displayAddress" @click="handleAddressClick">
+      <view class="address-bg-decoration">
+        <text class="tn-icon-map decoration-icon"></text>
+      </view>
+      <view class="address-content tn-flex tn-flex-row-between tn-flex-col-center">
+        <view class="address-left tn-flex tn-flex-col-center">
+          <view class="icon-wrap tn-flex tn-flex-row-center tn-flex-col-center">
+            <text class="tn-icon-location-fill location-icon"></text>
+          </view>
+          <view class="address-info">
+            <view class="address-text tn-text-ellipsis">{{ shortAddress }}</view>
+            <view class="address-sub tn-flex tn-flex-col-center">
+              <text class="address-sub-text">{{ t('addressHint') }}</text>
+              <text class="tn-icon-right address-sub-icon"></text>
+            </view>
+          </view>
+        </view>
+        <view class="address-right">
+          <view class="nav-btn tn-flex tn-flex-row-center tn-flex-col-center">
+            <text class="tn-icon-navigation-fill"></text>
+            <text class="nav-text">{{ t('navigate') }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { localizePayMethodText } from '../../../utils/select-room-normalizers'
+
+export default {
+  props: {
+    detailData: {
+      type: Object,
+      default: () => ({})
+    },
+    hasPrice: {
+      type: Boolean,
+      default: false
+    },
+    summaryBadges: {
+      type: Array,
+      default: () => []
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  computed: {
+    displayPayMethod() {
+      return localizePayMethodText(this.detailData.payMethod, this.language)
+    },
+    displayAddress() {
+      if (this.language === 'en') {
+        return this.detailData.addressEnDisplay || this.detailData.addressEn || this.detailData.address || ''
+      }
+      return this.detailData.address || this.detailData.addressEn || ''
+    },
+    shortAddress() {
+      const addr = this.displayAddress;
+      if (!addr) {
+        return this.t('noAddress')
+      }
+      if (this.language === 'en') {
+        return addr
+      }
+      const short = addr.replace(/^(?:.*?省|.*?自治区)?(?:.*?市|.*?自治州)?/, '');
+      return short.trim() ? short : (addr || this.t('noAddress'));
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.room_detail.room_detail', key)
+    },
+    handleAddressClick() {
+      this.$emit('open-map', this.detailData)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.summary-card {
+  background: #ffffff;
+  padding: 48rpx 32rpx 32rpx;
+  margin: 0;
+  position: relative;
+  z-index: 10;
+  border-bottom: 1rpx solid #F2F3F5;
+}
+
+/* 价格区域 */
+.price-header {
+  margin-bottom: 32rpx;
+}
+
+.price-block {
+  align-items: baseline;
+}
+
+.price-symbol {
+  font-size: 32rpx;
+  font-weight: 800;
+  color: #1D2129;
+  margin-right: 6rpx;
+  margin-bottom: 8rpx;
+}
+
+.price-value {
+  font-size: 72rpx;
+  line-height: 1;
+  font-weight: 800;
+  color: #1D2129;
+  font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  letter-spacing: -2rpx;
+}
+
+.price-unit {
+  font-size: 24rpx;
+  color: #86909C;
+  margin-left: 8rpx;
+  margin-bottom: 10rpx;
+}
+
+.price-empty {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #4E5969;
+}
+
+.pay-method-tag {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.1) 0%, rgba($brand-primary, 0.2) 100%);
+  color: $brand-primary;
+  padding: 10rpx 20rpx;
+  border-radius: 100rpx;
+  font-size: 24rpx;
+  font-weight: 700;
+  
+  .tag-icon {
+    font-size: 28rpx;
+    margin-right: 6rpx;
+  }
+}
+
+/* 标签区 */
+.tags-row {
+  gap: 16rpx;
+  margin-bottom: 32rpx;
+}
+
+.badge-item {
+  padding: 8rpx 16rpx;
+  border-radius: 8rpx;
+  background: #F2F3F5;
+  color: #4E5969;
+  font-size: 22rpx;
+  font-weight: 500;
+}
+
+/* 地址导航区 */
+.address-banner {
+  position: relative;
+  background: linear-gradient(135deg, #F0F6FF 0%, #F8FAFF 100%);
+  border-radius: 20rpx;
+  padding: 28rpx 24rpx;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.05);
+  overflow: hidden;
+  transition: all 0.2s;
+  
+  &:active {
+    transform: scale(0.98);
+    background: linear-gradient(135deg, #E8F2FF 0%, #F0F6FF 100%);
+  }
+}
+
+.address-bg-decoration {
+  position: absolute;
+  right: -20rpx;
+  top: -20rpx;
+  opacity: 0.04;
+  pointer-events: none;
+  
+  .decoration-icon {
+    font-size: 160rpx;
+    color: $brand-primary;
+  }
+}
+
+.address-content {
+  position: relative;
+  z-index: 2;
+}
+
+.address-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.icon-wrap {
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 20rpx;
+  background: #ffffff;
+  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.12);
+  margin-right: 20rpx;
+  flex-shrink: 0;
+}
+
+.location-icon {
+  font-size: 36rpx;
+  color: $brand-primary;
+}
+
+.address-info {
+  flex: 1;
+  min-width: 0;
+  padding-right: 20rpx;
+}
+
+.address-text {
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #1D2129;
+  margin-bottom: 8rpx;
+  line-height: 1.4;
+}
+
+.address-sub {
+  font-size: 22rpx;
+  color: $brand-primary;
+}
+
+.address-sub-text {
+  margin-right: 4rpx;
+}
+
+.address-sub-icon {
+  font-size: 20rpx;
+}
+
+.address-right {
+  flex-shrink: 0;
+  padding-left: 10rpx;
+}
+
+.nav-btn {
+  height: 60rpx;
+  padding: 0 24rpx;
+  border-radius: 100rpx;
+  background: #ffffff;
+  color: $brand-primary;
+  font-size: 24rpx;
+  font-weight: 700;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.08);
+  border: 1rpx solid rgba($brand-primary, 0.2);
+  
+  text.tn-icon-navigation-fill {
+    margin-right: 6rpx;
+    font-size: 26rpx;
+  }
+}
+</style>
diff --git a/pkgExplore/room_detail/room_detail.vue b/pkgExplore/room_detail/room_detail.vue
new file mode 100644
index 0000000..fe96259
--- /dev/null
+++ b/pkgExplore/room_detail/room_detail.vue
@@ -0,0 +1,1493 @@
+<template>
+  <view class="room-detail-page tn-safe-area-inset-bottom">
+    <tn-nav-bar
+      :isBack="true"
+      :bottomShadow="false"
+      :backgroundColor="navBarBackgroundColor"
+      :customBackStyle="navBarBackStyle"
+      :backIconColor="navBarIconColor"
+      :fixed="true"
+      class="glass-nav-bar"
+    >
+      <view class="nav-title" :style="{ opacity: navTitleOpacity, color: navTitleColor }">{{ displayName || t('navDetail') }}</view>
+    </tn-nav-bar>
+
+    <swiper
+      class="fullscreen-swiper"
+      vertical
+      :current="currentSwiperIndex"
+      @change="onSwiperChange"
+    >
+      <!-- 第一屏：沉浸式封面 -->
+      <swiper-item>
+        <room-hero
+          :detailData="detailData"
+          :galleryList="galleryList"
+          :hasVR="hasVR"
+          :showVrPanel="showVrPanel"
+          :vrPoster="vrPoster"
+          :showEnglishName="showEnglishName"
+          :currentMediaType="currentMediaType"
+          :language="language"
+          @swiper-change="onImageSwiperChange"
+          @open-vr="openVR"
+          @switch-media="switchMedia"
+        />
+      </swiper-item>
+
+      <!-- 第二屏：长内容详情 -->
+      <swiper-item>
+        <scroll-view
+          class="detail-scroll"
+          scroll-y
+          :show-scrollbar="false"
+          @scroll="handleScroll"
+          enable-back-to-top
+        >
+          <view class="scroll-content">
+            <view class="second-screen-shell">
+              <view class="second-screen-top-gap"></view>
+              <view class="compact-hero-panel">
+                <view v-if="showVrPanel" class="compact-vr-panel" @click="openVR">
+                  <image v-if="vrPoster" :src="vrPoster" mode="aspectFill" class="compact-hero-image"></image>
+                  <view v-else class="compact-hero-empty tn-flex tn-flex-col-center tn-flex-row-center">{{ t('noImage') }}</view>
+                  <view class="compact-vr-glow"></view>
+                </view>
+                <swiper
+                  v-else-if="galleryList.length"
+                  class="compact-hero-swiper"
+                  circular
+                  autoplay
+                  :interval="4200"
+                  :duration="700"
+                >
+                  <swiper-item v-for="(image, index) in galleryList" :key="`compact-${image}-${index}`">
+                    <image class="compact-hero-image" :src="image" mode="aspectFill"></image>
+                  </swiper-item>
+                </swiper>
+                <view v-else class="compact-hero-empty tn-flex tn-flex-col-center tn-flex-row-center">{{ t('noImage') }}</view>
+                <view class="compact-hero-mask"></view>
+                <view class="compact-hero-topbar tn-flex tn-flex-row-between tn-flex-col-center">
+                  <view v-if="hasVR" class="compact-media-tabs">
+                    <view
+                      class="compact-media-tab"
+                      :class="{ 'compact-media-tab--active': currentMediaType === 'image' }"
+                      @click="switchMedia('image')"
+                    >
+                      {{ t('imageTab') }}
+                    </view>
+                    <view
+                      class="compact-media-tab"
+                      :class="{ 'compact-media-tab--active': currentMediaType === 'vr' }"
+                      @click="switchMedia('vr')"
+                    >
+                      {{ t('vrTab') }}
+                    </view>
+                  </view>
+                  <view v-if="galleryList.length" class="compact-hero-counter">{{ t('imageCount', { count: galleryList.length }) }}</view>
+                </view>
+                <view class="compact-hero-action-layer">
+                  <view v-if="showVrPanel" class="compact-hero-center-action" @click="openVR">
+                    <view class="compact-hero-ring compact-hero-ring--outer"></view>
+                    <view class="compact-hero-ring compact-hero-ring--inner"></view>
+                    <view class="compact-hero-core">
+                      <text class="tn-icon-vr compact-hero-core-icon"></text>
+                    </view>
+                    <view class="compact-hero-action-text">
+                      <view class="compact-hero-action-title">{{ t('vrPreview') }}</view>
+                      <view class="compact-hero-action-desc">{{ t('vrPreviewDesc') }}</view>
+                    </view>
+                  </view>
+                  <view v-else class="compact-hero-center-action" @click="previewImage">
+                    <view class="compact-hero-ring compact-hero-ring--outer"></view>
+                    <view class="compact-hero-ring compact-hero-ring--inner"></view>
+                    <view class="compact-hero-core">
+                      <text class="tn-icon-image compact-hero-core-icon"></text>
+                    </view>
+                    <view class="compact-hero-action-text">
+                      <view class="compact-hero-action-title">{{ t('viewLargeImage') }}</view>
+                      <view class="compact-hero-action-desc">{{ t('viewLargeImageDesc') }}</view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view class="second-screen-body">
+                <room-summary
+                  :detailData="detailData"
+                  :hasPrice="hasPrice"
+                  :summaryBadges="summaryBadges"
+                  :language="language"
+                  @open-map="openMap"
+                />
+
+                <room-info
+                  :basicInfoRows="basicInfoRows"
+                  :displayDescriptions="displayDescriptions"
+                  :isRoomType="isRoomType"
+                  :shouldShowDescToggle="shouldShowDescToggle"
+                  :language="language"
+                >
+                  <room-assets
+                    v-if="assetList.length"
+                    :assetList="assetList"
+                    :language="language"
+                  />
+                </room-info>
+
+                <view class="bottom-spacer"></view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </swiper-item>
+    </swiper>
+
+    <view class="action-bar-wrap tn-safe-area-inset-bottom" :class="{ 'action-bar--visible': currentSwiperIndex === 1 }">
+      <view class="action-bar tn-flex tn-flex-row-between tn-flex-col-center">
+        <view class="action-left tn-flex tn-flex-col-center">
+          <button class="action-icon-btn" open-type="share">
+            <text class="tn-icon-share-circle action-icon-font"></text>
+            <text class="action-icon-text">{{ t('share') }}</text>
+          </button>
+        </view>
+        <view class="action-right tn-flex tn-flex-col-center">
+          <view class="action-btn action-btn--secondary" @click="handleBooking">
+            <text>{{ primaryActionText }}</text>
+          </view>
+          <view
+            v-if="isRoomType"
+            class="action-btn action-btn--primary"
+            @click="handleApplyStay"
+          >
+            <text>{{ t('applyStay') }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { ensureBookingAccess } from '../../utils/booking-guard'
+import { roomDetail, roomTypeDetail } from '@/api/index.js'
+import { compactEnglishText, localizePayMethodText, normalizeImageList } from '../../utils/select-room-normalizers'
+import { addFilePrefix } from '../../utils/common'
+import { normalizeRichTextImages } from '../../utils/rich-text'
+import { getCurrentLanguage } from '@/utils/i18n'
+import { getSessionSnapshot } from '@/utils/app-state'
+
+import RoomHero from './components/RoomHero.vue'
+import RoomSummary from './components/RoomSummary.vue'
+import RoomInfo from './components/RoomInfo.vue'
+import RoomAssets from './components/RoomAssets.vue'
+
+function normalizeText(value) {
+  if (typeof value !== 'string') {
+    return value || ''
+  }
+  return value.replace(/[\r\n]+/g, ' ').trim()
+}
+
+function normalizeRichText(value) {
+  if (typeof value !== 'string') {
+    return value || ''
+  }
+  let html = value.trim()
+  
+  // 如果是纯文本（不包含常见的 html 标签），则将换行符替换为 <br>
+  if (!/<\/?(p|div|img|br|span|h[1-6]|ul|li|ol|table|td|tr)[^>]*>/i.test(html)) {
+    html = html.replace(/[\r\n]+/g, '<br/>')
+  }
+
+  html = normalizeRichTextImages(
+    html,
+    'display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;border-radius:12px;margin:8px 0;vertical-align:top;'
+  )
+  html = html.replace(/<p/gi, '<p style="line-height:1.8;color:#4E5969;margin-bottom:12px;"')
+  return html
+}
+
+function stripHtmlTags(html) {
+  if (!html) return ''
+  return html.replace(/<[^>]+>/g, '')
+}
+
+function normalizeAssetIconClass(icon) {
+  const rawIcon = String(icon || '').trim()
+  if (!rawIcon) {
+    return ''
+  }
+  if (/^ri-[a-z0-9-]+$/i.test(rawIcon)) {
+    return rawIcon
+  }
+  if (
+    /^[a-z0-9-]+$/i.test(rawIcon) &&
+    !/[\\/]/.test(rawIcon) &&
+    !/\.[a-z0-9]+$/i.test(rawIcon)
+  ) {
+    return `ri-${rawIcon}`
+  }
+  return ''
+}
+
+function resolveNumericValue(...values) {
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i]
+    if (value === '' || value === null || typeof value === 'undefined') {
+      continue
+    }
+    if (typeof value === 'number') {
+      return value
+    }
+    const matched = String(value).match(/(\d+(\.\d+)?)/)
+    if (matched) {
+      return matched[1]
+    }
+  }
+  return ''
+}
+
+function parseCoordinate(...values) {
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i]
+    if (value === '' || value === null || typeof value === 'undefined') {
+      continue
+    }
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) {
+      return parsed
+    }
+  }
+  return null
+}
+
+function parseEncodedJson(value, fallback = {}, errorMessage = 'parse encoded json error') {
+  return Promise.resolve(value)
+    .then(decodeURIComponent)
+    .then(JSON.parse)
+    .catch((error) => {
+      console.error(errorMessage, error)
+      return fallback
+    })
+}
+
+function buildNavigationUrl(path = '', query = {}) {
+  const queryString = Object.keys(query).reduce((result, key) => {
+    const value = query[key]
+    if (value === '' || value === null || typeof value === 'undefined') {
+      return result
+    }
+    result.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+    return result
+  }, []).join('&')
+  return `${path}${queryString ? `?${queryString}` : ''}`
+}
+
+function normalizePricePlan(pricePlan = {}, fallback = {}) {
+  const source = pricePlan && typeof pricePlan === 'object' ? pricePlan : {}
+  const fallbackPlan = fallback && typeof fallback === 'object' ? fallback : {}
+  return {
+    finalPrice: resolveNumericValue(
+      source.finalPrice,
+      source.price,
+      fallbackPlan.finalPrice,
+      fallbackPlan.price
+    ),
+    matchedStrategies: normalizeText(
+      source.matchedStrategies || source.payMethod || fallbackPlan.matchedStrategies || fallbackPlan.payMethod
+    )
+  }
+}
+
+function createInitialDetail() {
+  return {
+    roomCode: '',
+    roomTypeCode: '',
+    roomTypeName: '',
+    roomTypeNameEn: '',
+    roomTypeNameEnDisplay: '',
+    areaCode: '',
+    name: '',
+    nameEn: '',
+    nameEnDisplay: '',
+    description: '',
+    descriptionEn: '',
+    pricePlan: {
+      finalPrice: '',
+      matchedStrategies: ''
+    },
+    priceValue: '',
+    payMethod: '',
+    areaName: '',
+    areaNameEn: '',
+    areaNameEnDisplay: '',
+    address: '',
+    addressEn: '',
+    addressEnDisplay: '',
+    latitude: '',
+    longitude: '',
+    buildingName: '',
+    buildingNameEn: '',
+    buildingNameEnDisplay: '',
+    buildingSectionName: '',
+    buildingSectionNameEn: '',
+    buildingSectionNameEnDisplay: '',
+    floorName: '',
+    floorNameEn: '',
+    floorNameEnDisplay: '',
+    orientation: '',
+    orientationEn: '',
+    statusText: '',
+    image: '',
+    images: [],
+    vrMockEnabled: false,
+    needApproval: null,
+    maxMinutes: '',
+    bookRoomCountOnDay: '',
+    bookLimitTime: '',
+    isFunction: null,
+    assets: []
+  }
+}
+
+function getStatusText(status) {
+  const language = getCurrentLanguage()
+  const map = language === 'en'
+    ? {
+        0: 'Unpublished',
+        10: 'Published',
+        11: 'Under Maintenance',
+        999: 'Disabled'
+      }
+    : {
+        0: '未上架',
+        10: '已上架',
+        11: '维护中',
+        999: '已禁用'
+      }
+  return map[status] || ''
+}
+
+function localizeKnownStatusText(text = '', language = 'zh') {
+  const normalized = String(text || '').trim()
+  if (!normalized) {
+    return ''
+  }
+  const map = {
+    '未上架': { zh: '未上架', en: 'Unpublished' },
+    '已上架': { zh: '已上架', en: 'Published' },
+    '维护中': { zh: '维护中', en: 'Under Maintenance' },
+    '已禁用': { zh: '已禁用', en: 'Disabled' },
+    'Unpublished': { zh: '未上架', en: 'Unpublished' },
+    'Published': { zh: '已上架', en: 'Published' },
+    'Under Maintenance': { zh: '维护中', en: 'Under Maintenance' },
+    'Disabled': { zh: '已禁用', en: 'Disabled' }
+  }
+  if (!map[normalized]) {
+    return normalized
+  }
+  return language === 'en' ? map[normalized].en : map[normalized].zh
+}
+
+function normalizeRoomTypeDetail(area = {}, roomType = {}) {
+  const extra = roomType.extra || {}
+  const images = normalizeImageList(roomType)
+  const pricePlan = normalizePricePlan(roomType.pricePlan, roomType.pricePlanDetail)
+  const priceValue = resolveNumericValue(
+    pricePlan.finalPrice,
+    roomType && roomType.pricePlanDetail ? roomType.pricePlanDetail.price : '',
+    roomType.price
+  )
+
+  return {
+    ...createInitialDetail(),
+    roomTypeCode: roomType.code || '',
+    roomTypeName: roomType.name || '',
+    roomTypeNameEn: roomType.nameEn || '',
+    roomTypeNameEnDisplay: compactEnglishText(roomType.nameEn || '', 22),
+    areaCode: area.code || '',
+    name: roomType.name || '',
+    nameEn: roomType.nameEn || '',
+    nameEnDisplay: compactEnglishText(roomType.nameEn || '', 24),
+    description: normalizeRichText(roomType.description),
+    descriptionEn: normalizeRichText(roomType.descriptionEn),
+    pricePlan,
+    priceValue,
+    payMethod: pricePlan.matchedStrategies || roomType.payMethod || '',
+    areaName: area.name || '',
+    areaNameEn: area.nameEn || '',
+    areaNameEnDisplay: compactEnglishText(area.nameEn || '', 22),
+    address: area.address || '',
+    addressEn: area.addressEn || '',
+    addressEnDisplay: compactEnglishText(area.addressEn || '', 32),
+    latitude: area.latitude || area.lat || '',
+    longitude: area.longitude || area.lng || '',
+    image: images[0] || '',
+    images,
+    // 保留 VR 预览入口，后续可按真实接口字段进一步控制展示条件
+    vrMockEnabled: true,
+    needApproval: typeof extra.needApproval === 'boolean' ? extra.needApproval : null,
+    maxMinutes: resolveNumericValue(extra.maxMinutes, roomType.maxMinutes),
+    bookRoomCountOnDay: resolveNumericValue(extra.bookRoomCountOnDay, roomType.bookRoomCountOnDay),
+    bookLimitTime: resolveNumericValue(extra.bookLimitTime, roomType.bookLimitTime),
+    isFunction: typeof roomType.isFunction === 'boolean' ? roomType.isFunction : null,
+    assets: normalizeRoomAssets(roomType.assets)
+  }
+}
+
+function normalizeRoomAssets(list = []) {
+  if (!Array.isArray(list)) {
+    return []
+  }
+
+  return list
+    .map((item, index) => {
+      if (!item || typeof item !== 'object') {
+        return null
+      }
+      const assetName = normalizeText(item.assetName || item.name || item.label)
+      if (!assetName) {
+        return null
+      }
+      const rawIcon = String(item.icon || '').trim()
+      const rawIconClass = String(item.iconClass || '').trim()
+      const iconClass = normalizeAssetIconClass(rawIconClass || rawIcon)
+      return {
+        key: `${item.roomTypeCode || 'asset'}-${item.assetName || item.name || index}`,
+        roomTypeCode: item.roomTypeCode || '',
+        assetName,
+        brand: normalizeText(item.brand),
+        icon: iconClass ? '' : addFilePrefix(rawIcon),
+        iconClass,
+        defaultQuantity: Number(item.defaultQuantity) > 0 ? Number(item.defaultQuantity) : 1,
+        isRequired: Boolean(item.isRequired),
+        sort: Number.isFinite(Number(item.sort)) ? Number(item.sort) : 9999
+      }
+    })
+    .filter(Boolean)
+    .sort((prev, next) => {
+      if (prev.sort !== next.sort) {
+        return prev.sort - next.sort
+      }
+      return prev.assetName.localeCompare(next.assetName)
+    })
+}
+
+function createRoomFallbackDetail(raw = {}) {
+  const images = normalizeImageList(raw)
+  const pricePlan = normalizePricePlan(raw.pricePlan)
+  return {
+    ...createInitialDetail(),
+    roomCode: raw.roomCode || raw.code || '',
+    roomTypeCode: raw.roomTypeCode || '',
+    roomTypeName: raw.roomTypeName || '',
+    roomTypeNameEn: raw.roomTypeNameEn || '',
+    roomTypeNameEnDisplay: compactEnglishText(raw.roomTypeNameEn || '', 22),
+    name: raw.name || raw.no || '',
+    nameEn: raw.nameEn || '',
+    nameEnDisplay: compactEnglishText(raw.nameEn || '', 24),
+    description: normalizeRichText(raw.description || raw.remark),
+    pricePlan,
+    priceValue: resolveNumericValue(pricePlan.finalPrice, raw.price),
+    payMethod: pricePlan.matchedStrategies || raw.payMethod || '',
+    areaName: raw.areaName || '',
+    areaNameEn: raw.areaNameEn || '',
+    areaNameEnDisplay: compactEnglishText(raw.areaNameEn || '', 22),
+    address: raw.address || [raw.areaName, raw.buildingName, raw.buildingSectionName].filter(Boolean).join(' · '),
+    addressEn: raw.addressEn || '',
+    addressEnDisplay: compactEnglishText(raw.addressEn || '', 32),
+    buildingName: raw.buildingName || '',
+    buildingNameEn: raw.buildingNameEn || '',
+    buildingNameEnDisplay: compactEnglishText(raw.buildingNameEn || '', 20),
+    buildingSectionName: raw.buildingSectionName || '',
+    buildingSectionNameEn: raw.buildingSectionNameEn || '',
+    buildingSectionNameEnDisplay: compactEnglishText(raw.buildingSectionNameEn || '', 18),
+    floorName: raw.floorName || '',
+    floorNameEn: raw.floorNameEn || '',
+    floorNameEnDisplay: compactEnglishText(raw.floorNameEn || '', 16),
+    orientation: raw.orientation || '',
+    orientationEn: raw.orientationEn || '',
+    statusText: raw.statusText || '',
+    image: images[0] || '',
+    images
+  }
+}
+
+function normalizeRoomDetailResponse(raw = {}, fallback = {}) {
+  const images = normalizeImageList(raw)
+  const pricePlan = normalizePricePlan(raw.pricePlan, fallback.pricePlan)
+  return {
+    ...createInitialDetail(),
+    ...fallback,
+    roomCode: raw.code || fallback.roomCode || '',
+    roomTypeCode: raw.roomTypeCode || fallback.roomTypeCode || '',
+    roomTypeName: raw.roomTypeName || fallback.roomTypeName || '',
+    roomTypeNameEn: raw.roomTypeNameEn || fallback.roomTypeNameEn || '',
+    roomTypeNameEnDisplay: compactEnglishText(raw.roomTypeNameEn || fallback.roomTypeNameEn || '', 22),
+    name: raw.no || fallback.name || '',
+    nameEn: raw.nameEn || fallback.nameEn || '',
+    nameEnDisplay: compactEnglishText(raw.nameEn || fallback.nameEn || '', 24),
+    description: normalizeRichText(raw.description || raw.remark || fallback.description),
+    pricePlan,
+    priceValue: resolveNumericValue(pricePlan.finalPrice, raw.monthlyRent, raw.price, raw.rent, fallback.priceValue),
+    payMethod: pricePlan.matchedStrategies || raw.payMethod || fallback.payMethod || '',
+    areaName: raw.areaName || fallback.areaName || '',
+    areaNameEn: raw.areaNameEn || fallback.areaNameEn || '',
+    areaNameEnDisplay: compactEnglishText(raw.areaNameEn || fallback.areaNameEn || '', 22),
+    address: [raw.areaName, raw.buildingName, raw.buildingSectionName].filter(Boolean).join(' · ') || fallback.address || '',
+    addressEn: raw.addressEn || fallback.addressEn || '',
+    addressEnDisplay: compactEnglishText(raw.addressEn || fallback.addressEn || '', 32),
+    buildingName: raw.buildingName || fallback.buildingName || '',
+    buildingNameEn: raw.buildingNameEn || fallback.buildingNameEn || '',
+    buildingNameEnDisplay: compactEnglishText(raw.buildingNameEn || fallback.buildingNameEn || '', 20),
+    buildingSectionName: raw.buildingSectionName || fallback.buildingSectionName || '',
+    buildingSectionNameEn: raw.buildingSectionNameEn || fallback.buildingSectionNameEn || '',
+    buildingSectionNameEnDisplay: compactEnglishText(raw.buildingSectionNameEn || fallback.buildingSectionNameEn || '', 18),
+    floorName: raw.floorName || fallback.floorName || '',
+    floorNameEn: raw.floorNameEn || fallback.floorNameEn || '',
+    floorNameEnDisplay: compactEnglishText(raw.floorNameEn || fallback.floorNameEn || '', 16),
+    orientation: raw.orientation || fallback.orientation || '',
+    orientationEn: raw.orientationEn || fallback.orientationEn || '',
+    statusText: getStatusText(raw.status) || fallback.statusText || '',
+    image: images[0] || fallback.image || '',
+    images: images.length ? images : (fallback.images || [])
+  }
+}
+
+function normalizeRoomTypeDetailResponse(raw = {}, fallback = {}) {
+  const extra = raw.extra || {}
+  const images = normalizeImageList(raw)
+  const pricePlan = normalizePricePlan(raw.pricePlan, raw.pricePlanDetail || fallback.pricePlan)
+  const priceValue = resolveNumericValue(
+    pricePlan.finalPrice,
+    raw && raw.pricePlanDetail ? raw.pricePlanDetail.price : '',
+    raw.price,
+    fallback.priceValue
+  )
+
+  return {
+    ...createInitialDetail(),
+    ...fallback,
+    roomTypeCode: raw.code || fallback.roomTypeCode || '',
+    roomTypeName: raw.name || fallback.roomTypeName || fallback.name || '',
+    roomTypeNameEn: raw.nameEn || raw.roomTypeNameEn || fallback.roomTypeNameEn || fallback.nameEn || '',
+    roomTypeNameEnDisplay: compactEnglishText(raw.nameEn || raw.roomTypeNameEn || fallback.roomTypeNameEn || fallback.nameEn || '', 22),
+    name: raw.name || fallback.name || '',
+    nameEn: raw.nameEn || fallback.nameEn || '',
+    nameEnDisplay: compactEnglishText(raw.nameEn || fallback.nameEn || '', 24),
+    description: normalizeRichText(raw.description || fallback.description),
+    descriptionEn: normalizeRichText(raw.descriptionEn || fallback.descriptionEn),
+    pricePlan,
+    priceValue,
+    payMethod: pricePlan.matchedStrategies || raw.payMethod || fallback.payMethod || '',
+    image: images[0] || fallback.image || '',
+    images: images.length ? images : (fallback.images || []),
+    vrMockEnabled: fallback.vrMockEnabled !== false,
+    needApproval: typeof extra.needApproval === 'boolean' ? extra.needApproval : fallback.needApproval,
+    maxMinutes: resolveNumericValue(extra.maxMinutes, raw.maxMinutes, fallback.maxMinutes),
+    bookRoomCountOnDay: resolveNumericValue(extra.bookRoomCountOnDay, raw.bookRoomCountOnDay, fallback.bookRoomCountOnDay),
+    bookLimitTime: resolveNumericValue(extra.bookLimitTime, raw.bookLimitTime, fallback.bookLimitTime),
+    isFunction: typeof raw.isFunction === 'boolean' ? raw.isFunction : fallback.isFunction,
+    assets: normalizeRoomAssets(raw.assets).length ? normalizeRoomAssets(raw.assets) : (fallback.assets || [])
+  }
+}
+
+export default {
+  components: {
+    RoomHero,
+    RoomSummary,
+    RoomInfo,
+    RoomAssets
+  },
+  data() {
+    return {
+      detailMode: 'room',
+      roomCode: '',
+      detailData: createInitialDetail(),
+      detailLoadedFromApi: false,
+      isDetailLoading: false,
+      scrollTop: 0,
+      currentSwiperIndex: 0,
+      currentMediaType: 'image',
+      autoSwitchTimer: null,
+      hasAutoSwitched: false,
+      sourceRoomTypeData: null,
+      sourceAreaData: null,
+      sourceRoomData: null
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    isRoomType() {
+      return this.detailMode === 'room-type'
+    },
+    navBarBackgroundColor() {
+      if (this.currentSwiperIndex === 0) return 'rgba(255, 255, 255, 0)';
+      return '#FFFFFF'
+    },
+    navBarBackStyle() {
+      const isDarkBg = this.currentSwiperIndex === 0 || this.scrollTop < 40;
+      return {
+        transition: 'all 0.2s ease',
+        background: isDarkBg ? 'rgba(0, 0, 0, 0.4)' : '#FFFFFF',
+        borderRadius: '50%',
+        width: '64rpx',
+        height: '64rpx',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: '12rpx',
+        boxShadow: isDarkBg ? 'none' : '0 8rpx 20rpx rgba(15, 23, 42, 0.12)'
+      }
+    },
+    navBarIconColor() {
+      const isDarkBg = this.currentSwiperIndex === 0 || this.scrollTop < 40;
+      return isDarkBg ? '#FFFFFF' : '#000000';
+    },
+    navTitleColor() {
+      return '#000000';
+    },
+    navTitleOpacity() {
+      if (this.currentSwiperIndex === 0) return 0;
+      return Math.min(Math.max((this.scrollTop - 40) / 50, 0), 1)
+    },
+    galleryList() {
+      return Array.isArray(this.detailData.images) ? this.detailData.images.filter(Boolean) : []
+    },
+    hasVR() {
+      return this.isRoomType && this.detailData.vrMockEnabled
+    },
+    showVrPanel() {
+      return this.hasVR && this.currentMediaType === 'vr'
+    },
+    vrPoster() {
+      return this.galleryList[1] || this.galleryList[0] || ''
+    },
+    showEnglishName() {
+      return this.detailData.nameEn && this.detailData.nameEn !== this.detailData.name
+    },
+    displayName() {
+      return this.language === 'en'
+        ? (this.detailData.nameEnDisplay || this.detailData.nameEn || this.detailData.name || '')
+        : (this.detailData.name || '')
+    },
+    displayCode() {
+      return this.isRoomType ? this.detailData.roomTypeCode : this.detailData.roomCode
+    },
+    hasPrice() {
+      return this.detailData.priceValue !== '' && this.detailData.priceValue !== null
+    },
+    primaryActionText() {
+      return this.isRoomType ? this.t('applyViewing') : this.t('bookRoom')
+    },
+    summaryBadges() {
+      const badges = []
+      if (this.detailData.areaName) {
+        badges.push(this.language === 'en'
+          ? (this.detailData.areaNameEnDisplay || this.detailData.areaNameEn || this.detailData.areaName)
+          : (this.detailData.areaName || ''))
+      }
+      if (this.detailData.payMethod) {
+        badges.push(localizePayMethodText(this.detailData.payMethod, this.language))
+      }
+      if (this.isRoomType && this.detailData.needApproval === true) {
+        badges.push(this.t('needApproval'))
+      }
+      if (this.isRoomType && this.detailData.needApproval === false) {
+        badges.push(this.t('noApprovalNeeded'))
+      }
+      return badges
+    },
+    basicInfoRows() {
+      const rows = this.isRoomType
+        ? [
+            { label: this.t('roomTypeNameLabel'), value: this.displayName },
+            { label: this.t('englishNameLabel'), value: this.showEnglishName ? (this.detailData.nameEnDisplay || this.detailData.nameEn) : '' },
+            { label: this.t('areaLabel'), value: this.language === 'en' ? (this.detailData.areaNameEnDisplay || this.detailData.areaNameEn || this.detailData.areaName) : (this.detailData.areaName || '') },
+            { label: this.t('payMethodLabel'), value: localizePayMethodText(this.detailData.pricePlan.matchedStrategies || this.detailData.payMethod, this.language) },
+            { label: this.t('priceLabel'), value: this.hasPrice ? `¥${this.detailData.priceValue}` : '' }
+          ]
+        : [
+            { label: this.t('roomCodeLabel'), value: this.detailData.roomCode },
+            { label: this.t('roomTypeLabel'), value: this.language === 'en' ? (this.detailData.roomTypeNameEnDisplay || this.detailData.roomTypeNameEn || this.detailData.roomTypeName) : (this.detailData.roomTypeName || '') },
+            { label: this.t('buildingLabel'), value: this.language === 'en' ? (this.detailData.buildingNameEnDisplay || this.detailData.buildingNameEn || this.detailData.buildingName) : (this.detailData.buildingName || '') },
+            { label: this.t('unitLabel'), value: this.language === 'en' ? (this.detailData.buildingSectionNameEnDisplay || this.detailData.buildingSectionNameEn || this.detailData.buildingSectionName) : (this.detailData.buildingSectionName || '') },
+            { label: this.t('floorLabel'), value: this.language === 'en' ? (this.detailData.floorNameEnDisplay || this.detailData.floorNameEn || this.detailData.floorName) : (this.detailData.floorName || '') },
+            { label: this.t('orientationLabel'), value: this.language === 'en' ? (this.detailData.orientationEn || this.detailData.orientation) : (this.detailData.orientation || '') },
+            { label: this.t('statusLabel'), value: localizeKnownStatusText(this.detailData.statusText, this.language) }
+          ]
+
+      return rows.filter((item) => item.value)
+    },
+    displayDescriptions() {
+      const primary = this.language === 'en'
+        ? (this.detailData.descriptionEn || this.detailData.description || '')
+        : (this.detailData.description || '')
+      const secondary = this.language === 'en'
+        ? (this.detailData.description || '')
+        : ''
+      const list = [primary]
+      if (this.showEnglishName && secondary && secondary !== primary) {
+        list.push(secondary)
+      }
+      return list.filter(Boolean)
+    },
+    shouldShowDescToggle() {
+      if (!this.displayDescriptions.length) return false
+      const combinedHtml = this.displayDescriptions.join('')
+      return stripHtmlTags(combinedHtml).length > 72 || /<img/i.test(combinedHtml)
+    },
+    assetList() {
+      return this.isRoomType && Array.isArray(this.detailData.assets)
+        ? this.detailData.assets.filter(Boolean)
+        : []
+    }
+  },
+  watch: {
+    language() {
+      if (this.isRoomType) {
+        const roomTypeCode = this.detailData.roomTypeCode || (this.sourceRoomTypeData && this.sourceRoomTypeData.code) || ''
+        if (roomTypeCode && this.canLoadRoomTypeDetail()) {
+          this.loadRoomTypeDetail(roomTypeCode)
+        }
+        return
+      }
+      if (this.roomCode) {
+        this.loadDetail()
+      }
+    }
+  },
+  onLoad(options) {
+    this.roomCode = options.roomCode || ''
+
+    if (options.roomTypeData || options.roomTypeCode) {
+      const roomTypeTask = options.roomTypeData
+        ? parseEncodedJson(options.roomTypeData, {}, 'parse room type detail error')
+        : Promise.resolve({ code: options.roomTypeCode || '' })
+      const areaTask = options.areaData
+        ? parseEncodedJson(options.areaData, {}, 'parse room area detail error')
+        : Promise.resolve({})
+
+      Promise.all([roomTypeTask, areaTask]).then(([roomType, area]) => {
+        this.detailMode = 'room-type'
+        this.sourceRoomTypeData = roomType
+        this.sourceAreaData = area
+        this.detailData = normalizeRoomTypeDetail(area, roomType)
+        if (roomType && roomType.code && this.canLoadRoomTypeDetail()) {
+          this.loadRoomTypeDetail(roomType.code)
+        }
+      })
+    }
+
+    if (options.roomData) {
+      parseEncodedJson(options.roomData, {}, 'parse room detail fallback error').then((parsed) => {
+        this.sourceRoomData = parsed
+        this.detailData = createRoomFallbackDetail(parsed)
+      })
+    }
+
+    if (this.roomCode && !this.isRoomType) {
+      this.loadDetail()
+    }
+    this.scheduleAutoSwitch()
+  },
+  onUnload() {
+    this.clearAutoSwitchTimer()
+  },
+  onShareAppMessage() {
+    return {
+      title: this.displayName || this.t('shareTitle'),
+      path: this.buildSharePath(),
+      imageUrl: this.detailData.image || ''
+    }
+  },
+  onShareTimeline() {
+    return {
+      title: this.displayName || this.t('shareTitle'),
+      query: this.buildShareQuery(),
+      imageUrl: this.detailData.image || ''
+    }
+  },
+  methods: {
+    t(key, params = {}) {
+      return this.$tm('pkgExplore.room_detail.room_detail', key, params)
+    },
+    scheduleAutoSwitch() {
+      if (this.hasAutoSwitched || this.currentSwiperIndex !== 0) {
+        return
+      }
+      this.clearAutoSwitchTimer()
+      this.autoSwitchTimer = setTimeout(() => {
+        if (this.currentSwiperIndex === 0) {
+          this.currentSwiperIndex = 1
+          this.hasAutoSwitched = true
+        }
+        this.clearAutoSwitchTimer()
+      }, 1000)
+    },
+    clearAutoSwitchTimer() {
+      if (this.autoSwitchTimer) {
+        clearTimeout(this.autoSwitchTimer)
+        this.autoSwitchTimer = null
+      }
+    },
+    buildShareQuery() {
+      if (this.isRoomType && this.sourceRoomTypeData) {
+        const roomTypeData = encodeURIComponent(JSON.stringify(this.sourceRoomTypeData))
+        const areaData = this.sourceAreaData ? encodeURIComponent(JSON.stringify(this.sourceAreaData)) : ''
+        return `roomTypeData=${roomTypeData}${areaData ? `&areaData=${areaData}` : ''}`
+      }
+      if (this.isRoomType && this.detailData.roomTypeCode) {
+        const areaData = this.sourceAreaData ? `&areaData=${encodeURIComponent(JSON.stringify(this.sourceAreaData))}` : ''
+        return `roomTypeCode=${encodeURIComponent(this.detailData.roomTypeCode)}${areaData}`
+      }
+      if (this.roomCode) {
+        return `roomCode=${encodeURIComponent(this.roomCode)}`
+      }
+      return ''
+    },
+    buildSharePath() {
+      const query = this.buildShareQuery()
+      return `/pkgExplore/room_detail/room_detail${query ? `?${query}` : ''}`
+    },
+    onSwiperChange(e) {
+      this.currentSwiperIndex = e.detail.current
+      if (e.detail.current !== 0) {
+        this.hasAutoSwitched = true
+      }
+      this.clearAutoSwitchTimer()
+    },
+    handleScroll(e) {
+      this.scrollTop = e.detail.scrollTop
+    },
+    onImageSwiperChange(e) {
+      // event bubbled from RoomHero if needed
+    },
+    switchMedia(type) {
+      this.currentMediaType = type
+    },
+    previewImage() {
+      if (!this.galleryList.length) {
+        uni.showToast({ title: this.t('noPreviewImage'), icon: 'none' })
+        return
+      }
+      uni.previewImage({
+        urls: this.galleryList,
+        current: this.galleryList[0]
+      })
+    },
+    openMap(detail) {
+      const latitude = parseCoordinate(
+        detail && detail.latitude,
+        detail && detail.lat,
+        this.sourceAreaData && this.sourceAreaData.latitude,
+        this.sourceAreaData && this.sourceAreaData.lat
+      )
+      const longitude = parseCoordinate(
+        detail && detail.longitude,
+        detail && detail.lng,
+        this.sourceAreaData && this.sourceAreaData.longitude,
+        this.sourceAreaData && this.sourceAreaData.lng
+      )
+      if (latitude === null || longitude === null) {
+        uni.showToast({ title: this.t('noLocation'), icon: 'none' });
+        return;
+      }
+      uni.openLocation({
+        latitude,
+        longitude,
+        name: this.language === 'en'
+          ? (detail.buildingNameEnDisplay || detail.buildingNameEn || detail.areaNameEnDisplay || detail.areaNameEn || detail.buildingName || detail.areaName || this.displayName || this.t('apartmentName'))
+          : (detail.buildingName || detail.areaName || this.displayName || this.t('apartmentName')),
+        address: this.language === 'en'
+          ? (detail.addressEnDisplay || detail.addressEn || detail.address || (this.sourceAreaData && (this.sourceAreaData.addressEnDisplay || this.sourceAreaData.addressEn || this.sourceAreaData.address)) || '')
+          : (detail.address || (this.sourceAreaData && this.sourceAreaData.address) || ''),
+        scale: 18
+      });
+    },
+    openVR() {
+      const titleZh = `${this.displayName || this.t('roomTypeFallback')} ${this.t('vrViewingTitle')}`
+      const englishName = this.detailData.roomTypeNameEnDisplay
+        || this.detailData.roomTypeNameEn
+        || this.detailData.nameEnDisplay
+        || this.detailData.nameEn
+        || this.displayName
+        || this.t('roomTypeFallback')
+      const titleEn = `${englishName} ${this.t('vrViewingTitle')}`
+      uni.navigateTo({
+        url: `/pkgExplore/vr_preview/vr_preview?title=${encodeURIComponent(this.language === 'en' ? titleEn : titleZh)}&titleZh=${encodeURIComponent(titleZh)}&titleEn=${encodeURIComponent(titleEn)}&poster=${encodeURIComponent(this.vrPoster || '')}`
+      })
+    },
+    openServiceEntry({ path, title, desc, key, payload }) {
+      uni.navigateTo({
+        url: this.buildServiceEntryUrl({ path, title, desc, key, payload })
+      })
+    },
+    buildServiceEntryUrl({ path, title, desc, key, payload }) {
+      return buildNavigationUrl(path, {
+        title,
+        desc,
+        key,
+        payload: JSON.stringify(payload || {})
+      })
+    },
+    canLoadRoomTypeDetail() {
+      const session = getSessionSnapshot()
+      return !!(session && session.isLogin)
+    },
+    loadDetail() {
+      this.isDetailLoading = true
+
+      return roomDetail({ code: this.roomCode }, this.language)
+        .then((res) => {
+        const rawData = res && res.data && res.data.data ? res.data.data : (res && res.data ? res.data : res)
+        if (rawData && (rawData.code || rawData.no || rawData.roomTypeName)) {
+          this.detailData = normalizeRoomDetailResponse(rawData, this.detailData)
+          this.detailLoadedFromApi = true
+        } else {
+          this.detailLoadedFromApi = false
+        }
+        })
+        .catch((error) => {
+        console.error('load room detail error', error)
+        this.detailLoadedFromApi = false
+        })
+        .finally(() => {
+        this.isDetailLoading = false
+        })
+    },
+    loadRoomTypeDetail(roomTypeCode = '') {
+      if (!roomTypeCode || !this.canLoadRoomTypeDetail()) {
+        return Promise.resolve()
+      }
+
+      this.isDetailLoading = true
+      return roomTypeDetail({ code: roomTypeCode }, this.$getLanguage())
+        .then((res) => {
+          const rawData = res && res.data && res.data.data ? res.data.data : (res && res.data ? res.data : res)
+          if (rawData && (rawData.code || rawData.name)) {
+            this.detailData = normalizeRoomTypeDetailResponse(rawData, this.detailData)
+            this.sourceRoomTypeData = {
+              ...(this.sourceRoomTypeData || {}),
+              ...rawData
+            }
+            this.detailLoadedFromApi = true
+          } else {
+            this.detailLoadedFromApi = false
+          }
+        })
+        .catch((error) => {
+          console.error('load room type detail error', error)
+          this.detailLoadedFromApi = false
+        })
+        .finally(() => {
+          this.isDetailLoading = false
+        })
+    },
+    handleBooking() {
+      const bookingPayload = this.isRoomType
+        ? {
+            sourceType: 'room-detail-viewing',
+            areaCode: this.detailData.areaCode,
+            areaLabel: this.detailData.areaName,
+            areaLabelEn: this.detailData.areaNameEn || '',
+            areaLabelEnDisplay: this.detailData.areaNameEnDisplay || this.detailData.areaNameEn || '',
+            areaName: this.detailData.areaName,
+            areaNameEn: this.detailData.areaNameEn || '',
+            areaNameEnDisplay: this.detailData.areaNameEnDisplay || this.detailData.areaNameEn || '',
+            roomTypeCode: this.detailData.roomTypeCode,
+            roomTypeName: this.detailData.roomTypeName || this.detailData.name,
+            roomTypeNameEn: this.detailData.roomTypeNameEn || this.detailData.nameEn || '',
+            roomTypeNameEnDisplay: this.detailData.roomTypeNameEnDisplay || this.detailData.roomTypeNameEn || this.detailData.nameEnDisplay || this.detailData.nameEn || '',
+            roomName: this.detailData.name,
+            roomNameEn: this.detailData.nameEn || '',
+            roomNameEnDisplay: this.detailData.nameEnDisplay || this.detailData.nameEn || '',
+            price: this.detailData.priceValue,
+            payMethod: this.detailData.pricePlan.matchedStrategies || this.detailData.payMethod,
+            image: this.detailData.image
+          }
+        : null
+      const applyData = this.isRoomType
+        ? null
+        : {
+            styleNameZh: this.detailData.name,
+            styleNameEn: this.detailData.nameEn || '',
+            styleNameEnDisplay: this.detailData.nameEnDisplay || this.detailData.nameEn || '',
+            roomCode: this.detailData.roomCode,
+            roomTypeCode: this.detailData.roomTypeCode,
+            roomTypeName: this.detailData.roomTypeName,
+            roomTypeNameEn: this.detailData.roomTypeNameEn || this.detailData.nameEn || '',
+            roomTypeNameEnDisplay: this.detailData.roomTypeNameEnDisplay || this.detailData.roomTypeNameEn || this.detailData.nameEnDisplay || this.detailData.nameEn || '',
+            building: this.detailData.buildingName || this.detailData.buildingSectionName || this.detailData.areaName || '',
+            buildingEn: this.detailData.buildingNameEn || this.detailData.buildingSectionNameEn || this.detailData.areaNameEn || '',
+            buildingEnDisplay: this.detailData.buildingNameEnDisplay || this.detailData.buildingNameEn || this.detailData.buildingSectionNameEnDisplay || this.detailData.buildingSectionNameEn || this.detailData.areaNameEnDisplay || this.detailData.areaNameEn || '',
+            floor: this.detailData.floorName || '',
+            floorEn: this.detailData.floorNameEn || '',
+            floorEnDisplay: this.detailData.floorNameEnDisplay || this.detailData.floorNameEn || '',
+            image: this.detailData.image,
+            roomArea: this.detailData.address || '',
+            roomAreaEn: this.detailData.addressEn || '',
+            roomAreaEnDisplay: this.detailData.addressEnDisplay || this.detailData.addressEn || '',
+            areaCode: this.detailData.areaCode || '',
+            areaName: this.detailData.areaName || '',
+            areaNameEn: this.detailData.areaNameEn || '',
+            areaNameEnDisplay: this.detailData.areaNameEnDisplay || this.detailData.areaNameEn || ''
+          }
+      const targetUrl = this.isRoomType
+        ? buildNavigationUrl('/pkgBooking/book_viewing/book_viewing', {
+            payload: JSON.stringify(bookingPayload || {})
+          })
+        : buildNavigationUrl('/pkgBooking/book/book', {
+            applyData: JSON.stringify(applyData || {})
+          })
+
+      if (!ensureBookingAccess({
+        language: this.$getLanguage(),
+        loginTitle: this.t('loginTitle'),
+        loginContent: this.isRoomType
+          ? this.t('roomTypeApplyLoginContent')
+          : this.t('allRoomsLoginContent'),
+        loginRedirectUrl: targetUrl
+      })) {
+        return
+      }
+
+      if (this.isRoomType) {
+        uni.navigateTo({
+          url: targetUrl
+        })
+        return
+      }
+
+      uni.navigateTo({
+        url: targetUrl
+      })
+    },
+    handleApplyStay() {
+      const serviceEntryUrl = this.buildServiceEntryUrl({
+        path: '/pkgService/submit_request/submit_request',
+        title: `${this.displayName || this.t('roomTypeFallback')} ${this.t('stayApplicationSuffix')}`,
+        desc: `${this.t('roomTypeCodePrefix')}${this.detailData.roomTypeCode || ''}.${this.hasPrice ? ` ${this.t('pricePrefix')}¥${this.detailData.priceValue}.` : ''}${this.detailData.pricePlan.matchedStrategies || this.detailData.payMethod ? ` ${this.t('payMethodPrefix')}${localizePayMethodText(this.detailData.pricePlan.matchedStrategies || this.detailData.payMethod, this.language)}.` : ''}`,
+        key: 'roomTypeSubmitList',
+        payload: {
+          sourceType: 'area-room-type',
+          areaCode: this.detailData.areaCode,
+          roomTypeCode: this.detailData.roomTypeCode,
+          roomTypeName: this.detailData.roomTypeName || this.detailData.name,
+          roomTypeNameEn: this.detailData.roomTypeNameEn || this.detailData.nameEn || '',
+          roomTypeNameEnDisplay: this.detailData.roomTypeNameEnDisplay || this.detailData.roomTypeNameEn || this.detailData.nameEnDisplay || this.detailData.nameEn || '',
+          roomName: this.detailData.name,
+          roomNameEn: this.detailData.nameEn || '',
+          roomNameEnDisplay: this.detailData.nameEnDisplay || this.detailData.nameEn || '',
+          areaName: this.detailData.areaName,
+          areaNameEn: this.detailData.areaNameEn || '',
+          areaNameEnDisplay: this.detailData.areaNameEnDisplay || this.detailData.areaNameEn || '',
+          payMethod: this.detailData.pricePlan.matchedStrategies || this.detailData.payMethod,
+          price: this.detailData.priceValue
+        }
+      })
+
+      if (!ensureBookingAccess({
+        language: this.$getLanguage(),
+        loginTitle: this.t('loginTitle'),
+        loginContent: this.t('stayLoginContent'),
+        loginRedirectUrl: serviceEntryUrl
+      })) {
+        return
+      }
+
+      uni.navigateTo({
+        url: serviceEntryUrl
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.room-detail-page {
+  height: 100vh;
+  background-color: #f6f7fb;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  transition: opacity 0.2s, color 0.2s;
+}
+
+/* 毛玻璃导航栏覆盖样式 */
+.glass-nav-bar ::v-deep .tn-nav-bar {
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+}
+
+.fullscreen-swiper {
+  flex: 1;
+  height: 0;
+}
+
+.detail-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+.detail-scroll ::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+
+.scroll-content {
+  background: #ffffff;
+  min-height: 101%;
+}
+
+.second-screen-shell {
+  min-height: 100%;
+}
+
+.second-screen-top-gap {
+  height: calc(108rpx + env(safe-area-inset-top));
+}
+
+.compact-hero-panel {
+  position: relative;
+  height: 680rpx;
+  margin: 0;
+  border-radius: 0;
+  overflow: hidden;
+  box-shadow: none;
+  border: none;
+}
+
+.compact-hero-swiper,
+.compact-hero-image,
+.compact-hero-empty,
+.compact-vr-panel {
+  width: 100%;
+  height: 100%;
+}
+
+.compact-hero-empty {
+  background: linear-gradient(135deg, #2b2f35 0%, #15181d 100%);
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 26rpx;
+}
+
+.compact-hero-mask {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(8, 11, 18, 0.08) 0%, rgba(8, 11, 18, 0.24) 34%, rgba(8, 11, 18, 0.84) 100%),
+    linear-gradient(135deg, rgba($brand-primary, 0.14) 0%, rgba(0, 0, 0, 0) 46%);
+}
+
+.compact-hero-topbar {
+  position: absolute;
+  top: 80rpx;
+  left: 26rpx;
+  right: 26rpx;
+  z-index: 5;
+}
+
+.compact-hero-action-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.compact-media-tabs {
+  display: flex;
+  gap: 10rpx;
+  padding: 8rpx;
+  border-radius: 999rpx;
+  background: rgba(8, 11, 18, 0.26);
+  border: 1rpx solid rgba(255, 255, 255, 0.14);
+  backdrop-filter: blur(14rpx);
+}
+
+.compact-hero-counter {
+  height: 52rpx;
+  padding: 0 18rpx;
+  border-radius: 999rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1rpx solid rgba(255, 255, 255, 0.16);
+  backdrop-filter: blur(14rpx);
+  color: #ffffff;
+  font-size: 22rpx;
+  font-weight: 600;
+}
+
+.compact-media-tab {
+  min-width: 88rpx;
+  height: 52rpx;
+  padding: 0 18rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.compact-media-tab--active {
+  background: rgba(255, 255, 255, 0.92);
+  color: #0f172a;
+  font-weight: 700;
+}
+
+.compact-hero-center-action {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -46%);
+  width: 260rpx;
+  height: 260rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+.compact-hero-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2rpx solid rgba($brand-primary, 0.3);
+  box-shadow: 0 0 20rpx rgba($brand-primary, 0.1) inset;
+}
+
+.compact-hero-ring--outer {
+  width: 260rpx;
+  height: 260rpx;
+  animation: compactVrPulseOuter 3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
+}
+
+.compact-hero-ring--inner {
+  width: 200rpx;
+  height: 200rpx;
+  animation: compactVrPulseInner 3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite 0.4s;
+}
+
+.compact-hero-core {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
+  border: 2rpx solid rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(24rpx);
+  box-shadow: 
+    0 16rpx 36rpx rgba(0, 0, 0, 0.2),
+    inset 0 4rpx 12rpx rgba(255, 255, 255, 0.5),
+    0 0 30rpx rgba($brand-primary, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.compact-hero-center-action:active .compact-hero-core {
+  transform: scale(0.9);
+}
+
+.compact-hero-core-icon {
+  font-size: 52rpx;
+  color: #ffffff;
+}
+
+.compact-hero-action-text {
+  position: absolute;
+  left: 50%;
+  bottom: -48rpx;
+  transform: translateX(-50%);
+  width: 280rpx;
+  text-align: center;
+}
+
+.compact-hero-action-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.24);
+}
+
+.compact-hero-action-desc {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+@keyframes compactVrPulseOuter {
+  0% {
+    transform: scale(0.85);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+}
+
+@keyframes compactVrPulseInner {
+  0% {
+    transform: scale(0.85);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+}
+
+.compact-vr-panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.compact-vr-glow {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 50%, rgba($brand-primary, 0.2) 0%, rgba(0, 0, 0, 0) 65%);
+  pointer-events: none;
+  animation: compactVrGlowBreathe 3s ease-in-out infinite alternate;
+}
+
+.compact-vr-glow::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba($brand-primary, 0.2) 60deg, transparent 120deg);
+  animation: compactVrScanner 6s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes compactVrGlowBreathe {
+  0% {
+    opacity: 0.5;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes compactVrScanner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.second-screen-body {
+  padding-top: 0;
+}
+
+.bottom-spacer {
+  height: calc(180rpx + env(safe-area-inset-bottom));
+}
+
+.action-bar-wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(20rpx);
+  box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.04);
+  z-index: 100;
+  transform: translateY(150%);
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.action-bar--visible {
+  transform: translateY(0);
+}
+
+.action-bar {
+  width: 100%;
+}
+
+.action-left {
+  flex-shrink: 0;
+  padding-right: 24rpx;
+}
+
+.action-icon-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  padding: 0 16rpx;
+  margin: 0;
+  line-height: 1;
+}
+
+.action-icon-btn::after {
+  border: none;
+}
+
+.action-icon-font {
+  font-size: 42rpx;
+  color: #1D2129;
+  margin-bottom: 6rpx;
+}
+
+.action-icon-text {
+  font-size: 20rpx;
+  color: #4E5969;
+}
+
+.action-right {
+  flex: 1;
+  display: flex;
+  gap: 16rpx;
+  justify-content: flex-end;
+}
+
+.action-btn {
+  flex: 1;
+  height: 88rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  font-weight: 700;
+  padding: 0;
+  transition: all 0.2s;
+}
+
+.action-btn:active {
+  transform: scale(0.96);
+}
+
+.action-btn--secondary {
+  background: rgba($brand-primary, 0.08);
+  color: $brand-primary;
+}
+
+.action-btn--primary {
+  background: linear-gradient(135deg, #40cbf2 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.2);
+}
+</style>
diff --git a/pkgExplore/sign/sign.vue b/pkgExplore/sign/sign.vue
new file mode 100644
index 0000000..36eeba0
--- /dev/null
+++ b/pkgExplore/sign/sign.vue
@@ -0,0 +1,532 @@
+<template>
+  <view class="template-spread">
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF00">
+      <view slot="back" class='tn-custom-nav-bar__back'
+        @click="goBack">
+        <text class='icon tn-icon-left'></text>
+      </view>
+      <!-- <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
+        <text class="tn-text-xl tn-color-black">签到</text>
+      </view> -->
+    </tn-nav-bar>
+    
+    <!-- 顶部渐变底色，需要的显示出来即可 -->
+    <view class="top-bg">
+      <view class="bg-pic" style="position: absolute;right: 40rpx;bottom: 120rpx;">
+        <view class="bg-image" style="background-image:url('https://cdn.nlark.com/yuque/0/2024/png/280373/1719968962717-assets/web-upload/b6758518-c11e-400f-9d59-3874e2a74a12.png');background-size: cover;">
+        </view>
+      </view>
+    </view>
+    
+    <view class="" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
+      
+      <view class="" style="position: relative;">
+        
+        <view class="bg-notice">
+          <tn-notice-bar :list="noticeList" mode="vertical" leftIconName="starry"></tn-notice-bar>
+        </view>
+        <view class="tn-margin tn-padding-top-sm" style="color: #001E50;font-size: 50rpx;">
+          <text class="tn-text-bold">62,888</text>
+          <text class="tn-padding-left-xs tn-text-xs tn-color-gray">{{ t('pointsUnit') }}</text>
+        </view>
+        <view class="tn-margin tn-text-sm" style="color: #001E50;">
+          {{ t('pointsRecord') }} <text class="tn-icon-right tn-padding-left-xs tn-color-gray"></text>
+        </view>
+        
+      </view>
+      
+      
+      
+      <!-- 组件对应可选项容器 -->
+      <view class="" style="position: relative;">
+        
+        <view class="tn-margin tn-padding-sm tn-bg-white" style="border-radius: 20rpx;">
+          <view class="" style="border-bottom: 4rpx solid #ECF0F9;position: relative;top: 80rpx;width: 80%;margin: 0 auto;">
+          </view>
+          <!-- 方式12 start-->
+          <view class="tn-flex tn-flex-wrap tn-flex-row-center tn-padding-top-lg tn-padding-bottom">
+            <view v-for="(item, index) in 3" :key="index" style="width: 14%;">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <!-- icon -->
+                <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="border: 1rpx solid #E5BC81;color: #E5BC81;background-color: #F7EFE6;">
+                  <view class="tn-icon-check"></view>
+                </view> 
+                <view class="tn-text-center tn-padding-bottom-sm" style="color: #95A3A8;">
+                  <text class="tn-text-ellipsis tn-text-sm">08/{{index + 13}}</text>
+                </view>
+              </view>
+           </view>
+           <view v-for="(item, index) in 3" :key="index" style="width: 14%;">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <!-- 数字-->
+                <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
+                  <view class="">+30</view>
+                </view> 
+                <view class="tn-text-center tn-padding-bottom-sm" style="color: #95A3A8;">
+                  <text class="tn-text-ellipsis tn-text-sm">08/{{index + 16}}</text>
+                </view>
+              </view>
+           </view>
+           <view v-for="(item, index) in 1" :key="index" style="width: 14%;">
+              <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
+                <!-- 图片形式 -->
+                <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center" style="background-image:url('https://cdn.nlark.com/yuque/0/2024/png/280373/1719937310080-assets/web-upload/f979073b-e335-4e18-8bf2-757756236a7d.png');background-size: cover;">
+                </view>
+                <view class="tn-text-center tn-padding-bottom-sm" style="color: #95A3A8;">
+                  <text class="tn-text-ellipsis tn-text-sm">08/{{index + 19}}</text>
+                </view>
+              </view>
+           </view>
+          </view>
+          <!-- 方式12 end-->
+          
+          <!-- 未签到-->
+          <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
+            <tn-button shape="round" backgroundColor="$brand-primary" fontColor="#FFFFFF" padding="40rpx 0" width="100%" :fontSize="30" @tap="showLandscape">
+              <text class="">{{ t('checkInNow') }}</text>
+            </tn-button>
+          </view>
+          
+          <!-- 已签到-->
+          <!-- <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
+            <tn-button shape="round" backgroundColor="#DFE4E8" fontColor="#95A3A8" padding="40rpx 0" width="100%" :fontSize="30" @click="tn('')">
+              <text class="">今日已签到</text>
+            </tn-button>
+          </view> -->
+          
+          <view class="tn-strip-bottom-min tn-padding" style="color: #95A3A8;">
+            {{ t('checkInRewardHint') }}
+          </view>
+          
+          <view class="tn-padding-left tn-pright tn-padding-top tn-padding-bottom tn-text-sm" style="color: #95A3A8;">
+            {{ t('warmTip') }}<br>
+            {{ t('warmTipDesc') }}
+          </view>
+          
+        </view>
+        
+        
+        <view class="tn-padding-top-sm">
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin" @click="tn('')">
+            <view class="justify-content-item tn-text-bold tn-text-lg tn-padding-left-xs">
+              {{ t('taskSectionTitle') }}
+            </view>
+            <view class="justify-content-item tn-text-df" style="color: #C1CACF;">
+              <text class="tn-padding-xs">{{ t('more') }}</text>
+              <text class="tn-icon-right"></text>
+            </view>
+          </view>
+          
+          <view class="bg-shadow" style="background-color: #FFFFFF;border-radius: 24rpx;margin: 0 30rpx 30rpx 30rpx;" v-for="(item, index) in taskList" :key="index">
+            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" style="color: #333333;">
+              <view class="" style="max-width: 50vw;">
+                <view class="tn-text-bold">
+                  {{ item.title }}
+                </view>
+                <view class="tn-color-gray tn-text-sm tn-padding-top-xs">
+                  {{ item.desc }}
+                </view>
+              </view>
+              <view class="justify-content-item">
+                <tn-button shape="round" size="sm" backgroundColor="$brand-primary" fontColor="#FFFFFF" padding="30rpx 0" width="160rpx">
+                  <text class="tn-text-bold tn-text-sm">{{ t('goComplete') }}</text>
+                  <text class="tn-icon-right-fill tn-padding-left-xs tn-text-lg"></text>
+                </tn-button>
+              </view>
+            </view>
+            
+          </view>
+          
+        </view>
+        
+        <view class="tn-tabbar-height"></view>
+        
+      </view> 
+      
+      <!-- 压屏窗-->
+      <tn-landscape :show="show" @close="closeLandscape" closePosition="bottom">
+        <view class="tn-text-center" style="padding-bottom: 10vh;">
+          <view class="" style="z-index: 0;height: 420rpx;margin: 0 0 20rpx 0;">
+            <image src="https://cdn.nlark.com/yuque/0/2024/png/280373/1719936825450-assets/web-upload/12a47786-b172-4b93-8e2a-eaec578e71de.png" mode="widthFix"></image>
+          </view>
+
+          <view class="" style="background-color: #FFFFFF;border-radius: 20rpx;width: 70vw;margin: 0 auto;margin-top: -220rpx;position: relative;z-index: 999;">
+            <view class="" style="position: absolute;top: -160rpx;left: 120rpx;">
+              <image src="https://cdn.nlark.com/yuque/0/2024/png/280373/1719936460577-assets/web-upload/697ed6f1-6126-4734-bd80-bed28296e16d.png" mode="aspectFit" style="width: 320rpx;height: 330rpx;"></image>
+            </view>
+            <view class="tn-text-xl tn-text-bold" style="padding-top: 120rpx;">
+              {{ t('checkInSuccess') }}
+            </view>
+            <view class="tn-padding tn-color-gray--dark">
+              <text>{{ t('checkedInFor') }}</text>
+              <text class="tn-color-orangered" style="padding-left: 6rpx;padding-right: 6rpx">3</text>
+              <text>{{ t('daysAndEarned') }}</text>
+              <text class="tn-color-orangered" style="padding-left: 6rpx;padding-right: 6rpx">20</text>
+              <text>{{ t('pointsUnit') }}</text>
+            </view>
+            <view class=" tn-padding tn-color-gray">
+              <text>{{ t('continuousCheckIn') }}</text>
+              <text class="tn-color-orangered" style="padding-left: 6rpx;padding-right: 6rpx;">7</text>
+              <text>{{ t('daysRewardHint') }}</text>
+            </view>
+          </view>
+
+        </view>
+      </tn-landscape>
+
+    </view>
+    
+    
+  </view>
+</template>
+
+<script>
+  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
+  export default {
+    name: 'Sign',
+    mixins: [template_page_mixin],
+    i18n: {
+      zh: {
+        pointsUnit: '积分',
+        pointsRecord: '积分记录',
+        checkInNow: '立即签到',
+        checkInRewardHint: '坚持每天连续签到可以获得多重奖励哦',
+        warmTip: '温馨提示：',
+        warmTipDesc: '每日签到可获得10积分奖励，连续完成7天签到可能获得额外奖励，连续签到满7天后将会重置签到记录。',
+        taskSectionTitle: '做任务领金币',
+        more: '更多',
+        goComplete: '去完成',
+        checkInSuccess: '签到成功',
+        checkedInFor: '已连续签到',
+        daysAndEarned: '天，获得',
+        continuousCheckIn: '连续签到',
+        daysRewardHint: '天可获得额外奖励哦！',
+        notice1: '恭喜 付*其 连续7天签到，获得 300积分 奖励',
+        notice2: '恭喜 徐*圆 连续7天签到，获得 300积分 奖励',
+        notice3: '恭喜 蔡*东 连续7天签到，获得 300积分 奖励',
+        taskName: '任务名称',
+        taskDesc: '抓住那只猪吖'
+      },
+      en: {
+        pointsUnit: 'Points',
+        pointsRecord: 'Points History',
+        checkInNow: 'Check In Now',
+        checkInRewardHint: 'Daily continuous check-ins unlock multiple rewards',
+        warmTip: 'Tips:',
+        warmTipDesc: 'Daily check-in grants 10 points. Completing 7 consecutive days may unlock extra rewards, and the record resets after day 7.',
+        taskSectionTitle: 'Complete Tasks for Coins',
+        more: 'More',
+        goComplete: 'Go',
+        checkInSuccess: 'Check-in Successful',
+        checkedInFor: 'Checked in for',
+        daysAndEarned: 'days and earned',
+        continuousCheckIn: 'Continuous check-in',
+        daysRewardHint: 'days unlocks extra rewards!',
+        notice1: 'Congrats to Fu*qi for 7 consecutive check-ins and earning 300 points',
+        notice2: 'Congrats to Xu*yuan for 7 consecutive check-ins and earning 300 points',
+        notice3: 'Congrats to Cai*dong for 7 consecutive check-ins and earning 300 points',
+        taskName: 'Task Name',
+        taskDesc: 'Catch That Pig'
+      }
+    },
+    data(){
+      return {
+        show: true,
+        maskCloseable: true,
+      }
+    },
+    computed: {
+      noticeList() {
+        return [this.t('notice1'), this.t('notice2'), this.t('notice3')]
+      },
+      taskList() {
+        return Array.from({ length: 6 }).map(() => ({
+          title: this.t('taskName'),
+          desc: this.t('taskDesc')
+        }))
+      }
+    },
+    methods: {
+      t(key, params) {
+      return this.$tm('pkgExplore.sign.sign', key, params)
+    },
+      // 跳转
+      tn(e) {
+      	uni.navigateTo({
+      		url: e,
+      	});
+      },
+      
+      // 弹出压屏窗
+      showLandscape() {
+        this.openLandscape()
+      },
+      // 打开压屏窗
+      openLandscape() {
+        this.show = true
+      },
+      // 关闭压屏窗
+      closeLandscape() {
+        this.show = false
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 胶囊*/
+  .tn-custom-nav-bar__back {
+    width: 38%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 1000rpx;
+    border: 1rpx solid rgba(255, 255, 255, 0.5);
+    color: #FFFFFF;
+    font-size: 18px;
+    
+    .icon {
+      display: block;
+      flex: 1;
+      margin: auto;
+      text-align: center;
+    }
+    
+  }
+  .template-spread{
+    min-height: 100vh;
+  }
+  
+  .icon12 {
+    &__item {
+      width: 30%;
+      background-color: #FFFFFF;
+      border-radius: 10rpx;
+      padding: 30rpx;
+      margin: 20rpx 10rpx;
+      transform: scale(1);
+      transition: transform 0.3s linear;
+      transform-origin: center center;
+      
+      &--icon {
+        width: 70rpx;
+        height: 70rpx;
+        font-size: 30rpx;
+        margin-bottom: 18rpx;
+        position: relative;
+        z-index: 1;
+        color: #6A767D;
+        border-radius: 100rpx;
+        background-color: #ECF0F9;
+        
+        &::after {
+          content: " ";
+          position: absolute;
+          z-index: -1;
+          width: 100%;
+          height: 100%;
+          padding: 20rpx;
+          left: 0;
+          bottom: 0;
+          opacity: 1;
+          transform: scale(1, 1);
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+  
+  .top-bg{
+    position: absolute;
+    // background: linear-gradient(90deg, #d8feda, #F6F6F6);
+    background: linear-gradient(120deg, #FEFDD3, #FAFCEF, #E5FDF5, #FEFBEA);
+    top: 0;
+    width: 100%;
+    height: 580rpx;
+    transition: all 0.25s ease-out;
+    z-index: 0;
+  }
+  .top-bg:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+    mask-image: linear-gradient(to bottom, transparent, black);
+    background: linear-gradient(90deg, #F6F7F9, #F6F7F9);	
+  }
+  
+  .bg-notice{
+    color: #FFFFFF;
+    background-color: #001E5020;
+    padding: 4rpx;
+    margin: 0 30rpx 30rpx 30rpx;
+    border-radius: 16rpx;
+  }
+  
+  /* 日历 */
+  .bg-image {
+    width: 240rpx;
+    height: 192rpx;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .bg-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    overflow: hidden;
+  }
+  
+  /* 标签 */
+  .tag-border-cyan {
+    display: inline-block;
+    padding: 8rpx 16rpx;
+    margin: 0 15rpx 10rpx 0;
+    border-radius: 10rpx;
+    background-color: #2DE8BD08;
+    color: #2DE8BD;
+    border: 1rpx solid #2DE8BD;
+    font-size: 16rpx;
+  }
+  .tag-border-yellow {
+    display: inline-block;
+    padding: 8rpx 16rpx;
+    margin: 0 15rpx 10rpx 0;
+    border-radius: 10rpx;
+    background-color: #FFD10008;
+    color: #FFD100;
+    border: 1rpx solid #FFD100;
+    font-size: 16rpx;
+  }
+  .tag-border-orange {
+    display: inline-block;
+    padding: 8rpx 16rpx;
+    margin: 0 15rpx 10rpx 0;
+    border-radius: 10rpx;
+    background-color: #FEA50008;
+    color: #FEA500;
+    border: 1rpx solid #FEA500;
+    font-size: 16rpx;
+  }
+  .tag-border-green {
+    display: inline-block;
+    padding: 8rpx 16rpx;
+    margin: 0 15rpx 10rpx 0;
+    border-radius: 10rpx;
+    background-color: #1FC77308;
+    color: #1FC773;
+    border: 1rpx solid #1FC773;
+    font-size: 16rpx;
+  }
+  .tag-bg {
+    display: inline-block;
+    padding: 8rpx 16rpx;
+    margin: 0 15rpx 10rpx 0;
+    border-radius: 10rpx;
+    background-color: #E6E9EE;
+    color: #001E50;
+    border: 1rpx solid #001E5080;
+    font-size: 16rpx;
+  }
+  
+  /* 品牌 */
+  .logo-image {
+    width: 48rpx;
+    height: 48rpx;
+    position: relative;
+    overflow: hidden;
+    border-radius: 100rpx;
+    border: 1rpx solid #DFE4E8;
+  }
+  
+  .logo-image-yes {
+    width: 48rpx;
+    height: 48rpx;
+    position: relative;
+    overflow: hidden;
+    border-radius: 100rpx;
+    border: 1rpx solid #1FC773;
+  }
+  
+  .logo-image-no {
+    width: 48rpx;
+    height: 48rpx;
+    position: relative;
+    overflow: hidden;
+    border-radius: 100rpx;
+    border: 1rpx solid #FF0033;
+  }
+  
+  .logo-pic {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    // background-color: #FFFFFF;
+  }
+  
+  /* 商品 */
+  .image-product {
+    border-radius: 8rpx;
+    width: 160rpx;
+    height: 160rpx;
+    position: relative;
+    border: 1rpx solid #DFE4E8;
+  }
+  
+  .image-pic{
+    width: 160rpx;
+    height: 160rpx;
+    background-size: cover;
+    background-repeat:no-repeat;
+    background-position:center;
+    border-radius: 10rpx;
+  }
+  
+  /* 间隔线 start*/
+  .tn-strip-bottom-min {
+    width: 100%;
+    border-bottom: 1rpx solid #F8F9FB;
+  }
+  
+  .tn-strip-bottom {
+   width: 100%;
+   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
+  }
+   /* 间隔线 end*/
+   
+  /* 文字截取*/
+  .clamp-text-1 {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+    
+  .clamp-text-2 {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  /* 底部安全边距 start*/
+  .tn-tabbar-height {
+  	min-height: 40rpx;
+  	height: calc(60rpx + env(safe-area-inset-bottom) / 2);
+    height: calc(60rpx + constant(safe-area-inset-bottom));
+  }
+  
+</style>
diff --git a/pkgExplore/store_detail/components/FacilityList.vue b/pkgExplore/store_detail/components/FacilityList.vue
new file mode 100644
index 0000000..5e47cc8
--- /dev/null
+++ b/pkgExplore/store_detail/components/FacilityList.vue
@@ -0,0 +1,75 @@
+<template>
+  <view class="section-panel" v-if="facilityList && facilityList.length">
+    <view class="section-header">
+      <text class="section-title">{{ t('sectionTitle') }}</text>
+    </view>
+    <view class="facility-grid tn-flex tn-flex-wrap">
+      <view class="facility-item tn-flex tn-flex-direction-column tn-flex-col-center" v-for="(item, index) in facilityList" :key="index">
+        <text :class="item.icon" class="facility-icon"></text>
+        <text class="facility-name">{{ item.name }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    facilityList: {
+      type: Array,
+      default: () => []
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.store_detail.store_detail', key)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.section-panel {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1rpx solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
+  margin: 24rpx 32rpx 0;
+  padding: 32rpx;
+  border-radius: 24rpx;
+}
+
+.section-header {
+  margin-bottom: 24rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.facility-grid {
+  gap: 32rpx 0;
+}
+
+.facility-item {
+  width: 25%;
+}
+
+.facility-icon {
+  font-size: 52rpx;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 12rpx;
+}
+
+.facility-name {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+</style>
diff --git a/pkgExplore/store_detail/components/RoomList.vue b/pkgExplore/store_detail/components/RoomList.vue
new file mode 100644
index 0000000..7e7bf37
--- /dev/null
+++ b/pkgExplore/store_detail/components/RoomList.vue
@@ -0,0 +1,239 @@
+<template>
+  <view class="section-panel room-section">
+    <view class="section-header tn-flex tn-flex-row-between tn-flex-col-center">
+      <text class="section-title">{{ t('roomSectionTitle', { count: roomTypes.length }) }}</text>
+    </view>
+    <view class="room-list-vertical">
+      <view
+        class="room-card-v"
+        v-for="room in roomTypes"
+        :key="room.code"
+        @click="goToRoomDetail(room)"
+      >
+        <view class="room-img-v">
+          <image class="img" :src="room.images && room.images[0] ? room.images[0] : ''" mode="aspectFill"></image>
+          <view class="pay-method-tag" v-if="room.payMethod">{{ getPayMethodText(room.payMethod) }}</view>
+        </view>
+        <view class="room-info-v">
+          <view class="room-header-v tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="room-name-v tn-text-ellipsis">{{ getRoomName(room) }}</view>
+          </view>
+          
+          <view v-if="room.tags && room.tags.length" class="room-tags-v tn-flex tn-flex-wrap">
+            <view class="tag-v" v-for="(tag, index) in room.tags.slice(0, 3)" :key="index">{{ getDisplayTag(tag) }}</view>
+          </view>
+          
+          <view v-if="getRoomDescription(room)" class="room-desc-v tn-text-ellipsis">{{ getRoomDescription(room) }}</view>
+          
+          <view class="room-bottom-v tn-flex tn-flex-row-between tn-flex-col-bottom">
+            <view class="room-price-v">
+              <text class="price-symbol">¥</text>
+              <text class="price-val">{{ formatPriceValue(room.price) || t('pricePending') }}</text>
+              <text class="price-unit">{{ t('priceUnit') }}</text>
+            </view>
+            <view class="go-btn-v tn-flex tn-flex-col-center tn-flex-row-center">
+              <text>{{ t('viewDetails') }}</text>
+              <text class="tn-icon-right"></text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { localizeHousingTag, localizePayMethodText } from '../../../utils/select-room-normalizers'
+
+export default {
+  props: {
+    roomTypes: {
+      type: Array,
+      default: () => []
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  methods: {
+    t(key, params = {}) {
+      return this.$tm('pkgExplore.store_detail.store_detail', key, params)
+    },
+    formatPriceValue(priceText) {
+      if (!priceText) {
+        return ''
+      }
+      const matched = String(priceText).match(/(\d+(\.\d+)?)/)
+      return matched ? matched[1] : ''
+    },
+    getPayMethodText(payMethod = '') {
+      return localizePayMethodText(payMethod, this.language)
+    },
+    getDisplayTag(tag = '') {
+      return localizeHousingTag(tag, this.language)
+    },
+    getRoomName(room = {}) {
+      if (this.language === 'en') {
+        return room.nameEnDisplay || room.nameEn || room.name || ''
+      }
+      return room.name || room.nameEn || ''
+    },
+    getRoomDescription(room = {}) {
+      if (this.language === 'en') {
+        return room.descriptionEnDisplay || room.descriptionEn || room.description || ''
+      }
+      return room.description || room.descriptionEn || ''
+    },
+    goToRoomDetail(room) {
+      this.$emit('go-detail', room);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.section-panel {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1rpx solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
+  margin: 24rpx 32rpx 0;
+  padding: 32rpx;
+  border-radius: 24rpx;
+}
+
+.section-header {
+  margin-bottom: 24rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.room-list-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.room-card-v {
+  width: 100%;
+  display: flex;
+  border-radius: 16rpx;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1rpx solid rgba(255, 255, 255, 0.1);
+  box-shadow: none;
+}
+
+.room-img-v {
+  width: 220rpx;
+  height: 220rpx;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.pay-method-tag {
+  position: absolute;
+  top: 12rpx;
+  left: 12rpx;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8rpx);
+  color: #fff;
+  font-size: 18rpx;
+  padding: 4rpx 10rpx;
+  border-radius: 6rpx;
+  font-weight: 500;
+}
+
+.room-info-v {
+  flex: 1;
+  padding: 16rpx 20rpx;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.room-header-v {
+  margin-bottom: 8rpx;
+}
+
+.room-name-v {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #fff;
+  flex: 1;
+}
+
+.room-tags-v {
+  gap: 12rpx;
+  margin-bottom: 12rpx;
+}
+
+.tag-v {
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.15);
+  padding: 4rpx 12rpx;
+  border-radius: 6rpx;
+}
+
+.room-desc-v {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: auto; /* 将底部价格推下去 */
+}
+
+.room-bottom-v {
+  margin-top: 16rpx;
+}
+
+.room-price-v {
+  color: #ffb8b8;
+  display: flex;
+  align-items: baseline;
+}
+
+.price-symbol {
+  font-size: 20rpx;
+  font-weight: bold;
+  margin-right: 2rpx;
+}
+
+.price-val {
+  font-size: 36rpx;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.price-unit {
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.6);
+  margin-left: 4rpx;
+  font-weight: 500;
+}
+
+.go-btn-v {
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-size: 22rpx;
+  padding: 8rpx 20rpx;
+  border-radius: 30rpx;
+  border: 1rpx solid rgba(255, 255, 255, 0.2);
+}
+
+.go-btn-v .tn-icon-right {
+  font-size: 20rpx;
+  margin-left: 4rpx;
+}
+</style>
diff --git a/pkgExplore/store_detail/components/StoreInfo.vue b/pkgExplore/store_detail/components/StoreInfo.vue
new file mode 100644
index 0000000..7f1b42d
--- /dev/null
+++ b/pkgExplore/store_detail/components/StoreInfo.vue
@@ -0,0 +1,199 @@
+<template>
+  <view class="store-info-panel">
+    <!-- 核心信息卡片 -->
+    <view class="info-card tn-flex tn-flex-row-between tn-flex-col-center" @click="openMap">
+      <view class="address-left tn-flex tn-flex-col-center">
+        <view class="icon-wrap tn-flex tn-flex-row-center tn-flex-col-center">
+          <text class="tn-icon-location-fill location-icon"></text>
+        </view>
+        <text class="address-title tn-text-ellipsis">{{ shortAddress }}</text>
+      </view>
+      <view class="address-right tn-flex tn-flex-col-center">
+        <text class="nav-text">{{ t('navigate') }}</text>
+        <text class="tn-icon-right nav-arrow"></text>
+      </view>
+    </view>
+
+    <!-- 小区简介 -->
+    <view class="section-panel" v-if="displayDescription">
+      <view class="section-header">
+        <text class="section-title">{{ t('storeIntro') }}</text>
+      </view>
+      <view class="store-desc" :class="{'store-desc--collapsed': isDescCollapsed}">
+        {{ displayDescription }}
+      </view>
+      <view class="expand-btn tn-flex tn-flex-row-center tn-flex-col-center" @click="toggleDesc">
+        <text>{{ isDescCollapsed ? t('expandAll') : t('collapse') }}</text>
+        <text :class="isDescCollapsed ? 'tn-icon-down' : 'tn-icon-up'" class="expand-icon"></text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    storeData: {
+      type: Object,
+      default: () => ({})
+    },
+    language: {
+      type: String,
+      default: 'zh'
+    }
+  },
+  data() {
+    return {
+      isDescCollapsed: true
+    }
+  },
+  computed: {
+    displayDescription() {
+      if (this.language === 'en') {
+        return this.storeData.descriptionEnDisplay || this.storeData.descriptionEn || this.storeData.description || ''
+      }
+      return this.storeData.description || this.storeData.descriptionEn || ''
+    },
+    shortAddress() {
+      const addr = this.language === 'en'
+        ? (this.storeData.addressEnDisplay || this.storeData.addressEn || this.storeData.address || '')
+        : (this.storeData.address || this.storeData.addressEn || '')
+      if (!addr) {
+        return this.t('noAddress')
+      }
+      if (this.language === 'en') {
+        return addr
+      }
+      const short = addr.replace(/^(?:.*?省|.*?自治区)?(?:.*?市|.*?自治州)?/, '');
+      return short.trim() ? short : (addr || this.t('noAddress'));
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.store_detail.store_detail', key)
+    },
+    toggleDesc() {
+      this.isDescCollapsed = !this.isDescCollapsed;
+    },
+    openMap() {
+      this.$emit('open-map');
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.store-info-panel {
+  padding: 0 32rpx;
+  margin-top: 24rpx;
+  position: relative;
+  z-index: 10;
+}
+
+.info-card {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1rpx solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
+  border-radius: 24rpx;
+  padding: 32rpx;
+  transition: all 0.2s;
+  
+  &:active {
+    background: rgba(255, 255, 255, 0.12);
+    transform: scale(0.98);
+  }
+}
+
+.address-left {
+  flex: 1;
+  min-width: 0;
+  padding-right: 20rpx;
+}
+
+.icon-wrap {
+  width: 56rpx;
+  height: 56rpx;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+
+.location-icon {
+  color: #fff;
+  font-size: 32rpx;
+}
+
+.address-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  flex: 1;
+}
+
+.address-right {
+  flex-shrink: 0;
+  padding-left: 20rpx;
+  border-left: 1rpx solid rgba(255, 255, 255, 0.2);
+}
+
+.nav-text {
+  font-size: 26rpx;
+  color: #fff;
+  font-weight: 500;
+}
+
+.nav-arrow {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.8);
+  margin-left: 6rpx;
+}
+
+.section-panel {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1rpx solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
+  margin-top: 24rpx;
+  padding: 32rpx;
+  border-radius: 24rpx;
+}
+
+.section-header {
+  margin-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.store-desc {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 1.6;
+}
+
+.store-desc--collapsed {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.expand-btn {
+  margin-top: 16rpx;
+  font-size: 24rpx;
+  color: #fff;
+}
+
+.expand-icon {
+  margin-left: 8rpx;
+  font-size: 28rpx;
+  line-height: 1;
+}
+</style>
diff --git a/pkgExplore/store_detail/store_detail.vue b/pkgExplore/store_detail/store_detail.vue
new file mode 100644
index 0000000..fe88e73
--- /dev/null
+++ b/pkgExplore/store_detail/store_detail.vue
@@ -0,0 +1,613 @@
+<template>
+  <view class="store-detail-page">
+    <!-- 底层：全屏轮播背景 -->
+    <view class="fullscreen-bg">
+      <swiper
+        v-if="storeGalleryList.length"
+        class="bg-swiper"
+        circular
+        autoplay
+        :interval="5000"
+        :duration="1000"
+        @change="onHeroSwiperChange"
+      >
+        <swiper-item v-for="(image, index) in storeGalleryList" :key="`${image}-${index}`">
+          <image class="bg-image" :src="image" mode="aspectFill"></image>
+        </swiper-item>
+      </swiper>
+      <view v-else class="bg-empty tn-flex tn-flex-col-center tn-flex-row-center">{{ t('noImage') }}</view>
+      <!-- 渐变暗化遮罩，确保上层文字卡片清晰 -->
+      <view class="bg-mask"></view>
+    </view>
+
+    <!-- 顶部导航栏 -->
+    <tn-nav-bar
+      :isBack="true"
+      :bottomShadow="false"
+      backgroundColor="transparent"
+      :customBackStyle="navBarBackStyle"
+      backIconColor="#FFFFFF"
+      :fixed="true"
+      class="transparent-nav-bar"
+    >
+      <view class="nav-title" :style="{ opacity: navTitleOpacity }">{{ displayStoreName }}</view>
+    </tn-nav-bar>
+
+    <!-- 上层：透明可滚动内容区 -->
+      <scroll-view
+        class="content-scroll"
+        scroll-y
+        :show-scrollbar="false"
+        @scroll="handleScroll"
+        enable-back-to-top
+      >
+        <view class="scroll-inner">
+          <!-- 留出足够的顶部空间，让背景图展示出来 -->
+          <view class="hero-space tn-flex tn-flex-direction-column tn-flex-col-bottom">
+            <!-- 照片计数器移到店名上方，避免与导航栏重叠 -->
+            <view v-if="storeGalleryList.length > 1" class="hero-counter tn-flex tn-flex-col-center">
+              <text class="tn-icon-image counter-icon"></text>
+              <text>{{ currentImageIndex + 1 }} / {{ storeGalleryList.length }}</text>
+            </view>
+            
+            <view class="store-title-wrap">
+              <view class="store-title">{{ displayStoreName }}</view>
+              <view v-if="storeTags.length" class="store-tags tn-flex tn-flex-wrap">
+                <view class="tag-item" v-for="(tag, index) in storeTags" :key="index">{{ tag }}</view>
+              </view>
+            </view>
+          </view>
+
+        <!-- 悬浮毛玻璃信息流 -->
+        <view class="floating-content-wrap">
+          <store-info
+            :storeData="storeData"
+            :language="language"
+            @open-map="openMap"
+          />
+          
+          <facility-list
+            :facilityList="facilityList"
+            :language="language"
+          />
+
+          <room-list
+            v-if="roomTypes.length"
+            :roomTypes="roomTypes"
+            :language="language"
+            @go-detail="goToRoomDetail"
+          />
+          
+          <view class="bottom-spacer"></view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 悬浮操作栏 (固定在底部，透明风格) -->
+    <view class="action-bar-wrap tn-safe-area-inset-bottom">
+      <view class="action-bar">
+        <button class="action-btn action-btn--glass" open-type="share">
+          <text class="tn-icon-share action-btn__icon"></text>
+          <text>{{ t('share') }}</text>
+        </button>
+        <button class="action-btn action-btn--primary-glass" @click="handleCall">
+          <text class="tn-icon-phone action-btn__icon"></text>
+          <text>{{ contactButtonText }}</text>
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import StoreInfo from './components/StoreInfo.vue';
+import FacilityList from './components/FacilityList.vue';
+import RoomList from './components/RoomList.vue';
+import { facilityManagers } from '@/api/index.js'
+import { localizeFacilityName, localizeHousingTag } from '../../utils/select-room-normalizers'
+
+function parseCoordinate(...values) {
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i]
+    if (value === '' || value === null || typeof value === 'undefined') {
+      continue
+    }
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) {
+      return parsed
+    }
+  }
+  return null
+}
+
+export default {
+  components: {
+    StoreInfo,
+    FacilityList,
+    RoomList
+  },
+  data() {
+    return {
+      storeData: {},
+      roomTypes: [],
+      areaManagers: [],
+      areaManager: null,
+      isAreaManagerLoading: false,
+      scrollTop: 0,
+      currentImageIndex: 0
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    storeGalleryList() {
+      if (Array.isArray(this.storeData.images) && this.storeData.images.length) {
+        return this.storeData.images.filter(Boolean)
+      }
+      if (this.heroImage) {
+        return [this.heroImage]
+      }
+      return []
+    },
+    heroImage() {
+      if (this.storeData.images && this.storeData.images[0]) {
+        return this.storeData.images[0]
+      }
+      if (this.roomTypes.length > 0 && this.roomTypes[0].images && this.roomTypes[0].images[0]) {
+        return this.roomTypes[0].images[0]
+      }
+      return ''
+    },
+    storeTags() {
+      const tags = Array.isArray(this.storeData.tags) ? this.storeData.tags.filter(Boolean) : []
+      return tags.map((tag) => localizeHousingTag(tag, this.language))
+    },
+    displayStoreName() {
+      if (this.language === 'en') {
+        return this.storeData.nameEnDisplay || this.storeData.nameEn || this.storeData.name || this.t('apartmentName')
+      }
+      return this.storeData.name || this.storeData.nameEn || this.t('apartmentName')
+    },
+    displayStoreAddress() {
+      if (this.language === 'en') {
+        return this.storeData.addressEnDisplay || this.storeData.addressEn || this.storeData.address || ''
+      }
+      return this.storeData.address || this.storeData.addressEn || ''
+    },
+    facilityList() {
+      const rawList = this.storeData.facilities
+      if (!Array.isArray(rawList)) {
+        return []
+      }
+      return rawList
+        .map((item) => {
+          if (!item) {
+            return null
+          }
+          if (typeof item === 'string') {
+            return { name: item, icon: 'tn-icon-shop' }
+          }
+          return {
+            name: localizeFacilityName(item.name || item.label || '', this.language),
+            icon: item.icon || 'tn-icon-shop'
+          }
+        })
+        .filter((item) => item && item.name)
+    },
+    phoneNumber() {
+      return this.storeData.phone || this.storeData.tel || this.storeData.mobile || ''
+    },
+    areaManagerName() {
+      const source = this.areaManager || {}
+      return source.displayName || source.name || source.userName || source.nickname || ''
+    },
+    areaManagerOptions() {
+      if (!Array.isArray(this.areaManagers)) {
+        return []
+      }
+      return this.areaManagers.filter((item) => item && item.phone)
+    },
+    contactPhoneNumber() {
+      const source = this.areaManager || {}
+      return source.phone || source.mobile || source.tel || source.managerPhone || this.phoneNumber || ''
+    },
+    contactButtonText() {
+      if (this.isAreaManagerLoading) {
+        return this.t('loading')
+      }
+      if (this.areaManagerOptions.length > 1) {
+        return this.t('selectContact')
+      }
+      if (this.areaManagerName) {
+        return this.t('contactManager')
+      }
+      return this.t('phoneConsult')
+    },
+    navBarBackStyle() {
+      const isDarkBg = this.scrollTop < 100;
+      return {
+        transition: 'all 0.3s',
+        background: isDarkBg ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.15)',
+        backdropFilter: 'blur(10px)',
+        borderRadius: '50%',
+        width: '64rpx',
+        height: '64rpx',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: '12rpx',
+        border: '1rpx solid rgba(255, 255, 255, 0.25)'
+      };
+    },
+    navTitleOpacity() {
+      return Math.min(Math.max((this.scrollTop - 80) / 100, 0), 1);
+    }
+  },
+  onLoad(options) {
+    if (options.storeData) {
+      Promise.resolve(options.storeData)
+        .then(decodeURIComponent)
+        .then(JSON.parse)
+        .then((data) => {
+          this.applyStoreData(data)
+        })
+        .catch((e) => {
+          console.error(this.t('parseStoreDataFailed'), e);
+        })
+      return
+    }
+  },
+  onShareAppMessage() {
+    return {
+      title: this.displayStoreName || this.t('shareTitle'),
+      path: `/pkgExplore/store_detail/store_detail?storeData=${encodeURIComponent(JSON.stringify(this.storeData || {}))}`,
+      imageUrl: this.heroImage || ''
+    }
+  },
+  onShareTimeline() {
+    return {
+      title: this.displayStoreName || this.t('shareTitle'),
+      query: `storeData=${encodeURIComponent(JSON.stringify(this.storeData || {}))}`,
+      imageUrl: this.heroImage || ''
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgExplore.store_detail.store_detail', key)
+    },
+    applyStoreData(data) {
+      this.storeData = data && typeof data === 'object' ? data : {}
+      this.roomTypes = this.storeData.roomTypes || []
+      this.loadAreaManager()
+    },
+    loadAreaManager() {
+      const areaCode = this.storeData.code || this.storeData.areaCode || ''
+      if (!areaCode) {
+        this.areaManagers = []
+        this.areaManager = null
+        return Promise.resolve()
+      }
+
+      this.isAreaManagerLoading = true
+      return facilityManagers({
+        FacilityType: 10,
+        FacilityCode: areaCode
+      }, this.language)
+        .then((res) => {
+          const rawData = res && res.data && typeof res.data === 'object' ? res.data : res
+          const managerList = Array.isArray(rawData)
+            ? rawData
+            : (Array.isArray(rawData && rawData.data)
+              ? rawData.data
+              : (Array.isArray(rawData && rawData.managers) ? rawData.managers : []))
+          const normalizedManagers = managerList
+            .map((item) => this.normalizeManager(item))
+            .filter(Boolean)
+          this.areaManagers = normalizedManagers
+          this.areaManager = normalizedManagers.find((item) => item.phone) || normalizedManagers[0] || null
+        })
+        .catch((error) => {
+          console.warn('查询区域宿管失败', error)
+          this.areaManagers = []
+          this.areaManager = null
+        })
+        .finally(() => {
+          this.isAreaManagerLoading = false
+        })
+    },
+    normalizeManager(manager) {
+      if (!manager || typeof manager !== 'object') {
+        return null
+      }
+      const phoneSource = manager.phone || manager.mobile || manager.tel || manager.managerPhone || ''
+      const phone = typeof phoneSource === 'string' ? phoneSource.trim() : phoneSource
+      const userCode = manager.userCode || manager.code || ''
+      const name = manager.name || manager.userName || manager.nickname || userCode || ''
+      return {
+        ...manager,
+        phone,
+        userCode,
+        displayName: name
+      }
+    },
+    getManagerActionText(manager) {
+      if (!manager) {
+        return this.t('phoneConsult')
+      }
+      if (manager.displayName && manager.phone) {
+        return `${manager.displayName}（${manager.phone}）`
+      }
+      return manager.displayName || manager.phone || this.t('phoneConsult')
+    },
+    makePhoneCall(phoneNumber) {
+      if (!phoneNumber) {
+        uni.showToast({ title: this.t('noServicePhone'), icon: 'none' })
+        return
+      }
+      uni.makePhoneCall({
+        phoneNumber
+      });
+    },
+    onHeroSwiperChange(e) {
+      this.currentImageIndex = e.detail.current;
+    },
+    handleScroll(e) {
+      this.scrollTop = e.detail.scrollTop;
+    },
+    openMap() {
+      const latitude = parseCoordinate(this.storeData.latitude, this.storeData.lat)
+      const longitude = parseCoordinate(this.storeData.longitude, this.storeData.lng)
+      if (latitude === null || longitude === null) {
+        uni.showToast({
+          title: this.t('noLocation'),
+          icon: 'none'
+        })
+        return
+      }
+      uni.openLocation({
+        latitude,
+        longitude,
+        name: this.displayStoreName || this.t('apartmentName'),
+        address: this.displayStoreAddress || '',
+        scale: 18
+      });
+    },
+    goToRoomDetail(room) {
+      uni.navigateTo({
+        url: `/pkgExplore/room_detail/room_detail?roomTypeData=${encodeURIComponent(JSON.stringify(room))}&areaData=${encodeURIComponent(JSON.stringify({
+          code: this.storeData.code,
+          name: this.storeData.name,
+          nameEn: this.storeData.nameEn || this.storeData.name,
+          nameEnDisplay: this.storeData.nameEnDisplay || this.storeData.nameEn || this.storeData.name,
+          address: this.storeData.address,
+          addressEn: this.storeData.addressEn || this.storeData.address,
+          addressEnDisplay: this.storeData.addressEnDisplay || this.storeData.addressEn || this.storeData.address,
+          latitude: this.storeData.latitude || this.storeData.lat || '',
+          longitude: this.storeData.longitude || this.storeData.lng || ''
+        }))}`
+      });
+    },
+    handleCall() {
+      if (this.isAreaManagerLoading && !this.contactPhoneNumber) {
+        uni.showToast({ title: this.t('loadingManagerInfo'), icon: 'none' })
+        return
+      }
+
+      const managerOptions = this.areaManagerOptions
+      if (managerOptions.length > 1) {
+        uni.showActionSheet({
+          itemList: managerOptions.map((item) => this.getManagerActionText(item)),
+          success: ({ tapIndex }) => {
+            const selectedManager = managerOptions[tapIndex]
+            if (selectedManager && selectedManager.phone) {
+              this.makePhoneCall(selectedManager.phone)
+            }
+          }
+        })
+        return
+      }
+
+      this.makePhoneCall(this.contactPhoneNumber)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.store-detail-page {
+  height: 100vh;
+  background-color: #000; /* 全屏黑色底色，防止滑动露白 */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #fff;
+  transition: opacity 0.3s;
+  max-width: 420rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.transparent-nav-bar ::v-deep .tn-nav-bar {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+/* 底层背景 */
+.fullscreen-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.bg-swiper, .bg-image, .bg-empty {
+  width: 100%;
+  height: 100%;
+}
+
+.bg-empty {
+  background: #111;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.bg-mask {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.85) 100%);
+  pointer-events: none;
+}
+
+/* 上层滚动内容区 */
+.content-scroll {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+}
+
+.content-scroll ::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+
+.scroll-inner {
+  min-height: 101%;
+}
+
+/* 留出背景展示区 */
+.hero-space {
+  width: 100%;
+  height: 35vh; /* 进一步降低留白高度，确保底部房型列表至少透出一条数据 */
+  padding: 0 32rpx 40rpx;
+  justify-content: flex-end; /* 内容沉底 */
+}
+
+.hero-counter {
+  height: 52rpx;
+  padding: 0 20rpx;
+  border-radius: 999rpx;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(14px);
+  color: #ffffff;
+  font-size: 24rpx;
+  font-weight: 500;
+  border: 1rpx solid rgba(255, 255, 255, 0.2);
+  margin-bottom: 24rpx;
+  align-self: flex-end; /* 靠右对齐 */
+}
+
+.counter-icon {
+  margin-right: 8rpx;
+  font-size: 26rpx;
+}
+
+.store-title-wrap {
+  width: 100%;
+  color: #fff;
+}
+
+.store-title {
+  font-size: 64rpx;
+  font-weight: bold;
+  margin-bottom: 24rpx;
+  text-shadow: 0 4rpx 16rpx rgba(0,0,0,0.6);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.store-tags {
+  gap: 16rpx;
+}
+
+.tag-item {
+  font-size: 24rpx;
+  padding: 8rpx 20rpx;
+  border-radius: 8rpx;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  border: 1rpx solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
+}
+
+/* 悬浮毛玻璃信息流 */
+.floating-content-wrap {
+  position: relative;
+  padding-bottom: 180rpx;
+}
+
+/* 底部操作栏 - 毛玻璃悬浮 */
+.action-bar-wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 18rpx 32rpx calc(18rpx + env(safe-area-inset-bottom));
+  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+  z-index: 100;
+  pointer-events: none; /* 让渐变层不阻挡点击 */
+}
+
+.action-bar {
+  display: flex;
+  gap: 24rpx;
+  pointer-events: auto; /* 恢复按钮区域点击 */
+}
+
+.action-btn {
+  height: 96rpx;
+  border-radius: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+  font-weight: bold;
+  padding: 0;
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
+  line-height: 1;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+button.action-btn::after {
+  border: none;
+}
+
+.action-btn__icon {
+  margin-right: 12rpx;
+  font-size: 34rpx;
+}
+
+.action-btn--glass {
+  flex: 0 0 200rpx;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+}
+
+.action-btn--primary-glass {
+  flex: 1;
+  background: rgba($brand-primary, 0.85);
+  color: #fff;
+  border-color: rgba($brand-primary, 0.5);
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.3);
+}
+
+.bottom-spacer {
+  height: calc(160rpx + env(safe-area-inset-bottom));
+}
+</style>
diff --git a/pkgExplore/vr_preview/vr_preview.vue b/pkgExplore/vr_preview/vr_preview.vue
new file mode 100644
index 0000000..a3ed417
--- /dev/null
+++ b/pkgExplore/vr_preview/vr_preview.vue
@@ -0,0 +1,297 @@
+<template>
+  <view class="vr-preview-page">
+    <tn-nav-bar
+      :isBack="true"
+      :bottomShadow="false"
+      backgroundColor="transparent"
+      :customBackStyle="navBarBackStyle"
+      backIconColor="#FFFFFF"
+      :fixed="true"
+    >
+    </tn-nav-bar>
+
+    <view class="vr-stage">
+      <image v-if="poster" :src="poster" mode="aspectFill" class="vr-poster"></image>
+      <view v-else class="vr-empty tn-flex tn-flex-col-center tn-flex-row-center">{{ t('emptyPreview') }}</view>
+      <view class="vr-mask"></view>
+
+      <view class="vr-mode-chip">{{ t('modeChip') }}</view>
+
+      <view class="vr-center-indicator" @click="openPosterPreview">
+        <view class="indicator-ring"></view>
+        <view class="indicator-core">
+          <text class="tn-icon-vr indicator-icon"></text>
+        </view>
+        <text class="indicator-text">{{ poster ? t('viewFullscreen') : t('waitingAsset') }}</text>
+      </view>
+
+      <view class="vr-bottom-bar tn-safe-area-inset-bottom">
+        <view class="vr-title-area">
+          <view class="vr-title">{{ resolvedPageTitle }}</view>
+          <view class="vr-subtitle">{{ poster ? t('posterSubtitle') : t('placeholderSubtitle') }}</view>
+        </view>
+        
+        <view class="vr-action-circle" @click="openPosterPreview">
+          <text :class="poster ? 'tn-icon-image' : 'tn-icon-vr'"></text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  i18n: {
+    zh: {
+      defaultTitle: 'VR看房',
+      emptyPreview: '暂无VR预览画面',
+      modeChip: 'VR预览模式',
+      viewFullscreen: '查看全屏预览',
+      waitingAsset: '等待素材接入',
+      posterSubtitle: '当前展示 VR 预览海报，可点击查看大图。',
+      placeholderSubtitle: '当前房型已保留 VR 入口，后续可继续接入更完整的沉浸式资源。',
+      noAsset: '暂无VR预览素材'
+    },
+    en: {
+      defaultTitle: 'VR Viewing',
+      emptyPreview: 'No VR preview available',
+      modeChip: 'VR Preview',
+      viewFullscreen: 'View Fullscreen',
+      waitingAsset: 'Waiting for assets',
+      posterSubtitle: 'The current VR preview poster is displayed. Tap to view the full image.',
+      placeholderSubtitle: 'This room type keeps its VR entry reserved for richer immersive assets later.',
+      noAsset: 'No VR preview asset available'
+    }
+  },
+  data() {
+    return {
+      pageTitleZh: '',
+      pageTitleEn: '',
+      rawPageTitle: '',
+      poster: ''
+    }
+  },
+  computed: {
+    resolvedPageTitle() {
+      if (this.$getLanguage() === 'en') {
+        return this.pageTitleEn || this.pageTitleZh || this.rawPageTitle || this.t('defaultTitle')
+      }
+      return this.pageTitleZh || this.pageTitleEn || this.rawPageTitle || this.t('defaultTitle')
+    },
+    navBarBackStyle() {
+      return {
+        background: 'rgba(0, 0, 0, 0.4)',
+        borderRadius: '50%',
+        width: '64rpx',
+        height: '64rpx',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: '12rpx'
+      }
+    }
+  },
+  onLoad(options) {
+    this.pageTitleZh = options && (options.titleZh || options.title) ? decodeURIComponent(options.titleZh || options.title) : ''
+    this.pageTitleEn = options && options.titleEn ? decodeURIComponent(options.titleEn) : ''
+    this.rawPageTitle = options && options.title ? decodeURIComponent(options.title) : ''
+    this.poster = options.poster ? decodeURIComponent(options.poster) : ''
+  },
+  onShareAppMessage() {
+    return {
+      title: this.resolvedPageTitle,
+      path: `/pkgExplore/vr_preview/vr_preview?title=${encodeURIComponent(this.resolvedPageTitle)}&titleZh=${encodeURIComponent(this.pageTitleZh || this.resolvedPageTitle)}&titleEn=${encodeURIComponent(this.pageTitleEn || this.resolvedPageTitle)}&poster=${encodeURIComponent(this.poster || '')}`,
+      imageUrl: this.poster || ''
+    }
+  },
+  onShareTimeline() {
+    return {
+      title: this.resolvedPageTitle,
+      query: `title=${encodeURIComponent(this.resolvedPageTitle)}&titleZh=${encodeURIComponent(this.pageTitleZh || this.resolvedPageTitle)}&titleEn=${encodeURIComponent(this.pageTitleEn || this.resolvedPageTitle)}&poster=${encodeURIComponent(this.poster || '')}`,
+      imageUrl: this.poster || ''
+    }
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgExplore.vr_preview.vr_preview', key, params)
+    },
+    openPosterPreview() {
+      if (!this.poster) {
+        uni.showToast({
+          title: this.t('noAsset'),
+          icon: 'none'
+        })
+        return
+      }
+      uni.previewImage({
+        urls: [this.poster],
+        current: this.poster
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.vr-preview-page {
+  height: 100vh;
+  width: 100vw;
+  background: #000000;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.vr-stage {
+  position: absolute;
+  inset: 0;
+}
+
+.vr-poster,
+.vr-empty {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.vr-empty {
+  background: #111111;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 28rpx;
+}
+
+.vr-mask {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
+  pointer-events: none;
+}
+
+.vr-mode-chip {
+  position: absolute;
+  left: 32rpx;
+  top: calc(120rpx + env(safe-area-inset-top));
+  z-index: 10;
+  padding: 12rpx 20rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1rpx solid rgba(255, 255, 255, 0.22);
+  color: #ffffff;
+  font-size: 22rpx;
+  letter-spacing: 2rpx;
+  backdrop-filter: blur(12rpx);
+}
+
+.vr-center-indicator {
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.indicator-ring {
+  position: absolute;
+  top: 14rpx;
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 50%;
+  border: 2rpx solid rgba(255, 255, 255, 0.3);
+  animation: vrRipple 2.5s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
+}
+
+.indicator-core {
+  width: 110rpx;
+  height: 110rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(12rpx);
+  border: 2rpx solid rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
+  margin-bottom: 24rpx;
+}
+
+.indicator-icon {
+  font-size: 48rpx;
+  color: #ffffff;
+}
+
+.indicator-text {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.9);
+  letter-spacing: 4rpx;
+  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.6);
+}
+
+@keyframes vrRipple {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+
+.vr-bottom-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  padding: 0 40rpx calc(60rpx + env(safe-area-inset-bottom));
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.vr-title-area {
+  flex: 1;
+  padding-right: 40rpx;
+}
+
+.vr-title {
+  font-size: 48rpx;
+  font-weight: 800;
+  color: #ffffff;
+  margin-bottom: 12rpx;
+  text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.5);
+  letter-spacing: 2rpx;
+}
+
+.vr-subtitle {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.78);
+  letter-spacing: 1rpx;
+  line-height: 1.7;
+}
+
+.vr-action-circle {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
+  transition: transform 0.2s;
+  
+  &:active {
+    transform: scale(0.9);
+  }
+  
+  text {
+    font-size: 40rpx;
+    color: #000000;
+    margin-left: 6rpx; /* 微调播放图标居中 */
+  }
+}
+</style>
diff --git a/pkgService/application_detail/application_detail.vue b/pkgService/application_detail/application_detail.vue
new file mode 100644
index 0000000..153780b
--- /dev/null
+++ b/pkgService/application_detail/application_detail.vue
@@ -0,0 +1,787 @@
+<template>
+  <view class="application-detail-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-main tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '48rpx' }">
+      <view class="hero-panel tn-margin-bottom-lg" :class="heroThemeClass">
+        <view class="hero-top-row">
+          <view class="hero-badge" :class="heroBadgeClass">{{ applicationTypeText }}</view>
+          <view class="hero-status" :class="['hero-status--' + statusType]">{{ statusText }}</view>
+        </view>
+        <view class="hero-title tn-margin-top">{{ displayTitle }}</view>
+        <view class="hero-meta-row tn-margin-top">
+          <view class="hero-meta-chip">
+            <text class="tn-icon-time tn-margin-right-xs"></text>
+            <text>{{ formatDateTime(detail.createTime) }}</text>
+          </view>
+          <view class="hero-meta-chip">
+            <text class="tn-icon-location tn-margin-right-xs"></text>
+            <text>{{ detail.intendedAreaName || '--' }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view
+        v-if="statusReminderText"
+        class="status-reminder-panel tn-margin-bottom-lg"
+        :class="{
+          'status-reminder-panel--warning': shouldPayDeposit(detail),
+          'status-reminder-panel--info': isWaitingRoomAssignment(detail)
+        }"
+      >
+        <view class="status-reminder-panel__icon">
+          <text :class="shouldPayDeposit(detail) ? 'tn-icon-warning-fill' : 'tn-icon-time-fill'"></text>
+        </view>
+        <view class="status-reminder-panel__content">
+          <view class="status-reminder-panel__title">{{ t('statusReminderTitle') }}</view>
+          <view class="status-reminder-panel__text">{{ statusReminderText }}</view>
+        </view>
+      </view>
+
+      <view class="content-panel tn-margin-bottom-lg">
+        <view class="panel-title">{{ t('basicInfoTitle') }}</view>
+        <view class="meta-row tn-margin-top">
+          <text class="meta-label">{{ t('applicationCodeLabel') }}</text>
+          <view class="meta-action-wrap">
+            <text class="meta-value">{{ detail.detailCode || '--' }}</text>
+            <view v-if="detail.detailCode" class="copy-btn" @click="copyCode">
+              <text class="tn-text-xs tn-text-bold">{{ t('copy') }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="meta-row">
+          <text class="meta-label">{{ t('applicationTypeLabel') }}</text>
+          <text class="meta-value">{{ applicationTypeText }}</text>
+        </view>
+        <view class="meta-row">
+          <text class="meta-label">{{ t('statusLabel') }}</text>
+          <text class="meta-value">{{ statusText }}</text>
+        </view>
+        <view class="meta-row">
+          <text class="meta-label">{{ t('applicantLabel') }}</text>
+          <text class="meta-value">{{ detail.userName || detail.phone || '--' }}</text>
+        </view>
+        <view class="meta-row">
+          <text class="meta-label">{{ t('apartmentLabel') }}</text>
+          <text class="meta-value">{{ detail.intendedAreaName || '--' }}</text>
+        </view>
+        <view class="meta-row" v-if="detail.intendedRoomTypeName">
+          <text class="meta-label">{{ isViewingApplication ? t('intendedRoomTypeLabel') : t('appliedRoomTypeLabel') }}</text>
+          <text class="meta-value">{{ detail.intendedRoomTypeName }}</text>
+        </view>
+        <view class="meta-row">
+          <text class="meta-label">{{ isViewingApplication ? t('viewingTimeLabel') : t('leaseTermLabel') }}</text>
+          <text class="meta-value">{{ displayDateRange }}</text>
+        </view>
+        <view class="meta-row">
+          <text class="meta-label">{{ t('submittedAtLabel') }}</text>
+          <text class="meta-value">{{ formatDateTime(detail.createTime) }}</text>
+        </view>
+      </view>
+
+      <view class="content-panel tn-margin-bottom-lg" v-if="viewingMeta.length">
+        <view class="panel-title">{{ t('viewingInfoTitle') }}</view>
+        <view
+          v-for="item in viewingMeta"
+          :key="item.label"
+          class="meta-row tn-margin-top"
+        >
+          <text class="meta-label">{{ item.label }}</text>
+          <text class="meta-value">{{ item.value }}</text>
+        </view>
+      </view>
+
+      <view class="content-panel tn-margin-bottom-lg">
+        <view class="panel-title">{{ isViewingApplication ? t('applicationRemarkTitle') : t('remarkTitle') }}</view>
+        <view class="remark-panel tn-margin-top">
+          <view
+            v-for="(line, index) in remarkLines"
+            :key="`${line}-${index}`"
+            class="remark-line"
+          >
+            {{ line }}
+          </view>
+        </view>
+      </view>
+
+      <view class="action-row">
+        <view class="ghost-btn" @click="goBackList">
+          <text class="tn-text-bold">{{ t('backList') }}</text>
+        </view>
+        <view
+          v-if="canCancelOrder"
+          class="danger-btn"
+          :class="{ 'danger-btn--loading': canceling }"
+          @tap.stop="handleCancelOrder"
+        >
+          <text class="tn-text-bold">{{ canceling ? t('cancelOrderLoading') : t('cancelOrder') }}</text>
+        </view>
+        <view
+          v-if="canViewBill"
+          class="action-btn"
+          @tap.stop="goToBillPage"
+        >
+          <text class="tn-text-bold">{{ t('viewBill') }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { userDetailCancel } from '@/api/index.js'
+import { getMyApplicationList, saveActiveApplicationCode, saveMyApplicationList } from '@/utils/app-state'
+
+function normalizeApplicationList(list = []) {
+  if (!Array.isArray(list)) {
+    return []
+  }
+  return list
+    .filter(item => item && typeof item === 'object')
+    .map((item) => {
+      const remark = item && item.remark ? String(item.remark) : ''
+      const isViewingApplication = /预约看房申请|看房时间[:：]|意向房型[:：]|意向区域[:：]|viewing request|viewing time[:：]|preferred room type[:：]|preferred area[:：]/i.test(remark)
+      return {
+        ...item,
+        isViewingApplication
+      }
+    })
+}
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '申请详情',
+      basicInfoTitle: '基础信息',
+      applicationCodeLabel: '申请编号',
+      copy: '复制',
+      applicationTypeLabel: '申请类型',
+      statusLabel: '当前状态',
+      applicantLabel: '申请人',
+      apartmentLabel: '所属公寓',
+      intendedRoomTypeLabel: '意向房型',
+      appliedRoomTypeLabel: '申请房型',
+      viewingTimeLabel: '预约时间',
+      leaseTermLabel: '预计租期',
+      submittedAtLabel: '提交时间',
+      viewingInfoTitle: '带看信息',
+      applicationRemarkTitle: '申请说明',
+      remarkTitle: '补充说明',
+      backList: '返回列表',
+      viewBill: '查看关联账单',
+      viewingApplicationTitle: '预约看房申请',
+      stayApplicationTitle: '入住申请',
+      viewingApplicationType: '预约看房',
+      stayApplicationType: '入住申请',
+      statusPending: '待审核',
+      statusApproved: '已通过',
+      statusRejected: '已拒绝',
+      statusFinished: '已结束',
+      statusProcessing: '处理中',
+      statusPendingPayment: '请支付定金',
+      statusWaitingRoomAssign: '等待预订中心分配房间',
+      statusReminderTitle: '当前进度提醒',
+      emptyRemark: '暂无补充说明',
+      codeCopied: '申请编号已复制',
+      missingBillCode: '申请单编号缺失',
+      cancelOrder: '取消订单',
+      cancelOrderLoading: '取消中...',
+      cancelOrderTitle: '取消订单',
+      cancelOrderContent: '取消后将关闭当前未支付的定金订单，是否继续？',
+      cancelOrderSuccess: '订单已取消',
+      cancelOrderFailed: '取消订单失败',
+      viewingTimeKey: '看房时间',
+      leaseDurationKey: '预计租住时长',
+      budgetKey: '租金预算',
+      commuteKey: '工作/通勤地点',
+      preferredAreaKey: '意向区域',
+      preferredRoomTypeKey: '意向房型',
+      paymentMethodKey: '支付方式',
+      dateRangeJoiner: ' 至 '
+    },
+    en: {
+      navTitle: 'Application Detail',
+      basicInfoTitle: 'Basic Information',
+      applicationCodeLabel: 'Application No.',
+      copy: 'Copy',
+      applicationTypeLabel: 'Application Type',
+      statusLabel: 'Status',
+      applicantLabel: 'Applicant',
+      apartmentLabel: 'Apartment',
+      intendedRoomTypeLabel: 'Preferred Room Type',
+      appliedRoomTypeLabel: 'Requested Room Type',
+      viewingTimeLabel: 'Viewing Time',
+      leaseTermLabel: 'Lease Term',
+      submittedAtLabel: 'Submitted At',
+      viewingInfoTitle: 'Viewing Details',
+      applicationRemarkTitle: 'Application Notes',
+      remarkTitle: 'Remarks',
+      backList: 'Back to List',
+      viewBill: 'View Related Bill',
+      viewingApplicationTitle: 'Viewing Request',
+      stayApplicationTitle: 'Stay Application',
+      viewingApplicationType: 'Viewing Request',
+      stayApplicationType: 'Stay Application',
+      statusPending: 'Pending',
+      statusApproved: 'Approved',
+      statusRejected: 'Rejected',
+      statusFinished: 'Closed',
+      statusProcessing: 'Processing',
+      statusPendingPayment: 'Please Pay Deposit',
+      statusWaitingRoomAssign: 'Waiting for Room Assignment',
+      statusReminderTitle: 'Current Progress',
+      emptyRemark: 'No additional remarks',
+      codeCopied: 'Application number copied',
+      missingBillCode: 'Missing application bill number',
+      cancelOrder: 'Cancel Order',
+      cancelOrderLoading: 'Canceling...',
+      cancelOrderTitle: 'Cancel Order',
+      cancelOrderContent: 'This will close the current unpaid deposit order. Continue?',
+      cancelOrderSuccess: 'Order canceled',
+      cancelOrderFailed: 'Failed to cancel order',
+      viewingTimeKey: 'Viewing Time',
+      leaseDurationKey: 'Expected Stay Duration',
+      budgetKey: 'Budget',
+      commuteKey: 'Work / Commute Location',
+      preferredAreaKey: 'Preferred Area',
+      preferredRoomTypeKey: 'Preferred Room Type',
+      paymentMethodKey: 'Payment Method',
+      dateRangeJoiner: ' to '
+    }
+  },
+  data() {
+    return {
+      detailCode: '',
+      detail: {},
+      canceling: false
+    }
+  },
+  computed: {
+    isViewingApplication() {
+      return !!(this.detail && this.detail.isViewingApplication)
+    },
+    displayTitle() {
+      if (this.isViewingApplication) {
+        return this.detail.intendedRoomTypeName || this.t('viewingApplicationTitle')
+      }
+      return this.detail.intendedRoomTypeName || this.t('stayApplicationTitle')
+    },
+    applicationTypeText() {
+      return this.isViewingApplication ? this.t('viewingApplicationType') : this.t('stayApplicationType')
+    },
+    statusText() {
+      if (this.language !== 'en' && this.detail && this.detail.statusDesc) {
+        return this.detail.statusDesc
+      }
+      const map = {
+        0: this.t('statusPending'),
+        10: this.t('statusApproved'),
+        20: this.t('statusRejected'),
+        99: this.t('statusFinished')
+      }
+      return map[this.detail.status] || this.t('statusProcessing')
+    },
+    statusType() {
+      if (this.detail.status === 10) {
+        return 'approved'
+      }
+      if (this.detail.status === 20) {
+        return 'rejected'
+      }
+      if (this.detail.status === 99) {
+        return 'finished'
+      }
+      return 'pending'
+    },
+    heroThemeClass() {
+      return this.isViewingApplication ? 'hero-viewing' : 'hero-stay'
+    },
+    heroBadgeClass() {
+      return this.isViewingApplication ? 'badge-viewing' : 'badge-stay'
+    },
+    displayDateRange() {
+      if (!this.detail.start && !this.detail.end) {
+        return '--'
+      }
+      if (this.isViewingApplication) {
+        return `${this.formatDateTime(this.detail.start)}${this.t('dateRangeJoiner')}${this.formatDateTime(this.detail.end)}`
+      }
+      return `${this.formatDate(this.detail.start)}${this.t('dateRangeJoiner')}${this.formatDate(this.detail.end)}`
+    },
+    remarkLines() {
+      const text = this.detail && this.detail.remark ? String(this.detail.remark).trim() : ''
+      if (!text) {
+        return [this.t('emptyRemark')]
+      }
+      return text.split(/\r?\n/).filter(Boolean)
+    },
+    viewingMeta() {
+      if (!this.isViewingApplication) {
+        return []
+      }
+      return this.parseViewingRemark()
+    },
+    statusReminderText() {
+      if (this.shouldPayDeposit(this.detail)) {
+        return this.t('statusPendingPayment')
+      }
+      if (this.isWaitingRoomAssignment(this.detail)) {
+        return this.t('statusWaitingRoomAssign')
+      }
+      return ''
+    },
+    canViewBill() {
+      return this.shouldPayDeposit(this.detail)
+        && !this.isViewingApplication
+        && this.detail
+        && this.detail.detailCode
+        && this.statusType === 'pending'
+    },
+    canCancelOrder() {
+      return this.shouldPayDeposit(this.detail)
+        && !this.isViewingApplication
+        && this.detail
+        && this.detail.detailCode
+        && !this.canceling
+    }
+  },
+  onLoad(options = {}) {
+    this.detailCode = options.code || ''
+    this.restoreDetail(options.payload || '')
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.application_detail.application_detail', key, params)
+    },
+    isPaidApplication(item = {}) {
+      return !item.isViewingApplication && Number(item.payStatus) === 10
+    },
+    shouldPayDeposit(item = {}) {
+      return !item.isViewingApplication
+        && Number(item.status) === 0
+        && Number(item.payStatus) !== 10
+    },
+    isWaitingRoomAssignment(item = {}) {
+      return !item.isViewingApplication
+        && Number(item.status) === 0
+        && Number(item.payStatus) === 10
+    },
+    restoreDetail(payload = '') {
+      if (payload) {
+        try {
+          const parsed = JSON.parse(decodeURIComponent(payload))
+          this.detail = parsed && typeof parsed === 'object' ? parsed : {}
+          return
+        } catch (error) {
+          console.error('parse application detail payload error', error)
+        }
+      }
+
+      const list = normalizeApplicationList(getMyApplicationList())
+      const matched = list.find(item => String(item.detailCode || '') === String(this.detailCode || ''))
+      this.detail = matched || {
+        detailCode: this.detailCode,
+        isViewingApplication: false
+      }
+    },
+    parseViewingRemark() {
+      const lines = this.remarkLines
+      const targets = [
+        { zh: '看房时间', en: 'Viewing Time' },
+        { zh: '预计租住时长', en: 'Expected Stay Duration' },
+        { zh: '租金预算', en: 'Budget' },
+        { zh: '工作/通勤地点', en: 'Work / Commute Location' },
+        { zh: '意向区域', en: 'Preferred Area' },
+        { zh: '意向房型', en: 'Preferred Room Type' },
+        { zh: '支付方式', en: 'Payment Method' }
+      ]
+      return lines
+        .map((line) => {
+          const matched = targets.find(item => {
+            return line.startsWith(`${item.zh}：`)
+              || line.startsWith(`${item.zh}:`)
+              || line.startsWith(`${item.en}：`)
+              || line.startsWith(`${item.en}:`)
+          })
+          if (!matched) {
+            return null
+          }
+          const localizedLabelMap = {
+            '看房时间': this.t('viewingTimeKey'),
+            '预计租住时长': this.t('leaseDurationKey'),
+            '租金预算': this.t('budgetKey'),
+            '工作/通勤地点': this.t('commuteKey'),
+            '意向区域': this.t('preferredAreaKey'),
+            '意向房型': this.t('preferredRoomTypeKey'),
+            '支付方式': this.t('paymentMethodKey')
+          }
+          const rawValue = line
+            .replace(`${matched.zh}：`, '')
+            .replace(`${matched.zh}:`, '')
+            .replace(`${matched.en}：`, '')
+            .replace(`${matched.en}:`, '')
+          return {
+            label: localizedLabelMap[matched.zh] || matched.en,
+            value: rawValue || '--'
+          }
+        })
+        .filter(Boolean)
+    },
+    formatDateTime(value) {
+      if (!value) {
+        return '--'
+      }
+      const text = String(value).replace('T', ' ')
+      return text.length > 16 ? text.slice(0, 16) : text
+    },
+    formatDate(value) {
+      if (!value) {
+        return '--'
+      }
+      return String(value).slice(0, 10)
+    },
+    copyCode() {
+      if (!this.detail.detailCode) {
+        return
+      }
+      uni.setClipboardData({
+        data: String(this.detail.detailCode),
+        success: () => {
+          uni.showToast({
+            title: this.t('codeCopied'),
+            icon: 'none'
+          })
+        }
+      })
+    },
+    confirmCancelOrder() {
+      return new Promise((resolve) => {
+        uni.showModal({
+          title: this.t('cancelOrderTitle'),
+          content: this.t('cancelOrderContent'),
+          confirmColor: '#ef4444',
+          success: (res) => resolve(!!(res && res.confirm)),
+          fail: () => resolve(false)
+        })
+      })
+    },
+    syncCanceledDetailToCache() {
+      const list = normalizeApplicationList(getMyApplicationList())
+      if (!list.length) {
+        return
+      }
+      const nextList = list.map((item) => {
+        if (String(item.detailCode || '') !== String(this.detail.detailCode || '')) {
+          return item
+        }
+        return {
+          ...item,
+          status: 99,
+          statusDesc: this.t('statusFinished')
+        }
+      })
+      saveMyApplicationList(nextList)
+    },
+    handleCancelOrder() {
+      if (!this.canCancelOrder || !this.detail.detailCode) {
+        return
+      }
+      this.confirmCancelOrder()
+        .then((confirmed) => {
+          if (!confirmed) {
+            return
+          }
+          this.canceling = true
+          return userDetailCancel({
+            detailCode: this.detail.detailCode,
+            code: this.detail.detailCode,
+            referenceTypeNo: this.detail.detailCode
+          }, this.language)
+            .then(() => {
+              this.detail = {
+                ...this.detail,
+                status: 99,
+                statusDesc: this.t('statusFinished')
+              }
+              this.syncCanceledDetailToCache()
+              uni.showToast({
+                title: this.t('cancelOrderSuccess'),
+                icon: 'success'
+              })
+            })
+        })
+        .catch((error) => {
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('cancelOrderFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.canceling = false
+        })
+    },
+    goBackList() {
+      uni.navigateBack()
+    },
+    goToBillPage() {
+      if (!this.detail.detailCode) {
+        uni.showToast({
+          title: this.t('missingBillCode'),
+          icon: 'none'
+        })
+        return
+      }
+      saveActiveApplicationCode(this.detail.detailCode)
+      uni.navigateTo({
+        url: `/pkgService/utility_recharge/utility_recharge?referenceTypeNo=${encodeURIComponent(this.detail.detailCode)}`
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.application-detail-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+}
+
+.hero-panel,
+.content-panel {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba($brand-primary, 0.05);
+}
+
+.hero-viewing {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.12) 0%, rgba($brand-primary, 0.04) 100%);
+}
+
+.hero-stay {
+  background: linear-gradient(135deg, rgba(64, 203, 242, 0.12) 0%, rgba($brand-primary, 0.04) 100%);
+}
+
+.status-reminder-panel {
+  display: flex;
+  align-items: flex-start;
+  gap: 20rpx;
+  padding: 28rpx 32rpx;
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+}
+
+.status-reminder-panel--warning {
+  background: linear-gradient(180deg, rgba(255, 247, 237, 0.96) 0%, rgba(255, 251, 245, 0.98) 100%);
+  border: 1px solid rgba(249, 115, 22, 0.16);
+}
+
+.status-reminder-panel--info {
+  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
+  border: 1px solid rgba(59, 130, 246, 0.14);
+}
+
+.status-reminder-panel__icon {
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 34rpx;
+}
+
+.status-reminder-panel--warning .status-reminder-panel__icon {
+  color: #C2410C;
+  background: rgba(249, 115, 22, 0.12);
+}
+
+.status-reminder-panel--info .status-reminder-panel__icon {
+  color: #1D4ED8;
+  background: rgba(59, 130, 246, 0.12);
+}
+
+.status-reminder-panel__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.status-reminder-panel__title {
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #0F172A;
+}
+
+.status-reminder-panel__text {
+  margin-top: 8rpx;
+  font-size: 30rpx;
+  line-height: 1.6;
+  font-weight: 600;
+  color: #334155;
+}
+
+.hero-top-row,
+.hero-meta-row,
+.meta-row,
+.action-row {
+  display: flex;
+  align-items: center;
+}
+
+.hero-top-row,
+.meta-row {
+  justify-content: space-between;
+}
+
+.hero-meta-row,
+.action-row {
+  gap: 16rpx;
+  flex-wrap: wrap;
+}
+
+.hero-badge,
+.hero-status,
+.hero-meta-chip,
+.copy-btn,
+.ghost-btn,
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-badge,
+.hero-status {
+  padding: 10rpx 22rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.badge-viewing,
+.badge-stay {
+  background: rgba($brand-primary, 0.14);
+  color: $brand-primary;
+}
+
+.hero-status--pending {
+  background: rgba(245, 158, 11, 0.12);
+  color: #B45309;
+}
+
+.hero-status--approved {
+  background: rgba($brand-primary, 0.12);
+  color: $brand-primary;
+}
+
+.hero-status--rejected {
+  background: rgba(239, 68, 68, 0.12);
+  color: #B91C1C;
+}
+
+.hero-status--finished {
+  background: rgba(100, 116, 139, 0.12);
+  color: #475569;
+}
+
+.hero-title,
+.panel-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #1A2233;
+}
+
+.hero-meta-chip {
+  height: 56rpx;
+  padding: 0 20rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.78);
+  color: #51607A;
+  font-size: 22rpx;
+}
+
+.meta-row {
+  padding: 18rpx 0;
+  border-bottom: 1px dashed rgba($brand-primary, 0.14);
+}
+
+.meta-row:last-child {
+  border-bottom: none;
+}
+
+.meta-label {
+  color: #6A7A99;
+  font-size: 26rpx;
+}
+
+.meta-value {
+  max-width: 62%;
+  text-align: right;
+  color: #1A2233;
+  font-size: 26rpx;
+  font-weight: 500;
+}
+
+.meta-action-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.copy-btn {
+  height: 48rpx;
+  padding: 0 18rpx;
+  border-radius: 999rpx;
+  background: rgba($brand-primary, 0.1);
+  color: $brand-primary;
+}
+
+.remark-panel {
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: rgba($brand-primary, 0.03);
+  border: 1rpx solid rgba($brand-primary, 0.12);
+}
+
+.remark-line {
+  color: #1A2233;
+  line-height: 1.8;
+  font-size: 27rpx;
+}
+
+.ghost-btn,
+.danger-btn,
+.action-btn {
+  flex: 1;
+  min-height: 92rpx;
+  border-radius: 999rpx;
+}
+
+.ghost-btn {
+  background: #FFFFFF;
+  border: 1rpx solid rgba($brand-primary, 0.2);
+  color: $brand-primary;
+  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.06);
+}
+
+.danger-btn {
+  background: #FFFFFF;
+  border: 1rpx solid rgba(239, 68, 68, 0.22);
+  color: #DC2626;
+  box-shadow: 0 6rpx 16rpx rgba(239, 68, 68, 0.08);
+}
+
+.danger-btn--loading {
+  opacity: 0.72;
+}
+
+.action-btn {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #FFFFFF;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+}
+</style>
diff --git a/pkgService/components/CurrentApplicationBillPanel.vue b/pkgService/components/CurrentApplicationBillPanel.vue
new file mode 100644
index 0000000..b991d68
--- /dev/null
+++ b/pkgService/components/CurrentApplicationBillPanel.vue
@@ -0,0 +1,2170 @@
+<template>
+  <view class="bill-panel">
+    <view class="hero-panel tn-margin-bottom-lg">
+      <view class="hero-title tn-margin-top">{{ t('heroTitle') }}</view>
+      <view class="hero-desc tn-margin-top-sm">{{ heroDesc }}</view>
+      <view v-if="currentReferenceTypeNo" class="source-tag tn-margin-top-sm">{{ t('applicationNoPrefix') }}{{ currentReferenceTypeNo }}</view>
+      <view class="hero-summary tn-margin-top-lg">
+        <view class="summary-card">
+          <view class="summary-label">{{ t('pendingCountLabel') }}</view>
+          <view class="summary-value tn-margin-top-sm">{{ billList.length }}</view>
+        </view>
+        <view class="summary-card">
+          <view class="summary-label">{{ t('pendingAmountLabel') }}</view>
+          <view class="summary-value tn-margin-top-sm">¥{{ formatMoney(totalRemainingAmount) }}</view>
+        </view>
+      </view>
+    </view>
+
+    <view v-if="loading || resolvingReference" class="empty-panel tn-padding-lg">
+      <view class="empty-title">{{ t('loadingTitle') }}</view>
+      <view class="empty-desc tn-margin-top-sm">{{ t('loadingDesc') }}</view>
+    </view>
+
+    <view v-else-if="billList.length">
+      <view
+        v-for="(item, index) in billList"
+        :key="getBillKey(item)"
+        class="bill-card tn-margin-bottom-lg"
+      >
+        <view class="card-head tn-flex tn-flex-row-between tn-flex-col-center">
+          <view class="card-title-wrap">
+            <view class="card-title">{{ getReferenceTypeText(item) }}</view>
+            <view class="card-code tn-margin-top-xs">{{ getBillNo(item) }}</view>
+          </view>
+          <view :class="['status-badge', 'status-' + resolvePaymentStatusType(getBillPaymentStatus(item))]">
+            {{ getBillPaymentStatusText(item) }}
+          </view>
+        </view>
+
+        <view class="card-body tn-margin-top">
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('relatedBusinessNoLabel') }}</text>
+            <text class="info-value">{{ getBillReferenceTypeNo(item) || '--' }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('totalChargeLabel') }}</text>
+            <text class="info-value">¥{{ formatMoney(getBillTotalCharge(item)) }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('paidAmountLabel') }}</text>
+            <text class="info-value">¥{{ formatMoney(getBillPaidAmount(item)) }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('remainingAmountLabel') }}</text>
+            <text class="info-value info-value--highlight">¥{{ formatMoney(getBillRemainingAmount(item)) }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('refundStatusLabel') }}</text>
+            <text class="info-value">{{ getRefundStatusText(getBillRefundStatus(item)) }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('createTimeLabel') }}</text>
+            <text class="info-value">{{ formatDateTime(getBillCreateTime(item)) }}</text>
+          </view>
+        </view>
+
+        <view v-if="getBillRemark(item) || getBillResult(item)" class="remark-panel tn-margin-top">
+          <view v-if="getBillRemark(item)" class="remark-line">
+            <text class="remark-label">{{ t('remarkLabel') }}</text>
+            <text class="remark-text">{{ getBillRemark(item) }}</text>
+          </view>
+          <view v-if="getBillResult(item)" class="remark-line tn-margin-top-sm">
+            <text class="remark-label">{{ t('resultLabel') }}</text>
+            <text class="remark-text">{{ getBillResult(item) }}</text>
+          </view>
+        </view>
+
+        <view v-if="getPendingPaymentOrder(item)" class="pending-payment-panel tn-margin-top">
+          <view class="pending-payment-title">{{ t('pendingPaymentTitle') }}</view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('pendingPaymentOrderNoLabel') }}</text>
+            <text class="info-value">{{ getPendingPaymentOrderNo(item) }}</text>
+          </view>
+          <view class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('pendingPaymentAmountLabel') }}</text>
+            <text class="info-value info-value--highlight">¥{{ formatMoney(getPendingPaymentAmount(item)) }}</text>
+          </view>
+          <view v-if="getPendingPaymentExpireText(item)" class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('pendingPaymentExpireLabel') }}</text>
+            <text class="info-value" :class="{ 'info-value--expired': isPendingPaymentExpired(item) }">
+              {{ getPendingPaymentExpireText(item) }}
+            </text>
+          </view>
+          <view v-if="getPendingPaymentDescription(item)" class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('pendingPaymentDescLabel') }}</text>
+            <text class="info-value">{{ getPendingPaymentDescription(item) }}</text>
+          </view>
+          <view v-if="getPendingPaymentChannel(item)" class="info-row tn-flex tn-flex-row-between">
+            <text class="info-label">{{ t('pendingPaymentChannelLabel') }}</text>
+            <text class="info-value">{{ getPendingPaymentChannel(item) }}</text>
+          </view>
+        </view>
+
+        <view class="card-footer tn-margin-top-lg">
+          <view
+            v-if="canCancelOrder(item)"
+            class="cancel-btn"
+            :data-bill-index="index"
+            :class="{ 'cancel-btn--loading': cancelingBillNo === getBillNo(item) }"
+            @tap.stop="handleCancelOrder"
+          >
+            <text class="tn-text-bold">{{ getCancelButtonText(item) }}</text>
+          </view>
+          <view
+            class="pay-btn"
+            :data-bill-index="index"
+            :class="{ 'pay-btn--loading': payingBillNo === getBillNo(item) }"
+            @tap.stop="handleWechatPay"
+          >
+            <text class="tn-text-bold">{{ getPayButtonText(item) }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view v-else class="empty-panel tn-padding-lg">
+      <view class="empty-title">{{ currentReferenceTypeNo ? t('emptyPendingTitle') : t('emptyApplicationTitle') }}</view>
+      <view class="empty-desc tn-margin-top-sm">{{ currentReferenceTypeNo ? t('emptyPendingDesc') : t('emptyApplicationDesc') }}</view>
+      <view v-if="!currentReferenceTypeNo" class="empty-action tn-margin-top-lg" @tap="goToMyApplication">
+        <text class="tn-text-bold">{{ t('goToMyApplication') }}</text>
+      </view>
+    </view>
+
+    <tn-popup v-model="showPaymentNotice" mode="bottom" length="72%" :borderRadius="32" :closeBtn="true" @close="handlePaymentNoticeClose">
+      <view class="payment-notice-popup">
+        <view class="payment-notice-popup__header">
+          <view class="payment-notice-popup__title">{{ paymentNoticeContext.title }}</view>
+        </view>
+
+        <scroll-view scroll-y class="payment-notice-popup__body">
+          <view class="payment-notice-popup__summary">
+            <view class="payment-notice-popup__summary-row">
+              <text class="payment-notice-popup__summary-label">{{ paymentNoticeContext.billLabel }}</text>
+              <text class="payment-notice-popup__summary-value">{{ paymentNoticeContext.billNo }}</text>
+            </view>
+            <view class="payment-notice-popup__summary-row">
+              <text class="payment-notice-popup__summary-label">{{ paymentNoticeContext.itemLabel }}</text>
+              <text class="payment-notice-popup__summary-value">{{ paymentNoticeContext.itemTitle }}</text>
+            </view>
+            <view class="payment-notice-popup__summary-row">
+              <text class="payment-notice-popup__summary-label">{{ paymentNoticeContext.amountLabel }}</text>
+              <text class="payment-notice-popup__summary-value payment-notice-popup__summary-value--price">{{ paymentNoticeContext.amountText }}</text>
+            </view>
+          </view>
+
+          <view class="payment-notice-popup__content">
+            <view
+              v-for="(line, index) in paymentNoticeContext.lines"
+              :key="`payment-notice-line-${index}`"
+              class="payment-notice-popup__line"
+            >
+              {{ index + 1 }}. {{ line }}
+            </view>
+          </view>
+        </scroll-view>
+
+        <view class="payment-notice-popup__footer">
+          <view class="payment-notice-popup__action payment-notice-popup__action--ghost" @tap="closePaymentNotice(false)">
+            <text class="tn-text-bold">{{ paymentNoticeContext.cancelText }}</text>
+          </view>
+          <view class="payment-notice-popup__action payment-notice-popup__action--primary" @tap="closePaymentNotice(true)">
+            <text class="tn-text-bold">{{ paymentNoticeContext.confirmText }}</text>
+          </view>
+        </view>
+      </view>
+    </tn-popup>
+
+    <view v-if="showPaymentFeedbackPanel" class="payment-waiting-mask">
+      <view :class="['payment-waiting-panel', 'payment-waiting-panel--' + paymentStageVisualType]">
+        <view class="payment-waiting-glow payment-waiting-glow--one"></view>
+        <view class="payment-waiting-glow payment-waiting-glow--two"></view>
+
+        <view :class="['payment-waiting-badge', 'payment-waiting-badge--' + paymentStageVisualType]">
+          <text :class="[paymentBadgeIconClass, 'payment-waiting-badge__icon']"></text>
+          <text>{{ paymentStageLabel }}</text>
+        </view>
+
+        <view class="payment-waiting-icon-wrap">
+          <view v-if="isPaymentWaitingStage" class="payment-waiting-icon-ring"></view>
+          <view :class="['payment-waiting-icon-core', 'payment-waiting-icon-core--' + paymentStageVisualType]">
+            <text :class="[paymentFeedbackIconClass, 'payment-waiting-icon', { 'payment-waiting-icon--spin': isPaymentWaitingStage }]"></text>
+          </view>
+        </view>
+
+        <view class="payment-waiting-title">{{ paymentWaitingTitle }}</view>
+        <view class="payment-waiting-desc">{{ paymentWaitingDesc }}</view>
+
+        <view v-if="isPaymentWaitingStage" class="payment-progress-card">
+          <view class="payment-progress-head tn-flex tn-flex-row-between tn-flex-col-center">
+            <text class="payment-progress-label">{{ t('paymentProgressLabel') }}</text>
+            <text class="payment-progress-value">{{ paymentProgressText }}</text>
+          </view>
+          <view class="payment-progress-track">
+            <view class="payment-progress-bar" :style="{ width: paymentProgressPercent + '%' }"></view>
+          </view>
+          <view class="payment-progress-note">{{ paymentStatusHintText }}</view>
+        </view>
+
+        <view class="payment-summary-grid">
+          <view class="payment-summary-item">
+            <view class="payment-summary-label">{{ t('billNoLabel') }}</view>
+            <view class="payment-summary-value payment-summary-value--mono">{{ paymentWaitingBillNo || '--' }}</view>
+          </view>
+          <view class="payment-summary-item">
+            <view class="payment-summary-label">{{ t('currentPaymentLabel') }}</view>
+            <view class="payment-summary-value payment-summary-value--price">¥{{ paymentWaitingAmountText }}</view>
+          </view>
+        </view>
+
+        <view class="payment-tips-card">
+          <view class="payment-tips-title">{{ paymentTipsTitle }}</view>
+          <view v-for="(tip, index) in paymentTips" :key="`${paymentStage}-${index}`" class="payment-tip-line">{{ tip }}</view>
+        </view>
+
+        <view v-if="showPaymentActionButton" class="payment-action-row">
+          <view class="payment-action-btn" @tap="handlePaymentResultAction">
+            <text class="tn-text-bold">{{ paymentActionText }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { accountQueryBills, applicationFormMePage, paymentBillPay, paymentPayingBills, paymentStatusByBillNo, userDetailCancel } from '@/api/index.js'
+import {
+  ACCOUNT_BILL_PAYMENT_STATUS,
+  ACCOUNT_BILL_STATUS,
+  getAccountBillPaymentStatusLabel,
+  getAccountBillRefundStatusLabel,
+  getAccountReferenceTypeLabel
+} from '@/utils/enum-store.js'
+import { getActiveApplicationCode, getMyApplicationList, saveActiveApplicationCode, saveMyApplicationList } from '@/utils/app-state'
+
+const VIEWING_APPLICATION_PATTERN = /预约看房申请|看房时间：|意向房型：|意向区域：|viewing request|viewing time|preferred room type|preferred area/i
+
+function normalizeBillList(response) {
+  const payload = response && response.data ? response.data : response
+  if (Array.isArray(payload)) {
+    return payload.filter(item => item && typeof item === 'object')
+  }
+  if (payload && Array.isArray(payload.data)) {
+    return payload.data.filter(item => item && typeof item === 'object')
+  }
+  return []
+}
+
+function normalizeApplicationList(list = []) {
+  if (!Array.isArray(list)) {
+    return []
+  }
+  return list
+    .filter(item => item && typeof item === 'object')
+    .map((item) => {
+      const remark = item && item.remark ? String(item.remark) : ''
+      const isViewingApplication = VIEWING_APPLICATION_PATTERN.test(remark)
+      return {
+        ...item,
+        isViewingApplication
+      }
+    })
+}
+
+function parseExpireTimeToTimestamp(value) {
+  if (value === null || typeof value === 'undefined' || value === '') {
+    return 0
+  }
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value > 1e12 ? value : value * 1000
+  }
+  const text = String(value).trim()
+  if (!text) {
+    return 0
+  }
+  if (/^\d+$/.test(text)) {
+    const numericValue = Number(text)
+    if (!Number.isFinite(numericValue)) {
+      return 0
+    }
+    return numericValue > 1e12 ? numericValue : numericValue * 1000
+  }
+  const normalizedText = text.includes('T') ? text : text.replace(/-/g, '/')
+  const timestamp = Date.parse(normalizedText)
+  return Number.isFinite(timestamp) ? timestamp : 0
+}
+
+function padCountdownUnit(value) {
+  return String(Math.max(0, Number(value) || 0)).padStart(2, '0')
+}
+
+const PAYMENT_QUERY_STATUS = {
+  PENDING: 'pending',
+  SUCCESS: 'success',
+  FAILED: 'failed'
+}
+
+const PAYMENT_ORDER_STATUS = {
+  SUCCESS: 10,
+  FAILED: 99
+}
+
+const PAYMENT_QUERY_MAX_ATTEMPTS = 8
+const PAYMENT_QUERY_INTERVAL = 1800
+
+export default {
+  name: 'CurrentApplicationBillPanel',
+  props: {
+    referenceTypeNo: {
+      type: String,
+      default: ''
+    },
+    autoResolveReference: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      billList: [],
+      pendingPaymentOrderMap: {},
+      payingBillNo: '',
+      cancelingBillNo: '',
+      currentReferenceTypeNo: '',
+      countdownNow: Date.now(),
+      resolvingReference: false,
+      paymentPollingBillNo: '',
+      paymentPollingAttempt: 0,
+      paymentStage: '',
+      paymentStatusHint: '',
+      paymentSession: null,
+      showPaymentNotice: false,
+      paymentNoticeResolver: null,
+      paymentNoticeContext: {
+        title: '',
+        billLabel: '',
+        billNo: '--',
+        itemLabel: '',
+        itemTitle: '',
+        amountLabel: '',
+        amountText: '',
+        lines: [],
+        confirmText: '',
+        cancelText: ''
+      },
+      i18n: {
+        zh: {
+          heroTitle: '待支付账单',
+          applicationNoPrefix: '申请单号：',
+          pendingCountLabel: '待支付数量',
+          pendingAmountLabel: '待支付总额',
+          loadingTitle: '账单加载中',
+          loadingDesc: '正在同步您的待支付账单，请稍候。',
+          relatedBusinessNoLabel: '关联业务编号',
+          totalChargeLabel: '应收合计',
+          paidAmountLabel: '已付金额',
+          remainingAmountLabel: '待付金额',
+          refundStatusLabel: '退款状态',
+          createTimeLabel: '创建时间',
+          remarkLabel: '备注',
+          resultLabel: '处理结果',
+          pendingPaymentTitle: '未完成支付订单',
+          pendingPaymentOrderNoLabel: '支付单号',
+          pendingPaymentAmountLabel: '订单金额',
+          pendingPaymentDescLabel: '支付说明',
+          pendingPaymentChannelLabel: '支付渠道',
+          pendingPaymentExpireLabel: '剩余支付时间',
+          pendingPaymentExpired: '已失效',
+          emptyPendingTitle: '暂无待支付账单',
+          emptyApplicationTitle: '暂无可查询申请单',
+          emptyPendingDesc: '当前申请单下没有查询到待支付账单，后续有新账单时会在这里展示。',
+          emptyApplicationDesc: '当前未找到可关联的申请单，请先前往“我的申请”选择具体申请后查看账单。',
+          goToMyApplication: '前往我的申请',
+          paymentProgressLabel: '结果确认进度',
+          billNoLabel: '账单号',
+          currentPaymentLabel: '本次支付',
+          heroDescResolved: '当前页面已按申请单编号查询其关联的待支付账单记录。',
+          heroDescAutoResolve: '当前将优先读取最近申请单的编号来查询关联账单。',
+          paymentStageLaunching: '正在唤起微信收银台',
+          paymentStagePolling: '正在同步支付结果',
+          paymentStageSuccess: '支付结果已确认',
+          paymentStageFailed: '支付未完成',
+          paymentStageDefault: '支付处理中',
+          paymentTitleLaunching: '请完成微信支付',
+          paymentTitlePolling: '正在确认是否支付成功',
+          paymentTitleSuccess: '支付成功',
+          paymentTitleFailed: '支付结果确认失败',
+          paymentTitleDefault: '支付处理中',
+          paymentDescLaunching: '系统正在调起微信支付，请在微信收银台中完成付款后返回。',
+          paymentDescPolling: '支付完成后，系统会自动向后台查询支付状态，无需手动刷新。',
+          paymentDescSuccess: '本次支付已同步完成，账单状态已更新。',
+          paymentDescFailed: '系统暂时未能确认支付成功，您可以查看提示后稍后重试。',
+          paymentProgressWaiting: '等待支付完成',
+          paymentHintLaunching: '已为您准备好支付信息，等待微信支付完成。',
+          paymentHintPolling: '正在与后台核对支付状态，请稍候。',
+          paymentTipsTitleFailed: '处理建议',
+          paymentTipsTitleSuccess: '完成说明',
+          paymentTipsTitleDefault: '温馨提示',
+          paymentTipsFailed1: '若您已完成付款，请稍后刷新账单，避免重复支付。',
+          paymentTipsFailed2: '若微信侧已扣款但页面未更新，请联系管家或客服协助核实。',
+          paymentTipsFailed3: '若未扣款，可返回账单列表后重新发起支付。',
+          paymentTipsSuccess1: '若当前申请单还有其他待付账单，可继续在当前页完成支付。',
+          paymentTipsSuccess2: '若当前账单已全部支付完成，系统会自动返回首页。',
+          paymentTipsSuccess3: '支付记录同步可能略有延迟，刷新后即可看到最新状态。',
+          paymentTipsDefault1: '支付成功后，系统可能需要几秒钟同步账单状态。',
+          paymentTipsDefault2: '请不要重复点击支付，也不要提前关闭当前页面。',
+          paymentTipsDefault3: '如果超时未完成，系统会自动再校验一次账单状态。',
+          paymentActionAcknowledge: '我知道了',
+          buttonConfirming: '确认结果中...',
+          buttonPolling: '查询结果中({current}/{total})',
+          buttonLaunching: '拉起支付中...',
+          wechatPayButton: '微信支付',
+          continuePayButton: '继续支付',
+          paymentStatusPending: '处理中',
+          billRecordFallback: '账单记录',
+          paymentParamIncomplete: '微信支付参数不完整',
+          wechatCodeFailed: '获取微信登录凭证失败',
+          billPaymentDesc: '账单支付',
+          paymentFailedHint: '暂未查询到支付成功结果，请稍后刷新账单确认。',
+          paymentResultSuccess: '后台确认支付成功',
+          paymentResultFailed: '后台返回支付失败',
+          paymentResultPending: '后台仍在处理中',
+          paymentHintPaidWaiting: '已支付成功，正在等待后台确认账单状态。',
+          paymentFailedError: '支付失败',
+          paymentTimeoutError: '支付结果确认超时，请稍后刷新账单确认',
+          paymentSuccessPendingBills: '支付结果已确认，当前申请单仍有其他待支付账单。',
+          paymentSuccessAllDone: '支付结果已确认，当前申请单账单已全部完成。',
+          billInfoIncomplete: '账单信息不完整',
+          paymentNoticeTitle: '用户须知',
+          paymentNoticeBillLabel: '账单号',
+          paymentNoticeAmountLabel: '支付金额',
+          paymentNoticeItemLabel: '费用项目',
+          paymentNoticeLine1: '请确认本次支付账单和金额无误后再继续付款。',
+          paymentNoticeLine2: '支付完成后，账单状态可能需要几秒同步，请勿重复支付。',
+          paymentNoticeLine3: '若支付中断或页面关闭，可稍后返回账单页查看最新结果。',
+          paymentNoticeConfirm: '继续支付',
+          paymentNoticeCancel: '稍后再付',
+          paymentHintLaunchingToast: '正在唤起微信支付，请在微信内完成付款。',
+          paymentCanceled: '已取消支付',
+          paymentResultFailedRetry: '支付结果确认失败，请稍后刷新账单确认',
+          billLoadFailed: '账单加载失败',
+          cancelOrderButton: '取消订单',
+          cancelOrderLoading: '取消中...',
+          cancelOrderTitle: '取消订单',
+          cancelOrderContent: '取消后将关闭当前未支付订单，是否继续？',
+          cancelOrderSuccess: '订单已取消',
+          cancelOrderFailed: '取消订单失败'
+        },
+        en: {
+          heroTitle: 'Pending Bills',
+          applicationNoPrefix: 'Application No: ',
+          pendingCountLabel: 'Pending Count',
+          pendingAmountLabel: 'Pending Amount',
+          loadingTitle: 'Loading Bills',
+          loadingDesc: 'Syncing your pending bills, please wait.',
+          relatedBusinessNoLabel: 'Related Business No.',
+          totalChargeLabel: 'Total Charge',
+          paidAmountLabel: 'Paid Amount',
+          remainingAmountLabel: 'Remaining Amount',
+          refundStatusLabel: 'Refund Status',
+          createTimeLabel: 'Created At',
+          remarkLabel: 'Remark',
+          resultLabel: 'Result',
+          pendingPaymentTitle: 'Unfinished Payment',
+          pendingPaymentOrderNoLabel: 'Payment Order No.',
+          pendingPaymentAmountLabel: 'Order Amount',
+          pendingPaymentDescLabel: 'Description',
+          pendingPaymentChannelLabel: 'Channel',
+          pendingPaymentExpireLabel: 'Time Left',
+          pendingPaymentExpired: 'Expired',
+          emptyPendingTitle: 'No Pending Bills',
+          emptyApplicationTitle: 'No Application Available',
+          emptyPendingDesc: 'No pending bills are found under the current application. New bills will appear here later.',
+          emptyApplicationDesc: 'No related application is found. Please go to "My Applications" and select an application first.',
+          goToMyApplication: 'Go to My Applications',
+          paymentProgressLabel: 'Confirmation Progress',
+          billNoLabel: 'Bill No.',
+          currentPaymentLabel: 'This Payment',
+          heroDescResolved: 'This page is querying pending bills by the current application number.',
+          heroDescAutoResolve: 'The latest application number will be used first to query related bills.',
+          paymentStageLaunching: 'Launching Wechat Pay',
+          paymentStagePolling: 'Syncing Payment Result',
+          paymentStageSuccess: 'Payment Confirmed',
+          paymentStageFailed: 'Payment Incomplete',
+          paymentStageDefault: 'Processing Payment',
+          paymentTitleLaunching: 'Complete Wechat Pay',
+          paymentTitlePolling: 'Confirming Payment Result',
+          paymentTitleSuccess: 'Payment Successful',
+          paymentTitleFailed: 'Payment Confirmation Failed',
+          paymentTitleDefault: 'Processing Payment',
+          paymentDescLaunching: 'Wechat Pay is being launched. Complete the payment in Wechat and return here.',
+          paymentDescPolling: 'After payment, the system checks the payment status automatically. No manual refresh is needed.',
+          paymentDescSuccess: 'This payment has been synchronized and the bill status is updated.',
+          paymentDescFailed: 'The system cannot confirm the payment for now. Please review the tips and try again later.',
+          paymentProgressWaiting: 'Waiting for Payment',
+          paymentHintLaunching: 'Payment information is ready. Waiting for Wechat payment to complete.',
+          paymentHintPolling: 'Checking payment status with the backend, please wait.',
+          paymentTipsTitleFailed: 'Suggestions',
+          paymentTipsTitleSuccess: 'Completion Notes',
+          paymentTipsTitleDefault: 'Tips',
+          paymentTipsFailed1: 'If you have completed the payment, refresh the bill later to avoid duplicate payment.',
+          paymentTipsFailed2: 'If Wechat has deducted the amount but the page is not updated, contact your manager or support for verification.',
+          paymentTipsFailed3: 'If no deduction occurred, return to the bill list and try again.',
+          paymentTipsSuccess1: 'If there are other pending bills under this application, you can continue paying on this page.',
+          paymentTipsSuccess2: 'If all bills are paid, the system returns to the home page automatically.',
+          paymentTipsSuccess3: 'Payment record synchronization may be slightly delayed. Refresh to see the latest status.',
+          paymentTipsDefault1: 'After successful payment, the system may need a few seconds to sync the bill status.',
+          paymentTipsDefault2: 'Do not tap the pay button repeatedly or close this page too early.',
+          paymentTipsDefault3: 'If the process times out, the system checks the bill status again automatically.',
+          paymentActionAcknowledge: 'Got It',
+          buttonConfirming: 'Confirming...',
+          buttonPolling: 'Checking ({current}/{total})',
+          buttonLaunching: 'Launching...',
+          wechatPayButton: 'Wechat Pay',
+          continuePayButton: 'Continue Pay',
+          paymentStatusPending: 'Processing',
+          billRecordFallback: 'Bill Record',
+          paymentParamIncomplete: 'Incomplete Wechat payment parameters',
+          wechatCodeFailed: 'Failed to get Wechat login code',
+          billPaymentDesc: 'Bill Payment',
+          paymentFailedHint: 'Payment success is not confirmed yet. Please refresh the bill later.',
+          paymentResultSuccess: 'Backend confirmed payment success',
+          paymentResultFailed: 'Backend returned payment failure',
+          paymentResultPending: 'Backend is still processing',
+          paymentHintPaidWaiting: 'Payment succeeded. Waiting for backend confirmation of the bill status.',
+          paymentFailedError: 'Payment failed',
+          paymentTimeoutError: 'Payment confirmation timed out. Please refresh the bill later.',
+          paymentSuccessPendingBills: 'Payment is confirmed. There are still other unpaid bills under this application.',
+          paymentSuccessAllDone: 'Payment is confirmed. All bills under this application are completed.',
+          billInfoIncomplete: 'Incomplete bill information',
+          paymentNoticeTitle: 'Payment Notice',
+          paymentNoticeBillLabel: 'Bill No.',
+          paymentNoticeAmountLabel: 'Amount',
+          paymentNoticeItemLabel: 'Charge Item',
+          paymentNoticeLine1: 'Please confirm the bill and payment amount before continuing.',
+          paymentNoticeLine2: 'After payment, the bill status may take a few seconds to sync. Please do not pay repeatedly.',
+          paymentNoticeLine3: 'If the payment is interrupted or the page is closed, return to the bill page later to check the latest result.',
+          paymentNoticeConfirm: 'Continue',
+          paymentNoticeCancel: 'Later',
+          paymentHintLaunchingToast: 'Launching Wechat Pay. Please complete the payment in Wechat.',
+          paymentCanceled: 'Payment canceled',
+          paymentResultFailedRetry: 'Payment confirmation failed. Please refresh the bill later.',
+          billLoadFailed: 'Failed to load bills',
+          cancelOrderButton: 'Cancel Order',
+          cancelOrderLoading: 'Canceling...',
+          cancelOrderTitle: 'Cancel Order',
+          cancelOrderContent: 'This will close the current unpaid order. Continue?',
+          cancelOrderSuccess: 'Order canceled',
+          cancelOrderFailed: 'Failed to cancel order'
+        }
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    totalRemainingAmount() {
+      return this.billList.reduce((sum, item) => {
+        return sum + Number(item && item.remainingAmount ? item.remainingAmount : 0)
+      }, 0)
+    },
+    heroDesc() {
+      if (this.currentReferenceTypeNo) {
+        return this.t('heroDescResolved')
+      }
+      return this.t('heroDescAutoResolve')
+    },
+    showPaymentFeedbackPanel() {
+      return Boolean(this.paymentStage)
+    },
+    isPaymentWaitingStage() {
+      return this.paymentStage === 'launching' || this.paymentStage === 'polling'
+    },
+    isPaymentSuccessStage() {
+      return this.paymentStage === 'success'
+    },
+    isPaymentFailedStage() {
+      return this.paymentStage === 'failed'
+    },
+    paymentStageVisualType() {
+      if (this.isPaymentSuccessStage) {
+        return 'success'
+      }
+      if (this.isPaymentFailedStage) {
+        return 'failed'
+      }
+      return 'waiting'
+    },
+    paymentStageLabel() {
+      if (this.paymentStage === 'launching') {
+        return this.t('paymentStageLaunching')
+      }
+      if (this.paymentStage === 'polling') {
+        return this.t('paymentStagePolling')
+      }
+      if (this.paymentStage === 'success') {
+        return this.t('paymentStageSuccess')
+      }
+      if (this.paymentStage === 'failed') {
+        return this.t('paymentStageFailed')
+      }
+      return this.t('paymentStageDefault')
+    },
+    paymentBadgeIconClass() {
+      if (this.isPaymentSuccessStage) {
+        return 'tn-icon-success-circle-fill'
+      }
+      if (this.isPaymentFailedStage) {
+        return 'tn-icon-warning-fill'
+      }
+      return 'tn-icon-secure'
+    },
+    paymentFeedbackIconClass() {
+      if (this.isPaymentSuccessStage) {
+        return 'tn-icon-success'
+      }
+      if (this.isPaymentFailedStage) {
+        return 'tn-icon-close'
+      }
+      return 'tn-icon-loading'
+    },
+    paymentWaitingTitle() {
+      if (this.paymentStage === 'launching') {
+        return this.t('paymentTitleLaunching')
+      }
+      if (this.paymentStage === 'polling') {
+        return this.t('paymentTitlePolling')
+      }
+      if (this.paymentStage === 'success') {
+        return this.t('paymentTitleSuccess')
+      }
+      if (this.paymentStage === 'failed') {
+        return this.t('paymentTitleFailed')
+      }
+      return this.t('paymentTitleDefault')
+    },
+    paymentWaitingDesc() {
+      if (this.paymentStage === 'launching') {
+        return this.t('paymentDescLaunching')
+      }
+      if (this.paymentStage === 'polling') {
+        return this.t('paymentDescPolling')
+      }
+      if (this.paymentStage === 'success') {
+        return this.t('paymentDescSuccess')
+      }
+      if (this.paymentStage === 'failed') {
+        return this.t('paymentDescFailed')
+      }
+      return ''
+    },
+    paymentWaitingBillNo() {
+      return this.paymentPollingBillNo || this.payingBillNo || (this.paymentSession && this.paymentSession.billNo) || ''
+    },
+    paymentWaitingAmountText() {
+      const amount = this.paymentSession && Number(this.paymentSession.amount)
+      return Number.isFinite(amount) ? amount.toFixed(2) : '0.00'
+    },
+    paymentProgressPercent() {
+      if (this.paymentStage !== 'polling') {
+        return 16
+      }
+      const current = this.paymentPollingAttempt > 0 ? this.paymentPollingAttempt : 1
+      return Math.min(100, Math.max(18, Math.round((current / PAYMENT_QUERY_MAX_ATTEMPTS) * 100)))
+    },
+    paymentProgressText() {
+      if (this.paymentStage !== 'polling') {
+        return this.t('paymentProgressWaiting')
+      }
+      const current = this.paymentPollingAttempt > 0 ? this.paymentPollingAttempt : 1
+      return `${current}/${PAYMENT_QUERY_MAX_ATTEMPTS}`
+    },
+    paymentStatusHintText() {
+      if (this.paymentStatusHint) {
+        return this.paymentStatusHint
+      }
+      if (this.paymentStage === 'launching') {
+        return this.t('paymentHintLaunching')
+      }
+      return this.t('paymentHintPolling')
+    },
+    paymentTipsTitle() {
+      if (this.isPaymentFailedStage) {
+        return this.t('paymentTipsTitleFailed')
+      }
+      if (this.isPaymentSuccessStage) {
+        return this.t('paymentTipsTitleSuccess')
+      }
+      return this.t('paymentTipsTitleDefault')
+    },
+    paymentTips() {
+      if (this.isPaymentFailedStage) {
+        return [
+          this.t('paymentTipsFailed1'),
+          this.t('paymentTipsFailed2'),
+          this.t('paymentTipsFailed3')
+        ]
+      }
+      if (this.isPaymentSuccessStage) {
+        return [
+          this.t('paymentTipsSuccess1'),
+          this.t('paymentTipsSuccess2'),
+          this.t('paymentTipsSuccess3')
+        ]
+      }
+      return [
+        this.t('paymentTipsDefault1'),
+        this.t('paymentTipsDefault2'),
+        this.t('paymentTipsDefault3')
+      ]
+    },
+    showPaymentActionButton() {
+      return this.isPaymentFailedStage
+    },
+    paymentActionText() {
+      return this.isPaymentFailedStage ? this.t('paymentActionAcknowledge') : ''
+    }
+  },
+  watch: {
+    referenceTypeNo: {
+      immediate: true,
+      handler(value) {
+        const nextReferenceTypeNo = value ? String(value).trim() : ''
+        if (nextReferenceTypeNo === this.currentReferenceTypeNo) {
+          return
+        }
+        this.currentReferenceTypeNo = nextReferenceTypeNo
+        if (this.currentReferenceTypeNo) {
+          saveActiveApplicationCode(this.currentReferenceTypeNo)
+        }
+        if (this._panelReady) {
+          this.refreshBillList()
+        }
+      }
+    }
+  },
+  mounted() {
+    this._panelReady = true
+    this.startCountdownTimer()
+    this.refreshBillList()
+  },
+  beforeDestroy() {
+    this.clearCountdownTimer()
+  },
+  methods: {
+    t(key, params) {
+      const translatedText = this.$tm('pkgService.components.CurrentApplicationBillPanel', key, params)
+      if (translatedText && translatedText !== key) {
+        return translatedText
+      }
+
+      const languagePack = this.i18n && this.i18n[this.language] ? this.i18n[this.language] : this.i18n.zh
+      const fallbackText = languagePack && languagePack[key] ? languagePack[key] : key
+      if (!params || typeof fallbackText !== 'string') {
+        return fallbackText
+      }
+
+      return fallbackText.replace(/\{(\w+)\}/g, (match, token) => {
+        return Object.prototype.hasOwnProperty.call(params, token) ? params[token] : match
+      })
+    },
+    getBillNo(item = {}) {
+      return item.no || item.billNo || ''
+    },
+    getBillKey(item = {}) {
+      return this.getBillNo(item) || this.getBillReferenceTypeNo(item) || this.getBillCreateTime(item) || 'bill-item'
+    },
+    getBillReferenceTypeNo(item = {}) {
+      return item.referenceTypeNo || ''
+    },
+    getBillPaymentStatus(item = {}) {
+      return item.paymentStatus
+    },
+    getBillPaymentStatusText(item = {}) {
+      const translatedStatus = this.getPaymentStatusText(this.getBillPaymentStatus(item))
+      return translatedStatus || item.paymentStatusDesc || this.t('paymentStatusPending')
+    },
+    getBillRefundStatus(item = {}) {
+      return item.refundStatus
+    },
+    getBillCreateTime(item = {}) {
+      return item.createTime || ''
+    },
+    getBillTotalCharge(item = {}) {
+      return item.totalCharge
+    },
+    getBillPaidAmount(item = {}) {
+      return item.paidAmount
+    },
+    getBillRemainingAmount(item = {}) {
+      return item.remainingAmount
+    },
+    getBillRemark(item = {}) {
+      return item.remark || ''
+    },
+    getBillResult(item = {}) {
+      return item.result || ''
+    },
+    getPendingPaymentOrder(item = {}) {
+      const billNo = this.getBillNo(item)
+      return billNo ? (this.pendingPaymentOrderMap[billNo] || null) : null
+    },
+    getPendingPaymentOrderNo(item = {}) {
+      const order = this.getPendingPaymentOrder(item)
+      return order ? (order.payRequestNo || order.payNo || order.paymentNo || '--') : '--'
+    },
+    getPendingPaymentAmount(item = {}) {
+      const order = this.getPendingPaymentOrder(item)
+      if (order && (order.amount || order.amount === 0)) {
+        return order.amount
+      }
+      return this.getBillRemainingAmount(item)
+    },
+    getPendingPaymentDescription(item = {}) {
+      const order = this.getPendingPaymentOrder(item)
+      return order ? (order.description || '') : ''
+    },
+    getPendingPaymentChannel(item = {}) {
+      const order = this.getPendingPaymentOrder(item)
+      return order && order.cashier ? (order.cashier.payChannel || '') : ''
+    },
+    startCountdownTimer() {
+      if (this._countdownTimer) {
+        return
+      }
+      this._countdownTimer = setInterval(() => {
+        this.countdownNow = Date.now()
+      }, 1000)
+    },
+    clearCountdownTimer() {
+      if (this._countdownTimer) {
+        clearInterval(this._countdownTimer)
+        this._countdownTimer = null
+      }
+    },
+    getPendingPaymentExpireTimestamp(order = {}) {
+      return parseExpireTimeToTimestamp(order.expireTime || (order.cashier && order.cashier.expireTime) || '')
+    },
+    getPendingPaymentRemainingSeconds(item = {}) {
+      const order = this.getPendingPaymentOrder(item)
+      if (!order) {
+        return 0
+      }
+      const expireTimestamp = this.getPendingPaymentExpireTimestamp(order)
+      if (!expireTimestamp) {
+        return 0
+      }
+      return Math.max(0, Math.ceil((expireTimestamp - this.countdownNow) / 1000))
+    },
+    formatPendingPaymentCountdown(seconds = 0) {
+      const totalSeconds = Math.max(0, Number(seconds) || 0)
+      const day = Math.floor(totalSeconds / 86400)
+      const hour = Math.floor((totalSeconds % 86400) / 3600)
+      const minute = Math.floor((totalSeconds % 3600) / 60)
+      const second = totalSeconds % 60
+      const timeText = `${padCountdownUnit(hour)}:${padCountdownUnit(minute)}:${padCountdownUnit(second)}`
+      return day > 0
+        ? (this.language === 'en' ? `${day}d ${timeText}` : `${day}天 ${timeText}`)
+        : timeText
+    },
+    isPendingPaymentExpired(item = {}) {
+      const order = this.getPendingPaymentOrder(item)
+      if (!order) {
+        return false
+      }
+      const expireTimestamp = this.getPendingPaymentExpireTimestamp(order)
+      if (!expireTimestamp) {
+        return false
+      }
+      return expireTimestamp <= this.countdownNow
+    },
+    getPendingPaymentExpireText(item = {}) {
+      const order = this.getPendingPaymentOrder(item)
+      if (!order) {
+        return ''
+      }
+      const expireTimestamp = this.getPendingPaymentExpireTimestamp(order)
+      if (!expireTimestamp) {
+        return ''
+      }
+      if (expireTimestamp <= this.countdownNow) {
+        return this.t('pendingPaymentExpired')
+      }
+      return this.formatPendingPaymentCountdown(this.getPendingPaymentRemainingSeconds(item))
+    },
+    getPayButtonText(item = {}) {
+      const billNo = this.getBillNo(item)
+      if (this.paymentPollingBillNo && this.paymentPollingBillNo === billNo) {
+        if (!this.paymentPollingAttempt) {
+          return this.t('buttonConfirming')
+        }
+        return this.t('buttonPolling', {
+          current: this.paymentPollingAttempt,
+          total: PAYMENT_QUERY_MAX_ATTEMPTS
+        })
+      }
+      if (this.payingBillNo === billNo) {
+        return this.paymentStage === 'launching' ? this.t('buttonLaunching') : this.t('buttonConfirming')
+      }
+      if (this.getPendingPaymentOrder(item) && !this.isPendingPaymentExpired(item)) {
+        return this.t('continuePayButton')
+      }
+      return this.t('wechatPayButton')
+    },
+    canCancelOrder(item = {}) {
+      if (!this.currentReferenceTypeNo) {
+        return false
+      }
+      const remainingAmount = Number(this.getBillRemainingAmount(item) || 0)
+      const paymentStatus = Number(this.getBillPaymentStatus(item))
+      return remainingAmount > 0 || paymentStatus !== ACCOUNT_BILL_PAYMENT_STATUS.PAID
+    },
+    getCancelButtonText(item = {}) {
+      return this.cancelingBillNo === this.getBillNo(item)
+        ? this.t('cancelOrderLoading')
+        : this.t('cancelOrderButton')
+    },
+    resolveReferenceTypeNo(item = {}) {
+      return item.code || item.detailCode || ''
+    },
+    resolvePreferredReferenceTypeNo(list = []) {
+      const sortedList = normalizeApplicationList(list)
+        .filter(item => !item.isViewingApplication && this.resolveReferenceTypeNo(item))
+        .sort((a, b) => new Date(b.createTime || 0).getTime() - new Date(a.createTime || 0).getTime())
+
+      if (!sortedList.length) {
+        return ''
+      }
+
+      const preferredItem = sortedList.find(item => Number(item.status) !== 99) || sortedList[0]
+      return this.resolveReferenceTypeNo(preferredItem)
+    },
+    ensureReferenceTypeNo() {
+      if (this.currentReferenceTypeNo) {
+        return Promise.resolve(this.currentReferenceTypeNo)
+      }
+      if (!this.autoResolveReference) {
+        return Promise.resolve('')
+      }
+
+      const cachedActiveCode = getActiveApplicationCode()
+      if (cachedActiveCode) {
+        this.currentReferenceTypeNo = cachedActiveCode
+        return Promise.resolve(this.currentReferenceTypeNo)
+      }
+
+      const cachedApplicationList = normalizeApplicationList(getMyApplicationList())
+      const cachedCode = this.resolvePreferredReferenceTypeNo(cachedApplicationList)
+      if (cachedCode) {
+        this.currentReferenceTypeNo = cachedCode
+        saveActiveApplicationCode(cachedCode)
+        return Promise.resolve(this.currentReferenceTypeNo)
+      }
+
+      this.resolvingReference = true
+      return applicationFormMePage({
+        PageIndex: 1,
+        PageSize: 20
+      })
+        .then((response) => {
+          const payload = response && response.data ? response.data : response
+          const list = normalizeApplicationList(payload && payload.data)
+          saveMyApplicationList(list)
+          const nextCode = this.resolvePreferredReferenceTypeNo(list)
+          this.currentReferenceTypeNo = nextCode
+          if (nextCode) {
+            saveActiveApplicationCode(nextCode)
+          }
+          return nextCode
+        })
+        .catch(() => '')
+        .finally(() => {
+          this.resolvingReference = false
+        })
+    },
+    formatMoney(value) {
+      const amount = Number(value || 0)
+      return amount.toFixed(2)
+    },
+    formatDateTime(value) {
+      if (!value) {
+        return '--'
+      }
+      const text = String(value).replace('T', ' ')
+      return text.length > 16 ? text.slice(0, 16) : text
+    },
+    getPaymentStatusText(status) {
+      return getAccountBillPaymentStatusLabel(status, this.t('paymentStatusPending'))
+    },
+    resolvePaymentStatusType(status) {
+      if (Number(status) === ACCOUNT_BILL_PAYMENT_STATUS.PAID) {
+        return 'paid'
+      }
+      if (Number(status) === ACCOUNT_BILL_PAYMENT_STATUS.PARTIAL) {
+        return 'partial'
+      }
+      return 'pending'
+    },
+    getRefundStatusText(status) {
+      return getAccountBillRefundStatusLabel(status, '--')
+    },
+    getReferenceTypeText(item = {}) {
+      const translatedType = getAccountReferenceTypeLabel(item.referenceType, '')
+      return translatedType || item.referenceTypeDesc || this.t('billRecordFallback')
+    },
+    parsePaymentInfo(paymentInfo) {
+      if (!paymentInfo) {
+        return {}
+      }
+      if (typeof paymentInfo === 'object') {
+        return paymentInfo
+      }
+      const text = String(paymentInfo).trim()
+      if (!text) {
+        return {}
+      }
+      try {
+        return JSON.parse(text)
+      } catch (error) {
+        return {}
+      }
+    },
+    normalizeWechatPayOptions(paymentInfo) {
+      const source = this.parsePaymentInfo(paymentInfo)
+      return {
+        provider: 'wxpay',
+        timeStamp: String(source.timeStamp || source.timestamp || source.time_stamp || ''),
+        nonceStr: source.nonceStr || source.noncestr || source.nonce_str || '',
+        package: source.package || source.packageValue || source.package_value || '',
+        signType: source.signType || source.sign_type || 'MD5',
+        paySign: source.paySign || source.paysign || source.pay_sign || ''
+      }
+    },
+    requestWechatPayment(paymentInfo) {
+      const payOptions = this.normalizeWechatPayOptions(paymentInfo)
+      if (!payOptions.timeStamp || !payOptions.nonceStr || !payOptions.package || !payOptions.paySign) {
+        return Promise.reject(new Error(this.t('paymentParamIncomplete')))
+      }
+
+      return new Promise((resolve, reject) => {
+        uni.requestPayment({
+          ...payOptions,
+          success: (res) => resolve(res),
+          fail: (error) => reject(error)
+        })
+      })
+    },
+    normalizePendingPaymentOrders(response) {
+      const payload = response && response.data ? response.data : response
+      if (Array.isArray(payload)) {
+        return payload.filter(item => item && typeof item === 'object')
+      }
+      if (payload && Array.isArray(payload.data)) {
+        return payload.data.filter(item => item && typeof item === 'object')
+      }
+      return []
+    },
+    syncPendingPaymentOrders(list = []) {
+      const billNos = [...new Set(
+        (Array.isArray(list) ? list : [])
+          .map(item => this.getBillNo(item))
+          .filter(Boolean)
+      )]
+
+      if (!billNos.length) {
+        this.pendingPaymentOrderMap = {}
+        return Promise.resolve({})
+      }
+
+      const currentReferenceTypeNo = this.currentReferenceTypeNo
+      return Promise.all(
+        billNos.map((billNo) => {
+          return paymentPayingBills({ BillNo: billNo })
+            .then((response) => {
+              const orderList = this.normalizePendingPaymentOrders(response)
+              return {
+                billNo,
+                order: orderList.length ? orderList[0] : null
+              }
+            })
+            .catch(() => ({
+              billNo,
+              order: null
+            }))
+        })
+      ).then((resultList) => {
+        if (currentReferenceTypeNo !== this.currentReferenceTypeNo) {
+          return this.pendingPaymentOrderMap
+        }
+        const nextMap = resultList.reduce((result, item) => {
+          if (item && item.billNo && item.order) {
+            result[item.billNo] = item.order
+          }
+          return result
+        }, {})
+        this.pendingPaymentOrderMap = nextMap
+        return nextMap
+      })
+    },
+    getWechatLoginCode() {
+      return new Promise((resolve, reject) => {
+        uni.login({
+          provider: 'weixin',
+          success: (res) => {
+            const code = res && res.code ? res.code : ''
+            if (!code) {
+              reject(new Error(this.t('wechatCodeFailed')))
+              return
+            }
+            resolve(code)
+          },
+          fail: (error) => {
+            reject(error || new Error(this.t('wechatCodeFailed')))
+          }
+        })
+      })
+    },
+    buildBillPayPayload(item = {}, wechatCode = '') {
+      const payload = {
+        referenceTypeNo: this.currentReferenceTypeNo,
+        billNo: this.getBillNo(item),
+        payMethod: 'Wechat',
+        amount: Number(this.getBillRemainingAmount(item) || 0),
+        description: this.getReferenceTypeText(item) || this.t('billPaymentDesc')
+      }
+      if (wechatCode) {
+        payload.ExtraInfo = wechatCode
+      }
+      return payload
+    },
+    resolveNoticeText(key, zhText, enText) {
+      const translatedText = this.t(key)
+      if (translatedText && translatedText !== key) {
+        return translatedText
+      }
+      return this.language === 'en' ? enText : zhText
+    },
+    resetPaymentNoticeContext() {
+      this.paymentNoticeContext = {
+        title: '',
+        billLabel: '',
+        billNo: '--',
+        itemLabel: '',
+        itemTitle: '',
+        amountLabel: '',
+        amountText: '',
+        lines: [],
+        confirmText: '',
+        cancelText: ''
+      }
+    },
+    closePaymentNotice(confirmed = false) {
+      const resolver = this.paymentNoticeResolver
+      this.paymentNoticeResolver = null
+      this.showPaymentNotice = false
+      this.resetPaymentNoticeContext()
+      if (typeof resolver === 'function') {
+        resolver(!!confirmed)
+      }
+    },
+    handlePaymentNoticeClose() {
+      if (this.paymentNoticeResolver) {
+        this.closePaymentNotice(false)
+      } else {
+        this.showPaymentNotice = false
+        this.resetPaymentNoticeContext()
+      }
+    },
+    confirmPaymentNotice(item = {}) {
+      const billNo = this.getBillNo(item) || '--'
+      const amountText = `¥${this.formatMoney(this.getBillRemainingAmount(item))}`
+      const modalTitle = this.resolveNoticeText('paymentNoticeTitle', '支付须知', 'Notice')
+      const itemLabel = this.resolveNoticeText('paymentNoticeItemLabel', '费用项目', 'Item')
+      const billLabel = this.resolveNoticeText('paymentNoticeBillLabel', '账单号', 'Bill')
+      const amountLabel = this.resolveNoticeText('paymentNoticeAmountLabel', '支付金额', 'Amount')
+      const line1 = this.resolveNoticeText('paymentNoticeLine1', '请确认本次支付账单和金额无误后再继续付款。', 'Please confirm the bill and amount before payment.')
+      const line2 = this.resolveNoticeText('paymentNoticeLine2', '支付完成后，账单状态可能需要几秒同步，请勿重复支付。', 'Bill status may sync a few seconds later. Do not pay twice.')
+      const line3 = this.resolveNoticeText('paymentNoticeLine3', '若支付中断或页面关闭，可稍后返回账单页查看最新结果。', 'If interrupted, return later to check the latest result.')
+      const itemTitle = this.getReferenceTypeText(item) || this.resolveNoticeText('billPaymentDesc', '账单支付', 'Bill Payment')
+
+      return new Promise((resolve) => {
+        this.paymentNoticeResolver = resolve
+        this.paymentNoticeContext = {
+          title: modalTitle,
+          billLabel,
+          billNo,
+          itemLabel,
+          itemTitle,
+          amountLabel,
+          amountText,
+          lines: [line1, line2, line3],
+          confirmText: this.resolveNoticeText('paymentNoticeConfirm', '继续支付', 'Continue'),
+          cancelText: this.resolveNoticeText('paymentNoticeCancel', '稍后再付', 'Later')
+        }
+        this.showPaymentNotice = true
+      })
+    },
+    confirmCancelOrder() {
+      return new Promise((resolve) => {
+        uni.showModal({
+          title: this.t('cancelOrderTitle'),
+          content: this.t('cancelOrderContent'),
+          confirmColor: '#ef4444',
+          success: (res) => resolve(!!(res && res.confirm)),
+          fail: () => resolve(false)
+        })
+      })
+    },
+    buildCancelOrderPayload(item = {}) {
+      const pendingOrder = this.getPendingPaymentOrder(item) || {}
+      const billNo = this.getBillNo(item)
+      const paymentNo = pendingOrder.paymentNo || pendingOrder.payNo || pendingOrder.payRequestNo || ''
+      return {
+        detailCode: this.currentReferenceTypeNo,
+        code: this.currentReferenceTypeNo,
+        referenceTypeNo: this.currentReferenceTypeNo,
+        billNo,
+        BillNo: billNo,
+        paymentNo,
+        payNo: paymentNo,
+        payRequestNo: pendingOrder.payRequestNo || ''
+      }
+    },
+    createPaymentSession(item = {}) {
+      this.paymentSession = {
+        billNo: this.getBillNo(item),
+        amount: Number(this.getBillRemainingAmount(item) || 0),
+        title: this.getReferenceTypeText(item) || this.t('billPaymentDesc')
+      }
+    },
+    resetPaymentWaitingState() {
+      this.payingBillNo = ''
+      this.paymentPollingBillNo = ''
+      this.paymentPollingAttempt = 0
+      this.paymentStage = ''
+      this.paymentStatusHint = ''
+      this.paymentSession = null
+    },
+    openPaymentFailedState(message = '') {
+      this.paymentStage = 'failed'
+      this.paymentStatusHint = message || this.t('paymentFailedHint')
+      this.payingBillNo = ''
+      this.paymentPollingBillNo = this.paymentWaitingBillNo
+    },
+    handlePaymentResultAction() {
+      if (this.isPaymentFailedStage) {
+        this.resetPaymentWaitingState()
+      }
+    },
+    wait(ms = 0) {
+      return new Promise((resolve) => {
+        setTimeout(resolve, ms)
+      })
+    },
+    buildPaymentQueryContext(item = {}, cashier = {}) {
+      const paymentInfo = this.parsePaymentInfo(cashier.paymentInfo)
+      return {
+        referenceTypeNo: this.currentReferenceTypeNo,
+        billNo: this.getBillNo(item),
+        paymentNo: cashier.paymentNo || cashier.cashierNo || cashier.orderNo || '',
+        tradeNo: cashier.tradeNo || cashier.outTradeNo || paymentInfo.outTradeNo || ''
+      }
+    },
+    queryPaymentResult(queryContext = {}) {
+      return paymentStatusByBillNo({
+        BillNo: queryContext.billNo
+      })
+        .then((response) => {
+          const payload = response && response.data ? response.data : response
+          const payStatus = Number(payload && payload.payStatus)
+          const statusDesc = this.language !== 'en' && payload && payload.statusDesc ? payload.statusDesc : ''
+
+          if (payStatus === PAYMENT_ORDER_STATUS.SUCCESS) {
+            return {
+              status: PAYMENT_QUERY_STATUS.SUCCESS,
+              message: statusDesc || this.t('paymentResultSuccess'),
+              data: payload
+            }
+          }
+          if (payStatus === PAYMENT_ORDER_STATUS.FAILED) {
+            return {
+              status: PAYMENT_QUERY_STATUS.FAILED,
+              message: statusDesc || this.t('paymentResultFailed'),
+              data: payload
+            }
+          }
+          return {
+            status: PAYMENT_QUERY_STATUS.PENDING,
+            message: statusDesc || this.t('paymentResultPending'),
+            data: payload
+          }
+        })
+    },
+    pollPaymentUntilSettled(item = {}, cashier = {}) {
+      const queryContext = this.buildPaymentQueryContext(item, cashier)
+      let lastResult = null
+
+      this.paymentStage = 'polling'
+      this.paymentPollingBillNo = queryContext.billNo
+      this.paymentPollingAttempt = 0
+      this.paymentStatusHint = this.t('paymentHintPaidWaiting')
+
+      const executePolling = async () => {
+        for (let attempt = 1; attempt <= PAYMENT_QUERY_MAX_ATTEMPTS; attempt += 1) {
+          if (attempt > 1) {
+            await this.wait(PAYMENT_QUERY_INTERVAL)
+          }
+          this.paymentPollingAttempt = attempt
+          lastResult = await this.queryPaymentResult(queryContext)
+          this.paymentStatusHint = lastResult && lastResult.message ? lastResult.message : this.t('paymentHintPolling')
+          if (lastResult && lastResult.status === PAYMENT_QUERY_STATUS.SUCCESS) {
+            return lastResult
+          }
+          if (lastResult && lastResult.status === PAYMENT_QUERY_STATUS.FAILED) {
+            throw new Error(lastResult.message || this.t('paymentFailedError'))
+          }
+        }
+        throw new Error((lastResult && lastResult.message) || this.t('paymentTimeoutError'))
+      }
+
+      return executePolling()
+    },
+    emitPaymentSuccess() {
+      const hasPendingBills = this.billList.length > 0
+      this.paymentStage = 'success'
+      this.paymentStatusHint = hasPendingBills
+        ? this.t('paymentSuccessPendingBills')
+        : this.t('paymentSuccessAllDone')
+      this.payingBillNo = ''
+      this.paymentPollingBillNo = this.paymentWaitingBillNo
+      return this.wait(1200)
+        .then(() => {
+      this.$emit('payment-success', {
+        referenceTypeNo: this.currentReferenceTypeNo,
+        hasPendingBills,
+        billList: this.billList
+      })
+      if (!hasPendingBills) {
+        this.$emit('all-paid', {
+          referenceTypeNo: this.currentReferenceTypeNo
+        })
+        return
+      }
+          this.resetPaymentWaitingState()
+        })
+    },
+    reloadListAfterPayment() {
+      return this.reloadList()
+        .catch(() => [])
+        .then(() => {
+          this.emitPaymentSuccess()
+        })
+    },
+    reconcilePaymentResult(billNo = '') {
+      return this.reloadList()
+        .catch(() => [])
+        .then(() => {
+          const billStillPending = this.billList.some(item => this.getBillNo(item) === billNo)
+          if (!billStillPending) {
+            this.emitPaymentSuccess()
+            return true
+          }
+          return false
+        })
+    },
+    handleWechatPay(event) {
+      const dataset = event && event.currentTarget ? event.currentTarget.dataset || {} : {}
+      const billIndex = Number(dataset.billIndex)
+      const item = Number.isInteger(billIndex) && billIndex >= 0 ? (this.billList[billIndex] || {}) : {}
+      const billNo = this.getBillNo(item)
+      const pendingPaymentOrder = this.getPendingPaymentOrder(item)
+      const reusablePendingPaymentOrder = pendingPaymentOrder && !this.isPendingPaymentExpired(item)
+        ? pendingPaymentOrder
+        : null
+      if (!billNo || !this.currentReferenceTypeNo) {
+        uni.showToast({
+          title: this.t('billInfoIncomplete'),
+          icon: 'none'
+        })
+        return
+      }
+      if (this.payingBillNo) {
+        return
+      }
+      let cashier = {}
+      Promise.resolve()
+        .then(() => this.confirmPaymentNotice(item))
+        .then((confirmed) => {
+          if (!confirmed) {
+            throw new Error('PAYMENT_NOTICE_CANCELED')
+          }
+          this.payingBillNo = billNo
+          this.paymentStage = 'launching'
+          this.paymentStatusHint = this.t('paymentHintLaunchingToast')
+          this.createPaymentSession(item)
+        })
+        .then(() => {
+          if (reusablePendingPaymentOrder && reusablePendingPaymentOrder.cashier && reusablePendingPaymentOrder.cashier.paymentInfo) {
+            cashier = reusablePendingPaymentOrder.cashier
+            return cashier
+          }
+          return this.getWechatLoginCode()
+            .then((wechatCode) => paymentBillPay(this.buildBillPayPayload(item, wechatCode)))
+            .then((response) => {
+              const payload = response && response.data ? response.data : response
+              cashier = payload && payload.cashier ? payload.cashier : {}
+              return cashier
+            })
+        })
+        .then(() => {
+          return this.requestWechatPayment(cashier.paymentInfo)
+        })
+        .then(() => {
+          return this.pollPaymentUntilSettled(item, cashier)
+        })
+        .then(() => {
+          return this.reloadListAfterPayment()
+        })
+        .catch((error) => {
+          const errMsg = error && (error.errMsg || error.message || error.msg) ? (error.errMsg || error.message || error.msg) : ''
+          if (errMsg === 'PAYMENT_NOTICE_CANCELED') {
+            this.resetPaymentWaitingState()
+            return
+          }
+          if (/cancel/i.test(errMsg)) {
+            this.resetPaymentWaitingState()
+            uni.showToast({
+              title: this.t('paymentCanceled'),
+              icon: 'none'
+            })
+            return
+          }
+          return this.reconcilePaymentResult(billNo)
+            .then((hasConfirmedSuccess) => {
+              if (hasConfirmedSuccess) {
+                return
+              }
+              this.openPaymentFailedState(errMsg || this.t('paymentResultFailedRetry'))
+            })
+        })
+        .finally(() => {
+          if (this.isPaymentWaitingStage) {
+            this.resetPaymentWaitingState()
+          }
+        })
+    },
+    handleCancelOrder(event) {
+      const dataset = event && event.currentTarget ? event.currentTarget.dataset || {} : {}
+      const billIndex = Number(dataset.billIndex)
+      const item = Number.isInteger(billIndex) && billIndex >= 0 ? (this.billList[billIndex] || {}) : {}
+      const billNo = this.getBillNo(item)
+      if (!billNo || !this.canCancelOrder(item) || this.cancelingBillNo || this.payingBillNo) {
+        return
+      }
+      this.confirmCancelOrder()
+        .then((confirmed) => {
+          if (!confirmed) {
+            return
+          }
+          this.cancelingBillNo = billNo
+          return userDetailCancel(this.buildCancelOrderPayload(item), this.language)
+            .then(() => {
+              uni.showToast({
+                title: this.t('cancelOrderSuccess'),
+                icon: 'success'
+              })
+              return this.refreshBillList()
+            })
+        })
+        .catch((error) => {
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('cancelOrderFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.cancelingBillNo = ''
+        })
+    },
+    refreshBillList() {
+      return this.ensureReferenceTypeNo()
+        .then((referenceTypeNo) => {
+          if (!referenceTypeNo) {
+            this.billList = []
+            this.pendingPaymentOrderMap = {}
+            return []
+          }
+          this.$emit('reference-resolved', referenceTypeNo)
+          return this.reloadList()
+        })
+    },
+    reloadList() {
+      if (!this.currentReferenceTypeNo) {
+        this.billList = []
+        this.pendingPaymentOrderMap = {}
+        return Promise.resolve([])
+      }
+      const requestKey = this.currentReferenceTypeNo
+      if (this._reloadListPromise && this._reloadListKey === requestKey) {
+        return this._reloadListPromise
+      }
+      this.loading = true
+      this._reloadListKey = requestKey
+      this._reloadListPromise = accountQueryBills({
+        referenceTypeNo: this.currentReferenceTypeNo,
+        status: ACCOUNT_BILL_STATUS.ACTIVE,
+        paymentStatus: ACCOUNT_BILL_PAYMENT_STATUS.UNPAID
+      })
+        .then((response) => {
+          this.billList = normalizeBillList(response)
+          return this.syncPendingPaymentOrders(this.billList)
+            .then(() => this.billList)
+        })
+        .catch((error) => {
+          this.billList = []
+          this.pendingPaymentOrderMap = {}
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('billLoadFailed'),
+            icon: 'none'
+          })
+          return []
+        })
+        .finally(() => {
+          this.loading = false
+          this._reloadListPromise = null
+        })
+      return this._reloadListPromise
+    },
+    goToMyApplication() {
+      uni.navigateTo({
+        url: '/pkgService/my_application/my_application'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.hero-panel,
+.bill-card,
+.empty-panel {
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+
+.hero-title,
+.empty-title,
+.card-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1A2233;
+}
+
+.hero-desc,
+.empty-desc,
+.card-code,
+.info-label,
+.remark-label {
+  color: #6A7A99;
+}
+
+.hero-summary {
+  display: flex;
+  gap: 20rpx;
+}
+
+.source-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 8rpx 18rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.08);
+}
+
+.summary-card {
+  flex: 1;
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+
+.summary-label {
+  font-size: 22rpx;
+  color: #6A7A99;
+}
+
+.summary-value {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #1A2233;
+}
+
+.card-code,
+.info-label,
+.info-value,
+.remark-text {
+  font-size: 24rpx;
+}
+
+.status-badge {
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.status-pending {
+  color: #b45309;
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.status-partial {
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.12);
+}
+
+.status-paid {
+  color: #166534;
+  background: rgba(34, 197, 94, 0.12);
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.info-row {
+  padding: 16rpx 0;
+  border-bottom: 1px dashed rgba($brand-primary, 0.15);
+  gap: 24rpx;
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  flex: 0 0 170rpx;
+  color: #6A7A99;
+}
+
+.info-value {
+  flex: 1;
+  color: #1A2233;
+  text-align: right;
+  word-break: break-all;
+  font-weight: 500;
+}
+
+.info-value--highlight {
+  color: #c2410c;
+  font-weight: 700;
+}
+
+.info-value--expired {
+  color: #dc2626;
+  font-weight: 700;
+}
+
+.remark-panel {
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: rgba($brand-primary, 0.02);
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+
+.pending-payment-panel {
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: linear-gradient(180deg, rgba(255, 247, 237, 0.9) 0%, rgba(255, 251, 245, 0.95) 100%);
+  border: 1rpx solid rgba(249, 115, 22, 0.16);
+}
+
+.pending-payment-title {
+  margin-bottom: 12rpx;
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #c2410c;
+}
+
+.remark-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
+}
+
+.remark-label {
+  flex: 0 0 96rpx;
+  font-size: 22rpx;
+  color: #6A7A99;
+}
+
+.remark-text {
+  flex: 1;
+  color: #1A2233;
+  line-height: 1.7;
+}
+
+.card-footer {
+  display: flex;
+  gap: 20rpx;
+  justify-content: flex-end;
+}
+
+.cancel-btn,
+.pay-btn {
+  min-width: 220rpx;
+  height: 84rpx;
+  padding: 0 36rpx;
+  border-radius: 999rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.25);
+  font-size: 26rpx;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: all 0.3s;
+}
+
+.cancel-btn {
+  background: #ffffff;
+  color: #ef4444;
+  border: 1rpx solid rgba(239, 68, 68, 0.3);
+  box-shadow: 0 8rpx 20rpx rgba(239, 68, 68, 0.08);
+}
+
+.pay-btn:active {
+  transform: scale(0.98);
+}
+
+.cancel-btn:active {
+  transform: scale(0.98);
+}
+
+.cancel-btn--loading,
+.pay-btn--loading {
+  opacity: 0.72;
+}
+
+.empty-action {
+  width: 100%;
+  height: 96rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+  transition: all 0.3s;
+}
+
+.empty-action:active {
+  transform: scale(0.98);
+}
+
+.payment-notice-popup {
+  background: #ffffff;
+  border-radius: 32rpx 32rpx 0 0;
+  display: flex;
+  flex-direction: column;
+  height: 72vh;
+}
+
+.payment-notice-popup__header {
+  padding: 32rpx;
+  text-align: center;
+  border-bottom: 1px solid #eef2f7;
+}
+
+.payment-notice-popup__title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #172033;
+}
+
+.payment-notice-popup__body {
+  flex: 1;
+  padding: 28rpx 32rpx 32rpx;
+  box-sizing: border-box;
+}
+
+.payment-notice-popup__summary {
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(238, 246, 255, 0.98) 100%);
+  border: 1rpx solid rgba($brand-primary, 0.08);
+}
+
+.payment-notice-popup__summary-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24rpx;
+}
+
+.payment-notice-popup__summary-row + .payment-notice-popup__summary-row {
+  margin-top: 18rpx;
+}
+
+.payment-notice-popup__summary-label {
+  flex: 0 0 140rpx;
+  font-size: 24rpx;
+  color: #6a7a99;
+}
+
+.payment-notice-popup__summary-value {
+  flex: 1;
+  text-align: right;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #172033;
+  word-break: break-all;
+}
+
+.payment-notice-popup__summary-value--price {
+  color: #d9480f;
+}
+
+.payment-notice-popup__content {
+  margin-top: 24rpx;
+  padding: 28rpx;
+  border-radius: 24rpx;
+  background: #f8fafc;
+}
+
+.payment-notice-popup__line {
+  font-size: 25rpx;
+  line-height: 1.75;
+  color: #475569;
+}
+
+.payment-notice-popup__line + .payment-notice-popup__line {
+  margin-top: 18rpx;
+}
+
+.payment-notice-popup__footer {
+  display: flex;
+  gap: 20rpx;
+  padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+  border-top: 1px solid #eef2f7;
+  background: #ffffff;
+}
+
+.payment-notice-popup__action {
+  flex: 1;
+  height: 92rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.payment-notice-popup__action:active {
+  transform: scale(0.98);
+}
+
+.payment-notice-popup__action--ghost {
+  color: #475569;
+  background: #f1f5f9;
+}
+
+.payment-notice-popup__action--primary {
+  color: #ffffff;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  box-shadow: 0 16rpx 34rpx rgba($brand-primary, 0.24);
+}
+
+.payment-waiting-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32rpx;
+  background: rgba(8, 15, 35, 0.46);
+  backdrop-filter: blur(12rpx);
+  -webkit-backdrop-filter: blur(12rpx);
+}
+
+.payment-waiting-panel {
+  position: relative;
+  width: 100%;
+  max-width: 640rpx;
+  padding: 40rpx 32rpx 34rpx;
+  border-radius: 36rpx;
+  overflow: hidden;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 249, 255, 0.98) 100%);
+  box-shadow: 0 30rpx 80rpx rgba(15, 23, 42, 0.18);
+}
+
+.payment-waiting-panel--success {
+  background: linear-gradient(180deg, rgba(248, 255, 251, 0.98) 0%, rgba(240, 250, 245, 0.98) 100%);
+}
+
+.payment-waiting-panel--failed {
+  background: linear-gradient(180deg, rgba(255, 250, 250, 0.98) 0%, rgba(255, 244, 244, 0.98) 100%);
+}
+
+.payment-waiting-glow {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(12rpx);
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.payment-waiting-glow--one {
+  top: -56rpx;
+  right: -30rpx;
+  width: 220rpx;
+  height: 220rpx;
+  background: radial-gradient(circle, rgba(64, 158, 255, 0.24) 0%, rgba(64, 158, 255, 0) 72%);
+}
+
+.payment-waiting-glow--two {
+  left: -60rpx;
+  bottom: -80rpx;
+  width: 260rpx;
+  height: 260rpx;
+  background: radial-gradient(circle, rgba($brand-primary, 0.18) 0%, rgba($brand-primary, 0) 74%);
+}
+
+.payment-waiting-badge {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  padding: 10rpx 20rpx;
+  border-radius: 999rpx;
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.08);
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.payment-waiting-badge--success {
+  color: #15803d;
+  background: rgba(34, 197, 94, 0.12);
+}
+
+.payment-waiting-badge--failed {
+  color: #c2410c;
+  background: rgba(249, 115, 22, 0.12);
+}
+
+.payment-waiting-badge__icon {
+  margin-right: 8rpx;
+  font-size: 24rpx;
+}
+
+.payment-waiting-icon-wrap {
+  position: relative;
+  z-index: 1;
+  width: 180rpx;
+  height: 180rpx;
+  margin: 28rpx auto 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.payment-waiting-icon-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2rpx solid rgba($brand-primary, 0.12);
+  border-top-color: rgba($brand-primary, 0.4);
+  border-bottom-color: rgba(76, 190, 255, 0.4);
+  animation: paymentRotate 1.8s linear infinite;
+}
+
+.payment-waiting-icon-core {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background: linear-gradient(135deg, $brand-primary 0%, #68B6FF 100%);
+  box-shadow: 0 18rpx 40rpx rgba($brand-primary, 0.28);
+}
+
+.payment-waiting-icon-core--success {
+  background: linear-gradient(135deg, #22c55e 0%, #34d399 100%);
+  box-shadow: 0 18rpx 40rpx rgba(34, 197, 94, 0.24);
+}
+
+.payment-waiting-icon-core--failed {
+  background: linear-gradient(135deg, #f97316 0%, #fb7185 100%);
+  box-shadow: 0 18rpx 40rpx rgba(249, 115, 22, 0.24);
+}
+
+.payment-waiting-icon {
+  font-size: 52rpx;
+}
+
+.payment-waiting-icon--spin {
+  animation: paymentRotate 1.1s linear infinite;
+}
+
+.payment-waiting-title {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  font-size: 38rpx;
+  font-weight: 700;
+  color: #172033;
+}
+
+.payment-waiting-desc {
+  position: relative;
+  z-index: 1;
+  margin-top: 14rpx;
+  text-align: center;
+  font-size: 25rpx;
+  line-height: 1.7;
+  color: #66758f;
+}
+
+.payment-progress-card,
+.payment-tips-card {
+  position: relative;
+  z-index: 1;
+  margin-top: 28rpx;
+  padding: 24rpx;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 0.76);
+  border: 1rpx solid rgba($brand-primary, 0.08);
+}
+
+.payment-progress-head {
+  margin-bottom: 18rpx;
+}
+
+.payment-progress-label,
+.payment-summary-label,
+.payment-tips-title {
+  font-size: 22rpx;
+  font-weight: 700;
+  color: #5d6c87;
+}
+
+.payment-progress-value {
+  font-size: 22rpx;
+  font-weight: 700;
+  color: $brand-primary;
+}
+
+.payment-progress-track {
+  width: 100%;
+  height: 14rpx;
+  border-radius: 999rpx;
+  overflow: hidden;
+  background: rgba($brand-primary, 0.08);
+}
+
+.payment-progress-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, $brand-primary 0%, #78BEFF 100%);
+  box-shadow: 0 6rpx 18rpx rgba($brand-primary, 0.22);
+  transition: width 0.35s ease;
+}
+
+.payment-progress-note {
+  margin-top: 16rpx;
+  font-size: 24rpx;
+  color: #23314d;
+  line-height: 1.6;
+}
+
+.payment-summary-grid {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  gap: 18rpx;
+  margin-top: 20rpx;
+}
+
+.payment-summary-item {
+  flex: 1;
+  min-width: 0;
+  padding: 24rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(238, 246, 255, 0.96) 100%);
+  border: 1rpx solid rgba($brand-primary, 0.08);
+}
+
+.payment-summary-value {
+  margin-top: 12rpx;
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #1A2233;
+  word-break: break-all;
+}
+
+.payment-summary-value--mono {
+  font-size: 24rpx;
+}
+
+.payment-summary-value--price {
+  color: #d9480f;
+}
+
+.payment-tip-line {
+  margin-top: 14rpx;
+  font-size: 23rpx;
+  line-height: 1.7;
+  color: #5f6e88;
+}
+
+.payment-action-row {
+  position: relative;
+  z-index: 1;
+  margin-top: 28rpx;
+}
+
+.payment-action-btn {
+  width: 100%;
+  height: 92rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background: linear-gradient(135deg, #f97316 0%, #fb7185 100%);
+  box-shadow: 0 16rpx 34rpx rgba(249, 115, 22, 0.24);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.payment-action-btn:active {
+  transform: scale(0.98);
+}
+
+@keyframes paymentRotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/pkgService/contract_detail/contract_detail.vue b/pkgService/contract_detail/contract_detail.vue
new file mode 100644
index 0000000..c4409ce
--- /dev/null
+++ b/pkgService/contract_detail/contract_detail.vue
@@ -0,0 +1,376 @@
+<template>
+  <view class="contract-detail-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-main" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
+      <view class="overview-panel">
+        <view class="overview-header">
+          <view>
+            <view class="overview-title">{{ t('overviewTitle') }}</view>
+            <view class="overview-subtitle">{{ t('contractNoLabel') }}{{ contractNo || t('notAvailable') }}</view>
+          </view>
+          <view class="overview-badge">
+            <text class="tn-icon-read"></text>
+            <text>{{ Math.round(scale * 100) }}%</text>
+          </view>
+        </view>
+        <view class="overview-tips">
+          <view class="tip-chip">
+            <text class="tn-icon-safe-fill"></text>
+            <text>{{ t('signedChip') }}</text>
+          </view>
+          <view class="tip-chip">
+            <text class="tn-icon-charts-ring"></text>
+            <text>{{ t('zoomSupportedChip') }}</text>
+          </view>
+          <view class="tip-chip" v-if="imageUrl">
+            <text class="tn-icon-image-text-fill"></text>
+            <text>{{ t('imageModeChip') }}</text>
+          </view>
+          <view class="tip-chip" v-else-if="contractContent">
+            <text class="tn-icon-text-new"></text>
+            <text>{{ t('textModeChip') }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="loading" class="empty-panel">
+        <view class="empty-title">{{ t('loadingTitle') }}</view>
+        <view class="empty-desc">{{ t('loadingDesc') }}</view>
+      </view>
+
+      <view v-else-if="imageUrl || contractContent" class="preview-panel">
+        <scroll-view scroll-y scroll-x class="scroll-area" :enable-flex="true">
+          <view class="a4-wrapper" :style="{ transform: `scale(${scale})`, transformOrigin: 'top center' }">
+            <view class="a4-paper">
+              <image
+                v-if="imageUrl"
+                class="contract-image"
+                :src="imageUrl"
+                mode="widthFix"
+                @click="previewImage"
+              ></image>
+              <rich-text v-else class="contract-rich-text" :nodes="contractContent"></rich-text>
+            </view>
+          </view>
+        </scroll-view>
+
+        <view class="zoom-controls">
+          <view class="zoom-btn" @click="zoomOut">
+            <text class="tn-icon-reduce-circle"></text>
+          </view>
+          <view class="zoom-text">{{ Math.round(scale * 100) }}%</view>
+          <view class="zoom-btn" @click="zoomIn">
+            <text class="tn-icon-add-circle"></text>
+          </view>
+        </view>
+      </view>
+
+      <view v-else class="empty-panel">
+        <view class="empty-icon">
+          <text class="tn-icon-folder"></text>
+        </view>
+        <view class="empty-title">{{ t('emptyTitle') }}</view>
+        <view class="empty-desc">{{ t('emptyDesc') }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { addFilePrefix } from '@/utils/common.js'
+import { contractPreview } from '@/api/index.js'
+import { normalizeRichTextImages } from '../../utils/rich-text'
+
+function resolvePreviewPayload(response) {
+  const payload = response && response.data ? response.data : response
+  return {
+    content: (payload && payload.content) || (payload && payload.data && payload.data.content) || '',
+    imageUrl: (payload && payload.contentImageUrl) || (payload && payload.data && payload.data.contentImageUrl) || ''
+  }
+}
+
+function normalizeRichTextContent(content = '') {
+  return normalizeRichTextImages(
+    content,
+    'display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;border-radius:12rpx;margin:16rpx 0;vertical-align:top;'
+  )
+}
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '合同详情',
+      overviewTitle: '合同影像',
+      contractNoLabel: '合同编号：',
+      notAvailable: '未获取',
+      signedChip: '已签合同',
+      zoomSupportedChip: '支持缩放',
+      imageModeChip: 'A4 影像模式',
+      textModeChip: '正文预览模式',
+      loadingTitle: '合同加载中',
+      loadingDesc: '正在获取合同影像与正文，请稍候。',
+      emptyTitle: '暂无合同内容',
+      emptyDesc: '页面未带入影像地址，且通过合同编号也未获取到可预览的合同内容。'
+    },
+    en: {
+      navTitle: 'Contract Detail',
+      overviewTitle: 'Contract Preview',
+      contractNoLabel: 'Contract No.: ',
+      notAvailable: 'N/A',
+      signedChip: 'Signed Contract',
+      zoomSupportedChip: 'Zoom Supported',
+      imageModeChip: 'A4 Image Mode',
+      textModeChip: 'Text Preview Mode',
+      loadingTitle: 'Loading contract',
+      loadingDesc: 'Fetching contract images and content. Please wait.',
+      emptyTitle: 'No contract content',
+      emptyDesc: 'No previewable contract content was provided by image URL or contract number.'
+    }
+  },
+  data() {
+    return {
+      contractNo: '',
+      orderNo: '',
+      loading: false,
+      imageUrl: '',
+      contractContent: '',
+      scale: 1
+    }
+  },
+  onLoad(options = {}) {
+    this.contractNo = decodeURIComponent(options.no || '')
+    this.orderNo = decodeURIComponent(options.orderNo || '')
+    this.imageUrl = addFilePrefix(decodeURIComponent(options.contentImageUrl || ''))
+    this.fetchContractDetail()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.contract_detail.contract_detail', key, params)
+    },
+    fetchContractDetail() {
+      if (!this.contractNo || (this.imageUrl && this.contractContent)) {
+        return Promise.resolve()
+      }
+
+      this.loading = true
+      this.scale = 1
+
+      return contractPreview({ contractNo: this.contractNo })
+        .then((response) => {
+          const payload = resolvePreviewPayload(response)
+          this.contractContent = normalizeRichTextContent(payload.content || '')
+          if (!this.imageUrl) {
+            this.imageUrl = addFilePrefix(payload.imageUrl || '')
+          }
+        })
+        .catch((error) => {
+          console.error('fetch contract detail failed', error)
+          this.contractContent = ''
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    previewImage() {
+      if (!this.imageUrl) {
+        return
+      }
+      uni.previewImage({
+        urls: [this.imageUrl],
+        current: this.imageUrl
+      })
+    },
+    zoomIn() {
+      if (this.scale < 3) {
+        this.scale = Number((this.scale + 0.2).toFixed(1))
+      }
+    },
+    zoomOut() {
+      if (this.scale > 0.6) {
+        this.scale = Number((this.scale - 0.2).toFixed(1))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.contract-detail-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #f0f6ff 0%, #f8faff 100%);
+}
+
+.page-main {
+  padding: 0 24rpx calc(40rpx + env(safe-area-inset-bottom));
+}
+
+.overview-panel,
+.preview-panel,
+.empty-panel {
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 28rpx;
+  border: 1px solid rgba($brand-primary, 0.08);
+  box-shadow: 0 18rpx 48rpx rgba(25, 60, 104, 0.1);
+}
+
+.overview-panel {
+  padding: 28rpx;
+}
+
+.overview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.overview-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #1f2d3d;
+}
+
+.overview-subtitle {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #7c8da0;
+}
+
+.overview-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 10rpx;
+  padding: 10rpx 20rpx;
+  border-radius: 999rpx;
+  font-size: 24rpx;
+  font-weight: 700;
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.1);
+}
+
+.overview-tips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14rpx;
+}
+
+.tip-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 10rpx 18rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  color: #61758a;
+  background: #f7fafd;
+  border: 1px solid rgba($brand-primary, 0.08);
+}
+
+.preview-panel {
+  position: relative;
+  overflow: hidden;
+  margin-top: 24rpx;
+  min-height: 980rpx;
+  background: linear-gradient(180deg, #e8eef5 0%, #e0e8f1 100%);
+}
+
+.scroll-area {
+  width: 100%;
+  height: 980rpx;
+}
+
+.a4-wrapper {
+  padding: 40rpx 24rpx 120rpx;
+  display: flex;
+  justify-content: center;
+  transition: transform 0.2s ease-out;
+}
+
+.a4-paper {
+  width: 650rpx;
+  min-height: 900rpx;
+  padding: 24rpx;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 16rpx 42rpx rgba(28, 53, 90, 0.1);
+}
+
+.contract-image {
+  display: block;
+  width: 100%;
+}
+
+.contract-rich-text {
+  display: block;
+  width: 100%;
+  color: #334155;
+  word-break: break-all;
+}
+
+.zoom-controls {
+  position: absolute;
+  right: 32rpx;
+  bottom: 32rpx;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 999rpx;
+  padding: 10rpx 16rpx;
+  border: 1px solid rgba($brand-primary, 0.08);
+}
+
+.zoom-btn {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 34rpx;
+  color: $brand-primary;
+}
+
+.zoom-text {
+  min-width: 72rpx;
+  text-align: center;
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #334155;
+}
+
+.empty-panel {
+  margin-top: 24rpx;
+  padding: 54rpx 32rpx;
+  text-align: center;
+}
+
+.empty-icon {
+  width: 132rpx;
+  height: 132rpx;
+  margin: 0 auto 22rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 70rpx;
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.08);
+}
+
+.empty-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #233244;
+}
+
+.empty-desc {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  line-height: 1.7;
+  color: #8a99a8;
+}
+</style>
diff --git a/pkgService/contract_sign/contract_sign.vue b/pkgService/contract_sign/contract_sign.vue
new file mode 100644
index 0000000..b06ad10
--- /dev/null
+++ b/pkgService/contract_sign/contract_sign.vue
@@ -0,0 +1,651 @@
+<template>
+  <view class="contract-sign-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-main" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
+      <view class="overview-panel">
+        <view class="overview-header">
+          <view>
+            <view class="overview-title">{{ t('overviewTitle') }}</view>
+            <view class="overview-subtitle">{{ t('contractNoLabel') }}{{ contractNo || t('notAvailable') }}</view>
+          </view>
+          <view class="overview-badge">
+            <text class="tn-icon-edit-write-fill"></text>
+            <text>{{ Math.round(scale * 100) }}%</text>
+          </view>
+        </view>
+        <view class="overview-meta">
+          <text class="tn-icon-safe-fill"></text>
+          <text>{{ t('overviewMeta') }}</text>
+        </view>
+      </view>
+
+      <view v-if="loading" class="empty-panel">
+        <view class="empty-title">{{ t('loadingTitle') }}</view>
+        <view class="empty-desc">{{ t('loadingDesc') }}</view>
+      </view>
+
+      <view v-else-if="contractContent" class="preview-panel">
+        <scroll-view scroll-y scroll-x class="scroll-area" :enable-flex="true">
+          <view class="a4-wrapper" :style="{ transform: `scale(${scale})`, transformOrigin: 'top left' }">
+            <view class="a4-paper preview-paper">
+              <rich-text class="contract-rich-text" :nodes="contractContent"></rich-text>
+            </view>
+          </view>
+        </scroll-view>
+
+        <view class="preview-tip" @click="openFullscreenPreview">
+          <text class="tn-icon-fullscreen"></text>
+          <text>{{ t('fullscreenPreview') }}</text>
+        </view>
+
+        <view class="zoom-controls" @click.stop>
+          <view class="zoom-btn" @click="zoomOut">
+            <text class="tn-icon-reduce-circle"></text>
+          </view>
+          <view class="zoom-text">{{ Math.round(scale * 100) }}%</view>
+          <view class="zoom-btn" @click="zoomIn">
+            <text class="tn-icon-add-circle"></text>
+          </view>
+        </view>
+      </view>
+
+      <view v-else class="empty-panel">
+        <view class="empty-icon">
+          <text class="tn-icon-folder"></text>
+        </view>
+        <view class="empty-title">{{ t('emptyTitle') }}</view>
+        <view class="empty-desc">{{ t('emptyDesc') }}</view>
+      </view>
+
+      <view v-if="contractContent" class="footer-bar">
+        <view class="footer-tip">
+          <text class="tn-icon-safe-fill"></text>
+          <text>{{ t('footerTip') }}</text>
+        </view>
+        <view class="action-btn" @click="openSignBoard">
+          {{ isSubmitting ? t('submitting') : t('signAction') }}
+        </view>
+      </view>
+    </view>
+
+    <ContractSignDialog
+      :show="showSignBoard"
+      :signer-name="signerName"
+      @save="handleSignSave"
+      @close="closeSignBoard"
+    />
+
+    <view v-if="showFullscreenPreview" class="fullscreen-mask" @click="closeFullscreenPreview">
+      <view class="fullscreen-panel" @click.stop>
+        <view class="fullscreen-header">
+          <view class="fullscreen-back" @click="closeFullscreenPreview">
+            <text class="tn-icon-left"></text>
+            <text>{{ t('back') }}</text>
+          </view>
+          <view class="fullscreen-title">{{ t('fullscreenTitle') }}</view>
+          <view class="fullscreen-placeholder"></view>
+        </view>
+        <scroll-view scroll-y scroll-x class="fullscreen-scroll" :enable-flex="true">
+          <view class="fullscreen-wrapper">
+            <view class="a4-paper fullscreen-paper">
+              <rich-text class="contract-rich-text" :nodes="contractContent"></rich-text>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getAuthToken, patchStoredContractSign } from '../../utils/app-state'
+import { contractPreview, contractSign, uploadCommonFile } from '@/api/index.js'
+import { syncLoginStayState } from '../../utils/session-sync'
+import ContractSignDialog from '../../components/ContractSignDialog.vue'
+import { normalizeRichTextImages } from '../../utils/rich-text'
+
+function normalizeContractContent(content = '') {
+  return normalizeRichTextImages(
+    content,
+    'display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;border-radius:12rpx;margin:16rpx 0;vertical-align:top;'
+  )
+}
+
+function resolvePreviewContent(response) {
+  const payload = response && response.data ? response.data : response
+  const content = (payload && payload.content) || (payload && payload.data && payload.data.content) || ''
+  return normalizeContractContent(content)
+}
+
+function resolveUploadedFileUrl(uploadResult) {
+  const candidates = [
+    uploadResult && uploadResult.data && uploadResult.data.url,
+    uploadResult && uploadResult.data && uploadResult.data.fileUrl,
+    uploadResult && uploadResult.data && uploadResult.data.path,
+    uploadResult && uploadResult.data && uploadResult.data.filePath,
+    uploadResult && uploadResult.data,
+    uploadResult && uploadResult.url,
+    uploadResult && uploadResult.fileUrl,
+    uploadResult && uploadResult.path,
+    uploadResult && uploadResult.filePath,
+    typeof uploadResult === 'string' ? uploadResult : ''
+  ]
+
+  return candidates.find(item => typeof item === 'string' && item) || ''
+}
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '合同签约',
+      overviewTitle: '签约前确认',
+      contractNoLabel: '合同编号：',
+      notAvailable: '未获取',
+      overviewMeta: '阅读合同正文后完成签名提交，签约结果会同步到我的合同。',
+      loadingTitle: '合同加载中',
+      loadingDesc: '正在获取合同正文，请稍候。',
+      fullscreenPreview: '点击全屏查看',
+      emptyTitle: '暂无合同正文',
+      emptyDesc: '当前合同暂未返回可签约正文，请稍后再试。',
+      footerTip: '签名前请确认您已完整阅读合同内容',
+      submitting: '提交中...',
+      signAction: '我已阅读并同意，去签名',
+      back: '返回',
+      fullscreenTitle: '合同全文',
+      signerMissing: '未获取到签名人姓名',
+      contractNoMissing: '缺少合同编号',
+      signingLoading: '签约提交中...',
+      uploadFailed: '签名上传失败',
+      signSuccess: '签约成功',
+      signFailed: '签约失败'
+    },
+    en: {
+      navTitle: 'Contract Signing',
+      overviewTitle: 'Before Signing',
+      contractNoLabel: 'Contract No.: ',
+      notAvailable: 'N/A',
+      overviewMeta: 'Read the contract content before submitting your signature. The result will sync to My Contracts.',
+      loadingTitle: 'Loading contract',
+      loadingDesc: 'Fetching contract content. Please wait.',
+      fullscreenPreview: 'Open Fullscreen',
+      emptyTitle: 'No contract content',
+      emptyDesc: 'No signable contract content is available at the moment. Please try again later.',
+      footerTip: 'Please confirm that you have fully read the contract before signing',
+      submitting: 'Submitting...',
+      signAction: 'I have read and agree. Sign now',
+      back: 'Back',
+      fullscreenTitle: 'Full Contract',
+      signerMissing: 'Missing signer name',
+      contractNoMissing: 'Missing contract number',
+      signingLoading: 'Submitting contract...',
+      uploadFailed: 'Failed to upload signature',
+      signSuccess: 'Contract signed successfully',
+      signFailed: 'Failed to sign contract'
+    }
+  },
+  components: {
+    ContractSignDialog
+  },
+  data() {
+    return {
+      contractNo: '',
+      orderNo: '',
+      contractContent: '',
+      loading: false,
+      showSignBoard: false,
+      showFullscreenPreview: false,
+      isSubmitting: false,
+      scale: 0.5,
+      signerName: ''
+    }
+  },
+  onLoad(options = {}) {
+    this.contractNo = decodeURIComponent(options.no || '')
+    this.orderNo = decodeURIComponent(options.orderNo || '')
+    this.signerName = this.getSignerName()
+    this.fetchContractContent()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.contract_sign.contract_sign', key, params)
+    },
+    fetchContractContent() {
+      if (!this.contractNo) {
+        return Promise.resolve()
+      }
+
+      this.loading = true
+      this.scale = 0.5
+
+      return contractPreview({ contractNo: this.contractNo })
+        .then((response) => {
+          this.contractContent = resolvePreviewContent(response)
+        })
+        .catch((error) => {
+          console.error('fetch contract preview failed', error)
+          this.contractContent = ''
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    openSignBoard() {
+      if (this.isSubmitting) {
+        return
+      }
+      if (!this.signerName) {
+        uni.showToast({
+          title: this.t('signerMissing'),
+          icon: 'none'
+        })
+        return
+      }
+      if (!this.contractNo) {
+        uni.showToast({
+          title: this.t('contractNoMissing'),
+          icon: 'none'
+        })
+        return
+      }
+      this.showSignBoard = true
+    },
+    closeSignBoard() {
+      this.showSignBoard = false
+    },
+    getSignerName() {
+      const user = (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
+      return this.pickFirstValue(
+        user.name,
+        user.realName,
+        user.userName,
+        user.nickname,
+        user.nickName,
+        user.fullName,
+        user.account,
+        ''
+      )
+    },
+    pickFirstValue() {
+      for (let index = 0; index < arguments.length; index += 1) {
+        const value = arguments[index]
+        if (value !== undefined && value !== null) {
+          const normalized = String(value).trim()
+          if (normalized) {
+            return normalized
+          }
+        }
+      }
+      return ''
+    },
+    openFullscreenPreview() {
+      this.showFullscreenPreview = true
+    },
+    closeFullscreenPreview() {
+      this.showFullscreenPreview = false
+    },
+    zoomIn() {
+      if (this.scale < 3) {
+        this.scale = Number((this.scale + 0.2).toFixed(1))
+      }
+    },
+    zoomOut() {
+      if (this.scale > 0.5) {
+        this.scale = Number((this.scale - 0.2).toFixed(1))
+      }
+    },
+    handleSignSave(tempFilePath) {
+      this.closeSignBoard()
+      this.submitSign(tempFilePath)
+    },
+    submitSign(tempFilePath) {
+      if (!tempFilePath || this.isSubmitting) {
+        return
+      }
+
+      this.isSubmitting = true
+      uni.showLoading({
+        title: this.t('signingLoading'),
+        mask: true
+      })
+
+      return uploadCommonFile(
+        tempFilePath,
+        {},
+        'file',
+        {
+          ...(getAuthToken() ? { Authorization: `Bearer ${getAuthToken()}` } : {})
+        }
+      )
+        .then((uploadResult) => {
+          const signImageUrl = resolveUploadedFileUrl(uploadResult)
+          if (!signImageUrl) {
+            return Promise.reject(new Error((uploadResult && uploadResult.msg) || this.t('uploadFailed')))
+          }
+
+          return contractSign({
+            contractNo: this.contractNo,
+            signImageUrl
+          }).then(() => signImageUrl)
+        })
+        .then((signImageUrl) => {
+          return syncLoginStayState({ force: true })
+            .catch((error) => {
+              console.error('sync login stay state after sign failed', error)
+            })
+            .then(() => {
+              patchStoredContractSign(this.contractNo, signImageUrl)
+              return signImageUrl
+            })
+        })
+        .then(() => {
+          uni.$emit('contractSignSuccess', {
+            contractNo: this.contractNo
+          })
+        })
+        .then(() => {
+          uni.hideLoading()
+          uni.showToast({
+            title: this.t('signSuccess'),
+            icon: 'success'
+          })
+          setTimeout(() => {
+            uni.redirectTo({
+              url: '/pkgService/my_contract/my_contract'
+            })
+          }, 600)
+        })
+        .catch((error) => {
+          console.error('contract sign failed', error)
+          uni.hideLoading()
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('signFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.isSubmitting = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.contract-sign-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #f0f6ff 0%, #f8faff 100%);
+}
+
+.page-main {
+  padding: 0 24rpx calc(40rpx + env(safe-area-inset-bottom));
+}
+
+.overview-panel,
+.preview-panel,
+.empty-panel {
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 28rpx;
+  border: 1px solid rgba($brand-primary, 0.08);
+  box-shadow: 0 18rpx 48rpx rgba(25, 60, 104, 0.1);
+}
+
+.overview-panel {
+  padding: 24rpx 26rpx;
+}
+
+.overview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10rpx;
+}
+
+.overview-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1f2d3d;
+}
+
+.overview-subtitle {
+  margin-top: 6rpx;
+  font-size: 20rpx;
+  color: #7c8da0;
+}
+
+.overview-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 10rpx 16rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: 700;
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.1);
+}
+
+.overview-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 20rpx;
+  line-height: 1.5;
+  color: #61758a;
+}
+
+.preview-panel {
+  position: relative;
+  overflow: hidden;
+  margin-top: 18rpx;
+  min-height: 980rpx;
+  background: linear-gradient(180deg, #e8eef5 0%, #e0e8f1 100%);
+}
+
+.scroll-area {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.a4-wrapper {
+  min-width: max-content;
+  padding: 24rpx 24rpx 110rpx;
+  display: flex;
+  justify-content: flex-start;
+  transition: transform 0.2s ease-out;
+}
+
+.a4-paper {
+  width: 794px;
+  min-height: 1123px;
+  padding: 40px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 20rpx;
+  box-shadow: 0 16rpx 42rpx rgba(28, 53, 90, 0.1);
+  overflow: hidden;
+}
+
+.contract-rich-text {
+  display: block;
+  width: 100%;
+  font-size: 14px;
+  line-height: 1.7;
+  color: #333333;
+  word-break: break-all;
+}
+
+.preview-tip {
+  position: absolute;
+  top: 16rpx;
+  right: 16rpx;
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 10rpx 18rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  color: #ffffff;
+  background: rgba(31, 45, 61, 0.55);
+  backdrop-filter: blur(8px);
+  z-index: 2;
+}
+
+.zoom-controls {
+  position: absolute;
+  right: 24rpx;
+  bottom: 24rpx;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 999rpx;
+  padding: 8rpx 12rpx;
+  border: 1px solid rgba($brand-primary, 0.08);
+  z-index: 2;
+}
+
+.zoom-btn {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 34rpx;
+  color: $brand-primary;
+}
+
+.zoom-text {
+  min-width: 72rpx;
+  text-align: center;
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #334155;
+}
+
+.footer-bar {
+  padding-top: 18rpx;
+}
+
+.footer-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  margin-bottom: 16rpx;
+  font-size: 22rpx;
+  color: #61758a;
+}
+
+.action-btn {
+  height: 84rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #ffffff;
+  background: linear-gradient(135deg, rgba(0, 187, 232, 0.9) 0%, #00BBE8 100%);
+  box-shadow: 0 14rpx 30rpx rgba(42, 92, 170, 0.22);
+}
+
+.empty-panel {
+  margin-top: 18rpx;
+  padding: 54rpx 32rpx;
+  text-align: center;
+}
+
+.empty-icon {
+  width: 132rpx;
+  height: 132rpx;
+  margin: 0 auto 22rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 70rpx;
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.08);
+}
+
+.empty-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #233244;
+}
+
+.empty-desc {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  line-height: 1.7;
+  color: #8a99a8;
+}
+
+.fullscreen-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background: #ffffff;
+}
+
+.fullscreen-panel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+}
+
+.fullscreen-header {
+  height: calc(96rpx + env(safe-area-inset-top));
+  padding: env(safe-area-inset-top) 28rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.fullscreen-back,
+.fullscreen-placeholder {
+  width: 120rpx;
+  height: 64rpx;
+}
+
+.fullscreen-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 28rpx;
+  color: #334155;
+}
+
+.fullscreen-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1f2d3d;
+}
+
+.fullscreen-scroll {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: #f8fafc;
+}
+
+.fullscreen-wrapper {
+  min-width: max-content;
+  min-height: 100%;
+  padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.fullscreen-paper {
+  margin: 0 auto;
+}
+</style>
diff --git a/pkgService/device_control/device_control.vue b/pkgService/device_control/device_control.vue
new file mode 100644
index 0000000..8d06af4
--- /dev/null
+++ b/pkgService/device_control/device_control.vue
@@ -0,0 +1,1065 @@
+<template>
+  <view class="device-detail-page" :class="'theme-' + controlTheme">
+    <view class="bg-blur-circle"></view>
+    <view class="bg-blur-circle-2"></view>
+
+    <view class="custom-nav" :style="{ paddingTop: vuex_status_bar_height + 'px' }">
+      <view class="nav-btn" @click="goBack">
+        <text class="tn-icon-left"></text>
+      </view>
+      <view class="nav-center">
+        <text class="nav-title">{{ deviceName }}</text>
+      </view>
+      <view class="nav-btn nav-btn-outline" style="opacity: 0;">
+        <text class="tn-icon-more-vertical"></text>
+      </view>
+    </view>
+
+    <view class="hero-section">
+      <view class="device-hero-icon" :class="{'is-active': device.active}">
+        <text :class="device.iconClass || 'tn-icon-my-computer'"></text>
+      </view>
+      <view class="device-status-badge" :class="{'is-active': device.active}">
+        <view class="dot"></view>
+        <text>{{ statusText }}</text>
+      </view>
+      <view class="device-room-text">{{ displayRoomName }}</view>
+    </view>
+
+    <view class="bottom-sheet">
+      <view class="sheet-handle"></view>
+      
+      <view class="sheet-header">
+        <text class="sheet-title">{{ t('controlPanel') }}</text>
+        <text class="sheet-subtitle">{{ functionCountText }}</text>
+      </view>
+
+      <scroll-view scroll-y class="panel-scroll">
+        <view
+          v-for="(func, index) in deviceFunctions"
+          :key="'panel-' + index"
+          class="control-panel"
+          :class="{ 'is-disabled': !isFunctionSupported(func) }"
+        >
+          <view class="panel-header">
+            <view class="panel-title">
+              <text class="tn-icon-set panel-icon"></text>
+              <text>{{ getFunctionLabel(func) }}</text>
+            </view>
+            <view class="status-tag" v-if="!isFunctionSupported(func)">{{ t('pendingTag') }}</view>
+          </view>
+
+          <!-- Switch Theme -->
+          <view v-if="isSwitchLikeFunction(func)" class="control-row switch-row">
+            <view class="power-btn-huge" :class="{'is-active': device.active, 'is-disabled': isSubmitting}" @click="togglePower(index)">
+              <text class="tn-icon-power"></text>
+            </view>
+          </view>
+
+          <!-- Slider Theme -->
+          <block v-else-if="isSlideFunction(func)">
+            <view class="slider-container">
+              <view class="slider-header">
+                <text class="slider-label">{{ t('sliderLabel') }}</text>
+                <text class="slider-value">{{ controlValue }}%</text>
+              </view>
+              <slider
+                class="custom-slider"
+                min="0"
+                max="100"
+                step="1"
+                :value="controlValue"
+                activeColor="var(--theme-color)"
+                backgroundColor="rgba(255, 255, 255, 0.1)"
+                block-color="#ffffff"
+                block-size="24"
+                @change="handleControlValueChange"
+              />
+              <view class="slider-apply-btn" :class="{ 'is-disabled': isSubmitting }" @click="submitSlideValue(index)">
+                <text>{{ t('applySetting') }}</text>
+              </view>
+            </view>
+          </block>
+
+          <!-- Curtain Theme -->
+          <block v-else-if="isCurtainButtonFunction(func)">
+            <view class="control-row curtain-row">
+              <view class="curtain-btn" :class="{ 'is-active': curtainAction === 'open', 'is-disabled': isSubmitting }" @click="operateCurtain(index, 'open')">
+                <text class="tn-icon-up"></text>
+                <text class="btn-label">{{ t('curtainOpen') }}</text>
+              </view>
+              <view class="curtain-btn stop-btn" :class="{ 'is-active': curtainAction === 'stop', 'is-disabled': isSubmitting }" @click="operateCurtain(index, 'stop')">
+                <text class="tn-icon-minus"></text>
+                <text class="btn-label">{{ t('curtainPause') }}</text>
+              </view>
+              <view class="curtain-btn" :class="{ 'is-active': curtainAction === 'close', 'is-disabled': isSubmitting }" @click="operateCurtain(index, 'close')">
+                <text class="tn-icon-down"></text>
+                <text class="btn-label">{{ t('curtainClose') }}</text>
+              </view>
+            </view>
+          </block>
+
+          <view v-else class="unsupported-box" @click="notifyUnsupportedFunction(index)">
+            <text class="tn-icon-warning"></text>
+            <text>{{ t('unsupportedBoxText') }}</text>
+          </view>
+        </view>
+
+        <view class="sync-hint">
+          <text class="tn-icon-info-circle"></text>
+          <text>{{ syncHintText }}</text>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { gatewayExecuteDeviceCommand, gatewaySyncDeviceInfo } from '../../api/index.js'
+import {
+  buildCommandSchemaFields,
+  buildDeviceStateText,
+  getControlTypeCategory,
+  getDeviceControlLabel,
+  getDeviceFunctions,
+  inferDeviceControlType,
+  isSupportedDeviceControlType,
+  normalizeSmartDevice,
+  patchDeviceStatus
+} from '../../utils/smart-device'
+
+const DEFAULT_BRAND_ID = 'Tuya'
+
+function safeParseDevice(value) {
+  if (!value) {
+    return null
+  }
+
+  try {
+    return JSON.parse(decodeURIComponent(value))
+  } catch (error) {
+    console.error('parse device payload failed', error)
+    return null
+  }
+}
+
+function getControlValue(device = {}) {
+  const rawStatus = device && device.currentStatus
+  if (rawStatus === undefined || rawStatus === null || rawStatus === '') {
+    return 0
+  }
+
+  const status = typeof rawStatus === 'object'
+    ? rawStatus
+    : { value: rawStatus }
+
+  if (!status || typeof status !== 'object') {
+    return 0
+  }
+  const value = Number(
+    status.value !== undefined
+      ? status.value
+      : (status.percent !== undefined ? status.percent : status.position)
+  )
+  return Number.isFinite(value) ? value : 0
+}
+
+function resolveRefreshIntervalMs(value, fallback = 1000) {
+  const seconds = Number(value)
+  if (!Number.isFinite(seconds) || seconds <= 0) {
+    return fallback
+  }
+  return Math.round(seconds * 1000)
+}
+
+export default {
+  i18n: {
+    zh: {
+      controlPanel: '控制面板',
+      pendingTag: '待完善',
+      sliderLabel: '亮度 / 数值',
+      applySetting: '应用设置',
+      curtainOpen: '打开',
+      curtainPause: '暂停',
+      curtainClose: '关闭',
+      unsupportedBoxText: '当前功能暂未开放使用，点击反馈',
+      deviceDetail: '设备详情',
+      currentRoom: '当前房间',
+      functionCount: '{count}项功能',
+      commandSending: '指令下发中...',
+      syncHint: '操作完成后会自动刷新设备状态',
+      deviceMissing: '设备信息缺失',
+      unsupportedFunction: '{name}操作功能未完善',
+      unknownSchema: '未识别到参数模板',
+      schemaApplied: '{name}参数已下发',
+      actionSuccess: '操作成功',
+      deviceIdMissing: '设备ID缺失',
+      functionCodeMissing: '功能编码缺失',
+      commandFailed: '指令下发失败',
+      deviceClosed: '已关闭',
+      deviceEnabled: '已开启',
+      deviceOpened: '已打开',
+      curtainOpened: '窗帘已打开',
+      curtainClosed: '窗帘已关闭',
+      curtainPaused: '窗帘已暂停',
+      sliderUpdated: '滑块值已更新'
+    },
+    en: {
+      controlPanel: 'Control Panel',
+      pendingTag: 'Pending',
+      sliderLabel: 'Brightness / Value',
+      applySetting: 'Apply',
+      curtainOpen: 'Open',
+      curtainPause: 'Pause',
+      curtainClose: 'Close',
+      unsupportedBoxText: 'This function is not available yet. Tap to send feedback.',
+      deviceDetail: 'Device Details',
+      currentRoom: 'Current Room',
+      functionCount: '{count} functions',
+      commandSending: 'Sending command...',
+      syncHint: 'Device status refreshes automatically after each action',
+      deviceMissing: 'Missing device information',
+      unsupportedFunction: '{name} is not fully supported yet',
+      unknownSchema: 'No parameter template recognized',
+      schemaApplied: '{name} parameters sent',
+      actionSuccess: 'Action completed',
+      deviceIdMissing: 'Missing device ID',
+      functionCodeMissing: 'Missing function code',
+      commandFailed: 'Failed to send command',
+      deviceClosed: 'Closed',
+      deviceEnabled: 'Enabled',
+      deviceOpened: 'Opened',
+      curtainOpened: 'Curtain opened',
+      curtainClosed: 'Curtain closed',
+      curtainPaused: 'Curtain paused',
+      sliderUpdated: 'Slider value updated'
+    }
+  },
+  data() {
+    return {
+      brandId: DEFAULT_BRAND_ID,
+      roomCode: '',
+      roomName: '',
+      device: {},
+      isSubmitting: false,
+      isSyncingStatus: false,
+      controlValue: 0,
+      functionFieldMap: {},
+      functionFormValues: {},
+      pollingEnabled: false,
+      pollingTimer: null,
+      pendingSyncPromise: null,
+      devicePollingIntervalMs: 1000
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    deviceName() {
+      return this.device.deviceName || this.t('deviceDetail')
+    },
+    displayRoomName() {
+      return this.roomName || this.roomCode || this.t('currentRoom')
+    },
+    controlType() {
+      return inferDeviceControlType(this.device)
+    },
+    controlTheme() {
+      return getControlTypeCategory(this.controlType)
+    },
+    controlTypeLabel() {
+      return getDeviceControlLabel(this.controlType)
+    },
+    functionCountText() {
+      const count = this.deviceFunctions.length
+      return count ? this.t('functionCount', { count }) : this.controlTypeLabel
+    },
+    statusText() {
+      return buildDeviceStateText(this.device)
+    },
+    syncHintText() {
+      if (this.isSubmitting) {
+        return this.t('commandSending')
+      }
+      return this.t('syncHint')
+    },
+    deviceFunctions() {
+      return getDeviceFunctions(this.device)
+    },
+    curtainAction() {
+      const rawStatus = this.device.currentStatus
+      if (rawStatus === undefined || rawStatus === null) {
+        return ''
+      }
+      if (typeof rawStatus === 'object') {
+        return String(rawStatus.command || rawStatus.action || rawStatus.state || '').trim().toLowerCase()
+      }
+      return String(rawStatus).trim().toLowerCase()
+    }
+  },
+  onLoad(options) {
+    this.brandId = options.brandId ? decodeURIComponent(options.brandId) : DEFAULT_BRAND_ID
+    this.roomCode = options.roomCode ? decodeURIComponent(options.roomCode) : ''
+    this.roomName = options.roomName ? decodeURIComponent(options.roomName) : ''
+
+    const parsedDevice = safeParseDevice(options.device)
+    if (!parsedDevice) {
+      uni.showToast({
+        title: this.t('deviceMissing'),
+        icon: 'none'
+      })
+      return
+    }
+
+    this.device = normalizeSmartDevice(parsedDevice)
+    this.devicePollingIntervalMs = resolveRefreshIntervalMs(this.device.refreshInterval, this.devicePollingIntervalMs)
+    this.controlValue = getControlValue(this.device)
+    this.rebuildFunctionSchemaState()
+  },
+  onShow() {
+    this.startDevicePolling(true)
+  },
+  onHide() {
+    this.stopDevicePolling()
+  },
+  onUnload() {
+    this.stopDevicePolling()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.device_control.device_control', key, params)
+    },
+    goBack() {
+      uni.navigateBack()
+    },
+    clearDevicePollingTimer() {
+      if (this.pollingTimer) {
+        clearTimeout(this.pollingTimer)
+        this.pollingTimer = null
+      }
+    },
+    startDevicePolling(immediate = false) {
+      if (!this.device || !this.device.deviceId) {
+        return
+      }
+
+      if (this.pollingEnabled) {
+        if (immediate) {
+          this.pollNextDeviceStatus()
+        }
+        return
+      }
+
+      this.pollingEnabled = true
+      if (immediate) {
+        this.pollNextDeviceStatus()
+        return
+      }
+      this.scheduleNextDevicePoll(this.devicePollingIntervalMs)
+    },
+    stopDevicePolling() {
+      this.pollingEnabled = false
+      this.clearDevicePollingTimer()
+      this.isSyncingStatus = false
+    },
+    scheduleNextDevicePoll(delay = this.devicePollingIntervalMs) {
+      if (!this.pollingEnabled) {
+        return
+      }
+
+      this.clearDevicePollingTimer()
+      this.pollingTimer = setTimeout(() => {
+        this.pollNextDeviceStatus()
+      }, delay)
+    },
+    pollNextDeviceStatus() {
+      if (!this.pollingEnabled) {
+        return Promise.resolve()
+      }
+
+      return this.syncCurrentDeviceStatus()
+        .finally(() => {
+          if (this.pollingEnabled) {
+            this.scheduleNextDevicePoll(this.devicePollingIntervalMs)
+          }
+        })
+    },
+    syncCurrentDeviceStatus() {
+      if (!this.device || !this.device.deviceId || !this.device.deviceNo || !this.brandId) {
+        return Promise.resolve()
+      }
+
+      if (this.isSubmitting) {
+        return Promise.resolve()
+      }
+
+      if (this.pendingSyncPromise) {
+        return this.pendingSyncPromise
+      }
+
+      this.isSyncingStatus = true
+      const requestPromise = gatewaySyncDeviceInfo(this.brandId, this.device.deviceNo)
+        .then((response) => {
+          const nextDevice = normalizeSmartDevice(response)
+          if (nextDevice && Object.keys(nextDevice).length) {
+            this.syncDevice(nextDevice, { vibrate: false })
+          }
+        })
+        .catch((error) => {
+          console.error('sync current smart device failed', error)
+        })
+        .finally(() => {
+          this.isSyncingStatus = false
+          this.pendingSyncPromise = null
+        })
+
+      this.pendingSyncPromise = requestPromise
+      return requestPromise
+    },
+    syncDevice(nextDevice, options = {}) {
+      const {
+        vibrate = false
+      } = options
+      this.device = normalizeSmartDevice(nextDevice)
+      this.devicePollingIntervalMs = resolveRefreshIntervalMs(this.device.refreshInterval, this.devicePollingIntervalMs)
+      this.controlValue = getControlValue(this.device)
+      this.rebuildFunctionSchemaState()
+      if (vibrate) {
+        uni.vibrateShort()
+      }
+    },
+    getDeviceFunctionByIndex(index = 0) {
+      const functionList = this.deviceFunctions || []
+      return functionList[index] || {}
+    },
+    getFunctionKey(func = {}, index = 0) {
+      return `${this.getFunctionType(func) || 'unknown'}-${index}`
+    },
+    getFunctionType(func = {}) {
+      return String((func && func.controlType) || '').trim().toLowerCase()
+    },
+    getFunctionCategory(func = {}) {
+      return getControlTypeCategory(this.getFunctionType(func))
+    },
+    getFunctionLabel(func = {}) {
+      return String((func && func.functionDes) || '').trim() || getDeviceControlLabel(this.getFunctionType(func))
+    },
+    getFunctionSchemaText(func = {}) {
+      const schema = func && func.commandSchema
+      if (schema === undefined || schema === null || schema === '') {
+        return ''
+      }
+      if (typeof schema === 'string') {
+        return schema
+      }
+      try {
+        return JSON.stringify(schema)
+      } catch (error) {
+        return String(schema)
+      }
+    },
+    isFunctionSupported(func = {}) {
+      return isSupportedDeviceControlType(this.getFunctionType(func))
+    },
+    isSwitchLikeFunction(func = {}) {
+      return this.getFunctionCategory(func) === 'switch'
+    },
+    isSlideFunction(func = {}) {
+      return this.getFunctionCategory(func) === 'slide'
+    },
+    isCurtainButtonFunction(func = {}) {
+      return this.getFunctionCategory(func) === 'curtain'
+    },
+    isNumberSliderField(field = {}) {
+      return field.type === 'number'
+        && Number.isFinite(Number(field.min))
+        && Number.isFinite(Number(field.max))
+    },
+    getFieldSliderMin(field = {}) {
+      return Number(field.min || 0)
+    },
+    getFieldSliderMax(field = {}) {
+      return Number(field.max || 100)
+    },
+    getFieldSliderStep(field = {}) {
+      return Number(field.step || 1)
+    },
+    getFunctionFields(func = {}, index = 0) {
+      return this.functionFieldMap[this.getFunctionKey(func, index)] || []
+    },
+    hasSchemaForm(func = {}, index = 0) {
+      return this.getFunctionFields(func, index).length > 0
+    },
+    getFunctionFormValuesByIndex(index = 0) {
+      const func = this.getDeviceFunctionByIndex(index)
+      return this.getFunctionFormValues(func, index)
+    },
+    getFunctionFormValues(func = {}, index = 0) {
+      return this.functionFormValues[this.getFunctionKey(func, index)] || {}
+    },
+    rebuildFunctionSchemaState() {
+      const nextFieldMap = {}
+      const nextFormValues = {}
+      const previousValues = this.functionFormValues || {}
+
+      this.deviceFunctions.forEach((func, index) => {
+        const functionKey = this.getFunctionKey(func, index)
+        const fields = buildCommandSchemaFields(func.commandSchema)
+        const existingValues = previousValues[functionKey] || {}
+        nextFieldMap[functionKey] = fields
+        nextFormValues[functionKey] = {}
+
+        fields.forEach((field) => {
+          const hasExistingValue = Object.prototype.hasOwnProperty.call(existingValues, field.name)
+          nextFormValues[functionKey][field.name] = hasExistingValue
+            ? existingValues[field.name]
+            : this.getDefaultFieldValue(field, func)
+        })
+      })
+
+      this.functionFieldMap = nextFieldMap
+      this.functionFormValues = nextFormValues
+    },
+    getDefaultFieldValue(field = {}, func = {}) {
+      if (field.defaultValue !== undefined) {
+        return field.defaultValue
+      }
+
+      const functionType = this.getFunctionType(func)
+      const functionCategory = this.getFunctionCategory(func)
+      if (field.type === 'boolean') {
+        if (field.name === 'value' && this.isSwitchLikeFunction(func)) {
+          return !!this.device.active
+        }
+        return false
+      }
+
+      if (field.type === 'number') {
+        if ((functionCategory === 'slide' || functionCategory === 'curtain') && ['value', 'percent', 'position'].includes(field.name)) {
+          return this.controlValue
+        }
+        if (Number.isFinite(Number(field.min))) {
+          return Number(field.min)
+        }
+        return 0
+      }
+
+      if (field.type === 'enum') {
+        return field.options && field.options.length ? field.options[0].value : ''
+      }
+
+      if (field.type === 'string' && functionCategory === 'switch' && ['command', 'action', 'value'].includes(field.name)) {
+        return this.device.active ? 'on' : 'off'
+      }
+
+      if (field.type === 'string' && functionType === 'curtain:button' && ['command', 'action', 'value'].includes(field.name)) {
+        return 'open'
+      }
+
+      return ''
+    },
+    updateFunctionFieldValue(index = 0, fieldName = '', value = '') {
+      const func = this.getDeviceFunctionByIndex(index)
+      const functionKey = this.getFunctionKey(func, index)
+      this.$set(this.functionFormValues, functionKey, {
+        ...(this.functionFormValues[functionKey] || {}),
+        [fieldName]: value
+      })
+    },
+    handleSchemaNumberChange(index = 0, fieldName = '', event) {
+      const value = Number((event && event.detail && event.detail.value) || 0)
+      this.updateFunctionFieldValue(index, fieldName, value)
+    },
+    handleSchemaInput(index = 0, fieldName = '', event) {
+      const value = event && event.detail ? event.detail.value : ''
+      this.updateFunctionFieldValue(index, fieldName, value)
+    },
+    getBooleanFieldValue(index = 0, fieldName = '') {
+      return !!this.getFunctionFormValuesByIndex(index)[fieldName]
+    },
+    getNumberFieldValue(index = 0, field = {}) {
+      const value = Number(this.getFunctionFormValuesByIndex(index)[field.name])
+      if (Number.isFinite(value)) {
+        return value
+      }
+      if (Number.isFinite(Number(field.min))) {
+        return Number(field.min)
+      }
+      return 0
+    },
+    getTextFieldValue(index = 0, field = {}) {
+      const value = this.getFunctionFormValuesByIndex(index)[field.name]
+      return value === undefined || value === null ? '' : String(value)
+    },
+    normalizeSchemaFieldValue(field = {}, value) {
+      if (field.type === 'boolean') {
+        return !!value
+      }
+      if (field.type === 'number') {
+        const numericValue = Number(value)
+        return Number.isFinite(numericValue) ? numericValue : 0
+      }
+      return value === undefined || value === null ? '' : String(value)
+    },
+    handleFunctionChipClick(index = 0) {
+      const func = this.getDeviceFunctionByIndex(index)
+      if (!this.isFunctionSupported(func)) {
+        this.notifyUnsupportedFunction(func)
+      }
+    },
+    notifyUnsupportedFunction(funcOrIndex = {}) {
+      const func = typeof funcOrIndex === 'number'
+        ? this.getDeviceFunctionByIndex(funcOrIndex)
+        : funcOrIndex
+      uni.showToast({
+        title: this.t('unsupportedFunction', { name: this.getFunctionLabel(func) }),
+        icon: 'none'
+      })
+    },
+    resolveCommandFieldName(index = 0, candidates = [], fallback = 'command') {
+      const func = this.getDeviceFunctionByIndex(index)
+      const fields = this.getFunctionFields(func, index)
+      const fieldNames = fields.map(field => String(field.name || '').trim()).filter(Boolean)
+
+      for (let candidateIndex = 0; candidateIndex < candidates.length; candidateIndex += 1) {
+        const candidate = candidates[candidateIndex]
+        if (fieldNames.includes(candidate)) {
+          return candidate
+        }
+      }
+
+      return fieldNames[0] || fallback
+    },
+    buildSwitchCommandPayload(index = 0, enabled = false) {
+      const func = this.getDeviceFunctionByIndex(index)
+      const schemaText = this.getFunctionSchemaText(func).toLowerCase()
+      const fieldName = this.resolveCommandFieldName(index, ['command', 'action', 'value'], 'command')
+      if (!this.hasSchemaForm(func, index) && schemaText.includes('on/off')) {
+        return { command: enabled ? 'on' : 'off' }
+      }
+      return {
+        [fieldName]: enabled ? 'on' : 'off'
+      }
+    },
+    buildSlideCommandPayload(index = 0, value = 0) {
+      const func = this.getDeviceFunctionByIndex(index)
+      const schemaText = this.getFunctionSchemaText(func).toLowerCase()
+      if (!this.hasSchemaForm(func, index) && schemaText.includes('setpercent')) {
+        return {
+          command: 'setpercent',
+          value: Number(value || 0)
+        }
+      }
+      const fieldName = this.resolveCommandFieldName(index, ['value', 'percent', 'position'], 'value')
+      return {
+        [fieldName]: Number(value || 0)
+      }
+    },
+    buildCurtainCommandPayload(index = 0, action = '') {
+      const fieldName = this.resolveCommandFieldName(index, ['command', 'action', 'value'], 'command')
+      return {
+        [fieldName]: String(action || '').trim().toLowerCase()
+      }
+    },
+    submitSchemaForm(index = 0) {
+      const func = this.getDeviceFunctionByIndex(index)
+      if (this.isSubmitting) {
+        return
+      }
+
+      if (!this.isFunctionSupported(func)) {
+        this.notifyUnsupportedFunction(func)
+        return
+      }
+
+      const fields = this.getFunctionFields(func, index)
+      if (!fields.length) {
+        uni.showToast({
+          title: this.t('unknownSchema'),
+          icon: 'none'
+        })
+        return
+      }
+
+      const rawValues = this.getFunctionFormValues(func, index)
+      const payload = fields.reduce((result, field) => {
+        result[field.name] = this.normalizeSchemaFieldValue(field, rawValues[field.name])
+        return result
+      }, {})
+
+      this.executeCommand(func, payload, this.t('schemaApplied', { name: this.getFunctionLabel(func) }))
+    },
+    executeCommand(func, command, successText = this.t('actionSuccess')) {
+      if (!this.device || !this.device.deviceNo) {
+        uni.showToast({ title: this.t('deviceIdMissing'), icon: 'none' })
+        return Promise.resolve()
+      }
+
+      if (!this.isFunctionSupported(func)) {
+        this.notifyUnsupportedFunction(func)
+        return Promise.resolve()
+      }
+
+      const functionCode = String((func && func.functionCode) || '').trim()
+      if (!functionCode) {
+        uni.showToast({ title: this.t('functionCodeMissing'), icon: 'none' })
+        return Promise.resolve()
+      }
+
+      const controlType = this.getFunctionType(func)
+      this.isSubmitting = true
+      return gatewayExecuteDeviceCommand(this.brandId, this.device.deviceNo, functionCode, command)
+        .then(() => {
+          this.syncDevice(patchDeviceStatus(this.device, command, controlType), { vibrate: true })
+          uni.showToast({
+            title: successText,
+            icon: 'success'
+          })
+        })
+        .catch((error) => {
+          console.error('execute device command failed', error)
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('commandFailed'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.isSubmitting = false
+          this.scheduleNextDevicePoll(300)
+        })
+    },
+    togglePower(index = 0) {
+      const func = this.getDeviceFunctionByIndex(index)
+      if (this.isSubmitting) {
+        return
+      }
+      this.executeCommand(func, this.buildSwitchCommandPayload(index, !this.device.active), this.device.active ? this.t('deviceClosed') : this.t('deviceEnabled'))
+    },
+    setSwitchState(index = 0, value) {
+      const func = this.getDeviceFunctionByIndex(index)
+      if (this.isSubmitting) {
+        return
+      }
+      this.executeCommand(func, this.buildSwitchCommandPayload(index, !!value), value ? this.t('deviceOpened') : this.t('deviceClosed'))
+    },
+    operateCurtain(index = 0, action) {
+      const func = this.getDeviceFunctionByIndex(index)
+      if (this.isSubmitting) {
+        return
+      }
+      this.executeCommand(
+        func,
+        this.buildCurtainCommandPayload(index, action),
+        action === 'open' ? this.t('curtainOpened') : (action === 'close' ? this.t('curtainClosed') : this.t('curtainPaused'))
+      )
+    },
+    handleControlValueChange(event) {
+      this.controlValue = Number((event && event.detail && event.detail.value) || 0)
+    },
+    submitSlideValue(index = 0) {
+      const func = this.getDeviceFunctionByIndex(index)
+      if (this.isSubmitting) {
+        return
+      }
+      this.executeCommand(
+        func,
+        this.buildSlideCommandPayload(index, this.controlValue),
+        this.t('sliderUpdated')
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.device-detail-page {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background-color: #0B0C10;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Themes */
+.theme-switch { --theme-color: #4653ff; --theme-glow: rgba(70, 83, 255, 0.4); }
+.theme-slide { --theme-color: #00d37a; --theme-glow: rgba(0, 211, 122, 0.4); }
+.theme-curtain { --theme-color: #ffb800; --theme-glow: rgba(255, 184, 0, 0.4); }
+.theme-unknown { --theme-color: #a3abff; --theme-glow: rgba(163, 171, 255, 0.4); }
+
+.bg-blur-circle {
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 600rpx;
+  height: 600rpx;
+  background: var(--theme-glow);
+  filter: blur(100px);
+  border-radius: 50%;
+  opacity: 0.6;
+  z-index: 0;
+}
+.bg-blur-circle-2 {
+  position: absolute;
+  bottom: -10%;
+  right: -20%;
+  width: 500rpx;
+  height: 500rpx;
+  background: rgba(255, 255, 255, 0.05);
+  filter: blur(80px);
+  border-radius: 50%;
+  z-index: 0;
+}
+
+.custom-nav {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 88rpx;
+  padding: 0 40rpx;
+}
+
+.nav-btn {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36rpx;
+  color: #fff;
+  backdrop-filter: blur(10px);
+  transition: background 0.2s;
+}
+.nav-btn:active { background: rgba(255, 255, 255, 0.15); }
+.nav-btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.1); }
+
+.nav-center { flex: 1; text-align: center; padding: 0 20rpx; overflow: hidden; }
+.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; letter-spacing: 2rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
+
+.hero-section {
+  position: relative;
+  z-index: 10;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 60rpx;
+}
+
+.device-hero-icon {
+  width: 220rpx;
+  height: 220rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
+  border: 2rpx solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 50rpx;
+  box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.3), inset 0 4rpx 20rpx rgba(255, 255, 255, 0.05);
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  backdrop-filter: blur(20px);
+}
+.device-hero-icon text { font-size: 90rpx; color: rgba(255, 255, 255, 0.5); transition: all 0.3s; }
+.device-hero-icon.is-active {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 40rpx 80rpx var(--theme-glow), inset 0 4rpx 30rpx rgba(255, 255, 255, 0.2);
+  transform: translateY(-16rpx) scale(1.05);
+}
+.device-hero-icon.is-active text { 
+  color: #fff; 
+  text-shadow: 0 0 30rpx rgba(255, 255, 255, 0.8), 0 0 60rpx var(--theme-color); 
+}
+
+.device-status-badge {
+  display: flex;
+  align-items: center;
+  padding: 14rpx 36rpx;
+  border-radius: 60rpx;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1rpx solid rgba(255, 255, 255, 0.1);
+  margin-bottom: 20rpx;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
+  transition: all 0.3s;
+}
+.device-status-badge .dot {
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  margin-right: 16rpx;
+  transition: all 0.3s;
+}
+.device-status-badge.is-active {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.device-status-badge.is-active .dot { 
+  background: var(--theme-color); 
+  box-shadow: 0 0 16rpx var(--theme-color), 0 0 8rpx #fff; 
+}
+.device-status-badge text { 
+  font-size: 28rpx; 
+  color: rgba(255, 255, 255, 0.9); 
+  font-weight: 500; 
+  letter-spacing: 2rpx;
+}
+
+.device-room-text { 
+  font-size: 26rpx; 
+  color: rgba(255, 255, 255, 0.4); 
+  letter-spacing: 4rpx;
+  text-transform: uppercase;
+}
+
+.bottom-sheet {
+  position: relative;
+  z-index: 20;
+  height: 55vh;
+  background: rgba(20, 22, 28, 0.85);
+  backdrop-filter: blur(20px);
+  border-top-left-radius: 60rpx;
+  border-top-right-radius: 60rpx;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.sheet-handle {
+  width: 80rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background: rgba(255, 255, 255, 0.15);
+  margin: 24rpx auto 10rpx;
+}
+
+.sheet-header {
+  padding: 30rpx 50rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.sheet-title { font-size: 36rpx; font-weight: 600; color: #fff; }
+.sheet-subtitle { font-size: 26rpx; color: rgba(255, 255, 255, 0.4); }
+
+.panel-scroll {
+  flex: 1;
+  padding: 0 40rpx;
+  box-sizing: border-box;
+}
+
+.control-panel {
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 32rpx;
+  padding: 40rpx;
+  margin-bottom: 30rpx;
+  border: 1px solid rgba(255, 255, 255, 0.03);
+}
+.control-panel.is-disabled { opacity: 0.6; pointer-events: none; }
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 40rpx;
+}
+.panel-title { display: flex; align-items: center; font-size: 28rpx; color: #e0e0e6; font-weight: 500; }
+.panel-icon { margin-right: 12rpx; font-size: 32rpx; color: rgba(255,255,255,0.4); }
+.status-tag { font-size: 22rpx; padding: 6rpx 16rpx; background: rgba(255,255,255,0.1); border-radius: 10rpx; color: #aaa; }
+
+.switch-row { display: flex; justify-content: center; padding: 20rpx 0; }
+.power-btn-huge {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 60rpx;
+  color: #fff;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  box-shadow: inset 0 0 20rpx rgba(0,0,0,0.5);
+}
+.power-btn-huge.is-active {
+  background: var(--theme-color);
+  border-color: transparent;
+  box-shadow: 0 10rpx 40rpx var(--theme-glow), inset 0 0 20rpx rgba(255,255,255,0.2);
+}
+.power-btn-huge.is-disabled { opacity: 0.5; transform: scale(0.95); }
+
+.slider-container { display: flex; flex-direction: column; }
+.slider-header { display: flex; justify-content: space-between; margin-bottom: 20rpx; }
+.slider-label { font-size: 26rpx; color: rgba(255,255,255,0.6); }
+.slider-value { font-size: 32rpx; font-weight: 600; color: #fff; }
+.custom-slider { margin: 20rpx 0 40rpx; }
+.slider-apply-btn {
+  background: rgba(255, 255, 255, 0.08);
+  padding: 24rpx 0;
+  border-radius: 20rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #fff;
+  transition: background 0.2s;
+}
+.slider-apply-btn:active { background: rgba(255, 255, 255, 0.15); }
+
+.curtain-row { display: flex; justify-content: space-between; }
+.curtain-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 24rpx;
+  padding: 30rpx 0;
+  margin: 0 10rpx;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+.curtain-btn:first-child { margin-left: 0; }
+.curtain-btn:last-child { margin-right: 0; }
+.curtain-btn text:first-child { font-size: 40rpx; color: #fff; margin-bottom: 12rpx; }
+.btn-label { font-size: 26rpx; color: rgba(255,255,255,0.7); }
+.curtain-btn.is-active {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--theme-color);
+}
+.curtain-btn.is-active text:first-child { color: var(--theme-color); }
+.curtain-btn:active { transform: scale(0.95); }
+
+.unsupported-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx;
+  background: rgba(255, 170, 0, 0.1);
+  border-radius: 20rpx;
+  color: #ffaa00;
+  font-size: 26rpx;
+}
+.unsupported-box text:first-child { margin-right: 12rpx; font-size: 32rpx; }
+
+.sync-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40rpx 0;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 24rpx;
+}
+.sync-hint text:first-child { margin-right: 10rpx; }
+</style>
diff --git a/pkgService/message_detail/message_detail.vue b/pkgService/message_detail/message_detail.vue
new file mode 100644
index 0000000..1b29b13
--- /dev/null
+++ b/pkgService/message_detail/message_detail.vue
@@ -0,0 +1,583 @@
+<template>
+  <view class="message-detail-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-main tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '48rpx' }">
+      <view class="hero-panel tn-margin-bottom-lg" :class="heroThemeClass">
+        <view class="hero-top-row">
+          <view class="hero-badge" :class="heroBadgeClass">{{ categoryText }}</view>
+          <view class="hero-icon-wrap">
+            <text :class="categoryIcon"></text>
+          </view>
+        </view>
+        <view class="hero-title tn-margin-top">{{ localizedTitle || t('messageFallbackTitle') }}</view>
+        <view class="hero-meta-row tn-margin-top">
+          <view class="hero-meta-chip">
+            <text class="tn-icon-time tn-margin-right-xs"></text>
+            <text>{{ detail.time || '--' }}</text>
+          </view>
+          <view class="hero-meta-chip">
+            <text class="tn-icon-my tn-margin-right-xs"></text>
+            <text>{{ sourceText }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="article-header tn-margin-bottom-lg">
+        <view class="article-title">{{ localizedTitle || t('messageFallbackTitle') }}</view>
+        <view class="article-meta tn-margin-top">
+          <view class="article-tag">{{ categoryText }}</view>
+          <view class="article-time">{{ detail.time || '--' }}</view>
+        </view>
+      </view>
+
+      <view class="content-panel tn-margin-bottom-lg">
+        <view class="panel-title">{{ t('contentTitle') }}</view>
+        <rich-text class="article-content tn-margin-top" :nodes="contentNodes"></rich-text>
+      </view>
+
+      <view v-if="localizedDesc && localizedDesc !== localizedContent" class="content-panel tn-margin-bottom-lg">
+        <view class="panel-title">{{ t('summaryTitle') }}</view>
+        <view class="panel-desc tn-margin-top">{{ localizedDesc }}</view>
+      </view>
+
+      <view class="meta-panel tn-margin-bottom-lg">
+        <view class="meta-row">
+          <text class="meta-label">{{ t('sourceLabel') }}</text>
+          <text class="meta-value">{{ sourceText }}</text>
+        </view>
+        <view class="meta-row">
+          <text class="meta-label">{{ t('categoryLabel') }}</text>
+          <text class="meta-value">{{ categoryText }}</text>
+        </view>
+        <view v-if="detail.code" class="meta-row">
+          <text class="meta-label">{{ t('codeLabel') }}</text>
+          <view class="meta-action-wrap">
+            <text class="meta-value">{{ detail.code }}</text>
+            <view class="copy-btn" @click="copyCode">
+              <text class="tn-text-xs tn-text-bold">{{ t('copy') }}</text>
+            </view>
+          </view>
+        </view>
+        <view v-if="detail.statusHint" class="meta-row">
+          <text class="meta-label">{{ t('statusLabel') }}</text>
+          <text class="meta-value">{{ detail.statusHint }}</text>
+        </view>
+      </view>
+
+      <view class="action-row">
+        <view class="ghost-btn" @click="goBackList">
+          <text class="tn-text-bold">{{ t('backList') }}</text>
+        </view>
+        <view v-if="detail.path" class="action-btn" @click="handleGoBusiness">
+          <text class="tn-text-bold">{{ actionButtonText }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  clearMessageDetailPayload,
+  findMessageDetailPayload,
+  getMessageDetailPayload
+} from '../../utils/messages'
+import { normalizeRichTextImages } from '../../utils/rich-text'
+
+function escapeHtml(value = '') {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+function normalizeContentToRichText(value = '', emptyText = '') {
+  const text = String(value || '').trim()
+  if (!text) {
+    return `<p>${escapeHtml(emptyText || '')}</p>`
+  }
+  if (/<[a-z][\s\S]*>/i.test(text)) {
+    return normalizeRichTextImages(
+      text,
+      'display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;border-radius:16rpx;margin:16rpx 0;vertical-align:top;'
+    )
+  }
+  return `<div style="white-space:pre-wrap;line-height:1.9;color:#334155;font-size:30rpx;">${escapeHtml(text)}</div>`
+}
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '消息详情',
+      messageFallbackTitle: '消息通知',
+      contentTitle: '通知内容',
+      summaryTitle: '摘要',
+      sourceLabel: '消息来源',
+      categoryLabel: '消息分类',
+      codeLabel: '通知编码',
+      copy: '复制',
+      statusLabel: '当前状态',
+      backList: '返回消息页',
+      categorySystem: '系统通知',
+      categoryPayment: '缴费账单',
+      categoryButler: '管家消息',
+      actionSystem: '前往相关页面',
+      actionPayment: '去处理账单',
+      actionButler: '去查看服务',
+      actionDefault: '继续前往业务页',
+      remoteSource: '系统通知接口',
+      localSource: '本地业务消息',
+      expiredDesc: '当前消息详情已失效，请返回消息中心重新打开。',
+      expiredHint: '消息缓存已失效',
+      codeCopied: '通知编号已复制',
+      emptyContent: '暂无详细内容'
+    },
+    en: {
+      navTitle: 'Message Detail',
+      messageFallbackTitle: 'Notification',
+      contentTitle: 'Content',
+      summaryTitle: 'Summary',
+      sourceLabel: 'Source',
+      categoryLabel: 'Category',
+      codeLabel: 'Notice Code',
+      copy: 'Copy',
+      statusLabel: 'Status',
+      backList: 'Back to Messages',
+      categorySystem: 'System Notice',
+      categoryPayment: 'Payment Bill',
+      categoryButler: 'Butler Message',
+      actionSystem: 'Open Related Page',
+      actionPayment: 'Handle Bill',
+      actionButler: 'View Service',
+      actionDefault: 'Continue to Page',
+      remoteSource: 'Remote Notification API',
+      localSource: 'Local Business Message',
+      expiredDesc: 'This message detail has expired. Please return to the message center and open it again.',
+      expiredHint: 'Message cache expired',
+      codeCopied: 'Notice code copied',
+      emptyContent: 'No detailed content available'
+    }
+  },
+  data() {
+    return {
+      lookupId: '',
+      lookupCode: '',
+      detail: {
+        id: '',
+        title: '',
+        desc: '',
+        content: '',
+        time: '',
+        category: 'system',
+        source: 'local',
+        code: '',
+        path: '',
+        statusHint: ''
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    localizedTitle() {
+      if (this.language === 'en') {
+        return this.detail.titleEn || this.detail.title || this.detail.titleZh || ''
+      }
+      return this.detail.titleZh || this.detail.title || this.detail.titleEn || ''
+    },
+    localizedDesc() {
+      if (this.language === 'en') {
+        return this.detail.descEn || this.detail.desc || this.detail.descZh || ''
+      }
+      return this.detail.descZh || this.detail.desc || this.detail.descEn || ''
+    },
+    localizedContent() {
+      if (this.language === 'en') {
+        return this.detail.contentEn || this.detail.content || this.detail.contentZh || this.localizedDesc
+      }
+      return this.detail.contentZh || this.detail.content || this.detail.contentEn || this.localizedDesc
+    },
+    categoryText() {
+      const map = {
+        system: this.t('categorySystem'),
+        payment: this.t('categoryPayment'),
+        butler: this.t('categoryButler')
+      }
+      return map[this.detail.category] || this.t('messageFallbackTitle')
+    },
+    contentNodes() {
+      return normalizeContentToRichText(this.localizedContent || this.localizedDesc || '', this.t('emptyContent'))
+    },
+    categoryIcon() {
+      const map = {
+        system: 'tn-icon-notice-fill',
+        payment: 'tn-icon-coupon-fill',
+        butler: 'tn-icon-service-fill'
+      }
+      return map[this.detail.category] || 'tn-icon-notice-fill'
+    },
+    heroThemeClass() {
+      const map = {
+        system: 'hero-system',
+        payment: 'hero-payment',
+        butler: 'hero-butler'
+      }
+      return map[this.detail.category] || 'hero-system'
+    },
+    heroBadgeClass() {
+      const map = {
+        system: 'badge-system',
+        payment: 'badge-payment',
+        butler: 'badge-butler'
+      }
+      return map[this.detail.category] || 'badge-system'
+    },
+    actionButtonText() {
+      const map = {
+        system: this.t('actionSystem'),
+        payment: this.t('actionPayment'),
+        butler: this.t('actionButler')
+      }
+      return map[this.detail.category] || this.t('actionDefault')
+    },
+    sourceText() {
+      return this.detail.source === 'remote' ? this.t('remoteSource') : this.t('localSource')
+    }
+  },
+  onLoad(options = {}) {
+    this.lookupId = options.id || ''
+    this.lookupCode = options.code || ''
+    this.restoreDetail()
+  },
+  watch: {
+    language() {
+      this.restoreDetail()
+    }
+  },
+  onUnload() {
+    clearMessageDetailPayload(this.language)
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.message_detail.message_detail', key, params)
+    },
+    restoreDetail() {
+      const payload = getMessageDetailPayload(this.language)
+      const fallbackPayload = findMessageDetailPayload(this.lookupId, this.lookupCode, this.language)
+      const resolvedPayload = payload && Object.keys(payload).length ? payload : fallbackPayload
+
+      if (resolvedPayload && typeof resolvedPayload === 'object' && Object.keys(resolvedPayload).length) {
+        this.detail = {
+          ...this.detail,
+          ...resolvedPayload
+        }
+        return
+      }
+
+      this.detail = {
+        ...this.detail,
+        id: this.lookupId || this.lookupCode || '',
+        code: this.lookupCode || '',
+        titleZh: this.t('messageFallbackTitle'),
+        titleEn: this.t('messageFallbackTitle'),
+        descZh: this.t('expiredDesc'),
+        descEn: this.t('expiredDesc'),
+        contentZh: this.t('expiredDesc'),
+        contentEn: this.t('expiredDesc'),
+        title: this.t('messageFallbackTitle'),
+        desc: this.t('expiredDesc'),
+        content: this.t('expiredDesc'),
+        source: 'remote',
+        statusHint: this.t('expiredHint')
+      }
+    },
+    goBackList() {
+      uni.navigateBack()
+    },
+    copyCode() {
+      if (!this.detail.code) {
+        return
+      }
+      uni.setClipboardData({
+        data: String(this.detail.code),
+        success: () => {
+          uni.showToast({
+            title: this.t('codeCopied'),
+            icon: 'success'
+          })
+        }
+      })
+    },
+    handleGoBusiness() {
+      if (!this.detail.path) {
+        return
+      }
+      uni.navigateTo({
+        url: this.detail.path
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.message-detail-page {
+  min-height: 100vh;
+  background: linear-gradient(145deg, #F4F7FA 0%, #EAEFF5 100%);
+}
+
+.hero-panel,
+.content-panel,
+.meta-panel {
+  background: rgba(255, 255, 255, 0.84);
+  border-radius: 32rpx;
+  padding: 32rpx;
+  box-shadow: 0 16rpx 48rpx rgba(15, 23, 42, 0.04), inset 0 2rpx 0 rgba(255, 255, 255, 1);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+}
+
+.hero-panel {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-panel::after {
+  content: '';
+  position: absolute;
+  right: -60rpx;
+  top: -80rpx;
+  width: 240rpx;
+  height: 240rpx;
+  border-radius: 50%;
+  opacity: 0.28;
+}
+
+.hero-system {
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16) 0%, rgba(255, 255, 255, 0.88) 56%);
+}
+
+.hero-system::after {
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.42) 0%, rgba(59, 130, 246, 0) 70%);
+}
+
+.hero-payment {
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(255, 255, 255, 0.88) 56%);
+}
+
+.hero-payment::after {
+  background: radial-gradient(circle, rgba(245, 158, 11, 0.34) 0%, rgba(245, 158, 11, 0) 70%);
+}
+
+.hero-butler {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(255, 255, 255, 0.88) 56%);
+}
+
+.hero-butler::after {
+  background: radial-gradient(circle, rgba(16, 185, 129, 0.34) 0%, rgba(16, 185, 129, 0) 70%);
+}
+
+.hero-top-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 1;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 10rpx 20rpx;
+  border-radius: 999rpx;
+  font-size: 20rpx;
+  letter-spacing: 4rpx;
+  font-weight: 700;
+}
+
+.badge-system {
+  color: #1d4ed8;
+  background: rgba(29, 78, 216, 0.12);
+}
+
+.badge-payment {
+  color: #b45309;
+  background: rgba(245, 158, 11, 0.14);
+}
+
+.badge-butler {
+  color: #047857;
+  background: rgba(16, 185, 129, 0.14);
+}
+
+.hero-icon-wrap {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  color: #ffffff;
+  background: linear-gradient(135deg, #0f172a 0%, #475569 100%);
+  box-shadow: 0 16rpx 32rpx rgba(15, 23, 42, 0.14);
+}
+
+.hero-title {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.4;
+  position: relative;
+  z-index: 1;
+}
+
+.hero-meta,
+.panel-desc,
+.meta-label,
+.meta-value {
+  font-size: 24rpx;
+  line-height: 1.8;
+  color: #64748b;
+}
+
+.hero-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.hero-meta-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 10rpx 18rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  color: #475569;
+  background: rgba(148, 163, 184, 0.1);
+}
+
+.article-header {
+  padding: 40rpx 32rpx;
+  background: #ffffff;
+  border-radius: 32rpx;
+  box-shadow: 0 16rpx 48rpx rgba(15, 23, 42, 0.04);
+}
+
+.article-title {
+  font-size: 40rpx;
+  line-height: 1.5;
+  font-weight: 900;
+  color: #0f172a;
+}
+
+.article-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.article-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 8rpx 18rpx;
+  border-radius: 10rpx;
+  color: #1d4ed8;
+  font-size: 22rpx;
+  font-weight: 700;
+  background: rgba(29, 78, 216, 0.1);
+}
+
+.article-time {
+  font-size: 24rpx;
+  color: #94a3b8;
+}
+
+.panel-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.meta-row + .meta-row {
+  margin-top: 18rpx;
+}
+
+.meta-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24rpx;
+}
+
+.meta-action-wrap {
+  display: flex;
+  align-items: center;
+  gap: 14rpx;
+}
+
+.meta-value {
+  color: #111827;
+  text-align: right;
+  word-break: break-all;
+}
+
+.copy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 72rpx;
+  height: 44rpx;
+  padding: 0 14rpx;
+  border-radius: 999rpx;
+  color: #1d4ed8;
+  background: rgba(29, 78, 216, 0.1);
+}
+
+.article-content {
+  font-size: 30rpx;
+  color: #334155;
+  line-height: 1.9;
+  word-break: break-all;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 92rpx;
+  border-radius: 999rpx;
+  color: #0f172a;
+  background: linear-gradient(135deg, $brand-primary 0%, #c7eb65 100%);
+  box-shadow: 0 16rpx 32rpx rgba($brand-primary, 0.25);
+}
+
+.action-row {
+  display: flex;
+  gap: 20rpx;
+}
+
+.action-row > view {
+  flex: 1;
+}
+
+.ghost-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 92rpx;
+  border-radius: 999rpx;
+  color: #0f172a;
+  background: rgba(255, 255, 255, 0.84);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.04);
+}
+</style>
diff --git a/pkgService/my_application/my_application.vue b/pkgService/my_application/my_application.vue
new file mode 100644
index 0000000..70b968c
--- /dev/null
+++ b/pkgService/my_application/my_application.vue
@@ -0,0 +1,674 @@
+<template>
+  <view class="my-application-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-main tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '48rpx' }">
+      <scroll-view class="filter-scroll" scroll-x :show-scrollbar="false">
+        <view class="filter-row tn-margin-bottom-lg">
+          <view
+            class="filter-chip"
+            v-for="item in statusOptions"
+            :key="item.value"
+            :class="{ 'filter-chip--active': status === item.value }"
+            @click="changeStatus(item.value)"
+          >
+            {{ item.label }}
+          </view>
+        </view>
+      </scroll-view>
+
+      <view class="toolbar-row tn-margin-bottom-lg">
+        <view class="toolbar-summary">{{ t('toolbarSummary', { total }) }}</view>
+        <view
+          class="refresh-btn"
+          :class="{ 'refresh-btn--loading': loading }"
+          @click="refreshStatus"
+        >
+          <text
+            class="tn-text-bold tn-flex tn-flex-row-center tn-flex-col-center"
+          >
+            <text v-if="loading" class="tn-icon-loading tn-margin-right-xs spin"></text>
+            {{ loading ? t('refreshing') : t('refresh') }}
+          </text>
+        </view>
+      </view>
+
+      <view v-if="list.length">
+        <view
+          v-for="item in list"
+          :key="getApplicationKey(item)"
+          class="application-card tn-margin-bottom-lg"
+          @click="goToApplicationDetail(item)"
+        >
+          <view class="card-head tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="card-title-wrap">
+              <view class="card-title">{{ getApplicationTitle(item) }}</view>
+              <view class="card-code tn-margin-top-xs">{{ getApplicationCode(item) }}</view>
+            </view>
+            <view :class="['status-badge', 'status-' + resolveStatusType(item.status)]">
+              {{ getDisplayStatusText(item) }}
+            </view>
+          </view>
+
+          <view class="card-body tn-margin-top">
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('apartmentLabel') }}</text>
+              <text class="info-value">{{ item.intendedAreaName || '--' }}</text>
+            </view>
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('occupantLabel') }}</text>
+              <text class="info-value">{{ item.userName || item.phone || '--' }}</text>
+            </view>
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ item.isViewingApplication ? t('viewingTimeLabel') : t('leaseTermLabel') }}</text>
+              <text class="info-value">{{ formatDateRange(item.start, item.end) }}</text>
+            </view>
+            <view class="info-row tn-flex tn-flex-row-between">
+              <text class="info-label">{{ t('submittedAtLabel') }}</text>
+              <text class="info-value">{{ formatDateTime(item.createTime) }}</text>
+            </view>
+            <view v-if="item.remark" class="remark-panel tn-margin-top">
+              <view class="remark-label">{{ t('remarkLabel') }}</view>
+              <view class="remark-text tn-margin-top-xs">{{ item.remark }}</view>
+            </view>
+          </view>
+          <view v-if="canViewBill(item)" class="card-footer tn-margin-top-lg">
+            <view
+              class="card-action-btn card-action-btn--ghost"
+              :data-reference-type-no="resolveReferenceTypeNo(item)"
+              @click="goToBillPage"
+            >
+              <text class="tn-text-bold">{{ t('viewBill') }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="load-state">
+          <text v-if="loadingMore">{{ t('loadingMore') }}</text>
+          <text v-else-if="!hasMore">{{ t('noMore') }}</text>
+          <text v-else>{{ t('pullUpMore') }}</text>
+        </view>
+      </view>
+
+      <view v-else-if="!loading" class="empty-panel tn-padding-lg">
+        <view class="empty-title">{{ t('emptyTitle') }}</view>
+        <view class="empty-desc tn-margin-top-sm">{{ t('emptyDesc') }}</view>
+        <view class="action-btn tn-margin-top-lg" @click="goSelectRoom">
+          <text class="tn-text-bold">{{ t('goSelectRoom') }}</text>
+        </view>
+      </view>
+
+      <view v-if="loading && !list.length" class="empty-panel tn-padding-lg">
+        <view class="empty-title">{{ t('loadingTitle') }}</view>
+        <view class="empty-desc tn-margin-top-sm">{{ t('loadingDesc') }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { applicationFormMePage } from '@/api/index.js'
+import { saveActiveApplicationCode, saveMyApplicationList } from '@/utils/app-state'
+
+function formatPageResponse(response) {
+  const payload = response && response.data ? response.data : response
+  return payload && typeof payload === 'object' ? payload : {}
+}
+
+function normalizeApplicationList(list = []) {
+  if (!Array.isArray(list)) {
+    return []
+  }
+  return list
+    .filter(item => item && typeof item === 'object')
+    .map((item) => {
+      const remark = item && item.remark ? String(item.remark) : ''
+      const isViewingApplication = /预约看房申请|看房时间[:：]|意向房型[:：]|意向区域[:：]|viewing request|viewing time[:：]|preferred room type[:：]|preferred area[:：]/i.test(remark)
+      return {
+        ...item,
+        isViewingApplication
+      }
+    })
+}
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '我的申请',
+      toolbarSummary: '共 {total} 条申请',
+      refreshing: '刷新中...',
+      refresh: '刷新状态',
+      apartmentLabel: '所属公寓',
+      occupantLabel: '入住人',
+      viewingTimeLabel: '预约时间',
+      leaseTermLabel: '预计租期',
+      submittedAtLabel: '提交时间',
+      remarkLabel: '补充说明',
+      viewBill: '查看关联账单',
+      loadingMore: '加载中...',
+      noMore: '没有更多申请了',
+      pullUpMore: '上拉加载更多',
+      emptyTitle: '暂无申请记录',
+      emptyDesc: '您还没有提交任何申请，去选房后可发起入住申请或预约看房。',
+      goSelectRoom: '去选房',
+      loadingTitle: '申请列表加载中',
+      loadingDesc: '正在同步您的入住申请记录，请稍候。',
+      statusAll: '全部',
+      statusPending: '待审核',
+      statusApproved: '已通过',
+      statusRejected: '已拒绝',
+      statusFinished: '已结束',
+      statusProcessing: '处理中',
+      refreshSuccess: '申请状态已刷新',
+      loadError: '申请记录加载失败',
+      viewingApplicationTitle: '预约看房申请',
+      stayApplicationTitle: '入住申请',
+      missingBillCode: '申请单编号缺失',
+      missingApplicationCode: '申请编号缺失',
+      dateRangeJoiner: ' 至 '
+    },
+    en: {
+      navTitle: 'My Applications',
+      toolbarSummary: '{total} applications',
+      refreshing: 'Refreshing...',
+      refresh: 'Refresh Status',
+      apartmentLabel: 'Apartment',
+      occupantLabel: 'Resident',
+      viewingTimeLabel: 'Viewing Time',
+      leaseTermLabel: 'Lease Term',
+      submittedAtLabel: 'Submitted At',
+      remarkLabel: 'Remarks',
+      viewBill: 'View Related Bill',
+      loadingMore: 'Loading...',
+      noMore: 'No more applications',
+      pullUpMore: 'Pull up to load more',
+      emptyTitle: 'No applications yet',
+      emptyDesc: 'You have not submitted any application yet. Go select a room to start a stay or viewing application.',
+      goSelectRoom: 'Select Room',
+      loadingTitle: 'Loading applications',
+      loadingDesc: 'Syncing your application records. Please wait.',
+      statusAll: 'All',
+      statusPending: 'Pending',
+      statusApproved: 'Approved',
+      statusRejected: 'Rejected',
+      statusFinished: 'Closed',
+      statusProcessing: 'Processing',
+      refreshSuccess: 'Application status refreshed',
+      loadError: 'Failed to load applications',
+      viewingApplicationTitle: 'Viewing Request',
+      stayApplicationTitle: 'Stay Application',
+      missingBillCode: 'Missing application bill number',
+      missingApplicationCode: 'Missing application number',
+      dateRangeJoiner: ' to '
+    }
+  },
+  data() {
+    return {
+      status: '',
+      pageIndex: 1,
+      pageSize: 10,
+      total: 0,
+      list: [],
+      loading: false,
+      loadingMore: false,
+      hasMore: true,
+      statusOptions: []
+    }
+  },
+  onShow() {
+    this.reloadList()
+  },
+  onPullDownRefresh() {
+    this.reloadList().finally(() => {
+      uni.stopPullDownRefresh()
+    })
+  },
+  onReachBottom() {
+    this.loadMore()
+  },
+  created() {
+    this.syncStatusOptions()
+  },
+  watch: {
+    language() {
+      this.syncStatusOptions()
+      this.reloadList(true)
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    }
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.my_application.my_application', key, params)
+    },
+    syncStatusOptions() {
+      this.statusOptions = [
+        { label: this.t('statusAll'), value: '' },
+        { label: this.t('statusPending'), value: 0 },
+        { label: this.t('statusApproved'), value: 10 },
+        { label: this.t('statusRejected'), value: 20 },
+        { label: this.t('statusFinished'), value: 99 }
+      ]
+    },
+    getStatusText(status) {
+      const map = {
+        0: this.t('statusPending'),
+        10: this.t('statusApproved'),
+        20: this.t('statusRejected'),
+        99: this.t('statusFinished')
+      }
+      return map[status] || this.t('statusProcessing')
+    },
+    getDisplayStatusText(item = {}) {
+      if (this.language !== 'en' && item.statusDesc) {
+        return item.statusDesc
+      }
+      return this.getStatusText(item.status)
+    },
+    resolveStatusType(status) {
+      if (status === 10) {
+        return 'approved'
+      }
+      if (status === 20) {
+        return 'rejected'
+      }
+      if (status === 99) {
+        return 'finished'
+      }
+      return 'pending'
+    },
+    formatDateTime(value) {
+      if (!value) {
+        return '--'
+      }
+      const text = String(value).replace('T', ' ')
+      return text.length > 16 ? text.slice(0, 16) : text
+    },
+    formatDate(value) {
+      if (!value) {
+        return '--'
+      }
+      return String(value).slice(0, 10)
+    },
+    formatDateRange(start, end) {
+      if (!start && !end) {
+        return '--'
+      }
+      if (start && end) {
+        const startText = this.formatDateTime(start)
+        const endText = this.formatDateTime(end)
+        if (String(start).includes('T') || String(end).includes('T')) {
+          return `${startText}${this.t('dateRangeJoiner')}${endText}`
+        }
+      }
+      return `${this.formatDate(start)}${this.t('dateRangeJoiner')}${this.formatDate(end)}`
+    },
+    async refreshStatus() {
+      if (this.loading || this.loadingMore) {
+        return
+      }
+      await this.reloadList()
+      if (this.list.length || this.total === 0) {
+        uni.showToast({
+          title: this.t('refreshSuccess'),
+          icon: 'none'
+        })
+      }
+    },
+    async reloadList() {
+      this.pageIndex = 1
+      this.hasMore = true
+      this.list = []
+      await this.fetchList(true)
+    },
+    async loadMore() {
+      if (!this.hasMore || this.loading || this.loadingMore) {
+        return
+      }
+      this.pageIndex += 1
+      await this.fetchList(false)
+    },
+    async fetchList(isReload = false) {
+      if (isReload) {
+        this.loading = true
+      } else {
+        this.loadingMore = true
+      }
+
+      const params = {
+        PageIndex: this.pageIndex,
+        PageSize: this.pageSize
+      }
+      if (this.status !== '' && this.status !== null && typeof this.status !== 'undefined') {
+        params.Status = this.status
+      }
+
+      await applicationFormMePage(params, this.language)
+        .then((response) => {
+          const pageData = formatPageResponse(response)
+          console.log('pageData', pageData)
+          const nextList = normalizeApplicationList(pageData.data || [])
+          const total = Number(pageData.total || 0)
+
+          this.total = total
+          this.list = normalizeApplicationList(isReload ? nextList : this.list.concat(nextList))
+          this.hasMore = this.list.length < total && nextList.length > 0
+          saveMyApplicationList(this.list)
+
+          const activeCode = this.resolvePreferredReferenceTypeNo(this.list)
+          if (activeCode) {
+            saveActiveApplicationCode(activeCode)
+          }
+        })
+        .catch((error) => {
+          if (!isReload) {
+            this.pageIndex = Math.max(1, this.pageIndex - 1)
+          }
+          uni.showToast({
+            title: (error && (error.message || error.msg)) || this.t('loadError'),
+            icon: 'none'
+          })
+        })
+        .finally(() => {
+          this.loading = false
+          this.loadingMore = false
+        })
+    },
+    changeStatus(value) {
+      if (this.status === value) {
+        return
+      }
+      this.status = value
+      this.reloadList()
+    },
+    getApplicationCode(item = {}) {
+      return item.detailCode || '--'
+    },
+    getApplicationKey(item = {}) {
+      return item.detailCode || item.formId || `${item.createTime || 'application'}-${item.phone || item.userName || 'unknown'}`
+    },
+    getApplicationTitle(item = {}) {
+      if (item.isViewingApplication) {
+        return this.t('viewingApplicationTitle')
+      }
+      return item.intendedRoomTypeName || this.t('stayApplicationTitle')
+    },
+    resolveReferenceTypeNo(item = {}) {
+      return item.detailCode || ''
+    },
+    canViewBill(item = {}) {
+      return !item.isViewingApplication && this.resolveReferenceTypeNo(item) && this.resolveStatusType(item.status) === 'pending'
+    },
+    resolvePreferredReferenceTypeNo(list = []) {
+      const sortedList = [...list]
+        .filter(item => !item.isViewingApplication && this.resolveReferenceTypeNo(item))
+        .sort((a, b) => new Date(b.createTime || 0).getTime() - new Date(a.createTime || 0).getTime())
+
+      if (!sortedList.length) {
+        return ''
+      }
+
+      const preferredItem = sortedList.find(item => Number(item.status) !== 99) || sortedList[0]
+      return this.resolveReferenceTypeNo(preferredItem)
+    },
+    goToBillPage(event) {
+      const dataset = event && event.currentTarget ? event.currentTarget.dataset || {} : {}
+      const referenceTypeNo = dataset.referenceTypeNo || dataset.referenceTypeNo === 0
+        ? String(dataset.referenceTypeNo)
+        : ''
+      if (!referenceTypeNo) {
+        uni.showToast({
+          title: this.t('missingBillCode'),
+          icon: 'none'
+        })
+        return
+      }
+
+      saveActiveApplicationCode(referenceTypeNo)
+      uni.navigateTo({
+        url: `/pkgService/utility_recharge/utility_recharge?referenceTypeNo=${encodeURIComponent(referenceTypeNo)}`
+      })
+    },
+    goToApplicationDetail(item = {}) {
+      const code = item.detailCode || ''
+      if (!code) {
+        uni.showToast({
+          title: this.t('missingApplicationCode'),
+          icon: 'none'
+        })
+        return
+      }
+      uni.navigateTo({
+        url: `/pkgService/application_detail/application_detail?code=${encodeURIComponent(code)}&payload=${encodeURIComponent(JSON.stringify(item))}`
+      })
+    },
+    goSelectRoom() {
+      uni.reLaunch({
+        url: '/pages/index/index?index=0&pageId=select-room'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.my-application-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+}
+
+.application-card,
+.empty-panel {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba($brand-primary, 0.05);
+}
+
+.empty-title,
+.card-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1A2233;
+}
+
+.empty-desc,
+.card-code,
+.info-label,
+.remark-label,
+.load-state {
+  color: #6A7A99;
+}
+
+.filter-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.filter-row {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 16rpx;
+  padding: 4rpx;
+}
+
+.toolbar-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24rpx;
+}
+
+.toolbar-summary {
+  flex: 1;
+  font-size: 24rpx;
+  color: #6A7A99;
+}
+
+.refresh-btn {
+  min-width: 188rpx;
+  height: 72rpx;
+  padding: 0 24rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999rpx;
+  background: #FFFFFF;
+  border: 1rpx solid rgba($brand-primary, 0.18);
+  color: $brand-primary;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.06);
+}
+
+.refresh-btn--loading {
+  opacity: 0.88;
+}
+
+.filter-chip {
+  flex-shrink: 0;
+  padding: 14rpx 28rpx;
+  border-radius: 999rpx;
+  background: #FFFFFF;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  color: #6A7A99;
+  font-size: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+  transition: all 0.2s;
+}
+
+.filter-chip--active {
+  background: #FFFFFF;
+  border-color: $brand-primary;
+  color: $brand-primary;
+  font-weight: bold;
+  box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.1);
+}
+
+.card-code {
+  font-size: 22rpx;
+}
+
+.status-badge {
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.status-pending {
+  background: rgba(245, 158, 11, 0.12);
+  color: #B45309;
+}
+
+.status-approved {
+  background: rgba($brand-primary, 0.12);
+  color: $brand-primary;
+}
+
+.status-rejected {
+  background: rgba(239, 68, 68, 0.12);
+  color: #B91C1C;
+}
+
+.status-finished {
+  background: rgba(100, 116, 139, 0.12);
+  color: #475569;
+}
+
+.info-row {
+  padding: 16rpx 0;
+  border-bottom: 1px dashed rgba($brand-primary, 0.15);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-value {
+  max-width: 62%;
+  text-align: right;
+  color: #1A2233;
+  font-weight: 500;
+}
+
+.remark-panel {
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: rgba($brand-primary, 0.02);
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+
+.remark-text {
+  color: #1A2233;
+  line-height: 1.6;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.card-action-btn {
+  min-width: 220rpx;
+  height: 84rpx;
+  padding: 0 28rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 18rpx;
+  font-size: 26rpx;
+}
+
+.card-action-btn--ghost {
+  background: #ffffff;
+  color: $brand-primary;
+  border: 1rpx solid rgba($brand-primary, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+}
+
+.action-btn {
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999rpx;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #FFFFFF;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+}
+
+.load-state {
+  text-align: center;
+  font-size: 24rpx;
+  padding: 12rpx 0 24rpx;
+  color: #6A7A99;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 隐藏 scroll-view 滚动条 */
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+</style>
diff --git a/pkgService/my_contract/my_contract.vue b/pkgService/my_contract/my_contract.vue
new file mode 100644
index 0000000..d65f25a
--- /dev/null
+++ b/pkgService/my_contract/my_contract.vue
@@ -0,0 +1,753 @@
+<template>
+  <view class="my-contract-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="page-main" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
+      <view class="overview-panel">
+        <view class="overview-header">
+          <view>
+            <view class="overview-title">{{ t('overviewTitle') }}</view>
+            <view class="overview-subtitle">{{ t('overviewSubtitle') }}</view>
+          </view>
+          <view class="overview-badge">
+            <text class="tn-icon-edit-form"></text>
+            <text>{{ summaryStats.total }}</text>
+          </view>
+        </view>
+        <view class="overview-metrics">
+          <view class="metric-item">
+            <view class="metric-label">{{ t('pendingMetricLabel') }}</view>
+            <view class="metric-value">{{ summaryStats.pending }}</view>
+          </view>
+          <view class="metric-item is-primary">
+            <view class="metric-label">{{ t('displayMetricLabel') }}</view>
+            <view class="metric-value">{{ displayList.length }}</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="filter-row">
+        <view
+          v-for="item in tabs"
+          :key="item.value"
+          class="filter-chip"
+          :class="{ 'filter-chip--active': currentTab === item.value }"
+          @click="changeTab(item.value)"
+        >
+          {{ item.label }}
+        </view>
+      </view>
+
+      <view v-if="loading" class="empty-panel">
+        <view class="empty-title">{{ t('loadingTitle') }}</view>
+        <view class="empty-desc">{{ t('loadingDesc') }}</view>
+      </view>
+
+      <view v-else-if="displayList.length" class="list-wrapper">
+        <view
+          v-for="(item, index) in displayList"
+          :key="item.no || item.contractNo || item.orderNo || index"
+          class="contract-card"
+          :style="{ animationDelay: `${index * 0.08}s` }"
+        >
+          <view class="card-header">
+            <view class="card-header-left">
+              <view class="card-icon">
+                <text class="tn-icon-edit-write-fill"></text>
+              </view>
+              <view class="card-title-group">
+                <view class="card-title">{{ t('contractTitle') }}</view>
+                <view class="card-code">{{ item.no || item.contractNo || '--' }}</view>
+              </view>
+            </view>
+            <view :class="['status-badge', `status-${resolveStatusType(item.approvalStatus)}`]">
+              <view class="status-dot"></view>
+              <text>{{ getDisplayStatusText(item) }}</text>
+            </view>
+          </view>
+
+          <view class="meta-strip">
+            <view class="meta-chip">
+              <view class="meta-chip-label">{{ t('relatedOrderLabel') }}</view>
+              <view class="meta-chip-value">{{ item.orderNo || '--' }}</view>
+            </view>
+            <view class="meta-chip">
+              <view class="meta-chip-label">{{ t('signStatusLabel') }}</view>
+              <view class="meta-chip-value">{{ item.signImageUrl ? t('signed') : t('unsigned') }}</view>
+            </view>
+          </view>
+
+          <view class="detail-panel">
+            <view class="info-row">
+              <text class="info-label">{{ t('contractPeriodLabel') }}</text>
+              <text class="info-value">{{ formatDateRange(item.start, item.end) }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">{{ t('recordTipLabel') }}</text>
+              <text class="info-value">{{ getStatusTip(item) }}</text>
+            </view>
+            <view v-if="item.signImageUrl" class="sign-row">
+              <text class="info-label">{{ t('mySignatureLabel') }}</text>
+              <view class="sign-preview">
+                <image :src="item.signImageUrl" mode="aspectFit"></image>
+              </view>
+            </view>
+          </view>
+
+          <view class="card-footer">
+            <view
+              class="action-btn"
+              :class="{ 'action-btn--secondary': !shouldShowSignAction(item) }"
+              @click="handleContractAction(item)"
+            >
+              {{ resolveActionText(item) }}
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-else class="empty-panel">
+        <view class="empty-icon">
+          <text class="tn-icon-folder"></text>
+        </view>
+        <view class="empty-title">{{ t('emptyTitle') }}</view>
+        <view class="empty-desc">{{ t('emptyDesc') }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { addFilePrefix } from '@/utils/common.js'
+import { getSessionSnapshot } from '../../utils/app-state'
+import { syncLoginStayState } from '../../utils/session-sync'
+
+function normalizeContract(item = {}) {
+  return {
+    ...item,
+    signImageUrl: item.signImageUrl ? addFilePrefix(item.signImageUrl) : '',
+    contentImageUrl: item.contentImageUrl ? addFilePrefix(item.contentImageUrl) : ''
+  }
+}
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '我的合同',
+      overviewTitle: '合同概览',
+      overviewSubtitle: '查看住宿合同、签约状态与有效期限',
+      pendingMetricLabel: '待签约/审批',
+      displayMetricLabel: '当前展示',
+      loadingTitle: '合同记录加载中',
+      loadingDesc: '正在同步您的合同数据，请稍候。',
+      contractTitle: '住宿合同',
+      relatedOrderLabel: '关联订单',
+      signStatusLabel: '签署状态',
+      signed: '已签名',
+      unsigned: '待签名',
+      contractPeriodLabel: '合同期限',
+      recordTipLabel: '记录说明',
+      mySignatureLabel: '我的签名',
+      emptyTitle: '暂无对应的合同记录',
+      emptyDesc: '切换筛选条件，或等待系统生成新的合同数据。',
+      tabAll: '全部',
+      tabPending: '待签约',
+      statusRejected: '已拒绝',
+      statusPending: '待审批',
+      statusApproved: '已通过',
+      statusProcessing: '处理中',
+      dateRangeJoiner: ' 至 ',
+      tipApproved: '合同已生效，可查看签约结果。',
+      tipNeedSign: '待您完成签名后进入审批流程。',
+      tipPending: '已提交签约信息，等待审批结果。',
+      tipRejected: '合同未通过审批，请联系管理员处理。',
+      tipDefault: '请关注合同最新状态。',
+      actionSign: '去签约',
+      actionViewDetail: '查看详情'
+    },
+    en: {
+      navTitle: 'My Contracts',
+      overviewTitle: 'Contract Overview',
+      overviewSubtitle: 'Check stay contracts, signing status, and effective period',
+      pendingMetricLabel: 'Pending Sign / Review',
+      displayMetricLabel: 'Displayed',
+      loadingTitle: 'Loading contracts',
+      loadingDesc: 'Syncing your contract data. Please wait.',
+      contractTitle: 'Stay Contract',
+      relatedOrderLabel: 'Related Order',
+      signStatusLabel: 'Signing Status',
+      signed: 'Signed',
+      unsigned: 'Unsigned',
+      contractPeriodLabel: 'Contract Period',
+      recordTipLabel: 'Notes',
+      mySignatureLabel: 'My Signature',
+      emptyTitle: 'No contract record found',
+      emptyDesc: 'Switch filters or wait for new contract data to be generated.',
+      tabAll: 'All',
+      tabPending: 'Pending Sign',
+      statusRejected: 'Rejected',
+      statusPending: 'Pending Review',
+      statusApproved: 'Approved',
+      statusProcessing: 'Processing',
+      dateRangeJoiner: ' to ',
+      tipApproved: 'The contract is effective now. You can view the signing result.',
+      tipNeedSign: 'Please complete your signature to enter the review process.',
+      tipPending: 'Signing information has been submitted and is waiting for review.',
+      tipRejected: 'The contract did not pass review. Please contact the administrator.',
+      tipDefault: 'Please pay attention to the latest contract status.',
+      actionSign: 'Sign Now',
+      actionViewDetail: 'View Detail'
+    }
+  },
+  data() {
+    return {
+      currentTab: 'all',
+      loading: false,
+      pendingContracts: [],
+      effectiveContracts: [],
+      tabs: []
+    }
+  },
+  computed: {
+    displayList() {
+      if (this.currentTab === 'pending') {
+        return this.pendingContracts
+      }
+      return [...this.pendingContracts, ...this.effectiveContracts]
+    },
+    summaryStats() {
+      return {
+        total: this.pendingContracts.length + this.effectiveContracts.length,
+        pending: this.pendingContracts.length,
+        effective: this.effectiveContracts.length
+      }
+    },
+    language() {
+      return this.$getLanguage()
+    }
+  },
+  created() {
+    this.syncTabs()
+  },
+  onShow() {
+    this.refreshContracts()
+  },
+  watch: {
+    language() {
+      this.syncTabs()
+      this.refreshContracts()
+    }
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.my_contract.my_contract', key, params)
+    },
+    syncTabs() {
+      this.tabs = [
+        { label: this.t('tabAll'), value: 'all' },
+        { label: this.t('tabPending'), value: 'pending' }
+      ]
+    },
+    getStoreUser() {
+      return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
+    },
+    getStorePendingContracts() {
+      const list = this.$store && this.$store.state && this.$store.state.vuex_pending_contracts
+      return Array.isArray(list) ? list : []
+    },
+    getStoreEffectiveContracts() {
+      const list = this.$store && this.$store.state && this.$store.state.vuex_effective_contracts
+      return Array.isArray(list) ? list : []
+    },
+    isCurrentLogin() {
+      const storeUser = this.getStoreUser()
+      if (storeUser && Object.keys(storeUser).length) {
+        return true
+      }
+      return !!getSessionSnapshot().isLogin
+    },
+    applyContractState({
+      pendingContracts = [],
+      effectiveContracts = []
+    } = {}) {
+      this.pendingContracts = Array.isArray(pendingContracts)
+        ? pendingContracts.map(normalizeContract)
+        : []
+      this.effectiveContracts = Array.isArray(effectiveContracts)
+        ? effectiveContracts.map(normalizeContract)
+        : []
+    },
+    refreshContracts() {
+      if (!this.isCurrentLogin()) {
+        this.applyContractState()
+        this.loading = false
+        return Promise.resolve()
+      }
+
+      this.loading = true
+      return syncLoginStayState({ force: true })
+        .then((result = {}) => {
+          this.applyContractState({
+            pendingContracts: result.pendingContracts,
+            effectiveContracts: result.effectiveContracts
+          })
+        })
+        .catch((error) => {
+          console.error('refresh contracts failed', error)
+          const storePendingContracts = this.getStorePendingContracts()
+          const storeEffectiveContracts = this.getStoreEffectiveContracts()
+          const session = getSessionSnapshot()
+          this.applyContractState({
+            pendingContracts: storePendingContracts.length ? storePendingContracts : session.pendingContracts,
+            effectiveContracts: storeEffectiveContracts.length ? storeEffectiveContracts : session.effectiveContracts
+          })
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    changeTab(value) {
+      if (this.currentTab === value) {
+        return
+      }
+      this.currentTab = value
+    },
+    getStatusText(status) {
+      const map = {
+        '-1': this.t('statusRejected'),
+        '0': this.t('statusPending'),
+        '1': this.t('statusApproved')
+      }
+      return map[String(status)] || this.t('statusProcessing')
+    },
+    getDisplayStatusText(item = {}) {
+      if (this.language !== 'en' && item.approvalStatusDesc) {
+        return item.approvalStatusDesc
+      }
+      return this.getStatusText(item.approvalStatus)
+    },
+    resolveStatusType(status) {
+      if (Number(status) === 1) return 'approved'
+      if (Number(status) === -1) return 'rejected'
+      return 'pending'
+    },
+    formatDate(value) {
+      return value ? String(value).slice(0, 10) : '--'
+    },
+    formatDateRange(start, end) {
+      if (!start && !end) {
+        return '--'
+      }
+      return `${this.formatDate(start)}${this.t('dateRangeJoiner')}${this.formatDate(end)}`
+    },
+    getStatusTip(item = {}) {
+      if (Number(item.approvalStatus) === 1) {
+        return this.t('tipApproved')
+      }
+      if (Number(item.approvalStatus) === 0 && !item.signImageUrl) {
+        return this.t('tipNeedSign')
+      }
+      if (Number(item.approvalStatus) === 0) {
+        return this.t('tipPending')
+      }
+      if (Number(item.approvalStatus) === -1) {
+        return this.t('tipRejected')
+      }
+      return this.t('tipDefault')
+    },
+    resolveActionText(item = {}) {
+      if (this.shouldShowSignAction(item)) {
+        return this.t('actionSign')
+      }
+      return this.t('actionViewDetail')
+    },
+    shouldShowSignAction(item = {}) {
+      return Number(item.approvalStatus) === 0 && !item.signImageUrl
+    },
+    handleContractAction(item = {}) {
+      const contractNo = encodeURIComponent(item.no || item.contractNo || '')
+      const orderNo = encodeURIComponent(item.orderNo || '')
+      const contentImageUrl = encodeURIComponent(item.contentImageUrl || '')
+
+      if (Number(item.approvalStatus) === 0 && !item.signImageUrl) {
+        uni.navigateTo({
+          url: `/pkgService/contract_sign/contract_sign?no=${contractNo}&orderNo=${orderNo}`
+        })
+        return
+      }
+
+      uni.navigateTo({
+        url: `/pkgService/contract_detail/contract_detail?no=${contractNo}&orderNo=${orderNo}&contentImageUrl=${contentImageUrl}`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.my-contract-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #f0f6ff 0%, #f8faff 100%);
+}
+
+.page-main {
+  padding: 0 24rpx calc(40rpx + env(safe-area-inset-bottom));
+}
+
+.overview-panel,
+.empty-panel,
+.contract-card {
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba($brand-primary, 0.08);
+  box-shadow: 0 16rpx 42rpx rgba(28, 53, 90, 0.08);
+}
+
+.overview-panel {
+  padding: 28rpx;
+  border-radius: 28rpx;
+}
+
+.overview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 22rpx;
+}
+
+.overview-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #1f2d3d;
+}
+
+.overview-subtitle {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #7c8da0;
+}
+
+.overview-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 10rpx 20rpx;
+  border-radius: 999rpx;
+  color: $brand-primary;
+  font-size: 24rpx;
+  font-weight: 700;
+  background: rgba($brand-primary, 0.1);
+}
+
+.overview-metrics {
+  display: flex;
+  gap: 18rpx;
+}
+
+.metric-item {
+  flex: 1;
+  padding: 20rpx 16rpx;
+  border-radius: 20rpx;
+  background: #f7fafd;
+  text-align: center;
+}
+
+.metric-item.is-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.14) 0%, rgba($brand-primary, 0.05) 100%);
+}
+
+.metric-label {
+  font-size: 22rpx;
+  color: #7c8da0;
+}
+
+.metric-value {
+  margin-top: 10rpx;
+  font-size: 40rpx;
+  line-height: 1;
+  font-weight: 700;
+  color: #203248;
+}
+
+.filter-row {
+  display: flex;
+  gap: 16rpx;
+  margin: 24rpx 0;
+}
+
+.filter-chip {
+  padding: 14rpx 28rpx;
+  border-radius: 999rpx;
+  background: #ffffff;
+  border: 1px solid rgba($brand-primary, 0.14);
+  color: #6a7a99;
+  font-size: 24rpx;
+  box-shadow: 0 6rpx 14rpx rgba($brand-primary, 0.04);
+}
+
+.filter-chip--active {
+  color: $brand-primary;
+  border-color: rgba($brand-primary, 0.24);
+  background: rgba($brand-primary, 0.08);
+  font-weight: 700;
+}
+
+.list-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.contract-card {
+  padding: 26rpx;
+  border-radius: 30rpx;
+  animation: slide-up 0.45s ease both;
+}
+
+.card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18rpx;
+}
+
+.card-header-left {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.card-icon {
+  width: 64rpx;
+  height: 64rpx;
+  margin-right: 16rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $brand-primary;
+  font-size: 32rpx;
+  background: rgba($brand-primary, 0.1);
+}
+
+.card-title-group {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1f2d3d;
+}
+
+.card-code {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #8a99a8;
+  word-break: break-all;
+}
+
+.status-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 8rpx 18rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.status-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.status-pending {
+  color: #c98512;
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(245, 158, 11, 0.16);
+}
+
+.status-approved {
+  color: $brand-primary;
+  background: rgba($brand-primary, 0.1);
+  border-color: rgba($brand-primary, 0.16);
+}
+
+.status-rejected {
+  color: #cf3c3c;
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.14);
+}
+
+.meta-strip {
+  display: flex;
+  gap: 18rpx;
+  margin-top: 22rpx;
+}
+
+.meta-chip {
+  flex: 1;
+  min-width: 0;
+  padding: 18rpx 20rpx;
+  border-radius: 20rpx;
+  background: linear-gradient(180deg, #f9fbfd 0%, #f2f6fa 100%);
+  border: 1px solid rgba($brand-primary, 0.08);
+}
+
+.meta-chip-label {
+  font-size: 20rpx;
+  color: #91a0ae;
+}
+
+.meta-chip-value {
+  margin-top: 10rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #243447;
+  word-break: break-all;
+}
+
+.detail-panel {
+  margin-top: 20rpx;
+  padding: 22rpx;
+  border-radius: 24rpx;
+  background: #f8fbfe;
+  border: 1px solid rgba($brand-primary, 0.08);
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24rpx;
+  font-size: 24rpx;
+  line-height: 1.7;
+}
+
+.info-row + .info-row {
+  margin-top: 12rpx;
+}
+
+.info-label {
+  flex-shrink: 0;
+  width: 116rpx;
+  color: #7c8da0;
+}
+
+.info-value {
+  flex: 1;
+  text-align: right;
+  color: #233244;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.sign-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1px dashed rgba($brand-primary, 0.14);
+}
+
+.sign-preview {
+  width: 150rpx;
+  height: 64rpx;
+  padding: 4rpx 8rpx;
+  border-radius: 12rpx;
+  background: #ffffff;
+  box-shadow: inset 0 0 0 1px rgba($brand-primary, 0.08);
+}
+
+.sign-preview image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 22rpx;
+}
+
+.action-btn {
+  min-width: 216rpx;
+  height: 76rpx;
+  padding: 0 28rpx;
+  border-radius: 999rpx;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  font-weight: 700;
+  transition: all 0.3s ease;
+  color: #ffffff;
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.2);
+}
+
+.action-btn:active {
+  transform: scale(0.96);
+  box-shadow: 0 4rpx 10rpx rgba($brand-primary, 0.15);
+}
+
+.action-btn--secondary {
+  color: #35506f;
+  background: #f4f7fa;
+  box-shadow: none;
+}
+
+.empty-panel {
+  margin-top: 24rpx;
+  padding: 56rpx 32rpx;
+  border-radius: 30rpx;
+  text-align: center;
+}
+
+.empty-icon {
+  width: 132rpx;
+  height: 132rpx;
+  margin: 0 auto 22rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $brand-primary;
+  font-size: 66rpx;
+  background: rgba($brand-primary, 0.08);
+}
+
+.empty-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #233244;
+}
+
+.empty-desc {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  line-height: 1.7;
+  color: #8a99a8;
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(32rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/pkgService/service_stub/service_stub.vue b/pkgService/service_stub/service_stub.vue
new file mode 100644
index 0000000..9f6fbb8
--- /dev/null
+++ b/pkgService/service_stub/service_stub.vue
@@ -0,0 +1,382 @@
+<template>
+  <view class="service-stub-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ resolvedPageTitle }}</view>
+    </tn-nav-bar>
+
+    <view class="page-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
+      
+      <!-- 门锁授权 Mockup -->
+      <view v-if="pageKey === 'lock'">
+        <view class="hero-card tn-flex tn-flex-direction-column tn-flex-col-center">
+          <view class="tn-bg-gray--light tn-padding-xl tn-border-radius-circle tn-margin-bottom">
+            <text class="tn-icon-lock tn-color-gray" style="font-size: 80rpx;"></text>
+          </view>
+          <view class="hero-title tn-text-bold">{{ t('lockNoAccessTitle') }}</view>
+          <view class="hero-desc tn-margin-top-sm tn-text-center">{{ t('lockNoAccessDesc') }}</view>
+          <view class="tn-flex tn-margin-top-xl tn-width-full tn-flex-row-between">
+             <view class="btn-light tn-flex-1 tn-margin-right-sm tn-flex tn-flex-col-center tn-flex-row-center tn-padding-sm" style="border-radius: 12rpx; opacity: 0.6;">
+               <text class="tn-icon-key tn-margin-right-xs"></text> {{ t('tempPassword') }}
+             </view>
+             <view class="btn-primary tn-flex-1 tn-margin-left-sm tn-flex tn-flex-col-center tn-flex-row-center tn-padding-sm" style="border-radius: 12rpx; opacity: 0.6;">
+               <text class="tn-icon-unlock tn-margin-right-xs"></text> {{ t('oneTapUnlock') }}
+             </view>
+          </view>
+        </view>
+
+        <view class="record-card tn-margin-top-lg">
+          <view class="block-title">{{ t('authRecordTitle') }}</view>
+          <view class="tn-margin-top tn-flex tn-flex-row-center tn-padding-xl">
+             <tn-empty icon="tn-icon-empty-data" :text="t('lockEmptyRecord')"></tn-empty>
+          </view>
+        </view>
+      </view>
+
+      <!-- 积分管理 Mockup -->
+      <view v-else-if="pageKey === 'points'">
+        <view class="hero-card" style="background: linear-gradient(135deg, #FFB703 0%, #FF8A00 100%); color: #fff; border: none;">
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="tn-text-md">{{ t('pointsAvailable') }}</view>
+            <view class="tn-text-sm" style="background: rgba(255,255,255,0.2); padding: 4rpx 16rpx; border-radius: 100rpx;">{{ t('redeemRules') }}</view>
+          </view>
+          <view class="tn-margin-top-lg tn-text-bold" style="font-size: 80rpx;">--</view>
+          <view class="tn-margin-top tn-flex tn-flex-row-between">
+            <view class="tn-flex tn-flex-col-center">
+              <text class="tn-icon-calendar tn-margin-right-xs"></text> {{ t('dailyPoints') }}
+            </view>
+            <view class="tn-flex tn-flex-col-center" style="opacity: 0.8;">
+              {{ t('goCheckIn') }} <text class="tn-icon-right tn-margin-left-xs"></text>
+            </view>
+          </view>
+        </view>
+        
+        <view class="tn-flex tn-flex-row-between tn-margin-top-lg">
+          <view class="btn-light tn-flex-1 tn-margin-right-sm tn-flex tn-flex-direction-column tn-flex-col-center tn-padding-lg" style="border-radius: 20rpx;">
+            <text class="tn-icon-shop tn-color-orange tn-margin-bottom-sm" style="font-size: 60rpx;"></text>
+            <text class="tn-text-bold tn-color-black">{{ t('pointsMall') }}</text>
+            <text class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ t('pointsMallDesc') }}</text>
+          </view>
+          <view class="btn-light tn-flex-1 tn-margin-left-sm tn-flex tn-flex-direction-column tn-flex-col-center tn-padding-lg" style="border-radius: 20rpx;">
+            <text class="tn-icon-coupon tn-color-purplered tn-margin-bottom-sm" style="font-size: 60rpx;"></text>
+            <text class="tn-text-bold tn-color-black">{{ t('coupon') }}</text>
+            <text class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ t('couponDesc') }}</text>
+          </view>
+        </view>
+
+        <view class="record-card tn-margin-top-lg">
+          <view class="block-title">{{ t('pointsRecordTitle') }}</view>
+          <view class="tn-margin-top tn-flex tn-flex-row-center tn-padding-xl">
+             <tn-empty icon="tn-icon-empty-data" :text="t('pointsEmpty')"></tn-empty>
+          </view>
+        </view>
+      </view>
+
+      <!-- 一码通管理 Mockup -->
+      <view v-else-if="pageKey === 'code'">
+        <view class="hero-card tn-flex tn-flex-direction-column tn-flex-col-center">
+           <view class="tn-text-md tn-color-black tn-text-bold">{{ t('accessCodeTitle') }}</view>
+           <view class="tn-text-xs tn-color-gray tn-margin-top-xs">{{ t('accessCodeDesc') }}</view>
+           
+           <view class="qr-code-box tn-margin-top-xl tn-margin-bottom-lg tn-flex tn-flex-col-center tn-flex-row-center">
+              <view class="qr-placeholder tn-flex tn-flex-col-center tn-flex-row-center">
+                 <text class="tn-icon-qr-code tn-color-gray" style="font-size: 200rpx; opacity: 0.2;"></text>
+              </view>
+              <view class="qr-mask tn-flex tn-flex-col-center tn-flex-row-center">
+                 <text class="tn-color-white tn-text-bold tn-text-lg">{{ t('noAccessPermission') }}</text>
+              </view>
+           </view>
+           
+           <view class="tn-text-xs tn-color-gray tn-text-center tn-margin-bottom">{{ t('accessAssignDesc') }}</view>
+        </view>
+        
+        <view class="record-card tn-margin-top-lg">
+          <view class="tn-flex tn-flex-row-between tn-flex-col-center">
+            <view class="block-title">{{ t('visitorAccessTitle') }}</view>
+            <view class="tn-color-gray tn-text-sm">{{ t('visitorAccessAction') }} <text class="tn-icon-right"></text></view>
+          </view>
+          <view class="tn-margin-top tn-flex tn-flex-row-center tn-padding-xl">
+             <tn-empty icon="tn-icon-empty-data" :text="t('visitorEmpty')"></tn-empty>
+          </view>
+        </view>
+      </view>
+
+      <!-- 默认通用占位 -->
+      <view v-else>
+        <view class="hero-card">
+          <view class="hero-badge">{{ t('heroBadge') }}</view>
+          <view class="hero-title tn-margin-top">{{ resolvedPageTitle || t('comingSoonTitle') }}</view>
+          <view class="hero-desc tn-margin-top-sm">{{ resolvedPageDesc || resolvedDefaultDesc }}</view>
+        </view>
+
+        <view class="record-card tn-margin-top-xl">
+          <view class="block-title">{{ t('currentStatusTitle') }}</view>
+          <view class="empty-text tn-margin-top">
+            {{ t('currentStatusDesc') }}
+          </view>
+          <view class="tip-card tn-margin-top-lg">
+            <view class="tip-title">{{ t('noteTitle') }}</view>
+            <view class="tip-desc tn-margin-top-xs">{{ t('noteDesc') }}</view>
+          </view>
+          <view class="submit-btn btn-primary tn-margin-top-xl" @click="goBack">
+            <text class="tn-text-bold">{{ t('backPrev') }}</text>
+          </view>
+          <view class="submit-btn btn-light tn-margin-top" @click="goHome">
+            <text class="tn-text-bold">{{ t('backHome') }}</text>
+          </view>
+        </view>
+      </view>
+
+    </view>
+  </view>
+</template>
+
+<script>
+function safeDecodeText(value, fallback = '') {
+  if (value === undefined || value === null || value === '') {
+    return fallback
+  }
+  try {
+    return decodeURIComponent(String(value))
+  } catch (error) {
+    return String(value)
+  }
+}
+
+export default {
+  i18n: {
+    zh: {
+      defaultPageTitle: '业务办理',
+      defaultPageDesc: '该能力正在完善中，开放后会同步到个人中心的对应入口。',
+      lockNoAccessTitle: '暂无门锁权限',
+      lockNoAccessDesc: '您当前暂未分配智能门锁，或门锁暂未联网。\n入住后即可使用一键开门与临时密码下发功能。',
+      tempPassword: '临时密码',
+      oneTapUnlock: '一键开锁',
+      authRecordTitle: '授权记录',
+      lockEmptyRecord: '暂无门锁操作记录',
+      pointsAvailable: '当前可用积分',
+      redeemRules: '兑换规则',
+      dailyPoints: '每日签到领积分',
+      goCheckIn: '去签到',
+      pointsMall: '积分商城',
+      pointsMallDesc: '超值好物兑换',
+      coupon: '优惠券',
+      couponDesc: '租金水电抵扣',
+      pointsRecordTitle: '积分明细',
+      pointsEmpty: '暂无积分明细',
+      accessCodeTitle: '我的通行二维码',
+      accessCodeDesc: '可用于社区大门、单元门及电梯通行',
+      noAccessPermission: '未获取通行权限',
+      accessAssignDesc: '请在完成入住签约并录入人脸/实名信息后\n系统将自动为您分配通行权限',
+      visitorAccessTitle: '访客通行',
+      visitorAccessAction: '临时访客授权',
+      visitorEmpty: '暂无访客通行记录',
+      heroBadge: '即将开放',
+      comingSoonTitle: '功能建设中',
+      currentStatusTitle: '当前状态',
+      currentStatusDesc: '该功能当前仍在建设中，暂未开放正式办理入口。你可以先返回上一页，或回到首页继续查看已开放功能。',
+      noteTitle: '说明',
+      noteDesc: '后续接入真实能力后，这里会展示正式的业务入口、状态数据和办理记录。',
+      backPrev: '返回上一页',
+      backHome: '返回首页'
+    },
+    en: {
+      defaultPageTitle: 'Service Center',
+      defaultPageDesc: 'This capability is being improved and will appear in the related personal center entry when available.',
+      lockNoAccessTitle: 'No door lock access',
+      lockNoAccessDesc: 'No smart lock is assigned yet, or the lock is currently offline.\nAfter check-in, one-tap unlock and temporary password features will be available.',
+      tempPassword: 'Temporary Code',
+      oneTapUnlock: 'Unlock Now',
+      authRecordTitle: 'Access Records',
+      lockEmptyRecord: 'No door lock records',
+      pointsAvailable: 'Available Points',
+      redeemRules: 'Redeem Rules',
+      dailyPoints: 'Daily check-in rewards',
+      goCheckIn: 'Check In',
+      pointsMall: 'Points Mall',
+      pointsMallDesc: 'Redeem for selected items',
+      coupon: 'Coupons',
+      couponDesc: 'Offset rent and utilities',
+      pointsRecordTitle: 'Points History',
+      pointsEmpty: 'No points record',
+      accessCodeTitle: 'My Access QR Code',
+      accessCodeDesc: 'Use it for community gates, unit doors, and elevators',
+      noAccessPermission: 'No access permission',
+      accessAssignDesc: 'After completing check-in signing and face / identity enrollment,\nthe system will automatically assign your access permission.',
+      visitorAccessTitle: 'Visitor Access',
+      visitorAccessAction: 'Temporary visitor authorization',
+      visitorEmpty: 'No visitor access records',
+      heroBadge: 'Coming Soon',
+      comingSoonTitle: 'Coming Soon',
+      currentStatusTitle: 'Current Status',
+      currentStatusDesc: 'This capability is still under development and is not yet officially available. You can go back or return to the home page to browse available features.',
+      noteTitle: 'Notes',
+      noteDesc: 'After the real capability is connected, this page will display the formal service entry, status data, and processing records.',
+      backPrev: 'Go Back',
+      backHome: 'Back Home'
+    }
+  },
+  data() {
+    return {
+      pageTitleZh: '',
+      pageTitleEn: '',
+      pageDescZh: '',
+      pageDescEn: '',
+      pageKey: '',
+      rawPageTitle: '',
+      rawPageDesc: ''
+    }
+  },
+  computed: {
+    resolvedPageTitle() {
+      if (this.$getLanguage() === 'en') {
+        return this.pageTitleEn || this.pageTitleZh || this.rawPageTitle || this.t('defaultPageTitle')
+      }
+      return this.pageTitleZh || this.pageTitleEn || this.rawPageTitle || this.t('defaultPageTitle')
+    },
+    resolvedPageDesc() {
+      if (this.$getLanguage() === 'en') {
+        return this.pageDescEn || this.pageDescZh || this.rawPageDesc || ''
+      }
+      return this.pageDescZh || this.pageDescEn || this.rawPageDesc || ''
+    },
+    resolvedDefaultDesc() {
+      return this.t('defaultPageDesc')
+    }
+  },
+  onLoad(options) {
+    this.pageTitleZh = safeDecodeText(options && (options.titleZh || options.title), '')
+    this.pageTitleEn = safeDecodeText(options && options.titleEn, '')
+    this.pageDescZh = safeDecodeText(options && (options.descZh || options.desc), '')
+    this.pageDescEn = safeDecodeText(options && options.descEn, '')
+    this.rawPageTitle = safeDecodeText(options && options.title, '')
+    this.rawPageDesc = safeDecodeText(options && options.desc, '')
+    this.pageKey = safeDecodeText(options && options.key, '')
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.service_stub.service_stub', key, params)
+    },
+    goBack() {
+      uni.navigateBack()
+    },
+    goHome() {
+      uni.reLaunch({
+        url: '/pages/index/index'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.service-stub-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+}
+
+.hero-card,
+.record-card {
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10rpx 18rpx;
+  border-radius: 999rpx;
+  background: rgba($brand-primary, 0.1);
+  color: $brand-primary;
+  font-size: 22rpx;
+  font-weight: 600;
+}
+
+.hero-title,
+.block-title,
+.record-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #1A2233;
+}
+
+.hero-desc,
+.empty-text {
+  color: #6A7A99;
+  line-height: 1.8;
+}
+
+.tip-card {
+  padding: 24rpx;
+  border-radius: 20rpx;
+  background: rgba($brand-primary, 0.02);
+  border: 1rpx solid rgba($brand-primary, 0.1);
+}
+
+.tip-title {
+  font-size: 26rpx;
+  font-weight: bold;
+  color: #1A2233;
+}
+
+.tip-desc {
+  font-size: 24rpx;
+  color: #6A7A99;
+  line-height: 1.6;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 96rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.submit-btn:active {
+  transform: scale(0.98);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #ffffff;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+}
+
+.btn-light {
+  background: #ffffff;
+  color: $brand-primary;
+  border: 1rpx solid rgba($brand-primary, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+}
+
+.qr-code-box {
+  position: relative;
+  width: 400rpx;
+  height: 400rpx;
+  border-radius: 32rpx;
+  background-color: #F8FAFF;
+  border: 1rpx dashed rgba($brand-primary, 0.2);
+  overflow: hidden;
+}
+
+.qr-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.qr-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+</style>
diff --git a/pkgService/smart_control/smart_control.vue b/pkgService/smart_control/smart_control.vue
new file mode 100644
index 0000000..428bf7b
--- /dev/null
+++ b/pkgService/smart_control/smart_control.vue
@@ -0,0 +1,715 @@
+<template>
+  <view class="smart-page">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent" fontColor="#ffffff">
+      <view class="tn-text-bold tn-text-xl">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="header-section" :style="{ paddingTop: (vuex_custom_bar_height + 20) + 'px' }">
+      <view class="room-info">
+        <text class="room-name">{{ displayRoomName }}</text>
+        <view class="room-badge">Smart Home</view>
+      </view>
+      <view class="env-status">{{ summaryText }}</view>
+    </view>
+
+    <view class="toolbar">
+      <view class="toolbar-tip">{{ t('toolbarTip') }}</view>
+      <view class="toolbar-action" @click="reloadDevices">
+        <text class="tn-icon-refresh" :class="{'spin-anim': isLoading}" style="margin-right: 8rpx;"></text>
+        <text>{{ isLoading ? t('loadingShort') : t('refreshStatus') }}</text>
+      </view>
+    </view>
+
+    <!-- Feedback States -->
+    <view v-if="isLoading && !devices.length" class="empty-state">
+      <view class="loading-ring"></view>
+      <view class="empty-title">{{ t('loadingTitle') }}</view>
+      <view class="empty-desc">{{ t('loadingDesc') }}</view>
+    </view>
+
+    <view v-else-if="loadError && !devices.length" class="empty-state error-state">
+      <text class="tn-icon-warning empty-icon"></text>
+      <view class="empty-title">{{ t('loadFailedTitle') }}</view>
+      <view class="empty-desc">{{ loadError }}</view>
+      <view class="retry-btn" @click="reloadDevices">{{ t('retry') }}</view>
+    </view>
+
+    <view v-else-if="!devices.length" class="empty-state">
+      <text class="tn-icon-empty empty-icon"></text>
+      <view class="empty-title">{{ t('emptyTitle') }}</view>
+      <view class="empty-desc">{{ t('emptyDesc') }}</view>
+    </view>
+
+    <scroll-view v-else scroll-y class="device-scroll">
+      <view class="device-grid">
+        <view 
+          class="device-card" 
+          :class="{'is-active': item.active}" 
+          v-for="item in devices" 
+          :key="item.renderKey" 
+          @click="goToDetail(item)"
+        >
+          <view class="card-glow" v-if="item.active"></view>
+          <view class="card-top">
+            <view class="icon-wrapper" :class="{'is-active': item.active}" @click.stop="toggleDevicePower(item)">
+              <text :class="[item.iconClass || 'tn-icon-my-computer']"></text>
+            </view>
+            <view class="status-dot" :class="{ 'is-on': item.active }"></view>
+          </view>
+          <view class="card-bottom">
+            <view class="device-name">{{ item.deviceName }}</view>
+            <view class="device-state" :class="{'is-active': item.active}">{{ item.stateText || (item.active ? t('deviceRunning') : t('deviceOff')) }}</view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { gatewayRoomDeviceList, gatewayExecuteDeviceCommand } from '../../api/index.js'
+import { getSessionSnapshot } from '../../utils/app-state'
+import { 
+  normalizeSmartDeviceList, 
+  getDeviceFunctions, 
+  getControlTypeCategory, 
+  buildCommandSchemaFields, 
+  patchDeviceStatus 
+} from '../../utils/smart-device'
+
+const DEFAULT_BRAND_ID = 'Tuya'
+
+function pickFirstFilledValue(...values) {
+  for (let index = 0; index < values.length; index += 1) {
+    const value = values[index]
+    if (value === undefined || value === null) {
+      continue
+    }
+    const text = String(value).trim()
+    if (text) {
+      return text
+    }
+  }
+  return ''
+}
+
+function buildDeviceRenderKey(item = {}, index = 0) {
+  return pickFirstFilledValue(
+    item.deviceId,
+    item.platformDeviceId,
+    item.deviceNo,
+    `device-${index}`
+  )
+}
+
+function buildDeviceCardModel(item = {}, index = 0) {
+  return {
+    ...item,
+    renderKey: buildDeviceRenderKey(item, index)
+  }
+}
+
+function resolveRefreshIntervalMs(value, fallback = 1000) {
+  const seconds = Number(value)
+  if (!Number.isFinite(seconds) || seconds <= 0) {
+    return fallback
+  }
+  return Math.round(seconds * 1000)
+}
+
+function resolveDeviceListPollingInterval(deviceList = [], fallback = 1000) {
+  const intervalList = (Array.isArray(deviceList) ? deviceList : [])
+    .map(item => resolveRefreshIntervalMs(item && item.refreshInterval, 0))
+    .filter(value => value > 0)
+
+  return intervalList.length ? Math.min(...intervalList) : fallback
+}
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '全屋智能',
+      toolbarTip: '点击设备进入详情并下发控制指令',
+      loadingShort: '加载中',
+      refreshStatus: '刷新状态',
+      loadingTitle: '正在连接设备',
+      loadingDesc: '正在查询当前房间的可控设备...',
+      loadFailedTitle: '设备加载失败',
+      retry: '重新加载',
+      emptyTitle: '暂无可控设备',
+      emptyDesc: '当前房间未绑定智能设备',
+      deviceSummary: '共 {count} 台设备，可进入详情页控制',
+      deviceRunning: '运行中',
+      deviceOff: '已关闭',
+      currentRoom: '当前房间',
+      missingRoomCode: '缺少房间编码',
+      syncingStatus: '正在同步设备状态',
+      unsupportedQuickControl: '设备暂不支持快捷控制',
+      unsupportedSwitch: '该设备不支持快捷开关',
+      missingFunctionCode: '功能编码缺失',
+      sending: '发送中...',
+      enabled: '已开启',
+      disabled: '已关闭',
+      commandFailed: '指令下发失败',
+      requestFailed: '设备列表请求失败'
+    },
+    en: {
+      navTitle: 'Smart Home',
+      toolbarTip: 'Tap a device to open details and send control commands',
+      loadingShort: 'Loading',
+      refreshStatus: 'Refresh Status',
+      loadingTitle: 'Connecting devices',
+      loadingDesc: 'Checking controllable devices in the current room...',
+      loadFailedTitle: 'Failed to load devices',
+      retry: 'Retry',
+      emptyTitle: 'No controllable devices',
+      emptyDesc: 'No smart devices are bound to this room',
+      deviceSummary: '{count} devices available. Tap to control in detail view',
+      deviceRunning: 'Running',
+      deviceOff: 'Off',
+      currentRoom: 'Current Room',
+      missingRoomCode: 'Missing room code',
+      syncingStatus: 'Syncing device status',
+      unsupportedQuickControl: 'Quick control is not supported for this device',
+      unsupportedSwitch: 'This device does not support quick switching',
+      missingFunctionCode: 'Missing function code',
+      sending: 'Sending...',
+      enabled: 'Enabled',
+      disabled: 'Disabled',
+      commandFailed: 'Failed to send command',
+      requestFailed: 'Failed to request device list'
+    }
+  },
+  data() {
+    return {
+      brandId: DEFAULT_BRAND_ID,
+      roomCode: '',
+      roomName: '',
+      devices: [],
+      isLoading: false,
+      isSyncing: false,
+      isSubmitting: false,
+      hasLoadedOnce: false,
+      loadError: '',
+      pollingEnabled: false,
+      pollingTimer: null,
+      pendingReloadPromise: null,
+      pollingIntervalMs: 1000
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    displayRoomName() {
+      return this.roomName || this.roomCode || this.t('currentRoom')
+    },
+    summaryText() {
+      if (!this.roomCode) {
+        return this.t('missingRoomCode')
+      }
+      if (this.isLoading) {
+        return this.t('syncingStatus')
+      }
+      if (this.devices.length) {
+        return this.t('deviceSummary', { count: this.devices.length })
+      }
+      return this.t('emptyTitle')
+    }
+  },
+  onLoad(options) {
+    this.resolvePageContext(options || {})
+  },
+  onShow() {
+    this.startPolling(true)
+  },
+  onPullDownRefresh() {
+    this.reloadDevices({
+      stopRefresh: true,
+      forceLoading: !this.devices.length
+    })
+  },
+  onHide() {
+    this.stopPolling()
+  },
+  onUnload() {
+    this.stopPolling()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.smart_control.smart_control', key, params)
+    },
+    resolvePageContext(options = {}) {
+      const session = getSessionSnapshot()
+      const roomData = (session && session.myRoomData) || {}
+
+      this.brandId = pickFirstFilledValue(
+        options.brandId,
+        roomData.brandId,
+        roomData.platform,
+        roomData.brand,
+        DEFAULT_BRAND_ID
+      )
+      this.roomCode = pickFirstFilledValue(
+        options.roomCode,
+        roomData.roomCode
+      )
+      this.roomName = pickFirstFilledValue(
+        options.roomName,
+        roomData.roomName,
+        roomData.roomLabel,
+        roomData.roomNo
+      )
+    },
+    clearPollingTimer() {
+      if (this.pollingTimer) {
+        clearTimeout(this.pollingTimer)
+        this.pollingTimer = null
+      }
+    },
+    startPolling(immediate = false) {
+      if (this.pollingEnabled) {
+        if (immediate) {
+          this.pollNext(true)
+        }
+        return
+      }
+
+      this.pollingEnabled = true
+      this.pollNext(immediate)
+    },
+    stopPolling() {
+      this.pollingEnabled = false
+      this.clearPollingTimer()
+      this.isSyncing = false
+    },
+    scheduleNextPoll(delay = this.pollingIntervalMs) {
+      if (!this.pollingEnabled) {
+        return
+      }
+
+      this.clearPollingTimer()
+      this.pollingTimer = setTimeout(() => {
+        this.pollNext(true)
+      }, delay)
+    },
+    pollNext(immediate = false) {
+      if (!this.pollingEnabled) {
+        return Promise.resolve()
+      }
+
+      const requestPromise = this.reloadDevices({
+        silent: this.hasLoadedOnce,
+        forceLoading: !this.hasLoadedOnce,
+        keepErrorDevices: true
+      })
+
+      return requestPromise.finally(() => {
+        if (!this.pollingEnabled) {
+          return
+        }
+        this.scheduleNextPoll(immediate ? this.pollingIntervalMs : 0)
+      })
+    },
+    reloadDevices(options = {}) {
+      const {
+        stopRefresh = false,
+        silent = false,
+        forceLoading = false,
+        keepErrorDevices = false
+      } = options
+
+      if (!this.roomCode) {
+        this.devices = []
+        this.loadError = this.t('missingRoomCode')
+        if (stopRefresh) {
+          uni.stopPullDownRefresh()
+        }
+        return Promise.resolve()
+      }
+
+      if (this.pendingReloadPromise) {
+        return this.pendingReloadPromise.finally(() => {
+          if (stopRefresh) {
+            uni.stopPullDownRefresh()
+          }
+        })
+      }
+
+      this.isLoading = forceLoading || (!this.hasLoadedOnce && !silent)
+      this.isSyncing = silent && this.hasLoadedOnce
+      if (!silent) {
+        this.loadError = ''
+      }
+
+      const requestPromise = gatewayRoomDeviceList(this.brandId, this.roomCode)
+        .then((response) => {
+          const deviceList = normalizeSmartDeviceList(response).map((item, index) => buildDeviceCardModel(item, index))
+          this.devices = deviceList
+          this.pollingIntervalMs = resolveDeviceListPollingInterval(deviceList)
+          this.hasLoadedOnce = true
+          if (!silent) {
+            this.loadError = ''
+          }
+          if (!this.roomName && deviceList.length) {
+            this.roomName = deviceList[0].roomName || this.roomName
+          }
+        })
+        .catch((error) => {
+          console.error('load smart devices failed', error)
+          if (!keepErrorDevices) {
+            this.devices = []
+          }
+          if (!silent) {
+            this.loadError = (error && (error.message || error.msg)) || this.t('requestFailed')
+          }
+        })
+        .finally(() => {
+          this.isLoading = false
+          this.isSyncing = false
+          this.pendingReloadPromise = null
+          if (stopRefresh) {
+            uni.stopPullDownRefresh()
+          }
+        })
+
+      this.pendingReloadPromise = requestPromise
+      return requestPromise
+    },
+    goToDetail(item) {
+      const payload = encodeURIComponent(JSON.stringify(item || {}))
+      uni.navigateTo({
+        url: `/pkgService/device_control/device_control?brandId=${encodeURIComponent(this.brandId)}&roomCode=${encodeURIComponent(this.roomCode)}&roomName=${encodeURIComponent(this.roomName)}&device=${payload}`
+      })
+    },
+    resolveCommandFieldName(func, candidates = [], fallback = 'command') {
+      if (!func || !func.commandSchema) return fallback
+      const schemaFields = buildCommandSchemaFields(func.commandSchema)
+      const fieldNames = schemaFields.map(field => String(field.name || '').trim()).filter(Boolean)
+
+      for (let i = 0; i < candidates.length; i++) {
+        if (fieldNames.includes(candidates[i])) return candidates[i]
+      }
+      return fieldNames[0] || fallback
+    },
+    toggleDevicePower(item) {
+      if (this.isSubmitting) return
+
+      const functions = getDeviceFunctions(item)
+      if (!functions || !functions.length) {
+        uni.showToast({ title: this.t('unsupportedQuickControl'), icon: 'none' })
+        return
+      }
+
+      // Find the first switch-like function
+      let targetFunc = functions.find(f => getControlTypeCategory(f.controlType) === 'switch')
+      if (!targetFunc) {
+        targetFunc = functions[0] // fallback to first function
+      }
+
+      const category = getControlTypeCategory(targetFunc.controlType)
+      if (category !== 'switch') {
+        uni.showToast({ title: this.t('unsupportedSwitch'), icon: 'none' })
+        return
+      }
+
+      const functionCode = String((targetFunc && targetFunc.functionCode) || '').trim()
+      if (!functionCode) {
+        uni.showToast({ title: this.t('missingFunctionCode'), icon: 'none' })
+        return
+      }
+
+      const schemaText = (typeof targetFunc.commandSchema === 'string' ? targetFunc.commandSchema : JSON.stringify(targetFunc.commandSchema || '')).toLowerCase()
+      const fieldName = this.resolveCommandFieldName(targetFunc, ['command', 'action', 'value'], 'command')
+      const hasSchemaForm = buildCommandSchemaFields(targetFunc.commandSchema).length > 0
+      
+      const enabled = !item.active
+      let commandPayload = {}
+      
+      if (!hasSchemaForm && schemaText.includes('on/off')) {
+        commandPayload = { command: enabled ? 'on' : 'off' }
+      } else {
+        commandPayload = { [fieldName]: enabled ? 'on' : 'off' }
+      }
+
+      this.isSubmitting = true
+      uni.showLoading({ title: this.t('sending') })
+
+      gatewayExecuteDeviceCommand(this.brandId, item.deviceNo, functionCode, commandPayload)
+        .then(() => {
+          const patchedDevice = patchDeviceStatus(item, commandPayload, targetFunc.controlType)
+          
+          // Update device in list
+          const index = this.devices.findIndex(d => d.deviceId === item.deviceId)
+          if (index !== -1) {
+            this.$set(this.devices, index, {
+              ...patchedDevice,
+              renderKey: this.devices[index].renderKey
+            })
+          }
+          uni.showToast({ title: enabled ? this.t('enabled') : this.t('disabled'), icon: 'success' })
+        })
+        .catch((error) => {
+          console.error('execute device command failed', error)
+          uni.showToast({ title: (error && (error.message || error.msg)) || this.t('commandFailed'), icon: 'none' })
+        })
+        .finally(() => {
+          this.isSubmitting = false
+          uni.hideLoading()
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes pulseGlow {
+  0% { opacity: 0.5; transform: scale(0.95); }
+  50% { opacity: 0.8; transform: scale(1.05); }
+  100% { opacity: 0.5; transform: scale(0.95); }
+}
+
+.spin-anim {
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+
+.smart-page {
+  min-height: 100vh;
+  background-color: #0F1015;
+  background-image: 
+    radial-gradient(circle at 80% 0%, rgba(70, 83, 255, 0.15) 0%, transparent 50%),
+    radial-gradient(circle at 20% 100%, rgba(70, 83, 255, 0.05) 0%, transparent 50%);
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+}
+
+.header-section {
+  padding: 40rpx 40rpx 20rpx;
+  position: relative;
+  z-index: 1;
+}
+
+.room-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.room-name {
+  font-size: 60rpx;
+  font-weight: 700;
+  letter-spacing: 2rpx;
+  background: linear-gradient(135deg, #ffffff 0%, #a5a5b0 100%);
+  -webkit-background-clip: text;
+  color: transparent;
+  margin-right: 20rpx;
+}
+
+.room-badge {
+  background: rgba(70, 83, 255, 0.2);
+  color: #7281ff;
+  font-size: 20rpx;
+  padding: 4rpx 16rpx;
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(70, 83, 255, 0.3);
+}
+
+.env-status {
+  font-size: 28rpx;
+  color: #888996;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 40rpx;
+  margin-bottom: 20rpx;
+}
+
+.toolbar-tip {
+  font-size: 24rpx;
+  color: #666775;
+}
+
+.toolbar-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx 24rpx;
+  border-radius: 30rpx;
+  background: rgba(255, 255, 255, 0.05);
+  font-size: 24rpx;
+  color: #e0e0e6;
+  border: 1rpx solid rgba(255, 255, 255, 0.08);
+  transition: all 0.2s;
+}
+.toolbar-action:active {
+  background: rgba(255, 255, 255, 0.1);
+  transform: scale(0.95);
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 40rpx;
+}
+.empty-icon {
+  font-size: 100rpx;
+  color: #444554;
+  margin-bottom: 30rpx;
+}
+.empty-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #e0e0e6;
+  margin-bottom: 16rpx;
+}
+.empty-desc {
+  font-size: 26rpx;
+  color: #666775;
+  text-align: center;
+}
+.retry-btn {
+  margin-top: 40rpx;
+  padding: 16rpx 48rpx;
+  border-radius: 40rpx;
+  background: #4653ff;
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: 500;
+  box-shadow: 0 8rpx 24rpx rgba(70, 83, 255, 0.3);
+}
+
+.loading-ring {
+  width: 80rpx;
+  height: 80rpx;
+  border: 6rpx solid rgba(255, 255, 255, 0.1);
+  border-top-color: #4653ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 30rpx;
+}
+
+.device-scroll {
+  flex: 1;
+  height: 0;
+}
+
+.device-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 30rpx;
+  padding: 10rpx 40rpx 60rpx;
+}
+
+.device-card {
+  position: relative;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 40rpx;
+  padding: 36rpx;
+  height: 280rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-sizing: border-box;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  overflow: hidden;
+}
+.device-card:active {
+  transform: scale(0.95);
+}
+
+.device-card.is-active {
+  background: rgba(70, 83, 255, 0.1);
+  border-color: rgba(70, 83, 255, 0.4);
+}
+
+.card-glow {
+  position: absolute;
+  top: -20%;
+  right: -20%;
+  width: 150rpx;
+  height: 150rpx;
+  background: rgba(70, 83, 255, 0.4);
+  filter: blur(40rpx);
+  border-radius: 50%;
+  animation: pulseGlow 4s infinite ease-in-out;
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  position: relative;
+  z-index: 2;
+}
+
+.icon-wrapper {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+.icon-wrapper text {
+  font-size: 44rpx;
+  color: #888996;
+}
+.icon-wrapper.is-active {
+  background: #4653ff;
+  box-shadow: 0 8rpx 20rpx rgba(70, 83, 255, 0.3);
+}
+.icon-wrapper.is-active text {
+  color: #ffffff;
+}
+
+.status-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  margin-top: 12rpx;
+  margin-right: 4rpx;
+}
+.status-dot.is-on {
+  background: #00D37A;
+  box-shadow: 0 0 12rpx rgba(0, 211, 122, 0.6);
+}
+
+.card-bottom {
+  position: relative;
+  z-index: 2;
+}
+
+.device-name {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 8rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.device-state {
+  font-size: 24rpx;
+  color: #666775;
+}
+.device-state.is-active {
+  color: #a3abff;
+}
+</style>
diff --git a/pkgService/submit_request/components/DateRangeSelector.vue b/pkgService/submit_request/components/DateRangeSelector.vue
new file mode 100644
index 0000000..f3a95f1
--- /dev/null
+++ b/pkgService/submit_request/components/DateRangeSelector.vue
@@ -0,0 +1,137 @@
+<template>
+  <view class="date-range-selector">
+    <view class="date-item">
+      <view class="date-label">{{ resolvedStartLabel }}</view>
+      <picker mode="date" @change="onStartChange">
+        <view class="date-input" :class="{ 'is-empty': !start }">
+          {{ start || resolvedStartPlaceholder }}
+        </view>
+      </picker>
+    </view>
+    <view class="date-divider">{{ t('dateDivider') }}</view>
+    <view class="date-item">
+      <view class="date-label">{{ resolvedEndLabel }}</view>
+      <picker mode="date" @change="onEndChange">
+        <view class="date-input" :class="{ 'is-empty': !end }">
+          {{ end || resolvedEndPlaceholder }}
+        </view>
+      </picker>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DateRangeSelector',
+  i18n: {
+    zh: {
+      startLabel: '预计入住',
+      endLabel: '预计离开',
+      startPlaceholder: '请选择入住日期',
+      endPlaceholder: '请选择离开日期',
+      dateDivider: '至'
+    },
+    en: {
+      startLabel: 'Expected Check-in',
+      endLabel: 'Expected Check-out',
+      startPlaceholder: 'Select check-in date',
+      endPlaceholder: 'Select check-out date',
+      dateDivider: 'to'
+    }
+  },
+  props: {
+    start: {
+      type: String,
+      default: ''
+    },
+    end: {
+      type: String,
+      default: ''
+    },
+    startLabel: {
+      type: String,
+      default: ''
+    },
+    endLabel: {
+      type: String,
+      default: ''
+    },
+    startPlaceholder: {
+      type: String,
+      default: ''
+    },
+    endPlaceholder: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    resolvedStartLabel() {
+      return this.startLabel || this.t('startLabel')
+    },
+    resolvedEndLabel() {
+      return this.endLabel || this.t('endLabel')
+    },
+    resolvedStartPlaceholder() {
+      return this.startPlaceholder || this.t('startPlaceholder')
+    },
+    resolvedEndPlaceholder() {
+      return this.endPlaceholder || this.t('endPlaceholder')
+    }
+  },
+  methods: {
+    t(key) {
+      return this.$tm('pkgService.submit_request.components.DateRangeSelector', key)
+    },
+    onStartChange(e) {
+      this.$emit('update:start', e.detail.value)
+    },
+    onEndChange(e) {
+      this.$emit('update:end', e.detail.value)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.date-range-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 24rpx;
+  padding: 24rpx 32rpx;
+  border: 2rpx solid rgba(226, 232, 240, 0.8);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
+}
+
+.date-item {
+  flex: 1;
+  text-align: center;
+}
+
+.date-divider {
+  margin: 0 24rpx;
+  color: #94A3B8;
+  font-size: 24rpx;
+  font-weight: 500;
+}
+
+.date-label {
+  font-size: 22rpx;
+  color: #64748B;
+  margin-bottom: 12rpx;
+}
+
+.date-input {
+  font-size: 28rpx;
+  color: #1A2B4C;
+  font-weight: 600;
+  
+  &.is-empty {
+    color: #CBD5E1;
+    font-weight: normal;
+  }
+}
+</style>
diff --git a/pkgService/submit_request/components/RoomTypeSelector.vue b/pkgService/submit_request/components/RoomTypeSelector.vue
new file mode 100644
index 0000000..0fd8735
--- /dev/null
+++ b/pkgService/submit_request/components/RoomTypeSelector.vue
@@ -0,0 +1,326 @@
+<template>
+  <view class="room-type-selector">
+    <view class="selector-header tn-flex tn-flex-row-between tn-flex-col-center" @click="showPopup = true">
+      <view class="selected-info">
+        <view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedRoomType }">
+          {{ selectedRoomType ? getRoomTypeDisplayName(selectedRoomType) : t('selectRoomType') }}
+        </view>
+        <view class="selected-area tn-text-ellipsis" v-if="selectedArea">
+          {{ getAreaDisplayName(selectedArea) }}
+        </view>
+      </view>
+      <text class="tn-icon-right tn-color-gray"></text>
+    </view>
+
+    <tn-popup v-model="showPopup" mode="bottom" length="80%" :borderRadius="32" :closeBtn="true">
+      <view class="popup-content">
+        <view class="popup-header">
+          <text class="popup-title">{{ t('popupTitle') }}</text>
+        </view>
+        
+        <scroll-view scroll-y class="area-list-scroll">
+          <view v-if="isLoading" class="loading-state tn-padding-xl tn-text-center">
+            <tn-loading mode="circle"></tn-loading>
+            <view class="tn-margin-top-sm tn-color-gray">{{ t('loadingRoomTypes') }}</view>
+          </view>
+          
+          <view v-else-if="!areaList.length" class="empty-state tn-padding-xl tn-text-center">
+            <text class="tn-color-gray">{{ t('emptyRoomTypes') }}</text>
+          </view>
+
+          <view v-else class="area-group" v-for="(area, index) in areaList" :key="area.code">
+            <view class="area-title tn-flex tn-flex-row-between tn-flex-col-center" @click="toggleArea(index)">
+              <view class="tn-flex tn-flex-col-center">
+                <text class="area-dot"></text>
+                <text>{{ getAreaDisplayName(area) }}</text>
+              </view>
+              <text :class="collapsedAreas[index] ? 'tn-icon-down' : 'tn-icon-up'" class="tn-color-gray"></text>
+            </view>
+            <view class="room-type-grid" v-show="!collapsedAreas[index]">
+              <view 
+                class="room-type-item" 
+                v-for="room in area.roomTypes" 
+                :key="room.code"
+                :class="{ 'is-active': selectedRoomType && selectedRoomType.code === room.code }"
+                @click="handleSelect(area, room)"
+              >
+                <view class="room-name tn-text-ellipsis">{{ getRoomTypeDisplayName(room) }}</view>
+                <view class="room-price" v-if="room.price">¥{{ getPriceValue(room.price) }}{{ t('priceUnit') }}</view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+import { areaPagination } from '@/api/index.js'
+import { normalizeAreaItem } from '../../../utils/select-room-normalizers'
+
+export default {
+  name: 'RoomTypeSelector',
+  props: {
+    value: {
+      type: String,
+      default: '' // roomTypeCode
+    },
+    initialAreaCode: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showPopup: false,
+      isLoading: false,
+      areaList: [],
+      selectedArea: null,
+      selectedRoomType: null,
+      collapsedAreas: {}
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage ? this.$getLanguage() : 'zh'
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.syncSelection()
+    },
+    language() {
+      this.loadData(true)
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    t(key) {
+      return this.$translate(this.i18n, key)
+    },
+    loadData(force = false) {
+      if (!force && this.areaList.length > 0) return
+      
+      this.isLoading = true
+      return areaPagination({ PageIndex: 1, PageSize: 100 }, this.language)
+        .then((res) => {
+        const rawList = Array.isArray(res?.data?.data) ? res.data.data : (Array.isArray(res?.data) ? res.data : [])
+        
+        this.areaList = rawList
+          .map(item => normalizeAreaItem(item))
+          .filter(area => area.roomTypes && area.roomTypes.length > 0)
+          
+        // 初始化全部不折叠
+        const collapsed = {}
+        this.areaList.forEach((_, index) => {
+          collapsed[index] = false
+        })
+        this.collapsedAreas = collapsed
+          
+        this.syncSelection()
+        })
+        .catch((e) => {
+        console.error('load room types error', e)
+        uni.showToast({ title: this.t('loadFailed'), icon: 'none' })
+        })
+        .finally(() => {
+        this.isLoading = false
+        })
+    },
+    syncSelection() {
+      if (!this.areaList.length) return
+      
+      let foundArea = null
+      let foundRoom = null
+      
+      // Try to find by room type code
+      if (this.value) {
+        for (const area of this.areaList) {
+          const room = area.roomTypes.find(r => r.code === this.value)
+          if (room) {
+            foundArea = area
+            foundRoom = room
+            break
+          }
+        }
+      }
+      
+      // If not found by room, try to find by initial area code
+      if (!foundRoom && this.initialAreaCode) {
+        foundArea = this.areaList.find(a => a.code === this.initialAreaCode)
+      }
+      
+      if (foundArea) {
+        this.selectedArea = foundArea
+        if (foundRoom) {
+          this.selectedRoomType = foundRoom
+        }
+        
+        // If we found the room, or we just want to initialize the area but no room yet
+        if (foundRoom && this.value !== foundRoom.code) {
+          this.$emit('input', foundRoom.code)
+          this.$emit('change', { area: foundArea, roomType: foundRoom })
+        }
+      }
+    },
+    handleSelect(area, roomType) {
+      this.selectedArea = area
+      this.selectedRoomType = roomType
+      this.$emit('input', roomType.code)
+      this.$emit('change', { area, roomType })
+      this.showPopup = false
+    },
+    getAreaDisplayName(area = {}) {
+      if (this.language === 'en') {
+        return area.nameEnDisplay || area.nameEn || area.name || ''
+      }
+      return area.name || area.nameEn || ''
+    },
+    getRoomTypeDisplayName(roomType = {}) {
+      if (this.language === 'en') {
+        return roomType.nameEnDisplay || roomType.nameEn || roomType.name || ''
+      }
+      return roomType.name || roomType.nameEn || ''
+    },
+    toggleArea(index) {
+      this.$set(this.collapsedAreas, index, !this.collapsedAreas[index])
+    },
+    getPriceValue(priceText) {
+      if (!priceText) return '--'
+      const matched = String(priceText).match(/(\d+(\.\d+)?)/)
+      return matched ? matched[1] : '--'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.room-type-selector {
+  width: 100%;
+}
+
+.selector-header {
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 26rpx 32rpx;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+  min-height: 100rpx;
+}
+
+.selected-info {
+  flex: 1;
+  overflow: hidden;
+}
+
+.selected-name {
+  font-size: 28rpx;
+  color: #1A2233;
+  font-weight: 600;
+  
+  &.is-empty {
+    color: #A0B0C0;
+    font-weight: normal;
+  }
+}
+
+.selected-area {
+  font-size: 22rpx;
+  color: #6A7A99;
+  margin-top: 6rpx;
+}
+
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #F8FAFF;
+}
+
+.popup-header {
+  padding: 40rpx 30rpx 20rpx;
+  text-align: center;
+  border-bottom: 1px dashed rgba($brand-primary, 0.15);
+  background: #FFFFFF;
+}
+
+.popup-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1A2233;
+}
+
+.area-list-scroll {
+  flex: 1;
+  height: 0;
+  padding: 20rpx 30rpx 60rpx;
+}
+
+.area-group {
+  margin-bottom: 30rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.04);
+  border: 1rpx solid rgba($brand-primary, 0.05);
+}
+
+.area-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1A2233;
+  margin-bottom: 20rpx;
+}
+
+.area-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: $brand-primary;
+  margin-right: 12rpx;
+  box-shadow: 0 0 8rpx rgba($brand-primary, 0.4);
+}
+
+.room-type-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
+}
+
+.room-type-item {
+  padding: 20rpx;
+  border-radius: 16rpx;
+  background: #FFFFFF;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+  transition: all 0.3s ease;
+  
+  &.is-active {
+    background: #FFFFFF;
+    border-color: $brand-primary;
+    box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.1);
+    
+    .room-name {
+      color: $brand-primary;
+    }
+    .room-price {
+      color: $brand-primary;
+    }
+  }
+}
+
+.room-name {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #1A2233;
+  margin-bottom: 8rpx;
+}
+
+.room-price {
+  font-size: 22rpx;
+  color: #6A7A99;
+}
+</style>
diff --git a/pkgService/submit_request/components/TagSelector.vue b/pkgService/submit_request/components/TagSelector.vue
new file mode 100644
index 0000000..c71041b
--- /dev/null
+++ b/pkgService/submit_request/components/TagSelector.vue
@@ -0,0 +1,105 @@
+<template>
+  <view class="tag-selector">
+    <view v-if="options.length" class="option-row">
+      <view
+        v-for="item in options"
+        :key="item.key"
+        class="option-chip"
+        :class="{ 'option-chip--active': value.includes(item.key) }"
+        @click="toggleTag(item.key)"
+      >
+        {{ item.value }}
+      </view>
+    </view>
+    <view v-else class="empty-tips">{{ loading ? t('loadingText') : resolvedEmptyText }}</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'TagSelector',
+  i18n: {
+    zh: {
+      loadingText: '标签加载中...',
+      emptyText: '暂无标签'
+    },
+    en: {
+      loadingText: 'Loading tags...',
+      emptyText: 'No tags available'
+    }
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    emptyText: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    resolvedEmptyText() {
+      return this.emptyText || this.t('emptyText')
+    }
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.submit_request.components.TagSelector', key, params)
+    },
+    toggleTag(key) {
+      const currentList = [...this.value]
+      const index = currentList.indexOf(key)
+      if (index > -1) {
+        currentList.splice(index, 1)
+      } else {
+        currentList.push(key)
+      }
+      this.$emit('input', currentList)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.option-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.option-chip {
+  padding: 16rpx 28rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.7);
+  color: #64748B;
+  font-size: 24rpx;
+  line-height: 1;
+  border: 2rpx solid rgba(226, 232, 240, 0.8);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
+  backdrop-filter: blur(8px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.option-chip--active {
+  background: #1A2B4C;
+  border-color: #1A2B4C;
+  color: #FFFFFF;
+  font-weight: 500;
+  box-shadow: 0 8rpx 24rpx rgba(26, 43, 76, 0.2);
+}
+
+.empty-tips {
+  color: #94A3B8;
+  font-size: 24rpx;
+  line-height: 1.7;
+}
+</style>
diff --git a/pkgService/submit_request/submit_request.vue b/pkgService/submit_request/submit_request.vue
new file mode 100644
index 0000000..293fcb9
--- /dev/null
+++ b/pkgService/submit_request/submit_request.vue
@@ -0,0 +1,1304 @@
+<template>
+  <view class="submit-request-page tn-safe-area-inset-bottom">
+    <tn-nav-bar 
+      :isBack="true" 
+      :bottomShadow="false" 
+      :backgroundColor="navBarBackgroundColor"
+      :customBackStyle="navBarBackStyle"
+      :fixed="true"
+      class="glass-nav-bar"
+    >
+      <view class="tn-text-bold tn-text-xl tn-color-black" :style="{ opacity: navTitleOpacity }">{{ pageTitle }}</view>
+    </tn-nav-bar>
+
+    <scroll-view class="page-scroll" scroll-y @scroll="handleScroll" :show-scrollbar="false">
+      <view class="page-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '60rpx' }">
+      <view class="hero-header tn-margin-bottom-xl">
+        <view class="hero-badge">
+          <text class="badge-dot"></text>
+          <text>APPLICATION</text>
+        </view>
+        <view class="hero-title">{{ pageTitle }}</view>
+        <view class="hero-desc">{{ pageDesc }}</view>
+        
+        <view v-if="sourceSummaryList.length" class="tn-margin-top-lg">
+          <view v-for="item in sourceSummaryList" :key="item.label" class="source-row tn-flex tn-flex-row-between">
+            <text class="source-row__label">{{ item.label }}</text>
+            <text class="source-row__value">{{ item.value }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="form-card tn-margin-top-xl">
+        <view class="block-title">{{ formBlockTitle }}</view>
+        <view class="block-subtitle">{{ formBlockDesc }}</view>
+        
+        <view v-if="showRoomTypeSelector" class="form-item tn-margin-top">
+          <view class="form-label">{{ roomTypeLabel }}</view>
+          <room-type-selector
+            v-model="form.intendedRoomTypeCode"
+            :initial-area-code="form.intendedAreaCode"
+            @change="handleRoomTypeChange"
+          />
+        </view>
+        
+        <view v-if="showPreferenceSelectors" class="form-item tn-margin-top">
+          <view class="form-label">{{ t('hobbyLabel') }}</view>
+          <tag-selector 
+            v-model="form.hobbiesAndInterestsTagKeys" 
+            :options="hobbyOptions" 
+            :loading="dictLoading" 
+            :emptyText="t('emptyHobbyTags')" 
+          />
+        </view>
+        
+        <view v-if="showPreferenceSelectors" class="form-item tn-margin-top">
+          <view class="form-label">{{ t('lifestyleLabel') }}</view>
+          <tag-selector 
+            v-model="form.lifestyleHabitsTagKeys" 
+            :options="lifestyleOptions" 
+            :loading="dictLoading" 
+            :emptyText="t('emptyLifestyleTags')" 
+          />
+        </view>
+
+        <view v-if="showDateRange" class="form-item tn-margin-top">
+          <view class="form-label">{{ dateRangeLabel }}</view>
+          <date-range-selector 
+            :start.sync="form.start" 
+            :end.sync="form.end" 
+            :start-label="dateRangeStartLabel"
+            :end-label="dateRangeEndLabel"
+            :start-placeholder="dateRangeStartPlaceholder"
+            :end-placeholder="dateRangeEndPlaceholder"
+          />
+        </view>
+
+        <view class="form-item tn-margin-top">
+          <view class="form-label">{{ t('remarkLabel') }}</view>
+          <textarea class="form-textarea" :placeholder="remarkPlaceholder" v-model="form.remark"></textarea>
+        </view>
+
+        <view class="submit-btn btn-primary tn-margin-top-xl" :class="{ 'submit-btn--disabled': isSubmitting }" @click="submitRequest">
+          <text class="tn-text-bold">{{ isSubmitting ? t('submitting') : primaryActionText }}</text>
+        </view>
+      </view>
+      </view>
+
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { submitApplicationForm, sysdictPage } from '@/api/index.js'
+import { saveActiveApplicationCode, saveHomePageTabId } from '@/utils/app-state'
+import { compactEnglishText, localizePayMethodText } from '../../utils/select-room-normalizers'
+import { getStoredUser } from '../../utils/flow'
+
+import TagSelector from './components/TagSelector.vue'
+import DateRangeSelector from './components/DateRangeSelector.vue'
+import RoomTypeSelector from './components/RoomTypeSelector.vue'
+
+function createDefaultForm() {
+  const now = new Date()
+  const pad = n => String(n).padStart(2, '0')
+  const defaultStart = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
+
+  return {
+    intendedAreaCode: '',
+    intendedRoomTypeCode: '',
+    roomSlotHeight: 1,
+    hobbiesAndInterestsTagKeys: [],
+    lifestyleHabitsTagKeys: [],
+    remark: '',
+    start: defaultStart,
+    end: ''
+  }
+}
+
+const DICT_TEXT_FALLBACK_MAP = {
+  hobbies: {
+    '打篮球': 'Play Basketball',
+    '打羽毛球': 'Play Badminton',
+    '唱歌': 'Sing',
+    '电竞': 'Esports Games',
+    '电竞游戏': 'Esports Games',
+    '旅游': 'Travel'
+  },
+  lifestyle: {
+    '晚睡': 'Stay Up Late',
+    '早睡': 'Sleep Early',
+    '早起': 'Wake Up Early',
+    '安静': 'Quiet',
+    '整洁': 'Tidy',
+    '爱干净': 'Neat'
+  }
+}
+
+function getOptionTextCandidates(item = {}) {
+  return [
+    item.value,
+    item.label,
+    item.description,
+    item.name,
+    item.cname,
+    item.nameZh,
+    item.labelZh,
+    item.valueZh,
+    item.descriptionZh,
+    item.ename,
+    item.nameEn,
+    item.labelEn,
+    item.valueEn,
+    item.descriptionEn,
+    item.code
+  ].map(value => String(value || '').trim()).filter(Boolean)
+}
+
+function getDictFallbackText(item = {}, language = 'zh', type = '') {
+  if (language !== 'en') {
+    return ''
+  }
+  const fallbackMap = DICT_TEXT_FALLBACK_MAP[type] || {}
+  const baseText = [
+    item.description,
+    item.value,
+    item.label,
+    item.name,
+    item.cname,
+    item.nameZh,
+    item.labelZh,
+    item.valueZh,
+    item.descriptionZh
+  ].map(value => String(value || '').trim()).find(Boolean)
+  return baseText ? (fallbackMap[baseText] || '') : ''
+}
+
+function getLocalizedOptionText(item = {}, language = 'zh', type = '') {
+  const isEn = language === 'en'
+  const preferred = isEn
+    ? [item.descriptionEn, item.ename, item.nameEn, item.labelEn, item.valueEn, item.description, item.value, item.label, item.name, item.cname, item.code]
+    : [item.description, item.cname, item.nameZh, item.labelZh, item.valueZh, item.value, item.label, item.name, item.code]
+  const matched = preferred.map(value => String(value || '').trim()).find(Boolean)
+  if (!matched) {
+    return getDictFallbackText(item, language, type)
+  }
+  if (isEn) {
+    const fallbackMap = DICT_TEXT_FALLBACK_MAP[type] || {}
+    if (fallbackMap[matched]) {
+      return fallbackMap[matched]
+    }
+    const zhText = [item.label, item.name, item.cname, item.nameZh, item.labelZh, item.description, item.value, item.valueZh, item.descriptionZh]
+      .map(value => String(value || '').trim())
+      .find(Boolean)
+    if (zhText && fallbackMap[zhText]) {
+      return fallbackMap[zhText]
+    }
+    if (zhText && matched === zhText) {
+      return getDictFallbackText(item, language, type) || matched
+    }
+  }
+  return matched
+}
+
+function normalizeDictList(response, language = 'zh', type = '') {
+  const raw = response && response.data ? (response.data.data || response.data) : response
+  const list = Array.isArray(raw) ? raw : []
+  return list
+    .map(item => ({
+      key: item && (item.key || item.code || item.value || ''),
+      value: getLocalizedOptionText(item, language, type) || getOptionTextCandidates(item)[0] || ''
+    }))
+    .filter(item => item.key && item.value)
+}
+
+function normalizeDateTime(date, endOfDay = false) {
+  if (!date) {
+    return ''
+  }
+  return `${date}T${endOfDay ? '23:59:59' : '00:00:00'}`
+}
+
+function buildRoomLabel(payload = {}) {
+  return payload.roomLabel || payload.currentRoomLabel || payload.roomName || ''
+}
+
+function isPlainObject(value) {
+  return !!value && typeof value === 'object' && !Array.isArray(value)
+}
+
+function normalizeCodeValue(value) {
+  if (value === undefined || value === null) {
+    return ''
+  }
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value).trim()
+  }
+  return ''
+}
+
+function extractSubmitApplicationCode(response) {
+  const payload = response && response.data !== undefined ? response.data : response
+  const directValues = [
+    payload,
+    payload && payload.data,
+    payload && payload.result,
+    payload && payload.record,
+    payload && payload.application
+  ]
+
+  for (let i = 0; i < directValues.length; i += 1) {
+    const directCode = normalizeCodeValue(directValues[i])
+    if (directCode) {
+      return directCode
+    }
+  }
+
+  const sources = directValues.filter(isPlainObject)
+
+  const codeFields = ['detailCode', 'code', 'applicationCode', 'formCode', 'referenceTypeNo', 'no']
+  for (let i = 0; i < sources.length; i += 1) {
+    const current = sources[i]
+    for (let j = 0; j < codeFields.length; j += 1) {
+      const nextCode = normalizeCodeValue(current[codeFields[j]])
+      if (nextCode) {
+        return nextCode
+      }
+    }
+  }
+  return ''
+}
+
+const BUSINESS_TYPE_CONFIG = {
+  'change-room': {
+    title: '换房申请',
+    titleEn: 'Change Room Request',
+    titleEnShort: 'Room Change',
+    desc: '请填写期望房型、计划换房时间和补充说明，提交后由管家继续跟进。',
+    descEn: 'Fill in the expected room type, move date, and notes. Your butler will follow up after submission.',
+    formBlockTitle: '换房申请信息',
+    formBlockTitleEn: 'Change Room Details',
+    formBlockDesc: '将通过真实申请接口提交换房意向。',
+    formBlockDescEn: 'Your change room request will be submitted through the live application API.',
+    primaryActionText: '提交换房申请',
+    primaryActionTextEn: 'Submit Change Room Request',
+    remarkPlaceholder: '请输入换房原因、房间偏好和其他补充说明',
+    remarkPlaceholderEn: 'Enter the reason, room preference, and additional notes',
+    roomTypeLabel: '期望房型',
+    roomTypeLabelEn: 'Expected Room Type',
+    dateRangeLabel: '时间安排',
+    dateRangeLabelEn: 'Schedule',
+    dateRangeStartLabel: '期望换房',
+    dateRangeStartLabelEn: 'Move Date',
+    dateRangeEndLabel: '预计入住',
+    dateRangeEndLabelEn: 'Expected Check-in',
+    dateRangeStartPlaceholder: '请选择换房日期',
+    dateRangeStartPlaceholderEn: 'Select move date',
+    dateRangeEndPlaceholder: '请选择入住日期',
+    dateRangeEndPlaceholderEn: 'Select check-in date',
+    showRoomTypeSelector: true,
+    showPreferenceSelectors: false,
+    showDateRange: true,
+    buildDefaultRemark(payload = {}) {
+      const roomLabel = buildRoomLabel(payload)
+      const language = payload.language || 'zh'
+      if (language === 'en') {
+        return roomLabel
+          ? `I am currently staying in "${roomLabel}" and would like to request a room change. Please help confirm available room types and processing time.`
+          : 'I would like to request a room change. Please help confirm available room types and processing time.'
+      }
+      return roomLabel
+        ? `我当前居住房间为“${roomLabel}”，现申请换房，请协助确认可调整房型和办理时间。`
+        : '我想申请换房，请协助确认可调整房型和办理时间。'
+    }
+  },
+  'renew-stay': {
+    title: '续住申请',
+    titleEn: 'Renew Stay Request',
+    titleEnShort: 'Renew Stay',
+    desc: '请填写计划续住时间和补充说明，提交后由管家继续跟进。',
+    descEn: 'Fill in the renewal period and notes. Your butler will follow up after submission.',
+    formBlockTitle: '续住申请信息',
+    formBlockTitleEn: 'Renewal Details',
+    formBlockDesc: '将通过真实申请接口提交续住意向。',
+    formBlockDescEn: 'Your renewal request will be submitted through the live application API.',
+    primaryActionText: '提交续住申请',
+    primaryActionTextEn: 'Submit Renewal Request',
+    remarkPlaceholder: '请输入续住原因、计划续住时长和其他说明',
+    remarkPlaceholderEn: 'Enter the renewal reason, duration, and notes',
+    dateRangeLabel: '续住时间',
+    dateRangeLabelEn: 'Renewal Period',
+    dateRangeStartLabel: '当前到期',
+    dateRangeStartLabelEn: 'Current End Date',
+    dateRangeEndLabel: '计划续住至',
+    dateRangeEndLabelEn: 'Renew Until',
+    dateRangeStartPlaceholder: '请选择当前到期日',
+    dateRangeStartPlaceholderEn: 'Select current end date',
+    dateRangeEndPlaceholder: '请选择续住到期日',
+    dateRangeEndPlaceholderEn: 'Select renewed end date',
+    showRoomTypeSelector: false,
+    showPreferenceSelectors: false,
+    showDateRange: true,
+    buildDefaultRemark(payload = {}) {
+      const roomLabel = buildRoomLabel(payload)
+      const language = payload.language || 'zh'
+      if (language === 'en') {
+        return roomLabel
+          ? `I am currently staying in "${roomLabel}" and would like to renew my stay. Please help confirm the renewal process.`
+          : 'I would like to renew my stay. Please help confirm the renewal process.'
+      }
+      return roomLabel
+        ? `我当前居住房间为“${roomLabel}”，现申请续住，请协助确认续住办理流程。`
+        : '我想申请续住，请协助确认续住办理流程。'
+    }
+  },
+  checkout: {
+    title: '退房申请',
+    titleEn: 'Checkout Request',
+    titleEnShort: 'Check Out',
+    desc: '请填写计划退房时间和离场说明，提交后由管家安排后续验房流程。',
+    descEn: 'Fill in the checkout schedule and departure notes. Your butler will arrange the inspection process.',
+    formBlockTitle: '退房申请信息',
+    formBlockTitleEn: 'Checkout Details',
+    formBlockDesc: '将通过真实申请接口提交退房意向。',
+    formBlockDescEn: 'Your checkout request will be submitted through the live application API.',
+    primaryActionText: '提交退房申请',
+    primaryActionTextEn: 'Submit Checkout Request',
+    remarkPlaceholder: '请输入退房原因、物品处理说明和其他补充内容',
+    remarkPlaceholderEn: 'Enter the checkout reason, belongings arrangement, and notes',
+    dateRangeLabel: '退房安排',
+    dateRangeLabelEn: 'Checkout Schedule',
+    dateRangeStartLabel: '计划退房',
+    dateRangeStartLabelEn: 'Planned Checkout',
+    dateRangeEndLabel: '最晚离场',
+    dateRangeEndLabelEn: 'Latest Departure',
+    dateRangeStartPlaceholder: '请选择退房日期',
+    dateRangeStartPlaceholderEn: 'Select checkout date',
+    dateRangeEndPlaceholder: '请选择离场日期',
+    dateRangeEndPlaceholderEn: 'Select departure date',
+    showRoomTypeSelector: false,
+    showPreferenceSelectors: false,
+    showDateRange: true,
+    buildDefaultRemark(payload = {}) {
+      const roomLabel = buildRoomLabel(payload)
+      const language = payload.language || 'zh'
+      if (language === 'en') {
+        return roomLabel
+          ? `I am currently staying in "${roomLabel}" and would like to check out. Please help arrange the inspection and departure process.`
+          : 'I would like to check out. Please help arrange the inspection and departure process.'
+      }
+      return roomLabel
+        ? `我当前居住房间为“${roomLabel}”，现申请退房，请协助安排后续验房和离场流程。`
+        : '我想申请退房，请协助安排后续验房和离场流程。'
+    }
+  },
+  repair: {
+    title: '设备报修',
+    titleEn: 'Repair Request',
+    titleEnShort: 'Repair',
+    desc: '请填写故障位置、问题描述和期望上门时间，提交后由管家安排处理。',
+    descEn: 'Fill in the issue location, problem details, and preferred visit time. Your butler will arrange service.',
+    formBlockTitle: '报修信息',
+    formBlockTitleEn: 'Repair Details',
+    formBlockDesc: '将通过真实申请接口提交报修需求。',
+    formBlockDescEn: 'Your repair request will be submitted through the live application API.',
+    primaryActionText: '提交报修申请',
+    primaryActionTextEn: 'Submit Repair Request',
+    remarkPlaceholder: '请输入故障位置、问题现象和期望处理时间',
+    remarkPlaceholderEn: 'Enter the issue location, symptoms, and preferred handling time',
+    dateRangeLabel: '上门时间',
+    dateRangeLabelEn: 'Visit Time',
+    dateRangeStartLabel: '期望上门',
+    dateRangeStartLabelEn: 'Preferred Visit',
+    dateRangeEndLabel: '可接受至',
+    dateRangeEndLabelEn: 'Available Until',
+    dateRangeStartPlaceholder: '请选择期望时间',
+    dateRangeStartPlaceholderEn: 'Select preferred time',
+    dateRangeEndPlaceholder: '请选择最晚时间',
+    dateRangeEndPlaceholderEn: 'Select latest time',
+    showRoomTypeSelector: false,
+    showPreferenceSelectors: false,
+    showDateRange: true,
+    buildDefaultRemark(payload = {}) {
+      const roomLabel = buildRoomLabel(payload)
+      const language = payload.language || 'zh'
+      if (language === 'en') {
+        return roomLabel
+          ? `I am currently staying in "${roomLabel}" and need help with a device repair. Please arrange service support.`
+          : 'I need help with a device repair. Please arrange service support.'
+      }
+      return roomLabel
+        ? `我当前居住房间为“${roomLabel}”，有设备需要报修，请协助安排人员处理。`
+        : '我有设备需要报修，请协助安排人员处理。'
+    }
+  },
+  laundry: {
+    title: '洗衣房预约',
+    titleEn: 'Laundry Room Booking',
+    titleEnShort: 'Laundry',
+    desc: '请填写预约时间和补充说明，提交后由管家确认场地安排。',
+    descEn: 'Fill in the booking time and notes. Your butler will confirm the venue arrangement.',
+    formBlockTitle: '预约信息',
+    formBlockTitleEn: 'Booking Details',
+    formBlockDesc: '将通过真实申请接口提交洗衣房预约需求。',
+    formBlockDescEn: 'Your laundry room booking will be submitted through the live application API.',
+    primaryActionText: '提交洗衣房预约',
+    primaryActionTextEn: 'Submit Laundry Booking',
+    remarkPlaceholder: '请输入预约需求、设备偏好和其他说明',
+    remarkPlaceholderEn: 'Enter the booking request, equipment preference, and notes',
+    dateRangeLabel: '预约时间',
+    dateRangeLabelEn: 'Booking Time',
+    dateRangeStartLabel: '预约开始',
+    dateRangeStartLabelEn: 'Start Time',
+    dateRangeEndLabel: '预约结束',
+    dateRangeEndLabelEn: 'End Time',
+    dateRangeStartPlaceholder: '请选择开始时间',
+    dateRangeStartPlaceholderEn: 'Select start time',
+    dateRangeEndPlaceholder: '请选择结束时间',
+    dateRangeEndPlaceholderEn: 'Select end time',
+    showRoomTypeSelector: false,
+    showPreferenceSelectors: false,
+    showDateRange: true,
+    buildDefaultRemark(payload = {}) {
+      if ((payload.language || 'zh') === 'en') {
+        return 'I would like to book the laundry room. Please help confirm available time slots and equipment arrangements.'
+      }
+      return '我想预约洗衣房，请协助确认可用时段和设备安排。'
+    }
+  },
+  gym: {
+    title: '健身房预约',
+    titleEn: 'Gym Booking',
+    titleEnShort: 'Gym',
+    desc: '请填写预约时间和补充说明，提交后由管家确认场地安排。',
+    descEn: 'Fill in the booking time and notes. Your butler will confirm the venue arrangement.',
+    formBlockTitle: '预约信息',
+    formBlockTitleEn: 'Booking Details',
+    formBlockDesc: '将通过真实申请接口提交健身房预约需求。',
+    formBlockDescEn: 'Your gym booking will be submitted through the live application API.',
+    primaryActionText: '提交健身房预约',
+    primaryActionTextEn: 'Submit Gym Booking',
+    remarkPlaceholder: '请输入预约需求、人数和其他说明',
+    remarkPlaceholderEn: 'Enter the booking request, attendee count, and notes',
+    dateRangeLabel: '预约时间',
+    dateRangeLabelEn: 'Booking Time',
+    dateRangeStartLabel: '预约开始',
+    dateRangeStartLabelEn: 'Start Time',
+    dateRangeEndLabel: '预约结束',
+    dateRangeEndLabelEn: 'End Time',
+    dateRangeStartPlaceholder: '请选择开始时间',
+    dateRangeStartPlaceholderEn: 'Select start time',
+    dateRangeEndPlaceholder: '请选择结束时间',
+    dateRangeEndPlaceholderEn: 'Select end time',
+    showRoomTypeSelector: false,
+    showPreferenceSelectors: false,
+    showDateRange: true,
+    buildDefaultRemark(payload = {}) {
+      if ((payload.language || 'zh') === 'en') {
+        return 'I would like to book the gym. Please help confirm available time slots.'
+      }
+      return '我想预约健身房，请协助确认可用时段。'
+    }
+  },
+  kitchen: {
+    title: '公共厨房预约',
+    titleEn: 'Shared Kitchen Booking',
+    titleEnShort: 'Kitchen',
+    desc: '请填写预约时间和补充说明，提交后由管家确认场地安排。',
+    descEn: 'Fill in the booking time and notes. Your butler will confirm the venue arrangement.',
+    formBlockTitle: '预约信息',
+    formBlockTitleEn: 'Booking Details',
+    formBlockDesc: '将通过真实申请接口提交公共厨房预约需求。',
+    formBlockDescEn: 'Your shared kitchen booking will be submitted through the live application API.',
+    primaryActionText: '提交公共厨房预约',
+    primaryActionTextEn: 'Submit Kitchen Booking',
+    remarkPlaceholder: '请输入预约需求、人数和其他说明',
+    remarkPlaceholderEn: 'Enter the booking request, attendee count, and notes',
+    dateRangeLabel: '预约时间',
+    dateRangeLabelEn: 'Booking Time',
+    dateRangeStartLabel: '预约开始',
+    dateRangeStartLabelEn: 'Start Time',
+    dateRangeEndLabel: '预约结束',
+    dateRangeEndLabelEn: 'End Time',
+    dateRangeStartPlaceholder: '请选择开始时间',
+    dateRangeStartPlaceholderEn: 'Select start time',
+    dateRangeEndPlaceholder: '请选择结束时间',
+    dateRangeEndPlaceholderEn: 'Select end time',
+    showRoomTypeSelector: false,
+    showPreferenceSelectors: false,
+    showDateRange: true,
+    buildDefaultRemark(payload = {}) {
+      if ((payload.language || 'zh') === 'en') {
+        return 'I would like to book the shared kitchen. Please help confirm available time slots.'
+      }
+      return '我想预约公共厨房，请协助确认可用时段。'
+    }
+  },
+  'butler-contact': {
+    title: '联系管家',
+    titleEn: 'Contact Butler',
+    titleEnShort: 'Butler',
+    desc: '请填写需要协助的事项和补充说明，提交后由管家跟进处理。',
+    descEn: 'Fill in the request details and notes. Your butler will follow up after submission.',
+    formBlockTitle: '沟通信息',
+    formBlockTitleEn: 'Request Details',
+    formBlockDesc: '将通过真实申请接口提交沟通需求。',
+    formBlockDescEn: 'Your request will be submitted through the live application API.',
+    primaryActionText: '提交联系事项',
+    primaryActionTextEn: 'Submit Request',
+    remarkPlaceholder: '请输入希望联系管家的事项内容',
+    remarkPlaceholderEn: 'Enter what you would like help from your butler with',
+    showRoomTypeSelector: false,
+    showPreferenceSelectors: false,
+    showDateRange: false,
+    buildDefaultRemark(payload = {}) {
+      if ((payload.language || 'zh') === 'en') {
+        return 'I need to contact my butler for an in-stay request. Please assist as soon as possible.'
+      }
+      return '我需要联系管家处理住中事项，请尽快协助。'
+    }
+  }
+}
+
+export default {
+  components: {
+    TagSelector,
+    DateRangeSelector,
+    RoomTypeSelector
+  },
+  data() {
+    return {
+      sourceTitleZh: '',
+      sourceTitleEn: '',
+      sourceDescZh: '',
+      sourceDescEn: '',
+      rawSourceTitle: '',
+      rawSourceDesc: '',
+      sourcePayload: {},
+      isSubmitting: false,
+      dictLoading: false,
+      hobbyOptions: [],
+      lifestyleOptions: [],
+      form: createDefaultForm(),
+      scrollTop: 0,
+      lastAutoRemark: '',
+      i18n: {
+        zh: {
+          hobbyLabel: '兴趣爱好',
+          emptyHobbyTags: '暂无兴趣爱好标签',
+          lifestyleLabel: '生活习惯',
+          emptyLifestyleTags: '暂无生活习惯标签',
+          remarkLabel: '补充说明',
+          submitting: '提交中...',
+          roomTypeApplyTitle: '房型申请',
+          roomTypeApplyDesc: '请确认房型、区域、偏好标签和租期信息后提交申请。',
+          roomTypeApplyBlockTitle: '房型申请信息',
+          roomTypeApplyBlockDesc: '已接入真实申请单接口，支持带出房型与区域编码后直接提交。',
+          applyRemarkPlaceholder: '请输入您的申请补充说明',
+          submitRoomTypeApply: '提交房型申请',
+          applyRoomType: '申请房型',
+          leaseRange: '租期时间',
+          expectedCheckin: '预计入住',
+          expectedCheckout: '预计离开',
+          selectCheckinDate: '请选择入住日期',
+          selectCheckoutDate: '请选择离开日期',
+          currentRoom: '当前房间',
+          areaLabel: '所属区域',
+          referencePrice: '参考价格',
+          paymentMethod: '支付方式',
+          applicationType: '申请类型',
+          stayApplyDefaultTitle: '入住申请',
+          stayApplyDefaultDesc: '请填写您的入住意向、生活偏好与预计租期后提交申请单。',
+          sourceDefaultDesc: '请填写您的入住意向、租期和补充说明。',
+          tagLoadFailed: '偏好标签加载失败',
+          remarkRequired: '请输入补充说明',
+          applicationInfo: '申请信息',
+          selectDateStart: '请选择{label}',
+          selectDateEnd: '请选择{label}',
+          dateCannotBefore: '{endLabel}不能早于{startLabel}',
+          submitSuccess: '申请单提交成功',
+          submitFailed: '申请单提交失败'
+        },
+        en: {
+          hobbyLabel: 'Hobbies',
+          emptyHobbyTags: 'No hobby tags',
+          lifestyleLabel: 'Lifestyle Habits',
+          emptyLifestyleTags: 'No lifestyle tags',
+          remarkLabel: 'Additional Notes',
+          submitting: 'Submitting...',
+          roomTypeApplyTitle: 'Room Type Application',
+          roomTypeApplyDesc: 'Confirm the room type, area, preference tags, and lease period before submitting.',
+          roomTypeApplyBlockTitle: 'Application Details',
+          roomTypeApplyBlockDesc: 'The live application API is connected and can submit with room and area codes.',
+          applyRemarkPlaceholder: 'Enter your additional notes',
+          submitRoomTypeApply: 'Submit Application',
+          applyRoomType: 'Requested Room Type',
+          leaseRange: 'Lease Period',
+          expectedCheckin: 'Expected Check-in',
+          expectedCheckout: 'Expected Checkout',
+          selectCheckinDate: 'Select check-in date',
+          selectCheckoutDate: 'Select checkout date',
+          currentRoom: 'Current Room',
+          areaLabel: 'Area',
+          referencePrice: 'Reference Price',
+          paymentMethod: 'Payment Method',
+          applicationType: 'Application Type',
+          stayApplyDefaultTitle: 'Stay Application',
+          stayApplyDefaultDesc: 'Fill in your stay intention, preferences, and lease period before submission.',
+          sourceDefaultDesc: 'Fill in your stay intention, lease period, and notes.',
+          tagLoadFailed: 'Failed to load preference tags',
+          remarkRequired: 'Please enter additional notes',
+          applicationInfo: 'Application Details',
+          selectDateStart: 'Please select {label}',
+          selectDateEnd: 'Please select {label}',
+          dateCannotBefore: '{endLabel} cannot be earlier than {startLabel}',
+          submitSuccess: 'Application submitted',
+          submitFailed: 'Failed to submit application'
+        }
+      }
+    }
+  },
+  computed: {
+    language() {
+      return this.$getLanguage()
+    },
+    navBarBackgroundColor() {
+      if (this.scrollTop < 40) return 'rgba(255, 255, 255, 0)';
+      return 'rgba(255, 255, 255, 0.96)';
+    },
+    navBarBackStyle() {
+      const isDarkBg = this.scrollTop < 40;
+      return {
+        transition: 'all 0.2s ease',
+        background: isDarkBg ? 'rgba(0, 0, 0, 0.2)' : 'transparent',
+        borderRadius: '50%',
+        width: '64rpx',
+        height: '64rpx',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: '12rpx',
+        color: isDarkBg ? '#FFFFFF' : '#000000'
+      }
+    },
+    navTitleOpacity() {
+      return Math.min(Math.max((this.scrollTop - 40) / 50, 0), 1)
+    },
+    businessType() {
+      return this.sourcePayload && this.sourcePayload.businessType ? this.sourcePayload.businessType : ''
+    },
+    businessConfig() {
+      return BUSINESS_TYPE_CONFIG[this.businessType] || null
+    },
+    isRoomTypeApply() {
+      return this.sourcePayload && this.sourcePayload.sourceType === 'area-room-type'
+    },
+    pageTitle() {
+      if (this.isRoomTypeApply) {
+        return this.language === 'en'
+          ? compactEnglishText(this.t('roomTypeApplyTitle'), 22)
+          : this.t('roomTypeApplyTitle')
+      }
+      return this.getBusinessText('titleShort')
+        || this.getBusinessText('title')
+        || this.getLocalizedSourceText('title')
+        || this.t('stayApplyDefaultTitle')
+    },
+    pageDesc() {
+      if (this.isRoomTypeApply) {
+        return this.language === 'en'
+          ? compactEnglishText(this.t('roomTypeApplyDesc'), 96)
+          : this.t('roomTypeApplyDesc')
+      }
+      const text = this.getBusinessText('desc') || this.getLocalizedSourceText('desc') || this.t('stayApplyDefaultDesc')
+      return this.language === 'en' ? compactEnglishText(text, 96) : text
+    },
+    formBlockTitle() {
+      if (this.isRoomTypeApply) {
+        return this.t('roomTypeApplyBlockTitle')
+      }
+      return this.getBusinessText('formBlockTitle') || this.t('applicationInfo')
+    },
+    formBlockDesc() {
+      if (this.isRoomTypeApply) {
+        return this.t('roomTypeApplyBlockDesc')
+      }
+      return this.getBusinessText('formBlockDesc') || this.t('stayApplyDefaultDesc')
+    },
+    remarkPlaceholder() {
+      if (this.isRoomTypeApply) {
+        return this.t('applyRemarkPlaceholder')
+      }
+      return this.getBusinessText('remarkPlaceholder') || this.t('remarkRequired')
+    },
+    primaryActionText() {
+      if (this.isRoomTypeApply) {
+        return this.language === 'en'
+          ? compactEnglishText(this.t('submitRoomTypeApply'), 24)
+          : this.t('submitRoomTypeApply')
+      }
+      const text = this.getBusinessText('primaryActionText') || this.t('submitApplicationFallback')
+      return this.language === 'en' ? compactEnglishText(text, 24) : text
+    },
+    roomTypeLabel() {
+      return this.getBusinessText('roomTypeLabel') || this.t('applyRoomType')
+    },
+    showRoomTypeSelector() {
+      if (this.isRoomTypeApply) {
+        return true
+      }
+      return this.businessConfig ? this.businessConfig.showRoomTypeSelector !== false : true
+    },
+    showPreferenceSelectors() {
+      if (this.isRoomTypeApply) {
+        return true
+      }
+      return this.businessConfig ? !!this.businessConfig.showPreferenceSelectors : true
+    },
+    showDateRange() {
+      if (this.isRoomTypeApply) {
+        return true
+      }
+      return this.businessConfig ? this.businessConfig.showDateRange !== false : true
+    },
+    dateRangeLabel() {
+      return this.getBusinessText('dateRangeLabel') || this.t('leaseRange')
+    },
+    dateRangeStartLabel() {
+      return this.getBusinessText('dateRangeStartLabel') || this.t('expectedCheckin')
+    },
+    dateRangeEndLabel() {
+      return this.getBusinessText('dateRangeEndLabel') || this.t('expectedCheckout')
+    },
+    dateRangeStartPlaceholder() {
+      return this.getBusinessText('dateRangeStartPlaceholder') || this.t('selectCheckinDate')
+    },
+    dateRangeEndPlaceholder() {
+      return this.getBusinessText('dateRangeEndPlaceholder') || this.t('selectCheckoutDate')
+    },
+    sourceSummaryList() {
+      const payload = this.sourcePayload || {}
+      if (!Object.keys(payload).length) {
+        return []
+      }
+      const roomTypeName = this.language === 'en'
+        ? (payload.roomTypeNameEn || payload.roomTypeName || '')
+        : (payload.roomTypeName || '')
+      const roomLabel = this.language === 'en'
+        ? (payload.roomLabelEn || payload.currentRoomLabelEn || payload.roomLabel || payload.currentRoomLabel || '')
+        : (payload.roomLabel || payload.currentRoomLabel || '')
+      const areaName = this.language === 'en'
+        ? (payload.areaLabelEn || payload.areaNameEn || payload.areaLabel || payload.areaName || '')
+        : (payload.areaLabel || payload.areaName || '')
+      const list = []
+      if (roomTypeName) {
+        list.push({ label: this.t('applyRoomType'), value: roomTypeName })
+      }
+      if (roomLabel) {
+        list.push({ label: this.t('currentRoom'), value: roomLabel })
+      }
+      if (areaName) {
+        list.push({ label: this.t('areaLabel'), value: areaName })
+      }
+      if (payload.price) {
+        list.push({ label: this.t('referencePrice'), value: payload.price })
+      }
+      if (payload.payMethod) {
+        list.push({ label: this.t('paymentMethod'), value: localizePayMethodText(payload.payMethod, this.language) })
+      }
+      if (this.pageTitle) {
+        list.push({ label: this.t('applicationType'), value: this.pageTitle })
+      }
+      return list
+    }
+  },
+  watch: {
+    language() {
+      this.syncLocalizedDraftContent()
+      this.loadDictOptions()
+    }
+  },
+  onLoad(options) {
+    this.sourceTitleZh = this.decodeRouteText(options && (options.titleZh || options.title), '')
+    this.sourceTitleEn = this.decodeRouteText(options && options.titleEn, '')
+    this.sourceDescZh = this.decodeRouteText(options && (options.descZh || options.desc), '')
+    this.sourceDescEn = this.decodeRouteText(options && options.descEn, '')
+    this.rawSourceTitle = this.decodeRouteText(options && options.title, '')
+    this.rawSourceDesc = this.decodeRouteText(options && options.desc, '')
+    if (options.payload) {
+      Promise.resolve(options.payload)
+        .then(decodeURIComponent)
+        .then(JSON.parse)
+        .then((payload) => {
+          this.sourcePayload = payload && typeof payload === 'object' ? payload : {}
+        })
+        .catch((error) => {
+          console.error('parse submit payload error', error)
+          this.sourcePayload = {}
+        })
+        .finally(() => {
+          this.initFormFromSource()
+          this.loadDictOptions()
+        })
+      return
+    }
+    this.initFormFromSource()
+    this.loadDictOptions()
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.submit_request.submit_request', key, params)
+    },
+    decodeRouteText(value, fallback = '') {
+      if (value === undefined || value === null || value === '') {
+        return fallback
+      }
+      try {
+        return decodeURIComponent(String(value))
+      } catch (error) {
+        return String(value)
+      }
+    },
+    getLocalizedSourceText(type) {
+      if (type === 'title') {
+        if (this.language === 'en') {
+          return this.sourceTitleEn || this.sourceTitleZh || this.rawSourceTitle || ''
+        }
+        return this.sourceTitleZh || this.sourceTitleEn || this.rawSourceTitle || ''
+      }
+      if (this.language === 'en') {
+        return this.sourceDescEn || this.sourceDescZh || this.rawSourceDesc || ''
+      }
+      return this.sourceDescZh || this.sourceDescEn || this.rawSourceDesc || ''
+    },
+    getBusinessText(field) {
+      if (!this.businessConfig) {
+        return ''
+      }
+      const fieldKey = this.language === 'en'
+        ? `${field}En${field.endsWith('Short') ? '' : ''}`
+        : field
+      if (this.language === 'en' && field === 'titleShort') {
+        return this.businessConfig.titleEnShort || this.businessConfig.titleEn || this.businessConfig.title || ''
+      }
+      return this.businessConfig[fieldKey] || this.businessConfig[field] || ''
+    },
+    handleScroll(e) {
+      this.scrollTop = e.detail.scrollTop
+    },
+    buildDefaultRemarkFromSource() {
+      const roomTypeName = this.language === 'en'
+        ? (this.sourcePayload.roomTypeNameEn || this.sourcePayload.roomTypeName || '')
+        : (this.sourcePayload.roomTypeName || '')
+      const roomName = this.language === 'en'
+        ? (this.sourcePayload.roomNameEn || this.sourcePayload.roomName || '')
+        : (this.sourcePayload.roomName || '')
+      const bannerTitle = this.language === 'en'
+        ? (this.sourcePayload.bannerTitleEn || this.sourcePayload.bannerTitle || '')
+        : (this.sourcePayload.bannerTitle || '')
+
+      if (roomTypeName) {
+        return this.language === 'en'
+          ? `I plan to apply for the room type "${roomTypeName}". Please help confirm the application requirements, pricing, and next steps.`
+          : `我计划申请房型“${roomTypeName}”，请协助确认申请条件、价格和后续安排。`
+      }
+
+      if (roomName) {
+        return this.language === 'en'
+          ? `I plan to apply for the room "${roomName}". Please help confirm the move-in process and review requirements.`
+          : `我计划申请房源“${roomName}”，请协助确认入住流程和审核要求。`
+      }
+
+      if (bannerTitle) {
+        return this.language === 'en'
+          ? `I would like to submit a stay application related to "${bannerTitle}".`
+          : `我想提交“${bannerTitle}”相关房源的入住申请。`
+      }
+
+      if (this.businessConfig && typeof this.businessConfig.buildDefaultRemark === 'function') {
+        return this.businessConfig.buildDefaultRemark({
+          ...this.sourcePayload,
+          language: this.language
+        })
+      }
+
+      return ''
+    },
+    syncLocalizedDraftContent() {
+      const nextAutoRemark = this.buildDefaultRemarkFromSource()
+      if (!this.form || typeof this.form !== 'object') {
+        this.lastAutoRemark = nextAutoRemark
+        return
+      }
+      const currentRemark = String(this.form.remark || '')
+      const shouldSyncRemark = !currentRemark || currentRemark === this.lastAutoRemark
+      if (shouldSyncRemark) {
+        this.form.remark = nextAutoRemark
+      }
+      this.lastAutoRemark = nextAutoRemark
+    },
+    initFormFromSource() {
+      const defaultForm = createDefaultForm()
+      this.form = {
+        ...defaultForm,
+        intendedAreaCode: this.sourcePayload.areaCode || '',
+        intendedRoomTypeCode: this.sourcePayload.roomTypeCode || '',
+        remark: '',
+        start: this.sourcePayload.start || defaultForm.start,
+        end: this.sourcePayload.end || ''
+      }
+      
+      // If we don't have a roomTypeCode but we have an areaCode, 
+      // we still pass it down so RoomTypeSelector can select the current store/area
+      if (this.sourcePayload.areaCode && !this.sourcePayload.roomTypeCode) {
+        this.form.intendedAreaCode = this.sourcePayload.areaCode
+      }
+      this.form.remark = this.buildDefaultRemarkFromSource()
+      this.lastAutoRemark = this.form.remark
+    },
+    handleRoomTypeChange({ area, roomType }) {
+      if (area && area.code) {
+        this.form.intendedAreaCode = area.code
+      }
+      if (roomType) {
+        // 如果用户主动切换了房型，可以动态更新页面上的信息
+        if (!this.sourcePayload) this.sourcePayload = {}
+        
+        this.sourcePayload.roomTypeCode = roomType.code
+        this.sourcePayload.roomTypeName = roomType.name
+        this.sourcePayload.roomTypeNameEn = roomType.nameEn || ''
+        
+        if (area) {
+          this.sourcePayload.areaCode = area.code
+          this.sourcePayload.areaName = area.name
+          this.sourcePayload.areaNameEn = area.nameEn || ''
+        }
+        
+        if (roomType.price) {
+          this.sourcePayload.price = roomType.price
+        }
+      }
+    },
+    loadDictOptions() {
+      this.dictLoading = true
+      return Promise.all([
+          sysdictPage({ Type: 'UserHobbiesAndInterestsTag', PageIndex: 1, PageSize: 100 }, this.language),
+          sysdictPage({ Type: 'UserLifestyleHabitsTag', PageIndex: 1, PageSize: 100 }, this.language)
+        ])
+        .then(([hobbyRes, lifestyleRes]) => {
+        this.hobbyOptions = normalizeDictList(hobbyRes, this.language, 'hobbies')
+        this.lifestyleOptions = normalizeDictList(lifestyleRes, this.language, 'lifestyle')
+        this.initFormTagsFromUser()
+        })
+        .catch((error) => {
+        console.error('load application dict options failed', error)
+        uni.showToast({
+          title: this.t('tagLoadFailed'),
+          icon: 'none'
+        })
+        })
+        .finally(() => {
+        this.dictLoading = false
+        })
+    },
+    initFormTagsFromUser() {
+      const user = getStoredUser()
+      const authProfile = user && user.authProfile ? user.authProfile : {}
+
+      if (!this.form.hobbiesAndInterestsTagKeys.length) {
+        this.form.hobbiesAndInterestsTagKeys = this.matchTagKeys(authProfile.hobbyTags, this.hobbyOptions)
+      }
+
+      if (!this.form.lifestyleHabitsTagKeys.length) {
+        this.form.lifestyleHabitsTagKeys = this.matchTagKeys(authProfile.dietaryHabitTags, this.lifestyleOptions)
+      }
+    },
+    matchTagKeys(tagList = [], options = []) {
+      if (!Array.isArray(tagList) || !Array.isArray(options) || !options.length) {
+        return []
+      }
+
+      return tagList
+        .map(item => {
+          const rawKey = item && (item.key || item.code || item.value || '')
+          const matched = options.find(option => {
+            return String(option.key) === String(rawKey) || option.value === rawKey
+          })
+          return matched ? matched.key : ''
+        })
+        .filter(Boolean)
+    },
+    validateForm() {
+      if (this.showDateRange) {
+        if (!this.form.start) {
+          return this.t('selectDateStart', { label: this.dateRangeStartLabel })
+        }
+        if (!this.form.end) {
+          return this.t('selectDateEnd', { label: this.dateRangeEndLabel })
+        }
+        if (new Date(this.form.end).getTime() < new Date(this.form.start).getTime()) {
+          return this.t('dateCannotBefore', {
+            endLabel: this.dateRangeEndLabel,
+            startLabel: this.dateRangeStartLabel
+          })
+        }
+      }
+      if (!this.form.remark.trim()) {
+        return this.t('remarkRequired')
+      }
+      return ''
+    },
+    buildSubmitPayload() {
+      return {
+        intendedAreaCode: this.form.intendedAreaCode || null,
+        intendedRoomTypeCode: this.form.intendedRoomTypeCode || null,
+        roomSlotHeight: Number(this.form.roomSlotHeight),
+        hobbiesAndInterestsTagKeys: this.showPreferenceSelectors && this.form.hobbiesAndInterestsTagKeys.length ? this.form.hobbiesAndInterestsTagKeys : null,
+        lifestyleHabitsTagKeys: this.showPreferenceSelectors && this.form.lifestyleHabitsTagKeys.length ? this.form.lifestyleHabitsTagKeys : null,
+        remark: this.form.remark.trim() || null,
+        start: this.showDateRange ? normalizeDateTime(this.form.start, false) : null,
+        end: this.showDateRange ? normalizeDateTime(this.form.end, true) : null
+      }
+    },
+    submitRequest() {
+      if (this.isSubmitting) {
+        return
+      }
+
+      const errorMessage = this.validateForm()
+      if (errorMessage) {
+        uni.showToast({
+          title: errorMessage,
+          icon: 'none'
+        })
+        return
+      }
+
+      this.isSubmitting = true
+      uni.showLoading({
+        title: this.t('submitting')
+      })
+
+      const payload = this.buildSubmitPayload()
+      return submitApplicationForm(payload)
+        .then((response) => {
+        const applicationCode = extractSubmitApplicationCode(response)
+        if (applicationCode) {
+          saveActiveApplicationCode(applicationCode)
+        }
+        uni.hideLoading()
+        uni.showToast({
+          title: this.t('submitSuccess'),
+          icon: 'success'
+        })
+
+        setTimeout(() => {
+          saveHomePageTabId('my-application')
+          uni.reLaunch({
+            url: '/pages/index/index?pageId=my-application'
+          })
+        }, 800)
+        })
+        .catch((error) => {
+        console.error('submit application form failed', error)
+        uni.hideLoading()
+        uni.showToast({
+          title: (error && (error.message || error.msg)) || this.t('submitFailed'),
+          icon: 'none'
+        })
+        })
+        .finally(() => {
+        this.isSubmitting = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.submit-request-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+  position: relative;
+}
+
+.page-scroll {
+  width: 100%;
+  height: 100vh;
+}
+
+.page-content {
+  position: relative;
+  z-index: 1;
+}
+
+/* 毛玻璃导航栏覆盖样式 */
+.glass-nav-bar ::v-deep .tn-nav-bar {
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+}
+
+.form-card {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 36rpx;
+  box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba($brand-primary, 0.05);
+}
+
+.hero-header {
+  padding: 20rpx 10rpx;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 8rpx 20rpx 8rpx 14rpx;
+  background: rgba($brand-primary, 0.08);
+  border-radius: 100rpx;
+  margin-bottom: 24rpx;
+}
+
+.badge-dot {
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background: $brand-primary;
+  margin-right: 12rpx;
+  box-shadow: 0 0 8rpx rgba($brand-primary, 0.4);
+}
+
+.hero-badge text:not(.badge-dot) {
+  font-size: 20rpx;
+  color: $brand-primary;
+  font-weight: 700;
+  letter-spacing: 2rpx;
+}
+
+.hero-title {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #1A2233;
+  letter-spacing: 2rpx;
+  margin-bottom: 16rpx;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.block-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1A2233;
+  letter-spacing: 1rpx;
+}
+
+.block-subtitle {
+  margin-top: 12rpx;
+  color: #6A7A99;
+  font-size: 24rpx;
+  line-height: 1.6;
+}
+
+.hero-desc,
+.form-label,
+.empty-text {
+  color: #6A7A99;
+}
+
+.hero-desc {
+  font-size: 28rpx;
+  line-height: 1.6;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.form-label {
+  font-size: 26rpx;
+  font-weight: 600;
+  margin-bottom: 20rpx;
+  color: #1A2233;
+}
+
+.form-input,
+.form-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 26rpx 32rpx;
+  border: 1rpx solid rgba($brand-primary, 0.15);
+  font-size: 28rpx;
+  color: #1A2233;
+  transition: all 0.3s ease;
+  box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
+}
+
+.form-textarea:focus {
+  border: 1rpx solid $brand-primary;
+  background: #FFFFFF;
+  box-shadow: 0 0 0 6rpx rgba($brand-primary, 0.1);
+}
+
+.form-textarea {
+  height: 200rpx;
+  line-height: 1.5;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 96rpx;
+  border-radius: 999rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, rgba($brand-primary, 0.9) 0%, $brand-primary 100%);
+  color: #FFFFFF;
+  box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.25);
+  font-size: 30rpx;
+  letter-spacing: 2rpx;
+}
+
+.btn-primary:active {
+  transform: scale(0.98);
+}
+
+.submit-btn--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.source-row {
+  padding: 24rpx 0;
+  border-bottom: 1px dashed rgba($brand-primary, 0.15);
+}
+
+.source-row:last-child {
+  border-bottom: none;
+  padding-bottom: 8rpx;
+}
+
+.source-row__label {
+  color: #6A7A99;
+  font-size: 26rpx;
+}
+
+.source-row__value {
+  color: #1A2233;
+  font-size: 26rpx;
+  font-weight: 500;
+  text-align: right;
+  flex: 1;
+  min-width: 0;
+  margin-left: 24rpx;
+  word-break: break-word;
+}
+</style>
diff --git a/pkgService/utility_recharge/utility_recharge.vue b/pkgService/utility_recharge/utility_recharge.vue
new file mode 100644
index 0000000..5cf7182
--- /dev/null
+++ b/pkgService/utility_recharge/utility_recharge.vue
@@ -0,0 +1,77 @@
+<template>
+  <view class="bill-page tn-safe-area-inset-bottom">
+    <tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
+      <view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
+    </tn-nav-bar>
+
+    <view class="bill-body tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '48rpx' }">
+      <current-application-bill-panel
+        ref="billPanel"
+        :reference-type-no="referenceTypeNo"
+        @reference-resolved="handleReferenceResolved"
+        @all-paid="handleAllPaid"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import { fetchEnums } from '@/utils/enum-store.js'
+import { saveActiveApplicationCode, saveHomePageTabId } from '@/utils/app-state'
+import CurrentApplicationBillPanel from '../components/CurrentApplicationBillPanel.vue'
+
+export default {
+  i18n: {
+    zh: {
+      navTitle: '账单管理'
+    },
+    en: {
+      navTitle: 'Bill Management'
+    }
+  },
+  components: {
+    CurrentApplicationBillPanel
+  },
+  data() {
+    return {
+      referenceTypeNo: ''
+    }
+  },
+  async onLoad(options) {
+    await fetchEnums(false, this.$getLanguage())
+    this.referenceTypeNo = options && options.referenceTypeNo ? decodeURIComponent(options.referenceTypeNo) : ''
+    if (this.referenceTypeNo) {
+      saveActiveApplicationCode(this.referenceTypeNo)
+    }
+  },
+  methods: {
+    t(key, params) {
+      return this.$tm('pkgService.utility_recharge.utility_recharge', key, params)
+    },
+    handleReferenceResolved(referenceTypeNo) {
+      this.referenceTypeNo = referenceTypeNo || ''
+      if (this.referenceTypeNo) {
+        saveActiveApplicationCode(this.referenceTypeNo)
+      }
+    },
+    goStayServiceHome() {
+      saveHomePageTabId('stay-service')
+      uni.reLaunch({
+        url: '/pages/index/index?pageId=stay-service'
+      })
+    },
+    handleAllPaid() {
+      setTimeout(() => {
+        this.goStayServiceHome()
+      }, 800)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.bill-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #F0F6FF 0%, #F8FAFF 100%);
+}
+</style>
diff --git a/scripts/sync-global-messages.js b/scripts/sync-global-messages.js
new file mode 100644
index 0000000..cb380dd
--- /dev/null
+++ b/scripts/sync-global-messages.js
@@ -0,0 +1,314 @@
+const fs = require('fs')
+const path = require('path')
+const vm = require('vm')
+
+const projectRoot = path.resolve(__dirname, '..')
+const messagesFile = path.join(projectRoot, 'locales', 'messages.js')
+const targetRoots = [
+  path.join(projectRoot, 'pages'),
+  path.join(projectRoot, 'pkgAccount'),
+  path.join(projectRoot, 'pkgBooking'),
+  path.join(projectRoot, 'pkgExplore'),
+  path.join(projectRoot, 'pkgService')
+]
+const ignoredPaths = ['.history', 'unpackage', 'node_modules']
+
+function walk(dir, files = []) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true })
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name)
+    if (ignoredPaths.some((segment) => fullPath.includes(`${path.sep}${segment}${path.sep}`))) {
+      continue
+    }
+    if (entry.isDirectory()) {
+      walk(fullPath, files)
+      continue
+    }
+    if (entry.isFile() && fullPath.endsWith('.vue')) {
+      files.push(fullPath)
+    }
+  }
+  return files
+}
+
+function createBaseMessages() {
+  return {
+    zh: {
+      navigation: {
+        routes: {
+          'pages/index/index': '绿居公寓',
+          'pkgAccount/login/login': '登录',
+          'pkgAccount/register/register': '注册账号',
+          'pkgAccount/auth_result/auth_result': '实名结果',
+          'pkgAccount/registration_records/registration_records': '注册记录',
+          'pkgBooking/book_viewing/book_viewing': '预约看房',
+          'pkgBooking/book/book': '预订确认',
+          'pkgBooking/pay/pay': '在线支付',
+          'pkgBooking/booking_detail/booking_detail': '预订详情',
+          'pkgBooking/booking_list/booking_list': '预订记录',
+          'pkgService/application_detail/application_detail': '申请详情',
+          'pkgService/my_application/my_application': '我的申请',
+          'pkgService/my_contract/my_contract': '我的合同',
+          'pkgService/contract_detail/contract_detail': '合同详情',
+          'pkgService/contract_sign/contract_sign': '合同签约',
+          'pkgService/message_detail/message_detail': '消息详情',
+          'pkgService/submit_request/submit_request': '我要提交',
+          'pkgService/service_stub/service_stub': '业务办理',
+          'pkgService/utility_recharge/utility_recharge': '水电充值',
+          'pkgService/smart_control/smart_control': '智能控制',
+          'pkgService/device_control/device_control': '设备控制',
+          'pkgExplore/filter/filter': '数据筛选',
+          'pkgExplore/sign/sign': '签到打卡',
+          'pkgExplore/download/download': '资料图库',
+          'pkgExplore/room_detail/room_detail': '房型详情',
+          'pkgExplore/store_detail/store_detail': '小区详情',
+          'pkgExplore/vr_preview/vr_preview': 'VR看房'
+        }
+      },
+      pkgAccount: {
+        registration_records: {
+          navTitle: '注册记录',
+          providerUnavailableTitle: '当前无法获取微信身份',
+          providerUnavailableDesc: '请在微信小程序中打开后，再查看当前微信账号提交的注册记录。',
+          registrationFallbackTitle: '人员注册申请',
+          accountLabel: '注册账号',
+          phoneLabel: '手机号',
+          idNumberLabel: '证件号',
+          submittedAtLabel: '提交时间',
+          approvedAtLabel: '审批时间',
+          rejectReasonLabel: '驳回原因',
+          approvalRemarkLabel: '审批意见',
+          loadingMore: '加载中...',
+          noMore: '没有更多记录了',
+          pullUpMore: '上拉加载更多',
+          emptyTitle: '暂无注册记录',
+          emptyDesc: '当前微信账号还没有提交过人员注册申请。',
+          goRegister: '去提交注册申请',
+          loadingTitle: '注册记录加载中',
+          loadingDesc: '正在同步当前微信账号提交的注册申请记录，请稍候。',
+          statusAll: '全部',
+          statusPending: '审核中',
+          statusApproved: '已通过',
+          statusRejected: '已驳回',
+          statusProcessing: '处理中',
+          loadError: '注册记录加载失败'
+        }
+      }
+    },
+    en: {
+      navigation: {
+        routes: {
+          'pages/index/index': 'Luju Apartments',
+          'pkgAccount/login/login': 'Sign In',
+          'pkgAccount/register/register': 'Register',
+          'pkgAccount/auth_result/auth_result': 'Verification Result',
+          'pkgAccount/registration_records/registration_records': 'Registration Records',
+          'pkgBooking/book_viewing/book_viewing': 'Book Viewing',
+          'pkgBooking/book/book': 'Booking Confirm',
+          'pkgBooking/pay/pay': 'Online Payment',
+          'pkgBooking/booking_detail/booking_detail': 'Booking Detail',
+          'pkgBooking/booking_list/booking_list': 'Booking Records',
+          'pkgService/application_detail/application_detail': 'Application Detail',
+          'pkgService/my_application/my_application': 'My Applications',
+          'pkgService/my_contract/my_contract': 'My Contracts',
+          'pkgService/contract_detail/contract_detail': 'Contract Detail',
+          'pkgService/contract_sign/contract_sign': 'Contract Signing',
+          'pkgService/message_detail/message_detail': 'Message Detail',
+          'pkgService/submit_request/submit_request': 'Submit Request',
+          'pkgService/service_stub/service_stub': 'Service Center',
+          'pkgService/utility_recharge/utility_recharge': 'Utility Recharge',
+          'pkgService/smart_control/smart_control': 'Smart Control',
+          'pkgService/device_control/device_control': 'Device Control',
+          'pkgExplore/filter/filter': 'Filter',
+          'pkgExplore/sign/sign': 'Check In',
+          'pkgExplore/download/download': 'Gallery',
+          'pkgExplore/room_detail/room_detail': 'Room Detail',
+          'pkgExplore/store_detail/store_detail': 'Community Detail',
+          'pkgExplore/vr_preview/vr_preview': 'VR Viewing'
+        }
+      },
+      pkgAccount: {
+        registration_records: {
+          navTitle: 'Registration Records',
+          providerUnavailableTitle: 'Unable to access Wechat identity',
+          providerUnavailableDesc: 'Please open this page in Wechat Mini Program to view registration records submitted by this Wechat account.',
+          registrationFallbackTitle: 'Registration Application',
+          accountLabel: 'Account',
+          phoneLabel: 'Phone',
+          idNumberLabel: 'ID Number',
+          submittedAtLabel: 'Submitted At',
+          approvedAtLabel: 'Approved At',
+          rejectReasonLabel: 'Rejection Reason',
+          approvalRemarkLabel: 'Review Notes',
+          loadingMore: 'Loading...',
+          noMore: 'No more records',
+          pullUpMore: 'Pull up to load more',
+          emptyTitle: 'No registration records',
+          emptyDesc: 'This Wechat account has not submitted any registration application yet.',
+          goRegister: 'Submit Registration',
+          loadingTitle: 'Loading registration records',
+          loadingDesc: 'Syncing registration records submitted by this Wechat account. Please wait.',
+          statusAll: 'All',
+          statusPending: 'Under Review',
+          statusApproved: 'Approved',
+          statusRejected: 'Rejected',
+          statusProcessing: 'Processing',
+          loadError: 'Failed to load registration records'
+        }
+      }
+    }
+  }
+}
+
+function extractObjectLiteral(source, startIndex) {
+  const objectStart = source.indexOf('{', startIndex)
+  if (objectStart < 0) {
+    return ''
+  }
+  let depth = 0
+  let inString = false
+  let stringQuote = ''
+  let escaped = false
+  for (let index = objectStart; index < source.length; index += 1) {
+    const char = source[index]
+    if (inString) {
+      if (escaped) {
+        escaped = false
+      } else if (char === '\\') {
+        escaped = true
+      } else if (char === stringQuote) {
+        inString = false
+        stringQuote = ''
+      }
+      continue
+    }
+    if (char === '\'' || char === '"' || char === '`') {
+      inString = true
+      stringQuote = char
+      continue
+    }
+    if (char === '{') {
+      depth += 1
+      continue
+    }
+    if (char === '}') {
+      depth -= 1
+      if (depth === 0) {
+        return source.slice(objectStart, index + 1)
+      }
+    }
+  }
+  return ''
+}
+
+function extractI18nObject(source) {
+  const marker = 'i18n:'
+  const markerIndex = source.indexOf(marker)
+  if (markerIndex < 0) {
+    return null
+  }
+  const objectLiteral = extractObjectLiteral(source, markerIndex)
+  if (!objectLiteral) {
+    return null
+  }
+  try {
+    return vm.runInNewContext(`(${objectLiteral})`)
+  } catch (error) {
+    return null
+  }
+}
+
+function setNestedValue(target, namespace, value) {
+  const segments = namespace.split('.').filter(Boolean)
+  const lastSegment = segments.pop()
+  let current = target
+  for (const segment of segments) {
+    if (!current[segment] || typeof current[segment] !== 'object') {
+      current[segment] = {}
+    }
+    current = current[segment]
+  }
+  current[lastSegment] = value
+}
+
+function getNamespace(filePath) {
+  const relativePath = path.relative(projectRoot, filePath).replace(/\\/g, '/')
+  return relativePath.replace(/\.vue$/, '').replace(/\//g, '.')
+}
+
+function updateTranslatorMethod(source, namespace) {
+  return source
+    .replace(
+      /t\s*\(\s*key\s*,\s*params\s*\)\s*\{\s*return this\.\$translate\(this\.i18n,\s*key,\s*params\)\s*\}/m,
+      `t(key, params) {\n      return this.$tm('${namespace}', key, params)\n    }`
+    )
+    .replace(
+      /t\s*\(\s*key\s*\)\s*\{\s*return this\.\$translate\(this\.i18n,\s*key\)\s*\}/m,
+      `t(key) {\n      return this.$tm('${namespace}', key)\n    }`
+    )
+}
+
+function sortObject(value) {
+  if (Array.isArray(value)) {
+    return value.map(sortObject)
+  }
+  if (!value || typeof value !== 'object') {
+    return value
+  }
+  return Object.keys(value).sort().reduce((result, key) => {
+    result[key] = sortObject(value[key])
+    return result
+  }, {})
+}
+
+function toJsLiteral(value, indent = 0) {
+  const spaces = '  '.repeat(indent)
+  const childSpaces = '  '.repeat(indent + 1)
+  if (Array.isArray(value)) {
+    if (!value.length) {
+      return '[]'
+    }
+    return `[\n${value.map(item => `${childSpaces}${toJsLiteral(item, indent + 1)}`).join(',\n')}\n${spaces}]`
+  }
+  if (value && typeof value === 'object') {
+    const entries = Object.entries(value)
+    if (!entries.length) {
+      return '{}'
+    }
+    return `{\n${entries.map(([key, child]) => {
+      const renderedKey = /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key) ? key : JSON.stringify(key)
+      return `${childSpaces}${renderedKey}: ${toJsLiteral(child, indent + 1)}`
+    }).join(',\n')}\n${spaces}}`
+  }
+  return JSON.stringify(value)
+}
+
+function writeMessagesModule(filePath, messages) {
+  const content = `const messages = ${toJsLiteral(sortObject(messages))}\n\nexport default messages\n`
+  fs.writeFileSync(filePath, content, 'utf8')
+}
+
+function main() {
+  const messages = createBaseMessages()
+  const files = targetRoots.flatMap(root => walk(root))
+
+  for (const filePath of files) {
+    const source = fs.readFileSync(filePath, 'utf8')
+    const i18nObject = extractI18nObject(source)
+    if (!i18nObject || !i18nObject.zh || !i18nObject.en) {
+      continue
+    }
+    const namespace = getNamespace(filePath)
+    setNestedValue(messages.zh, namespace, i18nObject.zh)
+    setNestedValue(messages.en, namespace, i18nObject.en)
+
+    const nextSource = updateTranslatorMethod(source, namespace)
+    if (nextSource !== source) {
+      fs.writeFileSync(filePath, nextSource, 'utf8')
+    }
+  }
+
+  writeMessagesModule(messagesFile, messages)
+}
+
+main()
diff --git a/static/remixicon/remixicon.css b/static/remixicon/remixicon.css
new file mode 100644
index 0000000..fad8af3
--- /dev/null
+++ b/static/remixicon/remixicon.css
@@ -0,0 +1,3105 @@
+/*
+* Remix Icon v4.6.0
+* https://remixicon.com
+* https://github.com/Remix-Design/RemixIcon
+*
+* Copyright RemixIcon.com
+* Released under the Apache License Version 2.0
+*
+* Date: 2024-12-17
+*/
+@font-face {
+  font-family: "remixicon";
+  src: url("https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.woff2") format("woff2"),
+       url("https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.woff") format("woff"),
+       url("https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.ttf") format("truetype");
+  font-display: swap;
+}
+
+[class^="ri-"], [class*=" ri-"] {
+  font-family: 'remixicon' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
+.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
+.ri-xxs { font-size: .5em; }
+.ri-xs { font-size: .75em; }
+.ri-sm { font-size: .875em }
+.ri-1x { font-size: 1em; }
+.ri-2x { font-size: 2em; }
+.ri-3x { font-size: 3em; }
+.ri-4x { font-size: 4em; }
+.ri-5x { font-size: 5em; }
+.ri-6x { font-size: 6em; }
+.ri-7x { font-size: 7em; }
+.ri-8x { font-size: 8em; }
+.ri-9x { font-size: 9em; }
+.ri-10x { font-size: 10em; }
+.ri-fw { text-align: center; width: 1.25em; }
+
+.ri-24-hours-fill:before { content: "\ea01"; }
+.ri-24-hours-line:before { content: "\ea02"; }
+.ri-4k-fill:before { content: "\ea03"; }
+.ri-4k-line:before { content: "\ea04"; }
+.ri-a-b:before { content: "\ea05"; }
+.ri-account-box-fill:before { content: "\ea06"; }
+.ri-account-box-line:before { content: "\ea07"; }
+.ri-account-circle-fill:before { content: "\ea08"; }
+.ri-account-circle-line:before { content: "\ea09"; }
+.ri-account-pin-box-fill:before { content: "\ea0a"; }
+.ri-account-pin-box-line:before { content: "\ea0b"; }
+.ri-account-pin-circle-fill:before { content: "\ea0c"; }
+.ri-account-pin-circle-line:before { content: "\ea0d"; }
+.ri-add-box-fill:before { content: "\ea0e"; }
+.ri-add-box-line:before { content: "\ea0f"; }
+.ri-add-circle-fill:before { content: "\ea10"; }
+.ri-add-circle-line:before { content: "\ea11"; }
+.ri-add-fill:before { content: "\ea12"; }
+.ri-add-line:before { content: "\ea13"; }
+.ri-admin-fill:before { content: "\ea14"; }
+.ri-admin-line:before { content: "\ea15"; }
+.ri-advertisement-fill:before { content: "\ea16"; }
+.ri-advertisement-line:before { content: "\ea17"; }
+.ri-airplay-fill:before { content: "\ea18"; }
+.ri-airplay-line:before { content: "\ea19"; }
+.ri-alarm-fill:before { content: "\ea1a"; }
+.ri-alarm-line:before { content: "\ea1b"; }
+.ri-alarm-warning-fill:before { content: "\ea1c"; }
+.ri-alarm-warning-line:before { content: "\ea1d"; }
+.ri-album-fill:before { content: "\ea1e"; }
+.ri-album-line:before { content: "\ea1f"; }
+.ri-alert-fill:before { content: "\ea20"; }
+.ri-alert-line:before { content: "\ea21"; }
+.ri-aliens-fill:before { content: "\ea22"; }
+.ri-aliens-line:before { content: "\ea23"; }
+.ri-align-bottom:before { content: "\ea24"; }
+.ri-align-center:before { content: "\ea25"; }
+.ri-align-justify:before { content: "\ea26"; }
+.ri-align-left:before { content: "\ea27"; }
+.ri-align-right:before { content: "\ea28"; }
+.ri-align-top:before { content: "\ea29"; }
+.ri-align-vertically:before { content: "\ea2a"; }
+.ri-alipay-fill:before { content: "\ea2b"; }
+.ri-alipay-line:before { content: "\ea2c"; }
+.ri-amazon-fill:before { content: "\ea2d"; }
+.ri-amazon-line:before { content: "\ea2e"; }
+.ri-anchor-fill:before { content: "\ea2f"; }
+.ri-anchor-line:before { content: "\ea30"; }
+.ri-ancient-gate-fill:before { content: "\ea31"; }
+.ri-ancient-gate-line:before { content: "\ea32"; }
+.ri-ancient-pavilion-fill:before { content: "\ea33"; }
+.ri-ancient-pavilion-line:before { content: "\ea34"; }
+.ri-android-fill:before { content: "\ea35"; }
+.ri-android-line:before { content: "\ea36"; }
+.ri-angularjs-fill:before { content: "\ea37"; }
+.ri-angularjs-line:before { content: "\ea38"; }
+.ri-anticlockwise-2-fill:before { content: "\ea39"; }
+.ri-anticlockwise-2-line:before { content: "\ea3a"; }
+.ri-anticlockwise-fill:before { content: "\ea3b"; }
+.ri-anticlockwise-line:before { content: "\ea3c"; }
+.ri-app-store-fill:before { content: "\ea3d"; }
+.ri-app-store-line:before { content: "\ea3e"; }
+.ri-apple-fill:before { content: "\ea3f"; }
+.ri-apple-line:before { content: "\ea40"; }
+.ri-apps-2-fill:before { content: "\ea41"; }
+.ri-apps-2-line:before { content: "\ea42"; }
+.ri-apps-fill:before { content: "\ea43"; }
+.ri-apps-line:before { content: "\ea44"; }
+.ri-archive-drawer-fill:before { content: "\ea45"; }
+.ri-archive-drawer-line:before { content: "\ea46"; }
+.ri-archive-fill:before { content: "\ea47"; }
+.ri-archive-line:before { content: "\ea48"; }
+.ri-arrow-down-circle-fill:before { content: "\ea49"; }
+.ri-arrow-down-circle-line:before { content: "\ea4a"; }
+.ri-arrow-down-fill:before { content: "\ea4b"; }
+.ri-arrow-down-line:before { content: "\ea4c"; }
+.ri-arrow-down-s-fill:before { content: "\ea4d"; }
+.ri-arrow-down-s-line:before { content: "\ea4e"; }
+.ri-arrow-drop-down-fill:before { content: "\ea4f"; }
+.ri-arrow-drop-down-line:before { content: "\ea50"; }
+.ri-arrow-drop-left-fill:before { content: "\ea51"; }
+.ri-arrow-drop-left-line:before { content: "\ea52"; }
+.ri-arrow-drop-right-fill:before { content: "\ea53"; }
+.ri-arrow-drop-right-line:before { content: "\ea54"; }
+.ri-arrow-drop-up-fill:before { content: "\ea55"; }
+.ri-arrow-drop-up-line:before { content: "\ea56"; }
+.ri-arrow-go-back-fill:before { content: "\ea57"; }
+.ri-arrow-go-back-line:before { content: "\ea58"; }
+.ri-arrow-go-forward-fill:before { content: "\ea59"; }
+.ri-arrow-go-forward-line:before { content: "\ea5a"; }
+.ri-arrow-left-circle-fill:before { content: "\ea5b"; }
+.ri-arrow-left-circle-line:before { content: "\ea5c"; }
+.ri-arrow-left-down-fill:before { content: "\ea5d"; }
+.ri-arrow-left-down-line:before { content: "\ea5e"; }
+.ri-arrow-left-fill:before { content: "\ea5f"; }
+.ri-arrow-left-line:before { content: "\ea60"; }
+.ri-arrow-left-right-fill:before { content: "\ea61"; }
+.ri-arrow-left-right-line:before { content: "\ea62"; }
+.ri-arrow-left-s-fill:before { content: "\ea63"; }
+.ri-arrow-left-s-line:before { content: "\ea64"; }
+.ri-arrow-left-up-fill:before { content: "\ea65"; }
+.ri-arrow-left-up-line:before { content: "\ea66"; }
+.ri-arrow-right-circle-fill:before { content: "\ea67"; }
+.ri-arrow-right-circle-line:before { content: "\ea68"; }
+.ri-arrow-right-down-fill:before { content: "\ea69"; }
+.ri-arrow-right-down-line:before { content: "\ea6a"; }
+.ri-arrow-right-fill:before { content: "\ea6b"; }
+.ri-arrow-right-line:before { content: "\ea6c"; }
+.ri-arrow-right-s-fill:before { content: "\ea6d"; }
+.ri-arrow-right-s-line:before { content: "\ea6e"; }
+.ri-arrow-right-up-fill:before { content: "\ea6f"; }
+.ri-arrow-right-up-line:before { content: "\ea70"; }
+.ri-arrow-up-circle-fill:before { content: "\ea71"; }
+.ri-arrow-up-circle-line:before { content: "\ea72"; }
+.ri-arrow-up-down-fill:before { content: "\ea73"; }
+.ri-arrow-up-down-line:before { content: "\ea74"; }
+.ri-arrow-up-fill:before { content: "\ea75"; }
+.ri-arrow-up-line:before { content: "\ea76"; }
+.ri-arrow-up-s-fill:before { content: "\ea77"; }
+.ri-arrow-up-s-line:before { content: "\ea78"; }
+.ri-artboard-2-fill:before { content: "\ea79"; }
+.ri-artboard-2-line:before { content: "\ea7a"; }
+.ri-artboard-fill:before { content: "\ea7b"; }
+.ri-artboard-line:before { content: "\ea7c"; }
+.ri-article-fill:before { content: "\ea7d"; }
+.ri-article-line:before { content: "\ea7e"; }
+.ri-aspect-ratio-fill:before { content: "\ea7f"; }
+.ri-aspect-ratio-line:before { content: "\ea80"; }
+.ri-asterisk:before { content: "\ea81"; }
+.ri-at-fill:before { content: "\ea82"; }
+.ri-at-line:before { content: "\ea83"; }
+.ri-attachment-2:before { content: "\ea84"; }
+.ri-attachment-fill:before { content: "\ea85"; }
+.ri-attachment-line:before { content: "\ea86"; }
+.ri-auction-fill:before { content: "\ea87"; }
+.ri-auction-line:before { content: "\ea88"; }
+.ri-award-fill:before { content: "\ea89"; }
+.ri-award-line:before { content: "\ea8a"; }
+.ri-baidu-fill:before { content: "\ea8b"; }
+.ri-baidu-line:before { content: "\ea8c"; }
+.ri-ball-pen-fill:before { content: "\ea8d"; }
+.ri-ball-pen-line:before { content: "\ea8e"; }
+.ri-bank-card-2-fill:before { content: "\ea8f"; }
+.ri-bank-card-2-line:before { content: "\ea90"; }
+.ri-bank-card-fill:before { content: "\ea91"; }
+.ri-bank-card-line:before { content: "\ea92"; }
+.ri-bank-fill:before { content: "\ea93"; }
+.ri-bank-line:before { content: "\ea94"; }
+.ri-bar-chart-2-fill:before { content: "\ea95"; }
+.ri-bar-chart-2-line:before { content: "\ea96"; }
+.ri-bar-chart-box-fill:before { content: "\ea97"; }
+.ri-bar-chart-box-line:before { content: "\ea98"; }
+.ri-bar-chart-fill:before { content: "\ea99"; }
+.ri-bar-chart-grouped-fill:before { content: "\ea9a"; }
+.ri-bar-chart-grouped-line:before { content: "\ea9b"; }
+.ri-bar-chart-horizontal-fill:before { content: "\ea9c"; }
+.ri-bar-chart-horizontal-line:before { content: "\ea9d"; }
+.ri-bar-chart-line:before { content: "\ea9e"; }
+.ri-barcode-box-fill:before { content: "\ea9f"; }
+.ri-barcode-box-line:before { content: "\eaa0"; }
+.ri-barcode-fill:before { content: "\eaa1"; }
+.ri-barcode-line:before { content: "\eaa2"; }
+.ri-barricade-fill:before { content: "\eaa3"; }
+.ri-barricade-line:before { content: "\eaa4"; }
+.ri-base-station-fill:before { content: "\eaa5"; }
+.ri-base-station-line:before { content: "\eaa6"; }
+.ri-basketball-fill:before { content: "\eaa7"; }
+.ri-basketball-line:before { content: "\eaa8"; }
+.ri-battery-2-charge-fill:before { content: "\eaa9"; }
+.ri-battery-2-charge-line:before { content: "\eaaa"; }
+.ri-battery-2-fill:before { content: "\eaab"; }
+.ri-battery-2-line:before { content: "\eaac"; }
+.ri-battery-charge-fill:before { content: "\eaad"; }
+.ri-battery-charge-line:before { content: "\eaae"; }
+.ri-battery-fill:before { content: "\eaaf"; }
+.ri-battery-line:before { content: "\eab0"; }
+.ri-battery-low-fill:before { content: "\eab1"; }
+.ri-battery-low-line:before { content: "\eab2"; }
+.ri-battery-saver-fill:before { content: "\eab3"; }
+.ri-battery-saver-line:before { content: "\eab4"; }
+.ri-battery-share-fill:before { content: "\eab5"; }
+.ri-battery-share-line:before { content: "\eab6"; }
+.ri-bear-smile-fill:before { content: "\eab7"; }
+.ri-bear-smile-line:before { content: "\eab8"; }
+.ri-behance-fill:before { content: "\eab9"; }
+.ri-behance-line:before { content: "\eaba"; }
+.ri-bell-fill:before { content: "\eabb"; }
+.ri-bell-line:before { content: "\eabc"; }
+.ri-bike-fill:before { content: "\eabd"; }
+.ri-bike-line:before { content: "\eabe"; }
+.ri-bilibili-fill:before { content: "\eabf"; }
+.ri-bilibili-line:before { content: "\eac0"; }
+.ri-bill-fill:before { content: "\eac1"; }
+.ri-bill-line:before { content: "\eac2"; }
+.ri-billiards-fill:before { content: "\eac3"; }
+.ri-billiards-line:before { content: "\eac4"; }
+.ri-bit-coin-fill:before { content: "\eac5"; }
+.ri-bit-coin-line:before { content: "\eac6"; }
+.ri-blaze-fill:before { content: "\eac7"; }
+.ri-blaze-line:before { content: "\eac8"; }
+.ri-bluetooth-connect-fill:before { content: "\eac9"; }
+.ri-bluetooth-connect-line:before { content: "\eaca"; }
+.ri-bluetooth-fill:before { content: "\eacb"; }
+.ri-bluetooth-line:before { content: "\eacc"; }
+.ri-blur-off-fill:before { content: "\eacd"; }
+.ri-blur-off-line:before { content: "\eace"; }
+.ri-body-scan-fill:before { content: "\eacf"; }
+.ri-body-scan-line:before { content: "\ead0"; }
+.ri-bold:before { content: "\ead1"; }
+.ri-book-2-fill:before { content: "\ead2"; }
+.ri-book-2-line:before { content: "\ead3"; }
+.ri-book-3-fill:before { content: "\ead4"; }
+.ri-book-3-line:before { content: "\ead5"; }
+.ri-book-fill:before { content: "\ead6"; }
+.ri-book-line:before { content: "\ead7"; }
+.ri-book-marked-fill:before { content: "\ead8"; }
+.ri-book-marked-line:before { content: "\ead9"; }
+.ri-book-open-fill:before { content: "\eada"; }
+.ri-book-open-line:before { content: "\eadb"; }
+.ri-book-read-fill:before { content: "\eadc"; }
+.ri-book-read-line:before { content: "\eadd"; }
+.ri-booklet-fill:before { content: "\eade"; }
+.ri-booklet-line:before { content: "\eadf"; }
+.ri-bookmark-2-fill:before { content: "\eae0"; }
+.ri-bookmark-2-line:before { content: "\eae1"; }
+.ri-bookmark-3-fill:before { content: "\eae2"; }
+.ri-bookmark-3-line:before { content: "\eae3"; }
+.ri-bookmark-fill:before { content: "\eae4"; }
+.ri-bookmark-line:before { content: "\eae5"; }
+.ri-boxing-fill:before { content: "\eae6"; }
+.ri-boxing-line:before { content: "\eae7"; }
+.ri-braces-fill:before { content: "\eae8"; }
+.ri-braces-line:before { content: "\eae9"; }
+.ri-brackets-fill:before { content: "\eaea"; }
+.ri-brackets-line:before { content: "\eaeb"; }
+.ri-briefcase-2-fill:before { content: "\eaec"; }
+.ri-briefcase-2-line:before { content: "\eaed"; }
+.ri-briefcase-3-fill:before { content: "\eaee"; }
+.ri-briefcase-3-line:before { content: "\eaef"; }
+.ri-briefcase-4-fill:before { content: "\eaf0"; }
+.ri-briefcase-4-line:before { content: "\eaf1"; }
+.ri-briefcase-5-fill:before { content: "\eaf2"; }
+.ri-briefcase-5-line:before { content: "\eaf3"; }
+.ri-briefcase-fill:before { content: "\eaf4"; }
+.ri-briefcase-line:before { content: "\eaf5"; }
+.ri-bring-forward:before { content: "\eaf6"; }
+.ri-bring-to-front:before { content: "\eaf7"; }
+.ri-broadcast-fill:before { content: "\eaf8"; }
+.ri-broadcast-line:before { content: "\eaf9"; }
+.ri-brush-2-fill:before { content: "\eafa"; }
+.ri-brush-2-line:before { content: "\eafb"; }
+.ri-brush-3-fill:before { content: "\eafc"; }
+.ri-brush-3-line:before { content: "\eafd"; }
+.ri-brush-4-fill:before { content: "\eafe"; }
+.ri-brush-4-line:before { content: "\eaff"; }
+.ri-brush-fill:before { content: "\eb00"; }
+.ri-brush-line:before { content: "\eb01"; }
+.ri-bubble-chart-fill:before { content: "\eb02"; }
+.ri-bubble-chart-line:before { content: "\eb03"; }
+.ri-bug-2-fill:before { content: "\eb04"; }
+.ri-bug-2-line:before { content: "\eb05"; }
+.ri-bug-fill:before { content: "\eb06"; }
+.ri-bug-line:before { content: "\eb07"; }
+.ri-building-2-fill:before { content: "\eb08"; }
+.ri-building-2-line:before { content: "\eb09"; }
+.ri-building-3-fill:before { content: "\eb0a"; }
+.ri-building-3-line:before { content: "\eb0b"; }
+.ri-building-4-fill:before { content: "\eb0c"; }
+.ri-building-4-line:before { content: "\eb0d"; }
+.ri-building-fill:before { content: "\eb0e"; }
+.ri-building-line:before { content: "\eb0f"; }
+.ri-bus-2-fill:before { content: "\eb10"; }
+.ri-bus-2-line:before { content: "\eb11"; }
+.ri-bus-fill:before { content: "\eb12"; }
+.ri-bus-line:before { content: "\eb13"; }
+.ri-bus-wifi-fill:before { content: "\eb14"; }
+.ri-bus-wifi-line:before { content: "\eb15"; }
+.ri-cactus-fill:before { content: "\eb16"; }
+.ri-cactus-line:before { content: "\eb17"; }
+.ri-cake-2-fill:before { content: "\eb18"; }
+.ri-cake-2-line:before { content: "\eb19"; }
+.ri-cake-3-fill:before { content: "\eb1a"; }
+.ri-cake-3-line:before { content: "\eb1b"; }
+.ri-cake-fill:before { content: "\eb1c"; }
+.ri-cake-line:before { content: "\eb1d"; }
+.ri-calculator-fill:before { content: "\eb1e"; }
+.ri-calculator-line:before { content: "\eb1f"; }
+.ri-calendar-2-fill:before { content: "\eb20"; }
+.ri-calendar-2-line:before { content: "\eb21"; }
+.ri-calendar-check-fill:before { content: "\eb22"; }
+.ri-calendar-check-line:before { content: "\eb23"; }
+.ri-calendar-event-fill:before { content: "\eb24"; }
+.ri-calendar-event-line:before { content: "\eb25"; }
+.ri-calendar-fill:before { content: "\eb26"; }
+.ri-calendar-line:before { content: "\eb27"; }
+.ri-calendar-todo-fill:before { content: "\eb28"; }
+.ri-calendar-todo-line:before { content: "\eb29"; }
+.ri-camera-2-fill:before { content: "\eb2a"; }
+.ri-camera-2-line:before { content: "\eb2b"; }
+.ri-camera-3-fill:before { content: "\eb2c"; }
+.ri-camera-3-line:before { content: "\eb2d"; }
+.ri-camera-fill:before { content: "\eb2e"; }
+.ri-camera-lens-fill:before { content: "\eb2f"; }
+.ri-camera-lens-line:before { content: "\eb30"; }
+.ri-camera-line:before { content: "\eb31"; }
+.ri-camera-off-fill:before { content: "\eb32"; }
+.ri-camera-off-line:before { content: "\eb33"; }
+.ri-camera-switch-fill:before { content: "\eb34"; }
+.ri-camera-switch-line:before { content: "\eb35"; }
+.ri-capsule-fill:before { content: "\eb36"; }
+.ri-capsule-line:before { content: "\eb37"; }
+.ri-car-fill:before { content: "\eb38"; }
+.ri-car-line:before { content: "\eb39"; }
+.ri-car-washing-fill:before { content: "\eb3a"; }
+.ri-car-washing-line:before { content: "\eb3b"; }
+.ri-caravan-fill:before { content: "\eb3c"; }
+.ri-caravan-line:before { content: "\eb3d"; }
+.ri-cast-fill:before { content: "\eb3e"; }
+.ri-cast-line:before { content: "\eb3f"; }
+.ri-cellphone-fill:before { content: "\eb40"; }
+.ri-cellphone-line:before { content: "\eb41"; }
+.ri-celsius-fill:before { content: "\eb42"; }
+.ri-celsius-line:before { content: "\eb43"; }
+.ri-centos-fill:before { content: "\eb44"; }
+.ri-centos-line:before { content: "\eb45"; }
+.ri-character-recognition-fill:before { content: "\eb46"; }
+.ri-character-recognition-line:before { content: "\eb47"; }
+.ri-charging-pile-2-fill:before { content: "\eb48"; }
+.ri-charging-pile-2-line:before { content: "\eb49"; }
+.ri-charging-pile-fill:before { content: "\eb4a"; }
+.ri-charging-pile-line:before { content: "\eb4b"; }
+.ri-chat-1-fill:before { content: "\eb4c"; }
+.ri-chat-1-line:before { content: "\eb4d"; }
+.ri-chat-2-fill:before { content: "\eb4e"; }
+.ri-chat-2-line:before { content: "\eb4f"; }
+.ri-chat-3-fill:before { content: "\eb50"; }
+.ri-chat-3-line:before { content: "\eb51"; }
+.ri-chat-4-fill:before { content: "\eb52"; }
+.ri-chat-4-line:before { content: "\eb53"; }
+.ri-chat-check-fill:before { content: "\eb54"; }
+.ri-chat-check-line:before { content: "\eb55"; }
+.ri-chat-delete-fill:before { content: "\eb56"; }
+.ri-chat-delete-line:before { content: "\eb57"; }
+.ri-chat-download-fill:before { content: "\eb58"; }
+.ri-chat-download-line:before { content: "\eb59"; }
+.ri-chat-follow-up-fill:before { content: "\eb5a"; }
+.ri-chat-follow-up-line:before { content: "\eb5b"; }
+.ri-chat-forward-fill:before { content: "\eb5c"; }
+.ri-chat-forward-line:before { content: "\eb5d"; }
+.ri-chat-heart-fill:before { content: "\eb5e"; }
+.ri-chat-heart-line:before { content: "\eb5f"; }
+.ri-chat-history-fill:before { content: "\eb60"; }
+.ri-chat-history-line:before { content: "\eb61"; }
+.ri-chat-new-fill:before { content: "\eb62"; }
+.ri-chat-new-line:before { content: "\eb63"; }
+.ri-chat-off-fill:before { content: "\eb64"; }
+.ri-chat-off-line:before { content: "\eb65"; }
+.ri-chat-poll-fill:before { content: "\eb66"; }
+.ri-chat-poll-line:before { content: "\eb67"; }
+.ri-chat-private-fill:before { content: "\eb68"; }
+.ri-chat-private-line:before { content: "\eb69"; }
+.ri-chat-quote-fill:before { content: "\eb6a"; }
+.ri-chat-quote-line:before { content: "\eb6b"; }
+.ri-chat-settings-fill:before { content: "\eb6c"; }
+.ri-chat-settings-line:before { content: "\eb6d"; }
+.ri-chat-smile-2-fill:before { content: "\eb6e"; }
+.ri-chat-smile-2-line:before { content: "\eb6f"; }
+.ri-chat-smile-3-fill:before { content: "\eb70"; }
+.ri-chat-smile-3-line:before { content: "\eb71"; }
+.ri-chat-smile-fill:before { content: "\eb72"; }
+.ri-chat-smile-line:before { content: "\eb73"; }
+.ri-chat-upload-fill:before { content: "\eb74"; }
+.ri-chat-upload-line:before { content: "\eb75"; }
+.ri-chat-voice-fill:before { content: "\eb76"; }
+.ri-chat-voice-line:before { content: "\eb77"; }
+.ri-check-double-fill:before { content: "\eb78"; }
+.ri-check-double-line:before { content: "\eb79"; }
+.ri-check-fill:before { content: "\eb7a"; }
+.ri-check-line:before { content: "\eb7b"; }
+.ri-checkbox-blank-circle-fill:before { content: "\eb7c"; }
+.ri-checkbox-blank-circle-line:before { content: "\eb7d"; }
+.ri-checkbox-blank-fill:before { content: "\eb7e"; }
+.ri-checkbox-blank-line:before { content: "\eb7f"; }
+.ri-checkbox-circle-fill:before { content: "\eb80"; }
+.ri-checkbox-circle-line:before { content: "\eb81"; }
+.ri-checkbox-fill:before { content: "\eb82"; }
+.ri-checkbox-indeterminate-fill:before { content: "\eb83"; }
+.ri-checkbox-indeterminate-line:before { content: "\eb84"; }
+.ri-checkbox-line:before { content: "\eb85"; }
+.ri-checkbox-multiple-blank-fill:before { content: "\eb86"; }
+.ri-checkbox-multiple-blank-line:before { content: "\eb87"; }
+.ri-checkbox-multiple-fill:before { content: "\eb88"; }
+.ri-checkbox-multiple-line:before { content: "\eb89"; }
+.ri-china-railway-fill:before { content: "\eb8a"; }
+.ri-china-railway-line:before { content: "\eb8b"; }
+.ri-chrome-fill:before { content: "\eb8c"; }
+.ri-chrome-line:before { content: "\eb8d"; }
+.ri-clapperboard-fill:before { content: "\eb8e"; }
+.ri-clapperboard-line:before { content: "\eb8f"; }
+.ri-clipboard-fill:before { content: "\eb90"; }
+.ri-clipboard-line:before { content: "\eb91"; }
+.ri-clockwise-2-fill:before { content: "\eb92"; }
+.ri-clockwise-2-line:before { content: "\eb93"; }
+.ri-clockwise-fill:before { content: "\eb94"; }
+.ri-clockwise-line:before { content: "\eb95"; }
+.ri-close-circle-fill:before { content: "\eb96"; }
+.ri-close-circle-line:before { content: "\eb97"; }
+.ri-close-fill:before { content: "\eb98"; }
+.ri-close-line:before { content: "\eb99"; }
+.ri-closed-captioning-fill:before { content: "\eb9a"; }
+.ri-closed-captioning-line:before { content: "\eb9b"; }
+.ri-cloud-fill:before { content: "\eb9c"; }
+.ri-cloud-line:before { content: "\eb9d"; }
+.ri-cloud-off-fill:before { content: "\eb9e"; }
+.ri-cloud-off-line:before { content: "\eb9f"; }
+.ri-cloud-windy-fill:before { content: "\eba0"; }
+.ri-cloud-windy-line:before { content: "\eba1"; }
+.ri-cloudy-2-fill:before { content: "\eba2"; }
+.ri-cloudy-2-line:before { content: "\eba3"; }
+.ri-cloudy-fill:before { content: "\eba4"; }
+.ri-cloudy-line:before { content: "\eba5"; }
+.ri-code-box-fill:before { content: "\eba6"; }
+.ri-code-box-line:before { content: "\eba7"; }
+.ri-code-fill:before { content: "\eba8"; }
+.ri-code-line:before { content: "\eba9"; }
+.ri-code-s-fill:before { content: "\ebaa"; }
+.ri-code-s-line:before { content: "\ebab"; }
+.ri-code-s-slash-fill:before { content: "\ebac"; }
+.ri-code-s-slash-line:before { content: "\ebad"; }
+.ri-code-view:before { content: "\ebae"; }
+.ri-codepen-fill:before { content: "\ebaf"; }
+.ri-codepen-line:before { content: "\ebb0"; }
+.ri-coin-fill:before { content: "\ebb1"; }
+.ri-coin-line:before { content: "\ebb2"; }
+.ri-coins-fill:before { content: "\ebb3"; }
+.ri-coins-line:before { content: "\ebb4"; }
+.ri-collage-fill:before { content: "\ebb5"; }
+.ri-collage-line:before { content: "\ebb6"; }
+.ri-command-fill:before { content: "\ebb7"; }
+.ri-command-line:before { content: "\ebb8"; }
+.ri-community-fill:before { content: "\ebb9"; }
+.ri-community-line:before { content: "\ebba"; }
+.ri-compass-2-fill:before { content: "\ebbb"; }
+.ri-compass-2-line:before { content: "\ebbc"; }
+.ri-compass-3-fill:before { content: "\ebbd"; }
+.ri-compass-3-line:before { content: "\ebbe"; }
+.ri-compass-4-fill:before { content: "\ebbf"; }
+.ri-compass-4-line:before { content: "\ebc0"; }
+.ri-compass-discover-fill:before { content: "\ebc1"; }
+.ri-compass-discover-line:before { content: "\ebc2"; }
+.ri-compass-fill:before { content: "\ebc3"; }
+.ri-compass-line:before { content: "\ebc4"; }
+.ri-compasses-2-fill:before { content: "\ebc5"; }
+.ri-compasses-2-line:before { content: "\ebc6"; }
+.ri-compasses-fill:before { content: "\ebc7"; }
+.ri-compasses-line:before { content: "\ebc8"; }
+.ri-computer-fill:before { content: "\ebc9"; }
+.ri-computer-line:before { content: "\ebca"; }
+.ri-contacts-book-2-fill:before { content: "\ebcb"; }
+.ri-contacts-book-2-line:before { content: "\ebcc"; }
+.ri-contacts-book-fill:before { content: "\ebcd"; }
+.ri-contacts-book-line:before { content: "\ebce"; }
+.ri-contacts-book-upload-fill:before { content: "\ebcf"; }
+.ri-contacts-book-upload-line:before { content: "\ebd0"; }
+.ri-contacts-fill:before { content: "\ebd1"; }
+.ri-contacts-line:before { content: "\ebd2"; }
+.ri-contrast-2-fill:before { content: "\ebd3"; }
+.ri-contrast-2-line:before { content: "\ebd4"; }
+.ri-contrast-drop-2-fill:before { content: "\ebd5"; }
+.ri-contrast-drop-2-line:before { content: "\ebd6"; }
+.ri-contrast-drop-fill:before { content: "\ebd7"; }
+.ri-contrast-drop-line:before { content: "\ebd8"; }
+.ri-contrast-fill:before { content: "\ebd9"; }
+.ri-contrast-line:before { content: "\ebda"; }
+.ri-copper-coin-fill:before { content: "\ebdb"; }
+.ri-copper-coin-line:before { content: "\ebdc"; }
+.ri-copper-diamond-fill:before { content: "\ebdd"; }
+.ri-copper-diamond-line:before { content: "\ebde"; }
+.ri-copyleft-fill:before { content: "\ebdf"; }
+.ri-copyleft-line:before { content: "\ebe0"; }
+.ri-copyright-fill:before { content: "\ebe1"; }
+.ri-copyright-line:before { content: "\ebe2"; }
+.ri-coreos-fill:before { content: "\ebe3"; }
+.ri-coreos-line:before { content: "\ebe4"; }
+.ri-coupon-2-fill:before { content: "\ebe5"; }
+.ri-coupon-2-line:before { content: "\ebe6"; }
+.ri-coupon-3-fill:before { content: "\ebe7"; }
+.ri-coupon-3-line:before { content: "\ebe8"; }
+.ri-coupon-4-fill:before { content: "\ebe9"; }
+.ri-coupon-4-line:before { content: "\ebea"; }
+.ri-coupon-5-fill:before { content: "\ebeb"; }
+.ri-coupon-5-line:before { content: "\ebec"; }
+.ri-coupon-fill:before { content: "\ebed"; }
+.ri-coupon-line:before { content: "\ebee"; }
+.ri-cpu-fill:before { content: "\ebef"; }
+.ri-cpu-line:before { content: "\ebf0"; }
+.ri-creative-commons-by-fill:before { content: "\ebf1"; }
+.ri-creative-commons-by-line:before { content: "\ebf2"; }
+.ri-creative-commons-fill:before { content: "\ebf3"; }
+.ri-creative-commons-line:before { content: "\ebf4"; }
+.ri-creative-commons-nc-fill:before { content: "\ebf5"; }
+.ri-creative-commons-nc-line:before { content: "\ebf6"; }
+.ri-creative-commons-nd-fill:before { content: "\ebf7"; }
+.ri-creative-commons-nd-line:before { content: "\ebf8"; }
+.ri-creative-commons-sa-fill:before { content: "\ebf9"; }
+.ri-creative-commons-sa-line:before { content: "\ebfa"; }
+.ri-creative-commons-zero-fill:before { content: "\ebfb"; }
+.ri-creative-commons-zero-line:before { content: "\ebfc"; }
+.ri-criminal-fill:before { content: "\ebfd"; }
+.ri-criminal-line:before { content: "\ebfe"; }
+.ri-crop-2-fill:before { content: "\ebff"; }
+.ri-crop-2-line:before { content: "\ec00"; }
+.ri-crop-fill:before { content: "\ec01"; }
+.ri-crop-line:before { content: "\ec02"; }
+.ri-css3-fill:before { content: "\ec03"; }
+.ri-css3-line:before { content: "\ec04"; }
+.ri-cup-fill:before { content: "\ec05"; }
+.ri-cup-line:before { content: "\ec06"; }
+.ri-currency-fill:before { content: "\ec07"; }
+.ri-currency-line:before { content: "\ec08"; }
+.ri-cursor-fill:before { content: "\ec09"; }
+.ri-cursor-line:before { content: "\ec0a"; }
+.ri-customer-service-2-fill:before { content: "\ec0b"; }
+.ri-customer-service-2-line:before { content: "\ec0c"; }
+.ri-customer-service-fill:before { content: "\ec0d"; }
+.ri-customer-service-line:before { content: "\ec0e"; }
+.ri-dashboard-2-fill:before { content: "\ec0f"; }
+.ri-dashboard-2-line:before { content: "\ec10"; }
+.ri-dashboard-3-fill:before { content: "\ec11"; }
+.ri-dashboard-3-line:before { content: "\ec12"; }
+.ri-dashboard-fill:before { content: "\ec13"; }
+.ri-dashboard-line:before { content: "\ec14"; }
+.ri-database-2-fill:before { content: "\ec15"; }
+.ri-database-2-line:before { content: "\ec16"; }
+.ri-database-fill:before { content: "\ec17"; }
+.ri-database-line:before { content: "\ec18"; }
+.ri-delete-back-2-fill:before { content: "\ec19"; }
+.ri-delete-back-2-line:before { content: "\ec1a"; }
+.ri-delete-back-fill:before { content: "\ec1b"; }
+.ri-delete-back-line:before { content: "\ec1c"; }
+.ri-delete-bin-2-fill:before { content: "\ec1d"; }
+.ri-delete-bin-2-line:before { content: "\ec1e"; }
+.ri-delete-bin-3-fill:before { content: "\ec1f"; }
+.ri-delete-bin-3-line:before { content: "\ec20"; }
+.ri-delete-bin-4-fill:before { content: "\ec21"; }
+.ri-delete-bin-4-line:before { content: "\ec22"; }
+.ri-delete-bin-5-fill:before { content: "\ec23"; }
+.ri-delete-bin-5-line:before { content: "\ec24"; }
+.ri-delete-bin-6-fill:before { content: "\ec25"; }
+.ri-delete-bin-6-line:before { content: "\ec26"; }
+.ri-delete-bin-7-fill:before { content: "\ec27"; }
+.ri-delete-bin-7-line:before { content: "\ec28"; }
+.ri-delete-bin-fill:before { content: "\ec29"; }
+.ri-delete-bin-line:before { content: "\ec2a"; }
+.ri-delete-column:before { content: "\ec2b"; }
+.ri-delete-row:before { content: "\ec2c"; }
+.ri-device-fill:before { content: "\ec2d"; }
+.ri-device-line:before { content: "\ec2e"; }
+.ri-device-recover-fill:before { content: "\ec2f"; }
+.ri-device-recover-line:before { content: "\ec30"; }
+.ri-dingding-fill:before { content: "\ec31"; }
+.ri-dingding-line:before { content: "\ec32"; }
+.ri-direction-fill:before { content: "\ec33"; }
+.ri-direction-line:before { content: "\ec34"; }
+.ri-disc-fill:before { content: "\ec35"; }
+.ri-disc-line:before { content: "\ec36"; }
+.ri-discord-fill:before { content: "\ec37"; }
+.ri-discord-line:before { content: "\ec38"; }
+.ri-discuss-fill:before { content: "\ec39"; }
+.ri-discuss-line:before { content: "\ec3a"; }
+.ri-dislike-fill:before { content: "\ec3b"; }
+.ri-dislike-line:before { content: "\ec3c"; }
+.ri-disqus-fill:before { content: "\ec3d"; }
+.ri-disqus-line:before { content: "\ec3e"; }
+.ri-divide-fill:before { content: "\ec3f"; }
+.ri-divide-line:before { content: "\ec40"; }
+.ri-donut-chart-fill:before { content: "\ec41"; }
+.ri-donut-chart-line:before { content: "\ec42"; }
+.ri-door-closed-fill:before { content: "\ec43"; }
+.ri-door-closed-line:before { content: "\ec44"; }
+.ri-door-fill:before { content: "\ec45"; }
+.ri-door-line:before { content: "\ec46"; }
+.ri-door-lock-box-fill:before { content: "\ec47"; }
+.ri-door-lock-box-line:before { content: "\ec48"; }
+.ri-door-lock-fill:before { content: "\ec49"; }
+.ri-door-lock-line:before { content: "\ec4a"; }
+.ri-door-open-fill:before { content: "\ec4b"; }
+.ri-door-open-line:before { content: "\ec4c"; }
+.ri-dossier-fill:before { content: "\ec4d"; }
+.ri-dossier-line:before { content: "\ec4e"; }
+.ri-douban-fill:before { content: "\ec4f"; }
+.ri-douban-line:before { content: "\ec50"; }
+.ri-double-quotes-l:before { content: "\ec51"; }
+.ri-double-quotes-r:before { content: "\ec52"; }
+.ri-download-2-fill:before { content: "\ec53"; }
+.ri-download-2-line:before { content: "\ec54"; }
+.ri-download-cloud-2-fill:before { content: "\ec55"; }
+.ri-download-cloud-2-line:before { content: "\ec56"; }
+.ri-download-cloud-fill:before { content: "\ec57"; }
+.ri-download-cloud-line:before { content: "\ec58"; }
+.ri-download-fill:before { content: "\ec59"; }
+.ri-download-line:before { content: "\ec5a"; }
+.ri-draft-fill:before { content: "\ec5b"; }
+.ri-draft-line:before { content: "\ec5c"; }
+.ri-drag-drop-fill:before { content: "\ec5d"; }
+.ri-drag-drop-line:before { content: "\ec5e"; }
+.ri-drag-move-2-fill:before { content: "\ec5f"; }
+.ri-drag-move-2-line:before { content: "\ec60"; }
+.ri-drag-move-fill:before { content: "\ec61"; }
+.ri-drag-move-line:before { content: "\ec62"; }
+.ri-dribbble-fill:before { content: "\ec63"; }
+.ri-dribbble-line:before { content: "\ec64"; }
+.ri-drive-fill:before { content: "\ec65"; }
+.ri-drive-line:before { content: "\ec66"; }
+.ri-drizzle-fill:before { content: "\ec67"; }
+.ri-drizzle-line:before { content: "\ec68"; }
+.ri-drop-fill:before { content: "\ec69"; }
+.ri-drop-line:before { content: "\ec6a"; }
+.ri-dropbox-fill:before { content: "\ec6b"; }
+.ri-dropbox-line:before { content: "\ec6c"; }
+.ri-dual-sim-1-fill:before { content: "\ec6d"; }
+.ri-dual-sim-1-line:before { content: "\ec6e"; }
+.ri-dual-sim-2-fill:before { content: "\ec6f"; }
+.ri-dual-sim-2-line:before { content: "\ec70"; }
+.ri-dv-fill:before { content: "\ec71"; }
+.ri-dv-line:before { content: "\ec72"; }
+.ri-dvd-fill:before { content: "\ec73"; }
+.ri-dvd-line:before { content: "\ec74"; }
+.ri-e-bike-2-fill:before { content: "\ec75"; }
+.ri-e-bike-2-line:before { content: "\ec76"; }
+.ri-e-bike-fill:before { content: "\ec77"; }
+.ri-e-bike-line:before { content: "\ec78"; }
+.ri-earth-fill:before { content: "\ec79"; }
+.ri-earth-line:before { content: "\ec7a"; }
+.ri-earthquake-fill:before { content: "\ec7b"; }
+.ri-earthquake-line:before { content: "\ec7c"; }
+.ri-edge-fill:before { content: "\ec7d"; }
+.ri-edge-line:before { content: "\ec7e"; }
+.ri-edit-2-fill:before { content: "\ec7f"; }
+.ri-edit-2-line:before { content: "\ec80"; }
+.ri-edit-box-fill:before { content: "\ec81"; }
+.ri-edit-box-line:before { content: "\ec82"; }
+.ri-edit-circle-fill:before { content: "\ec83"; }
+.ri-edit-circle-line:before { content: "\ec84"; }
+.ri-edit-fill:before { content: "\ec85"; }
+.ri-edit-line:before { content: "\ec86"; }
+.ri-eject-fill:before { content: "\ec87"; }
+.ri-eject-line:before { content: "\ec88"; }
+.ri-emotion-2-fill:before { content: "\ec89"; }
+.ri-emotion-2-line:before { content: "\ec8a"; }
+.ri-emotion-fill:before { content: "\ec8b"; }
+.ri-emotion-happy-fill:before { content: "\ec8c"; }
+.ri-emotion-happy-line:before { content: "\ec8d"; }
+.ri-emotion-laugh-fill:before { content: "\ec8e"; }
+.ri-emotion-laugh-line:before { content: "\ec8f"; }
+.ri-emotion-line:before { content: "\ec90"; }
+.ri-emotion-normal-fill:before { content: "\ec91"; }
+.ri-emotion-normal-line:before { content: "\ec92"; }
+.ri-emotion-sad-fill:before { content: "\ec93"; }
+.ri-emotion-sad-line:before { content: "\ec94"; }
+.ri-emotion-unhappy-fill:before { content: "\ec95"; }
+.ri-emotion-unhappy-line:before { content: "\ec96"; }
+.ri-empathize-fill:before { content: "\ec97"; }
+.ri-empathize-line:before { content: "\ec98"; }
+.ri-emphasis-cn:before { content: "\ec99"; }
+.ri-emphasis:before { content: "\ec9a"; }
+.ri-english-input:before { content: "\ec9b"; }
+.ri-equalizer-fill:before { content: "\ec9c"; }
+.ri-equalizer-line:before { content: "\ec9d"; }
+.ri-eraser-fill:before { content: "\ec9e"; }
+.ri-eraser-line:before { content: "\ec9f"; }
+.ri-error-warning-fill:before { content: "\eca0"; }
+.ri-error-warning-line:before { content: "\eca1"; }
+.ri-evernote-fill:before { content: "\eca2"; }
+.ri-evernote-line:before { content: "\eca3"; }
+.ri-exchange-box-fill:before { content: "\eca4"; }
+.ri-exchange-box-line:before { content: "\eca5"; }
+.ri-exchange-cny-fill:before { content: "\eca6"; }
+.ri-exchange-cny-line:before { content: "\eca7"; }
+.ri-exchange-dollar-fill:before { content: "\eca8"; }
+.ri-exchange-dollar-line:before { content: "\eca9"; }
+.ri-exchange-fill:before { content: "\ecaa"; }
+.ri-exchange-funds-fill:before { content: "\ecab"; }
+.ri-exchange-funds-line:before { content: "\ecac"; }
+.ri-exchange-line:before { content: "\ecad"; }
+.ri-external-link-fill:before { content: "\ecae"; }
+.ri-external-link-line:before { content: "\ecaf"; }
+.ri-eye-2-fill:before { content: "\ecb0"; }
+.ri-eye-2-line:before { content: "\ecb1"; }
+.ri-eye-close-fill:before { content: "\ecb2"; }
+.ri-eye-close-line:before { content: "\ecb3"; }
+.ri-eye-fill:before { content: "\ecb4"; }
+.ri-eye-line:before { content: "\ecb5"; }
+.ri-eye-off-fill:before { content: "\ecb6"; }
+.ri-eye-off-line:before { content: "\ecb7"; }
+.ri-facebook-box-fill:before { content: "\ecb8"; }
+.ri-facebook-box-line:before { content: "\ecb9"; }
+.ri-facebook-circle-fill:before { content: "\ecba"; }
+.ri-facebook-circle-line:before { content: "\ecbb"; }
+.ri-facebook-fill:before { content: "\ecbc"; }
+.ri-facebook-line:before { content: "\ecbd"; }
+.ri-fahrenheit-fill:before { content: "\ecbe"; }
+.ri-fahrenheit-line:before { content: "\ecbf"; }
+.ri-feedback-fill:before { content: "\ecc0"; }
+.ri-feedback-line:before { content: "\ecc1"; }
+.ri-file-2-fill:before { content: "\ecc2"; }
+.ri-file-2-line:before { content: "\ecc3"; }
+.ri-file-3-fill:before { content: "\ecc4"; }
+.ri-file-3-line:before { content: "\ecc5"; }
+.ri-file-4-fill:before { content: "\ecc6"; }
+.ri-file-4-line:before { content: "\ecc7"; }
+.ri-file-add-fill:before { content: "\ecc8"; }
+.ri-file-add-line:before { content: "\ecc9"; }
+.ri-file-chart-2-fill:before { content: "\ecca"; }
+.ri-file-chart-2-line:before { content: "\eccb"; }
+.ri-file-chart-fill:before { content: "\eccc"; }
+.ri-file-chart-line:before { content: "\eccd"; }
+.ri-file-cloud-fill:before { content: "\ecce"; }
+.ri-file-cloud-line:before { content: "\eccf"; }
+.ri-file-code-fill:before { content: "\ecd0"; }
+.ri-file-code-line:before { content: "\ecd1"; }
+.ri-file-copy-2-fill:before { content: "\ecd2"; }
+.ri-file-copy-2-line:before { content: "\ecd3"; }
+.ri-file-copy-fill:before { content: "\ecd4"; }
+.ri-file-copy-line:before { content: "\ecd5"; }
+.ri-file-damage-fill:before { content: "\ecd6"; }
+.ri-file-damage-line:before { content: "\ecd7"; }
+.ri-file-download-fill:before { content: "\ecd8"; }
+.ri-file-download-line:before { content: "\ecd9"; }
+.ri-file-edit-fill:before { content: "\ecda"; }
+.ri-file-edit-line:before { content: "\ecdb"; }
+.ri-file-excel-2-fill:before { content: "\ecdc"; }
+.ri-file-excel-2-line:before { content: "\ecdd"; }
+.ri-file-excel-fill:before { content: "\ecde"; }
+.ri-file-excel-line:before { content: "\ecdf"; }
+.ri-file-fill:before { content: "\ece0"; }
+.ri-file-forbid-fill:before { content: "\ece1"; }
+.ri-file-forbid-line:before { content: "\ece2"; }
+.ri-file-gif-fill:before { content: "\ece3"; }
+.ri-file-gif-line:before { content: "\ece4"; }
+.ri-file-history-fill:before { content: "\ece5"; }
+.ri-file-history-line:before { content: "\ece6"; }
+.ri-file-hwp-fill:before { content: "\ece7"; }
+.ri-file-hwp-line:before { content: "\ece8"; }
+.ri-file-info-fill:before { content: "\ece9"; }
+.ri-file-info-line:before { content: "\ecea"; }
+.ri-file-line:before { content: "\eceb"; }
+.ri-file-list-2-fill:before { content: "\ecec"; }
+.ri-file-list-2-line:before { content: "\eced"; }
+.ri-file-list-3-fill:before { content: "\ecee"; }
+.ri-file-list-3-line:before { content: "\ecef"; }
+.ri-file-list-fill:before { content: "\ecf0"; }
+.ri-file-list-line:before { content: "\ecf1"; }
+.ri-file-lock-fill:before { content: "\ecf2"; }
+.ri-file-lock-line:before { content: "\ecf3"; }
+.ri-file-marked-fill:before { content: "\ecf4"; }
+.ri-file-marked-line:before { content: "\ecf5"; }
+.ri-file-music-fill:before { content: "\ecf6"; }
+.ri-file-music-line:before { content: "\ecf7"; }
+.ri-file-paper-2-fill:before { content: "\ecf8"; }
+.ri-file-paper-2-line:before { content: "\ecf9"; }
+.ri-file-paper-fill:before { content: "\ecfa"; }
+.ri-file-paper-line:before { content: "\ecfb"; }
+.ri-file-pdf-fill:before { content: "\ecfc"; }
+.ri-file-pdf-line:before { content: "\ecfd"; }
+.ri-file-ppt-2-fill:before { content: "\ecfe"; }
+.ri-file-ppt-2-line:before { content: "\ecff"; }
+.ri-file-ppt-fill:before { content: "\ed00"; }
+.ri-file-ppt-line:before { content: "\ed01"; }
+.ri-file-reduce-fill:before { content: "\ed02"; }
+.ri-file-reduce-line:before { content: "\ed03"; }
+.ri-file-search-fill:before { content: "\ed04"; }
+.ri-file-search-line:before { content: "\ed05"; }
+.ri-file-settings-fill:before { content: "\ed06"; }
+.ri-file-settings-line:before { content: "\ed07"; }
+.ri-file-shield-2-fill:before { content: "\ed08"; }
+.ri-file-shield-2-line:before { content: "\ed09"; }
+.ri-file-shield-fill:before { content: "\ed0a"; }
+.ri-file-shield-line:before { content: "\ed0b"; }
+.ri-file-shred-fill:before { content: "\ed0c"; }
+.ri-file-shred-line:before { content: "\ed0d"; }
+.ri-file-text-fill:before { content: "\ed0e"; }
+.ri-file-text-line:before { content: "\ed0f"; }
+.ri-file-transfer-fill:before { content: "\ed10"; }
+.ri-file-transfer-line:before { content: "\ed11"; }
+.ri-file-unknow-fill:before { content: "\ed12"; }
+.ri-file-unknow-line:before { content: "\ed13"; }
+.ri-file-upload-fill:before { content: "\ed14"; }
+.ri-file-upload-line:before { content: "\ed15"; }
+.ri-file-user-fill:before { content: "\ed16"; }
+.ri-file-user-line:before { content: "\ed17"; }
+.ri-file-warning-fill:before { content: "\ed18"; }
+.ri-file-warning-line:before { content: "\ed19"; }
+.ri-file-word-2-fill:before { content: "\ed1a"; }
+.ri-file-word-2-line:before { content: "\ed1b"; }
+.ri-file-word-fill:before { content: "\ed1c"; }
+.ri-file-word-line:before { content: "\ed1d"; }
+.ri-file-zip-fill:before { content: "\ed1e"; }
+.ri-file-zip-line:before { content: "\ed1f"; }
+.ri-film-fill:before { content: "\ed20"; }
+.ri-film-line:before { content: "\ed21"; }
+.ri-filter-2-fill:before { content: "\ed22"; }
+.ri-filter-2-line:before { content: "\ed23"; }
+.ri-filter-3-fill:before { content: "\ed24"; }
+.ri-filter-3-line:before { content: "\ed25"; }
+.ri-filter-fill:before { content: "\ed26"; }
+.ri-filter-line:before { content: "\ed27"; }
+.ri-filter-off-fill:before { content: "\ed28"; }
+.ri-filter-off-line:before { content: "\ed29"; }
+.ri-find-replace-fill:before { content: "\ed2a"; }
+.ri-find-replace-line:before { content: "\ed2b"; }
+.ri-finder-fill:before { content: "\ed2c"; }
+.ri-finder-line:before { content: "\ed2d"; }
+.ri-fingerprint-2-fill:before { content: "\ed2e"; }
+.ri-fingerprint-2-line:before { content: "\ed2f"; }
+.ri-fingerprint-fill:before { content: "\ed30"; }
+.ri-fingerprint-line:before { content: "\ed31"; }
+.ri-fire-fill:before { content: "\ed32"; }
+.ri-fire-line:before { content: "\ed33"; }
+.ri-firefox-fill:before { content: "\ed34"; }
+.ri-firefox-line:before { content: "\ed35"; }
+.ri-first-aid-kit-fill:before { content: "\ed36"; }
+.ri-first-aid-kit-line:before { content: "\ed37"; }
+.ri-flag-2-fill:before { content: "\ed38"; }
+.ri-flag-2-line:before { content: "\ed39"; }
+.ri-flag-fill:before { content: "\ed3a"; }
+.ri-flag-line:before { content: "\ed3b"; }
+.ri-flashlight-fill:before { content: "\ed3c"; }
+.ri-flashlight-line:before { content: "\ed3d"; }
+.ri-flask-fill:before { content: "\ed3e"; }
+.ri-flask-line:before { content: "\ed3f"; }
+.ri-flight-land-fill:before { content: "\ed40"; }
+.ri-flight-land-line:before { content: "\ed41"; }
+.ri-flight-takeoff-fill:before { content: "\ed42"; }
+.ri-flight-takeoff-line:before { content: "\ed43"; }
+.ri-flood-fill:before { content: "\ed44"; }
+.ri-flood-line:before { content: "\ed45"; }
+.ri-flow-chart:before { content: "\ed46"; }
+.ri-flutter-fill:before { content: "\ed47"; }
+.ri-flutter-line:before { content: "\ed48"; }
+.ri-focus-2-fill:before { content: "\ed49"; }
+.ri-focus-2-line:before { content: "\ed4a"; }
+.ri-focus-3-fill:before { content: "\ed4b"; }
+.ri-focus-3-line:before { content: "\ed4c"; }
+.ri-focus-fill:before { content: "\ed4d"; }
+.ri-focus-line:before { content: "\ed4e"; }
+.ri-foggy-fill:before { content: "\ed4f"; }
+.ri-foggy-line:before { content: "\ed50"; }
+.ri-folder-2-fill:before { content: "\ed51"; }
+.ri-folder-2-line:before { content: "\ed52"; }
+.ri-folder-3-fill:before { content: "\ed53"; }
+.ri-folder-3-line:before { content: "\ed54"; }
+.ri-folder-4-fill:before { content: "\ed55"; }
+.ri-folder-4-line:before { content: "\ed56"; }
+.ri-folder-5-fill:before { content: "\ed57"; }
+.ri-folder-5-line:before { content: "\ed58"; }
+.ri-folder-add-fill:before { content: "\ed59"; }
+.ri-folder-add-line:before { content: "\ed5a"; }
+.ri-folder-chart-2-fill:before { content: "\ed5b"; }
+.ri-folder-chart-2-line:before { content: "\ed5c"; }
+.ri-folder-chart-fill:before { content: "\ed5d"; }
+.ri-folder-chart-line:before { content: "\ed5e"; }
+.ri-folder-download-fill:before { content: "\ed5f"; }
+.ri-folder-download-line:before { content: "\ed60"; }
+.ri-folder-fill:before { content: "\ed61"; }
+.ri-folder-forbid-fill:before { content: "\ed62"; }
+.ri-folder-forbid-line:before { content: "\ed63"; }
+.ri-folder-history-fill:before { content: "\ed64"; }
+.ri-folder-history-line:before { content: "\ed65"; }
+.ri-folder-info-fill:before { content: "\ed66"; }
+.ri-folder-info-line:before { content: "\ed67"; }
+.ri-folder-keyhole-fill:before { content: "\ed68"; }
+.ri-folder-keyhole-line:before { content: "\ed69"; }
+.ri-folder-line:before { content: "\ed6a"; }
+.ri-folder-lock-fill:before { content: "\ed6b"; }
+.ri-folder-lock-line:before { content: "\ed6c"; }
+.ri-folder-music-fill:before { content: "\ed6d"; }
+.ri-folder-music-line:before { content: "\ed6e"; }
+.ri-folder-open-fill:before { content: "\ed6f"; }
+.ri-folder-open-line:before { content: "\ed70"; }
+.ri-folder-received-fill:before { content: "\ed71"; }
+.ri-folder-received-line:before { content: "\ed72"; }
+.ri-folder-reduce-fill:before { content: "\ed73"; }
+.ri-folder-reduce-line:before { content: "\ed74"; }
+.ri-folder-settings-fill:before { content: "\ed75"; }
+.ri-folder-settings-line:before { content: "\ed76"; }
+.ri-folder-shared-fill:before { content: "\ed77"; }
+.ri-folder-shared-line:before { content: "\ed78"; }
+.ri-folder-shield-2-fill:before { content: "\ed79"; }
+.ri-folder-shield-2-line:before { content: "\ed7a"; }
+.ri-folder-shield-fill:before { content: "\ed7b"; }
+.ri-folder-shield-line:before { content: "\ed7c"; }
+.ri-folder-transfer-fill:before { content: "\ed7d"; }
+.ri-folder-transfer-line:before { content: "\ed7e"; }
+.ri-folder-unknow-fill:before { content: "\ed7f"; }
+.ri-folder-unknow-line:before { content: "\ed80"; }
+.ri-folder-upload-fill:before { content: "\ed81"; }
+.ri-folder-upload-line:before { content: "\ed82"; }
+.ri-folder-user-fill:before { content: "\ed83"; }
+.ri-folder-user-line:before { content: "\ed84"; }
+.ri-folder-warning-fill:before { content: "\ed85"; }
+.ri-folder-warning-line:before { content: "\ed86"; }
+.ri-folder-zip-fill:before { content: "\ed87"; }
+.ri-folder-zip-line:before { content: "\ed88"; }
+.ri-folders-fill:before { content: "\ed89"; }
+.ri-folders-line:before { content: "\ed8a"; }
+.ri-font-color:before { content: "\ed8b"; }
+.ri-font-size-2:before { content: "\ed8c"; }
+.ri-font-size:before { content: "\ed8d"; }
+.ri-football-fill:before { content: "\ed8e"; }
+.ri-football-line:before { content: "\ed8f"; }
+.ri-footprint-fill:before { content: "\ed90"; }
+.ri-footprint-line:before { content: "\ed91"; }
+.ri-forbid-2-fill:before { content: "\ed92"; }
+.ri-forbid-2-line:before { content: "\ed93"; }
+.ri-forbid-fill:before { content: "\ed94"; }
+.ri-forbid-line:before { content: "\ed95"; }
+.ri-format-clear:before { content: "\ed96"; }
+.ri-fridge-fill:before { content: "\ed97"; }
+.ri-fridge-line:before { content: "\ed98"; }
+.ri-fullscreen-exit-fill:before { content: "\ed99"; }
+.ri-fullscreen-exit-line:before { content: "\ed9a"; }
+.ri-fullscreen-fill:before { content: "\ed9b"; }
+.ri-fullscreen-line:before { content: "\ed9c"; }
+.ri-function-fill:before { content: "\ed9d"; }
+.ri-function-line:before { content: "\ed9e"; }
+.ri-functions:before { content: "\ed9f"; }
+.ri-funds-box-fill:before { content: "\eda0"; }
+.ri-funds-box-line:before { content: "\eda1"; }
+.ri-funds-fill:before { content: "\eda2"; }
+.ri-funds-line:before { content: "\eda3"; }
+.ri-gallery-fill:before { content: "\eda4"; }
+.ri-gallery-line:before { content: "\eda5"; }
+.ri-gallery-upload-fill:before { content: "\eda6"; }
+.ri-gallery-upload-line:before { content: "\eda7"; }
+.ri-game-fill:before { content: "\eda8"; }
+.ri-game-line:before { content: "\eda9"; }
+.ri-gamepad-fill:before { content: "\edaa"; }
+.ri-gamepad-line:before { content: "\edab"; }
+.ri-gas-station-fill:before { content: "\edac"; }
+.ri-gas-station-line:before { content: "\edad"; }
+.ri-gatsby-fill:before { content: "\edae"; }
+.ri-gatsby-line:before { content: "\edaf"; }
+.ri-genderless-fill:before { content: "\edb0"; }
+.ri-genderless-line:before { content: "\edb1"; }
+.ri-ghost-2-fill:before { content: "\edb2"; }
+.ri-ghost-2-line:before { content: "\edb3"; }
+.ri-ghost-fill:before { content: "\edb4"; }
+.ri-ghost-line:before { content: "\edb5"; }
+.ri-ghost-smile-fill:before { content: "\edb6"; }
+.ri-ghost-smile-line:before { content: "\edb7"; }
+.ri-gift-2-fill:before { content: "\edb8"; }
+.ri-gift-2-line:before { content: "\edb9"; }
+.ri-gift-fill:before { content: "\edba"; }
+.ri-gift-line:before { content: "\edbb"; }
+.ri-git-branch-fill:before { content: "\edbc"; }
+.ri-git-branch-line:before { content: "\edbd"; }
+.ri-git-commit-fill:before { content: "\edbe"; }
+.ri-git-commit-line:before { content: "\edbf"; }
+.ri-git-merge-fill:before { content: "\edc0"; }
+.ri-git-merge-line:before { content: "\edc1"; }
+.ri-git-pull-request-fill:before { content: "\edc2"; }
+.ri-git-pull-request-line:before { content: "\edc3"; }
+.ri-git-repository-commits-fill:before { content: "\edc4"; }
+.ri-git-repository-commits-line:before { content: "\edc5"; }
+.ri-git-repository-fill:before { content: "\edc6"; }
+.ri-git-repository-line:before { content: "\edc7"; }
+.ri-git-repository-private-fill:before { content: "\edc8"; }
+.ri-git-repository-private-line:before { content: "\edc9"; }
+.ri-github-fill:before { content: "\edca"; }
+.ri-github-line:before { content: "\edcb"; }
+.ri-gitlab-fill:before { content: "\edcc"; }
+.ri-gitlab-line:before { content: "\edcd"; }
+.ri-global-fill:before { content: "\edce"; }
+.ri-global-line:before { content: "\edcf"; }
+.ri-globe-fill:before { content: "\edd0"; }
+.ri-globe-line:before { content: "\edd1"; }
+.ri-goblet-fill:before { content: "\edd2"; }
+.ri-goblet-line:before { content: "\edd3"; }
+.ri-google-fill:before { content: "\edd4"; }
+.ri-google-line:before { content: "\edd5"; }
+.ri-google-play-fill:before { content: "\edd6"; }
+.ri-google-play-line:before { content: "\edd7"; }
+.ri-government-fill:before { content: "\edd8"; }
+.ri-government-line:before { content: "\edd9"; }
+.ri-gps-fill:before { content: "\edda"; }
+.ri-gps-line:before { content: "\eddb"; }
+.ri-gradienter-fill:before { content: "\eddc"; }
+.ri-gradienter-line:before { content: "\eddd"; }
+.ri-grid-fill:before { content: "\edde"; }
+.ri-grid-line:before { content: "\eddf"; }
+.ri-group-2-fill:before { content: "\ede0"; }
+.ri-group-2-line:before { content: "\ede1"; }
+.ri-group-fill:before { content: "\ede2"; }
+.ri-group-line:before { content: "\ede3"; }
+.ri-guide-fill:before { content: "\ede4"; }
+.ri-guide-line:before { content: "\ede5"; }
+.ri-h-1:before { content: "\ede6"; }
+.ri-h-2:before { content: "\ede7"; }
+.ri-h-3:before { content: "\ede8"; }
+.ri-h-4:before { content: "\ede9"; }
+.ri-h-5:before { content: "\edea"; }
+.ri-h-6:before { content: "\edeb"; }
+.ri-hail-fill:before { content: "\edec"; }
+.ri-hail-line:before { content: "\eded"; }
+.ri-hammer-fill:before { content: "\edee"; }
+.ri-hammer-line:before { content: "\edef"; }
+.ri-hand-coin-fill:before { content: "\edf0"; }
+.ri-hand-coin-line:before { content: "\edf1"; }
+.ri-hand-heart-fill:before { content: "\edf2"; }
+.ri-hand-heart-line:before { content: "\edf3"; }
+.ri-hand-sanitizer-fill:before { content: "\edf4"; }
+.ri-hand-sanitizer-line:before { content: "\edf5"; }
+.ri-handbag-fill:before { content: "\edf6"; }
+.ri-handbag-line:before { content: "\edf7"; }
+.ri-hard-drive-2-fill:before { content: "\edf8"; }
+.ri-hard-drive-2-line:before { content: "\edf9"; }
+.ri-hard-drive-fill:before { content: "\edfa"; }
+.ri-hard-drive-line:before { content: "\edfb"; }
+.ri-hashtag:before { content: "\edfc"; }
+.ri-haze-2-fill:before { content: "\edfd"; }
+.ri-haze-2-line:before { content: "\edfe"; }
+.ri-haze-fill:before { content: "\edff"; }
+.ri-haze-line:before { content: "\ee00"; }
+.ri-hd-fill:before { content: "\ee01"; }
+.ri-hd-line:before { content: "\ee02"; }
+.ri-heading:before { content: "\ee03"; }
+.ri-headphone-fill:before { content: "\ee04"; }
+.ri-headphone-line:before { content: "\ee05"; }
+.ri-health-book-fill:before { content: "\ee06"; }
+.ri-health-book-line:before { content: "\ee07"; }
+.ri-heart-2-fill:before { content: "\ee08"; }
+.ri-heart-2-line:before { content: "\ee09"; }
+.ri-heart-3-fill:before { content: "\ee0a"; }
+.ri-heart-3-line:before { content: "\ee0b"; }
+.ri-heart-add-fill:before { content: "\ee0c"; }
+.ri-heart-add-line:before { content: "\ee0d"; }
+.ri-heart-fill:before { content: "\ee0e"; }
+.ri-heart-line:before { content: "\ee0f"; }
+.ri-heart-pulse-fill:before { content: "\ee10"; }
+.ri-heart-pulse-line:before { content: "\ee11"; }
+.ri-hearts-fill:before { content: "\ee12"; }
+.ri-hearts-line:before { content: "\ee13"; }
+.ri-heavy-showers-fill:before { content: "\ee14"; }
+.ri-heavy-showers-line:before { content: "\ee15"; }
+.ri-history-fill:before { content: "\ee16"; }
+.ri-history-line:before { content: "\ee17"; }
+.ri-home-2-fill:before { content: "\ee18"; }
+.ri-home-2-line:before { content: "\ee19"; }
+.ri-home-3-fill:before { content: "\ee1a"; }
+.ri-home-3-line:before { content: "\ee1b"; }
+.ri-home-4-fill:before { content: "\ee1c"; }
+.ri-home-4-line:before { content: "\ee1d"; }
+.ri-home-5-fill:before { content: "\ee1e"; }
+.ri-home-5-line:before { content: "\ee1f"; }
+.ri-home-6-fill:before { content: "\ee20"; }
+.ri-home-6-line:before { content: "\ee21"; }
+.ri-home-7-fill:before { content: "\ee22"; }
+.ri-home-7-line:before { content: "\ee23"; }
+.ri-home-8-fill:before { content: "\ee24"; }
+.ri-home-8-line:before { content: "\ee25"; }
+.ri-home-fill:before { content: "\ee26"; }
+.ri-home-gear-fill:before { content: "\ee27"; }
+.ri-home-gear-line:before { content: "\ee28"; }
+.ri-home-heart-fill:before { content: "\ee29"; }
+.ri-home-heart-line:before { content: "\ee2a"; }
+.ri-home-line:before { content: "\ee2b"; }
+.ri-home-smile-2-fill:before { content: "\ee2c"; }
+.ri-home-smile-2-line:before { content: "\ee2d"; }
+.ri-home-smile-fill:before { content: "\ee2e"; }
+.ri-home-smile-line:before { content: "\ee2f"; }
+.ri-home-wifi-fill:before { content: "\ee30"; }
+.ri-home-wifi-line:before { content: "\ee31"; }
+.ri-honor-of-kings-fill:before { content: "\ee32"; }
+.ri-honor-of-kings-line:before { content: "\ee33"; }
+.ri-honour-fill:before { content: "\ee34"; }
+.ri-honour-line:before { content: "\ee35"; }
+.ri-hospital-fill:before { content: "\ee36"; }
+.ri-hospital-line:before { content: "\ee37"; }
+.ri-hotel-bed-fill:before { content: "\ee38"; }
+.ri-hotel-bed-line:before { content: "\ee39"; }
+.ri-hotel-fill:before { content: "\ee3a"; }
+.ri-hotel-line:before { content: "\ee3b"; }
+.ri-hotspot-fill:before { content: "\ee3c"; }
+.ri-hotspot-line:before { content: "\ee3d"; }
+.ri-hq-fill:before { content: "\ee3e"; }
+.ri-hq-line:before { content: "\ee3f"; }
+.ri-html5-fill:before { content: "\ee40"; }
+.ri-html5-line:before { content: "\ee41"; }
+.ri-ie-fill:before { content: "\ee42"; }
+.ri-ie-line:before { content: "\ee43"; }
+.ri-image-2-fill:before { content: "\ee44"; }
+.ri-image-2-line:before { content: "\ee45"; }
+.ri-image-add-fill:before { content: "\ee46"; }
+.ri-image-add-line:before { content: "\ee47"; }
+.ri-image-edit-fill:before { content: "\ee48"; }
+.ri-image-edit-line:before { content: "\ee49"; }
+.ri-image-fill:before { content: "\ee4a"; }
+.ri-image-line:before { content: "\ee4b"; }
+.ri-inbox-archive-fill:before { content: "\ee4c"; }
+.ri-inbox-archive-line:before { content: "\ee4d"; }
+.ri-inbox-fill:before { content: "\ee4e"; }
+.ri-inbox-line:before { content: "\ee4f"; }
+.ri-inbox-unarchive-fill:before { content: "\ee50"; }
+.ri-inbox-unarchive-line:before { content: "\ee51"; }
+.ri-increase-decrease-fill:before { content: "\ee52"; }
+.ri-increase-decrease-line:before { content: "\ee53"; }
+.ri-indent-decrease:before { content: "\ee54"; }
+.ri-indent-increase:before { content: "\ee55"; }
+.ri-indeterminate-circle-fill:before { content: "\ee56"; }
+.ri-indeterminate-circle-line:before { content: "\ee57"; }
+.ri-information-fill:before { content: "\ee58"; }
+.ri-information-line:before { content: "\ee59"; }
+.ri-infrared-thermometer-fill:before { content: "\ee5a"; }
+.ri-infrared-thermometer-line:before { content: "\ee5b"; }
+.ri-ink-bottle-fill:before { content: "\ee5c"; }
+.ri-ink-bottle-line:before { content: "\ee5d"; }
+.ri-input-cursor-move:before { content: "\ee5e"; }
+.ri-input-method-fill:before { content: "\ee5f"; }
+.ri-input-method-line:before { content: "\ee60"; }
+.ri-insert-column-left:before { content: "\ee61"; }
+.ri-insert-column-right:before { content: "\ee62"; }
+.ri-insert-row-bottom:before { content: "\ee63"; }
+.ri-insert-row-top:before { content: "\ee64"; }
+.ri-instagram-fill:before { content: "\ee65"; }
+.ri-instagram-line:before { content: "\ee66"; }
+.ri-install-fill:before { content: "\ee67"; }
+.ri-install-line:before { content: "\ee68"; }
+.ri-invision-fill:before { content: "\ee69"; }
+.ri-invision-line:before { content: "\ee6a"; }
+.ri-italic:before { content: "\ee6b"; }
+.ri-kakao-talk-fill:before { content: "\ee6c"; }
+.ri-kakao-talk-line:before { content: "\ee6d"; }
+.ri-key-2-fill:before { content: "\ee6e"; }
+.ri-key-2-line:before { content: "\ee6f"; }
+.ri-key-fill:before { content: "\ee70"; }
+.ri-key-line:before { content: "\ee71"; }
+.ri-keyboard-box-fill:before { content: "\ee72"; }
+.ri-keyboard-box-line:before { content: "\ee73"; }
+.ri-keyboard-fill:before { content: "\ee74"; }
+.ri-keyboard-line:before { content: "\ee75"; }
+.ri-keynote-fill:before { content: "\ee76"; }
+.ri-keynote-line:before { content: "\ee77"; }
+.ri-knife-blood-fill:before { content: "\ee78"; }
+.ri-knife-blood-line:before { content: "\ee79"; }
+.ri-knife-fill:before { content: "\ee7a"; }
+.ri-knife-line:before { content: "\ee7b"; }
+.ri-landscape-fill:before { content: "\ee7c"; }
+.ri-landscape-line:before { content: "\ee7d"; }
+.ri-layout-2-fill:before { content: "\ee7e"; }
+.ri-layout-2-line:before { content: "\ee7f"; }
+.ri-layout-3-fill:before { content: "\ee80"; }
+.ri-layout-3-line:before { content: "\ee81"; }
+.ri-layout-4-fill:before { content: "\ee82"; }
+.ri-layout-4-line:before { content: "\ee83"; }
+.ri-layout-5-fill:before { content: "\ee84"; }
+.ri-layout-5-line:before { content: "\ee85"; }
+.ri-layout-6-fill:before { content: "\ee86"; }
+.ri-layout-6-line:before { content: "\ee87"; }
+.ri-layout-bottom-2-fill:before { content: "\ee88"; }
+.ri-layout-bottom-2-line:before { content: "\ee89"; }
+.ri-layout-bottom-fill:before { content: "\ee8a"; }
+.ri-layout-bottom-line:before { content: "\ee8b"; }
+.ri-layout-column-fill:before { content: "\ee8c"; }
+.ri-layout-column-line:before { content: "\ee8d"; }
+.ri-layout-fill:before { content: "\ee8e"; }
+.ri-layout-grid-fill:before { content: "\ee8f"; }
+.ri-layout-grid-line:before { content: "\ee90"; }
+.ri-layout-left-2-fill:before { content: "\ee91"; }
+.ri-layout-left-2-line:before { content: "\ee92"; }
+.ri-layout-left-fill:before { content: "\ee93"; }
+.ri-layout-left-line:before { content: "\ee94"; }
+.ri-layout-line:before { content: "\ee95"; }
+.ri-layout-masonry-fill:before { content: "\ee96"; }
+.ri-layout-masonry-line:before { content: "\ee97"; }
+.ri-layout-right-2-fill:before { content: "\ee98"; }
+.ri-layout-right-2-line:before { content: "\ee99"; }
+.ri-layout-right-fill:before { content: "\ee9a"; }
+.ri-layout-right-line:before { content: "\ee9b"; }
+.ri-layout-row-fill:before { content: "\ee9c"; }
+.ri-layout-row-line:before { content: "\ee9d"; }
+.ri-layout-top-2-fill:before { content: "\ee9e"; }
+.ri-layout-top-2-line:before { content: "\ee9f"; }
+.ri-layout-top-fill:before { content: "\eea0"; }
+.ri-layout-top-line:before { content: "\eea1"; }
+.ri-leaf-fill:before { content: "\eea2"; }
+.ri-leaf-line:before { content: "\eea3"; }
+.ri-lifebuoy-fill:before { content: "\eea4"; }
+.ri-lifebuoy-line:before { content: "\eea5"; }
+.ri-lightbulb-fill:before { content: "\eea6"; }
+.ri-lightbulb-flash-fill:before { content: "\eea7"; }
+.ri-lightbulb-flash-line:before { content: "\eea8"; }
+.ri-lightbulb-line:before { content: "\eea9"; }
+.ri-line-chart-fill:before { content: "\eeaa"; }
+.ri-line-chart-line:before { content: "\eeab"; }
+.ri-line-fill:before { content: "\eeac"; }
+.ri-line-height:before { content: "\eead"; }
+.ri-line-line:before { content: "\eeae"; }
+.ri-link-m:before { content: "\eeaf"; }
+.ri-link-unlink-m:before { content: "\eeb0"; }
+.ri-link-unlink:before { content: "\eeb1"; }
+.ri-link:before { content: "\eeb2"; }
+.ri-linkedin-box-fill:before { content: "\eeb3"; }
+.ri-linkedin-box-line:before { content: "\eeb4"; }
+.ri-linkedin-fill:before { content: "\eeb5"; }
+.ri-linkedin-line:before { content: "\eeb6"; }
+.ri-links-fill:before { content: "\eeb7"; }
+.ri-links-line:before { content: "\eeb8"; }
+.ri-list-check-2:before { content: "\eeb9"; }
+.ri-list-check:before { content: "\eeba"; }
+.ri-list-ordered:before { content: "\eebb"; }
+.ri-list-settings-fill:before { content: "\eebc"; }
+.ri-list-settings-line:before { content: "\eebd"; }
+.ri-list-unordered:before { content: "\eebe"; }
+.ri-live-fill:before { content: "\eebf"; }
+.ri-live-line:before { content: "\eec0"; }
+.ri-loader-2-fill:before { content: "\eec1"; }
+.ri-loader-2-line:before { content: "\eec2"; }
+.ri-loader-3-fill:before { content: "\eec3"; }
+.ri-loader-3-line:before { content: "\eec4"; }
+.ri-loader-4-fill:before { content: "\eec5"; }
+.ri-loader-4-line:before { content: "\eec6"; }
+.ri-loader-5-fill:before { content: "\eec7"; }
+.ri-loader-5-line:before { content: "\eec8"; }
+.ri-loader-fill:before { content: "\eec9"; }
+.ri-loader-line:before { content: "\eeca"; }
+.ri-lock-2-fill:before { content: "\eecb"; }
+.ri-lock-2-line:before { content: "\eecc"; }
+.ri-lock-fill:before { content: "\eecd"; }
+.ri-lock-line:before { content: "\eece"; }
+.ri-lock-password-fill:before { content: "\eecf"; }
+.ri-lock-password-line:before { content: "\eed0"; }
+.ri-lock-unlock-fill:before { content: "\eed1"; }
+.ri-lock-unlock-line:before { content: "\eed2"; }
+.ri-login-box-fill:before { content: "\eed3"; }
+.ri-login-box-line:before { content: "\eed4"; }
+.ri-login-circle-fill:before { content: "\eed5"; }
+.ri-login-circle-line:before { content: "\eed6"; }
+.ri-logout-box-fill:before { content: "\eed7"; }
+.ri-logout-box-line:before { content: "\eed8"; }
+.ri-logout-box-r-fill:before { content: "\eed9"; }
+.ri-logout-box-r-line:before { content: "\eeda"; }
+.ri-logout-circle-fill:before { content: "\eedb"; }
+.ri-logout-circle-line:before { content: "\eedc"; }
+.ri-logout-circle-r-fill:before { content: "\eedd"; }
+.ri-logout-circle-r-line:before { content: "\eede"; }
+.ri-luggage-cart-fill:before { content: "\eedf"; }
+.ri-luggage-cart-line:before { content: "\eee0"; }
+.ri-luggage-deposit-fill:before { content: "\eee1"; }
+.ri-luggage-deposit-line:before { content: "\eee2"; }
+.ri-lungs-fill:before { content: "\eee3"; }
+.ri-lungs-line:before { content: "\eee4"; }
+.ri-mac-fill:before { content: "\eee5"; }
+.ri-mac-line:before { content: "\eee6"; }
+.ri-macbook-fill:before { content: "\eee7"; }
+.ri-macbook-line:before { content: "\eee8"; }
+.ri-magic-fill:before { content: "\eee9"; }
+.ri-magic-line:before { content: "\eeea"; }
+.ri-mail-add-fill:before { content: "\eeeb"; }
+.ri-mail-add-line:before { content: "\eeec"; }
+.ri-mail-check-fill:before { content: "\eeed"; }
+.ri-mail-check-line:before { content: "\eeee"; }
+.ri-mail-close-fill:before { content: "\eeef"; }
+.ri-mail-close-line:before { content: "\eef0"; }
+.ri-mail-download-fill:before { content: "\eef1"; }
+.ri-mail-download-line:before { content: "\eef2"; }
+.ri-mail-fill:before { content: "\eef3"; }
+.ri-mail-forbid-fill:before { content: "\eef4"; }
+.ri-mail-forbid-line:before { content: "\eef5"; }
+.ri-mail-line:before { content: "\eef6"; }
+.ri-mail-lock-fill:before { content: "\eef7"; }
+.ri-mail-lock-line:before { content: "\eef8"; }
+.ri-mail-open-fill:before { content: "\eef9"; }
+.ri-mail-open-line:before { content: "\eefa"; }
+.ri-mail-send-fill:before { content: "\eefb"; }
+.ri-mail-send-line:before { content: "\eefc"; }
+.ri-mail-settings-fill:before { content: "\eefd"; }
+.ri-mail-settings-line:before { content: "\eefe"; }
+.ri-mail-star-fill:before { content: "\eeff"; }
+.ri-mail-star-line:before { content: "\ef00"; }
+.ri-mail-unread-fill:before { content: "\ef01"; }
+.ri-mail-unread-line:before { content: "\ef02"; }
+.ri-mail-volume-fill:before { content: "\ef03"; }
+.ri-mail-volume-line:before { content: "\ef04"; }
+.ri-map-2-fill:before { content: "\ef05"; }
+.ri-map-2-line:before { content: "\ef06"; }
+.ri-map-fill:before { content: "\ef07"; }
+.ri-map-line:before { content: "\ef08"; }
+.ri-map-pin-2-fill:before { content: "\ef09"; }
+.ri-map-pin-2-line:before { content: "\ef0a"; }
+.ri-map-pin-3-fill:before { content: "\ef0b"; }
+.ri-map-pin-3-line:before { content: "\ef0c"; }
+.ri-map-pin-4-fill:before { content: "\ef0d"; }
+.ri-map-pin-4-line:before { content: "\ef0e"; }
+.ri-map-pin-5-fill:before { content: "\ef0f"; }
+.ri-map-pin-5-line:before { content: "\ef10"; }
+.ri-map-pin-add-fill:before { content: "\ef11"; }
+.ri-map-pin-add-line:before { content: "\ef12"; }
+.ri-map-pin-fill:before { content: "\ef13"; }
+.ri-map-pin-line:before { content: "\ef14"; }
+.ri-map-pin-range-fill:before { content: "\ef15"; }
+.ri-map-pin-range-line:before { content: "\ef16"; }
+.ri-map-pin-time-fill:before { content: "\ef17"; }
+.ri-map-pin-time-line:before { content: "\ef18"; }
+.ri-map-pin-user-fill:before { content: "\ef19"; }
+.ri-map-pin-user-line:before { content: "\ef1a"; }
+.ri-mark-pen-fill:before { content: "\ef1b"; }
+.ri-mark-pen-line:before { content: "\ef1c"; }
+.ri-markdown-fill:before { content: "\ef1d"; }
+.ri-markdown-line:before { content: "\ef1e"; }
+.ri-markup-fill:before { content: "\ef1f"; }
+.ri-markup-line:before { content: "\ef20"; }
+.ri-mastercard-fill:before { content: "\ef21"; }
+.ri-mastercard-line:before { content: "\ef22"; }
+.ri-mastodon-fill:before { content: "\ef23"; }
+.ri-mastodon-line:before { content: "\ef24"; }
+.ri-medal-2-fill:before { content: "\ef25"; }
+.ri-medal-2-line:before { content: "\ef26"; }
+.ri-medal-fill:before { content: "\ef27"; }
+.ri-medal-line:before { content: "\ef28"; }
+.ri-medicine-bottle-fill:before { content: "\ef29"; }
+.ri-medicine-bottle-line:before { content: "\ef2a"; }
+.ri-medium-fill:before { content: "\ef2b"; }
+.ri-medium-line:before { content: "\ef2c"; }
+.ri-men-fill:before { content: "\ef2d"; }
+.ri-men-line:before { content: "\ef2e"; }
+.ri-mental-health-fill:before { content: "\ef2f"; }
+.ri-mental-health-line:before { content: "\ef30"; }
+.ri-menu-2-fill:before { content: "\ef31"; }
+.ri-menu-2-line:before { content: "\ef32"; }
+.ri-menu-3-fill:before { content: "\ef33"; }
+.ri-menu-3-line:before { content: "\ef34"; }
+.ri-menu-4-fill:before { content: "\ef35"; }
+.ri-menu-4-line:before { content: "\ef36"; }
+.ri-menu-5-fill:before { content: "\ef37"; }
+.ri-menu-5-line:before { content: "\ef38"; }
+.ri-menu-add-fill:before { content: "\ef39"; }
+.ri-menu-add-line:before { content: "\ef3a"; }
+.ri-menu-fill:before { content: "\ef3b"; }
+.ri-menu-fold-fill:before { content: "\ef3c"; }
+.ri-menu-fold-line:before { content: "\ef3d"; }
+.ri-menu-line:before { content: "\ef3e"; }
+.ri-menu-unfold-fill:before { content: "\ef3f"; }
+.ri-menu-unfold-line:before { content: "\ef40"; }
+.ri-merge-cells-horizontal:before { content: "\ef41"; }
+.ri-merge-cells-vertical:before { content: "\ef42"; }
+.ri-message-2-fill:before { content: "\ef43"; }
+.ri-message-2-line:before { content: "\ef44"; }
+.ri-message-3-fill:before { content: "\ef45"; }
+.ri-message-3-line:before { content: "\ef46"; }
+.ri-message-fill:before { content: "\ef47"; }
+.ri-message-line:before { content: "\ef48"; }
+.ri-messenger-fill:before { content: "\ef49"; }
+.ri-messenger-line:before { content: "\ef4a"; }
+.ri-meteor-fill:before { content: "\ef4b"; }
+.ri-meteor-line:before { content: "\ef4c"; }
+.ri-mic-2-fill:before { content: "\ef4d"; }
+.ri-mic-2-line:before { content: "\ef4e"; }
+.ri-mic-fill:before { content: "\ef4f"; }
+.ri-mic-line:before { content: "\ef50"; }
+.ri-mic-off-fill:before { content: "\ef51"; }
+.ri-mic-off-line:before { content: "\ef52"; }
+.ri-mickey-fill:before { content: "\ef53"; }
+.ri-mickey-line:before { content: "\ef54"; }
+.ri-microscope-fill:before { content: "\ef55"; }
+.ri-microscope-line:before { content: "\ef56"; }
+.ri-microsoft-fill:before { content: "\ef57"; }
+.ri-microsoft-line:before { content: "\ef58"; }
+.ri-mind-map:before { content: "\ef59"; }
+.ri-mini-program-fill:before { content: "\ef5a"; }
+.ri-mini-program-line:before { content: "\ef5b"; }
+.ri-mist-fill:before { content: "\ef5c"; }
+.ri-mist-line:before { content: "\ef5d"; }
+.ri-money-cny-box-fill:before { content: "\ef5e"; }
+.ri-money-cny-box-line:before { content: "\ef5f"; }
+.ri-money-cny-circle-fill:before { content: "\ef60"; }
+.ri-money-cny-circle-line:before { content: "\ef61"; }
+.ri-money-dollar-box-fill:before { content: "\ef62"; }
+.ri-money-dollar-box-line:before { content: "\ef63"; }
+.ri-money-dollar-circle-fill:before { content: "\ef64"; }
+.ri-money-dollar-circle-line:before { content: "\ef65"; }
+.ri-money-euro-box-fill:before { content: "\ef66"; }
+.ri-money-euro-box-line:before { content: "\ef67"; }
+.ri-money-euro-circle-fill:before { content: "\ef68"; }
+.ri-money-euro-circle-line:before { content: "\ef69"; }
+.ri-money-pound-box-fill:before { content: "\ef6a"; }
+.ri-money-pound-box-line:before { content: "\ef6b"; }
+.ri-money-pound-circle-fill:before { content: "\ef6c"; }
+.ri-money-pound-circle-line:before { content: "\ef6d"; }
+.ri-moon-clear-fill:before { content: "\ef6e"; }
+.ri-moon-clear-line:before { content: "\ef6f"; }
+.ri-moon-cloudy-fill:before { content: "\ef70"; }
+.ri-moon-cloudy-line:before { content: "\ef71"; }
+.ri-moon-fill:before { content: "\ef72"; }
+.ri-moon-foggy-fill:before { content: "\ef73"; }
+.ri-moon-foggy-line:before { content: "\ef74"; }
+.ri-moon-line:before { content: "\ef75"; }
+.ri-more-2-fill:before { content: "\ef76"; }
+.ri-more-2-line:before { content: "\ef77"; }
+.ri-more-fill:before { content: "\ef78"; }
+.ri-more-line:before { content: "\ef79"; }
+.ri-motorbike-fill:before { content: "\ef7a"; }
+.ri-motorbike-line:before { content: "\ef7b"; }
+.ri-mouse-fill:before { content: "\ef7c"; }
+.ri-mouse-line:before { content: "\ef7d"; }
+.ri-movie-2-fill:before { content: "\ef7e"; }
+.ri-movie-2-line:before { content: "\ef7f"; }
+.ri-movie-fill:before { content: "\ef80"; }
+.ri-movie-line:before { content: "\ef81"; }
+.ri-music-2-fill:before { content: "\ef82"; }
+.ri-music-2-line:before { content: "\ef83"; }
+.ri-music-fill:before { content: "\ef84"; }
+.ri-music-line:before { content: "\ef85"; }
+.ri-mv-fill:before { content: "\ef86"; }
+.ri-mv-line:before { content: "\ef87"; }
+.ri-navigation-fill:before { content: "\ef88"; }
+.ri-navigation-line:before { content: "\ef89"; }
+.ri-netease-cloud-music-fill:before { content: "\ef8a"; }
+.ri-netease-cloud-music-line:before { content: "\ef8b"; }
+.ri-netflix-fill:before { content: "\ef8c"; }
+.ri-netflix-line:before { content: "\ef8d"; }
+.ri-newspaper-fill:before { content: "\ef8e"; }
+.ri-newspaper-line:before { content: "\ef8f"; }
+.ri-node-tree:before { content: "\ef90"; }
+.ri-notification-2-fill:before { content: "\ef91"; }
+.ri-notification-2-line:before { content: "\ef92"; }
+.ri-notification-3-fill:before { content: "\ef93"; }
+.ri-notification-3-line:before { content: "\ef94"; }
+.ri-notification-4-fill:before { content: "\ef95"; }
+.ri-notification-4-line:before { content: "\ef96"; }
+.ri-notification-badge-fill:before { content: "\ef97"; }
+.ri-notification-badge-line:before { content: "\ef98"; }
+.ri-notification-fill:before { content: "\ef99"; }
+.ri-notification-line:before { content: "\ef9a"; }
+.ri-notification-off-fill:before { content: "\ef9b"; }
+.ri-notification-off-line:before { content: "\ef9c"; }
+.ri-npmjs-fill:before { content: "\ef9d"; }
+.ri-npmjs-line:before { content: "\ef9e"; }
+.ri-number-0:before { content: "\ef9f"; }
+.ri-number-1:before { content: "\efa0"; }
+.ri-number-2:before { content: "\efa1"; }
+.ri-number-3:before { content: "\efa2"; }
+.ri-number-4:before { content: "\efa3"; }
+.ri-number-5:before { content: "\efa4"; }
+.ri-number-6:before { content: "\efa5"; }
+.ri-number-7:before { content: "\efa6"; }
+.ri-number-8:before { content: "\efa7"; }
+.ri-number-9:before { content: "\efa8"; }
+.ri-numbers-fill:before { content: "\efa9"; }
+.ri-numbers-line:before { content: "\efaa"; }
+.ri-nurse-fill:before { content: "\efab"; }
+.ri-nurse-line:before { content: "\efac"; }
+.ri-oil-fill:before { content: "\efad"; }
+.ri-oil-line:before { content: "\efae"; }
+.ri-omega:before { content: "\efaf"; }
+.ri-open-arm-fill:before { content: "\efb0"; }
+.ri-open-arm-line:before { content: "\efb1"; }
+.ri-open-source-fill:before { content: "\efb2"; }
+.ri-open-source-line:before { content: "\efb3"; }
+.ri-opera-fill:before { content: "\efb4"; }
+.ri-opera-line:before { content: "\efb5"; }
+.ri-order-play-fill:before { content: "\efb6"; }
+.ri-order-play-line:before { content: "\efb7"; }
+.ri-organization-chart:before { content: "\efb8"; }
+.ri-outlet-2-fill:before { content: "\efb9"; }
+.ri-outlet-2-line:before { content: "\efba"; }
+.ri-outlet-fill:before { content: "\efbb"; }
+.ri-outlet-line:before { content: "\efbc"; }
+.ri-page-separator:before { content: "\efbd"; }
+.ri-pages-fill:before { content: "\efbe"; }
+.ri-pages-line:before { content: "\efbf"; }
+.ri-paint-brush-fill:before { content: "\efc0"; }
+.ri-paint-brush-line:before { content: "\efc1"; }
+.ri-paint-fill:before { content: "\efc2"; }
+.ri-paint-line:before { content: "\efc3"; }
+.ri-palette-fill:before { content: "\efc4"; }
+.ri-palette-line:before { content: "\efc5"; }
+.ri-pantone-fill:before { content: "\efc6"; }
+.ri-pantone-line:before { content: "\efc7"; }
+.ri-paragraph:before { content: "\efc8"; }
+.ri-parent-fill:before { content: "\efc9"; }
+.ri-parent-line:before { content: "\efca"; }
+.ri-parentheses-fill:before { content: "\efcb"; }
+.ri-parentheses-line:before { content: "\efcc"; }
+.ri-parking-box-fill:before { content: "\efcd"; }
+.ri-parking-box-line:before { content: "\efce"; }
+.ri-parking-fill:before { content: "\efcf"; }
+.ri-parking-line:before { content: "\efd0"; }
+.ri-passport-fill:before { content: "\efd1"; }
+.ri-passport-line:before { content: "\efd2"; }
+.ri-patreon-fill:before { content: "\efd3"; }
+.ri-patreon-line:before { content: "\efd4"; }
+.ri-pause-circle-fill:before { content: "\efd5"; }
+.ri-pause-circle-line:before { content: "\efd6"; }
+.ri-pause-fill:before { content: "\efd7"; }
+.ri-pause-line:before { content: "\efd8"; }
+.ri-pause-mini-fill:before { content: "\efd9"; }
+.ri-pause-mini-line:before { content: "\efda"; }
+.ri-paypal-fill:before { content: "\efdb"; }
+.ri-paypal-line:before { content: "\efdc"; }
+.ri-pen-nib-fill:before { content: "\efdd"; }
+.ri-pen-nib-line:before { content: "\efde"; }
+.ri-pencil-fill:before { content: "\efdf"; }
+.ri-pencil-line:before { content: "\efe0"; }
+.ri-pencil-ruler-2-fill:before { content: "\efe1"; }
+.ri-pencil-ruler-2-line:before { content: "\efe2"; }
+.ri-pencil-ruler-fill:before { content: "\efe3"; }
+.ri-pencil-ruler-line:before { content: "\efe4"; }
+.ri-percent-fill:before { content: "\efe5"; }
+.ri-percent-line:before { content: "\efe6"; }
+.ri-phone-camera-fill:before { content: "\efe7"; }
+.ri-phone-camera-line:before { content: "\efe8"; }
+.ri-phone-fill:before { content: "\efe9"; }
+.ri-phone-find-fill:before { content: "\efea"; }
+.ri-phone-find-line:before { content: "\efeb"; }
+.ri-phone-line:before { content: "\efec"; }
+.ri-phone-lock-fill:before { content: "\efed"; }
+.ri-phone-lock-line:before { content: "\efee"; }
+.ri-picture-in-picture-2-fill:before { content: "\efef"; }
+.ri-picture-in-picture-2-line:before { content: "\eff0"; }
+.ri-picture-in-picture-exit-fill:before { content: "\eff1"; }
+.ri-picture-in-picture-exit-line:before { content: "\eff2"; }
+.ri-picture-in-picture-fill:before { content: "\eff3"; }
+.ri-picture-in-picture-line:before { content: "\eff4"; }
+.ri-pie-chart-2-fill:before { content: "\eff5"; }
+.ri-pie-chart-2-line:before { content: "\eff6"; }
+.ri-pie-chart-box-fill:before { content: "\eff7"; }
+.ri-pie-chart-box-line:before { content: "\eff8"; }
+.ri-pie-chart-fill:before { content: "\eff9"; }
+.ri-pie-chart-line:before { content: "\effa"; }
+.ri-pin-distance-fill:before { content: "\effb"; }
+.ri-pin-distance-line:before { content: "\effc"; }
+.ri-ping-pong-fill:before { content: "\effd"; }
+.ri-ping-pong-line:before { content: "\effe"; }
+.ri-pinterest-fill:before { content: "\efff"; }
+.ri-pinterest-line:before { content: "\f000"; }
+.ri-pinyin-input:before { content: "\f001"; }
+.ri-pixelfed-fill:before { content: "\f002"; }
+.ri-pixelfed-line:before { content: "\f003"; }
+.ri-plane-fill:before { content: "\f004"; }
+.ri-plane-line:before { content: "\f005"; }
+.ri-plant-fill:before { content: "\f006"; }
+.ri-plant-line:before { content: "\f007"; }
+.ri-play-circle-fill:before { content: "\f008"; }
+.ri-play-circle-line:before { content: "\f009"; }
+.ri-play-fill:before { content: "\f00a"; }
+.ri-play-line:before { content: "\f00b"; }
+.ri-play-list-2-fill:before { content: "\f00c"; }
+.ri-play-list-2-line:before { content: "\f00d"; }
+.ri-play-list-add-fill:before { content: "\f00e"; }
+.ri-play-list-add-line:before { content: "\f00f"; }
+.ri-play-list-fill:before { content: "\f010"; }
+.ri-play-list-line:before { content: "\f011"; }
+.ri-play-mini-fill:before { content: "\f012"; }
+.ri-play-mini-line:before { content: "\f013"; }
+.ri-playstation-fill:before { content: "\f014"; }
+.ri-playstation-line:before { content: "\f015"; }
+.ri-plug-2-fill:before { content: "\f016"; }
+.ri-plug-2-line:before { content: "\f017"; }
+.ri-plug-fill:before { content: "\f018"; }
+.ri-plug-line:before { content: "\f019"; }
+.ri-polaroid-2-fill:before { content: "\f01a"; }
+.ri-polaroid-2-line:before { content: "\f01b"; }
+.ri-polaroid-fill:before { content: "\f01c"; }
+.ri-polaroid-line:before { content: "\f01d"; }
+.ri-police-car-fill:before { content: "\f01e"; }
+.ri-police-car-line:before { content: "\f01f"; }
+.ri-price-tag-2-fill:before { content: "\f020"; }
+.ri-price-tag-2-line:before { content: "\f021"; }
+.ri-price-tag-3-fill:before { content: "\f022"; }
+.ri-price-tag-3-line:before { content: "\f023"; }
+.ri-price-tag-fill:before { content: "\f024"; }
+.ri-price-tag-line:before { content: "\f025"; }
+.ri-printer-cloud-fill:before { content: "\f026"; }
+.ri-printer-cloud-line:before { content: "\f027"; }
+.ri-printer-fill:before { content: "\f028"; }
+.ri-printer-line:before { content: "\f029"; }
+.ri-product-hunt-fill:before { content: "\f02a"; }
+.ri-product-hunt-line:before { content: "\f02b"; }
+.ri-profile-fill:before { content: "\f02c"; }
+.ri-profile-line:before { content: "\f02d"; }
+.ri-projector-2-fill:before { content: "\f02e"; }
+.ri-projector-2-line:before { content: "\f02f"; }
+.ri-projector-fill:before { content: "\f030"; }
+.ri-projector-line:before { content: "\f031"; }
+.ri-psychotherapy-fill:before { content: "\f032"; }
+.ri-psychotherapy-line:before { content: "\f033"; }
+.ri-pulse-fill:before { content: "\f034"; }
+.ri-pulse-line:before { content: "\f035"; }
+.ri-pushpin-2-fill:before { content: "\f036"; }
+.ri-pushpin-2-line:before { content: "\f037"; }
+.ri-pushpin-fill:before { content: "\f038"; }
+.ri-pushpin-line:before { content: "\f039"; }
+.ri-qq-fill:before { content: "\f03a"; }
+.ri-qq-line:before { content: "\f03b"; }
+.ri-qr-code-fill:before { content: "\f03c"; }
+.ri-qr-code-line:before { content: "\f03d"; }
+.ri-qr-scan-2-fill:before { content: "\f03e"; }
+.ri-qr-scan-2-line:before { content: "\f03f"; }
+.ri-qr-scan-fill:before { content: "\f040"; }
+.ri-qr-scan-line:before { content: "\f041"; }
+.ri-question-answer-fill:before { content: "\f042"; }
+.ri-question-answer-line:before { content: "\f043"; }
+.ri-question-fill:before { content: "\f044"; }
+.ri-question-line:before { content: "\f045"; }
+.ri-question-mark:before { content: "\f046"; }
+.ri-questionnaire-fill:before { content: "\f047"; }
+.ri-questionnaire-line:before { content: "\f048"; }
+.ri-quill-pen-fill:before { content: "\f049"; }
+.ri-quill-pen-line:before { content: "\f04a"; }
+.ri-radar-fill:before { content: "\f04b"; }
+.ri-radar-line:before { content: "\f04c"; }
+.ri-radio-2-fill:before { content: "\f04d"; }
+.ri-radio-2-line:before { content: "\f04e"; }
+.ri-radio-button-fill:before { content: "\f04f"; }
+.ri-radio-button-line:before { content: "\f050"; }
+.ri-radio-fill:before { content: "\f051"; }
+.ri-radio-line:before { content: "\f052"; }
+.ri-rainbow-fill:before { content: "\f053"; }
+.ri-rainbow-line:before { content: "\f054"; }
+.ri-rainy-fill:before { content: "\f055"; }
+.ri-rainy-line:before { content: "\f056"; }
+.ri-reactjs-fill:before { content: "\f057"; }
+.ri-reactjs-line:before { content: "\f058"; }
+.ri-record-circle-fill:before { content: "\f059"; }
+.ri-record-circle-line:before { content: "\f05a"; }
+.ri-record-mail-fill:before { content: "\f05b"; }
+.ri-record-mail-line:before { content: "\f05c"; }
+.ri-recycle-fill:before { content: "\f05d"; }
+.ri-recycle-line:before { content: "\f05e"; }
+.ri-red-packet-fill:before { content: "\f05f"; }
+.ri-red-packet-line:before { content: "\f060"; }
+.ri-reddit-fill:before { content: "\f061"; }
+.ri-reddit-line:before { content: "\f062"; }
+.ri-refresh-fill:before { content: "\f063"; }
+.ri-refresh-line:before { content: "\f064"; }
+.ri-refund-2-fill:before { content: "\f065"; }
+.ri-refund-2-line:before { content: "\f066"; }
+.ri-refund-fill:before { content: "\f067"; }
+.ri-refund-line:before { content: "\f068"; }
+.ri-registered-fill:before { content: "\f069"; }
+.ri-registered-line:before { content: "\f06a"; }
+.ri-remixicon-fill:before { content: "\f06b"; }
+.ri-remixicon-line:before { content: "\f06c"; }
+.ri-remote-control-2-fill:before { content: "\f06d"; }
+.ri-remote-control-2-line:before { content: "\f06e"; }
+.ri-remote-control-fill:before { content: "\f06f"; }
+.ri-remote-control-line:before { content: "\f070"; }
+.ri-repeat-2-fill:before { content: "\f071"; }
+.ri-repeat-2-line:before { content: "\f072"; }
+.ri-repeat-fill:before { content: "\f073"; }
+.ri-repeat-line:before { content: "\f074"; }
+.ri-repeat-one-fill:before { content: "\f075"; }
+.ri-repeat-one-line:before { content: "\f076"; }
+.ri-reply-all-fill:before { content: "\f077"; }
+.ri-reply-all-line:before { content: "\f078"; }
+.ri-reply-fill:before { content: "\f079"; }
+.ri-reply-line:before { content: "\f07a"; }
+.ri-reserved-fill:before { content: "\f07b"; }
+.ri-reserved-line:before { content: "\f07c"; }
+.ri-rest-time-fill:before { content: "\f07d"; }
+.ri-rest-time-line:before { content: "\f07e"; }
+.ri-restart-fill:before { content: "\f07f"; }
+.ri-restart-line:before { content: "\f080"; }
+.ri-restaurant-2-fill:before { content: "\f081"; }
+.ri-restaurant-2-line:before { content: "\f082"; }
+.ri-restaurant-fill:before { content: "\f083"; }
+.ri-restaurant-line:before { content: "\f084"; }
+.ri-rewind-fill:before { content: "\f085"; }
+.ri-rewind-line:before { content: "\f086"; }
+.ri-rewind-mini-fill:before { content: "\f087"; }
+.ri-rewind-mini-line:before { content: "\f088"; }
+.ri-rhythm-fill:before { content: "\f089"; }
+.ri-rhythm-line:before { content: "\f08a"; }
+.ri-riding-fill:before { content: "\f08b"; }
+.ri-riding-line:before { content: "\f08c"; }
+.ri-road-map-fill:before { content: "\f08d"; }
+.ri-road-map-line:before { content: "\f08e"; }
+.ri-roadster-fill:before { content: "\f08f"; }
+.ri-roadster-line:before { content: "\f090"; }
+.ri-robot-fill:before { content: "\f091"; }
+.ri-robot-line:before { content: "\f092"; }
+.ri-rocket-2-fill:before { content: "\f093"; }
+.ri-rocket-2-line:before { content: "\f094"; }
+.ri-rocket-fill:before { content: "\f095"; }
+.ri-rocket-line:before { content: "\f096"; }
+.ri-rotate-lock-fill:before { content: "\f097"; }
+.ri-rotate-lock-line:before { content: "\f098"; }
+.ri-rounded-corner:before { content: "\f099"; }
+.ri-route-fill:before { content: "\f09a"; }
+.ri-route-line:before { content: "\f09b"; }
+.ri-router-fill:before { content: "\f09c"; }
+.ri-router-line:before { content: "\f09d"; }
+.ri-rss-fill:before { content: "\f09e"; }
+.ri-rss-line:before { content: "\f09f"; }
+.ri-ruler-2-fill:before { content: "\f0a0"; }
+.ri-ruler-2-line:before { content: "\f0a1"; }
+.ri-ruler-fill:before { content: "\f0a2"; }
+.ri-ruler-line:before { content: "\f0a3"; }
+.ri-run-fill:before { content: "\f0a4"; }
+.ri-run-line:before { content: "\f0a5"; }
+.ri-safari-fill:before { content: "\f0a6"; }
+.ri-safari-line:before { content: "\f0a7"; }
+.ri-safe-2-fill:before { content: "\f0a8"; }
+.ri-safe-2-line:before { content: "\f0a9"; }
+.ri-safe-fill:before { content: "\f0aa"; }
+.ri-safe-line:before { content: "\f0ab"; }
+.ri-sailboat-fill:before { content: "\f0ac"; }
+.ri-sailboat-line:before { content: "\f0ad"; }
+.ri-save-2-fill:before { content: "\f0ae"; }
+.ri-save-2-line:before { content: "\f0af"; }
+.ri-save-3-fill:before { content: "\f0b0"; }
+.ri-save-3-line:before { content: "\f0b1"; }
+.ri-save-fill:before { content: "\f0b2"; }
+.ri-save-line:before { content: "\f0b3"; }
+.ri-scales-2-fill:before { content: "\f0b4"; }
+.ri-scales-2-line:before { content: "\f0b5"; }
+.ri-scales-3-fill:before { content: "\f0b6"; }
+.ri-scales-3-line:before { content: "\f0b7"; }
+.ri-scales-fill:before { content: "\f0b8"; }
+.ri-scales-line:before { content: "\f0b9"; }
+.ri-scan-2-fill:before { content: "\f0ba"; }
+.ri-scan-2-line:before { content: "\f0bb"; }
+.ri-scan-fill:before { content: "\f0bc"; }
+.ri-scan-line:before { content: "\f0bd"; }
+.ri-scissors-2-fill:before { content: "\f0be"; }
+.ri-scissors-2-line:before { content: "\f0bf"; }
+.ri-scissors-cut-fill:before { content: "\f0c0"; }
+.ri-scissors-cut-line:before { content: "\f0c1"; }
+.ri-scissors-fill:before { content: "\f0c2"; }
+.ri-scissors-line:before { content: "\f0c3"; }
+.ri-screenshot-2-fill:before { content: "\f0c4"; }
+.ri-screenshot-2-line:before { content: "\f0c5"; }
+.ri-screenshot-fill:before { content: "\f0c6"; }
+.ri-screenshot-line:before { content: "\f0c7"; }
+.ri-sd-card-fill:before { content: "\f0c8"; }
+.ri-sd-card-line:before { content: "\f0c9"; }
+.ri-sd-card-mini-fill:before { content: "\f0ca"; }
+.ri-sd-card-mini-line:before { content: "\f0cb"; }
+.ri-search-2-fill:before { content: "\f0cc"; }
+.ri-search-2-line:before { content: "\f0cd"; }
+.ri-search-eye-fill:before { content: "\f0ce"; }
+.ri-search-eye-line:before { content: "\f0cf"; }
+.ri-search-fill:before { content: "\f0d0"; }
+.ri-search-line:before { content: "\f0d1"; }
+.ri-secure-payment-fill:before { content: "\f0d2"; }
+.ri-secure-payment-line:before { content: "\f0d3"; }
+.ri-seedling-fill:before { content: "\f0d4"; }
+.ri-seedling-line:before { content: "\f0d5"; }
+.ri-send-backward:before { content: "\f0d6"; }
+.ri-send-plane-2-fill:before { content: "\f0d7"; }
+.ri-send-plane-2-line:before { content: "\f0d8"; }
+.ri-send-plane-fill:before { content: "\f0d9"; }
+.ri-send-plane-line:before { content: "\f0da"; }
+.ri-send-to-back:before { content: "\f0db"; }
+.ri-sensor-fill:before { content: "\f0dc"; }
+.ri-sensor-line:before { content: "\f0dd"; }
+.ri-separator:before { content: "\f0de"; }
+.ri-server-fill:before { content: "\f0df"; }
+.ri-server-line:before { content: "\f0e0"; }
+.ri-service-fill:before { content: "\f0e1"; }
+.ri-service-line:before { content: "\f0e2"; }
+.ri-settings-2-fill:before { content: "\f0e3"; }
+.ri-settings-2-line:before { content: "\f0e4"; }
+.ri-settings-3-fill:before { content: "\f0e5"; }
+.ri-settings-3-line:before { content: "\f0e6"; }
+.ri-settings-4-fill:before { content: "\f0e7"; }
+.ri-settings-4-line:before { content: "\f0e8"; }
+.ri-settings-5-fill:before { content: "\f0e9"; }
+.ri-settings-5-line:before { content: "\f0ea"; }
+.ri-settings-6-fill:before { content: "\f0eb"; }
+.ri-settings-6-line:before { content: "\f0ec"; }
+.ri-settings-fill:before { content: "\f0ed"; }
+.ri-settings-line:before { content: "\f0ee"; }
+.ri-shape-2-fill:before { content: "\f0ef"; }
+.ri-shape-2-line:before { content: "\f0f0"; }
+.ri-shape-fill:before { content: "\f0f1"; }
+.ri-shape-line:before { content: "\f0f2"; }
+.ri-share-box-fill:before { content: "\f0f3"; }
+.ri-share-box-line:before { content: "\f0f4"; }
+.ri-share-circle-fill:before { content: "\f0f5"; }
+.ri-share-circle-line:before { content: "\f0f6"; }
+.ri-share-fill:before { content: "\f0f7"; }
+.ri-share-forward-2-fill:before { content: "\f0f8"; }
+.ri-share-forward-2-line:before { content: "\f0f9"; }
+.ri-share-forward-box-fill:before { content: "\f0fa"; }
+.ri-share-forward-box-line:before { content: "\f0fb"; }
+.ri-share-forward-fill:before { content: "\f0fc"; }
+.ri-share-forward-line:before { content: "\f0fd"; }
+.ri-share-line:before { content: "\f0fe"; }
+.ri-shield-check-fill:before { content: "\f0ff"; }
+.ri-shield-check-line:before { content: "\f100"; }
+.ri-shield-cross-fill:before { content: "\f101"; }
+.ri-shield-cross-line:before { content: "\f102"; }
+.ri-shield-fill:before { content: "\f103"; }
+.ri-shield-flash-fill:before { content: "\f104"; }
+.ri-shield-flash-line:before { content: "\f105"; }
+.ri-shield-keyhole-fill:before { content: "\f106"; }
+.ri-shield-keyhole-line:before { content: "\f107"; }
+.ri-shield-line:before { content: "\f108"; }
+.ri-shield-star-fill:before { content: "\f109"; }
+.ri-shield-star-line:before { content: "\f10a"; }
+.ri-shield-user-fill:before { content: "\f10b"; }
+.ri-shield-user-line:before { content: "\f10c"; }
+.ri-ship-2-fill:before { content: "\f10d"; }
+.ri-ship-2-line:before { content: "\f10e"; }
+.ri-ship-fill:before { content: "\f10f"; }
+.ri-ship-line:before { content: "\f110"; }
+.ri-shirt-fill:before { content: "\f111"; }
+.ri-shirt-line:before { content: "\f112"; }
+.ri-shopping-bag-2-fill:before { content: "\f113"; }
+.ri-shopping-bag-2-line:before { content: "\f114"; }
+.ri-shopping-bag-3-fill:before { content: "\f115"; }
+.ri-shopping-bag-3-line:before { content: "\f116"; }
+.ri-shopping-bag-fill:before { content: "\f117"; }
+.ri-shopping-bag-line:before { content: "\f118"; }
+.ri-shopping-basket-2-fill:before { content: "\f119"; }
+.ri-shopping-basket-2-line:before { content: "\f11a"; }
+.ri-shopping-basket-fill:before { content: "\f11b"; }
+.ri-shopping-basket-line:before { content: "\f11c"; }
+.ri-shopping-cart-2-fill:before { content: "\f11d"; }
+.ri-shopping-cart-2-line:before { content: "\f11e"; }
+.ri-shopping-cart-fill:before { content: "\f11f"; }
+.ri-shopping-cart-line:before { content: "\f120"; }
+.ri-showers-fill:before { content: "\f121"; }
+.ri-showers-line:before { content: "\f122"; }
+.ri-shuffle-fill:before { content: "\f123"; }
+.ri-shuffle-line:before { content: "\f124"; }
+.ri-shut-down-fill:before { content: "\f125"; }
+.ri-shut-down-line:before { content: "\f126"; }
+.ri-side-bar-fill:before { content: "\f127"; }
+.ri-side-bar-line:before { content: "\f128"; }
+.ri-signal-tower-fill:before { content: "\f129"; }
+.ri-signal-tower-line:before { content: "\f12a"; }
+.ri-signal-wifi-1-fill:before { content: "\f12b"; }
+.ri-signal-wifi-1-line:before { content: "\f12c"; }
+.ri-signal-wifi-2-fill:before { content: "\f12d"; }
+.ri-signal-wifi-2-line:before { content: "\f12e"; }
+.ri-signal-wifi-3-fill:before { content: "\f12f"; }
+.ri-signal-wifi-3-line:before { content: "\f130"; }
+.ri-signal-wifi-error-fill:before { content: "\f131"; }
+.ri-signal-wifi-error-line:before { content: "\f132"; }
+.ri-signal-wifi-fill:before { content: "\f133"; }
+.ri-signal-wifi-line:before { content: "\f134"; }
+.ri-signal-wifi-off-fill:before { content: "\f135"; }
+.ri-signal-wifi-off-line:before { content: "\f136"; }
+.ri-sim-card-2-fill:before { content: "\f137"; }
+.ri-sim-card-2-line:before { content: "\f138"; }
+.ri-sim-card-fill:before { content: "\f139"; }
+.ri-sim-card-line:before { content: "\f13a"; }
+.ri-single-quotes-l:before { content: "\f13b"; }
+.ri-single-quotes-r:before { content: "\f13c"; }
+.ri-sip-fill:before { content: "\f13d"; }
+.ri-sip-line:before { content: "\f13e"; }
+.ri-skip-back-fill:before { content: "\f13f"; }
+.ri-skip-back-line:before { content: "\f140"; }
+.ri-skip-back-mini-fill:before { content: "\f141"; }
+.ri-skip-back-mini-line:before { content: "\f142"; }
+.ri-skip-forward-fill:before { content: "\f143"; }
+.ri-skip-forward-line:before { content: "\f144"; }
+.ri-skip-forward-mini-fill:before { content: "\f145"; }
+.ri-skip-forward-mini-line:before { content: "\f146"; }
+.ri-skull-2-fill:before { content: "\f147"; }
+.ri-skull-2-line:before { content: "\f148"; }
+.ri-skull-fill:before { content: "\f149"; }
+.ri-skull-line:before { content: "\f14a"; }
+.ri-skype-fill:before { content: "\f14b"; }
+.ri-skype-line:before { content: "\f14c"; }
+.ri-slack-fill:before { content: "\f14d"; }
+.ri-slack-line:before { content: "\f14e"; }
+.ri-slice-fill:before { content: "\f14f"; }
+.ri-slice-line:before { content: "\f150"; }
+.ri-slideshow-2-fill:before { content: "\f151"; }
+.ri-slideshow-2-line:before { content: "\f152"; }
+.ri-slideshow-3-fill:before { content: "\f153"; }
+.ri-slideshow-3-line:before { content: "\f154"; }
+.ri-slideshow-4-fill:before { content: "\f155"; }
+.ri-slideshow-4-line:before { content: "\f156"; }
+.ri-slideshow-fill:before { content: "\f157"; }
+.ri-slideshow-line:before { content: "\f158"; }
+.ri-smartphone-fill:before { content: "\f159"; }
+.ri-smartphone-line:before { content: "\f15a"; }
+.ri-snapchat-fill:before { content: "\f15b"; }
+.ri-snapchat-line:before { content: "\f15c"; }
+.ri-snowy-fill:before { content: "\f15d"; }
+.ri-snowy-line:before { content: "\f15e"; }
+.ri-sort-asc:before { content: "\f15f"; }
+.ri-sort-desc:before { content: "\f160"; }
+.ri-sound-module-fill:before { content: "\f161"; }
+.ri-sound-module-line:before { content: "\f162"; }
+.ri-soundcloud-fill:before { content: "\f163"; }
+.ri-soundcloud-line:before { content: "\f164"; }
+.ri-space-ship-fill:before { content: "\f165"; }
+.ri-space-ship-line:before { content: "\f166"; }
+.ri-space:before { content: "\f167"; }
+.ri-spam-2-fill:before { content: "\f168"; }
+.ri-spam-2-line:before { content: "\f169"; }
+.ri-spam-3-fill:before { content: "\f16a"; }
+.ri-spam-3-line:before { content: "\f16b"; }
+.ri-spam-fill:before { content: "\f16c"; }
+.ri-spam-line:before { content: "\f16d"; }
+.ri-speaker-2-fill:before { content: "\f16e"; }
+.ri-speaker-2-line:before { content: "\f16f"; }
+.ri-speaker-3-fill:before { content: "\f170"; }
+.ri-speaker-3-line:before { content: "\f171"; }
+.ri-speaker-fill:before { content: "\f172"; }
+.ri-speaker-line:before { content: "\f173"; }
+.ri-spectrum-fill:before { content: "\f174"; }
+.ri-spectrum-line:before { content: "\f175"; }
+.ri-speed-fill:before { content: "\f176"; }
+.ri-speed-line:before { content: "\f177"; }
+.ri-speed-mini-fill:before { content: "\f178"; }
+.ri-speed-mini-line:before { content: "\f179"; }
+.ri-split-cells-horizontal:before { content: "\f17a"; }
+.ri-split-cells-vertical:before { content: "\f17b"; }
+.ri-spotify-fill:before { content: "\f17c"; }
+.ri-spotify-line:before { content: "\f17d"; }
+.ri-spy-fill:before { content: "\f17e"; }
+.ri-spy-line:before { content: "\f17f"; }
+.ri-stack-fill:before { content: "\f180"; }
+.ri-stack-line:before { content: "\f181"; }
+.ri-stack-overflow-fill:before { content: "\f182"; }
+.ri-stack-overflow-line:before { content: "\f183"; }
+.ri-stackshare-fill:before { content: "\f184"; }
+.ri-stackshare-line:before { content: "\f185"; }
+.ri-star-fill:before { content: "\f186"; }
+.ri-star-half-fill:before { content: "\f187"; }
+.ri-star-half-line:before { content: "\f188"; }
+.ri-star-half-s-fill:before { content: "\f189"; }
+.ri-star-half-s-line:before { content: "\f18a"; }
+.ri-star-line:before { content: "\f18b"; }
+.ri-star-s-fill:before { content: "\f18c"; }
+.ri-star-s-line:before { content: "\f18d"; }
+.ri-star-smile-fill:before { content: "\f18e"; }
+.ri-star-smile-line:before { content: "\f18f"; }
+.ri-steam-fill:before { content: "\f190"; }
+.ri-steam-line:before { content: "\f191"; }
+.ri-steering-2-fill:before { content: "\f192"; }
+.ri-steering-2-line:before { content: "\f193"; }
+.ri-steering-fill:before { content: "\f194"; }
+.ri-steering-line:before { content: "\f195"; }
+.ri-stethoscope-fill:before { content: "\f196"; }
+.ri-stethoscope-line:before { content: "\f197"; }
+.ri-sticky-note-2-fill:before { content: "\f198"; }
+.ri-sticky-note-2-line:before { content: "\f199"; }
+.ri-sticky-note-fill:before { content: "\f19a"; }
+.ri-sticky-note-line:before { content: "\f19b"; }
+.ri-stock-fill:before { content: "\f19c"; }
+.ri-stock-line:before { content: "\f19d"; }
+.ri-stop-circle-fill:before { content: "\f19e"; }
+.ri-stop-circle-line:before { content: "\f19f"; }
+.ri-stop-fill:before { content: "\f1a0"; }
+.ri-stop-line:before { content: "\f1a1"; }
+.ri-stop-mini-fill:before { content: "\f1a2"; }
+.ri-stop-mini-line:before { content: "\f1a3"; }
+.ri-store-2-fill:before { content: "\f1a4"; }
+.ri-store-2-line:before { content: "\f1a5"; }
+.ri-store-3-fill:before { content: "\f1a6"; }
+.ri-store-3-line:before { content: "\f1a7"; }
+.ri-store-fill:before { content: "\f1a8"; }
+.ri-store-line:before { content: "\f1a9"; }
+.ri-strikethrough-2:before { content: "\f1aa"; }
+.ri-strikethrough:before { content: "\f1ab"; }
+.ri-subscript-2:before { content: "\f1ac"; }
+.ri-subscript:before { content: "\f1ad"; }
+.ri-subtract-fill:before { content: "\f1ae"; }
+.ri-subtract-line:before { content: "\f1af"; }
+.ri-subway-fill:before { content: "\f1b0"; }
+.ri-subway-line:before { content: "\f1b1"; }
+.ri-subway-wifi-fill:before { content: "\f1b2"; }
+.ri-subway-wifi-line:before { content: "\f1b3"; }
+.ri-suitcase-2-fill:before { content: "\f1b4"; }
+.ri-suitcase-2-line:before { content: "\f1b5"; }
+.ri-suitcase-3-fill:before { content: "\f1b6"; }
+.ri-suitcase-3-line:before { content: "\f1b7"; }
+.ri-suitcase-fill:before { content: "\f1b8"; }
+.ri-suitcase-line:before { content: "\f1b9"; }
+.ri-sun-cloudy-fill:before { content: "\f1ba"; }
+.ri-sun-cloudy-line:before { content: "\f1bb"; }
+.ri-sun-fill:before { content: "\f1bc"; }
+.ri-sun-foggy-fill:before { content: "\f1bd"; }
+.ri-sun-foggy-line:before { content: "\f1be"; }
+.ri-sun-line:before { content: "\f1bf"; }
+.ri-superscript-2:before { content: "\f1c0"; }
+.ri-superscript:before { content: "\f1c1"; }
+.ri-surgical-mask-fill:before { content: "\f1c2"; }
+.ri-surgical-mask-line:before { content: "\f1c3"; }
+.ri-surround-sound-fill:before { content: "\f1c4"; }
+.ri-surround-sound-line:before { content: "\f1c5"; }
+.ri-survey-fill:before { content: "\f1c6"; }
+.ri-survey-line:before { content: "\f1c7"; }
+.ri-swap-box-fill:before { content: "\f1c8"; }
+.ri-swap-box-line:before { content: "\f1c9"; }
+.ri-swap-fill:before { content: "\f1ca"; }
+.ri-swap-line:before { content: "\f1cb"; }
+.ri-switch-fill:before { content: "\f1cc"; }
+.ri-switch-line:before { content: "\f1cd"; }
+.ri-sword-fill:before { content: "\f1ce"; }
+.ri-sword-line:before { content: "\f1cf"; }
+.ri-syringe-fill:before { content: "\f1d0"; }
+.ri-syringe-line:before { content: "\f1d1"; }
+.ri-t-box-fill:before { content: "\f1d2"; }
+.ri-t-box-line:before { content: "\f1d3"; }
+.ri-t-shirt-2-fill:before { content: "\f1d4"; }
+.ri-t-shirt-2-line:before { content: "\f1d5"; }
+.ri-t-shirt-air-fill:before { content: "\f1d6"; }
+.ri-t-shirt-air-line:before { content: "\f1d7"; }
+.ri-t-shirt-fill:before { content: "\f1d8"; }
+.ri-t-shirt-line:before { content: "\f1d9"; }
+.ri-table-2:before { content: "\f1da"; }
+.ri-table-alt-fill:before { content: "\f1db"; }
+.ri-table-alt-line:before { content: "\f1dc"; }
+.ri-table-fill:before { content: "\f1dd"; }
+.ri-table-line:before { content: "\f1de"; }
+.ri-tablet-fill:before { content: "\f1df"; }
+.ri-tablet-line:before { content: "\f1e0"; }
+.ri-takeaway-fill:before { content: "\f1e1"; }
+.ri-takeaway-line:before { content: "\f1e2"; }
+.ri-taobao-fill:before { content: "\f1e3"; }
+.ri-taobao-line:before { content: "\f1e4"; }
+.ri-tape-fill:before { content: "\f1e5"; }
+.ri-tape-line:before { content: "\f1e6"; }
+.ri-task-fill:before { content: "\f1e7"; }
+.ri-task-line:before { content: "\f1e8"; }
+.ri-taxi-fill:before { content: "\f1e9"; }
+.ri-taxi-line:before { content: "\f1ea"; }
+.ri-taxi-wifi-fill:before { content: "\f1eb"; }
+.ri-taxi-wifi-line:before { content: "\f1ec"; }
+.ri-team-fill:before { content: "\f1ed"; }
+.ri-team-line:before { content: "\f1ee"; }
+.ri-telegram-fill:before { content: "\f1ef"; }
+.ri-telegram-line:before { content: "\f1f0"; }
+.ri-temp-cold-fill:before { content: "\f1f1"; }
+.ri-temp-cold-line:before { content: "\f1f2"; }
+.ri-temp-hot-fill:before { content: "\f1f3"; }
+.ri-temp-hot-line:before { content: "\f1f4"; }
+.ri-terminal-box-fill:before { content: "\f1f5"; }
+.ri-terminal-box-line:before { content: "\f1f6"; }
+.ri-terminal-fill:before { content: "\f1f7"; }
+.ri-terminal-line:before { content: "\f1f8"; }
+.ri-terminal-window-fill:before { content: "\f1f9"; }
+.ri-terminal-window-line:before { content: "\f1fa"; }
+.ri-test-tube-fill:before { content: "\f1fb"; }
+.ri-test-tube-line:before { content: "\f1fc"; }
+.ri-text-direction-l:before { content: "\f1fd"; }
+.ri-text-direction-r:before { content: "\f1fe"; }
+.ri-text-spacing:before { content: "\f1ff"; }
+.ri-text-wrap:before { content: "\f200"; }
+.ri-text:before { content: "\f201"; }
+.ri-thermometer-fill:before { content: "\f202"; }
+.ri-thermometer-line:before { content: "\f203"; }
+.ri-thumb-down-fill:before { content: "\f204"; }
+.ri-thumb-down-line:before { content: "\f205"; }
+.ri-thumb-up-fill:before { content: "\f206"; }
+.ri-thumb-up-line:before { content: "\f207"; }
+.ri-thunderstorms-fill:before { content: "\f208"; }
+.ri-thunderstorms-line:before { content: "\f209"; }
+.ri-ticket-2-fill:before { content: "\f20a"; }
+.ri-ticket-2-line:before { content: "\f20b"; }
+.ri-ticket-fill:before { content: "\f20c"; }
+.ri-ticket-line:before { content: "\f20d"; }
+.ri-time-fill:before { content: "\f20e"; }
+.ri-time-line:before { content: "\f20f"; }
+.ri-timer-2-fill:before { content: "\f210"; }
+.ri-timer-2-line:before { content: "\f211"; }
+.ri-timer-fill:before { content: "\f212"; }
+.ri-timer-flash-fill:before { content: "\f213"; }
+.ri-timer-flash-line:before { content: "\f214"; }
+.ri-timer-line:before { content: "\f215"; }
+.ri-todo-fill:before { content: "\f216"; }
+.ri-todo-line:before { content: "\f217"; }
+.ri-toggle-fill:before { content: "\f218"; }
+.ri-toggle-line:before { content: "\f219"; }
+.ri-tools-fill:before { content: "\f21a"; }
+.ri-tools-line:before { content: "\f21b"; }
+.ri-tornado-fill:before { content: "\f21c"; }
+.ri-tornado-line:before { content: "\f21d"; }
+.ri-trademark-fill:before { content: "\f21e"; }
+.ri-trademark-line:before { content: "\f21f"; }
+.ri-traffic-light-fill:before { content: "\f220"; }
+.ri-traffic-light-line:before { content: "\f221"; }
+.ri-train-fill:before { content: "\f222"; }
+.ri-train-line:before { content: "\f223"; }
+.ri-train-wifi-fill:before { content: "\f224"; }
+.ri-train-wifi-line:before { content: "\f225"; }
+.ri-translate-2:before { content: "\f226"; }
+.ri-translate:before { content: "\f227"; }
+.ri-travesti-fill:before { content: "\f228"; }
+.ri-travesti-line:before { content: "\f229"; }
+.ri-treasure-map-fill:before { content: "\f22a"; }
+.ri-treasure-map-line:before { content: "\f22b"; }
+.ri-trello-fill:before { content: "\f22c"; }
+.ri-trello-line:before { content: "\f22d"; }
+.ri-trophy-fill:before { content: "\f22e"; }
+.ri-trophy-line:before { content: "\f22f"; }
+.ri-truck-fill:before { content: "\f230"; }
+.ri-truck-line:before { content: "\f231"; }
+.ri-tumblr-fill:before { content: "\f232"; }
+.ri-tumblr-line:before { content: "\f233"; }
+.ri-tv-2-fill:before { content: "\f234"; }
+.ri-tv-2-line:before { content: "\f235"; }
+.ri-tv-fill:before { content: "\f236"; }
+.ri-tv-line:before { content: "\f237"; }
+.ri-twitch-fill:before { content: "\f238"; }
+.ri-twitch-line:before { content: "\f239"; }
+.ri-twitter-fill:before { content: "\f23a"; }
+.ri-twitter-line:before { content: "\f23b"; }
+.ri-typhoon-fill:before { content: "\f23c"; }
+.ri-typhoon-line:before { content: "\f23d"; }
+.ri-u-disk-fill:before { content: "\f23e"; }
+.ri-u-disk-line:before { content: "\f23f"; }
+.ri-ubuntu-fill:before { content: "\f240"; }
+.ri-ubuntu-line:before { content: "\f241"; }
+.ri-umbrella-fill:before { content: "\f242"; }
+.ri-umbrella-line:before { content: "\f243"; }
+.ri-underline:before { content: "\f244"; }
+.ri-uninstall-fill:before { content: "\f245"; }
+.ri-uninstall-line:before { content: "\f246"; }
+.ri-unsplash-fill:before { content: "\f247"; }
+.ri-unsplash-line:before { content: "\f248"; }
+.ri-upload-2-fill:before { content: "\f249"; }
+.ri-upload-2-line:before { content: "\f24a"; }
+.ri-upload-cloud-2-fill:before { content: "\f24b"; }
+.ri-upload-cloud-2-line:before { content: "\f24c"; }
+.ri-upload-cloud-fill:before { content: "\f24d"; }
+.ri-upload-cloud-line:before { content: "\f24e"; }
+.ri-upload-fill:before { content: "\f24f"; }
+.ri-upload-line:before { content: "\f250"; }
+.ri-usb-fill:before { content: "\f251"; }
+.ri-usb-line:before { content: "\f252"; }
+.ri-user-2-fill:before { content: "\f253"; }
+.ri-user-2-line:before { content: "\f254"; }
+.ri-user-3-fill:before { content: "\f255"; }
+.ri-user-3-line:before { content: "\f256"; }
+.ri-user-4-fill:before { content: "\f257"; }
+.ri-user-4-line:before { content: "\f258"; }
+.ri-user-5-fill:before { content: "\f259"; }
+.ri-user-5-line:before { content: "\f25a"; }
+.ri-user-6-fill:before { content: "\f25b"; }
+.ri-user-6-line:before { content: "\f25c"; }
+.ri-user-add-fill:before { content: "\f25d"; }
+.ri-user-add-line:before { content: "\f25e"; }
+.ri-user-fill:before { content: "\f25f"; }
+.ri-user-follow-fill:before { content: "\f260"; }
+.ri-user-follow-line:before { content: "\f261"; }
+.ri-user-heart-fill:before { content: "\f262"; }
+.ri-user-heart-line:before { content: "\f263"; }
+.ri-user-line:before { content: "\f264"; }
+.ri-user-location-fill:before { content: "\f265"; }
+.ri-user-location-line:before { content: "\f266"; }
+.ri-user-received-2-fill:before { content: "\f267"; }
+.ri-user-received-2-line:before { content: "\f268"; }
+.ri-user-received-fill:before { content: "\f269"; }
+.ri-user-received-line:before { content: "\f26a"; }
+.ri-user-search-fill:before { content: "\f26b"; }
+.ri-user-search-line:before { content: "\f26c"; }
+.ri-user-settings-fill:before { content: "\f26d"; }
+.ri-user-settings-line:before { content: "\f26e"; }
+.ri-user-shared-2-fill:before { content: "\f26f"; }
+.ri-user-shared-2-line:before { content: "\f270"; }
+.ri-user-shared-fill:before { content: "\f271"; }
+.ri-user-shared-line:before { content: "\f272"; }
+.ri-user-smile-fill:before { content: "\f273"; }
+.ri-user-smile-line:before { content: "\f274"; }
+.ri-user-star-fill:before { content: "\f275"; }
+.ri-user-star-line:before { content: "\f276"; }
+.ri-user-unfollow-fill:before { content: "\f277"; }
+.ri-user-unfollow-line:before { content: "\f278"; }
+.ri-user-voice-fill:before { content: "\f279"; }
+.ri-user-voice-line:before { content: "\f27a"; }
+.ri-video-add-fill:before { content: "\f27b"; }
+.ri-video-add-line:before { content: "\f27c"; }
+.ri-video-chat-fill:before { content: "\f27d"; }
+.ri-video-chat-line:before { content: "\f27e"; }
+.ri-video-download-fill:before { content: "\f27f"; }
+.ri-video-download-line:before { content: "\f280"; }
+.ri-video-fill:before { content: "\f281"; }
+.ri-video-line:before { content: "\f282"; }
+.ri-video-upload-fill:before { content: "\f283"; }
+.ri-video-upload-line:before { content: "\f284"; }
+.ri-vidicon-2-fill:before { content: "\f285"; }
+.ri-vidicon-2-line:before { content: "\f286"; }
+.ri-vidicon-fill:before { content: "\f287"; }
+.ri-vidicon-line:before { content: "\f288"; }
+.ri-vimeo-fill:before { content: "\f289"; }
+.ri-vimeo-line:before { content: "\f28a"; }
+.ri-vip-crown-2-fill:before { content: "\f28b"; }
+.ri-vip-crown-2-line:before { content: "\f28c"; }
+.ri-vip-crown-fill:before { content: "\f28d"; }
+.ri-vip-crown-line:before { content: "\f28e"; }
+.ri-vip-diamond-fill:before { content: "\f28f"; }
+.ri-vip-diamond-line:before { content: "\f290"; }
+.ri-vip-fill:before { content: "\f291"; }
+.ri-vip-line:before { content: "\f292"; }
+.ri-virus-fill:before { content: "\f293"; }
+.ri-virus-line:before { content: "\f294"; }
+.ri-visa-fill:before { content: "\f295"; }
+.ri-visa-line:before { content: "\f296"; }
+.ri-voice-recognition-fill:before { content: "\f297"; }
+.ri-voice-recognition-line:before { content: "\f298"; }
+.ri-voiceprint-fill:before { content: "\f299"; }
+.ri-voiceprint-line:before { content: "\f29a"; }
+.ri-volume-down-fill:before { content: "\f29b"; }
+.ri-volume-down-line:before { content: "\f29c"; }
+.ri-volume-mute-fill:before { content: "\f29d"; }
+.ri-volume-mute-line:before { content: "\f29e"; }
+.ri-volume-off-vibrate-fill:before { content: "\f29f"; }
+.ri-volume-off-vibrate-line:before { content: "\f2a0"; }
+.ri-volume-up-fill:before { content: "\f2a1"; }
+.ri-volume-up-line:before { content: "\f2a2"; }
+.ri-volume-vibrate-fill:before { content: "\f2a3"; }
+.ri-volume-vibrate-line:before { content: "\f2a4"; }
+.ri-vuejs-fill:before { content: "\f2a5"; }
+.ri-vuejs-line:before { content: "\f2a6"; }
+.ri-walk-fill:before { content: "\f2a7"; }
+.ri-walk-line:before { content: "\f2a8"; }
+.ri-wallet-2-fill:before { content: "\f2a9"; }
+.ri-wallet-2-line:before { content: "\f2aa"; }
+.ri-wallet-3-fill:before { content: "\f2ab"; }
+.ri-wallet-3-line:before { content: "\f2ac"; }
+.ri-wallet-fill:before { content: "\f2ad"; }
+.ri-wallet-line:before { content: "\f2ae"; }
+.ri-water-flash-fill:before { content: "\f2af"; }
+.ri-water-flash-line:before { content: "\f2b0"; }
+.ri-webcam-fill:before { content: "\f2b1"; }
+.ri-webcam-line:before { content: "\f2b2"; }
+.ri-wechat-2-fill:before { content: "\f2b3"; }
+.ri-wechat-2-line:before { content: "\f2b4"; }
+.ri-wechat-fill:before { content: "\f2b5"; }
+.ri-wechat-line:before { content: "\f2b6"; }
+.ri-wechat-pay-fill:before { content: "\f2b7"; }
+.ri-wechat-pay-line:before { content: "\f2b8"; }
+.ri-weibo-fill:before { content: "\f2b9"; }
+.ri-weibo-line:before { content: "\f2ba"; }
+.ri-whatsapp-fill:before { content: "\f2bb"; }
+.ri-whatsapp-line:before { content: "\f2bc"; }
+.ri-wheelchair-fill:before { content: "\f2bd"; }
+.ri-wheelchair-line:before { content: "\f2be"; }
+.ri-wifi-fill:before { content: "\f2bf"; }
+.ri-wifi-line:before { content: "\f2c0"; }
+.ri-wifi-off-fill:before { content: "\f2c1"; }
+.ri-wifi-off-line:before { content: "\f2c2"; }
+.ri-window-2-fill:before { content: "\f2c3"; }
+.ri-window-2-line:before { content: "\f2c4"; }
+.ri-window-fill:before { content: "\f2c5"; }
+.ri-window-line:before { content: "\f2c6"; }
+.ri-windows-fill:before { content: "\f2c7"; }
+.ri-windows-line:before { content: "\f2c8"; }
+.ri-windy-fill:before { content: "\f2c9"; }
+.ri-windy-line:before { content: "\f2ca"; }
+.ri-wireless-charging-fill:before { content: "\f2cb"; }
+.ri-wireless-charging-line:before { content: "\f2cc"; }
+.ri-women-fill:before { content: "\f2cd"; }
+.ri-women-line:before { content: "\f2ce"; }
+.ri-wubi-input:before { content: "\f2cf"; }
+.ri-xbox-fill:before { content: "\f2d0"; }
+.ri-xbox-line:before { content: "\f2d1"; }
+.ri-xing-fill:before { content: "\f2d2"; }
+.ri-xing-line:before { content: "\f2d3"; }
+.ri-youtube-fill:before { content: "\f2d4"; }
+.ri-youtube-line:before { content: "\f2d5"; }
+.ri-zcool-fill:before { content: "\f2d6"; }
+.ri-zcool-line:before { content: "\f2d7"; }
+.ri-zhihu-fill:before { content: "\f2d8"; }
+.ri-zhihu-line:before { content: "\f2d9"; }
+.ri-zoom-in-fill:before { content: "\f2da"; }
+.ri-zoom-in-line:before { content: "\f2db"; }
+.ri-zoom-out-fill:before { content: "\f2dc"; }
+.ri-zoom-out-line:before { content: "\f2dd"; }
+.ri-zzz-fill:before { content: "\f2de"; }
+.ri-zzz-line:before { content: "\f2df"; }
+.ri-arrow-down-double-fill:before { content: "\f2e0"; }
+.ri-arrow-down-double-line:before { content: "\f2e1"; }
+.ri-arrow-left-double-fill:before { content: "\f2e2"; }
+.ri-arrow-left-double-line:before { content: "\f2e3"; }
+.ri-arrow-right-double-fill:before { content: "\f2e4"; }
+.ri-arrow-right-double-line:before { content: "\f2e5"; }
+.ri-arrow-turn-back-fill:before { content: "\f2e6"; }
+.ri-arrow-turn-back-line:before { content: "\f2e7"; }
+.ri-arrow-turn-forward-fill:before { content: "\f2e8"; }
+.ri-arrow-turn-forward-line:before { content: "\f2e9"; }
+.ri-arrow-up-double-fill:before { content: "\f2ea"; }
+.ri-arrow-up-double-line:before { content: "\f2eb"; }
+.ri-bard-fill:before { content: "\f2ec"; }
+.ri-bard-line:before { content: "\f2ed"; }
+.ri-bootstrap-fill:before { content: "\f2ee"; }
+.ri-bootstrap-line:before { content: "\f2ef"; }
+.ri-box-1-fill:before { content: "\f2f0"; }
+.ri-box-1-line:before { content: "\f2f1"; }
+.ri-box-2-fill:before { content: "\f2f2"; }
+.ri-box-2-line:before { content: "\f2f3"; }
+.ri-box-3-fill:before { content: "\f2f4"; }
+.ri-box-3-line:before { content: "\f2f5"; }
+.ri-brain-fill:before { content: "\f2f6"; }
+.ri-brain-line:before { content: "\f2f7"; }
+.ri-candle-fill:before { content: "\f2f8"; }
+.ri-candle-line:before { content: "\f2f9"; }
+.ri-cash-fill:before { content: "\f2fa"; }
+.ri-cash-line:before { content: "\f2fb"; }
+.ri-contract-left-fill:before { content: "\f2fc"; }
+.ri-contract-left-line:before { content: "\f2fd"; }
+.ri-contract-left-right-fill:before { content: "\f2fe"; }
+.ri-contract-left-right-line:before { content: "\f2ff"; }
+.ri-contract-right-fill:before { content: "\f300"; }
+.ri-contract-right-line:before { content: "\f301"; }
+.ri-contract-up-down-fill:before { content: "\f302"; }
+.ri-contract-up-down-line:before { content: "\f303"; }
+.ri-copilot-fill:before { content: "\f304"; }
+.ri-copilot-line:before { content: "\f305"; }
+.ri-corner-down-left-fill:before { content: "\f306"; }
+.ri-corner-down-left-line:before { content: "\f307"; }
+.ri-corner-down-right-fill:before { content: "\f308"; }
+.ri-corner-down-right-line:before { content: "\f309"; }
+.ri-corner-left-down-fill:before { content: "\f30a"; }
+.ri-corner-left-down-line:before { content: "\f30b"; }
+.ri-corner-left-up-fill:before { content: "\f30c"; }
+.ri-corner-left-up-line:before { content: "\f30d"; }
+.ri-corner-right-down-fill:before { content: "\f30e"; }
+.ri-corner-right-down-line:before { content: "\f30f"; }
+.ri-corner-right-up-fill:before { content: "\f310"; }
+.ri-corner-right-up-line:before { content: "\f311"; }
+.ri-corner-up-left-double-fill:before { content: "\f312"; }
+.ri-corner-up-left-double-line:before { content: "\f313"; }
+.ri-corner-up-left-fill:before { content: "\f314"; }
+.ri-corner-up-left-line:before { content: "\f315"; }
+.ri-corner-up-right-double-fill:before { content: "\f316"; }
+.ri-corner-up-right-double-line:before { content: "\f317"; }
+.ri-corner-up-right-fill:before { content: "\f318"; }
+.ri-corner-up-right-line:before { content: "\f319"; }
+.ri-cross-fill:before { content: "\f31a"; }
+.ri-cross-line:before { content: "\f31b"; }
+.ri-edge-new-fill:before { content: "\f31c"; }
+.ri-edge-new-line:before { content: "\f31d"; }
+.ri-equal-fill:before { content: "\f31e"; }
+.ri-equal-line:before { content: "\f31f"; }
+.ri-expand-left-fill:before { content: "\f320"; }
+.ri-expand-left-line:before { content: "\f321"; }
+.ri-expand-left-right-fill:before { content: "\f322"; }
+.ri-expand-left-right-line:before { content: "\f323"; }
+.ri-expand-right-fill:before { content: "\f324"; }
+.ri-expand-right-line:before { content: "\f325"; }
+.ri-expand-up-down-fill:before { content: "\f326"; }
+.ri-expand-up-down-line:before { content: "\f327"; }
+.ri-flickr-fill:before { content: "\f328"; }
+.ri-flickr-line:before { content: "\f329"; }
+.ri-forward-10-fill:before { content: "\f32a"; }
+.ri-forward-10-line:before { content: "\f32b"; }
+.ri-forward-15-fill:before { content: "\f32c"; }
+.ri-forward-15-line:before { content: "\f32d"; }
+.ri-forward-30-fill:before { content: "\f32e"; }
+.ri-forward-30-line:before { content: "\f32f"; }
+.ri-forward-5-fill:before { content: "\f330"; }
+.ri-forward-5-line:before { content: "\f331"; }
+.ri-graduation-cap-fill:before { content: "\f332"; }
+.ri-graduation-cap-line:before { content: "\f333"; }
+.ri-home-office-fill:before { content: "\f334"; }
+.ri-home-office-line:before { content: "\f335"; }
+.ri-hourglass-2-fill:before { content: "\f336"; }
+.ri-hourglass-2-line:before { content: "\f337"; }
+.ri-hourglass-fill:before { content: "\f338"; }
+.ri-hourglass-line:before { content: "\f339"; }
+.ri-javascript-fill:before { content: "\f33a"; }
+.ri-javascript-line:before { content: "\f33b"; }
+.ri-loop-left-fill:before { content: "\f33c"; }
+.ri-loop-left-line:before { content: "\f33d"; }
+.ri-loop-right-fill:before { content: "\f33e"; }
+.ri-loop-right-line:before { content: "\f33f"; }
+.ri-memories-fill:before { content: "\f340"; }
+.ri-memories-line:before { content: "\f341"; }
+.ri-meta-fill:before { content: "\f342"; }
+.ri-meta-line:before { content: "\f343"; }
+.ri-microsoft-loop-fill:before { content: "\f344"; }
+.ri-microsoft-loop-line:before { content: "\f345"; }
+.ri-nft-fill:before { content: "\f346"; }
+.ri-nft-line:before { content: "\f347"; }
+.ri-notion-fill:before { content: "\f348"; }
+.ri-notion-line:before { content: "\f349"; }
+.ri-openai-fill:before { content: "\f34a"; }
+.ri-openai-line:before { content: "\f34b"; }
+.ri-overline:before { content: "\f34c"; }
+.ri-p2p-fill:before { content: "\f34d"; }
+.ri-p2p-line:before { content: "\f34e"; }
+.ri-presentation-fill:before { content: "\f34f"; }
+.ri-presentation-line:before { content: "\f350"; }
+.ri-replay-10-fill:before { content: "\f351"; }
+.ri-replay-10-line:before { content: "\f352"; }
+.ri-replay-15-fill:before { content: "\f353"; }
+.ri-replay-15-line:before { content: "\f354"; }
+.ri-replay-30-fill:before { content: "\f355"; }
+.ri-replay-30-line:before { content: "\f356"; }
+.ri-replay-5-fill:before { content: "\f357"; }
+.ri-replay-5-line:before { content: "\f358"; }
+.ri-school-fill:before { content: "\f359"; }
+.ri-school-line:before { content: "\f35a"; }
+.ri-shining-2-fill:before { content: "\f35b"; }
+.ri-shining-2-line:before { content: "\f35c"; }
+.ri-shining-fill:before { content: "\f35d"; }
+.ri-shining-line:before { content: "\f35e"; }
+.ri-sketching:before { content: "\f35f"; }
+.ri-skip-down-fill:before { content: "\f360"; }
+.ri-skip-down-line:before { content: "\f361"; }
+.ri-skip-left-fill:before { content: "\f362"; }
+.ri-skip-left-line:before { content: "\f363"; }
+.ri-skip-right-fill:before { content: "\f364"; }
+.ri-skip-right-line:before { content: "\f365"; }
+.ri-skip-up-fill:before { content: "\f366"; }
+.ri-skip-up-line:before { content: "\f367"; }
+.ri-slow-down-fill:before { content: "\f368"; }
+.ri-slow-down-line:before { content: "\f369"; }
+.ri-sparkling-2-fill:before { content: "\f36a"; }
+.ri-sparkling-2-line:before { content: "\f36b"; }
+.ri-sparkling-fill:before { content: "\f36c"; }
+.ri-sparkling-line:before { content: "\f36d"; }
+.ri-speak-fill:before { content: "\f36e"; }
+.ri-speak-line:before { content: "\f36f"; }
+.ri-speed-up-fill:before { content: "\f370"; }
+.ri-speed-up-line:before { content: "\f371"; }
+.ri-tiktok-fill:before { content: "\f372"; }
+.ri-tiktok-line:before { content: "\f373"; }
+.ri-token-swap-fill:before { content: "\f374"; }
+.ri-token-swap-line:before { content: "\f375"; }
+.ri-unpin-fill:before { content: "\f376"; }
+.ri-unpin-line:before { content: "\f377"; }
+.ri-wechat-channels-fill:before { content: "\f378"; }
+.ri-wechat-channels-line:before { content: "\f379"; }
+.ri-wordpress-fill:before { content: "\f37a"; }
+.ri-wordpress-line:before { content: "\f37b"; }
+.ri-blender-fill:before { content: "\f37c"; }
+.ri-blender-line:before { content: "\f37d"; }
+.ri-emoji-sticker-fill:before { content: "\f37e"; }
+.ri-emoji-sticker-line:before { content: "\f37f"; }
+.ri-git-close-pull-request-fill:before { content: "\f380"; }
+.ri-git-close-pull-request-line:before { content: "\f381"; }
+.ri-instance-fill:before { content: "\f382"; }
+.ri-instance-line:before { content: "\f383"; }
+.ri-megaphone-fill:before { content: "\f384"; }
+.ri-megaphone-line:before { content: "\f385"; }
+.ri-pass-expired-fill:before { content: "\f386"; }
+.ri-pass-expired-line:before { content: "\f387"; }
+.ri-pass-pending-fill:before { content: "\f388"; }
+.ri-pass-pending-line:before { content: "\f389"; }
+.ri-pass-valid-fill:before { content: "\f38a"; }
+.ri-pass-valid-line:before { content: "\f38b"; }
+.ri-ai-generate:before { content: "\f38c"; }
+.ri-calendar-close-fill:before { content: "\f38d"; }
+.ri-calendar-close-line:before { content: "\f38e"; }
+.ri-draggable:before { content: "\f38f"; }
+.ri-font-family:before { content: "\f390"; }
+.ri-font-mono:before { content: "\f391"; }
+.ri-font-sans-serif:before { content: "\f392"; }
+.ri-font-sans:before { content: "\f393"; }
+.ri-hard-drive-3-fill:before { content: "\f394"; }
+.ri-hard-drive-3-line:before { content: "\f395"; }
+.ri-kick-fill:before { content: "\f396"; }
+.ri-kick-line:before { content: "\f397"; }
+.ri-list-check-3:before { content: "\f398"; }
+.ri-list-indefinite:before { content: "\f399"; }
+.ri-list-ordered-2:before { content: "\f39a"; }
+.ri-list-radio:before { content: "\f39b"; }
+.ri-openbase-fill:before { content: "\f39c"; }
+.ri-openbase-line:before { content: "\f39d"; }
+.ri-planet-fill:before { content: "\f39e"; }
+.ri-planet-line:before { content: "\f39f"; }
+.ri-prohibited-fill:before { content: "\f3a0"; }
+.ri-prohibited-line:before { content: "\f3a1"; }
+.ri-quote-text:before { content: "\f3a2"; }
+.ri-seo-fill:before { content: "\f3a3"; }
+.ri-seo-line:before { content: "\f3a4"; }
+.ri-slash-commands:before { content: "\f3a5"; }
+.ri-archive-2-fill:before { content: "\f3a6"; }
+.ri-archive-2-line:before { content: "\f3a7"; }
+.ri-inbox-2-fill:before { content: "\f3a8"; }
+.ri-inbox-2-line:before { content: "\f3a9"; }
+.ri-shake-hands-fill:before { content: "\f3aa"; }
+.ri-shake-hands-line:before { content: "\f3ab"; }
+.ri-supabase-fill:before { content: "\f3ac"; }
+.ri-supabase-line:before { content: "\f3ad"; }
+.ri-water-percent-fill:before { content: "\f3ae"; }
+.ri-water-percent-line:before { content: "\f3af"; }
+.ri-yuque-fill:before { content: "\f3b0"; }
+.ri-yuque-line:before { content: "\f3b1"; }
+.ri-crosshair-2-fill:before { content: "\f3b2"; }
+.ri-crosshair-2-line:before { content: "\f3b3"; }
+.ri-crosshair-fill:before { content: "\f3b4"; }
+.ri-crosshair-line:before { content: "\f3b5"; }
+.ri-file-close-fill:before { content: "\f3b6"; }
+.ri-file-close-line:before { content: "\f3b7"; }
+.ri-infinity-fill:before { content: "\f3b8"; }
+.ri-infinity-line:before { content: "\f3b9"; }
+.ri-rfid-fill:before { content: "\f3ba"; }
+.ri-rfid-line:before { content: "\f3bb"; }
+.ri-slash-commands-2:before { content: "\f3bc"; }
+.ri-user-forbid-fill:before { content: "\f3bd"; }
+.ri-user-forbid-line:before { content: "\f3be"; }
+.ri-beer-fill:before { content: "\f3bf"; }
+.ri-beer-line:before { content: "\f3c0"; }
+.ri-circle-fill:before { content: "\f3c1"; }
+.ri-circle-line:before { content: "\f3c2"; }
+.ri-dropdown-list:before { content: "\f3c3"; }
+.ri-file-image-fill:before { content: "\f3c4"; }
+.ri-file-image-line:before { content: "\f3c5"; }
+.ri-file-pdf-2-fill:before { content: "\f3c6"; }
+.ri-file-pdf-2-line:before { content: "\f3c7"; }
+.ri-file-video-fill:before { content: "\f3c8"; }
+.ri-file-video-line:before { content: "\f3c9"; }
+.ri-folder-image-fill:before { content: "\f3ca"; }
+.ri-folder-image-line:before { content: "\f3cb"; }
+.ri-folder-video-fill:before { content: "\f3cc"; }
+.ri-folder-video-line:before { content: "\f3cd"; }
+.ri-hexagon-fill:before { content: "\f3ce"; }
+.ri-hexagon-line:before { content: "\f3cf"; }
+.ri-menu-search-fill:before { content: "\f3d0"; }
+.ri-menu-search-line:before { content: "\f3d1"; }
+.ri-octagon-fill:before { content: "\f3d2"; }
+.ri-octagon-line:before { content: "\f3d3"; }
+.ri-pentagon-fill:before { content: "\f3d4"; }
+.ri-pentagon-line:before { content: "\f3d5"; }
+.ri-rectangle-fill:before { content: "\f3d6"; }
+.ri-rectangle-line:before { content: "\f3d7"; }
+.ri-robot-2-fill:before { content: "\f3d8"; }
+.ri-robot-2-line:before { content: "\f3d9"; }
+.ri-shapes-fill:before { content: "\f3da"; }
+.ri-shapes-line:before { content: "\f3db"; }
+.ri-square-fill:before { content: "\f3dc"; }
+.ri-square-line:before { content: "\f3dd"; }
+.ri-tent-fill:before { content: "\f3de"; }
+.ri-tent-line:before { content: "\f3df"; }
+.ri-threads-fill:before { content: "\f3e0"; }
+.ri-threads-line:before { content: "\f3e1"; }
+.ri-tree-fill:before { content: "\f3e2"; }
+.ri-tree-line:before { content: "\f3e3"; }
+.ri-triangle-fill:before { content: "\f3e4"; }
+.ri-triangle-line:before { content: "\f3e5"; }
+.ri-twitter-x-fill:before { content: "\f3e6"; }
+.ri-twitter-x-line:before { content: "\f3e7"; }
+.ri-verified-badge-fill:before { content: "\f3e8"; }
+.ri-verified-badge-line:before { content: "\f3e9"; }
+.ri-armchair-fill:before { content: "\f3ea"; }
+.ri-armchair-line:before { content: "\f3eb"; }
+.ri-bnb-fill:before { content: "\f3ec"; }
+.ri-bnb-line:before { content: "\f3ed"; }
+.ri-bread-fill:before { content: "\f3ee"; }
+.ri-bread-line:before { content: "\f3ef"; }
+.ri-btc-fill:before { content: "\f3f0"; }
+.ri-btc-line:before { content: "\f3f1"; }
+.ri-calendar-schedule-fill:before { content: "\f3f2"; }
+.ri-calendar-schedule-line:before { content: "\f3f3"; }
+.ri-dice-1-fill:before { content: "\f3f4"; }
+.ri-dice-1-line:before { content: "\f3f5"; }
+.ri-dice-2-fill:before { content: "\f3f6"; }
+.ri-dice-2-line:before { content: "\f3f7"; }
+.ri-dice-3-fill:before { content: "\f3f8"; }
+.ri-dice-3-line:before { content: "\f3f9"; }
+.ri-dice-4-fill:before { content: "\f3fa"; }
+.ri-dice-4-line:before { content: "\f3fb"; }
+.ri-dice-5-fill:before { content: "\f3fc"; }
+.ri-dice-5-line:before { content: "\f3fd"; }
+.ri-dice-6-fill:before { content: "\f3fe"; }
+.ri-dice-6-line:before { content: "\f3ff"; }
+.ri-dice-fill:before { content: "\f400"; }
+.ri-dice-line:before { content: "\f401"; }
+.ri-drinks-fill:before { content: "\f402"; }
+.ri-drinks-line:before { content: "\f403"; }
+.ri-equalizer-2-fill:before { content: "\f404"; }
+.ri-equalizer-2-line:before { content: "\f405"; }
+.ri-equalizer-3-fill:before { content: "\f406"; }
+.ri-equalizer-3-line:before { content: "\f407"; }
+.ri-eth-fill:before { content: "\f408"; }
+.ri-eth-line:before { content: "\f409"; }
+.ri-flower-fill:before { content: "\f40a"; }
+.ri-flower-line:before { content: "\f40b"; }
+.ri-glasses-2-fill:before { content: "\f40c"; }
+.ri-glasses-2-line:before { content: "\f40d"; }
+.ri-glasses-fill:before { content: "\f40e"; }
+.ri-glasses-line:before { content: "\f40f"; }
+.ri-goggles-fill:before { content: "\f410"; }
+.ri-goggles-line:before { content: "\f411"; }
+.ri-image-circle-fill:before { content: "\f412"; }
+.ri-image-circle-line:before { content: "\f413"; }
+.ri-info-i:before { content: "\f414"; }
+.ri-money-rupee-circle-fill:before { content: "\f415"; }
+.ri-money-rupee-circle-line:before { content: "\f416"; }
+.ri-news-fill:before { content: "\f417"; }
+.ri-news-line:before { content: "\f418"; }
+.ri-robot-3-fill:before { content: "\f419"; }
+.ri-robot-3-line:before { content: "\f41a"; }
+.ri-share-2-fill:before { content: "\f41b"; }
+.ri-share-2-line:before { content: "\f41c"; }
+.ri-sofa-fill:before { content: "\f41d"; }
+.ri-sofa-line:before { content: "\f41e"; }
+.ri-svelte-fill:before { content: "\f41f"; }
+.ri-svelte-line:before { content: "\f420"; }
+.ri-vk-fill:before { content: "\f421"; }
+.ri-vk-line:before { content: "\f422"; }
+.ri-xrp-fill:before { content: "\f423"; }
+.ri-xrp-line:before { content: "\f424"; }
+.ri-xtz-fill:before { content: "\f425"; }
+.ri-xtz-line:before { content: "\f426"; }
+.ri-archive-stack-fill:before { content: "\f427"; }
+.ri-archive-stack-line:before { content: "\f428"; }
+.ri-bowl-fill:before { content: "\f429"; }
+.ri-bowl-line:before { content: "\f42a"; }
+.ri-calendar-view:before { content: "\f42b"; }
+.ri-carousel-view:before { content: "\f42c"; }
+.ri-code-block:before { content: "\f42d"; }
+.ri-color-filter-fill:before { content: "\f42e"; }
+.ri-color-filter-line:before { content: "\f42f"; }
+.ri-contacts-book-3-fill:before { content: "\f430"; }
+.ri-contacts-book-3-line:before { content: "\f431"; }
+.ri-contract-fill:before { content: "\f432"; }
+.ri-contract-line:before { content: "\f433"; }
+.ri-drinks-2-fill:before { content: "\f434"; }
+.ri-drinks-2-line:before { content: "\f435"; }
+.ri-export-fill:before { content: "\f436"; }
+.ri-export-line:before { content: "\f437"; }
+.ri-file-check-fill:before { content: "\f438"; }
+.ri-file-check-line:before { content: "\f439"; }
+.ri-focus-mode:before { content: "\f43a"; }
+.ri-folder-6-fill:before { content: "\f43b"; }
+.ri-folder-6-line:before { content: "\f43c"; }
+.ri-folder-check-fill:before { content: "\f43d"; }
+.ri-folder-check-line:before { content: "\f43e"; }
+.ri-folder-close-fill:before { content: "\f43f"; }
+.ri-folder-close-line:before { content: "\f440"; }
+.ri-folder-cloud-fill:before { content: "\f441"; }
+.ri-folder-cloud-line:before { content: "\f442"; }
+.ri-gallery-view-2:before { content: "\f443"; }
+.ri-gallery-view:before { content: "\f444"; }
+.ri-hand:before { content: "\f445"; }
+.ri-import-fill:before { content: "\f446"; }
+.ri-import-line:before { content: "\f447"; }
+.ri-information-2-fill:before { content: "\f448"; }
+.ri-information-2-line:before { content: "\f449"; }
+.ri-kanban-view-2:before { content: "\f44a"; }
+.ri-kanban-view:before { content: "\f44b"; }
+.ri-list-view:before { content: "\f44c"; }
+.ri-lock-star-fill:before { content: "\f44d"; }
+.ri-lock-star-line:before { content: "\f44e"; }
+.ri-puzzle-2-fill:before { content: "\f44f"; }
+.ri-puzzle-2-line:before { content: "\f450"; }
+.ri-puzzle-fill:before { content: "\f451"; }
+.ri-puzzle-line:before { content: "\f452"; }
+.ri-ram-2-fill:before { content: "\f453"; }
+.ri-ram-2-line:before { content: "\f454"; }
+.ri-ram-fill:before { content: "\f455"; }
+.ri-ram-line:before { content: "\f456"; }
+.ri-receipt-fill:before { content: "\f457"; }
+.ri-receipt-line:before { content: "\f458"; }
+.ri-shadow-fill:before { content: "\f459"; }
+.ri-shadow-line:before { content: "\f45a"; }
+.ri-sidebar-fold-fill:before { content: "\f45b"; }
+.ri-sidebar-fold-line:before { content: "\f45c"; }
+.ri-sidebar-unfold-fill:before { content: "\f45d"; }
+.ri-sidebar-unfold-line:before { content: "\f45e"; }
+.ri-slideshow-view:before { content: "\f45f"; }
+.ri-sort-alphabet-asc:before { content: "\f460"; }
+.ri-sort-alphabet-desc:before { content: "\f461"; }
+.ri-sort-number-asc:before { content: "\f462"; }
+.ri-sort-number-desc:before { content: "\f463"; }
+.ri-stacked-view:before { content: "\f464"; }
+.ri-sticky-note-add-fill:before { content: "\f465"; }
+.ri-sticky-note-add-line:before { content: "\f466"; }
+.ri-swap-2-fill:before { content: "\f467"; }
+.ri-swap-2-line:before { content: "\f468"; }
+.ri-swap-3-fill:before { content: "\f469"; }
+.ri-swap-3-line:before { content: "\f46a"; }
+.ri-table-3:before { content: "\f46b"; }
+.ri-table-view:before { content: "\f46c"; }
+.ri-text-block:before { content: "\f46d"; }
+.ri-text-snippet:before { content: "\f46e"; }
+.ri-timeline-view:before { content: "\f46f"; }
+.ri-blogger-fill:before { content: "\f470"; }
+.ri-blogger-line:before { content: "\f471"; }
+.ri-chat-thread-fill:before { content: "\f472"; }
+.ri-chat-thread-line:before { content: "\f473"; }
+.ri-discount-percent-fill:before { content: "\f474"; }
+.ri-discount-percent-line:before { content: "\f475"; }
+.ri-exchange-2-fill:before { content: "\f476"; }
+.ri-exchange-2-line:before { content: "\f477"; }
+.ri-git-fork-fill:before { content: "\f478"; }
+.ri-git-fork-line:before { content: "\f479"; }
+.ri-input-field:before { content: "\f47a"; }
+.ri-progress-1-fill:before { content: "\f47b"; }
+.ri-progress-1-line:before { content: "\f47c"; }
+.ri-progress-2-fill:before { content: "\f47d"; }
+.ri-progress-2-line:before { content: "\f47e"; }
+.ri-progress-3-fill:before { content: "\f47f"; }
+.ri-progress-3-line:before { content: "\f480"; }
+.ri-progress-4-fill:before { content: "\f481"; }
+.ri-progress-4-line:before { content: "\f482"; }
+.ri-progress-5-fill:before { content: "\f483"; }
+.ri-progress-5-line:before { content: "\f484"; }
+.ri-progress-6-fill:before { content: "\f485"; }
+.ri-progress-6-line:before { content: "\f486"; }
+.ri-progress-7-fill:before { content: "\f487"; }
+.ri-progress-7-line:before { content: "\f488"; }
+.ri-progress-8-fill:before { content: "\f489"; }
+.ri-progress-8-line:before { content: "\f48a"; }
+.ri-remix-run-fill:before { content: "\f48b"; }
+.ri-remix-run-line:before { content: "\f48c"; }
+.ri-signpost-fill:before { content: "\f48d"; }
+.ri-signpost-line:before { content: "\f48e"; }
+.ri-time-zone-fill:before { content: "\f48f"; }
+.ri-time-zone-line:before { content: "\f490"; }
+.ri-arrow-down-wide-fill:before { content: "\f491"; }
+.ri-arrow-down-wide-line:before { content: "\f492"; }
+.ri-arrow-left-wide-fill:before { content: "\f493"; }
+.ri-arrow-left-wide-line:before { content: "\f494"; }
+.ri-arrow-right-wide-fill:before { content: "\f495"; }
+.ri-arrow-right-wide-line:before { content: "\f496"; }
+.ri-arrow-up-wide-fill:before { content: "\f497"; }
+.ri-arrow-up-wide-line:before { content: "\f498"; }
+.ri-bluesky-fill:before { content: "\f499"; }
+.ri-bluesky-line:before { content: "\f49a"; }
+.ri-expand-height-fill:before { content: "\f49b"; }
+.ri-expand-height-line:before { content: "\f49c"; }
+.ri-expand-width-fill:before { content: "\f49d"; }
+.ri-expand-width-line:before { content: "\f49e"; }
+.ri-forward-end-fill:before { content: "\f49f"; }
+.ri-forward-end-line:before { content: "\f4a0"; }
+.ri-forward-end-mini-fill:before { content: "\f4a1"; }
+.ri-forward-end-mini-line:before { content: "\f4a2"; }
+.ri-friendica-fill:before { content: "\f4a3"; }
+.ri-friendica-line:before { content: "\f4a4"; }
+.ri-git-pr-draft-fill:before { content: "\f4a5"; }
+.ri-git-pr-draft-line:before { content: "\f4a6"; }
+.ri-play-reverse-fill:before { content: "\f4a7"; }
+.ri-play-reverse-line:before { content: "\f4a8"; }
+.ri-play-reverse-mini-fill:before { content: "\f4a9"; }
+.ri-play-reverse-mini-line:before { content: "\f4aa"; }
+.ri-rewind-start-fill:before { content: "\f4ab"; }
+.ri-rewind-start-line:before { content: "\f4ac"; }
+.ri-rewind-start-mini-fill:before { content: "\f4ad"; }
+.ri-rewind-start-mini-line:before { content: "\f4ae"; }
+.ri-scroll-to-bottom-fill:before { content: "\f4af"; }
+.ri-scroll-to-bottom-line:before { content: "\f4b0"; }
+.ri-add-large-fill:before { content: "\f4b1"; }
+.ri-add-large-line:before { content: "\f4b2"; }
+.ri-aed-electrodes-fill:before { content: "\f4b3"; }
+.ri-aed-electrodes-line:before { content: "\f4b4"; }
+.ri-aed-fill:before { content: "\f4b5"; }
+.ri-aed-line:before { content: "\f4b6"; }
+.ri-alibaba-cloud-fill:before { content: "\f4b7"; }
+.ri-alibaba-cloud-line:before { content: "\f4b8"; }
+.ri-align-item-bottom-fill:before { content: "\f4b9"; }
+.ri-align-item-bottom-line:before { content: "\f4ba"; }
+.ri-align-item-horizontal-center-fill:before { content: "\f4bb"; }
+.ri-align-item-horizontal-center-line:before { content: "\f4bc"; }
+.ri-align-item-left-fill:before { content: "\f4bd"; }
+.ri-align-item-left-line:before { content: "\f4be"; }
+.ri-align-item-right-fill:before { content: "\f4bf"; }
+.ri-align-item-right-line:before { content: "\f4c0"; }
+.ri-align-item-top-fill:before { content: "\f4c1"; }
+.ri-align-item-top-line:before { content: "\f4c2"; }
+.ri-align-item-vertical-center-fill:before { content: "\f4c3"; }
+.ri-align-item-vertical-center-line:before { content: "\f4c4"; }
+.ri-apps-2-add-fill:before { content: "\f4c5"; }
+.ri-apps-2-add-line:before { content: "\f4c6"; }
+.ri-close-large-fill:before { content: "\f4c7"; }
+.ri-close-large-line:before { content: "\f4c8"; }
+.ri-collapse-diagonal-2-fill:before { content: "\f4c9"; }
+.ri-collapse-diagonal-2-line:before { content: "\f4ca"; }
+.ri-collapse-diagonal-fill:before { content: "\f4cb"; }
+.ri-collapse-diagonal-line:before { content: "\f4cc"; }
+.ri-dashboard-horizontal-fill:before { content: "\f4cd"; }
+.ri-dashboard-horizontal-line:before { content: "\f4ce"; }
+.ri-expand-diagonal-2-fill:before { content: "\f4cf"; }
+.ri-expand-diagonal-2-line:before { content: "\f4d0"; }
+.ri-expand-diagonal-fill:before { content: "\f4d1"; }
+.ri-expand-diagonal-line:before { content: "\f4d2"; }
+.ri-firebase-fill:before { content: "\f4d3"; }
+.ri-firebase-line:before { content: "\f4d4"; }
+.ri-flip-horizontal-2-fill:before { content: "\f4d5"; }
+.ri-flip-horizontal-2-line:before { content: "\f4d6"; }
+.ri-flip-horizontal-fill:before { content: "\f4d7"; }
+.ri-flip-horizontal-line:before { content: "\f4d8"; }
+.ri-flip-vertical-2-fill:before { content: "\f4d9"; }
+.ri-flip-vertical-2-line:before { content: "\f4da"; }
+.ri-flip-vertical-fill:before { content: "\f4db"; }
+.ri-flip-vertical-line:before { content: "\f4dc"; }
+.ri-formula:before { content: "\f4dd"; }
+.ri-function-add-fill:before { content: "\f4de"; }
+.ri-function-add-line:before { content: "\f4df"; }
+.ri-goblet-2-fill:before { content: "\f4e0"; }
+.ri-goblet-2-line:before { content: "\f4e1"; }
+.ri-golf-ball-fill:before { content: "\f4e2"; }
+.ri-golf-ball-line:before { content: "\f4e3"; }
+.ri-group-3-fill:before { content: "\f4e4"; }
+.ri-group-3-line:before { content: "\f4e5"; }
+.ri-heart-add-2-fill:before { content: "\f4e6"; }
+.ri-heart-add-2-line:before { content: "\f4e7"; }
+.ri-id-card-fill:before { content: "\f4e8"; }
+.ri-id-card-line:before { content: "\f4e9"; }
+.ri-information-off-fill:before { content: "\f4ea"; }
+.ri-information-off-line:before { content: "\f4eb"; }
+.ri-java-fill:before { content: "\f4ec"; }
+.ri-java-line:before { content: "\f4ed"; }
+.ri-layout-grid-2-fill:before { content: "\f4ee"; }
+.ri-layout-grid-2-line:before { content: "\f4ef"; }
+.ri-layout-horizontal-fill:before { content: "\f4f0"; }
+.ri-layout-horizontal-line:before { content: "\f4f1"; }
+.ri-layout-vertical-fill:before { content: "\f4f2"; }
+.ri-layout-vertical-line:before { content: "\f4f3"; }
+.ri-menu-fold-2-fill:before { content: "\f4f4"; }
+.ri-menu-fold-2-line:before { content: "\f4f5"; }
+.ri-menu-fold-3-fill:before { content: "\f4f6"; }
+.ri-menu-fold-3-line:before { content: "\f4f7"; }
+.ri-menu-fold-4-fill:before { content: "\f4f8"; }
+.ri-menu-fold-4-line:before { content: "\f4f9"; }
+.ri-menu-unfold-2-fill:before { content: "\f4fa"; }
+.ri-menu-unfold-2-line:before { content: "\f4fb"; }
+.ri-menu-unfold-3-fill:before { content: "\f4fc"; }
+.ri-menu-unfold-3-line:before { content: "\f4fd"; }
+.ri-menu-unfold-4-fill:before { content: "\f4fe"; }
+.ri-menu-unfold-4-line:before { content: "\f4ff"; }
+.ri-mobile-download-fill:before { content: "\f500"; }
+.ri-mobile-download-line:before { content: "\f501"; }
+.ri-nextjs-fill:before { content: "\f502"; }
+.ri-nextjs-line:before { content: "\f503"; }
+.ri-nodejs-fill:before { content: "\f504"; }
+.ri-nodejs-line:before { content: "\f505"; }
+.ri-pause-large-fill:before { content: "\f506"; }
+.ri-pause-large-line:before { content: "\f507"; }
+.ri-play-large-fill:before { content: "\f508"; }
+.ri-play-large-line:before { content: "\f509"; }
+.ri-play-reverse-large-fill:before { content: "\f50a"; }
+.ri-play-reverse-large-line:before { content: "\f50b"; }
+.ri-police-badge-fill:before { content: "\f50c"; }
+.ri-police-badge-line:before { content: "\f50d"; }
+.ri-prohibited-2-fill:before { content: "\f50e"; }
+.ri-prohibited-2-line:before { content: "\f50f"; }
+.ri-shopping-bag-4-fill:before { content: "\f510"; }
+.ri-shopping-bag-4-line:before { content: "\f511"; }
+.ri-snowflake-fill:before { content: "\f512"; }
+.ri-snowflake-line:before { content: "\f513"; }
+.ri-square-root:before { content: "\f514"; }
+.ri-stop-large-fill:before { content: "\f515"; }
+.ri-stop-large-line:before { content: "\f516"; }
+.ri-tailwind-css-fill:before { content: "\f517"; }
+.ri-tailwind-css-line:before { content: "\f518"; }
+.ri-tooth-fill:before { content: "\f519"; }
+.ri-tooth-line:before { content: "\f51a"; }
+.ri-video-off-fill:before { content: "\f51b"; }
+.ri-video-off-line:before { content: "\f51c"; }
+.ri-video-on-fill:before { content: "\f51d"; }
+.ri-video-on-line:before { content: "\f51e"; }
+.ri-webhook-fill:before { content: "\f51f"; }
+.ri-webhook-line:before { content: "\f520"; }
+.ri-weight-fill:before { content: "\f521"; }
+.ri-weight-line:before { content: "\f522"; }
+.ri-book-shelf-fill:before { content: "\f523"; }
+.ri-book-shelf-line:before { content: "\f524"; }
+.ri-brain-2-fill:before { content: "\f525"; }
+.ri-brain-2-line:before { content: "\f526"; }
+.ri-chat-search-fill:before { content: "\f527"; }
+.ri-chat-search-line:before { content: "\f528"; }
+.ri-chat-unread-fill:before { content: "\f529"; }
+.ri-chat-unread-line:before { content: "\f52a"; }
+.ri-collapse-horizontal-fill:before { content: "\f52b"; }
+.ri-collapse-horizontal-line:before { content: "\f52c"; }
+.ri-collapse-vertical-fill:before { content: "\f52d"; }
+.ri-collapse-vertical-line:before { content: "\f52e"; }
+.ri-dna-fill:before { content: "\f52f"; }
+.ri-dna-line:before { content: "\f530"; }
+.ri-dropper-fill:before { content: "\f531"; }
+.ri-dropper-line:before { content: "\f532"; }
+.ri-expand-diagonal-s-2-fill:before { content: "\f533"; }
+.ri-expand-diagonal-s-2-line:before { content: "\f534"; }
+.ri-expand-diagonal-s-fill:before { content: "\f535"; }
+.ri-expand-diagonal-s-line:before { content: "\f536"; }
+.ri-expand-horizontal-fill:before { content: "\f537"; }
+.ri-expand-horizontal-line:before { content: "\f538"; }
+.ri-expand-horizontal-s-fill:before { content: "\f539"; }
+.ri-expand-horizontal-s-line:before { content: "\f53a"; }
+.ri-expand-vertical-fill:before { content: "\f53b"; }
+.ri-expand-vertical-line:before { content: "\f53c"; }
+.ri-expand-vertical-s-fill:before { content: "\f53d"; }
+.ri-expand-vertical-s-line:before { content: "\f53e"; }
+.ri-gemini-fill:before { content: "\f53f"; }
+.ri-gemini-line:before { content: "\f540"; }
+.ri-reset-left-fill:before { content: "\f541"; }
+.ri-reset-left-line:before { content: "\f542"; }
+.ri-reset-right-fill:before { content: "\f543"; }
+.ri-reset-right-line:before { content: "\f544"; }
+.ri-stairs-fill:before { content: "\f545"; }
+.ri-stairs-line:before { content: "\f546"; }
+.ri-telegram-2-fill:before { content: "\f547"; }
+.ri-telegram-2-line:before { content: "\f548"; }
+.ri-triangular-flag-fill:before { content: "\f549"; }
+.ri-triangular-flag-line:before { content: "\f54a"; }
+.ri-user-minus-fill:before { content: "\f54b"; }
+.ri-user-minus-line:before { content: "\f54c"; }
+.ri-account-box-2-fill:before { content: "\f54d"; }
+.ri-account-box-2-line:before { content: "\f54e"; }
+.ri-account-circle-2-fill:before { content: "\f54f"; }
+.ri-account-circle-2-line:before { content: "\f550"; }
+.ri-alarm-snooze-fill:before { content: "\f551"; }
+.ri-alarm-snooze-line:before { content: "\f552"; }
+.ri-arrow-down-box-fill:before { content: "\f553"; }
+.ri-arrow-down-box-line:before { content: "\f554"; }
+.ri-arrow-left-box-fill:before { content: "\f555"; }
+.ri-arrow-left-box-line:before { content: "\f556"; }
+.ri-arrow-left-down-box-fill:before { content: "\f557"; }
+.ri-arrow-left-down-box-line:before { content: "\f558"; }
+.ri-arrow-left-up-box-fill:before { content: "\f559"; }
+.ri-arrow-left-up-box-line:before { content: "\f55a"; }
+.ri-arrow-right-box-fill:before { content: "\f55b"; }
+.ri-arrow-right-box-line:before { content: "\f55c"; }
+.ri-arrow-right-down-box-fill:before { content: "\f55d"; }
+.ri-arrow-right-down-box-line:before { content: "\f55e"; }
+.ri-arrow-right-up-box-fill:before { content: "\f55f"; }
+.ri-arrow-right-up-box-line:before { content: "\f560"; }
+.ri-arrow-up-box-fill:before { content: "\f561"; }
+.ri-arrow-up-box-line:before { content: "\f562"; }
+.ri-bar-chart-box-ai-fill:before { content: "\f563"; }
+.ri-bar-chart-box-ai-line:before { content: "\f564"; }
+.ri-brush-ai-fill:before { content: "\f565"; }
+.ri-brush-ai-line:before { content: "\f566"; }
+.ri-camera-ai-fill:before { content: "\f567"; }
+.ri-camera-ai-line:before { content: "\f568"; }
+.ri-chat-ai-fill:before { content: "\f569"; }
+.ri-chat-ai-line:before { content: "\f56a"; }
+.ri-chat-smile-ai-fill:before { content: "\f56b"; }
+.ri-chat-smile-ai-line:before { content: "\f56c"; }
+.ri-chat-voice-ai-fill:before { content: "\f56d"; }
+.ri-chat-voice-ai-line:before { content: "\f56e"; }
+.ri-code-ai-fill:before { content: "\f56f"; }
+.ri-code-ai-line:before { content: "\f570"; }
+.ri-color-filter-ai-fill:before { content: "\f571"; }
+.ri-color-filter-ai-line:before { content: "\f572"; }
+.ri-custom-size:before { content: "\f573"; }
+.ri-fediverse-fill:before { content: "\f574"; }
+.ri-fediverse-line:before { content: "\f575"; }
+.ri-flag-off-fill:before { content: "\f576"; }
+.ri-flag-off-line:before { content: "\f577"; }
+.ri-home-9-fill:before { content: "\f578"; }
+.ri-home-9-line:before { content: "\f579"; }
+.ri-image-ai-fill:before { content: "\f57a"; }
+.ri-image-ai-line:before { content: "\f57b"; }
+.ri-image-circle-ai-fill:before { content: "\f57c"; }
+.ri-image-circle-ai-line:before { content: "\f57d"; }
+.ri-info-card-fill:before { content: "\f57e"; }
+.ri-info-card-line:before { content: "\f57f"; }
+.ri-landscape-ai-fill:before { content: "\f580"; }
+.ri-landscape-ai-line:before { content: "\f581"; }
+.ri-letter-spacing-2:before { content: "\f582"; }
+.ri-line-height-2:before { content: "\f583"; }
+.ri-mail-ai-fill:before { content: "\f584"; }
+.ri-mail-ai-line:before { content: "\f585"; }
+.ri-mic-2-ai-fill:before { content: "\f586"; }
+.ri-mic-2-ai-line:before { content: "\f587"; }
+.ri-mic-ai-fill:before { content: "\f588"; }
+.ri-mic-ai-line:before { content: "\f589"; }
+.ri-movie-ai-fill:before { content: "\f58a"; }
+.ri-movie-ai-line:before { content: "\f58b"; }
+.ri-music-ai-fill:before { content: "\f58c"; }
+.ri-music-ai-line:before { content: "\f58d"; }
+.ri-notification-snooze-fill:before { content: "\f58e"; }
+.ri-notification-snooze-line:before { content: "\f58f"; }
+.ri-php-fill:before { content: "\f590"; }
+.ri-php-line:before { content: "\f591"; }
+.ri-pix-fill:before { content: "\f592"; }
+.ri-pix-line:before { content: "\f593"; }
+.ri-pulse-ai-fill:before { content: "\f594"; }
+.ri-pulse-ai-line:before { content: "\f595"; }
+.ri-quill-pen-ai-fill:before { content: "\f596"; }
+.ri-quill-pen-ai-line:before { content: "\f597"; }
+.ri-speak-ai-fill:before { content: "\f598"; }
+.ri-speak-ai-line:before { content: "\f599"; }
+.ri-star-off-fill:before { content: "\f59a"; }
+.ri-star-off-line:before { content: "\f59b"; }
+.ri-translate-ai-2:before { content: "\f59c"; }
+.ri-translate-ai:before { content: "\f59d"; }
+.ri-user-community-fill:before { content: "\f59e"; }
+.ri-user-community-line:before { content: "\f59f"; }
+.ri-vercel-fill:before { content: "\f5a0"; }
+.ri-vercel-line:before { content: "\f5a1"; }
+.ri-video-ai-fill:before { content: "\f5a2"; }
+.ri-video-ai-line:before { content: "\f5a3"; }
+.ri-video-on-ai-fill:before { content: "\f5a4"; }
+.ri-video-on-ai-line:before { content: "\f5a5"; }
+.ri-voice-ai-fill:before { content: "\f5a6"; }
+.ri-voice-ai-line:before { content: "\f5a7"; }
+.ri-ai-generate-2:before { content: "\f5a8"; }
+.ri-ai-generate-text:before { content: "\f5a9"; }
+.ri-anthropic-fill:before { content: "\f5aa"; }
+.ri-anthropic-line:before { content: "\f5ab"; }
+.ri-apps-2-ai-fill:before { content: "\f5ac"; }
+.ri-apps-2-ai-line:before { content: "\f5ad"; }
+.ri-camera-lens-ai-fill:before { content: "\f5ae"; }
+.ri-camera-lens-ai-line:before { content: "\f5af"; }
+.ri-clapperboard-ai-fill:before { content: "\f5b0"; }
+.ri-clapperboard-ai-line:before { content: "\f5b1"; }
+.ri-claude-fill:before { content: "\f5b2"; }
+.ri-claude-line:before { content: "\f5b3"; }
+.ri-closed-captioning-ai-fill:before { content: "\f5b4"; }
+.ri-closed-captioning-ai-line:before { content: "\f5b5"; }
+.ri-dvd-ai-fill:before { content: "\f5b6"; }
+.ri-dvd-ai-line:before { content: "\f5b7"; }
+.ri-film-ai-fill:before { content: "\f5b8"; }
+.ri-film-ai-line:before { content: "\f5b9"; }
+.ri-font-size-ai:before { content: "\f5ba"; }
+.ri-mixtral-fill:before { content: "\f5bb"; }
+.ri-mixtral-line:before { content: "\f5bc"; }
+.ri-movie-2-ai-fill:before { content: "\f5bd"; }
+.ri-movie-2-ai-line:before { content: "\f5be"; }
+.ri-mv-ai-fill:before { content: "\f5bf"; }
+.ri-mv-ai-line:before { content: "\f5c0"; }
+.ri-perplexity-fill:before { content: "\f5c1"; }
+.ri-perplexity-line:before { content: "\f5c2"; }
+.ri-poker-clubs-fill:before { content: "\f5c3"; }
+.ri-poker-clubs-line:before { content: "\f5c4"; }
+.ri-poker-diamonds-fill:before { content: "\f5c5"; }
+.ri-poker-diamonds-line:before { content: "\f5c6"; }
+.ri-poker-hearts-fill:before { content: "\f5c7"; }
+.ri-poker-hearts-line:before { content: "\f5c8"; }
+.ri-poker-spades-fill:before { content: "\f5c9"; }
+.ri-poker-spades-line:before { content: "\f5ca"; }
+.ri-safe-3-fill:before { content: "\f5cb"; }
+.ri-safe-3-line:before { content: "\f5cc"; }
+.ri-accessibility-fill:before { content: "\f5cd"; }
+.ri-accessibility-line:before { content: "\f5ce"; }
+.ri-alarm-add-fill:before { content: "\f5cf"; }
+.ri-alarm-add-line:before { content: "\f5d0"; }
+.ri-arrow-down-long-fill:before { content: "\f5d1"; }
+.ri-arrow-down-long-line:before { content: "\f5d2"; }
+.ri-arrow-left-down-long-fill:before { content: "\f5d3"; }
+.ri-arrow-left-down-long-line:before { content: "\f5d4"; }
+.ri-arrow-left-long-fill:before { content: "\f5d5"; }
+.ri-arrow-left-long-line:before { content: "\f5d6"; }
+.ri-arrow-left-up-long-fill:before { content: "\f5d7"; }
+.ri-arrow-left-up-long-line:before { content: "\f5d8"; }
+.ri-arrow-right-down-long-fill:before { content: "\f5d9"; }
+.ri-arrow-right-down-long-line:before { content: "\f5da"; }
+.ri-arrow-right-long-fill:before { content: "\f5db"; }
+.ri-arrow-right-long-line:before { content: "\f5dc"; }
+.ri-arrow-right-up-long-fill:before { content: "\f5dd"; }
+.ri-arrow-right-up-long-line:before { content: "\f5de"; }
+.ri-arrow-up-long-fill:before { content: "\f5df"; }
+.ri-arrow-up-long-line:before { content: "\f5e0"; }
+.ri-chess-fill:before { content: "\f5e1"; }
+.ri-chess-line:before { content: "\f5e2"; }
+.ri-diamond-fill:before { content: "\f5e3"; }
+.ri-diamond-line:before { content: "\f5e4"; }
+.ri-diamond-ring-fill:before { content: "\f5e5"; }
+.ri-diamond-ring-line:before { content: "\f5e6"; }
+.ri-figma-fill:before { content: "\f5e7"; }
+.ri-figma-line:before { content: "\f5e8"; }
+.ri-firefox-browser-fill:before { content: "\f5e9"; }
+.ri-firefox-browser-line:before { content: "\f5ea"; }
+.ri-jewelry-fill:before { content: "\f5eb"; }
+.ri-jewelry-line:before { content: "\f5ec"; }
+.ri-multi-image-fill:before { content: "\f5ed"; }
+.ri-multi-image-line:before { content: "\f5ee"; }
+.ri-no-credit-card-fill:before { content: "\f5ef"; }
+.ri-no-credit-card-line:before { content: "\f5f0"; }
+.ri-service-bell-fill:before { content: "\f5f1"; }
+.ri-service-bell-line:before { content: "\f5f2"; }
diff --git a/store/$t.mixin.js b/store/$t.mixin.js
new file mode 100644
index 0000000..8c5608b
--- /dev/null
+++ b/store/$t.mixin.js
@@ -0,0 +1,91 @@
+import { mapState } from 'vuex'
+import store from '@/store'
+import {
+  getCurrentLocale,
+  getLocaleShort,
+  getNextLocale,
+  normalizeLocale,
+  pickLocalizedText,
+  translateGlobalMessages,
+  translateMessages
+} from '@/utils/i18n'
+import { syncNavigationBarTitle } from '@/utils/navigation-title'
+
+// 尝试将用户在根目录中的store/index.js的vuex的state变量加载到全局变量中
+let $tStoreKey = []
+try {
+  $tStoreKey = store.state ? Object.keys(store.state) : []
+} catch(e) {
+  
+}
+
+module.exports = {
+  beforeCreate() {
+    this.$t.vuex = (name, value) => {
+      this.$store.commit('$tStore', {
+        name, value
+      })
+    }
+  },
+  onShow() {
+    this.$syncNavigationTitle()
+  },
+  watch: {
+    vuex_locale() {
+      this.$nextTick(() => {
+        this.$syncNavigationTitle()
+        if (typeof this.$forceUpdate === 'function') {
+          this.$forceUpdate()
+        }
+      })
+    }
+  },
+  computed: {
+    // 将vuex的state中的变量结构到全局混入mixin中
+    ...mapState($tStoreKey)
+  },
+  methods: {
+    $getLocale() {
+      return normalizeLocale(this.vuex_locale || getCurrentLocale())
+    },
+    $getLanguage() {
+      return getLocaleShort(this.$getLocale())
+    },
+    $setLocale(locale) {
+      const nextLocale = normalizeLocale(locale)
+      this.$store.commit('$tStore', {
+        name: 'vuex_locale',
+        value: nextLocale
+      })
+      return nextLocale
+    },
+    $toggleLocale() {
+      return this.$setLocale(getNextLocale(this.$getLocale()))
+    },
+    $translate(messages, key, params) {
+      return translateMessages(messages, this.$getLocale(), key, params)
+    },
+    $tm(namespace, key, params) {
+      return translateGlobalMessages(namespace, this.$getLocale(), key, params)
+    },
+    $pickText(zh, en, fallback = '') {
+      return pickLocalizedText({
+        zh,
+        en,
+        fallback,
+        locale: this.$getLocale()
+      })
+    },
+    $getCurrentPageRoute() {
+      const pages = getCurrentPages()
+      if (!Array.isArray(pages) || !pages.length) {
+        return ''
+      }
+      const currentPage = pages[pages.length - 1] || {}
+      return currentPage.route || ''
+    },
+    $syncNavigationTitle(route) {
+      return syncNavigationBarTitle(route || this.$getCurrentPageRoute(), this.$getLocale())
+    }
+  }
+}
diff --git a/store/index.js b/store/index.js
new file mode 100644
index 0000000..1dc1fd7
--- /dev/null
+++ b/store/index.js
@@ -0,0 +1,247 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { getEnums, getMyEffectiveContracts, getMyPendingSignContracts, orderSearchedMePage } from '@/api/index.js'
+import { normalizeBookingList, parseOrderListResponse, pickCurrentBooking, pickCurrentStayOrder } from '@/utils/booking-helper'
+
+Vue.use(Vuex)
+
+let lifeData = {}
+
+// 尝试获取本地是否存在lifeData变量，第一次启动时不存在
+try {
+  lifeData = uni.getStorageSync('lifeData')
+} catch(e) {
+  
+}
+
+// 标记需要永久存储的变量，在每次启动时取出，在 state 中的变量名
+let saveStateKeys = ['vuex_user', 'vuex_identity', 'vuex_locale', 'vuex_checkin_status', 'vuex_current_order']
+
+const normalizeIdentityValue = (value) => {
+  const map = {
+    resident: '1',
+    counselor: '2',
+    'dorm-manager': '3',
+    social: '0'
+  }
+  if (value === undefined || value === null || value === '') return ''
+  const normalized = map[value] || value
+  return String(normalized)
+}
+
+// 保存变量到本地存储
+const saveLifeData = function(key, value) {
+  // 判断变量是否在存储数组中
+  if (saveStateKeys.indexOf(key) != -1) {
+    // 获取本地存储的lifeData对象，将变量添加到对象中
+    let tmpLifeData = uni.getStorageSync('lifeData')
+    // 第一次启动时不存在，则放一个空对象
+    tmpLifeData = tmpLifeData ? tmpLifeData : {},
+    tmpLifeData[key] = value
+    // 将变量再次放回本地存储中
+    uni.setStorageSync('lifeData', tmpLifeData)
+  }
+}
+
+function parseContractList(response) {
+  const payload = response && response.data ? response.data : response
+  if (Array.isArray(payload)) {
+    return payload
+  }
+  if (payload && Array.isArray(payload.data)) {
+    return payload.data
+  }
+  if (payload && payload.data && Array.isArray(payload.data.data)) {
+    return payload.data.data
+  }
+  return []
+}
+
+function logRequestError(name, error) {
+  console.error(`[store] ${name} failed`, error)
+  return []
+}
+
+let lastFetchStatusTime = 0
+let fetchUserGlobalStatusPromise = null
+let globalEnumsPromise = null
+let lastFetchEnumsTime = 0
+const GLOBAL_ENUMS_TTL = 10 * 60 * 1000
+
+const store = new Vuex.Store({
+  state: {
+    // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
+    // 加上vuex_前缀，是防止变量名冲突，也让人一目了然
+    vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {},
+    vuex_identity: normalizeIdentityValue(lifeData.vuex_identity),
+    vuex_checkin_status: lifeData.vuex_checkin_status !== undefined ? lifeData.vuex_checkin_status : false,
+    vuex_locale: lifeData.vuex_locale ? lifeData.vuex_locale : 'zh-Hans',
+    // app版本
+    vuex_version: "1.0.0",
+    // 是否使用自定义导航栏
+    vuex_custom_nav_bar: true,
+    // 状态栏高度
+    vuex_status_bar_height: 0,
+    // 自定义导航栏的高度
+    vuex_custom_bar_height: 0,
+    vuex_pending_contract_count: 0,
+    vuex_pending_contracts: [],
+    vuex_effective_contracts: [],
+    vuex_valid_orders: [],
+    vuex_current_order: lifeData.vuex_current_order ? lifeData.vuex_current_order : null,
+    vuex_enums: {}
+  },
+  mutations: {
+    $tStore(state, payload) {
+      // 判断是否多层调用，state中为对象存在的情况，例如user.info.score = 1
+      let nameArr = payload.name.split('.')
+      let saveKey = ''
+      let len = nameArr.length
+      if (len >= 2) {
+        let obj = state[nameArr[0]]
+        for (let i= 1; i < len - 1; i++) {
+          obj = obj[nameArr[i]]
+        }
+        obj[nameArr[len - 1]] = payload.value
+        saveKey = nameArr[0]
+      } else {
+        // 单层级变量
+        state[payload.name] = payload.name === 'vuex_identity'
+          ? normalizeIdentityValue(payload.value)
+          : payload.value
+        saveKey = payload.name
+      }
+      
+      // 保存变量到本地中
+      saveLifeData(saveKey, state[saveKey])
+    }
+  },
+  actions: {
+    fetchUserGlobalStatus({ state, commit }, options = {}) {
+      const force = !!(options && options.force)
+      const language = (options && options.language) || 'zh'
+      const currentUser = state.vuex_user || {}
+      const userCode = currentUser.code || currentUser.userCode || ''
+      const cachedOrders = Array.isArray(state.vuex_valid_orders) ? state.vuex_valid_orders : []
+      const cachedPendingContracts = Array.isArray(state.vuex_pending_contracts) ? state.vuex_pending_contracts : []
+      const cachedEffectiveContracts = Array.isArray(state.vuex_effective_contracts) ? state.vuex_effective_contracts : []
+      const cachedCurrentOrder = state.vuex_current_order || pickCurrentStayOrder(cachedOrders)
+      const cachedCurrentBooking = currentUser.currentBooking || pickCurrentBooking(cachedOrders) || null
+      const cachedResult = {
+        pendingContracts: cachedPendingContracts,
+        effectiveContracts: cachedEffectiveContracts,
+        validOrders: cachedOrders,
+        currentOrder: cachedCurrentOrder || null,
+        currentBooking: cachedCurrentBooking,
+        hasCheckedIn: !!cachedCurrentOrder
+      }
+
+      if (!userCode) return Promise.resolve(cachedResult)
+
+      const now = Date.now()
+      if (!force && fetchUserGlobalStatusPromise) {
+        return fetchUserGlobalStatusPromise
+      }
+      if (!force && now - lastFetchStatusTime < 1000) {
+        return Promise.resolve(cachedResult)
+      }
+      lastFetchStatusTime = now
+
+      fetchUserGlobalStatusPromise = Promise.all([
+        getMyPendingSignContracts({ UserCode: userCode }, language).catch((error) => logRequestError('getMyPendingSignContracts', error)),
+        getMyEffectiveContracts({ UserCode: userCode }, language).catch((error) => logRequestError('getMyEffectiveContracts', error)),
+        orderSearchedMePage({ PageIndex: 1, PageSize: 100, IsExport: false }, language).catch((error) => logRequestError('orderSearchedMePage', error))
+      ]).then(([pendingContractsResponse, effectiveContractsResponse, orderResponse]) => {
+        const pendingContracts = parseContractList(pendingContractsResponse)
+        const effectiveContracts = parseContractList(effectiveContractsResponse)
+        const validOrders = normalizeBookingList(parseOrderListResponse(orderResponse), language)
+        const currentOrder = pickCurrentStayOrder(validOrders)
+        const currentBooking = pickCurrentBooking(validOrders)
+        const nextUser = {
+          ...currentUser,
+          hasCheckedIn: !!currentOrder,
+          currentOrder: currentOrder || null,
+          currentBooking: currentBooking || null,
+          bookingStatus: currentBooking ? (currentBooking.status || currentBooking.statusKey || 'none') : 'none',
+          bookingRejectReason: currentBooking ? (currentBooking.rejectReasonText || currentBooking.rejectReason || '') : ''
+        }
+
+        commit('$tStore', { name: 'vuex_pending_contracts', value: pendingContracts })
+        commit('$tStore', { name: 'vuex_pending_contract_count', value: pendingContracts.length })
+        commit('$tStore', { name: 'vuex_effective_contracts', value: effectiveContracts })
+        commit('$tStore', { name: 'vuex_valid_orders', value: validOrders })
+        commit('$tStore', { name: 'vuex_checkin_status', value: !!currentOrder })
+        commit('$tStore', { name: 'vuex_current_order', value: currentOrder || null })
+        commit('$tStore', { name: 'vuex_user', value: nextUser })
+
+        return {
+          pendingContracts,
+          effectiveContracts,
+          validOrders,
+          currentOrder,
+          currentBooking,
+          hasCheckedIn: !!currentOrder
+        }
+      }).catch((error) => {
+        console.error('[store] fetchUserGlobalStatus failed', error)
+        return cachedResult
+      }).finally(() => {
+        fetchUserGlobalStatusPromise = null
+      })
+
+      return fetchUserGlobalStatusPromise
+    },
+    fetchGlobalEnums({ state, commit }, options = {}) {
+      const force = !!(options && options.force)
+      const hasEnums = state.vuex_enums && Object.keys(state.vuex_enums).length > 0
+      const now = Date.now()
+
+      if (!force && hasEnums && now - lastFetchEnumsTime < GLOBAL_ENUMS_TTL) {
+        return Promise.resolve(state.vuex_enums)
+      }
+
+      if (!force && globalEnumsPromise) {
+        return globalEnumsPromise
+      }
+
+      const language = (options && options.language) || state.vuex_locale
+      globalEnumsPromise = getEnums({}, language)
+        .then((res) => {
+          const data = res && res.data ? res.data : res
+          const enumsMap = {}
+          if (Array.isArray(data)) {
+            data.forEach(item => {
+              enumsMap[item.code] = item.data || []
+            })
+          }
+          commit('$tStore', {
+            name: 'vuex_enums',
+            value: enumsMap
+          })
+          lastFetchEnumsTime = Date.now()
+          return enumsMap
+        })
+        .catch(() => {
+          return hasEnums ? state.vuex_enums : {}
+        })
+        .finally(() => {
+          globalEnumsPromise = null
+        })
+
+      return globalEnumsPromise
+    }
+  }
+  ,
+  getters: {
+    enumOptions: (state) => (code) => {
+      return state.vuex_enums[code] || []
+    },
+    enumLabel: (state) => (code, key) => {
+      const options = state.vuex_enums[code] || []
+      const option = options.find(item => String(item.key) === String(key))
+      return option ? option.value : key
+    }
+  }
+})
+
+export default store
diff --git a/template.h5.html b/template.h5.html
new file mode 100644
index 0000000..3dee455
--- /dev/null
+++ b/template.h5.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico">
+    <meta name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title>
+      <%= htmlWebpackPlugin.options.title %>
+    </title>
+    <style>
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    </style>
+    <!-- 正式发布的时候使用，开发期间不启用。↑ -->
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
+      })
+    </script>
+    <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
+  </head>
+  <body>
+    <noscript>
+      <strong>本站点必须要开启JavaScript才能运行</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <script>
+      /*BAIDU_STAT*/
+    </script>
+  </body>
+</html>
diff --git a/tuniao-ui/README.md b/tuniao-ui/README.md
new file mode 100644
index 0000000..ccb9fcb
--- /dev/null
+++ b/tuniao-ui/README.md
@@ -0,0 +1,4 @@
+TuniaoUi for uniApp v1.0.0 | by 图鸟 2021-09-01
+仅供开发，如作它用所承受的法律责任一概与作者无关
+
+*使用TuniaoUi开发扩展与插件时，请注明基于tuniao字眼
\ No newline at end of file
diff --git a/tuniao-ui/TnDouble.css b/tuniao-ui/TnDouble.css
new file mode 100644
index 0000000..cf1c08b
--- /dev/null
+++ b/tuniao-ui/TnDouble.css
@@ -0,0 +1,75 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "TnDouble"; /* Project id 4445945 */
+  /* Color fonts */
+  src: 
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4445945_hf7rlmoj4qn.woff?t=1709209368441') format('woff'),
+       url('//at.alicdn.com/t/c/font_4445945_hf7rlmoj4qn.ttf?t=1709209368441') format('truetype');
+}
+
+[class*='tn-double-'] {
+  font-family: 'TnDouble' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  text-decoration: none;
+}
+
+.tn-double-shop:before {
+  content: "\e976";
+}
+
+.tn-double-service-simple:before {
+  content: "\e977";
+}
+
+.tn-double-calendar:before {
+  content: "\e978";
+}
+
+.tn-double-help:before {
+  content: "\e979";
+}
+
+.tn-double-refund:before {
+  content: "\e97a";
+}
+
+.tn-double-edit:before {
+  content: "\e97b";
+}
+
+.tn-double-edit-form:before {
+  content: "\e97c";
+}
+
+.tn-double-map:before {
+  content: "\e974";
+}
+
+.tn-double-vip-diamond:before {
+  content: "\e975";
+}
+
+.tn-double-qr-code:before {
+  content: "\e971";
+}
+
+.tn-double-install:before {
+  content: "\e972";
+}
+
+.tn-double-clock:before {
+  content: "\e973";
+}
+
+.tn-double-safe:before {
+  content: "\e96f";
+}
+
+.tn-double-scan:before {
+  content: "\e970";
+}
diff --git a/tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue b/tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue
new file mode 100644
index 0000000..a7bd140
--- /dev/null
+++ b/tuniao-ui/components/tn-action-sheet/tn-action-sheet.vue
@@ -0,0 +1,212 @@
+<template>
+  <view v-if="value" class="tn-action-sheet-class tn-action-sheet">
+    <tn-popup
+      v-model="value"
+      mode="bottom"
+      length="auto"
+      :popup="false"
+      :borderRadius="borderRadius"
+      :maskCloseable="maskCloseable"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :zIndex="elZIndex"
+      @close="close"
+    >
+      <!-- 提示信息 -->
+      <view
+        v-if="tips.text"
+        class="tn-action-sheet__tips tn-border-solid-bottom"
+        :style="[tipsStyle]"
+      >
+        {{tips.text}}
+      </view>
+      <!-- 按钮列表 -->
+      <block v-for="(item, index) in list" :key="index">
+        <view
+          class="tn-action-sheet__item tn-text-ellipsis"
+          :class="[ index < list.length - 1 ? 'tn-border-solid-bottom' : '']"
+          :style="[itemStyle(index)]"
+          hover-class="tn-hover-class"
+          :hover-stay-time="150"
+          @tap="itemClick(index)"
+          @touchmove.stop.prevent
+        >
+          <text>{{item.text}}</text>
+          <text v-if="item.subText" class="tn-action-sheet__item__subtext tn-text-ellipsis">{{item.subText}}</text>
+        </view>
+      </block>
+      
+      <!-- 取消按钮 -->
+      <block v-if="cancelBtn">
+        <view class="tn-action-sheet__cancel--gab"></view>
+        <view
+          class="tn-action-sheet__cancel tn-action-sheet__item"
+          hover-class="tn-hover-class"
+          :hover-stay-time="150"
+          @tap="close"
+        >{{ resolvedCancelText }}</view>
+      </block>
+      
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-action-sheet',
+    props: {
+      // 通过v-model控制弹出和收起
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 按钮文字数组，可以自定义颜色和字体大小
+      // return [{
+      // 	text: '确定',
+      //  subText: '这是一个确定按钮',
+      // 	color: '',
+      // 	fontSize: '',
+      //  disabled: true
+      // }]
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 顶部提示文字
+      tips: {
+        type: Object,
+        default() {
+          return {
+            text: '',
+            color: '',
+            fontSize: 26
+          }
+        }
+      },
+      // 弹出的顶部圆角值
+      borderRadius: {
+        type: Number,
+        default: 0
+      },
+      // 点击遮罩可以关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      // 底部取消按钮
+      cancelBtn: {
+        type: Boolean,
+        default: true
+      },
+      // 底部取消按钮的文字
+      cancelText: {
+        type: String,
+        default: null
+      },
+      // 开启底部安全区域
+      // 在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+        type: Boolean,
+        default: false
+      },
+      // z-index值
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 顶部提示样式
+      tipsStyle() {
+        let style = {}
+        if (this.tips.color) style.color = this.tips.color
+        if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx'
+        
+        return style
+      },
+      // 操作项目的样式
+      itemStyle() {
+        return (index) => {
+          let style = {}
+          if (this.list[index].color) style.color = this.list[index].color
+          if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx'
+          
+          // 选项被禁用的样式
+          if (this.list[index].disabled) style.color = '#AAAAAA'
+          
+          return style
+        }
+      },
+      resolvedCancelText() {
+        return this.cancelText === null ? getLocalizedText(this, '取消', 'Cancel') : this.cancelText
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$t.zIndex.popup
+      }
+    },
+    methods: {
+      // 点击取消按钮
+      close() {
+        // 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
+        this.popupClose();
+        this.$emit('close');
+      },
+      // 关闭弹窗
+      popupClose() {
+        this.$emit('input', false)
+      },
+      // 点击对应的item
+      itemClick(index) {
+        // 如果是禁用项则不进行操作
+        if (this.list[index].disabled) return
+        this.$emit('click', index)
+        this.popupClose()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-action-sheet {
+    &__tips {
+      font-size: 26rpx;
+      text-align: center;
+      padding: 34rpx 0;
+      line-height: 1;
+      color: $tn-content-color;
+    }
+    
+    &__item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 32rpx;
+      padding: 34rpx 0;
+      
+      &__subtext {
+        font-size: 24rpx;
+        color: $tn-content-color;
+        margin-top: 20rpx;
+      }
+    }
+    
+    &__cancel {
+      color: $tn-font-color;
+      
+      &--gab {
+        height: 12rpx;
+        background-color: #eaeaec;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue b/tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue
new file mode 100644
index 0000000..97c0c2c
--- /dev/null
+++ b/tuniao-ui/components/tn-avatar-group/tn-avatar-group.vue
@@ -0,0 +1,103 @@
+<template>
+  <view class="tn-avatar-group-class tn-avatar-group">
+    <view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle(index)]">
+      <tn-avatar
+        :src="item.src || ''"
+        :text="item.text || ''"
+        :icon="item.icon || ''"
+        :size="size"
+        :shape="shape"
+        :imgMode="imgMode"
+        :border="true"
+        :borderSize="2"
+      ></tn-avatar>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-avatar-group',
+    props: {
+      // 头像列表
+      lists: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 头像类型
+      // square 带圆角正方形 circle 圆形
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      // 大小
+      // sm 小头像 lg 大头像 xl 加大头像
+      // 如果为其他则认为是直接设置大小
+      size: {
+        type: [Number, String],
+        default: ''
+      },
+      // 当设置为显示头像信息时，
+      // 图片的裁剪模式
+      imgMode: {
+        type: String,
+        default: 'aspectFill'
+      },
+      // 头像之间的遮挡比例
+      // 0.4 代表 40%
+      gap: {
+        type: Number,
+        default: 0.3
+      }
+    },
+    computed: {
+      itemStyle() {
+        return (index) => {
+          let style = {}
+          if (this._checkSizeIsInline()) {
+            switch(this.size) {
+              case 'sm':
+                style.marginLeft = index != 0 ? `${-48 * this.gap}rpx` : ''
+                break
+              case 'lg':
+                style.marginLeft = index != 0 ? `${-96 * this.gap}rpx` : ''
+                break
+              case 'xl':
+                style.marginLeft = index != 0 ? `${-128 * this.gap}rpx` : ''
+                break
+            }
+          } else {
+            const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64
+            style.marginLeft = index != 0 ? `-${size * this.gap}rpx` : ''
+          }
+          return style
+        }
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 检查是否使用内置的大小进行设置
+      _checkSizeIsInline() {
+        if (/(xs|sm|md|lg|xl|xxl)/.test(this.size)) return true
+        else return false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-avatar-group {
+    display: flex;
+    flex-direction: row;
+    
+    &__item {
+      position: relative;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-avatar/tn-avatar.vue b/tuniao-ui/components/tn-avatar/tn-avatar.vue
new file mode 100644
index 0000000..96e7100
--- /dev/null
+++ b/tuniao-ui/components/tn-avatar/tn-avatar.vue
@@ -0,0 +1,298 @@
+<template>
+  <view
+    class="tn-avatar-class tn-avatar"
+    :class="[backgroundColorClass,avatarClass]"
+    :style="[avatarStyle]"
+    @tap="click"
+  >
+    <image
+      v-if="showImg"
+      class="tn-avatar__img"
+      :class="[imgClass]"
+      :src="src"
+      :mode="imgMode || 'aspectFill'"
+      @error="loadImageError"
+    ></image>
+    <view v-else class="tn-avatar__text" >
+      <view v-if="text">{{ text }}</view>
+      <view v-else :class="[`tn-icon-${icon}`]"></view>
+    </view>
+    
+    <!-- 角标 -->
+    <tn-badge
+      v-if="badge && (badgeIcon || badgeText)"
+      :radius="badgeSize"
+      :backgroundColor="badgeBgColor"
+      :fontColor="badgeColor"
+      :fontSize="badgeSize - 8"
+      :absolute="true"
+      :top="badgePosition[0]"
+      :right="badgePosition[1]"
+    >
+      <view v-if="badgeIcon && badgeText === ''">
+        <view :class="[`tn-icon-${badgeIcon}`]"></view>
+      </view>
+      <view v-else>
+        {{ badgeText }}
+      </view>
+    </tn-badge>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-avatar',
+    props: {
+      // 序号
+      index: {
+        type: [Number, String],
+        default: 0
+      },
+      // 头像类型
+      // square 带圆角正方形 circle 圆形
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      // 大小 
+      // sm 小头像 lg 大头像 xl 加大头像
+      // 如果为其他则认为是直接设置大小
+      size: {
+        type: [Number, String],
+        default: ''
+      },
+      // 是否显示阴影
+      shadow: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示边框
+      border: {
+        type: Boolean,
+        default: false
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: 'rgba(0, 0, 0, 0.1)'
+      },
+      // 边框大小, rpx
+      borderSize: {
+        type: Number,
+        default: 2
+      },
+      // 头像路径
+      src: {
+        type: String,
+        default: ''
+      },
+      // 文字
+      text: {
+        type: String,
+        default: ''
+      },
+      // 图标
+      icon: {
+        type: String,
+        default: ''
+      },
+      // 当设置为显示头像信息时，
+      // 图片的裁剪模式
+      imgMode: {
+        type: String,
+        default: 'aspectFill'
+      },
+      // 是否显示角标
+      badge: {
+        type: Boolean,
+        default: false
+      },
+      // 设置显示角标后，角标大小
+      badgeSize: {
+        type: Number,
+        default: 0
+      },
+      // 角标背景颜色
+      badgeBgColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 角标字体颜色
+      badgeColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 角标图标
+      badgeIcon: {
+        type: String,
+        default: ''
+      },
+      // 角标文字，优先级比icon高
+      badgeText: {
+        type: String,
+        default: ''
+      },
+      // 角标坐标
+      // [top, right]
+      badgePosition: {
+        type: Array,
+        default() {
+          return [0, 0]
+        }
+      }
+    },
+    data() {
+      return {
+        // 图片显示是否发生错误
+        imgLoadError: false
+      }
+    },
+    computed: {
+      showImg() {
+        // 如果设置了图片地址，则为显示图片，否则为显示文本
+        return this.text === '' && this.icon === ''
+      },
+      avatarClass() {
+        let clazz = ''
+        clazz += ` tn-avatar--${this.shape}`
+        
+        if (this._checkSizeIsInline()) {
+          clazz += ` tn-avatar--${this.size}`
+        }
+        
+        if (this.shadow) {
+          clazz += ' tn-avatar--shadow'
+        }
+        
+        return clazz
+      },
+      avatarStyle() {
+        let style = {}
+        
+        if (this.backgroundColorStyle) {
+          style.background = this.backgroundColorStyle
+        } else if (this.shadow && this.showImg) {
+          style.backgroundImage = `url(${this.src})`
+        }
+        
+        if (this.border) {
+          style.border = `${this.borderSize}rpx solid ${this.borderColor}`
+        }
+        
+        if (!this._checkSizeIsInline()) {
+          style.width = this.size
+          style.height = this.size
+        }
+        
+        return style
+      },
+      imgClass() {
+        let clazz = ''
+        clazz += ` tn-avatar__img--${this.shape}`
+        
+        return clazz
+      }
+    },
+    methods: {
+      // 加载图片失败
+      loadImageError() {
+        this.imgLoadError = true
+      },
+      // 点击事件
+      click() {
+        this.$emit("click", this.index)
+      },
+      
+      // 检查是否使用内置的大小进行设置
+      _checkSizeIsInline() {
+        if (/^(xs|sm|md|lg|xl|xxl)$/.test(this.size)) return true
+        else return false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-avatar {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    background-color: $tn-font-holder-color;
+    // color: #FFFFFF;
+    white-space: nowrap;
+    position: relative;
+    width: 64rpx;
+    height: 64rpx;
+    z-index: 1;
+    
+    &--sm {
+      width: 48rpx;
+      height: 48rpx;
+    }
+    &--lg {
+      width: 96rpx;
+      height: 96rpx;
+    }
+    &--xl {
+      width: 128rpx;
+      height: 128rpx;
+    }
+    
+    &--square {
+      border-radius: 10rpx;
+    }
+    
+    &--circle {
+      border-radius: 5000rpx;
+    }
+    
+    &--shadow {
+      position: relative;
+      
+      &::after {
+        content: " ";
+        display: block;
+        background: inherit;
+        filter: blur(10rpx);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 10rpx;
+        left: 10rpx;
+        z-index: -1;
+        opacity: 0.4;
+        transform-origin: 0 0;
+        border-radius: inherit;
+        transform: scale(1, 1);
+      }
+    }
+    
+    &__img {
+      width: 100%;
+      height: 100%;
+      
+      &--square {
+        border-radius: 10rpx;
+      }
+      
+      &--circle {
+        border-radius: 5000rpx;
+      }
+    }
+    
+    &__text {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-badge/tn-badge.vue b/tuniao-ui/components/tn-badge/tn-badge.vue
new file mode 100644
index 0000000..5e1747d
--- /dev/null
+++ b/tuniao-ui/components/tn-badge/tn-badge.vue
@@ -0,0 +1,173 @@
+<template>
+  <view
+    class="tn-badge-class tn-badge"
+    :class="[
+      backgroundColorClass,
+      fontColorClass,
+      badgeClass
+    ]"
+    :style="[badgeStyle]"
+    @click="handleClick"
+  >
+    <slot v-if="!dot"></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-badge',
+    props: {
+      // 序号
+      index: {
+        type: [Number, String],
+        default: '0'
+      },
+      // 徽章的大小 rpx
+      radius: {
+        type: Number,
+        default: 0
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 外边距
+      margin: {
+        type: String,
+        default: ''
+      },
+      // 是否为一个点
+      dot: {
+        type: Boolean,
+        default: false
+      },
+      // 是否使用绝对定位
+      absolute: {
+        type: Boolean,
+        default: false
+      },
+      // top
+      top: {
+        type: [String, Number],
+        default: ''
+      },
+      // right
+      right: {
+        type: [String, Number],
+        default: ''
+      },
+      // 居中 对齐右上角
+      translateCenter: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      badgeClass() {
+        let clazz = ''
+        if (this.dot) {
+          clazz += ' tn-badge--dot'
+        }
+        if (this.absolute) {
+          clazz += ' tn-badge--absolute'
+          
+          if (this.translateCenter) {
+            clazz += ' tn-badge--center-position'
+          }
+        }
+        
+        return clazz
+      },
+      badgeStyle() {
+        let style = {}
+        
+        if (this.radius !== 0) {
+          style.width = this.radius + 'rpx'
+          style.height = this.radius + 'rpx'
+          style.lineHeight = this.radius + 'rpx'
+          
+          // style.borderRadius = (this.radius * 8) + 'rpx'
+        }
+        
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        if (this.margin) {
+          style.margin = this.margin
+        }
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        if (this.top) {
+          style.top = this.$t.string.getLengthUnitValue(this.top)
+        }
+        if (this.right) {
+          style.right = this.$t.string.getLengthUnitValue(this.right)
+        }
+        
+        return style
+      },
+      
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick() {
+        this.$emit('click', {
+          index: Number(this.index)
+        })
+        this.$emit('tap', {
+          index: Number(this.index)
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-badge {
+    width: auto;
+    height: auto;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    font-size: 20rpx;
+    background-color: #FFFFFF;
+    // color: #FFFFFF;
+    border-radius: 100rpx;
+    padding: 4rpx 8rpx;
+    line-height: initial;
+    
+    &--dot {
+      width: 8rpx;
+      height: 8rpx;
+      border-radius: 50%;
+      padding: 0;
+    }
+    &--absolute {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+    &--center-position {
+      transform: translate(50%, -50%);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-button/tn-button.vue b/tuniao-ui/components/tn-button/tn-button.vue
new file mode 100644
index 0000000..820ce2f
--- /dev/null
+++ b/tuniao-ui/components/tn-button/tn-button.vue
@@ -0,0 +1,302 @@
+<template>
+  <button
+    class="tn-btn-class tn-btn"
+    :class="[
+      buttonClass,
+      backgroundColorClass,
+      fontColorClass
+    ]"
+    :style="[buttonStyle]"
+    hover-class="tn-hover"
+    :loading="loading"
+    :disabled="disabled"
+    :form-type="formType"
+    :open-type="openType"
+    @getuserinfo="handleGetUserInfo"
+    @getphonenumber="handleGetPhoneNumber"
+    @contact="handleContact"
+    @error="handleError"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: "tn-button",
+    // 解决再微信小程序种，自定义按钮无法触发bindsubmit
+    behaviors: ['wx://form-field-button'],
+    props: {
+      // 按钮索引，用于区分多个按钮
+      index: {
+        type: [Number, String],
+        default: 0
+      },
+      // 按钮形状 default 默认 round 圆角 icon 图标按钮
+      shape: {
+        type: String,
+        default: 'default'
+      },
+      // 是否加阴影
+      shadow: {
+        type: Boolean,
+        default: false
+      },
+      // 宽度 rpx或%
+      width: {
+        type: String,
+        default: 'auto'
+      },
+      // 高度 rpx或%
+      height: {
+        type: String,
+        default: ''
+      },
+      // 按钮的尺寸 sm lg
+      size: {
+        type: String,
+        default: ''
+      },
+      // 字体是否加粗
+      fontBold: {
+        type: Boolean,
+        default: false
+      },
+      padding: {
+        type: String,
+        default: '0 30rpx'
+      },
+      // 外边距 与css的margin参数用法相同
+      margin: {
+        type: String,
+        default: ''
+      },
+      // 是否镂空
+      plain: {
+        type: Boolean,
+        default: false
+      },
+      // 当plain=true时，是否显示边框
+      border: {
+        type: Boolean,
+        default: true
+      },
+      // 当plain=true时，是否加粗显示边框
+      borderBold: {
+        type: Boolean,
+        default: false
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示加载图标
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      // 触发form表单的事件类型
+      formType: {
+        type: String,
+        default: ''
+      },
+      // 开放能力
+      openType: {
+        type: String,
+        default: ''
+      },
+      // 是否阻止重复点击(默认间隔是200ms)
+      blockRepeatClick: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 根据不同的参数动态生成class
+      buttonClass() {
+        let clazz = ''
+        // 按钮形状
+        switch (this.shape) {
+          case 'icon':
+          case 'round':
+            clazz += ' tn-round'
+            break
+        }
+        
+        // 阴影
+        if (this.shadow) {
+          if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
+            const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
+            clazz += ` tn-shadow-${color}`
+          } else {
+            clazz += ' tn-shadow-blur'
+          }
+        }
+        
+        // 字体加粗
+        if (this.fontBold) {
+          clazz += ' tn-text-bold'
+        }
+        
+        // 设置为镂空并且设置镂空便可才进行设置
+        if (this.plain) {
+          clazz += ' tn-btn--plain'
+          if (this.border) {
+            clazz += ' tn-border-solid'
+            if (this.borderBold) {
+              clazz += ' tn-bold-border'
+            }
+            if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
+              const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
+              clazz += ` tn-border-${color}`
+            }
+          }
+        }
+        
+        return clazz
+      },
+      // 按钮的样式
+      buttonStyle() {
+        let style = {}
+        switch(this.size) {
+          case 'sm':
+            style.padding = '0 20rpx'
+            style.fontSize = '22rpx'
+            style.height = this.height || '48rpx'
+            break
+          case 'lg':
+            style.padding = '0 40rpx'
+            style.fontSize = '32rpx'
+            style.height = this.height || '80rpx'
+            break
+          default :
+            style.padding = '0 30rpx'
+            style.fontSize = '28rpx'
+            style.height = this.height || '64rpx'
+        }
+        
+        // 是否手动设置了内边距
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        
+        // 是否手动设置外边距
+        if (this.margin) {
+          style.margin = this.margin
+        }
+        
+        // 是否手动设置了字体大小
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        style.width = this.shape === 'icon' ? style.height : this.width
+        style.padding = this.shape === 'icon' ? '0' : style.padding
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        
+        if (!this.backgroundColorClass) {
+          if (this.plain) {
+            style.borderColor = this.backgroundColorStyle || '#080808'
+          } else {
+            style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
+          }
+        }
+        
+        // 设置阴影
+        if (this.shadow && !this.backgroundColorClass) {
+          if (this.backgroundColorStyle.indexOf('#') != -1) {
+            style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
+          } else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf('rgba') != -1 || !this.backgroundColorStyle) {
+            style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
+          }
+          
+        }
+        
+        return style
+      },
+    },
+    data() {
+      return {
+        // 上次点击的时间
+        clickTime: 0,
+        // 两次点击防抖的间隔时间
+        clickIntervalTime: 200
+      }
+    },
+    methods: {
+      // 按钮点击事件
+      handleClick() {
+        if (this.disabled) {
+          return
+        }
+        if (this.blockRepeatClick) {
+          const nowTime = new Date().getTime()
+          if (nowTime - this.clickTime <= this.clickIntervalTime) {
+            return
+          }
+          this.clickTime = nowTime
+          setTimeout(() => {
+            this.clickTime = 0
+          }, this.clickIntervalTime)
+        }
+        this.$emit('click', {
+          index: Number(this.index)
+        })
+        // 兼容tap事件
+        this.$emit('tap', {
+          index: Number(this.index)
+        })
+      },
+      handleGetUserInfo({ detail = {} } = {}) {
+      	this.$emit('getuserinfo', detail);
+      },
+      handleContact({ detail = {} } = {}) {
+      	this.$emit('contact', detail);
+      },
+      handleGetPhoneNumber({ detail = {} } = {}) {
+      	this.$emit('getphonenumber', detail);
+      },
+      handleError({ detail = {} } = {}) {
+      	this.$emit('error', detail);
+      },
+      
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    line-height: 1;
+    text-align: center;
+    text-decoration: none;
+    overflow: visible;
+    transform: translate(0rpx, 0rpx);
+    // background-color: $tn-mai
+    border-radius: 12rpx;
+    // color: $tn-font-color;
+    margin: 0;
+    
+    &--plain {
+      background-color: transparent !important;
+      background-image: none;
+      
+      &.tn-round {
+        border-radius: 1000rpx !important;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-calendar/tn-calendar.vue b/tuniao-ui/components/tn-calendar/tn-calendar.vue
new file mode 100644
index 0000000..d83efb6
--- /dev/null
+++ b/tuniao-ui/components/tn-calendar/tn-calendar.vue
@@ -0,0 +1,737 @@
+<template>
+  <tn-popup
+    v-model="value"
+    mode="bottom"
+    :popup="false"
+    length="auto"
+    :borderRadius="borderRadius"
+    :safeAreaInsetBottom="safeAreaInsetBottom"
+    :maskCloseable="maskCloseable"
+    :closeBtn="closeBtn"
+    :zIndex="elIndex"
+    @close="close"
+  >
+    <view class="tn-calendar-class tn-calendar">
+      <!-- 头部 -->
+      <view class="tn-calendar__header">
+        <view v-if="!$slots.tooltip || !$slots.$tooltip" class="tn-calendar__header__text">
+          {{ getResolvedText('toolTips') }}
+        </view>
+        <view v-else>
+          <slot name="tooltip"></slot>
+        </view>
+      </view>
+      
+      <!-- 操作提示信息 -->
+      <view class="tn-calendar__action">
+        <view v-if="changeYear" class="tn-calendar__action__icon" :style="{backgroundColor: yearArrowColor}" @tap.stop="changeYearHandler(false)">
+          <view><text class="tn-icon-left"></text></view>
+        </view>
+        <view v-if="changeMonth" class="tn-calendar__action__icon" :style="{backgroundColor: monthArrowColor}" @tap.stop="changeMonthHandler(false)">
+          <view><text class="tn-icon-left"></text></view>
+        </view>
+        <view class="tn-calendar__action__text">{{ dateTitle }}</view>
+        <view v-if="changeMonth" class="tn-calendar__action__icon" :style="{backgroundColor: monthArrowColor}" @tap.stop="changeMonthHandler(true)">
+          <view><text class="tn-icon-right"></text></view>
+        </view>
+        <view v-if="changeYear" class="tn-calendar__action__icon" :style="{backgroundColor: yearArrowColor}" @tap.stop="changeYearHandler(true)">
+          <view><text class="tn-icon-right"></text></view>
+        </view>
+      </view>
+      
+      <!-- 星期标识 -->
+      <view class="tn-calendar__week-day-zh">
+        <view v-for="(item,index) in weekDayLabels" :key="index" class="tn-calendar__week-day-zh__text">{{ item }}</view>
+      </view>
+      
+      <!-- 日历主体 -->
+      <view class="tn-calendar__content">
+        <!-- 前置空白部分 -->
+        <block v-for="(item, index) in weekdayArr" :key="index">
+          <view class="tn-calendar__content__item"></view>
+        </block>
+        <view
+          v-for="(item, index) in daysArr"
+          :key="index"
+          class="tn-calendar__content__item"
+          :class="{
+            'tn-hover': disabledChoose(year, month, index + 1),
+            'tn-calendar__content--start-date': (mode === 'range' && startDate == `${year}-${month}-${index+1}`) || mode === 'date',
+            'tn-calendar__content--end-date': (mode === 'range' && endDate == `${year}-${month}-${index+1}`) || mode === 'date'
+          }"
+          :style="{
+            backgroundColor: colorValue(index, 'bg')
+          }"
+          @tap.stop="dateClick(index)"
+        >
+          <view class="tn-calendar__content__item__text" :style="{color: colorValue(index, 'text')}">
+            <view>{{ item.day }}</view>
+          </view>
+          <view class="tn-calendar__content__item__tips" :style="{color: item.color}">
+            {{ item.bottomInfo }}
+          </view>
+        </view>
+        
+        <view class="tn-calendar__content__month--bg">{{ month }}</view>
+      </view>
+      
+      <!-- 底部 -->
+      <view class="tn-calendar__bottom">
+        <view class="tn-calendar__bottom__choose">
+          <text>{{ mode === 'date' ? activeDate : startDate }}</text>
+          <text v-if="endDate">{{ rangeJoinText }}{{ endDate }}</text>
+        </view>
+        <view class="tn-calendar__bottom__btn" :style="{backgroundColor: btnColor}" @click="handleBtnClick(false)">
+          <view class="tn-calendar__bottom__btn--text">{{ confirmText }}</view>
+        </view>
+      </view>
+    </view>
+  </tn-popup>
+</template>
+
+<script>
+  import Calendar from '../../libs/utils/calendar.js'
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+  
+  export default {
+    name: 'tn-calendar',
+    props: {
+      // 双向绑定控制组件弹出与收起
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 模式
+      // date -> 单日期 range -> 日期范围
+      mode: {
+        type: String,
+        default: 'date'
+      },
+      // 是否允许切换年份
+      changeYear: {
+        type: Boolean,
+        default: true
+      },
+      // 是否允许切换月份
+      changeMonth: {
+        type: Boolean,
+        default: true
+      },
+      // 可切换的最大年份
+      maxYear: {
+        type: [Number, String],
+        default: 2100
+      },
+      // 可切换的最小年份
+      minYear: {
+        type: [Number, String],
+        default: 1970
+      },
+      // 最小日期(不在范围被不允许选择)
+      minDate: {
+        type: String,
+        default: '1970-01-01'
+      },
+      // 最大日期，如果为空则默认为今天
+      maxDate: {
+        type: String,
+        default: ''
+      },
+      // 切换月份按钮的颜色
+      monthArrowColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 切换年份按钮的颜色
+      yearArrowColor: {
+        type: String,
+        default: '#C8C8C8'
+      },
+      // 默认字体颜色
+      color: {
+        type: String,
+        default: '#080808'
+      },
+      // 选中|起始结束日期背景颜色
+      activeBgColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 选中|起始结束日期文字颜色
+      activeColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 范围日期内的背景颜色
+      rangeBgColor: {
+        type: String,
+        default: '#E6E6E655'
+      },
+      // 范围日期内的文字颜色
+      rangeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 起始日期显示的文字，mode=range时生效
+      startText: {
+        type: String,
+        default: ''
+      },
+      // 结束日期显示的文字，mode=range时生效
+      endText: {
+        type: String,
+        default: ''
+      },
+      // 按钮背景颜色
+      btnColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 农历文字的颜色
+      lunarColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 选中日期是否有选中效果
+      isActiveCurrent: {
+        type: Boolean,
+        default: true
+      },
+      // 切换年月是否触发事件，mode=date时生效
+      isChange: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示农历
+      showLunar: {
+        type: Boolean,
+        default: true
+      },
+      // 顶部提示文字
+      toolTips: {
+        type: String,
+        default: ''
+      },
+      // 显示圆角的大小
+      borderRadius: {
+        type: Number,
+        default: 8
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 是否可以通过点击遮罩进行关闭
+      maskCloseable: {
+      	type: Boolean,
+      	default: true
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+    },
+    computed: {
+      dateChange() {
+        return `${this.mode}-${this.minDate}-${this.maxDate}`
+      },
+      elIndex() {
+        return this.zIndex ? this.zIndex : this.$t.zIndex.popup
+      },
+      weekDayLabels() {
+        return getCurrentLanguage() === 'en'
+          ? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+          : ['日', '一', '二', '三', '四', '五', '六']
+      },
+      rangeJoinText() {
+        return getLocalizedText(this, '至', ' to ')
+      },
+      confirmText() {
+        return getLocalizedText(this, '确定', 'Confirm')
+      },
+      colorValue() {
+        return (index, type) => {
+          let color = type === 'bg' ? '' : this.color
+          let day = index + 1
+          let date = `${this.year}-${this.month}-${day}`
+          let timestamp = new Date(date.replace(/\-/g,'/')).getTime()
+          let start = this.startDate.replace(/\-/g,'/')
+          let end = this.endDate.replace(/\-/g,'/')
+          if ((this.mode === 'date' && this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
+            color = type === 'bg' ? this.activeBgColor : this.activeColor
+          } else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
+            color = type === 'bg' ? this.rangeBgColor : this.rangeColor
+          }
+          return color
+        }
+      }
+    },
+    data() {
+      return {
+        // 星期几，1-7
+        weekday: 1,
+        weekdayArr: [],
+        // 星期索引
+        weekDayZh: ['日','一','二','三','四','五','六'],
+        // 当前月有多少天
+        days: 0,
+        daysArr: [],
+        year: 2021,
+        month: 0,
+        day: 0,
+        startYear: 0,
+        startMonth: 0,
+        startDay: 0,
+        endYear: 0,
+        endMonth: 0,
+        endDay: 0,
+        today: '',
+        activeDate: '',
+        startDate: '',
+        endDate: '',
+        min: null,
+        max: null,
+        // 日期标题
+        dateTitle: '',
+        // 标记是否已经选择了开始日期
+        chooseStart: false
+      }
+    },
+    watch: {
+      dateChange() {
+        this.init()
+      }
+    },
+    created() {
+      this.init()
+    },
+    methods: {
+      getResolvedText(key) {
+        const map = {
+          startText: this.startText || getLocalizedText(this, '开始', 'Start'),
+          endText: this.endText || getLocalizedText(this, '结束', 'End'),
+          toolTips: this.toolTips || getLocalizedText(this, '请选择日期', 'Please Select Date'),
+          dateOutOfRange: getLocalizedText(this, '所选日期超出范围', 'Selected date is out of range')
+        }
+        return map[key] || ''
+      },
+      // 初始化
+      init() {
+        let now = new Date()
+        this.year = now.getFullYear()
+        this.month = now.getMonth() + 1
+        this.day = now.getDate()
+        this.today = `${this.year}-${this.month}-${this.day}`
+        this.activeDate = this.today
+        this.min = this.initDate(this.minDate)
+        this.max = this.initDate(this.maxDate || this.today)
+        this.startDate = ''
+        this.startYear = 0
+        this.startMonth = 0
+        this.startDay = 0
+        this.endDate = ''
+        this.endYear = 0
+        this.endMonth = 0
+        this.endDay = 0
+        this.chooseStart = false
+        this.changeData()
+      },
+      // 切换月份
+      changeMonthHandler(add) {
+        if (add) {
+          let month = this.month + 1
+          let year = month > 12 ? this.year + 1 : this.year
+          if (!this.checkRange(year)) {
+            this.month = month > 12 ? 1 : month
+            this.year = year
+            this.changeData()
+          }
+        } else {
+          let month = this.month - 1
+          let year = month < 1 ? this.year - 1 : this.year
+          if (!this.checkRange(year)) {
+            this.month = month < 1 ? 12 : month
+            this.year = year
+            this.changeData()
+          }
+        }
+      },
+      // 切换年份
+      changeYearHandler(add) {
+        let year = add ? this.year + 1 : this.year - 1
+        if (!this.checkRange(year)) {
+          this.year = year
+          this.changeData()
+        }
+      },
+      // 日期点击事件
+      dateClick(day) {
+        day += 1
+        if (!this.disabledChoose(this.year, this.month, day)) {
+          this.day = day
+          let date = `${this.year}-${this.month}-${day}`
+          if (this.mode === 'date') {
+            this.activeDate = date
+          } else {
+            let startTimeCompare = new Date(date.replace(/\-/g,'/')).getTime() < new Date(this.startDate.replace(/\-/g,'/')).getTime()
+            if (!this.chooseStart || startTimeCompare) {
+              this.startDate = date
+              this.startYear = this.year
+              this.startMonth = this.month
+              this.startDay = this.day
+              this.endYear = 0
+              this.endMonth = 0
+              this.endDay = 0
+              this.endDate = ''
+              this.activeDate = ''
+              this.chooseStart = true
+            } else {
+              this.endDate = date
+              this.endYear = this.year
+              this.endMonth = this.month
+              this.endDay = this.day
+              this.chooseStart = false
+            }
+          }
+          this.daysArr = this.handleDaysArr()
+        }
+      },
+      // 修改日期数据
+      changeData() {
+        this.days = this.getMonthDay(this.year, this.month)
+        this.daysArr = this.handleDaysArr()
+        this.weekday = this.getMonthFirstWeekDay(this.year, this.month)
+        this.weekdayArr = this.generateArray(1, this.weekday)
+        this.dateTitle = getCurrentLanguage() === 'en'
+          ? `${this.year}-${this.formatNumber(this.month)}`
+          : `${this.year}年${this.month}月`
+        if (this.isChange && this.mode === 'date') {
+          this.handleBtnClick(true)
+        }
+      },
+      // 处理按钮点击
+      handleBtnClick(show) {
+        if (!show) {
+          this.close()
+        }
+        if (this.mode === 'date') {
+          let arr = this.activeDate.split('-')
+          let year = this.isChange ? this.year : Number(arr[0])
+          let month = this.isChange ? this.month : Number(arr[1])
+          let day = this.isChange ? this.day : Number(arr[2])
+          let days = this.getMonthDay(year, month)
+          let result = `${year}-${this.formatNumber(month)}-${this.formatNumber(day)}`
+          let weekText = this.getWeekText(result)
+          let isToday = false
+          if (`${year}-${month}-${day}` === this.today) {
+            isToday = true
+          }
+          this.$emit('change', {
+            year,
+            month,
+            day,
+            days,
+            week: weekText,
+            isToday,
+            date: result,
+            // 是否为切换年月操作
+            switch: show
+          })
+        } else {
+          if (!this.startDate || !this.endDate) return
+          
+          let startMonth = this.formatNumber(this.startMonth)
+          let startDay = this.formatNumber(this.startDay)
+          let startDate = `${this.startYear}-${startMonth}-${startDay}`
+          let startWeek = this.getWeekText(startDate)
+          
+          let endMonth = this.formatNumber(this.endMonth)
+          let endDay = this.formatNumber(this.endDay)
+          let endDate = `${this.endYear}-${endMonth}-${endDay}`
+          let endWeek = this.getWeekText(endDate)
+          
+          this.$emit('change', {
+            startYear: this.startYear,
+            startMonth: this.startMonth,
+            startDay: this.startDay,
+            startDate,
+            startWeek,
+            endYear: this.endYear,
+            endMonth: this.endMonth,
+            endDay: this.endDay,
+            endDate,
+            endWeek
+          })
+        }
+      },
+      // 判断是否允许选择
+      disabledChoose(year, month, day) {
+        let flag = true
+        let date = `${year}/${month}/${day}`
+        let min = `${this.min.year}/${this.min.month}/${this.min.day}`
+        let max = `${this.max.year}/${this.max.month}/${this.max.day}`
+        let timestamp = new Date(date).getTime()
+        if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
+          flag = false
+        }
+        return flag
+      },
+      // 检查是否在日期范围内
+      checkRange(year) {
+        let overstep = false
+        if (year < this.minYear || year > this.maxYear) {
+          uni.showToast({
+            title: this.getResolvedText('dateOutOfRange'),
+            icon: 'none'
+          })
+          overstep = true
+        }
+        return overstep
+      },
+      // 处理日期
+      initDate(date) {
+        let fdate = date.split('-')
+        return {
+          year: Number(fdate[0] || 1970),
+          month: Number(fdate[1] || 1),
+          day: Number(fdate[2] || 1)
+        }
+      },
+      // 处理日期数组
+      handleDaysArr() {
+        let days = this.generateArray(1, this.days)
+        let daysArr = days.map((item) => {
+          let bottomInfo = this.showLunar ? Calendar.solar2lunar(this.year, this.month, item).IDayCn : ''
+          let color = this.showLunar ? this.lunarColor : this.activeColor
+          if (
+            (this.mode === 'date' && this.day == item) || 
+            (this.mode === 'range' && (this.startDay == item || this.endDay == item))
+          ) {
+            color = this.activeColor
+          }
+          if (this.mode === 'range') {
+            if (this.startDay == item && this.startDay != this.endDay) {
+              bottomInfo = this.getResolvedText('startText')
+            }
+            if (this.endDay == item) {
+              bottomInfo = this.getResolvedText('endText')
+            }
+          }
+          
+          return {
+            day: item,
+            color: color,
+            bottomInfo: bottomInfo
+          }
+        })
+        return daysArr
+      },
+      // 获取对应月有多少天
+      getMonthDay(year, month) {
+        return new Date(year, month, 0).getDate()
+      },
+      // 获取对应月的第一天时星期几
+      getMonthFirstWeekDay(year, month) {
+        return new Date(`${year}/${month}/01 00:00:00`).getDay()
+      },
+      // 获取对应星期的文本
+      getWeekText(date) {
+        date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`)
+        let week = date.getDay()
+        return getCurrentLanguage() === 'en'
+          ? ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][week]
+          : `星期${this.weekDayZh[week]}`
+      },
+      // 生成日期天数数组
+      generateArray(start, end) {
+        return Array.from(new Array(end + 1).keys()).slice(start)
+      },
+      // 格式化数字
+      formatNumber(num) {
+        return num < 10 ? '0' + num : num + ''
+      },
+      // 关闭窗口
+      close() {
+        this.$emit('input', false)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-calendar {
+    color: $tn-font-color;
+    
+    &__header {
+      width: 100%;
+      box-sizing: border-box;
+      font-size: 30rpx;
+      background-color: #FFFFFF;
+      color: $tn-main-color;
+      
+      &__text {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin-top: 30rpx;
+        padding: 0 60rpx;
+      }
+    }
+    
+    &__action {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 40rpx 0 40rpx 0;
+      
+      &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 16rpx;
+        width: 32rpx;
+        height: 32rpx;
+        font-size: 20rpx;
+        // line-height: 32rpx;
+        border-radius: 50%;
+        color: #FFFFFF;
+      }
+      
+      &__text {
+        padding: 0 16rpx;
+        color: $tn-font-color;
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+    }
+    
+    &__week-day-zh {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 12rpx 0;
+      overflow: hidden;
+      box-shadow: 16rpx 6rpx 8rpx 0 #E6E6E6;
+      margin-bottom: 2rpx;
+      
+      &__text {
+        flex: 1;
+        text-align: center;
+      }
+    }
+    
+    &__content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 100%;
+      padding: 12rpx 0;
+      box-sizing: border-box;
+      background-color: #F7F7F7;
+      position: relative;
+      
+      &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 14.2857%;
+        padding: 12rpx 0;
+        margin: 6rpx 0;
+        overflow: hidden;
+        position: relative;
+        z-index: 2;
+        // box-shadow: inset 0rpx 0rpx 22rpx 4rpx rgba(255,255,255, 0.52);
+        
+        &__text {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 80rpx;
+          font-size: 32rpx;
+          position: relative;
+        }
+        
+        &__tips {
+          position: absolute;
+          width: 100%;
+          line-height: 24rpx;
+          left: 0;
+          bottom: 8rpx;
+          text-align: center;
+          z-index: 2;
+          transform-origin: center center;
+          transform: scale(0.8);
+        }
+      }
+      
+      &--start-date {
+        border-top-left-radius: 8rpx;
+        border-bottom-left-radius: 8rpx;
+      }
+      
+      &--end-date {
+        border-top-right-radius: 8rpx;
+        border-bottom-right-radius: 8rpx;
+      }
+      
+      &__month {
+        &--bg {
+          position: absolute;
+          font-size: 200rpx;
+          line-height: 200rpx;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          color: $tn-font-holder-color;
+          z-index: 1;
+        }
+      }
+    }
+    
+    &__bottom {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      background-color: #F7F7F7;
+      padding: 0 40rpx 30rpx;
+      box-sizing: border-box;
+      font-size: 24rpx;
+      color: $tn-font-sub-color;
+      
+      &__choose {
+        height: 50rpx;
+      }
+      
+      &__btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 60rpx;
+        border-radius: 40rpx;
+        color: #FFFFFF;
+        font-size: 28rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-car-keyboard/tn-car-keyboard.vue b/tuniao-ui/components/tn-car-keyboard/tn-car-keyboard.vue
new file mode 100644
index 0000000..ea41111
--- /dev/null
+++ b/tuniao-ui/components/tn-car-keyboard/tn-car-keyboard.vue
@@ -0,0 +1,320 @@
+<template>
+  <view class="tn-car-keyboard-class tn-car-keyboard" @touchmove.stop.prevent="() => {}">
+    <view class="tn-car-keyboard__grids">
+      
+      <view
+        v-for="(data, index) in inputCarNumber ? endKeyBoardList : areaList"
+        :key="index"
+        class="tn-car-keyboard__grids__item"
+      >
+        <view
+          v-for="(sub_data, sub_index) in data"
+          :key="sub_index"
+          class="tn-car-keyboard__grids__btn"
+          :class="{'tn-car-keyboard__grids__btn--disabled': sub_data === 'I'}"
+          :hover-class="sub_data !== 'I' ? 'tn-car-keyboard--hover' : ''"
+          :hover-stay-time="100"
+          @tap="click(index, sub_index)"
+        >
+          {{ sub_data }}
+        </view>
+      </view>
+      
+      <view
+        class="tn-car-keyboard__back"
+        hover-class="tn-hover-class"
+        :hover-stay-time="150"
+        @touchstart.stop="backspaceClick"
+        @touchend="clearTimer"
+      >
+        <view class="tn-icon-left tn-car-keyboard__back__icon"></view>
+      </view>
+      
+      <view
+        class="tn-car-keyboard__change"
+        hover-class="tn-car-keyboard--hover"
+        :hover-stay-time="150"
+        @tap="changeMode"
+      >
+        <text class="tn-car-keyboard__mode--zh" :class="[`tn-car-keyboard__mode--${!inputCarNumber ? 'active' : 'inactive'}`]">CN</text>
+        /
+        <text class="tn-car-keyboard__mode--en" :class="[`tn-car-keyboard__mode--${inputCarNumber ? 'active' : 'inactive'}`]">EN</text>
+      </view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-car-keyboard',
+    props: {
+      // 是否打乱键盘顺序
+      randomEnabled: {
+        type: Boolean,
+        default: false
+      },
+      // 切换中英文输入
+      switchEnMode: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      areaList() {
+        let data = [
+          '京',
+          '沪',
+          '粤',
+          '津',
+          '冀',
+          '豫',
+          '云',
+          '辽',
+          '黑',
+          '湘',
+          '皖',
+          '鲁',
+          '苏',
+          '浙',
+          '赣',
+          '鄂',
+          '桂',
+          '甘',
+          '晋',
+          '陕',
+          '蒙',
+          '吉',
+          '闽',
+          '贵',
+          '渝',
+          '川',
+          '青',
+          '琼',
+          '宁',
+          '藏',
+          '港',
+          '澳',
+          '新',
+          '使',
+          '学',
+          '临',
+          '警'
+        ]
+        // 打乱顺序
+        if (this.randomEnabled) data = this.$t.array.random(data)
+        // 切割二维数组
+        let showData = []
+        showData[0] = data.slice(0, 10)
+        showData[1] = data.slice(10, 20)
+        showData[2] = data.slice(20, 30)
+        showData[3] = data.slice(30, 37)
+        return showData
+      },
+      endKeyBoardList() {
+        let data = [
+          1,
+          2,
+          3,
+          4,
+          5,
+          6,
+          7,
+          8,
+          9,
+          0,
+          'Q',
+          'W',
+          'E',
+          'R',
+          'T',
+          'Y',
+          'U',
+          'I',
+          'O',
+          'P',
+          'A',
+          'S',
+          'D',
+          'F',
+          'G',
+          'H',
+          'J',
+          'K',
+          'L',
+          'Z',
+          'X',
+          'C',
+          'V',
+          'B',
+          'N',
+          'M'
+        ]
+        // 打乱顺序
+        if (this.randomEnabled) data = this.$t.array.random(data)
+        // 切割二维数组
+        let showData = []
+        showData[0] = data.slice(0, 10)
+        showData[1] = data.slice(10, 20)
+        showData[2] = data.slice(20, 29)
+        showData[3] = data.slice(29, 36)
+        return showData
+      }
+    },
+    data() {
+      return {
+        // 标记是否输入车牌号码
+        inputCarNumber: false,
+        // 长按多次删除事件监听
+        longPressDeleteTimer: null
+      }
+    },
+    watch:{
+      switchEnMode: {
+        handler(value) {
+          if (value) {
+            this.inputCarNumber = true
+          } else {
+            this.inputCarNumber = false
+          }
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      // 点击键盘按钮
+      click(i, j) {
+        let value = ''
+        // 根据不同模式获取不同数组的值
+        if (this.inputCarNumber) value = this.endKeyBoardList[i][j]
+        else value = this.areaList[i][j]
+        
+        // 车牌里不包含I
+        if (value === 'I') return
+        
+        this.$emit('change', value)
+      },
+      // 修改输入模式
+      // 中文/英文
+      changeMode() {
+        this.inputCarNumber = !this.inputCarNumber
+      },
+      // 点击退格
+      backspaceClick() {
+        this.$emit('backspace')
+        this.clearTimer()
+        this.longPressDeleteTimer = setInterval(() => {
+          this.$emit('backspace')
+        }, 250)
+      },
+      // 清空定时器
+      clearTimer() {
+        if (this.longPressDeleteTimer) {
+          clearInterval(this.longPressDeleteTimer)
+          this.longPressDeleteTimer = null
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-car-keyboard {
+    position: relative;
+    padding: 24rpx 0;
+    background-color: #E6E6E6;
+    
+    &__grids {
+      
+      &__item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      &__btn {
+        display: inline-flex;
+        justify-content: center;
+        flex: 0 0 64rpx;
+        width: 62rpx;
+        height: 80rpx;
+        font-size: 38rpx;
+        line-height: 80rpx;
+        font-weight: 500;
+        text-decoration: none;
+        text-align: center;
+        background-color: #FFFFFF;
+        margin: 8rpx 5rpx;
+        border-radius: 8rpx;
+        box-shadow: 0 2rpx 0rpx $tn-box-shadow-color;
+        
+        &--disabled {
+          opacity: 0.6;
+        }
+      }
+    }
+    
+    &__back {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 96rpx;
+      height: 80rpx;
+      right: 22rpx;
+      bottom: 32rpx;
+      background-color: #E6E6E6;
+      border-radius: 8rpx;
+      box-shadow: 0 2rpx 0rpx $tn-box-shadow-color;
+    }
+    
+    &__change {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 96rpx;
+      height: 80rpx;
+      left: 22rpx;
+      bottom: 32rpx;
+      line-height: 1;
+      background-color: #FFFFFF;
+      border-radius: 8rpx;
+      box-shadow: 0 2rpx 0rpx $tn-box-shadow-color;
+    }
+    
+    &__mode {
+      &--zh {
+        transform: translateY(-10rpx);
+      }
+      &--en {
+        transform: translateY(10rpx);
+      }
+      
+      &--active {
+        color: $tn-main-color;
+        font-size: 30rpx;
+      }
+      
+      &--inactive {
+        &.tn-car-keyboard__mode--zh {
+          transform: scale(0.85) translateY(-10rpx);
+        }
+      }
+      
+      &--inactive {
+        &.tn-car-keyboard__mode--en {
+          transform: scale(0.85) translateY(10rpx);
+        }
+      }
+    }
+    
+    &--hover {
+      background-color: #E6E6E6 !important;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-cascade-selection/tn-cascade-selection.vue b/tuniao-ui/components/tn-cascade-selection/tn-cascade-selection.vue
new file mode 100644
index 0000000..d539d16
--- /dev/null
+++ b/tuniao-ui/components/tn-cascade-selection/tn-cascade-selection.vue
@@ -0,0 +1,664 @@
+<template>
+  <view class="tn-cascade-selection tn-cascade-selection-class">
+    <scroll-view
+      class="selection__scroll-view"
+      :class="[{'tn-border-solid-bottom': headerLine}]"
+      :style="[scrollViewStyle]"
+      scroll-x
+      scroll-with-animation
+      :scroll-into-view="scrollViewId"
+    >
+      <view class="selection__header" :class="[backgroundColorClass]" :style="[headerStyle]">
+        <view
+          v-for="(item, index) in selectedArr"
+          :key="index"
+          :id="`select__${index}`"
+          class="selection__header__item"
+          :class="[headerItemClass(index)]"
+          :style="[headerItemStyle(index)]"
+          @tap.stop="clickNav(index)"
+        >
+          {{ item.text }}
+          <view
+            v-if="index===currentTab && showActiveLine"
+            class="selection__header__line"
+            :style="{backgroundColor: activeLineColor}"
+          ></view>
+        </view>
+      </view>
+    </scroll-view>
+    
+    <swiper
+      class="selection__list"
+      :class="[backgroundColorClass]"
+      :style="[listStyle]"
+      :current="currentTab"
+      :duration="300"
+      @change="switchTab"
+    >
+      <swiper-item
+        v-for="(item, index) in selectedArr"
+        :key="index"
+      >
+        <scroll-view
+          class="selection__list__item"
+          :style="{height: selectionContainerHeight + 'rpx'}"
+          scroll-y
+          :scroll-into-view="item.scrollViewId"
+        >
+          <view class="selection__list__item--first"></view>
+          <view
+            v-for="(subItem, subIndex) in item.list"
+            :key="subIndex"
+            :id="`select__${subIndex}`"
+            class="selection__list__item__cell"
+            :style="[itemStyle]"
+            @tap="change(index, subIndex, subItem)"
+          >
+            <view
+              v-if="item.index === subIndex"
+              class="selection__list__item__icon tn-icon-success-circle-fill"
+              :style="[itemIconStyle]"
+            ></view>
+            <image
+              v-if="subItem.src"
+              class="selection__list__item__image"
+              :style="[itemImageStyle]"
+              :src="subItem.src"
+            ></image>
+            <view
+              class="selection__list__item__title"
+              :class="[{'tn-text-bold': item.index === subIndex && itemActiveBold}]"
+              :style="[itemTitleStyle(index, subIndex)]"
+            >
+              {{ subItem.text }}
+            </view>
+            <view
+              v-if="subItem.subText"
+              class="selection__list__item__title--sub"
+              :style="[itemSubTitleStyle]"
+            >
+              {{ subItem.subText }}
+            </view>
+          </view>
+        </scroll-view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-cascade-selection',
+    mixins: [ componentsColorMixin ],
+    props: {
+      // 如果下一级是请求返回，则为第一级数据，否则为所有数据
+      /* {
+        text: '', // 标题
+        subText: '', // 子标题
+        src: '', // 图片地址
+        value: 0, // 选中的值
+        children: [
+          {
+            text: '',
+            subText: '',
+            value: 0,
+            children: []
+          }
+        ]
+      } */
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 默认选中值
+      // ['value1','value2','value3']
+      defaultValue: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 子集数据通过请求来获取
+      request: {
+        type: Boolean,
+        default: false
+      },
+      // request为true时生效, 获取到的子集数据
+      receiveData: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 显示header底部细线
+      headerLine: {
+        type: Boolean,
+        default: true
+      },
+      // header背景颜色
+      headerBgColor: {
+        type: String,
+        default: ''
+      },
+      // 顶部标签栏高度,单位rpx
+      tabsHeight: {
+        type: Number,
+        default: 88
+      },
+      // 默认显示文字
+      text: {
+        type: String,
+        default: ''
+      },
+      // 选中的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 选中后加粗
+      activeBold: {
+        type: Boolean,
+        default: true
+      },
+      // 选中显示底部线条
+      showActiveLine: {
+        type: Boolean,
+        default: true
+      },
+      // 线条颜色
+      activeLineColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // icon大小,单位rpx
+      activeIconSize: {
+        type: Number,
+        default: 0
+      },
+      // icon颜色
+      activeIconColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // item图片宽度, 单位rpx
+      itemImgWidth: {
+        type: Number,
+        default: 0
+      },
+      // item图片高度, 单位rpx
+      itemImgHeight: {
+        type: Number,
+        default: 0
+      },
+      // item图片圆角
+      itemImgRadius: {
+        type: String,
+        default: '50%'
+      },
+      // item text颜色
+      itemTextColor: {
+        type: String,
+        default: ''
+      },
+      // item text选中颜色
+      itemActiveTextColor: {
+        type: String,
+        default: ''
+      },
+      // item text选中加粗
+      itemActiveBold: {
+        type: Boolean,
+        default: true
+      },
+      // item text文字大小, 单位rpx
+      itemTextSize: {
+        type: Number,
+        default: 0
+      },
+      // item subText颜色
+      itemSubTextColor: {
+        type: String,
+        default: ''
+      },
+      // item subText字体大小, 单位rpx
+      itemSubTextSize: {
+        type: Number,
+        default: 0
+      },
+      // item样式
+      itemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // selection选项容器高度, 单位rpx
+      selectionContainerHeight: {
+        type: Number,
+        default: 300
+      }
+    },
+    computed: {
+      scrollViewStyle() {
+        let style = {}
+        if (this.headerBgColor) {
+          style.backgroundColor = this.headerBgColor
+        }
+        return style
+      },
+      headerStyle() {
+        let style = {}
+        style.height = `${this.tabsHeight}rpx`
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        return style
+      },
+      headerItemClass() {
+        return (index) => {
+          let clazz = ''
+          if (index !== this.currentTab) {
+            clazz += ` ${this.fontColorClass}`
+          } else {
+            if (this.activeBold) {
+              clazz += ' tn-text-bold'
+            }
+          }
+          return clazz
+        }
+      },
+      headerItemStyle() {
+        return (index) => {
+          let style = {}
+          style.color = index === this.currentTab ? this.activeColor : (this.fontColorStyle ? this.fontColorStyle : '')
+          if (this.fontSizeStyle) {
+            style.fontSize = this.fontSizeStyle
+          }
+          return style
+        }
+      },
+      listStyle() {
+        let style = {}
+        style.height = `${this.selectionContainerHeight}rpx`
+        if (this.backgroundColorStyle) {
+          style.color = this.backgroundColorStyle
+        }
+        return style
+      },
+      itemIconStyle() {
+        let style = {}
+        if (this.activeIconColor) {
+          style.color = this.activeIconColor
+        }
+        if (this.activeIconSize) {
+          style.fontSize = this.activeIconSize + 'rpx'
+        }
+        return style
+      },
+      itemImageStyle() {
+        let style = {}
+        if (this.itemImgWidth) {
+          style.width = this.itemImgWidth + 'rpx'
+        }
+        if (this.itemImgHeight) {
+          style.height = this.itemImgHeight + 'rpx'
+        }
+        if (this.itemImgRadius) {
+          style.borderRadius = this.itemImgRadius
+        }
+        return style
+      },
+      itemTitleStyle() {
+        return (index, subIndex) => {
+          let style = {}
+          if (index === subIndex) {
+            if (this.itemActiveTextColor) {
+              style.color = this.itemActiveTextColor
+            }
+          } else {
+            if (this.itemTextColor) {
+              style.color = this.itemTextColor
+            }
+          }
+          if (this.itemTextSize) {
+            style.fontSize = this.itemTextSize + 'rpx'
+          }
+          return style
+        }
+      },
+      itemSubTitleStyle() {
+        let style = {}
+        if (this.itemSubTextColor) {
+          style.color = this.itemSubTextColor
+        }
+        if (this.itemSubTextSize) {
+          style.fontSize = this.itemSubTextSize + 'rpx'
+        }
+        return {}
+      }
+    },
+    watch: {
+      list(val) {
+        this.initData(val, -1)
+      },
+      defaultValue(val) {
+        this.setDefaultValue(val)
+      },
+      receiveData(val) {
+        this.addSubData(val, this.currentTab)
+      },
+    },
+    data() {
+      return {
+        // 当前选中的子集
+        currentTab: 0,
+        // tabs栏scrollView滚动的位置
+        scrollViewId: 'select__0',
+        // 选项数组
+        selectedArr: []
+      }
+    },
+    created() {
+      this.setDefaultValue(this.defaultValue)
+    },
+    methods: {
+      getDefaultPlaceholder() {
+        return this.text || getLocalizedText(this, '请选择', 'Please Select')
+      },
+      // 初始化数据
+      initData(data, index) {
+        if (!data || data.length === 0) return
+        if (this.request) {
+          // 第一级数据
+          this.addSubData(data, index)
+        } else {
+          this.addSubData(this.getItemList(index, -1), index)
+        }
+      },
+      // 重置数据
+      reset() {
+        this.initData(this.list, -1)
+      },
+      // 滚动切换
+      switchTab(e) {
+        this.currentTab = e.detail.current
+        this.checkSelectPosition()
+      },
+      // 点击标题切换
+      clickNav(index) {
+        if (this.currentTab !== index) {
+          this.currentTab = index
+        }
+      },
+      // 列表数据发生改变
+      change(index, subIndex, subItem) {
+        let item = this.selectedArr[index]
+        if (item.index === subIndex) return
+        item.index = subIndex
+        item.text = subItem.text
+        item.subText = subItem.subText || ''
+        item.value = subItem.value
+        item.src = subItem.src || ''
+        this.$emit('change', {
+          index: index,
+          subIndex: subIndex,
+          ...subItem
+        })
+        
+        // 如果不是异步加载，则取出对应的数据
+        if (!this.request) {
+          let data = this.getItemList(index, subIndex)
+          this.addSubData(data, index)
+        }
+      },
+      // 设置默认的数据
+      setDefaultValue(val) {
+        let defaultValues = val || []
+        if (defaultValues.length > 0) {
+          this.selectedArr = this.getItemListWithValues(JSON.parse(JSON.stringify(this.list)), defaultValues)
+          if (!this.selectedArr) return
+          this.currentTab = this.selectedArr.length - 1
+          this.$nextTick(() => {
+            this.checkSelectPosition()
+          })
+          // defaultItemList.map((item) => {
+          //   item.scrollViewId = `select__${item.index}`
+          // })
+          // this.selectedArr = defaultItemList
+          // this.currentTab = defaultItemList.length - 1
+          // this.$nextTick(() => {
+          //   this.checkSelectPosition()
+          // })
+        } else {
+          this.initData(this.list, -1)
+        }
+      },
+      // 获取对应选项的item数据
+      getItemList(index, subIndex) {
+        let list = []
+        let arr = JSON.parse(JSON.stringify(this.list))
+        // 初始化数据
+        if (index === -1) {
+          list = this.removeChildren(arr)
+        } else {
+          // 判断第一项是否已经选择
+          let value = this.selectedArr[0].index
+          value = value === -1 ? subIndex : value
+          list = arr[value].children || []
+          if (index > 0) {
+            for (let i = 1; i < index + 1; i++) {
+              // 获取当前数据选中的序号
+              let val = index === i ? subIndex : this.selectedArr[i].index
+              list = list[val].children || []
+              if (list.length === 0) break
+            }
+          }
+          list = this.removeChildren(list)
+        }
+        return list
+      },
+      // 根据数组中的值获取对应的item数据
+      getItemListWithValues(data, values) {
+        const defaultValues = JSON.parse(JSON.stringify(values))
+        if (!defaultValues || defaultValues.length === 0) return
+        // 取出第一个值所对应的item
+        const itemIndex = data.findIndex((item) => {
+          return item.value === defaultValues[0]
+        })
+        if (itemIndex === -1) return
+        const item = data[itemIndex]
+        item.index = itemIndex
+        item.scrollViewId = `select__${itemIndex}`
+        item.list = this.removeChildren(JSON.parse(JSON.stringify(data)))
+        // 判断是否只有1个值
+        if (defaultValues.length === 1 || (!item.hasOwnProperty('children') || item.children.length === 0)) {
+          return this.removeChildren([item])
+        } else {
+          let selectItemList = []
+          const children = item.children
+          selectItemList.push(item)
+          // 移除已经获取的值
+          defaultValues.splice(0, 1)
+          const childrenValue = this.getItemListWithValues(children, defaultValues)
+          selectItemList = selectItemList.concat(childrenValue)
+          
+          return this.removeChildren(selectItemList)
+        }
+      },
+      // 删除子元素
+      removeChildren(data) {
+        let list = data.map((item) => {
+          if (item.hasOwnProperty('children')) {
+            delete item['children']
+          }
+          return item
+        })
+        return list
+      },
+      // 新增子集数据时处理
+      addSubData(data, index) {
+        // 判断是否已经完成选择数据或者为初始化数据
+        if (!data || data.length === 0) {
+          if (index == -1) return
+          // 完成选择
+          let arr = this.selectedArr
+          // 如果当前选中项的序号比已选数据的长度小，则表示当前重新选择了数据
+          if (index < arr.length - 1) {
+            let newArr = arr.slice(0, index + 1)
+            this.selectedArr = newArr
+          }
+          let result = JSON.parse(JSON.stringify(this.selectedArr))
+          let lastItem = result[result.length - 1] || {}
+          let text = ''
+          result.map(item => {
+            text += item.text
+            delete item['list']
+            delete item['scrollViewId']
+            return item
+          })
+          this.$emit('complete', {
+            result: result,
+            value: lastItem.value,
+            text: text,
+            subText: lastItem.subText,
+            src: lastItem.src
+          })
+        } else {
+          // 重置数据
+          let item = [{
+            text: this.getDefaultPlaceholder(),
+            subText: '',
+            value: '',
+            src: '',
+            index: -1,
+            scrollViewId: 'select__0',
+            list: data
+          }]
+          // 初始化数据
+          if (index === -1) {
+            this.selectedArr = item
+          } else {
+            // 拼接新旧数据并且判断是否为重新选择了数据（如果为重新选择了数据则重置之后的选项数据）
+            let retainArr = this.selectedArr.slice(0, index + 1)
+            this.selectedArr = retainArr.concat(item)
+          }
+          this.$nextTick(() => {
+            this.currentTab = this.selectedArr.length - 1
+          })
+        }
+      },
+      // 检查当前选中项，并将选项设置位置信息
+      checkSelectPosition() {
+        let item = this.selectedArr[this.currentTab]
+        item.scrollViewId = 'select__0'
+        this.$nextTick(() => {
+          setTimeout(() => {
+            // 设置当前数据滚动到的位置
+            let val = item.index < 2 ? 0 : Number(item.index - 2)
+            item.scrollViewId = `select__${val}`
+          }, 10)
+        })
+        
+        // 设置选项滚动到所在的位置
+        if (this.currentTab > 1) {
+          this.scrollViewId = `select__${this.currentTab - 1}`
+        } else {
+          this.scrollViewId = `select__0`
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-cascade-selection {
+    width: 100%;
+  }
+  
+  .selection {
+    &__scroll-view {
+      background-color: #FFFFFF;
+    }
+    
+    &__header {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      position: relative;
+      
+      &__item {
+        max-width: 240rpx;
+        padding: 15rpx 30rpx;
+        flex-shrink: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: relative;
+      }
+      
+      &__line {
+        width: 60rpx;
+        height: 6rpx;
+        border-radius: 4rpx;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+    
+    &__list {
+      background-color: #FFFFFF;
+      &__item {
+        &--first {
+          width: 100%;
+          height: 20rpx;
+        }
+        
+        &__cell {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          padding: 20rpx 30rpx;
+        }
+        
+        &__icon {
+          margin-right: 12rpx;
+          font-size: 24rpx;
+        }
+        
+        &__image {
+          width: 40rpx;
+          height: 40rpx;
+          margin-right: 12rpx;
+          flex-shrink: 0;
+        }
+        
+        &__title {
+          word-break: break-all;
+          color: #333333;
+          font-size: 28rpx;
+          
+          &--sub {
+            margin-left: 20rpx;
+            word-break: break-all;
+            color: $tn-font-sub-color;
+            font-size: 24rpx;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue b/tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue
new file mode 100644
index 0000000..5472ad5
--- /dev/null
+++ b/tuniao-ui/components/tn-checkbox-group/tn-checkbox-group.vue
@@ -0,0 +1,134 @@
+<template>
+  <view class="tn-checkbox-group-class tn-checkbox-group">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import Emitter from '../../libs/utils/emitter.js'
+  
+  export default {
+    mixins: [ Emitter ],
+    name: 'tn-checkbox-group',
+    props: {
+      value: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 可以选中多少个checkbox
+      max: {
+        type: Number,
+        default: 999
+      },
+      // 表单提交时的标识符
+      name: {
+        type: String,
+        default: ''
+      },
+      // 禁用选择
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用点击标签进行选择
+      disabledLabel: {
+        type: Boolean,
+        default: false
+      },
+      // 选择框的形状 square 方形 circle 圆形
+      shape: {
+        type: String,
+        default: 'square'
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 组件大小
+      size: {
+        type: Number,
+        default: 34
+      },
+      // 每个checkbox占的宽度
+      width: {
+        type: String,
+        default: 'auto'
+      },
+      // 是否换行
+      wrap: {
+        type: Boolean,
+        default: false
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 20
+      }
+    },
+    computed: {
+      // 这里computed的变量，都是子组件tn-checkbox需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+      // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(tn-checkbox-group)
+      // 拉取父组件新的变化后的参数
+      parentData() {
+        return [this.value, this.disabled, this.disabledLabel, this.shape, this.activeColor, this.size, this.width, this.wrap, this.iconSize]
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      // 当父组件中的子组件需要共享的参数发生了变化，手动通知子组件
+      parentData() {
+        if (this.children.length) {
+          this.children.map(child => {
+            // 判断子组件(tn-checkbox)如果有updateParentData方法的话，子组件重新从父组件拉取了最新的值
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    },
+    created() {
+      this.children = []
+    },
+    methods: {
+      initValue(values) {
+        this.$emit('input', values)
+      },
+      // 触发事件
+      emitEvent() {
+        let values = []
+        this.children.map(child => {
+          if (child.checkValue) values.push(child.name)
+        })
+        this.$emit('change', values)
+        this.$emit('input', values)
+        // 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
+        // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+        setTimeout(() => {
+        	// 将当前的值发送到 tn-form-item 进行校验
+        	this.dispatch('tn-form-item', 'on-form-change', values)
+        }, 60)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-checkbox-group {
+    /* #ifndef MP || APP-NVUE */
+    display: inline-flex;
+    flex-wrap: wrap;
+    /* #endif */
+    &::after {
+      content: " ";
+      display: table;
+      clear: both;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-checkbox/tn-checkbox.vue b/tuniao-ui/components/tn-checkbox/tn-checkbox.vue
new file mode 100644
index 0000000..e11d8f5
--- /dev/null
+++ b/tuniao-ui/components/tn-checkbox/tn-checkbox.vue
@@ -0,0 +1,328 @@
+<template>
+  <view class="tn-checkbox-class tn-checkbox" :style="[checkboxStyle]">
+    <view
+      class="tn-checkbox__icon-wrap"
+      :class="[iconClass]"
+      :style="[iconStyle]"
+      @tap="toggle"
+    >
+      <view class="tn-checkbox__icon-wrap__icon" :class="[`tn-icon-${iconName}`]"></view>
+    </view>
+    
+    <view
+      class="tn-checkbox__label"
+      :class="[labelClass]"
+      :style="{
+        fontSize: labelSize ? labelSize + 'rpx' : ''
+      }"
+      @tap="onClickLabel"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-checkbox',
+    props: {
+      // checkbox名称
+      name: {
+        type: [String, Number],
+        default: ''
+      },
+      // 是否为选中状态
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用选择
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用点击标签进行选择
+      disabledLabel: {
+        type: Boolean,
+        default: false
+      },
+      // 选择框的形状 square 方形 circle 圆形
+      shape: {
+        type: String,
+        default: ''
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 组件大小
+      size: {
+        type: Number,
+        default: 0
+      },
+      // 图标名称
+      iconName: {
+        type: String,
+        default: 'success'
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 0
+      },
+      // label的字体大小
+      labelSize: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 是否禁用选中，父组件的禁用会覆盖当前的禁用状态
+      isDisabled() {
+        return this.disabled ? this.disabled : (this.parent ? this.parentData.disabled : false)
+      },
+      // 是否禁用点击label选中，父组件的禁用会覆盖当前的禁用状态
+      isDisabledLabel() {
+        return this.disabledLabel ? this.disabledLabel : (this.parent ? this.parentData.disabledLabel : false)
+      },
+      // 尺寸
+      checkboxSize() {
+        return this.size ? this.size : (this.parent ? this.parentData.size : 34)
+      },
+      // 激活时的颜色
+      elAvtiveColor() {
+        return this.activeColor ? this.activeColor : (this.parent ? this.parentData.activeColor : '#01BEFF')
+      },
+      // 形状
+      elShape() {
+        return this.shape ? this.shape : (this.parent ? this.parentData.shape : 'square')
+      },
+      iconClass() {
+        let clazz = ''
+        clazz += (' tn-checkbox__icon-wrap--' + this.elShape)
+        
+        if (this.checkValue) clazz += ' tn-checkbox__icon-wrap--checked'
+        if (this.isDisabled) clazz += ' tn-checkbox__icon-wrap--disabled'
+        if (this.value && this.isDisabled) clazz += ' tn-checkbox__icon-wrap--disabled--checked'
+        
+        return clazz
+      },
+      iconStyle() {
+        let style = {}
+        // 判断是否用户手动禁用和传递的值
+        if (this.elAvtiveColor && this.checkValue && !this.isDisabled) {
+          style.borderColor = this.elAvtiveColor
+          style.backgroundColor = this.elAvtiveColor
+        }
+        
+        // checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
+        style.color = this.checkValue ? '#FFFFFF' : 'transparent'
+        
+        style.width = this.checkboxSize + 'rpx'
+        style.height = style.width
+        
+        style.fontSize = (this.iconSize ? this.iconSize : (this.parent ? this.parentData.iconSize : 20)) + 'rpx'
+        
+        return style
+      },
+      checkboxStyle() {
+        let style = {}
+        if (this.parent && this.parentData.width) {
+          // #ifdef MP
+          // 各家小程序因为它们特殊的编译结构，使用float布局
+          style.float = 'left';
+          // #endif
+          // #ifndef MP
+          // H5和APP使用flex布局
+          style.flex = `0 0 ${this.parentData.width}`;
+          // #endif
+        }
+        if(this.parent && this.parentData.wrap) {
+        	style.width = '100%';
+        	// #ifndef MP
+        	// H5和APP使用flex布局，将宽度设置100%，即可自动换行
+        	style.flex = '0 0 100%';
+        	// #endif
+        }
+        
+        return style
+      },
+      labelClass() {
+        let clazz = ''
+        if (this.isDisabled) {
+          clazz += ' tn-checkbox__label--disabled'
+        }
+        return clazz
+      }
+    },
+    data() {
+      return {
+        // 当前checkbox的value值
+        checkValue: false,
+        parentData: {
+          value: null,
+          max: null,
+          disabled: null,
+          disabledLabel: null,
+          shape: null,
+          activeColor: null,
+          size: null,
+          width: null,
+          wrap: null,
+          iconSize: null
+        }
+      }
+    },
+    watch: {
+      value(val) {
+        this.checkValue = val
+      }
+    },
+    created() {
+      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+      // this.parent = this.$t.$parent.call(this, 'tn-checkbox-group')
+      // // 如果存在u-checkbox-group，将本组件的this塞进父组件的children中
+      // this.parent && this.parent.children.push(this)
+      // // 初始化父组件的value值
+      // this.parent && this.parent.emitEvent()
+      this.updateParentData()
+      this.parent && this.parent.children.push(this)
+    },
+    methods: {
+      updateCheckValue() {
+        // 更新当前checkbox的选中状态
+        this.checkValue = (this.parent && this.parentData.value.includes(this.name)) || this.value === true
+        if (this.parent) {
+          if (this.value && !this.parentData.value.includes(this.name)) {
+            this.parentData.value.push(this.name)
+            this.parent.initValue(this.parentData.value)
+          }
+        }
+      },
+      updateParentData() {
+        this.getParentData('tn-checkbox-group')
+        this.updateCheckValue()
+      },
+      onClickLabel() {
+        if (!this.isDisabled && !this.isDisabledLabel) {
+          this.setValue()
+        }
+      },
+      toggle() {
+        if (!this.isDisabled) {
+          this.setValue()
+        }
+      },
+      emitEvent() {
+        this.$emit('change', {
+          name: this.name,
+          value: !this.checkValue
+        })
+        if (this.parent) {
+          this.checkValue = !this.checkValue
+          // 执行父组件tn-checkbox-group的事件方法
+          // 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
+          setTimeout(() => {
+            if(this.parent.emitEvent) this.parent.emitEvent();
+          }, 80)
+        }
+      },
+      // 设置input的值，通过v-modal绑定组件的值
+      setValue() {
+        // 判断是否为可选项组
+        if (this.parent) {
+          // 反转状态
+          if (this.checkValue === true) {
+            this.emitEvent()
+            // this.$emit('input', !this.checkValue)
+          } else {
+            // 超出最大可选项，弹出提示
+            if (this.parentData.value.length >= this.parentData.max) {
+              return this.$t.message.toast(`最多可选${this.parent.max}项`)
+            }
+            // 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
+            this.emitEvent();
+            // this.$emit('input', !this.checkValue);
+          }
+        } else {
+          // 只有一个可选项
+          this.emitEvent()
+          this.$emit('input', !this.checkValue)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-checkbox {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+    line-height: 1.8;
+    
+    &__icon-wrap {
+      color: $tn-font-color;
+      flex: none;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: 42rpx;
+      height: 42rpx;
+      color: transparent;
+      text-align: center;
+      transition-property: color, border-color, background-color;
+      border: 1px solid $tn-font-sub-color;
+      transition-duration: 0.2s;
+      
+      /* #ifdef MP-TOUTIAO */
+      // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+      &__icon {
+      	line-height: 0;
+      }
+      /* #endif */
+      
+      &--circle {
+        border-radius: 100%;
+      }
+      
+      &--square {
+        border-radius: 6rpx;
+      }
+      
+      &--checked {
+        color: #FFFFFF;
+        background-color: $tn-main-color;
+        border-color: $tn-main-color;
+      }
+      
+      &--disabled {
+        background-color: $tn-font-holder-color;
+        border-color: $tn-font-sub-color;
+      }
+      
+      &--disabled--checked {
+        color: $tn-font-sub-color !important;
+      }
+    }
+    
+    &__label {
+      word-wrap: break-word;
+      margin-left: 10rpx;
+      margin-right: 24rpx;
+      color: $tn-font-color;
+      font-size: 30rpx;
+      
+      &--disabled {
+        color: $tn-font-sub-color;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-circle-progress/tn-circle-progress.vue b/tuniao-ui/components/tn-circle-progress/tn-circle-progress.vue
new file mode 100644
index 0000000..6788c5d
--- /dev/null
+++ b/tuniao-ui/components/tn-circle-progress/tn-circle-progress.vue
@@ -0,0 +1,223 @@
+<template>
+  <view
+    class="tn-circle-progress-class tn-circle-progress"
+    :style="{
+      width: widthPx + 'px',
+      height: widthPx + 'px'
+    }"
+  >
+    <!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+    <!-- 默认圆环 -->
+    <canvas
+      class="tn-circle-progress__canvas-bg"
+      :canvas-id="elBgId"
+      :id="elBgId"
+      :style="{
+        width: widthPx + 'px',
+        height: widthPx + 'px'
+      }"
+    ></canvas>
+    <!-- 进度圆环 -->
+    <canvas
+      class="tn-circle-progress__canvas"
+      :canvas-id="elId"
+      :id="elId"
+      :style="{
+        width: widthPx + 'px',
+        height: widthPx + 'px'
+      }"
+    ></canvas>
+    <view class="tn-circle-progress__content">
+      <slot v-if="$slots.default || $slots.$default"></slot>
+      <view v-else-if="showPercent" class="tn-circle-progress__content__percent">{{ percent + '%' }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-circle-progress',
+    props: {
+      // 进度（百分比）
+      percent: {
+        type: Number,
+        default: 0,
+        validator: val => {
+          return val >= 0 && val <= 100
+        }
+      },
+      // 圆环线宽
+      borderWidth: {
+        type: Number,
+        default: 14
+      },
+      // 整体圆的宽度
+      width: {
+        type: Number,
+        default: 200
+      },
+      // 是否显示条纹
+      striped: {
+        type: Boolean,
+        default: false
+      },
+      // 条纹是否运动
+      stripedActive: {
+        type: Boolean,
+        default: true
+      },
+      // 激活部分颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 非激活部分颜色
+      inactiveColor: {
+        type: String,
+        default: '#f0f0f0'
+      },
+      // 是否显示进度条内部百分比值
+      showPercent: {
+        type: Boolean,
+        default: false
+      },
+      // 圆环执行动画的时间，ms
+      duration: {
+        type: Number,
+        default: 1500
+      }
+    },
+    data() {
+      return {
+        // 微信小程序中不能使用this.$t.uuid()形式动态生成id值，否则会报错
+        // #ifdef MP-WEIXIN
+        elBgId: 'tCircleProgressBgId',
+        elId: 'tCircleProgressElId',
+        // #endif
+        // #ifndef MP-WEIXIN
+        elBgId: this.$t.uuid(),
+        elId: this.$t.uuid(),
+        // #endif
+        // 活动圆上下文
+        progressContext: null,
+        // 转换成px为单位的背景宽度
+        widthPx: uni.upx2px(this.width || 200),
+        // 转换成px为单位的圆环宽度
+        borderWidthPx: uni.upx2px(this.borderWidth || 14),
+        // canvas画圆的起始角度，默认为-90度，顺时针
+        startAngle: -90 * Math.PI / 180,
+        // 动态修改进度值的时候，保存进度值的变化前后值
+        newPercent: 0,
+        oldPercent: 0
+      }
+    },
+    watch: {
+      percent(newVal, oldVal = 0) {
+        if (newVal > 100) newVal = 100
+        if (oldVal < 0) oldVal = 0
+        
+        this.newPercent = newVal
+        this.oldPercent = oldVal
+        setTimeout(() => {
+        	// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
+        	// 将此值减少或者新增到新的百分比值
+        	this.drawCircleByProgress(oldVal)
+        }, 50)
+      }
+    },
+    created() {
+      // 赋值，用于加载后第一个画圆使用
+      this.newPercent = this.percent;
+      this.oldPercent = 0;
+    },
+    mounted() {
+      setTimeout(() => {
+      	this.drawProgressBg()
+      	this.drawCircleByProgress(this.oldPercent)
+      }, 50)
+    },
+    methods: {
+      // 绘制进度条背景
+      drawProgressBg() {
+        let ctx = uni.createCanvasContext(this.elBgId, this)
+        // 设置线宽
+        ctx.setLineWidth(this.borderWidthPx)
+        // 设置颜色
+        ctx.setStrokeStyle(this.inactiveColor)
+        ctx.beginPath()
+        let radius = this.widthPx / 2
+        ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 360 * Math.PI / 180, false)
+        ctx.stroke()
+        ctx.draw()
+      },
+      // 绘制圆弧的进度
+      drawCircleByProgress(progress) {
+        // 如果已经存在则拿来使用
+        let ctx = this.progressContext
+        if (!ctx) {
+          ctx =uni.createCanvasContext(this.elId, this)
+          this.progressContext = ctx
+        }
+        ctx.setLineCap('round')
+        // 设置线条宽度和颜色
+        ctx.setLineWidth(this.borderWidthPx)
+        ctx.setStrokeStyle(this.activeColor)
+        // 将总过渡时间除以100，得出每修改百分之一进度所需的时间
+        let preSecondTime = Math.floor(this.duration / 100)
+        // 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
+        let endAngle = ((360 * Math.PI / 180) / 100) * progress + this.startAngle
+        let radius = this.widthPx / 2
+        ctx.beginPath()
+        ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false)
+        ctx.stroke()
+        ctx.draw()
+        
+        // 如果变更后新值大于旧值，意味着增大了百分比
+        if (this.newPercent > this.oldPercent) {
+          // 每次递增百分之一
+          progress++
+          // 如果新增后的值，大于需要设置的值百分比值，停止继续增加
+          if (progress > this.newPercent) return
+        } else {
+          progress--
+          if (progress < this.newPercent) return
+        }
+        setTimeout(() => {
+          // 定时器，每次操作间隔为time值，为了让进度条有动画效果
+          this.drawCircleByProgress(progress)
+        }, preSecondTime)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-circle-progress {
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;		
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    
+    &__canvas {
+      position: absolute;
+      
+      &-bg {
+        position: absolute;
+      }
+    }
+    
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      &__percent {
+        font-size: 28rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue b/tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue
new file mode 100644
index 0000000..62a9493
--- /dev/null
+++ b/tuniao-ui/components/tn-collapse-item/tn-collapse-item.vue
@@ -0,0 +1,236 @@
+<template>
+  <view class="tn-collapse-item-class tn-collapse-item" :style="[itemStyle]">
+    <!-- 头部 -->
+    <view
+      class="tn-collapse-item__head"
+      :style="[headStyle]"
+      :hover-stay-time="200"
+      :hover-class="hoverClass"
+      @tap.stop="headClick"
+    >
+      <block v-if="!$slots['title-all'] || !$slots['$title-all']">
+        <view
+          v-if="!$slots.title || !$slots.$title"
+          class="tn-collapse-item__head__title tn-text-ellipsis"
+          :style="[
+            { textAlign: align ? align : 'left'},
+            isShow && activeStyle && !arrow ? activeStyle : ''
+          ]"
+        >{{ title }}</view>
+        <view v-else>
+          <slot name="title"></slot>
+        </view>
+        <view class="tn-collapse-item__head__icon__wrap">
+          <view
+            v-if="arrow"
+            class="tn-icon-down tn-collapse-item__head__icon__arrow"
+            :class="{'tn-collapse-item__head__icon__arrow--active': isShow}"
+            :style="[arrowIconStyle]"
+          ></view>
+        </view>
+      </block>
+      <view v-else>
+        <slot name="title-all"></slot>
+      </view>
+    </view>
+    <!-- 内容 -->
+    <view
+      class="tn-collapse-item__body"
+      :style="[{
+        height: isShow ? height + 'px' : '0'
+      }]"
+    >
+      <view class="tn-collapse-item__body__content" :id="elId" :style="[bodyStyle]">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-collapse-item',
+    props: {
+      // 展开
+      open: {
+        type: Boolean,
+        default: false
+      },
+      // 唯一标识
+      name: {
+        type: String,
+        default: ''
+      },
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 标题对齐方式
+      align: {
+        type: String,
+        default: 'left'
+      },
+      // 点击不收起
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 活动时样式
+      activeStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 标识
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    computed: {
+      arrowIconStyle() {
+        let style = {}
+        if (this.arrowColor) {
+          style.color = this.arrowColor
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        isShow: false,
+        elId: this.$t.uuid(),
+        // body高度
+        height: 0,
+        // 头部样式
+        headStyle: {},
+        // 主体样式
+        bodyStyle: {},
+        // item样式
+        itemStyle: {},
+        // 显示右边箭头
+        arrow: true,
+        // 箭头颜色
+        arrowColor: '',
+        // 点击头部时的效果样式
+        hoverClass: ''
+      }
+    },
+    watch: {
+      open(value) {
+        this.isShow = value
+      }
+    },
+    created() {
+      this.parent = false
+      this.isShow = this.open
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      // 异步获取内容或者修改了内容时重新获取内容的信息
+      init() {
+        this.parent = this.$t.$parent.call(this, 'tn-collapse')
+        if (this.parent) {
+          this.nameSync = this.name ? this.name : this.parent.childrens.length
+          // 不存在才添加对应实例
+          !this.parent.childrens.includes(this) && this.parent.childrens.push(this)
+          this.headStyle = this.parent.headStyle
+          this.bodyStyle = this.parent.bodyStyle
+          this.itemStyle = this.parent.itemStyle
+          this.arrow = this.parent.arrow
+          this.arrowColor = this.parent.arrowColor
+          this.hoverClass = this.parent.hoverClass
+        }
+        this.$nextTick(() => {
+          this.queryRect()
+        })
+      },
+      // 点击头部
+      headClick() {
+        if (this.disabled) return
+        if (this.parent && this.parent.accordion) {
+          this.parent.childrens.map(child => {
+            // 如果是手风琴模式，将其他的item关闭
+            if (this !== child) {
+              child.isShow = false
+            }
+          })
+        }
+        
+        this.isShow = !this.isShow
+        // 触发修改事件
+        this.$emit('change', {
+          index: this.index,
+          show: this.isShow
+        })
+        // 只有在打开时才触发父元素的change
+        if (this.isShow) this.parent && this.parent.onChange()
+        this.$forceUpdate()
+      },
+      // 查询内容高度
+      queryRect() {
+        this._tGetRect('#'+this.elId).then(res => {
+          this.height = res.height
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-collapse-item {
+    
+    &__head {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      color: $tn-font-color;
+      font-size: 30rpx;
+      line-height: 1;
+      padding: 24rpx 0;
+      padding-left: 24rpx;
+      text-align: left;
+      background-color: #FFFFFF;
+      
+      &__title {
+        flex: 1;
+        overflow: hidden;
+      }
+      
+      &__icon {
+        &__arrow {
+          transition: all 0.3s;
+          margin-right: 20rpx;
+          margin-left: 14rpx;
+          font-size: inherit;
+          
+          &--active {
+            transform: rotate(180deg);
+            transform-origin: center center;
+          }
+        }
+      }
+    }
+    
+    &__body {
+      transition: all 0.3s;
+      overflow: hidden;
+      
+      &__content {
+        overflow: hidden;
+        font-size: 28rpx;
+        color: $tn-font-color;
+        text-align: left;
+        background-color: #FFFFFF;
+        padding-left: 24rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-collapse/tn-collapse.vue b/tuniao-ui/components/tn-collapse/tn-collapse.vue
new file mode 100644
index 0000000..00ec9a2
--- /dev/null
+++ b/tuniao-ui/components/tn-collapse/tn-collapse.vue
@@ -0,0 +1,98 @@
+<template>
+  <view class="tn-collapse-class tn-collapse">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-collapse',
+    props: {
+      // 是否为手风琴
+      accordion: {
+        type: Boolean,
+        default: true
+      },
+      // 头部样式
+      headStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 主题样式
+      bodyStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 每一个item的样式
+      itemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 显示箭头
+      arrow: {
+        type: Boolean,
+        default: true
+      },
+      // 箭头颜色
+      arrowColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 点击标题栏时的按压样式
+      hoverClass: {
+        type: String,
+        default: 'tn-hover'
+      }
+    },
+    computed: {
+      parentData() {
+        return [this.headStyle, this.bodyStyle, this.itemStyle, this.arrow, this.arrowColor, this.hoverClass]
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      parentData() {
+        // 如果父组件的参数发生变化重新初始化子组件的信息
+        if (this.childrens.length > 0) {
+          this.init()
+        }
+      }
+    },
+    created() {
+      this.childrens = []
+    },
+    methods: {
+      // 重新初始化内部所有子元素计算高度，异步获取数据时重新渲染
+      init() {
+        this.childrens.forEach((child, index) => {
+          child.init()
+        })
+      },
+      // collapseItem被点击时由collapseItem调用父组件
+      onChange() {
+        let activeItem = []
+        this.childrens.forEach((child, index) => {
+          if (child.isShow) {
+            activeItem.push(child.nameSync)
+          }
+        })
+        // 如果时手风琴模式，只有一个匹配结果，即activeItem长度为1
+        if (this.accordion) activeItem = activeItem.join(',')
+        this.$emit('change', activeItem)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/tuniao-ui/components/tn-color-icon/tn-color-icon.vue b/tuniao-ui/components/tn-color-icon/tn-color-icon.vue
new file mode 100644
index 0000000..c7ad83b
--- /dev/null
+++ b/tuniao-ui/components/tn-color-icon/tn-color-icon.vue
@@ -0,0 +1,318 @@
+<template>
+  <text
+    class="tn-color-icon-class tn-color-icon"
+    :class="[
+      'tn-color-icon-' + name
+    ]"
+    :style="{
+      fontSize: size + unit,
+      margin: margin
+    }"
+    @tap="handleClick"
+  ></text>
+</template>
+
+<script>
+  export default {
+    name: 'tn-color-icon',
+    props: {
+      // 索引
+      index: {
+        type: [Number, String],
+        default: '0'
+      },
+      // 图标名称
+      name: {
+        type: String,
+        default: ''
+      },
+      // 图标大小
+      size: {
+        type: Number,
+        default:32
+      },
+      // 大小单位
+      unit: {
+        type: String,
+        default: 'px'
+      },
+      // 外边距
+      margin: {
+        type: String,
+        default: '0'
+      }
+    },
+    computed: {
+      
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick() {
+        this.$emit("click", {
+          index: Number(this.index)
+        })
+        this.$emit("tap", {
+          index: Number(this.index)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  @charset "UTF-8";
+  
+  @font-face {
+    font-family: "tuniaoColorFont"; /* Project id 2445412 */
+    /* Color fonts */
+    src: url('iconfont.woff2?t=1632654518618') format('woff2');
+  }
+  
+  .tn-color-icon {
+    font-family: "tuniaoColorFont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    text-decoration: none;
+  }
+  
+  .tn-color-icon-logo-github:before {
+    content: "\e601";
+  }
+  
+  .tn-color-icon-logo-qq:before {
+    content: "\e602";
+  }
+  
+  .tn-color-icon-logo-weixin:before {
+    content: "\e603";
+  }
+  
+  .tn-color-icon-logo-alipay:before {
+    content: "\e604";
+  }
+  
+  .tn-color-icon-logo-weibo:before {
+    content: "\e605";
+  }
+  
+  .tn-color-icon-logo-dingtalk:before {
+    content: "\e606";
+  }
+  
+  .tn-color-icon-safe:before {
+    content: "\e607";
+  }
+  
+  .tn-color-icon-wifi:before {
+    content: "\e608";
+  }
+  
+  .tn-color-icon-help:before {
+    content: "\e609";
+  }
+  
+  .tn-color-icon-tag:before {
+    content: "\e60a";
+  }
+  
+  .tn-color-icon-play:before {
+    content: "\e60b";
+  }
+  
+  .tn-color-icon-stopwatch:before {
+    content: "\e60c";
+  }
+  
+  .tn-color-icon-home:before {
+    content: "\e60d";
+  }
+  
+  .tn-color-icon-map:before {
+    content: "\e60e";
+  }
+  
+  .tn-color-icon-book:before {
+    content: "\e60f";
+  }
+  
+  .tn-color-icon-qrcode:before {
+    content: "\e610";
+  }
+  
+  .tn-color-icon-discover:before {
+    content: "\e611";
+  }
+  
+  .tn-color-icon-visitor:before {
+    content: "\e612";
+  }
+  
+  .tn-color-icon-menu:before {
+    content: "\e613";
+  }
+  
+  .tn-color-icon-renew:before {
+    content: "\e614";
+  }
+  
+  .tn-color-icon-business:before {
+    content: "\e615";
+  }
+  
+  .tn-color-icon-telephone:before {
+    content: "\e616";
+  }
+  
+  .tn-color-icon-medicine:before {
+    content: "\e617";
+  }
+  
+  .tn-color-icon-chicken:before {
+    content: "\e618";
+  }
+  
+  .tn-color-icon-clock:before {
+    content: "\e619";
+  }
+  
+  .tn-color-icon-download:before {
+    content: "\e61a";
+  }
+  
+  .tn-color-icon-lamp:before {
+    content: "\e61b";
+  }
+  
+  .tn-color-icon-hourglass:before {
+    content: "\e61c";
+  }
+  
+  .tn-color-icon-calendar:before {
+    content: "\e61d";
+  }
+  
+  .tn-color-icon-bluetooth:before {
+    content: "\e61e";
+  }
+  
+  .tn-color-icon-fish:before {
+    content: "\e61f";
+  }
+  
+  .tn-color-icon-seal:before {
+    content: "\e620";
+  }
+  
+  .tn-color-icon-remind:before {
+    content: "\e621";
+  }
+  
+  .tn-color-icon-music:before {
+    content: "\e622";
+  }
+  
+  .tn-color-icon-email:before {
+    content: "\e623";
+  }
+  
+  .tn-color-icon-medal:before {
+    content: "\e624";
+  }
+  
+  .tn-color-icon-image:before {
+    content: "\e625";
+  }
+  
+  .tn-color-icon-network:before {
+    content: "\e626";
+  }
+  
+  .tn-color-icon-wallet:before {
+    content: "\e627";
+  }
+  
+  .tn-color-icon-program:before {
+    content: "\e628";
+  }
+  
+  .tn-color-icon-shrimp:before {
+    content: "\e629";
+  }
+  
+  .tn-color-icon-collect:before {
+    content: "\e62a";
+  }
+  
+  .tn-color-icon-screw:before {
+    content: "\e62b";
+  }
+  
+  .tn-color-icon-set:before {
+    content: "\e62c";
+  }
+  
+  .tn-color-icon-userfavorite:before {
+    content: "\e62d";
+  }
+  
+  .tn-color-icon-useradd:before {
+    content: "\e62e";
+  }
+  
+  .tn-color-icon-honor:before {
+    content: "\e62f";
+  }
+  
+  .tn-color-icon-shop:before {
+    content: "\e630";
+  }
+  
+  .tn-color-icon-usercard:before {
+    content: "\e631";
+  }
+  
+  .tn-color-icon-school:before {
+    content: "\e632";
+  }
+  
+  .tn-color-icon-user:before {
+    content: "\e633";
+  }
+  
+  .tn-color-icon-internet:before {
+    content: "\e634";
+  }
+  
+  .tn-color-icon-time:before {
+    content: "\e635";
+  }
+  
+  .tn-color-icon-topic:before {
+    content: "\e636";
+  }
+  
+  .tn-color-icon-phone:before {
+    content: "\e637";
+  }
+  
+  .tn-color-icon-usertable:before {
+    content: "\e638";
+  }
+  
+  .tn-color-icon-userset:before {
+    content: "\e639";
+  }
+  
+  .tn-color-icon-game:before {
+    content: "\e63a";
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-column-notice/tn-column-notice.vue b/tuniao-ui/components/tn-column-notice/tn-column-notice.vue
new file mode 100644
index 0000000..d5d795b
--- /dev/null
+++ b/tuniao-ui/components/tn-column-notice/tn-column-notice.vue
@@ -0,0 +1,251 @@
+<template>
+  <view
+    class="tn-column-notice-class tn-column-notice"
+    :class="[backgroundColorClass]"
+    :style="[noticeStyle]"
+  >
+    <!-- 左图标 -->
+    <view class="tn-column-notice__icon">
+      <view
+        v-if="leftIcon"
+        class="tn-column-notice__icon--left" 
+        :class="[`tn-icon-${leftIconName}`,fontColorClass]"
+        :style="[fontStyle('leftIcon')]"
+        @tap="clickLeftIcon"></view>
+    </view>
+    
+    <!-- 滚动显示内容 -->
+    <swiper class="tn-column-notice__swiper" :style="[swiperStyle]" :vertical="vertical" circular :autoplay="autoplay && playStatus === 'play'" :interval="duration" @change="change">
+      <swiper-item v-for="(item, index) in list" :key="index" class="tn-column-notice__swiper--item">
+        <view
+          class="tn-column-notice__swiper--content tn-text-ellipsis"
+          :class="[fontColorClass]"
+          :style="[fontStyle()]"
+          @tap="click(index)"
+        >{{ item }}</view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- 右图标 -->
+    <view class="tn-column-notice__icon">
+      <view
+        v-if="rightIcon"
+        class="tn-column-notice__icon--right" 
+        :class="[`tn-icon-${rightIconName}`,fontColorClass]"
+        :style="[fontStyle('rightIcon')]"
+        @tap="clickRightIcon"></view>
+      <view
+        v-if="closeBtn"
+        class="tn-column-notice__icon--right" 
+        :class="[`tn-icon-close`,fontColorClass]"
+        :style="[fontStyle('close')]"
+        @tap="close"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-column-notice',
+    mixins: [componentsColorMixin],
+    props: {
+      // 显示的内容
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 播放状态
+      // play -> 播放 paused -> 暂停
+      playStatus: {
+        type: String,
+        default: 'play'
+      },
+      // 滚动方向
+      // horizontal -> 水平滚动 vertical -> 垂直滚动
+      mode: {
+        type: String,
+        default: 'horizontal'
+      },
+      // 是否显示左边图标
+      leftIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 左边图标的名称
+      leftIconName: {
+        type: String,
+        default: 'sound'
+      },
+      // 左边图标的大小
+      leftIconSize: {
+        type: Number,
+        default: 34
+      },
+      // 是否显示右边的图标
+      rightIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 右边图标的名称
+      rightIconName: {
+        type: String,
+        default: 'right'
+      },
+      // 右边图标的大小
+      rightIconSize: {
+        type: Number,
+        default: 26
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 圆角
+      radius: {
+        type: Number,
+        default: 0
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: '18rpx 24rpx'
+      },
+      // 自动播放
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 滚动周期
+      duration: {
+        type: Number,
+        default: 2000
+      }
+    },
+    computed: {
+      fontStyle() {
+        return (type) => {
+          let style = {}
+          style.color = this.fontColorStyle ? this.fontColorStyle : ''
+          style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
+          if (type === 'leftIcon' && this.leftIconSize) {
+            style.fontSize = this.leftIconSize + 'rpx'
+          }
+          if (type === 'rightIcon' && this.rightIconSize) {
+            style.fontSize = this.rightIconSize + 'rpx'
+          }
+          if (type === 'close') {
+            style.fontSize = '24rpx'
+          }
+          
+          return style
+        }
+      },
+      noticeStyle() {
+        let style = {}
+        style.backgroundColor = this.backgroundColorStyle ? this.backgroundColorStyle : 'transparent'
+        if (this.padding) style.padding = this.padding
+        return style
+      },
+      swiperStyle() {
+        let style = {}
+        style.height = this.fontSize ? this.fontSize + 6 + this.fontUnit : '32rpx'
+        style.lineHeight = style.height
+        
+        return style
+      },
+      // 标记是否为垂直
+      vertical() {
+        if (this.mode === 'horizontal') return false
+        else return true
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      
+    },
+    methods: {
+      // 点击了通知栏
+      click(index) {
+        this.$emit('click', index)
+      },
+      // 点击了关闭按钮
+      close() {
+        this.$emit('close')
+      },
+      // 点击了左边图标
+      clickLeftIcon() {
+        this.$emit('clickLeft')
+      },
+      // 点击了右边图标
+      clickRightIcon() {
+        this.$emit('clickRight')
+      },
+      // 切换消息时间
+      change(event) {
+        let index = event.detail.current
+        if (index === this.list.length - 1) {
+          this.$emit('end')
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-column-notice {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    
+    &__swiper {
+      height: auto;
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: 12rpx;
+      
+      &--item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        overflow: hidden;
+      }
+      
+      &--content {
+        overflow: hidden;
+      }
+    }
+    
+    &__icon {
+      &--left {
+        display: inline-flex;
+        align-items: center;
+      }
+      
+      &--right {
+        margin-left: 12rpx;
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-count-down/tn-count-down.vue b/tuniao-ui/components/tn-count-down/tn-count-down.vue
new file mode 100644
index 0000000..7a97943
--- /dev/null
+++ b/tuniao-ui/components/tn-count-down/tn-count-down.vue
@@ -0,0 +1,314 @@
+<template>
+  <view class="tn-countdown-class tn-countdown">
+    <view
+      v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
+      class="tn-countdown__item"
+      :class="[backgroundColorClass]"
+      :style="[itemStyle]"
+    >
+      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+        {{ d }}
+      </view>
+    </view>
+    <view 
+      v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))"
+      class="tn-countdown__separator"
+      :style="{
+        fontSize: separatorSize + 'rpx',
+        color: separatorColor,
+        paddingBottom: separator === 'en' ? '4rpx' : 0
+      }"
+    >
+      {{ separator === 'en' ? ':' : '天'}}
+    </view>
+    
+    <view
+      v-if="showHours"
+      class="tn-countdown__item"
+      :class="[backgroundColorClass]"
+      :style="[itemStyle]"
+    >
+      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+        {{ h }}
+      </view>
+    </view>
+    <view 
+      v-if="showMinutes"
+      class="tn-countdown__separator"
+      :style="{
+        fontSize: separatorSize + 'rpx',
+        color: separatorColor,
+        paddingBottom: separator === 'en' ? '4rpx' : 0
+      }"
+    >
+      {{ separator === 'en' ? ':' : '时'}}
+    </view>
+    
+    <view
+      v-if="showMinutes"
+      class="tn-countdown__item"
+      :class="[backgroundColorClass]"
+      :style="[itemStyle]"
+    >
+      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+        {{ m }}
+      </view>
+    </view>
+    <view 
+      v-if="showSeconds"
+      class="tn-countdown__separator"
+      :style="{
+        fontSize: separatorSize + 'rpx',
+        color: separatorColor,
+        paddingBottom: separator === 'en' ? '4rpx' : 0
+      }"
+    >
+      {{ separator === 'en' ? ':' : '分'}}
+    </view>
+    
+    <view
+      v-if="showSeconds"
+      class="tn-countdown__item"
+      :class="[backgroundColorClass]"
+      :style="[itemStyle]"
+    >
+      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
+        {{ s }}
+      </view>
+    </view>
+    <view 
+      v-if="showSeconds && separator === 'cn'"
+      class="tn-countdown__separator"
+      :style="{
+        fontSize: separatorSize + 'rpx',
+        color: separatorColor,
+        paddingBottom: separator === 'en' ? '4rpx' : 0
+      }"
+    >
+      秒
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-count-down',
+    mixins: [componentsColorMixin],
+    props: {
+      // 倒计时时间，秒作为单位
+      timestamp: {
+        type: Number,
+        default: 0
+      },
+      // 是否自动开始
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 数字框高度
+      height: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 分隔符类型
+      // en -> 使用英文的冒号 cn -> 使用中文进行分割
+      separator: {
+        type: String,
+        default: 'en'
+      },
+      // 分割符大小
+      separatorSize: {
+        type: Number,
+        default: 30
+      },
+      // 分隔符颜色
+      separatorColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 是否显示边框
+      showBorder: {
+        type: Boolean,
+        default: false
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 是否显示秒
+      showSeconds: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示分
+      showMinutes: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示时
+      showHours: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示天
+      showDays: {
+        type: Boolean,
+        default: true
+      },
+      // 如果当天的部分为0时，是否隐藏不显示
+      hideZeroDay: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 倒计时item的样式
+      itemStyle() {
+        let style = {}
+        if (this.height) {
+          style.height = this.$t.string.getLengthUnitValue(this.height)
+          style.width = style.height
+        }
+        if (this.showBorder) {
+          style.borderStyle = 'solid'
+          style.borderColor = this.borderColor
+          style.borderWidth = '1rpx'
+        }
+        style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
+        return style
+      },
+      // 倒计时数字样式
+      letterStyle() {
+        let style = {}
+        style.fontSize = this.fontSizeStyle || '30rpx'
+        style.color = this.fontColorStyle || '#080808'
+        return style
+      }
+    },
+    data() {
+      return {
+        d: '00',
+        h: '00',
+        m: '00',
+        s: '00',
+        // 定时器
+        timer: null,
+        // 记录倒计过程中变化的秒数
+        seconds: 0
+      }
+    },
+    watch: {
+      // 监听时间戳变化
+      timestamp(value) {
+        this.clearTimer()
+        this.start()
+      }
+    },
+    mounted() {
+      // 如果时自动倒计时，加载完成开始计时
+      this.autoplay && this.timestamp && this.start()
+    },
+    beforeDestroy() {
+      this.clearTimer()
+    },
+    methods: {
+      // 开始倒计时
+      start() {
+        // 避免可能出现的倒计时重叠情况
+        this.clearTimer()
+        if (this.timestamp <= 0) return
+        this.seconds = Number(this.timestamp)
+        this.formatTime(this.seconds)
+        this.timer = setInterval(() => {
+          this.seconds--
+          // 发出change事件
+          this.$emit('change', this.seconds)
+          if (this.seconds < 0) {
+            return this.end()
+          }
+          this.formatTime(this.seconds)
+        }, 1000)
+      },
+      // 格式化时间
+      formatTime(seconds) {
+        // 小于等于0的话，结束倒计时
+        seconds <= 0 && this.end()
+        let [day, hour, minute, second] = [0, 0, 0, 0]
+        day = Math.floor(seconds / (60 * 60 * 24))
+        // 如果不显示天，则将天对应的小时计入到小时中
+        // 先把当前的hour计算出来供分和秒使用
+        hour = Math.floor(seconds / (60 * 60)) - (day * 24)
+        let showHour = null
+        if (this.showDays) {
+          showHour = hour
+        } else {
+          // 将天数对应的小时加入到时中进行显示
+          showHour = Math.floor(seconds / (60 * 60))
+        }
+        minute = Math.floor(seconds / 60) - (hour * 60) - (day * 24 * 60)
+        second = Math.floor(seconds) - (minute * 60) - (hour * 60 * 60) - (day * 24 * 60 * 60)
+        // 如果小于0在前面进行补0操作
+        showHour = this.$t.number.formatNumberAddZero(showHour)
+        minute = this.$t.number.formatNumberAddZero(minute)
+        second = this.$t.number.formatNumberAddZero(second)
+        day = this.$t.number.formatNumberAddZero(day)
+        
+        this.d = day
+        this.h = showHour
+        this.m = minute
+        this.s = second
+      },
+      // 倒计时结束
+      end() {
+        this.clearTimer()
+        this.$emit('end')
+      },
+      // 清除倒计时
+      clearTimer() {
+        if (this.timer !== null) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-countdown {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    
+    &__item {
+      box-sizing: content-box;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 2rpx;
+      border-radius: 6rpx;
+      white-space: nowrap;
+      transform: translateZ(0);
+      
+      &__time {
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+      }
+    }
+    
+    &__separator {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0 5rpx;
+      line-height: 1;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue b/tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue
new file mode 100644
index 0000000..de208c8
--- /dev/null
+++ b/tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue
@@ -0,0 +1,171 @@
+<template>
+  <view class="tn-count-scroll-class tn-count-scroll">
+    <view
+      v-for="(item, index) in columns"
+      :key="index"
+      class="tn-count-scroll__box"
+      :style="{
+        width: $t.string.getLengthUnitValue(width),
+        height: heightPxValue + 'px'
+      }"
+    >
+      <view
+        class="tn-count-scroll__column"
+        :style="{
+          transform: `translate3d(0, -${keys[index] * heightPxValue}px, 0)`,
+          transitionDuration: `${duration}s`
+        }"
+      >
+        <view
+          v-for="(value, value_index) in item"
+          :key="value_index"
+          class="tn-count-scroll__column__item"
+          :class="[fontColorClass]"
+          :style="{
+            height: heightPxValue + 'px',
+            lineHeight: heightPxValue + 'px',
+            fontSize: fontSizeStyle || '32rpx',
+            fontWeight: bold ? 'bold': 'normal',
+            color: fontColorStyle || '#080808'
+          }"
+        >
+          {{ value }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-count-scroll',
+    mixins: [componentsColorMixin],
+    props: {
+      value: {
+        type: Number,
+        default: 0
+      },
+      // 行高
+      height: {
+        type: Number,
+        default: 32
+      },
+      // 单个字的宽度
+      width: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 是否加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 持续时间
+      duration: {
+        type: Number,
+        default: 1.2
+      },
+      // 十分位分割符
+      decimalSeparator: {
+        type: String,
+        default: '.'
+      },
+      // 千分位分割符
+      thousandthsSeparator: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      heightPxValue() {
+        return uni.upx2px(this.height || 0)
+      }
+    },
+    data() {
+      return {
+        // 每列的数据
+        columns: [],
+        // 每列对应值所在的滚动位置
+        keys: []
+      }
+    },
+    watch: {
+      value(val) {
+        this.initColumn(val)
+      }
+    },
+    created() {
+      // 为了达到一进入就有滚动效果，延迟执行初始化
+      this.initColumn()
+      setTimeout(() => {
+        this.initColumn(this.value)
+      }, 20)
+    },
+    methods: {
+      // 初始化每一列的数据
+      initColumn(val) {
+        val = val + ''
+        let digit = val.length,
+            columnArray = [],
+            rows = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        for (let i = 0; i < digit; i++) {
+          if (val[i] === this.decimalSeparator || val[i] === this.thousandthsSeparator) {
+            columnArray.push(val[i])
+          } else {
+            columnArray.push(rows)
+          }
+        }
+        this.columns = columnArray
+        this.roll(val)
+      },
+      // 滚动处理
+      roll(value) {
+        let valueArray = value.toString().split(''),
+            lengths = this.columns.length,
+            indexs = [];
+        
+        while (valueArray.length) {
+          let figure = valueArray.pop()
+          if (figure === this.decimalSeparator || figure === this.thousandthsSeparator) {
+            indexs.unshift(0)
+          } else {
+            indexs.unshift(Number(figure))
+          }
+        }
+        while(indexs.length < lengths) {
+          indexs.unshift(0)
+        }
+        this.keys = indexs
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-count-scroll {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    &__box {
+      overflow: hidden;
+    }
+    
+    &__column {
+      transform: translate3d(0, 0, 0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      transition-timing-function: cubic-bezier(0, 1, 0, 1);
+      
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-count-to/tn-count-to.vue b/tuniao-ui/components/tn-count-to/tn-count-to.vue
new file mode 100644
index 0000000..c3d8854
--- /dev/null
+++ b/tuniao-ui/components/tn-count-to/tn-count-to.vue
@@ -0,0 +1,231 @@
+<template>
+  <view
+    class="tn-count-num-class tn-count-num"
+    :class="[fontColorClass]"
+    :style="{
+      fontSize: fontSizeStyle || '50rpx',
+      fontWeight: bold ? 'bold' : 'normal',
+      color: fontColorStyle || '#080808'
+    }"
+  >
+    {{ displayValue }}
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-count-to',
+    mixins: [componentsColorMixin],
+    props: {
+      // 开始的数值，默认为0
+      startVal: {
+        type: Number,
+        default: 0
+      },
+      // 结束目标数值
+      endVal: {
+        type: Number,
+        default: 0,
+        required: true
+      },
+      // 是否自动开始
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 滚动到目标值的持续时间，单位为毫秒
+      duration: {
+        type: Number,
+        default: 2000
+      },
+      // 是否在即将结束的时候使用缓慢滚动的效果
+      useEasing: {
+        type: Boolean,
+        default: true
+      },
+      // 显示的小数位数
+      decimals: {
+        type: Number,
+        default: 0
+      },
+      // 十进制的分割符
+      decimalSeparator: {
+        type: String,
+        default: '.'
+      },
+      // 千分位的分隔符
+      // 类似金额的分割(￥23,321.05中的",")
+      thousandthsSeparator: {
+        type: String,
+        default: ''
+      },
+      // 是否显示加粗字体
+      bold: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      countDown() {
+        return this.startVal > this.endVal
+      }
+    },
+    data() {
+      return {
+        localStartVal: this.startVal,
+        localDuration: this.duration,
+        // 显示的数值
+        displayValue: this.formatNumber(this.startVal),
+        // 打印的数值
+        printValue: null,
+        // 是否暂停
+        paused: false,
+        // 开始时间戳
+        startTime: null,
+        // 停留时间戳
+        remainingTime: null,
+        // 当前时间戳
+        timestamp: null,
+        // 上一次的时间戳
+        lastTime: 0,
+        rAF: null
+      }
+    },
+    watch: {
+      startVal() {
+        this.autoplay && this.start()
+      },
+      endVal() {
+        this.autoplay && this.start()
+      }
+    },
+    mounted() {
+      this.autoplay && this.start()
+    },
+    methods: {
+      // 开始滚动
+      start() {
+        this.localStartVal = this.startVal
+        this.startTime = null
+        this.localDuration = this.duration
+        this.paused = false
+        this.rAF = this.requestAnimationFrame(this.count)
+      },
+      // 重新开始
+      reStart() {
+        if (this.paused) {
+          this.resume()
+          this.paused = false
+        } else {
+          this.stop()
+          this.paused = true
+        }
+      },
+      // 停止
+      stop() {
+        this.cancelAnimationFrame(this.rAF)
+      },
+      // 恢复
+      resume() {
+        this.startTime = null
+        this.localDuration = this.remainingTime
+        this.localStartVal = this.printValue
+        this.requestAnimationFrame(this.count)
+      },
+      // 重置
+      reset() {
+        this.startTime = null
+        this.cnacelAnimationFrame(this.rAF)
+        this.displayValue = this.formatNumber(this.startVal)
+      },
+      // 销毁组件
+      destroyed() {
+        this.cancelAnimationFrame(this.rAF)
+      },
+      // 累加时间
+      count(timestamp) {
+        if (!this.startTime) this.startTime = timestamp
+        this.timestamp = timestamp
+        const progress = timestamp - this.startTime
+        this.remainingTime = this.localDuration - progress
+        if (this.useEasing) {
+          if (this.countDown) {
+            this.printValue = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
+          } {
+            this.printValue = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration)
+          }
+        } else {
+          if (this.countDown) {
+            this.printValue = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration)
+          } else {
+            this.printValue = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration)
+          }
+        }
+        if (this.countDown) {
+          this.printValue = this.printValue < this.endVal ? this.endVal : this.printValue
+        } else {
+          this.printValue = this.printValue > this.endVal ? this.endVal : this.printValue
+        }
+        
+        this.displayValue = this.formatNumber(this.printValue)
+        if (progress < this.localDuration) {
+          this.rAF = this.requestAnimationFrame(this.count)
+        } else {
+          this.$emit('end')
+        }
+      },
+      // 缓动时间计算
+      easingFn(t, b, c, d) {
+        return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+      },
+      // 请求帧动画
+      requestAnimationFrame(cb) {
+        const currentTime = new Date().getTime()
+        // 为了使setTimteout的尽可能的接近每秒60帧的效果
+        const timeToCall = Math.max(0, 16 - (currentTime - this.lastTime))
+        const timerId = setTimeout(() => {
+          cb && cb(currentTime + timeToCall)
+        }, timeToCall)
+        this.lastTime = currentTime + timeToCall
+        return timerId
+      },
+      // 清除帧动画
+      clearAnimationFrame(timerId) {
+        clearTimeout(timerId)
+      },
+      // 格式化数值
+      formatNumber(number) {
+        const reg = /(\d+)(\d{3})/
+        number = Number(number)
+        number = number.toFixed(Number(this.decimals))
+        number += ''
+        const numberArray = number.split('.')
+        let num1 = numberArray[0]
+        const num2 = numberArray.length > 1 ? this.decimalSeparator + numberArray[1] : ''
+        
+        if (this.thousandthsSeparator && !this.isNumber(this.thousandthsSeparator)) {
+          while(reg.test(num1)) {
+            num1 = num1.replace(reg, '$1' + this.thousandthsSeparator + '$2')
+          }
+        }
+        return num1 + num2
+      },
+      // 判断是否为数字
+      isNumber(val) {
+        return !isNaN(parseFloat(val))
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-count-num {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    text-align: center;
+    line-height: 1;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-cropper/index.wxs b/tuniao-ui/components/tn-cropper/index.wxs
new file mode 100644
index 0000000..6707e96
--- /dev/null
+++ b/tuniao-ui/components/tn-cropper/index.wxs
@@ -0,0 +1,328 @@
+var cropper = {
+  // 画布x轴起点
+  cutX: 0,
+  // 画布y轴起点
+  cutY: 0,
+  // 触摸点信息(手指与图片中心点的相对位置)
+  touchRelactive: [{
+    x: 0,
+    y: 0
+  }],
+  // 双指触摸时斜边的长度
+  hypotenuseLength:0,
+  // 是否结束触摸
+  touchEndFlag: false,
+  // 画布宽高
+  canvasWidth: 0,
+  canvasHeight: 0,
+  // 图片宽高
+  imgWidth: 0,
+  imgHeight: 0,
+  // 图片缩放比例
+  scale: 1,
+  // 图片旋转角度
+  angle: 0,
+  // 图片上边距
+  imgTop: 0,
+  // 图片左边距
+  imgLeft: 0,
+  // 窗口宽高
+  windowWidth: 0,
+  windowHeight: 0,
+  init: true
+}
+
+function bool(str) {
+  return str === 'true' || str === true
+}
+
+function propsChange(prop, oldProp, ownerInstance, instance) {
+  if (prop && prop !== 'null') {
+    var params = prop.split(',')
+    var type = +params[0]
+    var dataset = instance.getDataset()
+    if (cropper.init || type == 4) {
+      cropper.canvasWidth = +dataset.width
+      cropper.canvasHeight = +dataset.height
+      cropper.imgTop = +dataset.windowheight / 2
+      cropper.imgLeft = +dataset.windowwidth / 2
+      cropper.imgWidth = +dataset.imgwidth
+      cropper.imgHeight = +dataset.imgheight
+      cropper.windowHeight = +dataset.windowheight
+      cropper.windowWidth = +dataset.windowwidth
+      cropper.init = false
+    } else if (type == 2 || type == 3) {
+      cropper.imgWidth = +dataset.imgwidth
+      cropper.imgHeight = +dataset.imgheight
+    }
+    cropper.angle = +dataset.angle
+    if (type == 3) {
+      imgTransform(ownerInstance)
+    }
+    switch(type) {
+      case 1:
+        setCutCenter(ownerInstance)
+        // 设置裁剪框大小
+        computeCutSize(ownerInstance)
+        // 检查裁剪框是否在范围内
+        cutDetectionPosition(ownerInstance)
+        break
+      case 2:
+        setCutCenter(ownerInstance)
+        break
+      case 3:
+        imgMarginDetectionScale(ownerInstance)
+        break
+      case 4:
+        imageReset(ownerInstance)
+        break
+      case 5:
+        setCutCenter(ownerInstance)
+        break
+      default:
+        break
+    }
+  }
+}
+
+function touchStart(event, ownerInstance) {
+  var touch = event.touches || event.changedTouches
+  cropper.touchEndFlag = false
+  if (touch.length === 1) {
+    cropper.touchRelactive[0] = {
+      x: touch[0].pageX - cropper.imgLeft,
+      y: touch[0].pageY - cropper.imgTop
+    }
+  } else {
+    var width = Math.abs(touch[0].pageX - touch[1].pageX)
+    var height = Math.abs(touch[0].pageY - touch[1].pageY)
+    cropper.touchRelactive = [{
+      x: touch[0].pageX - cropper.imgLeft,
+      y: touch[0].pageY - cropper.imgTop
+    },{
+      x: touch[1].pageX - cropper.imgLeft,
+      y: touch[1].pageY - cropper.imgTop
+    }]
+    cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+  }
+}
+
+function touchMove(event, ownerInstance) {
+  var touch = event.touches || event.changedTouches
+  if (cropper.touchEndFlag) return
+  moveDuring(ownerInstance)
+  if (event.touches.length === 1) {
+    var left = touch[0].pageX - cropper.touchRelactive[0].x,
+      top = touch[0].pageY - cropper.touchRelactive[0].y;
+    cropper.imgLeft = left
+    cropper.imgTop = top
+    imgTransform(ownerInstance)
+    imgMarginDetectionPosition(ownerInstance)
+  } else {
+    var dataset = event.instance.getDataset()
+    var minScale = +dataset.minscale
+    var maxScale = +dataset.maxscale
+    var width = Math.abs(touch[0].pageX - touch[1].pageX),
+      height = Math.abs(touch[0].pageY - touch[1].pageY),
+      hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+      scale = cropper.scale * (hypotenuse / cropper.hypotenuseLength),
+      current_deg = 0;
+    scale = scale <= minScale ? minScale : scale
+    scale = scale >= maxScale ? maxScale : scale
+    cropper.scale = scale
+    imgMarginDetectionScale(ownerInstance, true)
+    var touchRelative = [{
+      x: touch[0].pageX - cropper.imgLeft,
+      y: touch[0].pageY - cropper.imgTop
+    }, {
+      x: touch[1].pageX - cropper.imgLeft,
+      y: touch[1].pageY - cropper.imgTop
+    }]
+    cropper.touchRelactive = touchRelative
+    cropper.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+    // 更新视图
+    cropper.angle = cropper.angle + current_deg
+    imgTransform(ownerInstance)
+  }
+}
+
+function touchEnd(event, ownerInstance) {
+  cropper.touchEndFlag = true
+  moveStop(ownerInstance)
+  updateData(ownerInstance)
+}
+
+function moveDuring(ownerInstance) {
+  if (!ownerInstance) return
+  ownerInstance.callMethod('moveDuring')
+}
+
+function moveStop(ownerInstance) {
+  if (!ownerInstance) return
+  ownerInstance.callMethod('moveStop')
+}
+
+function setCutCenter(ownerInstance) {
+  var cutX = (cropper.windowWidth - cropper.canvasWidth) * 0.5
+  var cutY = (cropper.windowHeight - cropper.canvasHeight) * 0.5
+  
+  cropper.imgTop = cropper.imgTop - cropper.cutY + cutY
+  cropper.cutY = cutY
+  cropper.imgLeft = cropper.imgLeft - cropper.cutX + cutX
+  cropper.cutX = cutX
+  cutDetectionPosition(ownerInstance)
+  imgTransform(ownerInstance)
+  updateData(ownerInstance)
+}
+
+// 检测剪裁框位置是否在允许的范围内（屏幕内）
+function cutDetectionPosition(ownerInstance) {
+  var windowHeight = cropper.windowHeight,
+    windowWidth = cropper.windowWidth;
+  
+  // 检测上边距是否在范围内
+  var cutDetectionPositionTop = function() {
+    if (cropper.cutY < 0) {
+      cropper.cutY = 0
+    }
+    if (cropper.cutY > windowHeight - cropper.canvasHeight) {
+      cropper.cutY = windowHeight - cropper.canvasHeight
+    }
+  }
+  
+  // 检测左边距是否在范围内
+  var cutDetectionPositionLeft = function() {
+    if (cropper.cutX < 0) {
+      cropper.cutX = 0
+    }
+    if (cropper.cutX > windowWidth - cropper.canvasWidth) {
+      cropper.cutX = windowWidth - cropper.canvasWidth
+    }
+  }
+  
+  // 裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认为居中）
+  if (cropper.cutX === null && cropper.cutY === null) {
+    var cutX = (windowWidth - cropper.canvasWidth) * 0.5,
+      cutY = (windowHeight - cropper.canvasHeight) * 0.5;
+    cropper.cutX = cutX
+    cropper.cutY = cutY
+  } else if (cropper.cutX !== null && cropper.cutX !== null) {
+    cutDetectionPositionTop()
+    cutDetectionPositionLeft()
+  } else if (cropper.cutX !== null && cropper.cutY === null) {
+    cutDetectionPositionLeft()
+    cropper.cutY = (windowHeight - cropper.canvasHeight) / 2
+  } else if (cropper.cutX === null && cropper.cutY !== null) {
+    cutDetectionPositionTop()
+    cropper.cutX = (windowWidth - cropper.canvasWidth) / 2
+  }
+}
+
+// 图片边缘检测-缩放
+function imgMarginDetectionScale(ownerInstance, delay) {
+  var scale = cropper.scale,
+    imgWidth = cropper.imgWidth,
+    imgHeight = cropper.imgHeight;
+  if ((cropper.angle / 90) % 2) {
+    imgWidth = cropper.imgHeight
+    imgHeight = cropper.imgWidth
+  }
+  if (imgWidth * scale < cropper.canvasWidth) {
+    scale = cropper.canvasWidth / imgWidth
+  }
+  if (imgHeight * scale < cropper.canvasHeight) {
+    scale = Math.max(scale, cropper.canvasHeight / imgHeight)
+  }
+  imgMarginDetectionPosition(ownerInstance, scale, delay)
+}
+
+// 图片边缘检测-位置
+function imgMarginDetectionPosition(ownerInstance, scale, delay) {
+  var left = cropper.imgLeft,
+    top = cropper.imgTop,
+    imgWidth = cropper.imgWidth,
+    imgHeight = cropper.imgHeight;
+  scale = scale || cropper.scale
+  if ((cropper.angle / 90) % 2) {
+    imgWidth = cropper.imgHeight
+    imgHeight = cropper.imgWidth
+  }
+  
+  left = cropper.cutX + (imgWidth * scale) / 2 >= left ? left : cropper.cutX + (imgWidth * scale) / 2
+  left = cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2 <= left ? left : cropper.cutX + cropper.canvasWidth - (imgWidth * scale) / 2
+  top = cropper.cutY + (imgHeight * scale) / 2 >= top ? top : cropper.cutY + (imgHeight * scale) / 2
+  top = cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2 <= top ? top : cropper.cutY + cropper.canvasHeight - (imgHeight * scale) / 2
+  
+  cropper.imgLeft = left
+  cropper.imgTop = top
+  cropper.scale = scale
+  if (!delay || delay === 'null') {
+    imgTransform(ownerInstance)
+  }
+}
+
+// 改变截取值大小
+function computeCutSize(ownerInstance) {
+  if (cropper.canvasWidth > cropper.windowWidth) {
+    cropper.canvasWidth = cropper.windowWidth
+  } else if (cropper.canvasWidth + cropper.cutX > cropper.windowWidth) {
+    cropper.cutX = cropper.windowWidth - cropper.cutX
+  }
+  if (cropper.canvasHeight > cropper.windowHeight) {
+    cropper.canvasHeight = cropper.windowHeight
+  } else if (cropper.canvasHeight + cropper.cutY > cropper.windowHeight) {
+    cropper.cutY = cropper.windowHeight - cropper.cutY
+  }
+}
+
+// 图片动画
+function imgTransform(ownerInstance) {
+  var image = ownerInstance.selectComponent('.tn-cropper__image')
+  if (!image) return
+  var x = cropper.imgLeft - cropper.imgWidth / 2,
+    y = cropper.imgTop - cropper.imgHeight / 2;
+  image.setStyle({
+    'transform': 'translate3d('+ x + 'px,' + y + 'px,0) scale(' + cropper.scale +') rotate(' + cropper.angle + 'deg)'
+  })
+}
+
+// 图片重置
+function imageReset(ownerInstance) {
+  cropper.scale = 1
+  cropper.angle = 0
+  imgTransform(ownerInstance)
+}
+
+// 高度变化
+function canvasHeight(ownerInstance) {
+  if (!ownerInstance) return
+  computeCutSize(ownerInstance)
+}
+
+// 宽度变化
+function canvasWidth(ownerInstance) {
+  if (!ownerInstance) return
+  computeCutSize(ownerInstance)
+}
+
+// 更新数据
+function updateData(ownerInstance) {
+  if (!ownerInstance) return
+  ownerInstance.callMethod('change', {
+    cutX: cropper.cutX,
+    cutY: cropper.cutY,
+    imgWidth: cropper.imgWidth,
+    imgHeight: cropper.imgHeight,
+    scale: cropper.scale,
+    angle: cropper.angle,
+    imgTop: cropper.imgTop,
+    imgLeft: cropper.imgLeft
+  })
+}
+
+module.exports = {
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd,
+  propsChange: propsChange
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-cropper/tn-cropper.vue b/tuniao-ui/components/tn-cropper/tn-cropper.vue
new file mode 100644
index 0000000..0c54299
--- /dev/null
+++ b/tuniao-ui/components/tn-cropper/tn-cropper.vue
@@ -0,0 +1,585 @@
+<template>
+  <view class="tn-cropper-class tn-cropper" @touchmove.stop.prevent="stop">
+    <image
+      v-if="imageUrl"
+      :src="imageUrl"
+      class="tn-cropper__image"
+      :style="{
+        width: (imgWidth ? imgWidth : width) + 'px',
+        height: (imgHeight ? imgHeight : height) + 'px',
+        transitionDuration: (animation ? 0.3 : 0) + 's'
+      }"
+      mode="widthFix"
+      :data-minScale="minScale"
+      :data-maxScale="maxScale"
+      @load="imageLoad"
+      @error="imageLoad"
+      @touchstart="wxs.touchStart"
+      @touchmove="wxs.touchMove"
+      @touchend="wxs.touchEnd"
+    ></image>
+    
+    <view
+      class="tn-cropper__wrapper"
+      :style="{
+        width: width + 'px',
+        height: height + 'px',
+        borderRadius: isRound ? '50%' : '0'
+      }"
+    >
+      <view
+        class="tn-cropper__border"
+        :style="{
+          border: borderStyle,
+          borderRadius: isRound ? '50%' : '0',
+        }"
+        :prop="props"
+        :change:prop="wxs.propsChange"
+        :data-width="width"
+        :data-height="height"
+        :data-windowHeight="systemInfo.windowHeight || 600"
+        :data-windowWidth="systemInfo.windowWidth || 400"
+        :data-imgTop="imgTop"
+        :data-imgWidth="imgWidth"
+        :data-imgHeight="imgHeight"
+        :data-angle="angle"
+      ></view>
+    </view>
+    
+    <canvas
+      class="tn-cropper__canvas"
+      :style="{
+        width: width * scaleRatio + 'px',
+        height: height * scaleRatio + 'px'
+      }"
+      :canvas-id="CANVAS_ID"
+      :id="CANVAS_ID"
+      :disable-scroll="true"
+    ></canvas>
+    
+    <view
+      v-if="!custom"
+      class="tn-cropper__tabbar"
+    >
+      <view class="tn-cropper__tabbar__btn tn-cropper__tabber__cancel" @tap.stop="back">{{ resolvedCancelText }}</view>
+      <view class="tn-cropper__tabbar__rotate" :class="[`tn-icon-${rotateIcon}`]" @tap.stop="setAngle"></view>
+      <view class="tn-cropper__tabbar__btn tn-cropper__tabber__confirm" @tap.stop="getCutImage">{{ resolvedConfirmText }}</view>
+    </view>
+  </view>
+</template>
+
+<script src="./index.wxs" lang="wxs" module="wxs"></script>
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-cropper',
+    props: {
+      // 图片路径
+      imageUrl: {
+        type: String,
+        default: ''
+      },
+      // 裁剪框高度 px
+      height: {
+        type: Number,
+        default: 280
+      },
+      // 裁剪框的宽度 px
+      width: {
+        type: Number,
+        default: 280
+      },
+      // 是否为圆形裁剪框
+      isRound: {
+        type: Boolean,
+        default: false
+      },
+      // 裁剪框边框样式
+      borderStyle: {
+        type: String,
+        default: '1rpx solid #FFF'
+      },
+      // 生成的图片尺寸相对于裁剪框的比例
+      scaleRatio: {
+        type: Number,
+        default: 1
+      },
+      // 裁剪后的图片质量
+      // 取值范围为：(0, 1]
+      quality: {
+        type: Number,
+        default: 0.8
+      },
+      // 是否返回base64(H5默认为base64)
+      returnBase64: {
+        type: Boolean,
+        default: false
+      },
+      // 图片旋转角度
+      rotateAngle: {
+        type: Number,
+        default: 0
+      },
+      // 图片最小缩放比
+      minScale: {
+        type: Number,
+        default: 0.5
+      },
+      // 图片最大缩放比
+      maxScale: {
+        type: Number,
+        default: 2
+      },
+      // 自定义操作栏(设置后会隐藏默认的底部操作栏)
+      custom: {
+        type: Boolean,
+        default: false
+      },
+      // 是否在值发生改变的时候开始裁剪
+      // custom为true时生效
+      startCutting: {
+        type: Boolean,
+        default: false
+      },
+      // 裁剪时是否显示loading
+      loading: {
+        type: Boolean,
+        default: true
+      },
+      // 旋转图片图标
+      rotateIcon: {
+        type: String,
+        default: 'circle-arrow'
+      }
+    },
+    computed: {
+      resolvedCancelText() {
+        return getLocalizedText(this, '取消', 'Cancel')
+      },
+      resolvedConfirmText() {
+        return getLocalizedText(this, '完成', 'Done')
+      }
+    },
+    data() {
+      return {
+        // canvas容器id
+        CANVAS_ID: 'tn-cropper-canvas',
+        // 移动裁剪超时时间定时器
+        TIME_CUT_CENTER: null,
+        // canvas容器
+        ctx: null,
+        // 画布x轴起点
+        cutX: 0,
+        // 画布y轴起点
+        cutY: 0,
+        // 图片宽度
+        imgWidth: 0,
+        // 图片高度
+        imgHeight: 0,
+        // 图片底部位置
+        imgTop: 0,
+        // 图片左边位置
+        imgLeft: 0,
+        // 图片缩放比
+        scale: 1,
+        // 图片旋转角度
+        angle: 0,
+        // 开启动画过渡效果
+        animation: false,
+        // 动画定时器
+        animationTime: null,
+        // 系统信息
+        systemInfo: {},
+        // 传递的参数
+        props: '',
+        // 标记是否发生改变
+        sizeChange: 0,
+        angleChange: 0,
+        resetChange: 0,
+        centerChange: 0
+      }
+    },
+    watch: {
+      imageUrl(val) {
+        this.imageReset()
+        this.showLoading()
+        uni.getImageInfo({
+          src: val,
+          success: (res) => {
+            // 计算图片尺寸
+            this.imgComputeSize(res.width, res.height)
+            this.angleChange++
+            this.props = `3,${this.angleChange}`
+          },
+          fail: (err) => {
+            console.log(err);
+            this.imgComputeSize()
+            this.angleChange++
+            this.props = `3,${this.angleChange}`
+          }
+        })
+      },
+      rotateAngle(val) {
+        this.animation = true
+        this.angle = val
+        this.angleChanged(val)
+      },
+      animation(val) {
+        clearTimeout(this.animationTime)
+        if (val) {
+          this.animationTime = setTimeout(() => {
+            this.animation = false
+          }, 200)
+        }
+      },
+      startCutting(val) {
+        if (this.custom && val) {
+          this.getCutImage()
+        }
+      }
+    },
+    mounted() {
+      this.systemInfo = uni.getSystemInfoSync()
+      this.imgTop = this.systemInfo.windowHeight / 2
+      this.imgLeft = this.systemInfo.windowWidth / 2
+      this.ctx = uni.createCanvasContext(this.CANVAS_ID, this)
+      // 初始化
+      this.$nextTick(() => {
+        this.props = '1,1'
+      })
+      setTimeout(() => {
+        this.$emit('ready', {})
+      }, 200)
+    },
+    methods: {
+      // 将网络图片转换为本地图片【同步执行】
+      async getLocalImage(url) {
+        return await new Promise((resolve, reject) => {
+          uni.downloadFile({
+            url: url,
+            success: (res) => {
+              resolve(res.tempFilePath)
+            },
+            fail: (err) => {
+              reject(false)
+            }
+          })
+        })
+      },
+      // 返回裁剪后的图片信息
+      getCutImage() {
+        if (!this.imageUrl) {
+          uni.showToast({
+            title: getLocalizedText(this, '请选择图片', 'Please select an image'),
+            icon: 'none'
+          })
+          return
+        }
+        this.loading && this.showLoading()
+        const draw = async () => {
+          // 图片实际大小
+          let imgWidth = this.imgWidth * this.scale * this.scaleRatio
+          let imgHeight = this.imgHeight * this.scale * this.scaleRatio
+          // canvas和图片的相对距离
+          let xpos = this.imgLeft - this.cutX
+          let ypos = this.imgTop - this.cutY
+          
+          
+          let imgUrl = this.imageUrl
+          // #ifdef APP-PLUS || MP-WEIXIN
+          if (~this.imageUrl.indexOf('https:')) {
+            imgUrl = await this.getLocalImage(this.imageUrl)
+          }
+          // #endif
+          // 旋转画布
+          this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio)
+          // 如果时圆形则截取圆形
+          if (this.isRound) {
+            const r = this.width > this.height ? Math.floor(this.height / 2) : Math.floor(this.width / 2)
+            let translateX = Math.floor(this.width / 2)
+            let translateY = Math.floor(this.height / 2)
+            this.ctx.beginPath()
+            this.ctx.arc(translateX - (xpos * this.scaleRatio), translateY - (ypos * this.scaleRatio), r, 0, (360 * Math.PI) / 180)
+            this.ctx.closePath()
+            this.ctx.stroke()
+            this.ctx.clip()
+          }
+          
+          this.ctx.rotate((this.angle * Math.PI) / 180)
+          this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight)
+          
+          // 清空后再继续绘制
+          this.ctx.draw(false, () => {
+            let params = {
+              width: this.width * this.scaleRatio,
+              height: Math.round(this.height * this.scaleRatio),
+              destWidth: this.width * this.scaleRatio,
+              destHeight: Math.round(this.height) * this.scaleRatio,
+              fileType: 'png',
+              quality: this.quality
+            }
+            let data = {
+              url: '',
+              base64: '',
+              width: this.width * this.scaleRatio,
+              height: this.height * this.scaleRatio
+            }
+            
+            // #ifdef MP-ALIPAY
+            if (this.returnBase64) {
+              this.ctx.toDataURL(params).then((urlData) => {
+                data.base64 = urlData
+                this.loading && uni.hideLoading()
+                this.$emit('cropper', data)
+              })
+            } else {
+              this.ctx.toTempFilePath({
+                ...params,
+                success: (res) => {
+                  data.url = res.apFilePath
+                  this.loading && uni.hideLoading()
+                  this.$emit('cropper', data)
+                }
+              })
+            }
+            // #endif
+            
+            let base64Flag = this.returnBase64
+            // #ifndef MP-ALIPAY
+            // #ifdef MP-BAIDU || MP-TOUTIAO || H5
+            base64Flag = false
+            // #endif
+            
+            if (base64Flag) {
+              uni.canvasGetImageData({
+                canvasId: this.CANVAS_ID,
+                x: 0,
+                y: 0,
+                width: this.width * this.scaleRatio,
+                height: Math.round(this.height * this.scaleRatio),
+                success: (res) => {
+                  const arrayBuffer = new Uint8Array(res.data)
+                  const base64 = uni.arrayBufferToBase64(arrayBuffer)
+                  data.base64 = base64
+                  this.loading && uni.hideLoading()
+                  this.$emit('cropper', data)
+                }
+              }, this)
+            } else {
+              uni.canvasToTempFilePath({
+                ...params,
+                canvasId: this.CANVAS_ID,
+                success: (res) => {
+                  data.url = res.tempFilePath
+                  // #ifdef H5
+                  data.base64 = res.tempFilePath
+                  // #endif
+                  this.loading && uni.hideLoading()
+                  this.$emit('cropper', data)
+                }
+              }, this)
+            }
+            // #endif
+          })
+        }
+        draw()
+      },
+      // 修改图片后触发的函数
+      change(e) {
+        this.cutX = e.cutX || 0
+        this.cutY = e.cutY || 0
+        this.imgWidth = e.imgWidth || this.imgWidth
+        this.imgHeight = e.imgHeight || this.imgHeight
+        this.scale = e.scale || 1
+        this.angle = e.angle || 0
+        this.imgTop = e.imgTop || 0
+        this.imgLeft = e.imgLeft || 0
+      },
+      // 重置图片
+      imageReset() {
+        this.scale = 1
+        this.angle = 0
+        let systemInfo = this.systemInfo.windowHeight ? this.systemInfo : uni.getSystemInfoSync()
+        this.imgTop = systemInfo.windowHeight / 2
+        this.imgLeft = systemInfo.windowWidth / 2
+        this.resetChange++
+        this.props = `4,${this.resetChange}`
+        // 初始旋转角度
+        this.$emit('initAngle', {})
+      },
+      // 图片的生成的尺寸
+      imgComputeSize(width, height) {
+        // 默认按图片的最小边 = 对应的裁剪框尺寸
+        let imgWidth = width,
+          imgHeight = height;
+        if (imgWidth && imgHeight) {
+          if (imgWidth / imgHeight > this.width / this.height) {
+            imgHeight = this.height
+            imgWidth = (width / height) * imgHeight
+          } else {
+            imgWidth = this.width
+            imgHeight = (height / width) * imgWidth
+          }
+        } else {
+          let systemInfo = this.systemInfo.windowHeight ? this.systemInfo : uni.getSystemInfoSync()
+          imgWidth = systemInfo.windowWidth
+          imgHeight = 0
+        }
+        this.imgWidth = imgWidth
+        this.imgHeight = imgHeight
+        this.sizeChange++
+        this.props = `2,${this.sizeChange}`
+      },
+      // 图片加载完毕
+      imageLoad(e) {
+        this.imageReset()
+        uni.hideLoading()
+        this.$emit('imageLoad', {})
+      },
+      // 移动结束
+      moveStop() {
+        clearTimeout(this.TIME_CUT_CENTER)
+        this.TIME_CUT_CENTER = setTimeout(() => {
+          this.centerChange++
+          this.props = `5,${this.centerChange}`
+        }, 688)
+      },
+      // 移动中
+      moveDuring() {
+        clearTimeout(this.TIME_CUT_CENTER)
+      },
+      // 显示加载框
+      showLoading() {
+        uni.showLoading({
+          title: getLocalizedText(this, '请稍等......', 'Please wait...'),
+          mask: true
+        })
+      },
+      // 停止
+      stop() {},
+      // 取消/返回
+      back() {
+        uni.navigateBack()
+      },
+      // 角度改变
+      angleChanged(val) {
+        this.moveStop()
+        if (val % 90) {
+          this.angle = Math.round(val / 90) * 90
+        }
+        this.angleChange++
+        this.props = `3,${this.angleChange}`
+      },
+      // 设置角度
+      setAngle() {
+        this.animation = true
+        this.angle = this.angle + 90
+        this.angleChanged(this.angle)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-cropper {
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
+    // background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b);
+    // background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423);
+    // background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    
+    &__image {
+      width: 100%;
+      border-style: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+      transform-origin: center;
+    }
+    
+    &__canvas {
+      position: fixed;
+      z-index: 10;
+      left: -2000px;
+      top: -2000px;
+      pointer-events: none;
+    }
+    
+    &__wrapper {
+      position: fixed;
+      z-index: 4;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border: 3000px solid rgba(0, 0, 0, 0.55);
+      pointer-events: none;
+      box-sizing: content-box;
+    }
+    
+    &__border {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      pointer-events: none;
+    }
+    
+    &__tabbar {
+      width: 100%;
+      height: 120rpx;
+      padding: 0 40rpx;
+      box-sizing: border-box;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 99;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #FFFFFF;
+      font-size: 32rpx;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+        -webkit-transform: scaleY(0.5) translateZ(0);
+        transform: scaleY(0.5) translateZ(0);
+        transform-origin: 0 100%;
+      }
+      
+      &__btn {
+        height: 80rpx;
+        display: flex;
+        align-items: center;
+      }
+      
+      &__rotate {
+        width: 44rpx;
+        height: 44rpx;
+        font-size: 40rpx;
+        text-align: center;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-custom-swiper-item/index.wxs b/tuniao-ui/components/tn-custom-swiper-item/index.wxs
new file mode 100644
index 0000000..a6c12b7
--- /dev/null
+++ b/tuniao-ui/components/tn-custom-swiper-item/index.wxs
@@ -0,0 +1,288 @@
+
+function setTimeout(instance, cb, time) {
+  if (time > 0) {
+    var s = getDate().getTime()
+    var fn = function () {
+        if (getDate().getTime() - s > time) {
+            cb && cb()
+        } else
+            instance.requestAnimationFrame(fn)
+    }
+    fn()
+  }
+  else
+    cb && cb()
+}
+
+// 判断触摸的移动方向
+function decideSwiperDirection(startTouches, currentTouches, vertical) {
+  // 震动偏移容差
+  var toleranceShake = 150
+  // 移动容差
+  var toleranceTranslate = 10
+  
+  if (!vertical) {
+    // 水平方向移动
+    if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
+        if (currentTouches.x - startTouches.x > 0) {
+          return 'right'
+        } else if (currentTouches.x - startTouches.x < 0) {
+          return 'left'
+        }
+      }
+    }
+  } else {
+    // 垂直方向移动
+    if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
+        if (currentTouches.y - startTouches.y > 0) {
+          return 'down'
+        } else if (currentTouches.y - startTouches.y < 0) {
+          return 'up'
+        }
+      }
+    }
+  }
+  return ''
+}
+
+// swiperItem参数数据更新
+var itemDataObserver = function(newVal, oldVal, ownerInstance, instance) {
+  if (!newVal || newVal === 'undefined') return
+  var state = ownerInstance.getState()
+  state.itemData = newVal
+}
+
+// swiperIndex数据更新
+var currentIndexObserver = function(newVal, oldVal, ownerInstance, instance) {
+  if ((!newVal && newVal != 0) || newVal === 'undefined') return
+  var state = ownerInstance.getState()
+  state.currentIndex = newVal
+}
+
+// containerData数据更新
+var containerDataObserver = function(newVal, oldVal, ownerInstance, instance) {
+  if (!newVal || newVal === 'undefined') return
+  var state = ownerInstance.getState()
+  state.containerData = newVal
+}
+
+// 开始触摸
+var touchStart = function(event, ownerInstance) {
+  console.log('touchStart');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var containerData = state.containerData
+  
+  // 由于当前SwiperIndex初始为0，可能会导致swiperIndex数据没有更新
+  if (!state.currentIndex || state.currentIndex === 'undefined') {
+    state.currentIndex = 0
+  }
+  
+  if (!containerData || containerData.circular === 'undefined') {
+    containerData.circular = false
+  }
+  state.containerData = containerData
+  
+  // 如果当前切换动画还没执行结束，再次触摸会重新加载对应的swiperContainer的信息
+  // console.log(containerData.animationFinish);
+  if (!containerData.animationFinish) {
+    ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
+      status: 'reload'
+    })
+  }
+
+  // 判断是否为为当前显示的SwiperItem
+  if (itemData.index != state.currentIndex) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 标记滑动开始时间
+  state.touchStartTime = getDate().getTime()
+  
+  // 记录当前滑动开始的x，y坐标
+  state.touchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 记录触摸id，用于处理多指的情况
+  state.touchId = touches.identifier
+  
+  // 标记开始触摸
+  state.touching = true
+  ownerInstance.callMethod('updateTouchingStatus', {
+    status: true
+  })
+}
+
+// 正在移动
+var touchMove = function(event, ownerInstance) {
+  console.log('touchMove');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var containerData = state.containerData
+  
+  // 判断是否为为当前显示的SwiperItem
+  if (itemData.index != state.currentIndex) return
+  
+  // 判断是否开始触摸
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  var currentTouchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  
+  // 计算相对位移比例
+  if (containerData.vertical) {
+    var touchDistance = currentTouchRelactive.y - state.touchRelactive.y
+    var itemHeight = itemData.itemHeight
+    var distanceRate = touchDistance / itemHeight
+    // console.log(currentTouchRelactive.y, touchDistance, itemHeight, distanceRate);
+    
+    // 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向下滑、当前为最后一个swiperItem并且向上滑时不进行操作
+    if (!containerData.circular &&
+      ((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0))
+    ) {
+      return
+    }
+    
+    // 如果超出了距离则不进行操作
+    if((Math.abs(touchDistance) > (itemData.itemTop + itemData.itemHeight))) {
+      ownerInstance.callMethod('updateParentSwiperContainerStyle', {
+        value: distanceRate < 0 ? -1 : 1
+      })
+      return
+    }
+  } else {
+    var touchDistance = currentTouchRelactive.x - state.touchRelactive.x
+    var itemWidth = itemData.itemWidth
+    var distanceRate = touchDistance / itemWidth
+    // console.log(currentTouchRelactive.x, touchDistance, itemWidth, distanceRate);
+    
+    // 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向右滑、当前为最后一个swiperItem并且向左滑时不进行操作
+    if (!containerData.circular &&
+      ((state.currentIndex === 0 && touchDistance > 0) || (state.currentIndex === containerData.swiperItemLength - 1 && touchDistance < 0))
+    ) {
+      return
+    }
+    
+    // 如果超出了距离则不进行操作
+    if((Math.abs(touchDistance) > (itemData.itemLeft + itemData.itemWidth))) {
+      ownerInstance.callMethod('updateParentSwiperContainerStyle', {
+        value: distanceRate < 0 ? -1 : 1
+      })
+      return
+    }
+  }
+  
+  ownerInstance.callMethod('updateParentSwiperContainerStyle', {
+    value: distanceRate
+  })
+}
+
+// 移动结束
+var touchEnd = function(event, ownerInstance) {
+  console.log('touchEnd');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var containerData = state.containerData
+  
+  // 判断是否为为当前显示的SwiperItem
+  if (itemData.index != state.currentIndex) return
+  
+  // 判断是否开始触摸
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  
+  var currentTime = getDate().getTime()
+  var currentTouchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  
+  if (containerData.vertical) {
+    // 判断触摸移动方向
+    var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, true)
+    // 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向下滑、当前为最后一个swiperItem并且向上滑时不进行操作
+    if (containerData.circular ||
+      !((state.currentIndex === 0 && direction === 'down') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'up'))
+    ) {
+      // 判断触摸的时间和移动的距离是否超过了当前itemHeight的一半，如果是则执行切换操作
+      // console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.y - state.touchRelactive.y));
+      if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.y - state.touchRelactive.y) < itemData.itemHeight / 2) {
+        ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
+          status: 'reset'
+        })
+      } else {
+        // console.log(direction, state.touchRelactive.y, currentTouchRelactive.y);
+        
+        ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', {
+          direction: direction
+        })
+      }
+    }
+  } else {
+    // 判断触摸移动方向
+    var direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, false)
+    // 判断是否为衔接轮播，如果不是衔接轮播，如果当前为第一个swiperItem并且向右滑、当前为最后一个swiperItem并且向左滑时不进行操作
+    if (containerData.circular ||
+      !((state.currentIndex === 0 && direction === 'right') || (state.currentIndex === containerData.swiperItemLength - 1 && direction === 'left'))
+    ) {
+      // 判断触摸的时间和移动的距离是否超过了当前itemWidth的一半，如果是则执行切换操作
+      // console.log(currentTime - state.touchStartTime, Math.abs(currentTouchRelactive.x - state.touchRelactive.x));
+      if ((currentTime - state.touchStartTime) > 200 && Math.abs(currentTouchRelactive.x - state.touchRelactive.x) < itemData.itemWidth / 2) {
+        ownerInstance.callMethod('changeParentSwiperContainerStyleStatus',{
+          status: 'reset'
+        })
+      } else {
+        // console.log(direction, state.touchRelactive.x, currentTouchRelactive.x);
+        
+        ownerInstance.callMethod('updateParentSwiperContainerStyleWithDirection', {
+          direction: direction
+        })
+      }
+    }
+  }
+  
+  // 清除标记
+  state.touchId = null
+  state.touchRelactive = null
+  state.touchStartTime = 0
+  
+  
+  // 标记停止触摸
+  state.touching = true
+  ownerInstance.callMethod('updateTouchingStatus', {
+    status: false
+  })
+}
+
+module.exports = {
+  itemDataObserver: itemDataObserver,
+  currentIndexObserver: currentIndexObserver,
+  containerDataObserver: containerDataObserver,
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-custom-swiper-item/tn-custom-swiper-item.vue b/tuniao-ui/components/tn-custom-swiper-item/tn-custom-swiper-item.vue
new file mode 100644
index 0000000..5fd3c5b
--- /dev/null
+++ b/tuniao-ui/components/tn-custom-swiper-item/tn-custom-swiper-item.vue
@@ -0,0 +1,277 @@
+<template>
+  <!-- #ifdef MP-WEIXIN -->
+  <view
+    class="tn-c-swiper-item"
+    :style="[swiperStyle]"
+    :itemData="itemData"
+    :currentIndex="currentIndex"
+    :containerData="containerData"
+    :change:itemData="wxs.itemDataObserver"
+    :change:currentIndex="wxs.currentIndexObserver"
+    :change:containerData="wxs.containerDataObserver"
+    @touchstart="wxs.touchStart"
+    :catch:touchmove="touching?wxs.touchMove:''"
+    :catch:touchend="touching?wxs.touchEnd:''"
+  >
+    <view class="item__container tn-c-swiper-item__container" :style="[containerStyle]">
+      <slot></slot>
+    </view>
+  </view>
+  <!-- #endif -->
+  <!-- #ifndef MP-WEIXIN -->
+  <view
+    class="tn-c-swiper-item"
+    :style="[swiperStyle]"
+    :itemData="itemData"
+    :currentIndex="currentIndex"
+    :containerData="containerData"
+    :change:itemData="wxs.itemDataObserver"
+    :change:currentIndex="wxs.currentIndexObserver"
+    :change:containerData="wxs.containerDataObserver"
+    @touchstart="wxs.touchStart"
+    @touchmove="wxs.touchMove"
+    @touchend="wxs.touchEnd"
+  >
+    <view class="item__container tn-c-swiper-item__container" :style="[containerStyle]">
+      <slot></slot>
+    </view>
+  </view>
+  <!-- #endif -->
+</template>
+
+<script src="./index.wxs" lang="wxs" module="wxs"></script>
+<script>
+  export default {
+    name: 'tn-custom-swiper-item',
+    props: {
+      
+    },
+    computed: {
+      // swiperItem公共数据
+      itemData() {
+        return {
+          index: this.index,
+          itemWidth: this.itemWidth,
+          itemHeight: this.itemHeight,
+          itemTop: this.itemTop,
+          itemLeft: this.itemLeft
+        }
+      },
+      currentIndex() {
+        return this.parentData.currentIndex
+      },
+      containerData() {
+        return {
+          duration: this.parentData.duration,
+          animationFinish: this.parentData.swiperContainerAnimationFinish,
+          circular: this.parentData.circular,
+          swiperItemLength: this.swiperItemLength,
+          vertical: this.parentData.vertical
+        }
+      },
+      swiperStyle() {
+        let style = {}
+        style.transform = `translate3d(${this.translateX}%, ${this.translateY}%, 0px)`
+        return style
+      },
+      containerStyle() {
+        let style = {}
+        if (this.parentData.customSwiperStyle && Object.keys(this.parentData.customSwiperStyle).length > 0) {
+          style = this.parentData.customSwiperStyle
+        }
+        if ((this.currentIndex === 0 && this.index === this.swiperItemLength - 1) || (this.index === this.currentIndex - 1) && 
+          (this.parentData.prevSwiperStyle && Object.keys(this.parentData.prevSwiperStyle).length > 0)
+        ) {
+          // 前一个swiperItem
+          const copyStyle = JSON.parse(JSON.stringify(style))
+          style = Object.assign(copyStyle, this.parentData.prevSwiperStyle)
+        } 
+        if ((this.currentIndex === this.swiperItemLength - 1 && this.index === 0) || (this.index === this.currentIndex + 1) &&
+          (this.parentData.nextSwiperStyle && Object.keys(this.parentData.nextSwiperStyle).length > 0)
+        ) {
+          // 后一个swiperItem
+          const copyStyle = JSON.parse(JSON.stringify(style))
+          style = Object.assign(copyStyle, this.parentData.nextSwiperStyle)
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        // 父组件参数
+        parentData: {
+          duration: 500,
+          currentIndex: 0,
+          swiperContainerAnimationFinish: false,
+          circular: false,
+          vertical: false,
+          prevSwiperStyle: {},
+          customSwiperStyle: {},
+          nextSwiperStyle: {}
+        },
+        // 标记当前是否正在触摸
+        touching: true,
+        // 当前swiperItem的偏移位置
+        translateX: 0,
+        translateY: 0,
+        // 当前swiperItem的宽高
+        itemWidth: 0,
+        itemHeight: 0,
+        // 当前swiperItem的位置信息
+        itemTop: 0,
+        itemLeft: 0,
+        // 当前swiperItem的状态 prev current next
+        status: 'current',
+        // 当前swiperItem的index序号
+        index: 0,
+        // swiperItem的的数量
+        swiperItemLength: 0
+      }
+    },
+    created() {
+      this.parent = false
+      this.updateParentData()
+      // 获取当前父组件children的数量作为当前swiperItem的序号
+      this.index = this.parent.children.length
+      this.parent && this.parent.children.push(this)
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initSwiperItem()
+      })
+    },
+    methods: {
+      // 初始化swiperItem
+      initSwiperItem() {
+        this.getSwiperItemRect(() => {
+          this.parent.updateAllSwiperItemStyle()
+          this.parentData.swiperContainerAnimationFinish = true
+        })
+      },
+      // 获取swiperItem的信息
+      async getSwiperItemRect(callback) {
+        const swiperItemRes = await this._tGetRect('.tn-c-swiper-item')
+        if (!swiperItemRes.height || !swiperItemRes.width) {
+          setTimeout(() => {
+            this.getSwiperItemRect()
+          }, 30)
+          return
+        }
+        
+        this.itemWidth = swiperItemRes.width
+        this.itemHeight = swiperItemRes.height
+        this.itemTop = swiperItemRes.top
+        this.itemLeft = swiperItemRes.left
+        callback && callback()
+      },
+      // 更新swiperItem样式
+      updateSwiperItemStyle(swiperItemLength, currentIndex = undefined) {
+        currentIndex = currentIndex != undefined ? currentIndex : this.parentData.currentIndex
+        this.swiperItemLength = swiperItemLength
+        // 根据当前swiperItem的序号设置偏移位置
+        // 判断当前swiperItem是否为第一个，如果是则将最后的swiperItem移动到当前的前一个位置（即最前面）
+        if (currentIndex === 0 && this.index === swiperItemLength - 1) {
+          if (this.parentData.vertical) {
+            this.translateX = 0
+            this.translateY = -100
+          } else {
+            this.translateX = -100
+            this.translateY = 0
+          }
+        } 
+        // 判断当前swiperItem是否为最后一个，如果是则将最前的swiperItem移动到当前的后一个位置（即最后面）
+        else if (currentIndex === swiperItemLength - 1 && this.index === 0) {
+          if (this.parentData.vertical) {
+            this.translateX = 0
+            this.translateY = swiperItemLength * 100
+          } else {
+            this.translateX = swiperItemLength * 100
+            this.translateY = 0
+          }
+        }
+        // 正常情况
+        else {
+          if (this.parentData.vertical) {
+            this.translateX = 0
+            this.translateY = this.index * 100
+          } else {
+            this.translateX = this.index * 100
+            this.translateY = 0
+          }
+        }
+      },
+      // 更新父组件的偏移位置信息
+      updateParentSwiperContainerStyle(e) {
+        this.parent.updateSwiperContainerStyleWithValue(e.value)
+      },
+      // 根据方向更新父组件的偏移位置信息
+      updateParentSwiperContainerStyleWithDirection(e) {
+        this.parent.updateSwiperContainerStyleWithDirection(e.direction)
+      },
+      // 修改父组件的偏移位置的状态
+      changeParentSwiperContainerStyleStatus(e) {
+        // reset -> 重置 reload -> 重载
+        this.parent.updateSwiperContainerStyleWithDirection(e.status)
+      },
+      // 更新父组件信息
+      updateParentData() {
+        this.getParentData('tn-custom-swiper')
+      },
+      // 更新触摸状态
+      updateTouchingStatus(e) {
+        this.touching = e.status
+        if (e.status) {
+          this.parent.stopAutoPlay()
+        } else {
+          this.parent.startAutoPlay()
+        }
+      },
+      // 提取对应用户自定义样式
+      extractCustomStyle(customStyle) {
+        let data = {
+          transform: {},
+          style: {}
+        }
+        if (!customStyle) return data
+        // 允许设置的transform参数
+        const allowTransformProps = ['scale','scaleX','scaleY','scaleZ','rotate','rotateX','rotateY','rotateZ']
+        for (let prop in customStyle) {
+          if (prop.startsWith('transformProp')) {
+            // transform里面的样式
+            let transformProp = prop.substring('transformProp'.length)
+            const index = allowTransformProps.findIndex((item) => {
+              return item.toLowerCase() === transformProp.toLowerCase()
+            })
+            if (index !== -1) {
+              transformProp = allowTransformProps[index]
+              data.transform[transformProp] = customStyle[prop]
+            }
+          } else {
+            // 普通样式
+            data.style[prop] = customStyle[prop]
+          }
+        }
+        return data
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-c-swiper-item {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: block;
+    will-change: transform;
+    cursor: none;
+    transform: translate3d(0px, 0px, 0px);
+    
+    .item__container {
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue b/tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue
new file mode 100644
index 0000000..2094fe6
--- /dev/null
+++ b/tuniao-ui/components/tn-custom-swiper/tn-custom-swiper.vue
@@ -0,0 +1,535 @@
+<template>
+  <view
+    class="tn-c-swiper-class tn-c-swiper"
+  >
+    <!-- 轮播item容器-->
+    <view class="tn-swiper__container" :style="[swiperContainerStyle]" :animation="containerAnimation">
+      <slot></slot>
+    </view>
+    
+    <!-- 轮播指示器-->
+    <view v-if="indicator" class="tn-swiper__indicator" :class="[`tn-swiper__indicator--${vertical ? 'vertical' : 'horizontal'}`]" :style="[indicatorStyle]">
+      <!-- 方形 -->
+      <block v-if="indicatorType === 'rect'">
+        <view
+          v-for="(item, index) in children.length"
+          :key="index"
+          class="tn-swiper__indicator__rect"
+          :class="[
+            `tn-swiper__indicator__rect--${vertical ? 'vertical' : 'horizontal'}`, 
+            currentIndex === index ? `tn-swiper__indicator__rect--active tn-swiper__indicator__rect--active--${vertical ? 'vertical' : 'horizontal'}` : ''
+          ]"
+          :style="[indicatorPointStyle(index)]"
+        ></view>
+      </block>
+      <!-- 点 -->
+      <block v-if="indicatorType === 'dot'">
+        <view
+          v-for="(item, index) in children.length"
+          :key="index"
+          class="tn-swiper__indicator__dot"
+          :class="[
+            `tn-swiper__indicator__dot--${vertical ? 'vertical' : 'horizontal'}`,
+            currentIndex === index ? `tn-swiper__indicator__dot--active tn-swiper__indicator__dot--active--${vertical ? 'vertical' : 'horizontal'}` : ''
+          ]"
+          :style="[indicatorPointStyle(index)]"
+        ></view>
+      </block>
+      <!-- 圆角方形 -->
+      <block v-if="indicatorType === 'round'">
+        <view
+          v-for="(item, index) in children.length"
+          :key="index"
+          class="tn-swiper__indicator__round"
+          :class="[
+            `tn-swiper__indicator__round--${vertical ? 'vertical' : 'horizontal'}`,
+            currentIndex === index ? `tn-swiper__indicator__round--active tn-swiper__indicator__round--active--${vertical ? 'vertical' : 'horizontal'}` : ''
+          ]"
+          :style="[indicatorPointStyle(index)]"
+        ></view>
+      </block>
+      <!-- 序号 -->
+      <block v-if="indicatorType === 'number' && !vertical">
+        <view class="tn-swiper__indicator__number">{{ currentIndex + 1 }}/{{ children.length }}</view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-custom-swiper',
+    props: {
+      // 当前所在的轮播位置
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 自动切换
+      autoplay: {
+        type: Boolean,
+        default: false
+      },
+      // 自动切换时间间隔
+      interval: {
+        type: Number,
+        default: 5000
+      },
+      // 滑动动画时长
+      duration: {
+        type: Number,
+        default: 500
+      },
+      // 是否采用衔接滑动
+      circular: {
+        type: Boolean,
+        default: false
+      },
+      // 滑动方向为纵向
+      vertical: {
+        type: Boolean,
+        default: false
+      },
+      // 显示指示点
+      indicator: {
+        type: Boolean,
+        default: false
+      },
+      // 指示点类型
+      // rect -> 方形 round -> 圆角方形 dot -> 点 number -> 轮播图下标
+      indicatorType: {
+        type: String,
+        default: 'dot'
+      },
+      // 指示点的位置
+      // topLeft \ topCenter \ topRight \ bottomLeft \ bottomCenter \ bottomRight
+      indicatorPosition: {
+        type: String,
+        default: 'bottomCenter'
+      },
+      // 指示点激活时颜色
+      indicatorActiveColor: {
+        type: String,
+        default: ''
+      },
+      // 指示点未激活时颜色
+      indicatorInactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 前一个轮播的自定义样式
+      prevSwiperStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 当前轮播的自定义样式
+      customSwiperStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 后一个轮播的自定义样式
+      nextSwiperStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      parentData() {
+        return [
+          this.duration,
+          this.currentIndex,
+          this.swiperContainerAnimationFinish,
+          this.circular,
+          this.vertical,
+          this.prevSwiperStyle,
+          this.customSwiperStyle,
+          this.nextSwiperStyle
+        ]
+      },
+      indicatorStyle() {
+        let style = {}
+        if (this.vertical) {
+          if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
+          if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent =  'center'
+          if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent =  'flex-end'
+          if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) {
+            if (this.vertical) {
+              style.right = '12rpx'
+              style.left = 'auto'
+            } else {
+              style.top = '12rpx'
+              style.bottom = 'auto'
+            }
+          } else {
+            if (this.vertical) {
+              style.right = 'auto'
+              style.left = '12rpx'
+            } else {
+              style.top = 'auto'
+              style.bottom = '12rpx'
+            }
+          }
+        } else {
+          if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
+          if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent =  'center'
+          if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent =  'flex-end'
+          if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) {
+            style.top = '12rpx'
+            style.bottom = 'auto'
+          } else {
+            style.top = 'auto'
+            style.bottom = '12rpx'
+          }
+        }
+        return style
+      },
+      indicatorPointStyle() {
+        return (index) => {
+          let style = {}
+          if (index === this.currentIndex && this.indicatorActiveColor !== '') {
+            style.backgroundColor = this.indicatorActiveColor
+          } else if (this.indicatorInactiveColor !== '') {
+            style.backgroundColor = this.indicatorInactiveColor
+          }
+          return style
+        }
+      }
+    },
+    watch: {
+      parentData() {
+        if (this.children.length) {
+          this.children.forEach((item) => {
+            // 判断子组件如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+            typeof(item.updateParentData) === 'function' && item.updateParentData()
+          })
+        }
+      },
+      current(nVal, oVal) {
+        if (this.currentIndex === nVal) return
+        this.currentIndex = nVal > this.children.length ? this.children.length - 1 : nVal
+        this.swiperContainerAnimationFinish = false
+        // 设置动画过渡时间
+        this.swiperContainerStyle.transitionDuration = `${this.duration + 90}ms`
+        this.updateSwiperContainerItem(oVal)
+      }
+    },
+    data() {
+      return {
+        // 清除动画定时器
+        clearAnimationTimer: null,
+        // 前后衔接执行定时器
+        convergeTimer: null,
+        // 自动轮播Timer
+        autoPlayTimer: null,
+        // 当前选中的轮播
+        currentIndex: this.current,
+        // swiperContainer样式
+        swiperContainerStyle: {
+          transform: 'translate3d(0px, 0px, 0px)',
+          transitionDuration: '0ms'
+        },
+        // swiperContainer动画
+        containerAnimation: {},
+        // 滑动动画结束标记
+        swiperContainerAnimationFinish: false
+      }
+    },
+    created() {
+      this.children = []
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const index = this.currentIndex > this.children.length ? this.children.length - 1 : this.currentIndex
+        this.updateSwiperContainerStyle(index)
+        this.startAutoPlay()
+      })
+    },
+    methods: {
+      // 更新全部swiperItem的样式
+      updateAllSwiperItemStyle() {
+        this.children.forEach((item, index) => {
+          typeof(item.updateSwiperItemStyle) === 'function' && item.updateSwiperItemStyle(this.children.length)
+        })
+        
+      },
+      // 根据swiperIndex更新swiperItemContainer的样式
+      updateSwiperContainerStyle(index) {
+        if (this.vertical) {
+          this.swiperContainerStyle.transform = `translate3d(0px, ${-index * 100}%, 0px)`
+        } else {
+          this.swiperContainerStyle.transform = `translate3d(${-index * 100}%, 0px, 0px)`
+        }
+      },
+      // 根据传递的值更新swiperItemContainer的位置
+      updateSwiperContainerStyleWithValue(value) {
+        if (this.vertical) {
+          this.swiperContainerStyle.transform = `translate3d(0px, ${(-this.currentIndex * 100) + value * 100}%, 0px)`
+        } else {
+          this.swiperContainerStyle.transform = `translate3d(${(-this.currentIndex * 100) + value * 100}%, 0px, 0px)`
+        }
+      },
+      // 根据传递的方向更新swiperItemContainer的位置
+      updateSwiperContainerStyleWithDirection(direction) {
+        const oldCurrent = this.currentIndex
+        const childrenLength = this.children.length
+        const lastSwiperItemIndex = childrenLength - 1
+        this.swiperContainerAnimationFinish = false
+        
+        
+        // 向后切换一个SwiperItem
+        if (direction === 'reset') {
+          // 设置动画过渡时间
+          this.swiperContainerStyle.transitionDuration = `${this.duration}ms`
+          this.updateSwiperContainerStyle(this.currentIndex)
+          this.clearAnimationTimer = setTimeout(() => {
+            this.clearSwiperContainerAnimation()
+          }, this.duration)
+        } else if (direction === 'reload') {
+          this.clearConvergeSwiperItemTimer()
+          this.clearSwiperContainerAnimation()
+          this.updateSwiperItemStyle(0)
+          this.updateSwiperItemStyle(lastSwiperItemIndex)
+        } else {
+          if (direction === 'left' || direction === 'up') {
+            if (oldCurrent === childrenLength - 1 && !this.circular) {
+              this.clearSwiperContainerAnimation()
+              this.clearConvergeSwiperItemTimer()
+              return
+            } 
+            this.currentIndex = oldCurrent + 1 >= childrenLength ? 0 : oldCurrent + 1
+          } else if (direction === 'right' || direction === 'down') {
+            if (oldCurrent === 0 && !this.circular) {
+              this.clearSwiperContainerAnimation()
+              this.clearConvergeSwiperItemTimer()
+              return
+            } 
+            this.currentIndex = oldCurrent - 1 < 0 ? childrenLength - 1 : oldCurrent - 1
+          }
+          // 设置动画过渡时间
+          this.swiperContainerStyle.transitionDuration = `${this.duration + 90}ms`
+          // this.updateSwiperItemContainerRect(this.currentIndex)
+        }
+        
+        // console.log(direction, oldCurrent, this.currentIndex);
+        this.updateSwiperContainerItem(oldCurrent)
+        
+        // 切换轮播时触发事件
+        this.$emit('change', {
+          current: this.currentIndex
+        })
+      },
+      // 设置自动轮播
+      startAutoPlay() {
+        if (this.autoplay && !this.autoPlayTimer && this.circular) {
+          this.autoPlayTimer = setInterval(() => {
+            this.updateSwiperContainerStyleWithDirection('left')
+          }, this.interval)
+        }
+      },
+      // 停止自动轮播
+      stopAutoPlay() {
+        if (this.autoPlayTimer) {
+          clearInterval(this.autoPlayTimer)
+          this.autoPlayTimer = null
+        }
+      },
+      // 更新swiperContainer和swiperItem相关联信息
+      updateSwiperContainerItem(oldCurrent) {
+        const childrenLength = this.children.length
+        const lastSwiperItemIndex = childrenLength - 1
+        // 判断当前是否为头尾，如果是更新对应的头尾SwiperItem样式
+        // 更新swiperItemContainer的样式
+        if (oldCurrent === 0 && this.currentIndex === lastSwiperItemIndex) {
+          // 先移动到最左边然后再去除动画偏移到正常的位置
+          // this.swiperContainerStyle.transform = `translate3d(100%, 0px, 0px)`
+          this.updateSwiperContainerStyle(-1)
+          this.clearSwiperContainerAnimationTimer()
+          this.clearAnimationTimer = setTimeout(() => {
+            this.convergeSwiperItem()
+          }, this.duration)
+        } else if (oldCurrent === lastSwiperItemIndex && this.currentIndex === 0) {
+          // 先移动到最右边然后再去除动画偏移到正常的位置
+          // this.swiperContainerStyle.transform = `translate3d(${-childrenLength * 100}%, 0px, 0px)`
+          this.updateSwiperContainerStyle(childrenLength)
+          this.clearSwiperContainerAnimationTimer()
+          this.clearAnimationTimer = setTimeout(() => {
+            this.convergeSwiperItem()
+          }, this.duration)
+        } else {
+          this.updateSwiperContainerStyle(this.currentIndex)
+          this.updateSwiperItemStyle(0)
+          this.updateSwiperItemStyle(lastSwiperItemIndex)
+          this.clearAnimationTimer = setTimeout(() => {
+            this.clearSwiperContainerAnimation()
+          }, this.duration)
+        }
+      },
+      // 更新对应swiperItem的信息
+      updateSwiperItemStyle(index) {
+        const childrenLength = this.children.length
+        if (index < 0) index = 0
+        if (index > childrenLength - 1) index = childrenLength - 1
+        
+        typeof(this.children[index].updateSwiperItemStyle) === 'function' && this.children[index].updateSwiperItemStyle(childrenLength, this.currentIndex)
+      },
+      // 更新对应swiperItem的容器信息
+      updateSwiperItemContainerRect(index) {
+        const childrenLength = this.children.length
+        if (index < 0) index = 0
+        if (index > childrenLength - 1) index = childrenLength - 1
+        
+        typeof(this.children[index].getSwiperItemRect) === 'function' && this.children[index].getSwiperItemRect()
+      },
+      // 执行前后衔接
+      convergeSwiperItem() {
+        const lastSwiperItemIndex = this.children.length - 1
+        this.clearSwiperContainerAnimation()
+        this.clearConvergeSwiperItemTimer()
+        this.convergeTimer = setTimeout(() => {
+          this.updateSwiperItemStyle(0)
+          this.updateSwiperItemStyle(lastSwiperItemIndex)
+          this.updateSwiperContainerStyle(this.currentIndex)
+          this.clearConvergeSwiperItemTimer()
+        }, 30)
+      },
+      // 停止/清除切换动画
+      clearSwiperContainerAnimation() {
+        this.swiperContainerStyle.transitionDuration = `0ms`
+        this.swiperContainerAnimationFinish = true
+        this.clearSwiperContainerAnimationTimer()
+      },
+      // 停止/清除执行前后衔接定时器
+      clearConvergeSwiperItemTimer() {
+        if (this.convergeTimer) {
+          clearTimeout(this.convergeTimer)
+          this.convergeTimer = null
+        }
+      },
+      // 停止/清除切换动画定时器
+      clearSwiperContainerAnimationTimer() {
+        if (this.clearAnimationTimer) {
+          clearTimeout(this.clearAnimationTimer)
+          this.clearAnimationTimer = null
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-c-swiper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    
+    .tn-swiper {
+      &__container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        
+        will-change: transform;
+        transition-property: all;
+        transition-timing-function: ease-out;
+      }
+      
+      &__indicator {
+        position: absolute;
+        display: flex;
+        z-index: 1;
+        
+        &--horizontal {
+          padding: 0 24rpx;
+          flex-direction: row;
+          width: 100%;
+        }
+        &--vertical {
+          padding: 24rpx 0;
+          flex-direction: column;
+          height: 100%;
+        }
+        
+        &__rect {
+          background-color: rgba(0, 0, 0, 0.3);
+          transition: all 0.5s;
+          
+          &--horizontal {
+            width: 26rpx;
+            height: 8rpx;
+          }
+          &--vertical {
+            width: 8rpx;
+            height: 26rpx;
+          }
+          
+          &--active {
+            background-color: rgba(255, 255, 255, 0.8);
+          }
+        }
+        
+        &__dot {
+          width: 14rpx;
+          height: 14rpx;
+          border-radius: 20rpx;
+          background-color: rgba(0, 0, 0, 0.3);
+          transition: all 0.5s;
+          
+          &--horizontal {
+            margin: 0 6rpx;
+          }
+          &--vertical {
+            margin: 6rpx 0;
+          }
+          
+          &--active {
+            background-color: rgba(255, 255, 255, 0.8);
+          }
+        }
+        
+        &__round {
+          width: 14rpx;
+          height: 14rpx;
+          border-radius: 20rpx;
+          background-color: rgba(0, 0, 0, 0.3);
+          transition: all 0.5s;
+          
+          &--horizontal {
+            margin: 0 6rpx;
+          }
+          &--vertical {
+            margin: 6rpx 0;
+          }
+          
+          &--active {
+            background-color: rgba(255, 255, 255, 0.8);
+            
+            &--horizontal {
+              width: 34rpx;
+            }
+            &--vertical {
+              height: 34rpx;
+            }
+          }
+        }
+        
+        &__number {
+          padding: 6rpx 16rpx;
+          line-height: 1;
+          background-color: rgba(0, 0, 0, 0.3);
+          color: rgba(255, 255, 255, 0.8);
+          border-radius: 100rpx;
+          font-size: 26rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-drag/index.wxs b/tuniao-ui/components/tn-drag/index.wxs
new file mode 100644
index 0000000..6df1e84
--- /dev/null
+++ b/tuniao-ui/components/tn-drag/index.wxs
@@ -0,0 +1,265 @@
+// 判断是否出界
+var isOutRange = function(x1, y1, x2, y2, x3, y3) {
+  return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3
+}
+var edit = false
+
+function bool(str) {
+  return str === 'true' || str === true
+}
+/**
+ * 排序核心
+ * @param {Object} startKey 开始时位置
+ * @param {Object} endKey 结束时位置
+ * @param {Object} instance wxs内的局部变量快照
+ */
+var sortCore = function(startKey, endKey, state) {
+  var basedata = state.basedata
+  var excludeFix = function(sortKey, type) {
+    // fixed 元素位置不会变化, 这里直接用 sortKey 获取，更加便捷
+    if (state.list[sortKey].fixed) {
+      var _sortKey = type ? --sortKey : ++sortKey
+      return excludeFix(sortKey, type)
+    }
+    return sortKey
+  }
+  
+  // 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
+  var endRealKey = -1
+  state.list.forEach(function(item) {
+    if (item.sortKey === endKey) endRealKey = item.realKey
+  })
+  
+  return state.list.map(function(item) {
+    if (item.fixed) return item
+    var sortKey = item.sortKey
+    var realKey = item.realKey
+    
+    if (startKey < endKey) {
+      // 正序拖动
+      if (sortKey > startKey && sortKey <= endKey) {
+        --realKey
+        sortKey =  excludeFix(--sortKey, true)
+      } else if (sortKey === startKey) {
+        realKey = endRealKey
+        sortKey = endKey
+      }
+    } else if (startKey > endKey) {
+      // 倒序拖动
+      if (sortKey >= endKey && sortKey < startKey) {
+        ++realKey
+        sortKey = excludeFix(++sortKey, false)
+      } else if (sortKey === startKey) {
+        realKey = endRealKey
+        sortKey = endKey
+      }
+    }
+    
+    if (item.sortKey != sortKey) {
+      item.translateX = (sortKey % basedata.columns) * 100 + '%'
+      item.translateY = Math.floor(sortKey / basedata.columns) * 100 + '%'
+      item.sortKey = sortKey
+      item.realKey = realKey
+    }
+    return item
+  })
+}
+
+var triggerCustomEvent = function(list, type, instance) {
+  if (!instance) return
+  var _list = [],
+    listData = [];
+    
+  list.forEach(function(item) {
+    _list[item.sortKey] = item
+  })
+  _list.forEach(function(item) {
+    listData.push(item.data)
+  })
+  
+  // 编译到小程序 funcName作为参数传递导致事件不执行
+  switch(type) {
+    case 'change':
+      instance.callMethod('change', {data: listData})
+      break
+    case 'sortEnd':
+      instance.callMethod('sortEnd', {data: listData})
+      break
+  }
+}
+
+var listObserver = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  state.itemsInstance = ownerInstance.selectAllComponents('.tn-drag__item')
+  
+  state.list = newVal || []
+  
+  state.list.forEach(function(item, index) {
+    var itemInstance = state.itemsInstance[index]
+    if (item && itemInstance) {
+      itemInstance.setStyle({
+        'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)'
+      })
+      if (item.fixed) itemInstance.addClass('tn-drag__fixed')
+    }
+  })
+}
+
+var baseDataObserver = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  state.basedata = newVal
+}
+
+var longPress = function(event, ownerInstance) {
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  
+  edit = bool(dataset.edit)
+  if (!edit) return
+  if (!state.basedata || state.basedata === 'undefined') {
+    state.basedata = JSON.parse(dataset.basedata)
+  }
+  var basedata = state.basedata
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  state.current = +dataset.index
+  
+  // 初始项是固定项则返回
+  var item = state.list[state.current]
+  if (item && item.fixed) return
+  
+  // 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
+  if (state.dragging) return
+  
+  ownerInstance.callMethod("drag", {
+    dragging: true
+  })
+  
+  // 计算X, Y轴初始位移，使item中心移动到点击处，单列的时候X轴初始不做位移
+  state.translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left)
+  state.translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top)
+  state.touchId = touches.identifier
+  
+  instance.setStyle({
+    'transform': 'translate3d(' + state.translateX + 'px,' + state.translateY +'px, 0)'
+  })
+  state.itemsInstance.forEach(function(item, index) {
+    item.removeClass("tn-drag__transition").removeClass("tn-drag__current")
+    item.addClass(index === state.current ? "tn-drag__current" : "tn-drag__transition")
+  })
+  
+  ownerInstance.callMethod("vibrate")
+  state.dragging = true
+}
+
+var touchStart = function(event, ownerInstance) {
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  edit = bool(dataset.edit)
+}
+
+var touchMove = function(event, ownerInstance) {
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var basedata = state.basedata
+  
+  if (!state.dragging || !edit) return
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 如果不是同一个触发点则返回
+  if (state.touchId !== touches.identifier) return
+  
+  // 计算X,Y轴位移, 单列时候X轴初始不做位移
+  var translateX = basedata.columns === 1 ? 0 : touches.pageX - (basedata.itemWidth / 2 + basedata.left)
+  var translateY = touches.pageY - (basedata.itemHeight / 2 + basedata.top)
+  
+  // 到顶到低自动滑动
+  if (touches.clientY > basedata.windowHeight - basedata.itemHeight - basedata.realBottomSize) {
+    // 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
+    ownerInstance.callMethod('pageScroll', {
+      scrollTop: touches.pageY + basedata.itemHeight - (basedata.windowHeight - basedata.realBottomSize)
+    })
+  } else if (touches.clientY < basedata.itemHeight + basedata.realTopSize) {
+    // 当前触摸点pageY - item高度 - 顶部固定区域高
+    ownerInstance.callMethod('pageScroll', {
+      scrollTop: touches.pageY - basedata.itemHeight - basedata.realTopSize
+    })
+  }
+  
+  // 设置当前激活元素的偏移量
+  instance.setStyle({
+    'transform': 'translate3d('+ translateX + 'px,' + translateY + 'px, 0)'
+  })
+  
+  var startKey = state.list[state.current].sortKey
+  var currentX = Math.round(translateX / basedata.itemWidth)
+  var currentY = Math.round(translateY / basedata.itemHeight)
+  var endKey = currentX + basedata.columns * currentY
+  
+  // 目标项时固定项则返回
+  var item = state.list[endKey]
+  if (item && item.fixed) return
+  
+  // X轴或者Y轴超出范围则返回
+  if (isOutRange(currentX, basedata.columns, currentY, basedata.rows, endKey, state.list.length)) return
+  
+  // 防止拖拽过程中发生乱序问题
+  if (startKey === endKey || startKey === state.preStartKey) return
+  state.preStartKey = startKey
+  
+  var list = sortCore(startKey, endKey, state)
+  state.itemsInstance.forEach(function(itemInstance, index) {
+    var item = list[index]
+    if (index !== state.current) {
+      itemInstance.setStyle({
+        'transform': 'translate3d('+ item.translateX + ',' + item.translateY +', 0)'
+      })
+    }
+  })
+  
+  // ownerInstance.callMethod('vibrate')
+  ownerInstance.callMethod('listDataChange', {
+    data: list
+  })
+  triggerCustomEvent(list, "change", ownerInstance)
+}
+
+var touchEnd = function(event, ownerInstance) {
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var basedata = state.basedata
+  
+  if (!state.dragging || !edit) return
+  triggerCustomEvent(state.list, "sortEnd", ownerInstance)
+  
+  instance.addClass('tn-drag__transition')
+  instance.setStyle({
+    'transform': 'translate3d('+ state.list[state.current].translateX + ',' + state.list[state.current].translateY + ', 0)'
+  })
+  state.itemsInstance.forEach(function(item, index) {
+    item.removeClass('tn-drag__transition')
+  })
+  
+  state.preStartKey = -1
+  state.dragging = false
+  ownerInstance.callMethod('drag', {
+    dragging: false
+  })
+  state.current = -1
+  state.translateX = 0
+  state.translateY = 0
+}
+
+module.exports = {
+	longPress: longPress,
+	touchStart: touchStart,
+	touchMove: touchMove,
+	touchEnd: touchEnd,
+	baseDataObserver: baseDataObserver,
+	listObserver: listObserver
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-drag/tn-drag.vue b/tuniao-ui/components/tn-drag/tn-drag.vue
new file mode 100644
index 0000000..17d269d
--- /dev/null
+++ b/tuniao-ui/components/tn-drag/tn-drag.vue
@@ -0,0 +1,278 @@
+<template>
+  <view
+    class="tn-drag-class tn-drag"
+    :style="{
+      height: wrapHeight + 'rpx'
+    }"
+    :list="listData"
+    :basedata="baseData"
+    :change:list="wxs.listObserver"
+    :change:basedata="wxs.baseDataObserver"
+  >
+    <!-- #ifdef MP-WEIXIN -->
+    <view
+      v-for="(item, index) in listData"
+      :key="item.id"
+      class="tn-drag__item"
+      :style="{
+        width: 100 / columns + '%',
+        height: itemHeight + 'rpx'
+      }"
+      :data-index="index"
+      :data-basedata="baseData"
+      :data-edit="edit"
+      @longpress="wxs.longPress"
+      @touchstart="wxs.touchStart"
+      :catch:touchmove="dragging?wxs.touchMove:''"
+      :catch:touchend="dragging?wxs.touchEnd:''"
+    >
+      <slot :entity="item.data" :fixed="item.fixed" :index="index" :height="itemHeight" :isEdit="edit"></slot>
+    </view>
+    <!-- #endif -->
+
+    <!-- #ifndef MP-WEIXIN -->
+    <view
+      v-for="(item, index) in listData"
+      :key="item.id"
+      class="tn-drag__item"
+      :style="{
+        width: 100 / columns + '%',
+        height: itemHeight + 'rpx' 
+      }"
+      @longpress="wxs.longPress"
+      :data-index="index"
+      :data-basedata="baseData"
+      :data-edit="edit"
+      @touchstart="wxs.touchStart"
+      @touchmove="wxs.touchMove"
+      @touchend="wxs.touchEnd"
+    >
+      <slot :entity="item.data" :fixed="item.fixed" :index="index" :height="itemHeight" :isEdit="edit"></slot>
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+<script src="./index.wxs" lang="wxs" module="wxs"></script>
+<script>
+  export default {
+    name: 'tn-drag',
+    props: {
+      // 数据源
+      // 如果属性中包含fixed，则标识当前数据不允许拖动
+      list: {
+        type: Array,
+        default () {
+          return []
+        }
+      },
+      // 是否允许拖动编辑
+      edit: {
+        type: Boolean,
+        default: true
+      },
+      // 列数
+      columns: {
+        type: Number,
+        default: 3
+      },
+      // item元素高度, 单位rpx
+      itemHeight: {
+        type: Number,
+        default: 0
+      },
+      // 当前父元素滚动的高度
+      scrollTop: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      wrapHeight() {
+        return this.rows * this.itemHeight
+      }
+    },
+    data() {
+      return {
+        // 未渲染前节点数据
+        baseData: {},
+        // 拖动后的数据
+        dragData: [],
+        // 行数
+        rows: 0,
+        // 渲染数据
+        listData: [],
+        // 标记是否正在拖动
+        dragging: false
+      }
+    },
+    watch: {
+      list(val) {
+        this.listData = []
+        this.$nextTick(() => {
+          this.init()
+        })
+      },
+      columns(val) {
+        this.listData = []
+        this.$nextTick(() => {
+          this.init()
+        })
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      // 初始化
+      init() {
+        this.dragging = true
+        const initDragItem = item => {
+          const obj = {
+            ...item
+          }
+          const fixed = obj?.fixed || false
+          delete obj["fixed"]
+          return {
+            id: this.unique(),
+            fixed,
+            data: {
+              ...obj
+            }
+          }
+        }
+        
+        let i = 0
+        const listData = (this.list || []).map((item, index) => {
+          let listItem = initDragItem(item)
+          // 真实排序
+          listItem.realKey = i++
+          // 整体排序
+          listItem.sortKey = index
+          listItem.translateX = `${(listItem.sortKey % this.columns) * 100}%`
+          listItem.translateY = `${Math.floor(listItem.sortKey / this.columns) * 100}%`
+          return listItem
+        })
+        this.rows = Math.ceil(listData.length / this.columns)
+        this.listData = listData
+        this.dragData = listData
+        
+        if (listData.length === 0) return
+        // console.log(listData);
+        
+        // 初始化dom元素
+        this.$nextTick(() => {
+          this.initRect()
+        })
+      },
+      // 初始化dom元素
+      initRect() {
+        const {
+          windowWidth,
+          windowHeight
+        } = uni.getSystemInfoSync()
+        
+        let baseData = {}
+        baseData.windowHeight = windowHeight
+        baseData.realTopSize = 0
+        baseData.realBottomSize = 0
+        baseData.columns = this.columns
+        baseData.rows = this.rows
+        
+        const query = uni.createSelectorQuery().in(this)
+        query.select('.tn-drag').boundingClientRect()
+        query.select('.tn-drag__item').boundingClientRect()
+        query.exec(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.initRect()
+            }, 10)
+            return
+          }
+          
+          baseData.itemWidth = res[1].width
+          baseData.itemHeight = res[1].height
+          baseData.left = res[0].left
+          baseData.top = res[0].top + this.scrollTop
+          this.dragging = false
+          this.baseData = baseData
+        })
+        
+      },
+      
+      // 触发震动
+      vibrate() {
+        uni.vibrateShort()
+      },
+      // 滚动到指定的位置
+      pageScroll(e) {
+        uni.pageScrollTo({
+          scrollTop: e.scrollTop,
+          duration: 0
+        })
+      },
+      // 修改拖动状态
+      drag(e) {
+        this.dragging = e.dragging
+      },
+      // 拖拽数据发生改变
+      listDataChange(e) {
+        this.dragData = e.data
+      },
+      // item被点击
+      itemClick(index) {
+        const item = this.dragData[index]
+        this.$emit('click', {
+          key: item.realKey,
+          data: item.data
+        })
+      },
+      
+      // 拖拽结束事件
+      sortEnd(e) {
+        this.$emit('end', {
+          data: e.data
+        })
+      },
+      // 排序发生改变事件
+      change(e) {
+        this.$emit('change', {
+          data: e.data
+        })
+      },
+      
+      // 生成元素唯一id
+      unique(n = 6) {
+        let id = ''
+        for (let i = 0; i < n; i++) id += Math.floor(Math.random() * 10)
+        return 'tn_' + new Date().getTime() + id
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-drag {
+    position: relative;
+    
+    &__item {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      left: 0;
+    }
+    
+    &__transition {
+      transition: transform 0.25s !important;
+    }
+    
+    &__current {
+      z-index: 10 !important;
+    }
+    
+    &__fixed {
+      z-index: 1 !important;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-empty/tn-empty.vue b/tuniao-ui/components/tn-empty/tn-empty.vue
new file mode 100644
index 0000000..126de5f
--- /dev/null
+++ b/tuniao-ui/components/tn-empty/tn-empty.vue
@@ -0,0 +1,227 @@
+<template>
+  <view v-if="show" class="tn-empty-class tn-empty" :style="[emptyStyle]">
+    <view
+      v-if="!isImage"
+      class="tn-empty__icon"
+      :class="[resolveIconClass(icon, mode)]"
+      :style="[iconStyle]"
+    ></view>
+    <image
+      v-else
+      class="tn-empty__image"
+      :style="[imageStyle]"
+      :src="icon"
+      mode="widthFix"
+    ></image>
+    
+    <view
+      class="tn-empty__text"
+      :style="[textStyle]"
+    >{{ text ? text : localizedIcons[mode]}}</view>
+    <view v-if="$slots.default || $slots.$default" class="tn-empty__slot">
+      <slot/>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-empty',
+    props: {
+      // 显示空白页
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 内置icon的名称
+      // 图片路径，建议使用绝对路径
+      icon: {
+        type: String,
+        default: ''
+      },
+      // 预置图标类型
+      mode: {
+        type: String,
+        default: 'data'
+      },
+      // 提示文字
+      text: {
+        type: String,
+        default: ''
+      },
+      // 文字颜色
+      textColor: {
+        type: String,
+        default: ''
+      },
+      // 文字大小，单位rpx
+      textSize: {
+        type: Number,
+        default: 0
+      },
+      // 图标颜色
+      iconColor: {
+        type: String,
+        default: ''
+      },
+      // 图标大小，单位rpx
+      iconSize: {
+        type: Number,
+        default: 0
+      },
+      // 图片宽度（当图标为图片时生效），单位rpx
+      imgWidth: {
+        type: Number,
+        default: 0
+      },
+      // 图片高度（当图标为图片时生效），单位rpx
+      imgHeight: {
+        type: Number,
+        default: 0
+      },
+      // 自定义组件样式
+      customStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      emptyStyle() {
+        let style = {}
+        Object.assign(style, this.customStyle)
+        return style
+      },
+      iconStyle() {
+        let style = {}
+        if (this.iconSize) {
+          style.fontSize = this.iconSize + 'rpx'
+        }
+        if (this.iconColor) {
+          style.color = this.iconColor
+        }
+        return style
+      },
+      imageStyle() {
+        let style = {}
+        if (this.imgWidth) {
+          style.width = this.imgWidth + 'rpx'
+        }
+        if (this.imgHeight) {
+          style.height = this.imgHeight + 'rpx'
+        }
+        return style
+      },
+      textStyle() {
+        let style = {}
+        if (this.textColor) {
+          style.color = this.textColor
+        }
+        if (this.textSize) {
+          style.fontSize = this.textSize + 'rpx'
+        }
+        return style
+      },
+      // 判断传递的icon是否为图片
+      isImage() {
+        return this.icon.indexOf('/') >= 0
+      },
+      localizedIcons() {
+        return {
+          cart: getLocalizedText(this, '购物车为空', 'Cart is empty'),
+          page: getLocalizedText(this, '页面不存在', 'Page not found'),
+          search: getLocalizedText(this, '搜索结果为空', 'No search results'),
+          address: getLocalizedText(this, '地址为空', 'No address available'),
+          network: getLocalizedText(this, '网络不通', 'Network unavailable'),
+          order: getLocalizedText(this, '订单为空', 'No orders available'),
+          coupon: getLocalizedText(this, '优惠券为空', 'No coupons available'),
+          favor: getLocalizedText(this, '暂无收藏', 'No favorites yet'),
+          permission: getLocalizedText(this, '无权限', 'No permission'),
+          history: getLocalizedText(this, '历史记录为空', 'No history available'),
+          message: getLocalizedText(this, '暂无消息', 'No messages yet'),
+          list: getLocalizedText(this, '列表为空', 'List is empty'),
+          data: getLocalizedText(this, '暂无数据', 'No data available'),
+          comment: getLocalizedText(this, '暂无评论', 'No comments yet')
+        }
+      }
+    },
+    methods: {
+      resolveIconClass(icon, mode) {
+        if (icon) {
+          if (icon.startsWith('tn-icon-')) {
+            return icon
+          }
+          return `tn-icon-${icon}`
+        }
+
+        const modeIconMap = {
+          cart: 'tn-icon-cart',
+          page: 'tn-icon-warning',
+          search: 'tn-icon-search',
+          address: 'tn-icon-location',
+          network: 'tn-icon-wifi-no',
+          order: 'tn-icon-order',
+          coupon: 'tn-icon-coupon',
+          favor: 'tn-icon-my-love',
+          permission: 'tn-icon-lock',
+          history: 'tn-icon-history',
+          message: 'tn-icon-message',
+          list: 'tn-icon-search-list',
+          data: 'tn-icon-charts-column',
+          comment: 'tn-icon-chat'
+        }
+
+        return modeIconMap[mode] || 'tn-icon-search-list'
+      }
+    },
+    data() {
+      return {}
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    
+    &__icon {
+      margin-top: 14rpx;
+      color: #AAAAAA;
+      font-size: 90rpx;
+    }
+    
+    &__image {
+      width: 160rpx;
+      height: 160rpx;
+    }
+    
+    &__text {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 20rpx;
+      color: #AAAAAA;
+      font-size: 30rpx;
+    }
+    
+    &__slot {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 20rpx;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-fab/tn-fab.vue b/tuniao-ui/components/tn-fab/tn-fab.vue
new file mode 100644
index 0000000..6b867e9
--- /dev/null
+++ b/tuniao-ui/components/tn-fab/tn-fab.vue
@@ -0,0 +1,523 @@
+<template>
+  <view class="tn-fab-class tn-fab" @touchmove.stop.prevent>
+    <view
+      class="tn-fab__box"
+      :class="{'tn-fab--right': left === 'auto'}"
+      :style="{
+        left: $t.string.getLengthUnitValue(fabLeft || left),
+        right: $t.string.getLengthUnitValue(fabRight || right),
+        bottom: $t.string.getLengthUnitValue(fabBottom || bottom),
+        zIndex: elZIndex
+      }"
+    >
+      <view
+        v-if="visibleSync"
+        class="tn-fab__btns"
+        :class="[`tn-fab__btns__animation--${animationType}`, 
+          showFab ? `tn-fab__btns--visible--${animationType}` : ''
+        ]"
+      >
+        <view
+          v-for="(item, index) in btnList"
+          :key="index"
+          class="tn-fab__item"
+          :class="[
+            `tn-fab__item__animation--${animationType}`, 
+            {'tn-fab__item--left': right === 'auto'}
+          ]"
+          :style="[fabItemStyle(index)]"
+          @tap.stop="handleClick(index)"
+        >
+          <!-- 带图标或者图片时显示的文字信息 -->
+          <view
+            v-if="animationType !== 'around' && (item.imgUrl || item.icon)"
+            :class="[left === 'auto' ? 'tn-fab__item__text--right' : 'tn-fab__item__text--left']"
+            :style="{
+              color: item.textColor || '#FFF',
+              fontSize: $t.string.getLengthUnitValue(item.textSize || 28)
+            }"
+          >{{ item.text || '' }}</view>
+          
+          <!-- 带图片或者图标时的图片、图标信息 -->
+          <view
+            class="tn-fab__item__btn"
+            :class="[!item.bgColor ? backgroundColorClass : '']"
+            :style="{
+              width: $t.string.getLengthUnitValue(width),
+              height: $t.string.getLengthUnitValue(height),
+              lineHeight: $t.string.getLengthUnitValue(height),
+              backgroundColor: item.bgColor || backgroundColorStyle || '#01BEFF',
+              borderRadius: $t.string.getLengthUnitValue(radius)
+            }"
+          >
+            <!-- 无图片和无图标时只显示文字 -->
+            <view
+              v-if="!item.imgUrl && !item.icon"
+              class="tn-fab__item__btn__title"
+              :style="{
+                color: item.textColor || '#fff',
+                fontSize: $t.string.getLengthUnitValue(item.textSize || 28)
+              }"
+            >{{ item.text || '' }}</view>
+            <!-- 图标 -->
+            <view
+              v-if="item.icon"
+              class="tn-fab__item__btn__icon"
+              :class="[`tn-icon-${item.icon}`]"
+              :style="{
+                color: item.iconColor || '#fff',
+                fontSize: $t.string.getLengthUnitValue(item.iconSize || iconSize || 64)
+              }"
+            ></view>
+            <!-- 图片 -->
+            <image
+              v-else-if="!item.icon && item.imgUrl"
+              class="tn-fab__item__btn__image"
+              :style="{
+                width: $t.string.getLengthUnitValue(item.imgWidth || 64),
+                height: $t.string.getLengthUnitValue(item.imgHeight || 64),
+              }"
+              :src="item.imgUrl"
+            ></image>
+          </view>
+        </view>
+      </view>
+      
+      <view
+        class="tn-fab__item__btn tn-fab__item__btn--fab"
+        :class="[backgroundColorClass, fontColorClass, {'tn-fab__item__btn--active': showFab}]"
+        :style="{
+          width: $t.string.getLengthUnitValue(width),
+          height: $t.string.getLengthUnitValue(height),
+          backgroundColor: backgroundColorStyle || !backgroundColorClass ? '#01BEFF' : '',
+          color: fontColorStyle || '#fff',
+          borderRadius: $t.string.getLengthUnitValue(radius),
+          zIndex: elZIndex - 1
+        }"
+        @tap.stop="fabClick"
+      >
+        <slot>
+          <view class="tn-fab__item__btn__icon" :class="[`tn-icon-${icon}`]" :style="{fontSize: $t.string.getLengthUnitValue(iconSize || 64)}"></view>
+        </slot>
+      </view>
+    </view>
+    <view v-if="visibleSync && showMask" class="tn-fab__mask" :class="{'tn-fab__mask--visible': showFab}" :style="{zIndex: elZIndex - 3}" @tap="clickMask()"></view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-fab',
+    mixins: [componentsColorMixin],
+    props: {
+      // 按钮列表
+      // {
+      //   // 背景颜色
+      //   bgColor: '#fff',
+      //   // 图片地址
+      //   imgUrl: '',
+      //   // 图片宽度
+      //   imgWidth: 60,
+      //   // 图片高度
+      //   imgHeight: 60,
+      //   // 图标名称
+      //   icon: '',
+      //   // 图标尺寸
+      //   iconSize: 60,
+      //   // 图标颜色
+      //   iconColor: '#fff',
+      //   // 提示文字
+      //   text: '',
+      //   // 文字大小
+      //   textSize: 30,
+      //   // 字体颜色
+      //   textColor: '#fff'
+      // }
+      btnList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 自定义悬浮按钮内容
+      customBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 悬浮按钮的宽度
+      width: {
+        type: [String, Number],
+        default: 88
+      },
+      // 悬浮按钮的高度
+      height: {
+        type: [String, Number],
+        default: 88
+      },
+      // 图标大小
+      iconSize: {
+        type: [String, Number],
+        default: 64
+      },
+      // 图标名称
+      icon: {
+        type: String,
+        default: 'open'
+      },
+      // 按钮圆角
+      radius: {
+        type: [String, Number],
+        default: '50%'
+      },
+      // 按钮距离左边的位置
+      left: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 按钮距离右边的位置
+      right: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 按钮距离底部的位置
+      bottom: {
+        type: [String, Number],
+        default: 100
+      },
+      // 展示动画类型 up 往上展示 around 环绕
+      animationType: {
+        type: String,
+        default: 'up'
+      },
+      // 当动画为圆环时，每个弹出按钮之间的距离, 单位px
+      aroundBtnDistance: {
+        type: Number,
+        default: 10
+      },
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 显示遮罩
+      showMask: {
+        type: Boolean,
+        default: true
+      },
+      // 点击遮罩是否可以关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        showFab: false,
+        visibleSync: false,
+        timer: null,
+        fabLeft: 0,
+        fabRight: 0,
+        fabBottom: 0,
+        fabBtnInfo: {
+          width: 0,
+          height: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        systemInfo: {
+          width: 0,
+          height: 0
+        },
+        updateProps: false
+      }
+    },
+    computed: {
+      elZIndex() {
+        return this.zIndex || this.$t.zIndex.fab
+      },
+      propsData() {
+        return [this.width, this.height, this.left, this.right, this.bottom]
+      },
+      fabItemStyle() {
+        return (index) => {
+          let style = {
+            zIndex: this.elZIndex - 2
+          }
+          if (this.animationType === 'up' || !this.showFab) {
+            return style
+          }
+          let base = 1 
+          if (this.left === 'auto') {
+            base = 1
+          } else if (this.right === 'auto') {
+            base = -1
+          }
+          style.transform = `rotate(${base * index * 60}deg) translateX(${(this.aroundBtnDistance + this.fabBtnInfo.width) * (-(base))}px)`
+          return style
+        }
+      }
+    },
+    watch: {
+      propsData() {
+        // 更新按钮信息
+        this.updateProps = true
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getFabBtnRectInfo()
+      })
+    },
+    beforeDestroy() {
+      if (this.timer) {
+        clearTimeout(this.timer)
+      }
+    },
+    methods: {
+      // 按钮点击事件
+      handleClick(index) {
+        this.close()
+        this.$emit('click', {index: index})
+      },
+      // 点击悬浮按钮
+      fabClick() {
+        if (this.showFab) {
+          this.close()
+        } else {
+          // console.log(this.visibleSync);
+          if (this.visibleSync) {
+            this.visibleSync = false
+            return
+          }
+          this.open()
+        }
+      },
+      // 点击遮罩
+      clickMask() {
+        if (!this.showMask || !this.maskCloseable) return
+        this.close()
+      },
+      
+      open() {
+        this.change('visibleSync', 'showFab', true)
+        this.translateFabPosition()
+      },
+      close() {
+        this.change('showFab', 'visibleSync', false)
+        this.fabLeft = 0
+        this.fabRight = 0
+        this.fabBottom = 0
+      },
+      // 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+      // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+      change(param1, param2, status) {
+        this[param1] = status
+        if (status) {
+          // #ifdef H5 || MP
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            clearTimeout(this.timer)
+          }, 10)
+          // #endif
+          // #ifndef H5 || MP
+          this.$nextTick(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+          })
+          // #endif
+        } else {
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            clearTimeout(this.timer)
+          }, 250)
+        }
+      },
+      
+      /******************** 旋转动画相关函数 ********************/
+      // 获取按钮的信息
+      async getFabBtnRectInfo() {
+        const systemInfo = uni.getSystemInfoSync()
+        const btnRectInfo = await this._tGetRect('.tn-fab__item__btn--fab')
+        if (!btnRectInfo) {
+          setTimeout(() => {
+            this.getFabBtnRectInfo()
+          }, 10)
+          return
+        }
+        console.log(btnRectInfo);
+        this.systemInfo = {
+          width: systemInfo.windowWidth,
+          height: systemInfo.windowHeight
+        }
+        this.fabBtnInfo.width = btnRectInfo.width
+        this.fabBtnInfo.height = btnRectInfo.height
+        this.fabBtnInfo.left = btnRectInfo.left
+        this.fabBtnInfo.right = btnRectInfo.right
+        this.fabBtnInfo.bottom = btnRectInfo.bottom
+      },
+      // 更新悬浮按钮的位置
+      translateFabPosition() {
+        if (this.updateProps) {
+          this.getFabBtnRectInfo()
+          this.updateProps = false
+        }
+        if (this.animationType === 'up') return 
+        // 按钮组的宽度
+        const btnGroupWidth = this.fabBtnInfo.width + this.aroundBtnDistance + 10
+        // 判断当前按钮是在左边还是右边
+        if (this.left === 'auto' && btnGroupWidth > this.systemInfo.width - this.fabBtnInfo.right) {
+          // 距离不够需要移动
+          this.fabRight = btnGroupWidth + 'px'
+        } else if (this.right === 'auto' && btnGroupWidth > this.fabBtnInfo.left) {
+          this.fabLeft = btnGroupWidth + 'px'
+        }
+        
+        if (btnGroupWidth > this.systemInfo.height - this.fabBtnInfo.bottom) {
+          this.fabBottom = btnGroupWidth + 'px'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-fab {
+    &__box {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-direction: column;
+      position: fixed;
+      transition: all 0.25s ease-in-out;
+    }
+    
+    &--right {
+      align-items: flex-end;
+    }
+    
+    &__btns {
+      transition: all 0.25s cubic-bezier(0,.13,0,1.43);
+      transform-origin: 80% bottom;
+      
+      &__animation--up {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+      &__animation--around {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      
+      &--visible--up {
+        // visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+      }
+      &--visible--around {
+        // visibility: visible;
+        // opacity: 1;
+      }
+    }
+    
+    &__item {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-bottom: 20rpx;
+      
+      &__animation--around {
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition: transform 0.25s ease-in-out;
+        transform-origin: 50% 50%;
+        padding-bottom: 0 !important;
+      }
+      
+      &--left {
+        flex-flow: row-reverse;
+      }
+      
+      &__text {
+        &--left {
+          padding-left: 14rpx;
+        }
+        &--right {
+          padding-right: 14rpx;
+        }
+      }
+      
+      &__btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.07);
+        transition: all 0.2s linear;
+        
+        &--active {
+          animation-name: fab-button-animation;
+          animation-duration: 0.2s;
+          animation-timing-function: cubic-bezier(0,.13,0,1.43);
+        }
+        
+        &__title {
+          width: 90%;
+          text-align: center;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        &__icon {
+          text-align: center;
+          font-size: 64rpx;
+        }
+        
+        &__image {
+          display: block;
+        }
+      }
+    }
+    
+    &__mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: $tn-mask-bg-color;
+      transition: all 0.2s ease-in-out;
+      opacity: 0;
+      
+      &--visible {
+        opacity: 1;
+      }
+    }
+  }
+  
+  @keyframes fab-button-animation {
+    0% {
+      transform: scale(0.6);
+    }
+    // 20% {
+    //   transform: scale(1.8);
+    // }
+    // 40% {
+    //   transform: scale(0.4);
+    // }
+    // 50% {
+    //   transform: scale(1.4);
+    // }
+    // 80% {
+    //   transform: scale(0.8);
+    // }
+    100% {
+      transform: scale(1);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-form-item/tn-form-item.vue b/tuniao-ui/components/tn-form-item/tn-form-item.vue
new file mode 100644
index 0000000..9e9725c
--- /dev/null
+++ b/tuniao-ui/components/tn-form-item/tn-form-item.vue
@@ -0,0 +1,457 @@
+<template>
+  <view
+    class="tn-form-item-class tn-form-item"
+    :class="{
+      'tn-border-solid-bottom': elBorderBottom,
+      'tn-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')
+    }"
+  >
+    <view
+      class="tn-form-item__body"
+      :style="{
+        flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
+      }"
+    >
+      <!-- 处理微信小程序中设置属性的问题，不设置值的时候会变成true -->
+      <view
+        class="tn-form-item--left"
+        :style="{
+          width: wLabelWidth,
+          flex: `0 0 ${wLabelWidth}`,
+          marginBottom: elLabelPosition == 'left' ? 0 : '10rpx'
+        }"
+      >
+        <!-- 块对齐 -->
+        <view v-if="required || leftIcon || label" class="tn-form-item--left__content"
+          :style="[leftContentStyle]"
+        >
+          <!-- nvue不支持伪元素before -->
+          <view v-if="leftIcon" class="tn-form-item--left__content__icon">
+            <view :class="[`tn-icon-${leftIcon}`]" :style="leftIconStyle"></view>
+          </view>
+          <!-- <view
+            class="tn-form-item--left__content__label"
+            :style="[elLabelStyle, {
+              'justify-content': elLabelAlign === 'left' ? 'flex-satrt' : elLabelAlign === 'center' ? 'center' : 'flex-end'
+            }]"
+          >
+            {{label}}
+          </view> -->
+          <view
+            class="tn-form-item--left__content__label"
+            :style="[elLabelStyle]"
+          >
+            {{label}}
+          </view>
+          <text v-if="required" class="tn-form-item--left__content--required">*</text>
+        </view>
+      </view>
+      
+      <view class="tn-form-item--right tn-flex">
+        <view class="tn-form-item--right__content">
+          <view class="tn-form-item--right__content__slot">
+            <slot></slot>
+          </view>
+          <view v-if="$slots.right || rightIcon" class="tn-form-item--right__content__icon tn-flex">
+            <view v-if="rightIcon" :class="[`tn-icon-${rightIcon}`]" :style="rightIconStyle"></view>
+            <slot name="right"></slot>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <view
+      v-if="validateState === 'error' && showError('message')"
+      class="tn-form-item__message"
+      :style="{
+        paddingLeft: elLabelPosition === 'left' ? elLabelWidth + 'rpx' : '0'
+      }"
+    >
+      {{validateMessage}}
+    </view>
+  </view>
+</template>
+
+<script>
+  import Emitter from '../../libs/utils/emitter.js'
+  import schema from '../../libs/utils/async-validator.js'
+  // 去除警告信息
+  schema.warning = function() {}
+  
+  export default {
+    mixins: [Emitter],
+    name: 'tn-form-item',
+    inject: {
+      tnForm: {
+        default() {
+          return null
+        }
+      }
+    },
+    props: {
+      // label提示语
+      label: {
+        type: String,
+        default: ''
+      },
+      // 绑定的值
+      prop: {
+        type: String,
+        default: ''
+      },
+      // 是否显示表单域的下划线边框
+      borderBottom: {
+        type:Boolean,
+        default: true
+      },
+      // label(标签名称)的位置
+      // left - 左边
+      // top - 上边
+      labelPosition: {
+        type: String,
+        default: ''
+      },
+      // label的宽度
+      labelWidth: {
+        type: Number,
+        default: 0
+      },
+      // label的对齐方式
+      // left - 左对齐
+      // top - 上对齐
+      // right - 右对齐
+      // bottom - 下对齐
+      labelAlign: {
+        type: String,
+        default: ''
+      },
+      // label 的样式
+      labelStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 左侧图标
+      leftIcon: {
+        type: String,
+        default: ''
+      },
+      // 右侧图标
+      rightIcon: {
+        type: String,
+        default: ''
+      },
+      // 左侧图标样式
+      leftIconStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 右侧图标样式
+      rightIconStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示必填项的*，不做校验用途
+      required: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 处理微信小程序label的宽度
+      wLabelWidth() {
+        // 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto
+        return this.elLabelPosition === 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.elLabelWidth + 'rpx') : '100%'
+      },
+      // 是否显示错误提示
+      showError() {
+        return type => {
+          if (this.errorType.indexOf('none') >= 0) return false
+          else if (this.errorType.indexOf(type) >= 0) return true
+          else return false
+        }
+      },
+      // label的宽度(默认值为90)
+      elLabelWidth() {
+        return this.labelWidth != 0 ? this.labelWidth : (this.parentData.labelWidth != 0 ? this.parentData.labelWidth : 90)
+      },
+      // label的样式
+      elLabelStyle() {
+        return Object.keys(this.labelStyle).length ? this.labelStyle : (Object.keys(this.parentData.labelStyle).length ? this.parentData.labelStyle : {})
+      },
+      // label显示位置
+      elLabelPosition() {
+        return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition : 'left')
+      },
+      // label对齐方式
+      elLabelAlign() {
+        return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left')
+      },
+      // label下划线
+      elBorderBottom() {
+        return this.borderBottom !== '' ? this.borderBottom : (this.parentData.borderBottom !== '' ? this.parentData.borderBottom : true)
+      },
+      leftContentStyle() {
+        let style = {}
+        if (this.elLabelPosition === 'left') {
+          switch(this.elLabelAlign) {
+            case 'left':
+              style.justifyContent = 'flex-start'
+              break
+            case 'center':
+              style.justifyContent = 'center'
+              break
+            default:
+              style.justifyContent = 'flex-end'
+              break
+          }
+        }
+        
+        return style
+      }
+    },
+    data() {
+      return {
+        // 默认值
+        initialValue: '',
+        // 是否校验成功
+        validateState: '',
+        // 校验失败提示信息
+        validateMessage: '',
+        // 错误的提示方式（参考form组件）
+        errorType: ['message'],
+        // 当前子组件输入的值
+        fieldValue: '',
+        // 父组件的参数
+        // 由于再computed中无法得知this.parent的变化，所以放在data中
+        parentData: {
+          borderBottom: true,
+          labelWidth: 90,
+          labelPosition: 'left',
+          labelAlign: 'left',
+          labelStyle: {},
+        }
+      }
+    },
+    watch: {
+      validateState(val) {
+        this.broadcastInputError()
+      },
+      "tnForm.errorType"(val) {
+        this.errorType = val
+        this.broadcastInputError()
+      }
+    },
+    mounted() {
+      // 组件创建完成后，保存当前实例到form组件中
+      // 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用\
+      this.parent = this.$t.$parent.call(this, 'tn-form')
+      if (this.parent) {
+        // 遍历parentData属性，将parent中同名的属性赋值给parentData
+        Object.keys(this.parentData).map(key => {
+          this.parentData[key] = this.parent[key]
+        })
+        // 如果没有传入prop或者tnForm为空（单独使用form-item组件的时候），就不进行校验
+        if (this.prop) {
+          // 将本实例添加到父组件中
+          this.parent.fields.push(this)
+          this.errorType = this.parent.errorType
+          // 设置初始值
+          this.initialValue = this.fieldValue
+          // 添加表单校验，这里必须要写在$nextTick中，因为tn-form的rules是通过ref手动传入的
+          // 不在$nextTick中的话，可能会造成执行此处代码时，父组件还没通过ref把规则给tn-form，导致规则为空
+          this.$nextTick(() => {
+            this.setRules()
+          })
+        }
+      }
+    },
+    beforeDestroy() {
+      // 组件销毁前，将实例从tn-form的缓存中移除
+      // 如果当前没有prop的话表示当前不进行删除
+      if (this.parent && this.prop) {
+        this.parent.fields.map((item, index) => {
+          if (item === this) this.parent.fields.splice(index, 1)
+        })
+      }
+    },
+    methods: {
+      // 向input组件发出错误事件
+      broadcastInputError() {
+        this.broadcast('tn-input', 'on-form-item-error', this.validateState === 'error' && this.showError('border'))
+      },
+      // 设置校验规则
+      setRules() {
+        let that = this
+        // 从父组件tn-form拿到当前tn-form-item需要验证 的规则
+        // let rules = this.getRules()
+        // if (rules.length) {
+        // 	this.isRequired = rules.some(rule => {
+        // 		// 如果有必填项，就返回，没有的话，就是undefined
+        // 		return rule.required
+        // 	})
+        // }
+        
+        // blur事件
+        this.$on('on-form-blur', that.onFieldBlur)
+        // change事件
+        this.$on('on-form-change', that.onFieldChange)
+      },
+      // 从form的rules属性中取出当前form-item的校验规则
+      getRules() {
+        let rules = this.parent.rules
+        rules = rules ? rules[this.prop] : []
+        
+        // 返回数值形式的值
+        return [].concat(rules || [])
+      },
+      // blur事件时进行表单认证
+      onFieldBlur() {
+        this.validation('blur')
+      },
+      // change事件时进行表单认证
+      onFieldChange() {
+        this.validation('change')
+      },
+      // 过滤出符合要求的rule规则
+      getFilterRule(triggerType = '') {
+        let rules = this.getRules()
+        // 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证
+        if (!triggerType) return rules
+        // 某些场景可能的判断规则，可能不存在trigger属性，故先判断是否存在此属性
+        // 历遍判断规则是否有对应的事件，比如blur，change触发等的事件
+        // 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如['blur','change']
+        return rules.filter(rule => rule.trigger && rule.trigger.indexOf(triggerType) !== -1)
+      },
+      // 校验数据
+      validation(trigger, callback = ()=>{}) {
+        // 校验之前先获取需要校验的值
+        this.fieldValue = this.parent.model[this.prop]
+        // blur和change是否有当前方式的校验规则
+        let rules = this.getFilterRule(trigger)
+        // 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件tn-form会因为
+        // 对count变量的统计错误而无法进入上一层的回调 
+        if (!rules || rules.length === 0) {
+          return callback('')
+        }
+        // 设置当前为校验中
+        this.validateState = 'validating'
+        // 调用async-validator的方法
+        let validator = new schema({
+          [this.prop]: rules
+        })
+        validator.validate({
+          [this.prop]: this.fieldValue
+        }, {
+          firstFields: true
+        }, (errors, fields) => {
+          // 记录状态和报错信息
+          this.validateState = !errors ? 'success' : 'error'
+          this.validateMessage = errors ? errors[0].message : ''
+          
+          callback(this.validateMessage)
+        })
+      },
+      
+      // 清空当前item信息
+      resetField() {
+        this.parent.model[this.prop] = this.initialValue
+        // 清空错误标记
+        this.validateState = 'success'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-form-item {
+    display: flex;
+    flex-direction: column;
+    padding: 20rpx 0;
+    font-size: 28rpx;
+    color: $tn-font-color;
+    box-sizing: border-box;
+    line-height: $tn-form-item-height;
+    
+    &__border-bottom--error:after {
+      border-color: $tn-color-red;
+    }
+    
+    &__body {
+      display: flex;
+      flex-direction: row;
+    }
+    
+    &--left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      
+      &__content {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        align-items: center;
+        padding-right: 18rpx;
+        flex: 1;
+        
+        &--required {
+          position: relative;
+          right: 0;
+          vertical-align: middle;
+          color: $tn-color-red;
+        }
+        
+        &__icon {
+          color: $tn-font-sub-color;
+          margin-right: 8rpx;
+        }
+        
+        &__label {
+          // display: flex;
+          // flex-direction: row;
+          // align-items: center;
+          // flex: 1;
+        }
+      }
+    }
+    
+    &--right {
+      flex: 1;
+      
+      &__content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex: 1;
+        
+        &__slot {
+          flex: 1;
+          /* #ifndef MP */
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          /* #endif */
+        }
+        
+        &__icon {
+          margin-left: 10rpx;
+          color: $tn-font-sub-color;
+          font-size: 30rpx;
+        }
+      }
+    }
+    
+    &__message {
+      font-size: 24rpx;
+      line-height: 24rpx;
+      color: $tn-color-red;
+      margin-top: 12rpx;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-form/tn-form.vue b/tuniao-ui/components/tn-form/tn-form.vue
new file mode 100644
index 0000000..f0ebf19
--- /dev/null
+++ b/tuniao-ui/components/tn-form/tn-form.vue
@@ -0,0 +1,139 @@
+<template>
+  <view class="tn-form-class tn-form">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-form',
+    props: {
+      // 表单数据对象（需要验证的表单数据）
+      model: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 发生错误时的提示方式
+      // toast - 弹出toast框
+      // message - 提示信息
+      // border - 如果设置了边框，边框会变成红色
+      // border-bottom - 下边框会呈现红色
+      // none - 无提示
+      errorType: {
+        type: Array,
+        default() {
+          return ['message', 'toast']
+        }
+      },
+      // 是否显示表单域的下划线边框
+      borderBottom: {
+        type:Boolean,
+        default: true
+      },
+      // label(标签名称)的位置
+      // left - 左边
+      // top - 上边
+      labelPosition: {
+        type: String,
+        default: 'left'
+      },
+      // label的宽度
+      labelWidth: {
+        type: Number,
+        default: 90
+      },
+      // label的对齐方式
+      // left - 左对齐
+      // center - 居中对齐
+      // right - 右对齐
+      labelAlign: {
+        type: String,
+        default: 'left'
+      },
+      // label 的样式
+      labelStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    // 向子孙传递数据
+    provide() {
+      return {
+        tnForm: this
+      }
+    },
+    data() {
+      return {
+        rules: {}
+      }
+    },
+    created() {
+      // 存储当前form下的所有form-item的实例
+      // 不能定义再data中，否则小程序会循环引用而报错
+      this.fields = []
+    },
+    methods: {
+      /**
+       * 设置规则
+       * 
+       * @param {Object} rules
+       */
+      setRules(rules) {
+        this.rules = rules
+      },
+      /**
+       * 清空form-item组件
+       */
+      resetFields() {
+        this.fields.map(field => {
+          field.resetField()
+        })
+      },
+      /**
+       * 校验数据
+       * @param {Object} callback 校验回调方法
+       */
+      validate(callback) {
+        return new Promise(resolve => {
+          // 标记校验是否通过
+          let valid = true
+          // 标记是否检查完毕
+          let count = 0
+          // 存放错误信息
+          let errors = []
+          
+          // 对所有form-item进行校验
+          this.fields.map(field => {
+            // 调用对应form-item实例的validation校验方法
+            field.validation('', error => {
+              // 如果有一个form-item校验不通过，则整个表单校验不通过
+              if (error) {
+                valid = false
+                errors.push(error)
+              }
+              // 当遍历完所有的form-item的校验规则，返回信息
+              if (++count === this.fields.length) {
+                resolve(valid)
+                // 判断是否设置了toast的提示方式，只提示表单域中最前面的一条错误信息
+                if (this.errorType.indexOf('none') === -1 && 
+                    this.errorType.indexOf('toast') >= 0 &&
+                    errors.length > 0) {
+                  this.$t.message.toast(errors[0])
+                }
+                // 调用回调方法
+                if (typeof callback == 'function') callback(valid)
+              }
+            })
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue b/tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue
new file mode 100644
index 0000000..dabb6f1
--- /dev/null
+++ b/tuniao-ui/components/tn-goods-nav/tn-goods-nav.vue
@@ -0,0 +1,388 @@
+<template>
+  <view
+    class="tn-goods-nav-class tn-goods-nav"
+    :class="[
+      backgroundColorClass,
+      {
+        'tn-goods-nav--fixed': fixed,
+        'tn-safe-area-inset-bottom': safeAreaInsetBottom,
+        'tn-goods-nav--shadow': shadow
+      }
+    ]"
+    :style="[backgroundColorStyle, navStyle]"
+  >
+    <view class="options">
+      <view
+        v-for="(item, index) in optionsData"
+        :key="index"
+        class="options__item"
+        :class="[{'options__item--avatar': item.showAvatar}]"
+        @tap="handleOptionClick(index)"
+      >
+        <block v-if="item.showAvatar">
+          <tn-avatar
+            :src="item.avatar"
+            size="sm"
+            :badge="item.showBadge"
+            :badgeText="item.count"
+            :badgeBgColor="item.countBackgroundColor"
+            :badgeColor="item.countFontColor"
+            :badgeSize="26"
+          ></tn-avatar>
+        </block>
+        <block v-else>
+          <view class="options__item__icon" :class="[`tn-icon-${item.icon}`]" :style="[optionStyle(index, 'icon')]">
+            <tn-badge v-if="item.showBadge" :absolute="true" :backgroundColor="item.countBackgroundColor" :fontColor="item.countFontColor" :fontSize="16" padding="2rpx 5rpx">{{ item.count }}</tn-badge>
+          </view>
+          <view class="options__item__text" :style="[optionStyle(index, 'text')]">{{ item.text }}</view>
+        </block>
+      </view>
+    </view>
+    <view class="buttons">
+      <view
+        v-for="(item, index) in buttonGroupsData"
+        :key="index"
+        class="buttons__item"
+        :class="[buttonClass(index)]"
+        :style="[buttonStyle(index)]"
+        @tap="handleButtonClick(index)"
+      >
+        <view class="buttons__item__text">{{ item.text }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(zh, en) {
+    return getCurrentLanguage() === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-goods-nav',
+    props: {
+      // 选项信息
+      // 建议不超过3个
+      // {
+      //   icon: '', // 图标名称
+      //   text: '', // 显示的文本
+      //   count: '', // 角标的值
+      //   countBackgroundColor: '', // 角标背景颜色
+      //   countFontColor: '', // 角标字体颜色
+      //   iconColor: '', // 图标颜色
+      //   textColor: '', // 文本颜色
+      //   avatar: '', // 显示头像（此时将不显示图标和文本）
+      // }
+      options: {
+        type: Array,
+        default() {
+          return [{
+            icon: 'shop',
+            text: getLocalizedText('店铺', 'Shop')
+          },{
+            icon: 'service',
+            text: getLocalizedText('客服', 'Service')
+          },{
+            icon: 'star',
+            text: getLocalizedText('收藏', 'Favorite')
+          }]
+        }
+      },
+      // 按钮组
+      // 建议不超过2个
+      // {
+      //   text: '', // 显示的文本
+      //   backgroundColor: '', // 按钮背景颜色
+      //   color: '' // 文本颜色
+      // }
+      buttonGroups: {
+        type: Array,
+        default() {
+          return [{
+            text: getLocalizedText('加入购物车', 'Add to Cart'),
+            backgroundColor: '#FFA726',
+            color: '#FFFFFF'
+          },{
+            text: getLocalizedText('结算', 'Checkout'),
+            backgroundColor: '#FF7043',
+            color: '#FFFFFF'
+          }]
+        }
+      },
+      // 背景颜色
+      backgroundColor: {
+        type: String,
+        default: ''
+      },
+      // 导航的高度，单位rpx
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 显示阴影
+      shadow: {
+        type: Boolean,
+        default: false
+      },
+      // 导航的层级
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 按钮类型
+      // rect -> 方形 paddingRect -> 上下带边距方形 round -> 圆角
+      buttonType: {
+        type: String,
+        default: 'rect'
+      },
+      // 是否固定在底部
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      }
+    },
+    computed: {
+      backgroundColorStyle() {
+        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
+      },
+      backgroundColorClass() {
+        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
+      },
+      navStyle() {
+        let style = {}
+        if (this.height) {
+          style.height = this.height + 'rpx'
+        }
+        style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.goodsNav
+        return style
+      },
+      // 选项style
+      optionStyle() {
+        return (index, type) => {
+          let style = {}
+          const item = this.optionsData[index]
+          if (type === 'icon' && item.iconColor) {
+            style.color = item.iconColor
+          } else if (type === 'text' && item.fontColor) {
+            style.color = item.fontColor
+          }
+          return style
+        }
+      },
+      // 按钮class
+      buttonClass() {
+        return (index) => {
+          let clazz = ''
+          const item = this.buttonGroupsData[index]
+          if (item.backgroundColorClass) {
+            clazz += ` ${item.backgroundColorClass}`
+          }
+          if (item.colorClass) {
+            clazz += ` ${item.colorClass}`
+          }
+          
+          clazz += ` buttons__item--${this.$t.string.humpConvertChar(this.buttonType, '-')}`
+          
+          return clazz
+        }
+      },
+      // 按钮style
+      buttonStyle() {
+        return (index) => {
+          let style = {}
+          const item = this.buttonGroupsData[index]
+          if (item.backgroundColorStyle) {
+            style.backgroundColor = item.backgroundColorStyle
+          }
+          if (item.colorStyle) {
+            style.color = item.colorStyle
+          }
+          return style
+        }
+      }
+    },
+    watch: {
+      options(val) {
+        this.initData()
+      },
+      buttonGroups(val) {
+        this.initData()
+      }
+    },
+    data() {
+      return {
+        // 保存选项数据
+        optionsData: [],
+        // 保存按钮组数据
+        buttonGroupsData: []
+      }
+    },
+    created() {
+      this.initData()
+    },
+    methods: {
+      // 初始化选项和按钮数据
+      initData() {
+        this.handleOptionsData()
+        this.handleButtonGroupsData()
+      },
+      // 选项点击事件
+      handleOptionClick(index) {
+        this.$emit('optionClick', {
+          index: index
+        })
+      },
+      // 按钮点击事件
+      handleButtonClick(index) {
+        this.$emit('buttonClick', {
+          index: index
+        })
+      },
+      // 处理选项组数据
+      handleOptionsData() {
+        this.optionsData = this.options.map((item) => {
+          let option = {...item}
+          option.showAvatar = item.hasOwnProperty('avatar')
+          if (item.hasOwnProperty('count')) {
+            const count = this.$t.number.formatNumberString(item.count, 2)
+            option.showBadge = true
+            option.count = typeof count === 'number' ? String(count) : count
+            option.countBackgroundColor = item.countBackgroundColor ? item.countBackgroundColor : '#01BEFF'
+            option.countFontColor = item.countFontColor ? item.countFontColor : '#FFFFFF'
+          }
+          
+          return option
+        })
+      },
+      // 处理按钮组数据
+      handleButtonGroupsData() {
+        this.buttonGroupsData = this.buttonGroups.map((item) => {
+          let button = {...item}
+          if (item.hasOwnProperty('backgroundColor')) {
+            button.backgroundColorClass = this.$t.color.getBackgroundColorInternalClass(item.backgroundColor)
+            button.backgroundColorStyle = this.$t.color.getBackgroundColorStyle(item.backgroundColor)
+          }
+          if (item.hasOwnProperty('color')) {
+            button.colorClass = this.$t.color.getBackgroundColorInternalClass(item.color)
+            button.colorStyle = this.$t.color.getBackgroundColorStyle(item.color)
+          }
+          return button
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-goods-nav {
+    background-color: #FFFFFF;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 88rpx;
+    width: 100%;
+    box-sizing: content-box;
+    
+    &--shadow {
+      box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
+      
+      &::before {
+        content: " ";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        background-color: transparent;
+        z-index: -1;
+      }
+    }
+    
+    &--fixed {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    
+    .options {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 100%;
+      color: #AAAAAA;
+      
+      &__item {
+        padding: 0 26rpx;
+        
+        &--avatar {
+          padding: 0rpx 0rpx 0rpx 26rpx !important;
+        }
+        
+        &__icon {
+          position: relative;
+          font-size: 36rpx;
+          margin-bottom: 6rpx;
+        }
+        
+        &__text {
+          font-size: 22rpx;
+        }
+      }
+    }
+    
+    .buttons {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 100%;
+      
+      &__item {
+        flex: 1;
+        padding: 0 10rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &--rect {
+          height: 100%;
+        }
+        
+        &--padding-rect {
+          height: 80%;
+        }
+        
+        &--round {
+          height: 75%;
+          &:first-child {
+            border-top-left-radius: 100rpx;
+            border-bottom-left-radius: 100rpx;
+          }
+          &:last-child {
+            border-top-right-radius: 100rpx;
+            border-bottom-right-radius: 100rpx;
+          }
+        }
+        
+        &__text {
+          display: inline-block;
+          font-weight: bold;
+          font-size: 30rpx;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-grid-item/tn-grid-item.vue b/tuniao-ui/components/tn-grid-item/tn-grid-item.vue
new file mode 100644
index 0000000..2837bc2
--- /dev/null
+++ b/tuniao-ui/components/tn-grid-item/tn-grid-item.vue
@@ -0,0 +1,114 @@
+<template>
+  <view
+    class="tn-grid-item-class tn-grid-item"
+    :class="[
+      backgroundColorClass
+    ]"
+    :hover-class="hoverClass"
+    :hover-stay-time="150"
+    :style="{
+      backgroundColor: backgroundColorStyle,
+      width: gridWidth
+    }"
+    @tap="click"
+  >
+    <view
+      class="tn-grid-item__box"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    name: 'tn-grid-item',
+    props: {
+      // 序号
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    data() {
+      return {
+        // 父组件数据
+        parentData: {
+          // 按下去的样式
+          hoverClass: '',
+          col: 3
+        }
+      }
+    },
+    created() {
+      // 父组件实例
+      this.updateParentData()
+      this.parent.children.push(this)
+    },
+    computed: {
+      // 计算每个宫格的宽度
+      gridWidth() {
+        // #ifdef MP-WEIXIN
+        return '100%'
+        // #endif
+        // #ifndef MP-WEIXIN
+        return 100 / Number(this.parentData.col) + '%'
+        // #endif
+      },
+      // 点击效果
+      hoverClass() {
+        return this.parentData.hoverClass !== 'none' 
+                 ? this.parentData.hoverClass + ' tn-grid-item--hover' 
+                 : this.parentData.hoverClass
+      }
+    },
+    methods: {
+      // 获取父组件参数
+      updateParentData() {
+        this.getParentData('tn-grid')
+      },
+      click() {
+        this.$emit('click', this.index)
+        this.parent && this.parent.click(this.index)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-grid-item {
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    flex-direction: row;
+    /* #endif */
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-direction: column;
+    
+    /* #ifdef MP */
+    // float: left;
+    /* #endif */
+    
+    &__box {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      flex-direction: row;
+      /* #endif */
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+    
+    &--hover {
+      background: $tn-space-color !important;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-grid/tn-grid.vue b/tuniao-ui/components/tn-grid/tn-grid.vue
new file mode 100644
index 0000000..f5487c6
--- /dev/null
+++ b/tuniao-ui/components/tn-grid/tn-grid.vue
@@ -0,0 +1,111 @@
+<template>
+  <view
+    class="tn-grid-class tn-grid"
+    :style="{
+      justifyContent: gridAlignStyle
+    }"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-grid',
+    props: {
+      // 分成几列
+      col: {
+        type: [Number, String],
+        default: 3
+      },
+      // 宫格对齐方式 
+      // left 左对齐 center 居中对齐 right 右对齐
+      align: {
+        type: String,
+        default: 'left'
+      },
+      // 点击时的效果，none没有效果
+      hoverClass: {
+        type: String,
+        default: 'tn-hover'
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      // 当父组件和子组件需要共享参数变化，通知子组件
+      parentData() {
+        if (this.children.length) {
+          this.children.map(child => {
+            // 判断子组件是否有updateParentData方式，有才执行
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    },
+    created() {
+      // 如果将children定义在data中，在微信小程序会造成循环引用而报错
+      this.children = []
+    },
+    computed: {
+      // 计算父组件的值是否发生变化
+      parentData() {
+        return [this.hoverClass, this.col, this.border]
+      },
+      // 宫格对齐方式
+      gridAlignStyle() {
+        switch(this.align) {
+          case 'left':
+            return 'flex-start'
+          case 'center':
+            return 'center'
+          case 'right':
+            return 'flex-end'
+          default:
+            return 'flex-start'
+        }
+      }
+    },
+    methods: {
+      click(index) {
+        this.$emit('click', index)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  // 组件中兼容小程序的方式，不过不能使用对齐方式
+  // .tn-grid {
+  //   width: 100%;
+  //   /* #ifdef MP */
+  //   position: relative;
+  //   box-sizing: border-box;
+  //   overflow: hidden;
+  //   /* #endif */
+    
+  //   /* #ifndef MP */
+  //   /* #ifndef APP-NVUE */
+  //   display: flex;
+  //   flex-direction: row;
+  //   /* #endif */
+  //   flex-wrap: wrap;
+  //   align-items: center;
+  //   /* #endif */
+  // }
+  
+  // 在使用组件时兼容小程序
+  .tn-grid {
+    width: 100%;
+    
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue b/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue
new file mode 100644
index 0000000..0163ca3
--- /dev/null
+++ b/tuniao-ui/components/tn-image-upload-drag/tn-image-upload-drag.vue
@@ -0,0 +1,1047 @@
+<template>
+  <view v-if="!disabled" class="tn-image-upload-class tn-image-upload">
+    <movable-area
+      class="tn-image-upload__movable-area"
+      :style="{
+        height: movableAreaHeight
+      }"
+      @mouseenter="mouseEnterArea"
+      @mouseleave="mouseLeaveArea"
+       v-if="show"
+    >
+      <block
+        v-for="(item, index) in lists"
+        :key="item.id"
+      >
+        <movable-view
+          class="tn-image-upload__movable-view"
+          :style="{
+            width: $t.string.getLengthUnitValue(width),
+            height: $t.string.getLengthUnitValue(height),
+            zIndex: item.zIndex,
+            opacity: item.opacity,
+            
+          }"
+          :x="item.x"
+          :y="item.y"
+          direction="all"
+          :damping="40"
+          :disabled="item.disabled"
+          @change="movableChange($event, item)"
+          @touchstart="movableStart(item)"
+          @mousedown="movableStart(item)"
+          @touchend="movableEnd(item)"
+          @mouseup="movableEnd(item)"
+          @longpress="movableLongPress(item)"
+        >
+          <view
+            class="tn-image-upload__item tn-image-upload__item-preview"
+            :style="{
+              width: $t.string.getLengthUnitValue(itemWidth, 'px'),
+              height: $t.string.getLengthUnitValue(itemHeight, 'px'),
+              transform: `scale(${item.scale})`
+            }"
+          >
+            <!-- 删除按钮 -->
+            <view
+              v-if="deleteable"
+              class="tn-image-upload__item-preview__delete"
+              @tap.stop="deleteItem(index)"
+              :style="{
+                borderTopColor: deleteBackgroundColor
+              }"
+            >
+              <view
+                class="tn-image-upload__item-preview__delete--icon"
+                :class="[`tn-icon-${deleteIcon}`]"
+                :style="{
+                  color: deleteColor
+                }"
+              ></view>
+            </view>
+            <!-- 进度条 -->
+            <tn-line-progress
+              v-if="showProgress && item.data.progress > 0 && !item.data.error"
+              class="tn-image-upload__item-preview__progress"
+              :percent="item.data.progress"
+              :showPercent="false"
+              :round="false"
+              :height="8"
+            ></tn-line-progress>
+            <!-- 重试按钮 -->
+            <view v-if="item.data.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">{{ t('retry') }}</view>
+            <!-- 图片信息 -->
+            <image
+              class="tn-image-upload__item-preview__image"
+              :src="item.data.url || item.data.path"
+              :mode="imageMode"
+              @tap.stop="doPreviewImage(item.data.url || item.data.path, index)"
+            ></image>
+          </view>
+        </movable-view>
+      </block>
+      
+      <!-- 添加按钮 -->
+      <view
+        v-if="maxCount > lists.length"
+        class="tn-image-upload__add"
+        :style="{
+          top: addBtn.y + 'px',
+          left: addBtn.x + 'px',
+          width: $t.string.getLengthUnitValue(itemWidth, 'px'),
+          height: $t.string.getLengthUnitValue(itemHeight, 'px')
+        }"
+        @tap="selectFile"
+      >
+        <!-- 添加按钮 -->
+        <view
+          class="tn-image-upload__item tn-image-upload__item-add"
+          hover-class="tn-hover-class"
+          hover-stay-time="150"
+          :style="{
+            width: $t.string.getLengthUnitValue(itemWidth, 'px'),
+            height: $t.string.getLengthUnitValue(itemHeight, 'px')
+          }"
+        >
+          <view class="tn-image-upload__item-add--icon tn-icon-add"></view>
+          <view class="tn-image-upload__item-add__tips">{{ resolvedUploadText }}</view>
+        </view>
+      </view>
+    </movable-area>
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-image-upload-drag',
+    props: {
+      // 已上传的文件列表
+      fileList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 上传图片地址
+      action: {
+        type: String,
+        default: ''
+      },
+      // 上传文件的字段名称
+      name: {
+        type: String,
+        default: 'file'
+      },
+      // 头部信息
+      header: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 携带的参数
+      formData: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自动上传
+      autoUpload: {
+        type: Boolean,
+        default: true
+      },
+      // 最大上传数量
+      maxCount: {
+        type: Number,
+        default: 9
+      },
+      // 预览上传图片的裁剪模式
+      imageMode: {
+        type: String,
+        default: 'aspectFill'
+      },
+      // 点击图片是否全屏预览
+      previewFullImage: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示进度条
+      showProgress: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示删除按钮
+      deleteable: {
+        type: Boolean,
+        default: true
+      },
+      // 删除按钮图标
+      deleteIcon: {
+        type: String,
+        default: 'close'
+      },
+      // 删除按钮的背景颜色
+      deleteBackgroundColor: {
+        type: String,
+        default: ''
+      },
+      // 删除按钮的颜色
+      deleteColor: {
+        type: String,
+        default: ''
+      },
+      // 上传区域提示文字
+      uploadText: {
+        type: String,
+        default: ''
+      },
+      // 显示toast提示
+      showTips: {
+        type: Boolean,
+        default: true
+      },
+      // 预览图片和选择图片区域的宽度
+      width: {
+        type: Number,
+        default: 200
+      },
+      // 预览图片和选择图片区域的高度
+      height: {
+        type: Number,
+        default: 200
+      },
+      // 选择图片的尺寸
+      // 参考上传文档 https://uniapp.dcloud.io/api/media/image
+      sizeType: {
+        type: Array,
+        default() {
+          return ['original', 'compressed']
+        }
+      },
+      // 图片来源
+      sourceType: {
+        type: Array,
+        default() {
+          return ['album', 'camera']
+        }
+      },
+      // 是否可以多选
+      multiple: {
+        type: Boolean,
+        default: true
+      },
+      // 文件大小(byte)
+      maxSize: {
+        type: Number,
+        default: 10 * 1024 * 1024
+      },
+      // 允许上传的类型
+      limitType: {
+        type: Array,
+        default() {
+          return ['png','jpg','jpeg','webp','gif','image']
+        }
+      },
+      // 是否自定转换为json
+      toJson: {
+        type: Boolean,
+        default: true
+      },
+      // 上传前钩子函数，每个文件上传前都会执行
+      beforeUpload: {
+        type: Function,
+        default: null
+      },
+      // 删除文件前钩子函数
+      beforeRemove: {
+        type: Function,
+        default: null
+      },
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    computed: {
+      resolvedUploadText() {
+        return this.uploadText || this.t('uploadText')
+      },
+      movableAreaHeight() {
+        if (this.lists.length < this.maxCount) {
+          return Math.ceil((this.lists.length + 1) / this.baseData.columns) * uni.upx2px(this.height) + 'px'
+        } else {
+          return Math.ceil(this.lists.length / this.baseData.columns) * uni.upx2px(this.height) + 'px'
+        }
+      },
+      itemWidth() {
+        return uni.upx2px(this.width) - (uni.upx2px(10) * 2)
+      },
+      itemHeight() {
+        return uni.upx2px(this.height) - (uni.upx2px(10) * 2)
+      }
+    },
+    data() {
+      return {
+        lists: [],
+        uploading: false,
+        baseData: {
+          windowWidth: 0,
+          columns: 0,
+          dragItem: null,
+          widthPx: 0,
+          heightPx: 0
+        },
+        addBtn: {
+          x: 0,
+          y: 0
+        },
+        timer: null,
+        dragging: false,
+        show: true,
+        i18n: {
+          zh: {
+            retry: '点击重试',
+            uploadText: '选择图片',
+            fileTooLarge: '超出可允许文件大小',
+            fileCountExceeded: '超出最大允许的文件数',
+            reuploading: '重新上传',
+            missingAction: '请配置上传地址',
+            uploadFailed: '上传失败，请重试',
+            dialogTitle: '提示',
+            confirmDelete: '您确定要删除吗？',
+            deleteInterrupted: '删除操作被中断',
+            deleteSuccess: '删除成功',
+            previewFailed: '预览图片失败',
+            unsupportedFile: '不支持{ext}格式的文件'
+          },
+          en: {
+            retry: 'Retry',
+            uploadText: 'Select Image',
+            fileTooLarge: 'File exceeds the allowed size',
+            fileCountExceeded: 'Exceeded the maximum file count',
+            reuploading: 'Re-uploading',
+            missingAction: 'Please configure the upload URL',
+            uploadFailed: 'Upload failed, please try again',
+            dialogTitle: 'Notice',
+            confirmDelete: 'Are you sure you want to delete this image?',
+            deleteInterrupted: 'Delete action was interrupted',
+            deleteSuccess: 'Deleted successfully',
+            previewFailed: 'Preview failed',
+            unsupportedFile: '.{ext} files are not supported'
+          }
+        }
+      }
+    },
+    watch: {
+      // fileList: {
+      //   handler(val) {
+      //     val.map(value => {
+      //       // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，
+      //       // 会触发watch，导致重新把原来的图片再次添加到this.lists
+      //       // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
+      //       let tmp = this.lists.some(listVal => {
+      //         return listVal.url === value.url
+      //       })
+      //       // 如果内部没有这张图片，则添加到内部
+      //       !tmp && this.lists.push({ url: value.url, error: false, progress: 100 })
+      //     })
+      //   },
+      //   immediate: true
+      // },
+      lists(val) {
+        this.$emit('on-list-change', this.sortList(), this.index)
+      }
+    },
+    created() {
+      this.baseData.windowWidth = uni.getSystemInfoSync().windowWidth
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.updateDragInfo()
+      })
+    },
+    methods: {
+      t(key, params = {}) {
+        return this.$translate(this.i18n, key, params)
+      },
+      // 清除列表
+      clear() {
+        this.lists = []
+        this.updateAddBtnPositioin()
+      },
+      // 重新上传队列中上传失败所有文件
+      reUpload() {
+        this.uploadFile()
+      },
+      // 选择图片
+      selectFile() {
+        if (this.disabled) return
+        const {
+          name = '',
+          maxCount,
+          multiple,
+          maxSize,
+          sizeType,
+          lists,
+          camera,
+          compressed,
+          sourceType
+        } = this
+        let chooseFile = null
+        const newMaxCount = maxCount - lists.length
+        // 只选择图片的时候使用 chooseImage 来实现
+        chooseFile = new Promise((resolve, reject) => {
+          uni.chooseImage({
+            count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
+            sourceType,
+            sizeType,
+            success: resolve,
+            fail: reject
+          })
+        })
+        chooseFile.then(res => {
+          let file = null
+          let listOldLength = lists.length
+          res.tempFiles.map((val, index) => {
+            if (!this.checkFileExt(val)) return
+            
+            // 是否超出最大限制数量
+            if (!multiple && index >= 1) return
+            if (val.size > maxSize) {
+              this.$emit('on-oversize', val, this.sortList(), this.index)
+              this.showToast(this.t('fileTooLarge'))
+            } else {
+              if (maxCount <= lists.length) {
+                this.$emit('on-exceed', val, this.sortList(), this.index)
+                this.showToast(this.t('fileCountExceeded'))
+                return
+              }
+              lists.push(this.handleDragListItem({
+                url: val.path,
+                progress: 0,
+                error: false,
+                file: val
+              }))
+              this.updateAddBtnPositioin()
+            }
+          })
+          this.$emit('on-choose-complete', this.sortList(), this.index)
+          if (this.autoUpload) this.uploadFile(listOldLength)
+        }).catch(err => {
+          this.$emit('on-choose-fail', err)
+        })
+      },
+      // 提示用户信息
+      showToast(message, force = false) {
+        if (this.showTips || force) {
+          this.$t.message.toast(message)
+        }
+      },
+      // 手动上传，通过ref进行调用
+      upload() {
+        this.uploadFile()
+      },
+      // 对失败图片进行再次上传
+      retry(index) {
+        this.lists[index].data.progress = 0
+        this.lists[index].data.error = false
+        this.lists[index].data.response = null
+        this.$t.message.loading(this.t('reuploading'))
+        this.uploadFile(index)
+      },
+      // 上传文件
+      async uploadFile(index = 0) {
+        if (this.disabled) return
+        if (this.uploading) return
+        // 全部上传完成
+        if (index >= this.lists.length) {
+          this.$emit('on-uploaded', this.sortList(), this.index)
+          return
+        }
+        // 检查是否已经全部上传或者上传中
+        if (this.lists[index].data.progress === 100) {
+          this.lists[index].data.uploadTask = null
+          if (this.autoUpload) this.uploadFile(index + 1)
+          return
+        }
+        // 执行before-upload钩子
+        if (this.beforeUpload && typeof(this.beforeUpload) === 'function') {
+          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
+          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
+          // 因为upload组件可能会被嵌套在其他组件内，比如tn-form，这时this.$parent其实为tn-form的this，
+          // 非页面的this，所以这里需要往上历遍，一直寻找到最顶端的$parent，这里用了this.$u.$parent.call(this)
+          let beforeResponse = this.beforeUpload.bind(this.$t.$parent.call(this))(index, this.lists)
+          // 判断是否返回了Promise
+          if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+            await beforeResponse.then(res => {
+              // promise返回成功，不进行操作继续
+            }).catch(err => {
+              // 进入catch回调的话，继续下一张
+              return this.uploadFile(index + 1)
+            })
+          } else if (beforeResponse === false) {
+            // 如果返回flase，继续下一张图片上传
+            return this.uploadFile(index + 1)
+          } else {
+            // 为true的情况，不进行操作
+          }
+        }
+        // 检查上传地址
+        if (!this.action) {
+          this.showToast(this.t('missingAction'), true)
+          return
+        }
+        this.lists[index].data.error = false
+        this.uploading = true
+        // 创建上传对象
+        const task = uni.uploadFile({
+          url: this.action,
+          filePath: this.lists[index].data.url,
+          name: this.name,
+          formData: this.formData,
+          header: this.header,
+          success: res => {
+            // 判断啊是否为json字符串，将其转换为json格式
+            let data = this.toJson && this.$t.test.jsonString(res.data) ? JSON.parse(res.data) : res.data
+            if (![200, 201, 204].includes(res.statusCode)) {
+              this.uploadError(index, data)
+            } else {
+              this.lists[index].data.response = data
+              this.lists[index].data.progress = 100
+              this.lists[index].data.error = false
+              this.$emit('on-success', data, index, this.sortList(), this.index)
+            }
+          },
+          fail: err => {
+            this.uploadError(index, err)
+          },
+          complete: res => {
+            this.$t.message.closeLoading()
+            this.uploading = false
+            this.uploadFile(index + 1)
+            this.$emit('on-change', res, index, this.sortList(), this.index)
+          }
+        })
+        this.lists[index].uploadTask = task
+        task.onProgressUpdate(res => {
+          if (res.progress > 0) {
+            this.lists[index].data.progress = res.progress
+            this.$emit('on-progress', res, index, this.sortList(), this.index)
+          }
+        })
+      },
+      // 上传失败
+      uploadError(index, err) {
+        this.lists[index].data.progress = 0
+        this.lists[index].data.error = true
+        this.lists[index].data.response = null
+        this.showToast(this.t('uploadFailed'))
+        this.$emit('on-error', err, index, this.sortList(), this.index)
+      },
+      // 删除一个图片
+      deleteItem(index) {
+        if (!this.deleteable) return
+        this.$t.message.modal(
+          this.t('dialogTitle'),
+          this.t('confirmDelete'),
+          async () => {
+            // 先检查是否有定义before-remove移除前钩子
+            // 执行before-remove钩子
+            if (this.beforeRemove && typeof(this.beforeRemove) === 'function') {
+              let beforeResponse = this.beforeRemove.bind(this.$t.$parent.call(this))(index, this.lists)
+              // 判断是否返回promise 
+              if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+                await beforeResponse.then(res => {
+                  // promise返回成功不进行操作
+                  this.handlerDeleteItem(index)
+                }).catch(err => {
+                  this.showToast(this.t('deleteInterrupted'))
+                })
+              } else if (beforeResponse === false) {
+                this.showToast(this.t('deleteInterrupted'))
+              } else {
+                this.handlerDeleteItem(index)
+              }
+            } else {
+              this.handlerDeleteItem(index)
+            }
+          }, true)
+      },
+      // 移除文件操作
+      handlerDeleteItem(index) {
+        // 如果文件正在上传中，终止上传任务
+        if (this.lists[index].data.progress < 100 && this.lists[index].data.progress > 0) {
+          typeof this.lists[index].data.uploadTask !== 'undefined' && this.lists[index].data.uploadTask.abort()
+        }
+        this.remove(index)
+        this.$forceUpdate()
+        this.$emit('on-remove', index, this.sortList(), this.index)
+        this.showToast(this.t('deleteSuccess'))
+      },
+      // 移除文件，通过ref手动形式进行调用
+      remove(index) {
+        if (!this.deleteable) return
+        // 判断索引合法
+        if (index >= 0 && index < this.lists.length) {
+          let currentItemIndex = this.lists[index].index
+          this.lists.splice(index, 1)
+          this.show = false;
+          setTimeout(() => {
+            this.show = true;
+            // 重新排列列表信息
+            for (let item of this.lists) {
+              if (item.index > currentItemIndex) {
+                item.index -= 1
+                item.x = item.positionX * this.baseData.widthPx
+                item.y = item.positionY * this.baseData.heightPx
+                item.positionX = item.index % this.baseData.columns
+                item.positionY = Math.floor(item.index / this.baseData.columns)
+                this.$nextTick(() => {
+                  item.x = item.positionX * this.baseData.widthPx
+                  item.y = item.positionY * this.baseData.heightPx
+                })
+              }
+            }
+            this.updateAddBtnPositioin()
+          }, 50)
+          
+          this.updateAddBtnPositioin()
+        }
+      },
+      // 预览图片
+      doPreviewImage(url, index) {
+        if (!this.previewFullImage) return
+        const images = this.lists.sort((l1, l2) => { return l1.index - l2.index}).map(item => item.data.url || item.data.path)
+        uni.previewImage({
+          urls: images,
+          current: url,
+          success: () => {
+            this.$emit('on-preview', url, this.sortList(), this.index)
+          },
+          fail: () => {
+            this.showToast(this.t('previewFailed'))
+          }
+        })
+      },
+      // 检查文件后缀是否合法
+      checkFileExt(file) {
+        // 是否为合法后缀
+        let noArrowExt = false
+        // 后缀名
+        let fileExt = ''
+        const reg = /.+\./
+        
+        // #ifdef H5
+        fileExt = file.name.replace(reg, '').toLowerCase()
+        // #endif
+        // #ifndef H5
+        fileExt = file.path.replace(reg, '').toLowerCase()
+        // #endif
+        noArrowExt = this.limitType.some(ext => {
+          return ext.toLowerCase() === fileExt
+        })
+        if (!noArrowExt) this.showToast(this.t('unsupportedFile', { ext: fileExt }))
+        return noArrowExt
+      },
+      
+      /********************* 拖拽处理 ********************/
+      
+      // 更新拖拽信息
+      updateDragInfo() {
+        this.baseData.widthPx = uni.upx2px(this.width)
+        this.baseData.heightPx = uni.upx2px(this.height)
+        
+        // 获取可移动区域的信息，用于判断当前有多少列
+        const query = uni.createSelectorQuery().in(this)
+        query.select('.tn-image-upload__movable-area').boundingClientRect()
+        query.exec((res) => {
+          if (!res) {
+            setTimeout(() => {
+              this.updateDragInfo()
+            }, 10)
+            return
+          }
+          this.baseData.columns = Math.floor(res[0].width / this.baseData.widthPx)
+          
+          // 初始化可拖拽列表信息
+          this.lists = []
+          this.fileList.forEach((item) => {
+            // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，
+            // 会触发watch，导致重新把原来的图片再次添加到this.lists
+            // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
+            let tmp = this.lists.map(value => {
+              return value.data
+            }).some(listVal => {
+              return listVal.url === item.url
+            })
+            // 如果内部没有这张图片，则添加到内部
+            !tmp && this.lists.push(this.handleDragListItem({
+              url: item.url,
+              error: false,
+              progress: 100
+            }))
+          })
+          
+          // 更新添加按钮位置
+          this.updateAddBtnPositioin()
+        })
+      },
+      // 处理拖拽列表信息
+      handleDragListItem(item) {
+        const positionX = this.lists.length % this.baseData.columns
+        const positionY = Math.floor(this.lists.length / this.baseData.columns)
+        const x = positionX * this.baseData.widthPx
+        const y = positionY * this.baseData.heightPx
+        return {
+          id: this.unique(),
+          x,
+          y,
+          preX: x,
+          preY: y,
+          positionX,
+          positionY,
+          zIndex:1,
+          disabled: true,
+          opacity: 1,
+          scale: 1,
+          index: this.lists.length,
+          offset: 0,
+          moveEnd: false,
+          moving: false,
+          data: {
+            ...item
+          }
+        }
+      },
+      // 生成元素唯一id
+      unique(n = 6) {
+        let id = ''
+        for (let i = 0; i < n; i++) id += Math.floor(Math.random() * 10)
+        return 'tn_' + new Date().getTime() + id
+      },
+      // 更新添加按钮位置
+      updateAddBtnPositioin() {
+        if (this.lists.length >= this.maxCount) return
+        
+        this.addBtn.x = (this.lists.length % this.baseData.columns) * this.baseData.widthPx
+        this.addBtn.y = Math.floor(this.lists.length / this.baseData.columns) * this.baseData.heightPx
+      },
+      // 获取排序后数据
+      sortList() {
+        const list = this.lists.slice()
+        list.sort((l1, l2) => {
+          return l1.index - l2.index
+        })
+        return list.map(item => {
+          return item.data
+        })
+      },
+      mouseEnterArea () {
+        // #ifdef H5
+        this.lists.forEach(item => {
+          item.disabled = false
+        })
+        // #endif
+      },
+      mouseLeaveArea () {
+        // #ifdef H5
+        if (this.baseData.dragItem) {
+          this.lists.forEach(item => {
+            item.disabled = true
+            item.zIndex = 1
+            item.offset = 0
+            item.moveEnd = true
+            if (item.id === this.baseData.dragItem.id) {
+              if (this.timer) {
+                clearTimeout(this.timer)
+                this.timer = null
+              }
+              item.x = item.preX
+              item.y = item.preY
+              this.$nextTick(() => {
+                item.x = item.positionX * this.baseData.widthPx
+                item.y = item.positionY * this.baseData.heightPx
+                this.baseData.dragItem = null
+              })
+            }
+          })
+          this.dragging = false
+        }
+        // #endif
+      },
+      movableLongPress(item) {
+        // #ifndef H5
+          uni.vibrateShort()
+          // console.log("LongPress--------------------------------------------------------------");
+          this.lists.forEach(value => {
+            value.moving = false
+          })
+          this.dragging = true
+          // 设置对应的元素允许拖动
+          const index = this.lists.findIndex(obj => {
+            return obj.id === item.id
+          })
+          item.disabled = false
+          item.opacity = 0.7
+          item.scale = 1.1
+          this.$set(this.lists, index, item)
+        // #endif
+      },
+      movableChange (e, item) {
+        if (!item || !this.dragging) return
+        // console.log("movableChange");
+        item.moving = true
+        item.preX = e.detail.x
+        item.preY = e.detail.y
+        // console.log(item.preX, item.preY);
+        
+        if (e.detail.source === 'touch') {
+          if (!item.moveEnd) {
+            item.offset = Math.sqrt(
+              Math.pow(item.preX - item.positionX * this.baseData.widthPx, 2) + 
+              Math.pow(item.preY - item.positionY * this.baseData.heightPx, 2))
+          }
+          let x = Math.floor((e.detail.x + this.baseData.widthPx / 2) / this.baseData.widthPx)
+          if (x > this.baseData.columns) return
+          let y = Math.floor((e.detail.y + this.baseData.heightPx / 2) / this.baseData.heightPx)
+          let index = this.baseData.columns * y + x
+          if (item.index !== index && index < this.lists.length) {
+            for (let obj of this.lists) {
+              if (item.index > index && obj.index >= index && obj.index < item.index) {
+                this.updateItemPosition(obj, 1)
+              } else if (item.index < index && obj.index <= index && obj.index > item.index) {
+                this.updateItemPosition(obj, -1)
+              } else if (item.id != obj.id) {
+                // obj.offset = 0
+                // console.log(obj.moving);
+                // if (!obj.moving) {
+                //   obj.preX = obj.positionX * this.baseData.widthPx
+                //   obj.preY = obj.positionY * this.baseData.heightPx
+                //   console.log("moving", obj.id, obj.preX, obj.preY);
+                // }
+                // obj.x = obj.preX
+                // obj.y = obj.preY
+                // // console.log(obj.id, obj.preX, obj.preY);
+                // this.$nextTick(() => {
+                //   obj.x = obj.positionX * this.baseData.widthPx
+                //   obj.y = obj.positionY * this.baseData.heightPx
+                // })
+              }
+            }
+            item.index = index
+            item.positionX = x
+            item.positionY = y
+            // TODO 发送事件
+          }
+        }
+      },
+      movableStart (item) {
+        // console.log("movableStart");
+        this.lists.forEach(item => {
+          item.zIndex = 1
+          // #ifdef H5
+          item.disabled = false
+          // #endif
+        })
+        item.zIndex = 10
+        item.moveEnd = false
+        this.baseData.dragItem = item
+        // #ifdef H5
+        this.dragging =true
+        this.timer = setTimeout(() => {
+          item.opacity = 0.7
+          item.scale = 1.1
+          clearTimeout(this.timer)
+          this.timer = null
+        }, 200)
+        // #endif
+      },
+      movableEnd (item) {
+        if (!this.dragging) return
+        // console.log("movableEnd");
+        const index = this.lists.findIndex(obj => {
+          return obj.id === item.id
+        })
+        if (!item.moving) {
+          item.preX = item.positionX * this.baseData.widthPx
+          item.preY = item.positionY * this.baseData.heightPx
+        }
+        item.x = item.preX
+        item.y = item.preY
+        item.offset = 0
+        item.moveEnd = true
+        item.moving = false
+        item.disabled = true
+        // console.log(item.x, item.y);
+        // console.log(item.id, item.moving);
+        // this.$set(this.lists, index, item)
+        // this.lists[index] = item
+        // console.log(this.lists[index]);
+        this.lists.forEach(listValue => {
+          listValue.moving = false
+          listValue.disabled = true
+        })
+        this.$nextTick(() => {
+          item.x = item.positionX * this.baseData.widthPx
+          item.y = item.positionY * this.baseData.heightPx
+          item.opacity = 1
+          item.scale = 1
+          this.baseData.dragItem = null
+          this.dragging = false
+          // console.log(item.x, item.y);
+          this.$set(this.lists, index, item)
+        })
+        this.$emit('sort-list', this.sortList())
+      },
+      // 更新图片位置信息
+      updateItemPosition(item, offset) {
+        const index = this.lists.findIndex(obj => {
+          return obj.id === item.id
+        })
+        item.index += offset
+        item.offset = 0
+        item.positionX = item.index % this.baseData.columns
+        item.positionY = Math.floor(item.index / this.baseData.columns)
+        if (!item.moving) {
+          item.preX = item.positionX * this.baseData.widthPx
+          item.preY = item.positionY * this.baseData.heightPx
+        }
+        item.x = item.preX
+        item.y = item.preY
+        // console.log("updateItemPosition", item.id, item.preX, item.preY);
+        // this.$set(this.lists, index, item)
+        this.$nextTick(() => {
+          item.x = item.positionX * this.baseData.widthPx
+          item.y = item.positionY * this.baseData.heightPx
+          this.$set(this.lists, index, item)
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-image-upload {
+    position: relative;
+    
+    &__movable-area {
+      width: 100%;
+    }
+    
+    &__movable-view {
+      overflow: hidden;
+    }
+    
+    &__item {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      align-items: center;
+      justify-content: center;
+      width: 200rpx;
+      height: 200rpx;
+      background-color: transparent;
+      position: relative;
+      border-radius: 5rpx;
+      overflow: hidden;
+      
+      &-preview {
+        border: 1rpx solid $tn-space-color;
+        
+        &__delete {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 10;
+          border-top: 60rpx solid;
+          border-left: 60rpx solid transparent;
+          border-top-color: rgba(0,0,0,0.1);
+          width: 0rpx;
+          height: 0rpx;
+          
+          &--icon {
+            position: absolute;
+            top: -50rpx;
+            right: 6rpx;
+            color: #FFFFFF;
+            font-size: 24rpx;
+            line-height: 1;
+          }
+        }
+        
+        &__progress {
+          position: absolute;
+          width: auto;
+          bottom: 0rpx;
+          left: 0rpx;
+          right: 0rpx;
+          z-index: 9;
+          /* #ifdef MP-WEIXIN */
+          display: inline-flex;
+          /* #endif */
+        }
+        
+        &__error-btn {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background-color: rgba(0,0,0,0.5);
+          color: #FFFFFF;
+          font-size: 20rpx;
+          padding: 8rpx 0;
+          text-align: center;
+          z-index: 9;
+          line-height: 1;
+        }
+        
+        &__image {
+          display: block;
+          width: 100%;
+          height: 100%;
+          // border-radius: 10rpx;
+        }
+      }
+      
+      &-add {
+        flex-direction: column;
+        color: $tn-content-color;
+        font-size: 26rpx;
+        
+        &--icon {
+          font-size: 40rpx;
+        }
+        
+        &__tips {
+          margin-top: 20rpx;
+          line-height: 40rpx;
+        }
+      }
+    }
+    
+    &__add {
+      background-color: $tn-space-color;
+      position: absolute;
+      // border-radius: 10rpx;
+      // margin: 10rpx;
+      // margin-left: 0;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-image-upload/tn-image-upload.vue b/tuniao-ui/components/tn-image-upload/tn-image-upload.vue
new file mode 100644
index 0000000..c04fde4
--- /dev/null
+++ b/tuniao-ui/components/tn-image-upload/tn-image-upload.vue
@@ -0,0 +1,689 @@
+<template>
+  <view v-if="!disabled" class="tn-image-upload-class tn-image-upload">
+    <block v-if="showUploadList">
+      <view
+        v-for="(item, index) in lists"
+        :key="index"
+        class="tn-image-upload__item tn-image-upload__item-preview"
+        :style="{
+          width: $t.string.getLengthUnitValue(width),
+          height: $t.string.getLengthUnitValue(height)
+        }"
+      >
+        <!-- 删除按钮 -->
+        <view
+          v-if="deleteable"
+          class="tn-image-upload__item-preview__delete"
+          @tap.stop="deleteItem(index)"
+          :style="{
+            borderTopColor: deleteBackgroundColor
+          }"
+        >
+          <view
+            class="tn-image-upload__item-preview__delete--icon"
+            :class="[`tn-icon-${deleteIcon}`]"
+            :style="{
+              color: deleteColor
+            }"
+          ></view>
+        </view>
+        <!-- 进度条 -->
+        <tn-line-progress
+          v-if="showProgress && item.progress > 0 && !item.error"
+          class="tn-image-upload__item-preview__progress"
+          :percent="item.progress"
+          :showPercent="false"
+          :round="false"
+          :height="8"
+        ></tn-line-progress>
+        <!-- 重试按钮 -->
+        <view v-if="item.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">{{ t('retry') }}</view>
+        <!-- 图片信息 -->
+        <image
+          class="tn-image-upload__item-preview__image"
+          :src="item.url || item.path"
+          :mode="imageMode"
+          @tap.stop="doPreviewImage(item.url || item.path, index)"
+        ></image>
+      </view>
+    </block>
+    <!-- <view v-if="$slots.file || $slots.$file" style="width: 100%;">
+      
+    </view> -->
+    <!-- 自定义图片展示列表 -->
+    <slot name="file" :file="lists"></slot>
+    
+    <!-- 添加按钮 -->
+    <view v-if="maxCount > lists.length" class="tn-image-upload__add" :class="{'tn-image-upload__add--custom': customBtn}" @tap="selectFile">
+      <!-- 添加按钮 -->
+      <view
+        v-if="!customBtn"
+        class="tn-image-upload__item tn-image-upload__item-add"
+        hover-class="tn-hover-class"
+        hover-stay-time="150"
+        :style="{
+          width: $t.string.getLengthUnitValue(width),
+          height: $t.string.getLengthUnitValue(height)
+        }"
+      >
+        <view class="tn-image-upload__item-add--icon tn-icon-add"></view>
+        <view class="tn-image-upload__item-add__tips">{{ resolvedUploadText }}</view>
+      </view>
+      <!-- 自定义添加按钮 -->
+      <view>
+        <slot name="addBtn"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-image-upload',
+    props: {
+      // 已上传的文件列表
+      fileList: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 上传图片地址
+      action: {
+        type: String,
+        default: ''
+      },
+      // 上传文件的字段名称
+      name: {
+        type: String,
+        default: 'file'
+      },
+      // 头部信息
+      header: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 携带的参数
+      formData: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自动上传
+      autoUpload: {
+        type: Boolean,
+        default: true
+      },
+      // 最大上传数量
+      maxCount: {
+        type: Number,
+        default: 9
+      },
+      // 是否显示组件自带的图片预览
+      showUploadList: {
+        type: Boolean,
+        default: true
+      },
+      // 预览上传图片的裁剪模式
+      imageMode: {
+        type: String,
+        default: 'aspectFill'
+      },
+      // 点击图片是否全屏预览
+      previewFullImage: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示进度条
+      showProgress: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示删除按钮
+      deleteable: {
+        type: Boolean,
+        default: true
+      },
+      // 删除按钮图标
+      deleteIcon: {
+        type: String,
+        default: 'close'
+      },
+      // 删除按钮的背景颜色
+      deleteBackgroundColor: {
+        type: String,
+        default: ''
+      },
+      // 删除按钮的颜色
+      deleteColor: {
+        type: String,
+        default: ''
+      },
+      // 上传区域提示文字
+      uploadText: {
+        type: String,
+        default: ''
+      },
+      // 显示toast提示
+      showTips: {
+        type: Boolean,
+        default: true
+      },
+      // 自定义选择图标按钮
+      customBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 预览图片和选择图片区域的宽度
+      width: {
+        type: Number,
+        default: 200
+      },
+      // 预览图片和选择图片区域的高度
+      height: {
+        type: Number,
+        default: 200
+      },
+      // 选择图片的尺寸
+      // 参考上传文档 https://uniapp.dcloud.io/api/media/image
+      sizeType: {
+        type: Array,
+        default() {
+          return ['original', 'compressed']
+        }
+      },
+      // 图片来源
+      sourceType: {
+        type: Array,
+        default() {
+          return ['album', 'camera']
+        }
+      },
+      // 是否可以多选
+      multiple: {
+        type: Boolean,
+        default: true
+      },
+      // 文件大小(byte)
+      maxSize: {
+        type: Number,
+        default: 10 * 1024 * 1024
+      },
+      // 允许上传的类型
+      limitType: {
+        type: Array,
+        default() {
+          return ['png','jpg','jpeg','webp','gif','image']
+        }
+      },
+      // 是否自定转换为json
+      toJson: {
+        type: Boolean,
+        default: true
+      },
+      // 上传前钩子函数，每个文件上传前都会执行
+      beforeUpload: {
+        type: Function,
+        default: null
+      },
+      // 删除文件前钩子函数
+      beforeRemove: {
+        type: Function,
+        default: null
+      },
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    computed: {
+      resolvedUploadText() {
+        return this.uploadText || this.t('uploadText')
+      }
+    },
+    data() {
+      return {
+        lists: [],
+        uploading: false,
+        i18n: {
+          zh: {
+            retry: '点击重试',
+            uploadText: '选择图片',
+            fileTooLarge: '超出可允许文件大小',
+            fileCountExceeded: '超出最大允许的文件数',
+            reuploading: '重新上传',
+            missingAction: '请配置上传地址',
+            uploadFailed: '上传失败，请重试',
+            dialogTitle: '提示',
+            confirmDelete: '您确定要删除吗？',
+            deleteInterrupted: '删除操作被中断',
+            deleteSuccess: '删除成功',
+            previewFailed: '预览图片失败',
+            unsupportedFile: '不支持{ext}格式的文件'
+          },
+          en: {
+            retry: 'Retry',
+            uploadText: 'Select Image',
+            fileTooLarge: 'File exceeds the allowed size',
+            fileCountExceeded: 'Exceeded the maximum file count',
+            reuploading: 'Re-uploading',
+            missingAction: 'Please configure the upload URL',
+            uploadFailed: 'Upload failed, please try again',
+            dialogTitle: 'Notice',
+            confirmDelete: 'Are you sure you want to delete this image?',
+            deleteInterrupted: 'Delete action was interrupted',
+            deleteSuccess: 'Deleted successfully',
+            previewFailed: 'Preview failed',
+            unsupportedFile: '.{ext} files are not supported'
+          }
+        }
+      }
+    },
+    watch: {
+      fileList: {
+        handler(val) {
+          val.map(value => {
+            // 首先检查内部是否已经添加过这张图片，因为外部绑定了一个对象给fileList的话(对象引用)，进行修改外部fileList时，
+            // 会触发watch，导致重新把原来的图片再次添加到this.lists
+            // 数组的some方法意思是，只要数组元素有任意一个元素条件符合，就返回true，而另一个数组的every方法的意思是数组所有元素都符合条件才返回true
+            let tmp = this.lists.some(listVal => {
+              return listVal.url === value.url
+            })
+            // 如果内部没有这张图片，则添加到内部
+            !tmp && this.lists.push({ url: value.url, error: false, progress: 100 })
+          })
+        },
+        immediate: true
+      },
+      lists(val) {
+        this.$emit('on-list-change', val, this.index)
+      }
+    },
+    methods: {
+      t(key, params = {}) {
+        return this.$translate(this.i18n, key, params)
+      },
+      // 清除列表
+      clear() {
+        this.lists = []
+      },
+      // 重新上传队列中上传失败所有文件
+      reUpload() {
+        this.uploadFile()
+      },
+      // 选择图片
+      selectFile() {
+        if (this.disabled) return
+        const {
+          name = '',
+          maxCount,
+          multiple,
+          maxSize,
+          sizeType,
+          lists,
+          camera,
+          compressed,
+          sourceType
+        } = this
+        let chooseFile = null
+        const newMaxCount = maxCount - lists.length
+        // 只选择图片的时候使用 chooseImage 来实现
+        chooseFile = new Promise((resolve, reject) => {
+          uni.chooseImage({
+            count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
+            sourceType,
+            sizeType,
+            success: resolve,
+            fail: reject
+          })
+        })
+        chooseFile.then(res => {
+          let file = null
+          let listOldLength = lists.length
+          res.tempFiles.map((val, index) => {
+            if (!this.checkFileExt(val)) return
+            
+            // 是否超出最大限制数量
+            if (!multiple && index >= 1) return
+            if (val.size > maxSize) {
+              this.$emit('on-oversize', val, lists, this.index)
+              this.showToast(this.t('fileTooLarge'))
+            } else {
+              if (maxCount <= lists.length) {
+                this.$emit('on-exceed', val, lists, this.index)
+                this.showToast(this.t('fileCountExceeded'))
+                return
+              }
+              lists.push({
+                url: val.path,
+                progress: 0,
+                error: false,
+                file: val
+              })
+            }
+          })
+          this.$emit('on-choose-complete', this.lists, this.index)
+          if (this.autoUpload) this.uploadFile(listOldLength)
+        }).catch(err => {
+          this.$emit('on-choose-fail', err)
+        })
+      },
+      // 提示用户信息
+      showToast(message, force = false) {
+        if (this.showTips || force) {
+          this.$t.message.toast(message)
+        }
+      },
+      // 手动上传，通过ref进行调用
+      upload() {
+        this.uploadFile()
+      },
+      // 对失败图片进行再次上传
+      retry(index) {
+        this.lists[index].progress = 0
+        this.lists[index].error = false
+        this.lists[index].response = null
+        this.$t.message.loading(this.t('reuploading'))
+        this.uploadFile(index)
+      },
+      // 上传文件
+      async uploadFile(index = 0) {
+        if (this.disabled) return
+        if (this.uploading) return
+        // 全部上传完成
+        if (index >= this.lists.length) {
+          this.$emit('on-uploaded', this.lists, this.index)
+          return
+        }
+        // 检查是否已经全部上传或者上传中
+        if (this.lists[index].progress === 100) {
+          this.lists[index].uploadTask = null
+          if (this.autoUpload) this.uploadFile(index + 1)
+          return
+        }
+        // 执行before-upload钩子
+        if (this.beforeUpload && typeof(this.beforeUpload) === 'function') {
+          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
+          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
+          // 因为upload组件可能会被嵌套在其他组件内，比如tn-form，这时this.$parent其实为tn-form的this，
+          // 非页面的this，所以这里需要往上历遍，一直寻找到最顶端的$parent，这里用了this.$u.$parent.call(this)
+          let beforeResponse = this.beforeUpload.bind(this.$t.$parent.call(this))(index, this.lists)
+          // 判断是否返回了Promise
+          if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+            await beforeResponse.then(res => {
+              // promise返回成功，不进行操作继续
+            }).catch(err => {
+              // 进入catch回调的话，继续下一张
+              return this.uploadFile(index + 1)
+            })
+          } else if (beforeResponse === false) {
+            // 如果返回flase，继续下一张图片上传
+            return this.uploadFile(index + 1)
+          } else {
+            // 为true的情况，不进行操作
+          }
+        }
+        // 检查上传地址
+        if (!this.action) {
+          this.showToast(this.t('missingAction'), true)
+          return
+        }
+        this.lists[index].error = false
+        this.uploading = true
+        // 创建上传对象
+        const task = uni.uploadFile({
+          url: this.action,
+          filePath: this.lists[index].url,
+          name: this.name,
+          formData: this.formData,
+          header: this.header,
+          success: res => {
+            // 判断啊是否为json字符串，将其转换为json格式
+            let data = this.toJson && this.$t.test.jsonString(res.data) ? JSON.parse(res.data) : res.data
+            if (![200, 201, 204].includes(res.statusCode)) {
+              this.uploadError(index, data)
+            } else {
+              this.lists[index].response = data
+              this.lists[index].progress = 100
+              this.lists[index].error = false
+              this.$emit('on-success', data, index, this.lists, this.index)
+            }
+          },
+          fail: err => {
+            this.uploadError(index, err)
+          },
+          complete: res => {
+            this.$t.message.closeLoading()
+            this.uploading = false
+            this.uploadFile(index + 1)
+            this.$emit('on-change', res, index, this.lists, this.index)
+          }
+        })
+        this.lists[index].uploadTask = task
+        task.onProgressUpdate(res => {
+          if (res.progress > 0) {
+            this.lists[index].progress = res.progress
+            this.$emit('on-progress', res, index, this.lists, this.index)
+          }
+        })
+      },
+      // 上传失败
+      uploadError(index, err) {
+        this.lists[index].progress = 0
+        this.lists[index].error = true
+        this.lists[index].response = null
+        this.showToast(this.t('uploadFailed'))
+        this.$emit('on-error', err, index, this.lists, this.index)
+      },
+      // 删除一个图片
+      deleteItem(index) {
+        if (!this.deleteable) return
+        this.$t.message.modal(
+          this.t('dialogTitle'),
+          this.t('confirmDelete'),
+          async () => {
+            // 先检查是否有定义before-remove移除前钩子
+            // 执行before-remove钩子
+            if (this.beforeRemove && typeof(this.beforeRemove) === 'function') {
+              let beforeResponse = this.beforeRemove.bind(this.$t.$parent.call(this))(index, this.lists)
+              // 判断是否返回promise 
+              if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+                await beforeResponse.then(res => {
+                  // promise返回成功不进行操作
+                  this.handlerDeleteItem(index)
+                }).catch(err => {
+                  this.showToast(this.t('deleteInterrupted'))
+                })
+              } else if (beforeResponse === false) {
+                this.showToast(this.t('deleteInterrupted'))
+              } else {
+                this.handlerDeleteItem(index)
+              }
+            } else {
+              this.handlerDeleteItem(index)
+            }
+          }, true)
+      },
+      // 移除文件操作
+      handlerDeleteItem(index) {
+        // 如果文件正在上传中，终止上传任务
+        if (this.lists[index].progress < 100 && this.lists[index].progress > 0) {
+          typeof this.lists[index].uploadTask !== 'undefined' && this.lists[index].uploadTask.abort()
+        }
+        this.lists.splice(index, 1)
+        this.$forceUpdate()
+        this.$emit('on-remove', index, this.lists, this.index)
+        this.showToast(this.t('deleteSuccess'))
+      },
+      // 移除文件，通过ref手动形式进行调用
+      remove(index) {
+        if (!this.deleteable) return
+        // 判断索引合法
+        if (index >= 0 && index < this.lists.length) {
+          this.lists.splice(index, 1)
+        }
+      },
+      // 预览图片
+      doPreviewImage(url, index) {
+        if (!this.previewFullImage) return
+        const images = this.lists.map(item => item.url || item.path)
+        uni.previewImage({
+          urls: images,
+          current: url,
+          success: () => {
+            this.$emit('on-preview', url, this.lists, this.index)
+          },
+          fail: () => {
+            this.showToast(this.t('previewFailed'))
+          }
+        })
+      },
+      // 检查文件后缀是否合法
+      checkFileExt(file) {
+        // 是否为合法后缀
+        let noArrowExt = false
+        // 后缀名
+        let fileExt = ''
+        const reg = /.+\./
+        
+        // #ifdef H5
+        fileExt = file.name.replace(reg, '').toLowerCase()
+        // #endif
+        // #ifndef H5
+        fileExt = file.path.replace(reg, '').toLowerCase()
+        // #endif
+        noArrowExt = this.limitType.some(ext => {
+          return ext.toLowerCase() === fileExt
+        })
+        if (!noArrowExt) this.showToast(this.t('unsupportedFile', { ext: fileExt }))
+        return noArrowExt
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-image-upload {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    
+    &__item {
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      align-items: center;
+      justify-content: center;
+      width: 200rpx;
+      height: 200rpx;
+      overflow: hidden;
+      margin: 12rpx;
+      margin-left: 0;
+      background-color: $tn-font-holder-color;
+      position: relative;
+      border-radius: 10rpx;
+      
+      &-preview {
+        border: 1rpx solid $tn-border-solid-color;
+        
+        &__delete {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 10;
+          border-top: 60rpx solid;
+          border-left: 60rpx solid transparent;
+          border-top-color: $tn-color-red;
+          width: 0rpx;
+          height: 0rpx;
+          
+          &--icon {
+            position: absolute;
+            top: -50rpx;
+            right: 6rpx;
+            color: #FFFFFF;
+            font-size: 24rpx;
+            line-height: 1;
+          }
+        }
+        
+        &__progress {
+          position: absolute;
+          width: auto;
+          bottom: 0rpx;
+          left: 0rpx;
+          right: 0rpx;
+          z-index: 9;
+          /* #ifdef MP-WEIXIN */
+          display: inline-flex;
+          /* #endif */
+        }
+        
+        &__error-btn {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background-color: $tn-color-red;
+          color: #FFFFFF;
+          font-size: 20rpx;
+          padding: 8rpx 0;
+          text-align: center;
+          z-index: 9;
+          line-height: 1;
+        }
+        
+        &__image {
+          display: block;
+          width: 100%;
+          height: 100%;
+          border-radius: 10rpx;
+        }
+      }
+      
+      &-add {
+        flex-direction: column;
+        color: $tn-content-color;
+        font-size: 26rpx;
+        
+        &--icon {
+          font-size: 40rpx;
+        }
+        
+        &__tips {
+          margin-top: 20rpx;
+          line-height: 40rpx;
+        }
+      }
+    }
+    
+    &__add {
+      width: auto;
+      display: inline-block;
+      
+      &--custom {
+        width: 100%;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue b/tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
new file mode 100644
index 0000000..97bef6e
--- /dev/null
+++ b/tuniao-ui/components/tn-index-anchor/tn-index-anchor.vue
@@ -0,0 +1,90 @@
+<template>
+  <!-- 支付宝小程序使用_tGetRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+  <view>
+    <view :id="elId" class="tn-index-anchor__wrap" :style="[wrapperStyle]">
+      <view class="tn-index-anchor" :class="[active ? 'tn-index-anchor--active' : '']" :style="[customAnchorStyle]">
+        <view v-if="useSlot">
+          <slot></slot>
+        </view>
+        <block v-else>
+          <text>{{ index }}</text>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-index-anchor',
+    props: {
+      // 使用自定义内容
+      useSlot: {
+        type: Boolean,
+        default: false
+      },
+      // 索引字符
+      index: {
+        type: String,
+        default: ''
+      },
+      // 自定义样式
+      customStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      customAnchorStyle() {
+        return Object.assign(this.anchorStyle, this.customStyle)
+      }
+    },
+    data() {
+      return {
+        elId: this.$t.uuid(),
+        // 内容的高度
+        height: 0,
+        // 内容的top
+        top: 0,
+        // 是否被激活
+        active: false,
+        // 样式（父组件外部提供）
+        wrapperStyle: {},
+        anchorStyle: {}
+      }
+    },
+    created() {
+      this.parent = false
+    },
+    mounted() {
+      this.parent = this.$t.$parent.call(this, 'tn-index-list')
+      if (this.parent) {
+        this.parent.childrens.push(this)
+        this.parent.updateData()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-index-anchor {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8rpx 24rpx;
+    color: $tn-font-color;
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: 1.2;
+    background-color: rgb(245, 245, 245);
+    
+    &--active {
+      right: 0;
+      left: 0;
+      color: $tn-main-color;
+      background-color: #FFFFFF;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-index-list/tn-index-list.vue b/tuniao-ui/components/tn-index-list/tn-index-list.vue
new file mode 100644
index 0000000..91fc639
--- /dev/null
+++ b/tuniao-ui/components/tn-index-list/tn-index-list.vue
@@ -0,0 +1,361 @@
+<template>
+  <!-- 支付宝小程序使用_tGetRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+  <view>
+    <view class="tn-index-list-class tn-index-list">
+      <slot></slot>
+      
+      <!-- 侧边栏 -->
+      <view
+        v-if="showSidebar"
+        class="tn-index-list__sidebar"
+        @touchstart.stop.prevent="onTouchMove"
+        @touchmove.stop.prevent="onTouchMove"
+        @touchend.stop.prevent="onTouchStop"
+        @touchcancel.stop.prevent="onTouchStop"
+      >
+        <view
+          v-for="(item, index) in indexList"
+          :key="index"
+          class="tn-index-list__sidebar__item"
+          :style="{
+            zIndex: zIndex + 1,
+            color: activeAnchorIndex === index ? activeColor : ''
+          }"
+        >
+          {{ item }}
+        </view>
+      </view>
+      
+      <!-- 选中弹出框 -->
+      <view
+        v-if="touchMove && indexList[touchMoveIndex]"
+        class="tn-index-list__alert"
+        :style="{
+          zIndex: selectAlertZIndex
+        }"
+      >
+        <text>{{ indexList[touchMoveIndex] }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  // 生成 A-Z的字母列表
+  let indexList = function() {
+    let indexList = []
+    let charCodeOfA = 'A'.charCodeAt(0)
+    for (var i = 0; i < 26; i++) {
+      indexList.push(String.fromCharCode(charCodeOfA + i))
+    }
+    return indexList
+  }
+  
+  export default {
+    name: 'tn-index-list',
+    props: {
+      // 索引列表
+      indexList: {
+        type: Array,
+        default() {
+          return indexList()
+        }
+      },
+      // 是否自动吸顶
+      sticky: {
+        type: Boolean,
+        default: true
+      },
+      // 自动吸顶时距离顶部的距离，单位px
+      stickyTop: {
+        type: Number,
+        default: 0
+      },
+      // 自定义顶栏的高度，单位px
+      customBarHeight: {
+        type: Number,
+        default: 0
+      },
+      // 当前滚动的高度
+      // 由于自定义组件无法获取滚动高度，所以依赖传入
+      scrollTop: {
+        type: Number,
+        default: 0
+      },
+      // 选中索引时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 吸顶时的z-index
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 选中索引列表弹出提示框的z-index
+      selectAlertZIndex() {
+        return this.$t.zIndex.toast
+      },
+      // 吸顶的偏移高度
+      stickyOffsetTop() {
+        // #ifdef H5
+        return this.stickyTop !== '' ? this.stickyTop : 44
+        // #endif
+        // #ifndef H5
+        return this.stickyTop !== '' ? this.stickyTop : 0
+        // #endif
+      }
+    },
+    data() {
+      return {
+        // 当前激活的列表锚点的序号
+        activeAnchorIndex: 0,
+        // 显示侧边索引栏
+        showSidebar: true,
+        // 标记是否开始触摸移动
+        touchMove: false,
+        // 当前触摸移动到对应索引的序号
+        touchMoveIndex: 0,
+        // 滚动到对应锚点的序号
+        scrollToAnchorIndex: 0,
+        // 侧边栏的信息
+        sidebar: {
+          height: 0,
+          top: 0
+        },
+        // 内容区域高度
+        height: 0,
+        // 内容区域top
+        top: 0
+      }
+    },
+    watch: {
+      scrollTop() {
+        this.updateData()
+      }
+    },
+    created() {
+      // 只能在created生命周期定义childrens，如果在data定义，会因为循环引用而报错
+      this.childrens = []
+    },
+    methods: {
+      // 更新数据
+      updateData() {
+        this.timer && clearTimeout(this.timer)
+        this.timer = setTimeout(() => {
+          this.showSidebar = !!this.childrens.length
+          this.getRect().then(() => {
+            this.onScroll()
+          })
+        }, 0)
+      },
+      // 获取对应的信息
+      getRect() {
+        return Promise.all([
+          this.getAnchorRect(),
+          this.getListRect(),
+          this.getSidebarRect()
+        ])
+      },
+      // 获取列表内容子元素信息
+      getAnchorRect() {
+        return Promise.all(this.childrens.map((child, index) => {
+          child._tGetRect('.tn-index-anchor__wrap').then((rect) => {
+            Object.assign(child, {
+              height: rect.height,
+              top: rect.top - this.customBarHeight
+            })
+          })
+        }))
+      },
+      // 获取列表信息
+      getListRect() {
+        return this._tGetRect('.tn-index-list').then(rect => {
+          Object.assign(this, {
+            height: rect.height,
+            top: rect.top + this.scrollTop
+          })
+        })
+      },
+      // 获取侧边滚动栏信息
+      getSidebarRect() {
+        return this._tGetRect('.tn-index-list__sidebar').then(rect => {
+          this.sidebar = {
+            height: rect.height,
+            top: rect.top
+          }
+        })
+      },
+      // 滚动事件
+      onScroll() {
+        const {
+          childrens = []
+        } = this
+        if (!childrens.length) {
+          return
+        }
+        const {
+          sticky,
+          stickyOffsetTop,
+          zIndex,
+          scrollTop,
+          activeColor
+        } = this
+        const active = this.getActiveAnchorIndex()
+        this.activeAnchorIndex = active
+        if (sticky) {
+          let isActiveAnchorSticky = false
+          if (active !== -1) {
+            isActiveAnchorSticky = childrens[active].top <= 0
+          }
+          childrens.forEach((item, index) => {
+            if (index === active) {
+              let wrapperStyle = ''
+              let anchorStyle = {
+                color: `${activeColor}`
+              }
+              if (isActiveAnchorSticky) {
+                wrapperStyle = {
+                  height: `${childrens[index].height}px`
+                }
+                anchorStyle = {
+                  position: 'fixed',
+                  top: `${stickyOffsetTop}px`,
+                  zIndex: `${zIndex ? zIndex : this.$t.zIndex.indexListSticky}`,
+                  color: `${activeColor}`
+                }
+              }
+              item.active = true
+              item.wrapperStyle = wrapperStyle
+              item.anchorStyle = anchorStyle
+            } else if (index === active - 1) {
+              const currentAnchor = childrens[index]
+              const currentOffsetTop = currentAnchor.top
+              const targetOffsetTop = index === childrens.length - 1 ? this.top : childrens[index + 1].top
+              const parentOffsetHeight = targetOffsetTop - currentOffsetTop
+              const translateY = parentOffsetHeight - currentAnchor.height
+              const anchorStyle = {
+                position: 'relative',
+                transform: `translate3d(0, ${translateY}px, 0)`,
+                zIndex: `${zIndex ? zIndex : this.$t.zIndex.indexListSticky}`,
+                color: `${activeColor}`
+              }
+              item.active = false
+              item.anchorStyle = anchorStyle
+            } else {
+              item.active = false
+              item.wrapperStyle = ''
+              item.anchorStyle = ''
+            }
+          })
+        }
+      },
+      // 触摸移动
+      onTouchMove(event) {
+        this.touchMove = true
+        const sidebarLength = this.childrens.length
+        const touch = event.touches[0]
+        const itemHeight = this.sidebar.height / sidebarLength
+        let clientY = touch.clientY
+        let index = Math.floor((clientY - this.sidebar.top) / itemHeight)
+        if (index < 0) {
+          index = 0
+        } else if (index > sidebarLength - 1) {
+          index = sidebarLength - 1
+        }
+        this.touchMoveIndex = index
+        this.scrollToAnchor(index)
+      },
+      // 触摸停止
+      onTouchStop() {
+        this.touchMove = false
+        this.scrollToAnchorIndex = null
+      },
+      // 获取当前的锚点序号
+      getActiveAnchorIndex() {
+        const {
+          childrens,
+          sticky
+        } = this
+        for (let i = this.childrens.length - 1; i >= 0; i--) {
+          const preAnchorHeight = i > 0 ? childrens[i - 1].height : 0
+          const reachTop = sticky ? preAnchorHeight : 0
+          if (reachTop >= childrens[i].top) {
+            return i
+          }
+        }
+        return -1
+      },
+      // 滚动到对应的锚点
+      scrollToAnchor(index) {
+        if (this.scrollToAnchorIndex === index) {
+          return
+        }
+        this.scrollToAnchorIndex = index
+        const anchor = this.childrens.find(item => item.index === this.indexList[index])
+        if (anchor) {
+          const scrollTop = anchor.top + this.scrollTop
+          this.$emit('select', {
+            index: anchor.index,
+            scrollTop: scrollTop
+          })
+          uni.pageScrollTo({
+            duration:0,
+            scrollTop: scrollTop
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-index-list {
+    position: relative;
+    
+    &__sidebar {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 50%;
+      right: 0;
+      text-align: center;
+      transform: translateY(-50%);
+      user-select: none;
+      z-index: 99;
+      
+      &__item {
+        font-weight: 500;
+        padding: 8rpx 18rpx;
+        font-size: 22rpx;
+        line-height: 1;
+      }
+    }
+    
+    &__alert {
+      display: flex;
+      flex-direction: row;
+      position: fixed;
+      width: 120rpx;
+      height: 120rpx;
+      top: 50%;
+      right: 90rpx;
+      align-items: center;
+      justify-content: center;
+      margin-top: -60rpx;
+      border-radius: 24rpx;
+      font-size: 50rpx;
+      color: #FFFFFF;
+      background-color: $tn-font-sub-color;
+      padding: 0;
+      z-index: 9999999;
+      
+      text {
+        line-height: 50rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-input/tn-input.vue b/tuniao-ui/components/tn-input/tn-input.vue
new file mode 100644
index 0000000..72aa75b
--- /dev/null
+++ b/tuniao-ui/components/tn-input/tn-input.vue
@@ -0,0 +1,427 @@
+<template>
+  <view
+    class="tn-input-class tn-input"
+    :class="{
+      'tn-input--border': border,
+      'tn-input--error': validateState
+    }"
+    :style="{
+      padding: `0 ${border ? 20 : 0}rpx`,
+      borderColor: borderColor,
+      textAlign: inputAlign
+    }"
+    @tap.stop="inputClick"
+  >
+    <textarea
+      v-if="type === 'textarea'"
+      class="tn-input__input tn-input__textarea"
+      :style="[inputStyle]"
+      :value="defaultValue"
+      :placeholder="placeholder"
+      :placeholderStyle="placeholderStyle"
+      :disabled="disabled || type === 'select'"
+      :maxlength="maxLength"
+      :fixed="fixed"
+      :focus="focus"
+      :autoHeight="autoHeight"
+      :selectionStart="elSelectionStart"
+      :selectionEnd="elSelectionEnd"
+      :cursorSpacing="cursorSpacing"
+      :showConfirmBar="showConfirmBar"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="onFocus"
+      @confirm="onConfirm"
+    />
+    <input
+      v-else
+      class="tn-input__input"
+      :type="type === 'password' ? 'text' : type"
+      :style="[inputStyle]"
+      :value="defaultValue"
+      :password="type === 'password' && !showPassword"
+      :placeholder="placeholder"
+      :placeholderStyle="placeholderStyle"
+      :disabled="disabled || type === 'select'"
+      :maxlength="maxLength"
+      :focus="focus"
+      :confirmType="confirmType"
+      :selectionStart="elSelectionStart"
+      :selectionEnd="elSelectionEnd"
+      :cursorSpacing="cursorSpacing"
+      :showConfirmBar="showConfirmBar"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="onFocus"
+      @confirm="onConfirm"
+    />
+    
+    <!-- 右边的icon -->
+    <view class="tn-input__right-icon tn-flex tn-flex-col-center">
+      <!-- 清除按钮 -->
+      <view
+        v-if="clearable && value !== '' && focused"
+        class="tn-input__right-icon__item tn-input__right-icon__clear"
+        @tap="onClear"
+      >
+        <view class="icon tn-icon-close"></view>
+      </view>
+      <view
+        v-else-if="type === 'text' && !focused && showRightIcon && rightIcon !== ''"
+        class="tn-input__right-icon__item tn-input__right-icon__clear"
+      >
+        <view class="icon" :class="[`tn-icon-${rightIcon}`]"></view>
+      </view>
+      <!-- 显示密码按钮 -->
+      <view
+        v-if="passwordIcon && type === 'password'"
+        class="tn-input__right-icon__item tn-input__right-icon__clear"
+        @tap="showPassword = !showPassword"
+      >
+        <view v-if="!showPassword" class="icon tn-icon-eye-hide"></view>
+        <view v-else class="icon tn-icon-eye"></view>
+      </view>
+      <!-- 可选项箭头 -->
+      <view
+        v-if="type === 'select'"
+        class="tn-input__right-icon__item tn-input__right-icon__select"
+        :class="{
+          'tn-input__right-icon__select--reverse': selectOpen
+        }"
+      >
+        <view class="icon tn-icon-up-fill"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import Emitter from '../../libs/utils/emitter.js'
+  
+  export default {
+    mixins: [Emitter],
+    name: 'tn-input',
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      // 输入框的类型
+      type: {
+        type: String,
+        default: 'text'
+      },
+      // 输入框文字对齐方式
+      inputAlign: {
+        type: String,
+        default: 'left'
+      },
+      // 文本框为空时显示的信息
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      placeholderStyle: {
+        type: String,
+        default: 'color: #AAAAAA'
+      },
+      // 是否禁用输入框
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 可输入文字的最大长度
+      maxLength: {
+        type: Number,
+        default: 255
+      },
+      // 输入框高度
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 根据内容自动调整高度
+      autoHeight: {
+        type: Boolean,
+        default: true
+      },
+      // 键盘右下角显示的文字，仅在text时生效
+      confirmType: {
+        type: String,
+        default: 'done'
+      },
+      // 输入框自定义样式
+      customStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否固定输入框
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自动获取焦点
+      focus: {
+        type: Boolean,
+        default: false
+      },
+      // 当type为password时，是否显示右侧密码图标
+      passwordIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 当type为 input或者textarea时是否显示边框
+      border: {
+        type: Boolean,
+        default: false
+      },
+      // 边框的颜色
+      borderColor: {
+        type: String,
+        default: '#dcdfe6'
+      },
+      // 当type为select时，旋转右侧图标，标记当时select是打开还是关闭
+      selectOpen: {
+        type: Boolean,
+        default: false
+      },
+      // 是否可清空
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      // 光标与键盘的距离
+      cursorSpacing: {
+        type: Number,
+        default: 0
+      },
+      // selectionStart和selectionEnd需要搭配使用，自动聚焦时生效
+      // 光标起始位置
+      selectionStart: {
+        type: Number,
+        default: -1
+      },
+      // 光标结束位置
+      selectionEnd: {
+        type: Number,
+        default: -1
+      },
+      // 自动去除两端空格
+      trim: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示键盘上方的完成按钮
+      showConfirmBar: {
+        type: Boolean,
+        default: true
+      },
+      // 是否在输入框内最右边显示图标
+      showRightIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 最右边图标的名称
+      rightIcon: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      // 输入框样式
+      inputStyle() {
+        let style = {}
+        // 如果没有设置高度，根据不同的类型设置一个默认值
+        style.minHeight = this.height ? this.height + 'rpx' : 
+          this.type === 'textarea' ? this.textareaHeight + 'rpx' : this.inputHeight + 'rpx'
+        
+        style = Object.assign(style, this.customStyle)
+        
+        return style
+      },
+      // 光标起始位置
+      elSelectionStart() {
+        return String(this.selectionStart)
+      },
+      // 光标结束位置
+      elSelectionEnd() {
+        return String(this.selectionEnd)
+      }
+    },
+    data() {
+      return {
+        // 默认值
+        defaultValue: this.value,
+        // 输入框高度
+        inputHeight: 70,
+        // textarea的高度
+        textareaHeight: 100,
+        // 标记验证的状态
+        validateState: false,
+        // 标记是否获取到焦点
+        focused: false,
+        // 是否预览密码
+        showPassword: false,
+        // 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input事件
+        lastValue: '',
+      }
+    },
+    watch: {
+      value(newVal, oldVal) {
+        this.defaultValue = newVal
+        // 当值发生变化时，并且type为select时，不会触发input事件
+        // 模拟input事件
+        if (newVal !== oldVal && this.type === 'select') {
+          this.handleInput({
+            detail: {
+              value: newVal
+            }
+          })
+        }
+      }
+    },
+    created() {
+      // 监听form-item发出的错误事件，将输入框变成红色
+      this.$on("on-form-item-error", this.onFormItemError)
+    },
+    methods: {
+      /**
+       * input事件
+       */
+      handleInput(event) {
+        let value = event.detail.value
+        // 是否需要去掉空格
+        if (this.trim) value = this.$t.string.trim(value)
+        // 原生事件
+        this.$emit('input', value)
+        // model赋值
+        this.defaultValue = value
+        // 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
+        // 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
+        // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+        setTimeout(() => {
+          // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+          // #ifdef MP-TOUTIAO
+          if (this.$t.string.trim(value) === this.lastValue) return
+          this.lastValue = value
+          // #endif
+          
+          // 发送当前的值到form-item进行校验
+          this.dispatch('tn-form-item','on-form-change', value)
+        }, 40)
+      },
+      /**
+       * blur事件
+       */
+      handleBlur(event) {
+        let value = event.detail.value
+        
+        // 由于点击清除图标也会触发blur事件，导致图标消失从而无法点击
+        setTimeout(() => {
+          this.focused = false
+        }, 100)
+        
+        // 原生事件
+        this.$emit('blur', value)
+        // 过一个生命周期再发送事件给tn-form-item，否则this.$emit('blur')更新了父组件的值，但是微信小程序上
+        // 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
+        // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+        setTimeout(() => {
+          // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+          // #ifdef MP-TOUTIAO
+          if (this.$t.string.trim(value) === this.lastValue) return
+          this.lastValue = value
+          // #endif
+          
+          // 发送当前的值到form-item进行校验
+          this.dispatch('tn-form-item','on-form-blur', value)
+        }, 40)
+      },
+      // 处理校验错误
+      onFormItemError(status) {
+        this.validateState = status
+      },
+      // 聚焦事件
+      onFocus(event) {
+        this.focused = true
+        this.$emit('focus')
+      },
+      // 点击确认按钮事件
+      onConfirm(event) {
+        this.$emit('confirm', event.detail.value)
+      },
+      // 清除事件
+      onClear(event) {
+        this.$emit('input', '')
+      },
+      // 点击事件
+      inputClick() {
+        this.$emit('click')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-input {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    flex: 1;
+    
+    &__input {
+      font-size: 28rpx;
+      color: $tn-font-color;
+      flex: 1;
+    }
+    
+    &__textarea {
+      width: auto;
+      font-size: 28rpx;
+      color: $tn-font-color;
+      padding: 10rpx 0;
+      line-height: normal;
+      flex: 1;
+    }
+    
+    &--border {
+      border-radius: 6rpx;
+      border: 2rpx solid $tn-border-solid-color;
+    }
+    
+    &--error {
+      border-color: $tn-color-red !important;
+    }
+    
+    &__right-icon {
+      line-height: 1;
+      .icon {
+        color: $tn-font-sub-color;
+      }
+      
+      &__item {
+        margin-left: 10rpx;
+      }
+      
+      &__clear {
+        .icon {
+          font-size: 32rpx;
+        }
+      }
+      
+      &__select {
+        transition: transform .4s;
+        
+        .icon {
+          font-size: 26rpx;
+        }
+        
+        &--reverse {
+          transform: rotate(-180deg);
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-keyboard/tn-keyboard.vue b/tuniao-ui/components/tn-keyboard/tn-keyboard.vue
new file mode 100644
index 0000000..6e01e87
--- /dev/null
+++ b/tuniao-ui/components/tn-keyboard/tn-keyboard.vue
@@ -0,0 +1,245 @@
+<template>
+  <view v-if="value" class="tn-keyboard-class tn-keyboard">
+    <tn-popup
+      v-model="value"
+      mode="bottom"
+      :popup="false"
+      length="auto"
+      :mask="mask"
+      :maskCloseable="maskCloseable"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :zIndex="elZIndex"
+      @close="popupClose"
+    >
+      <view>
+        <slot></slot>
+      </view>
+      
+      <!-- 提示信息 -->
+      <view v-if="tooltip" class="tn-keyboard__tooltip">
+        <view
+          v-if="cancelBtn"
+          class="tn-keyboard__tooltip__item tn-keyboard__tooltip__cancel"
+          hover-class="tn-keyboard__tooltip__cancel--hover"
+          :hover-stay-time="150"
+          @tap="onCancel"
+        >
+          {{ cancelBtn ? resolvedCancelText : ''}}
+        </view>
+        <view v-if="showTips" class="tn-keyboard__tooltip__item tn-keyboard__tooltip__tips">
+          {{ resolvedTips }}
+        </view>
+        <view
+          v-if="confirmBtn"
+          class="tn-keyboard__tooltip__item tn-keyboard__tooltip__confirm"
+          hover-class="tn-keybord__tooltip__confirm--hover"
+          :hover-stay-time="150"
+          @tap="onConfirm"
+        >
+          {{ confirmBtn ? resolvedConfirmText : ''}}
+        </view>
+      </view>
+      
+      <!-- 键盘内容 -->
+      <block v-if="mode === 'number' || mode === 'card'">
+        <tn-number-keyboard :mode="mode" :dotEnabled="dotEnabled" :randomEnabled="randomEnabled" @change="change" @backspace="backspaceClick"></tn-number-keyboard>
+      </block>
+      <block v-if="mode === 'car'">
+        <tn-car-keyboard :randomEnabled="randomEnabled" :switchEnMode="switchEnMode" @change="change" @backspace="backspaceClick"></tn-car-keyboard>
+      </block>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-keyboard',
+    props: {
+      // 控制键盘弹出收回
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 键盘类型
+      // number - 数字键盘 card - 身份证键盘 car - 车牌号码
+      mode: {
+        type: String,
+        default: 'number'
+      },
+      // 当mode = number时，是否显示'.'符号
+      dotEnabled: {
+        type: Boolean,
+        default: true
+      },
+      // 是否打乱顺序
+      randomEnabled: {
+        type: Boolean,
+        default: false
+      },
+      // 当mode = car，设置键盘中英文状态
+      switchEnMode: {
+        type: Boolean,
+        default: false
+      },
+      // 显示顶部工具条
+      tooltip: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示提示信息
+      showTips: {
+        type: Boolean,
+        default: true
+      },
+      // 提示文字
+      tips: {
+        type: String,
+        default: ''
+      },
+      // 是否显示取消按钮
+      cancelBtn: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示确认按钮
+      confirmBtn: {
+        type: Boolean,
+        default: true
+      },
+      // 取消按钮文字
+      cancelText: {
+        type: String,
+        default: null
+      },
+      // 确认按钮文字
+      confirmText: {
+        type: String,
+        default: null
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 是否可以通过点击遮罩进行关闭
+      maskCloseable: {
+      	type: Boolean,
+      	default: true
+      },
+      // 是否显示遮罩
+      mask: {
+        type: Boolean,
+        default: true
+      },
+      // z-index
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      resolvedCancelText() {
+        return this.cancelText === null ? getLocalizedText(this, '取消', 'Cancel') : this.cancelText
+      },
+      resolvedConfirmText() {
+        return this.confirmText === null ? getLocalizedText(this, '确认', 'Confirm') : this.confirmText
+      },
+      resolvedTips() {
+        if (this.tips) {
+          return this.tips
+        }
+        if (this.mode === 'number') {
+          return getLocalizedText(this, '数字键盘', 'Number Keyboard')
+        }
+        if (this.mode === 'card') {
+          return getLocalizedText(this, '身份证键盘', 'ID Keyboard')
+        }
+        return getLocalizedText(this, '车牌号码键盘', 'Vehicle Plate Keyboard')
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$t.zIndex.popup
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      change(e) {
+        this.$emit('change', e)
+      },
+      // 关闭键盘
+      popupClose() {
+        // 修改value的值
+        this.$emit('input', false)
+      },
+      // 输入完成
+      onConfirm() {
+        this.popupClose()
+        this.$emit('confirm')
+      },
+      // 输入取消
+      onCancel() {
+        this.popupClose()
+        this.$emit('cancel')
+      },
+      // 点击退格
+      backspaceClick() {
+        this.$emit('backspace')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-keyboard {
+    position: relative;
+    
+    &__tooltip {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      
+      &__item {
+        color: $tn-font-color;
+        flex: 0 0 33.3333333333%;
+        text-align: center;
+        font-size: 28rpx;
+        padding: 20rpx 10rpx;
+      }
+      
+      &__cancel {
+        text-align: left;
+        flex-grow: 1;
+        flex-wrap: 0;
+        padding-left: 40rpx;
+        color: $tn-content-color;
+        
+        &--hover {
+          color: $tn-font-color;
+        }
+      }
+      
+      &__confirm {
+        text-align: right;
+        flex-grow: 1;
+        flex-wrap: 0;
+        padding-right: 40rpx;
+        color: $tn-main-color;
+        
+        &--hover {
+          color: $tn-color-blue;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-landscape/tn-landscape.vue b/tuniao-ui/components/tn-landscape/tn-landscape.vue
new file mode 100644
index 0000000..6e0d425
--- /dev/null
+++ b/tuniao-ui/components/tn-landscape/tn-landscape.vue
@@ -0,0 +1,225 @@
+<template>
+  <view class="tn-landscape-class tn-landscape">
+    <view v-if="showValue" class="tn-landscape__container" :style="[containerStyle]">
+      <slot></slot>
+      <view
+        v-if="closeBtn"
+        class="tn-landscape__icon tn-icon-close-circle"
+        :class="[{
+          'tn-landscape__icon--left-top': closePosition === 'leftTop',
+          'tn-landscape__icon--right-top': closePosition === 'rightTop',
+          'tn-landscape__icon--bottom': closePosition === 'bottom'
+        }]"
+        :style="[closeBtnStyle]"
+        @tap="close"
+      ></view>
+    </view>
+    <view
+      v-if="mask"
+      class="tn-landscape__mask"
+      :class="[{'tn-landscape__mask--show': showValue}]"
+      :style="[maskStyle]"
+      @tap="closeMask"
+    ></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-landscape',
+    props: {
+      // 显示
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 显示关闭图标
+      closeBtn: {
+        type: Boolean,
+        default: true
+      },
+      // 关闭图标颜色
+      closeColor: {
+        type: String,
+        default: ''
+      },
+      // 关闭图标大小，单位rpx
+      closeSize: {
+        type: Number,
+        default: 0
+      },
+      // 关闭图标位置
+      // leftTop -> 左上角 rightTop -> 右上角 bottom -> 底部
+      closePosition: {
+        type: String,
+        default: 'rightTop'
+      },
+      // 关闭图标top值，单位rpx
+      // 当关闭图标在leftTop或者rightTop时生效
+      closeTop: {
+        type: Number,
+        default: 0
+      },
+      // 关闭图标right值，单位rpx
+      // 当关闭图标在RightTop时生效
+      closeRight: {
+        type: Number,
+        default: 0
+      },
+      // 关闭图标bottom值，单位rpx
+      // 当关闭图标在bottom时生效
+      closeBottom: {
+        type: Number,
+        default: 0
+      },
+      // 关闭图标left值，单位rpx
+      // 当关闭图标在leftTop时生效
+      closeLeft: {
+        type: Number,
+        default: 0
+      },
+      // 显示遮罩
+      mask: {
+        type: Boolean,
+        default: true
+      },
+      // 点击遮罩可以关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      containerStyle() {
+        let style = {}
+        style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.landsacpe
+        return style
+      },
+      closeBtnStyle() {
+        let style = {}
+        if (this.closePosition === 'leftTop') {
+          if (this.closeTop) {
+            style.top = this.closeTop + 'rpx'
+          }
+          if (this.closeLeft) {
+            style.left = this.closeLeft + 'rpx'
+          }
+        } else if (this.closePosition === 'rightTop') {
+          if (this.closeTop) {
+            style.top = this.closeTop + 'rpx'
+          }
+          if (this.closeRight) {
+            style.right = this.closeRight + 'rpx'
+          }
+        } else if (this.closePosition === 'bottom') {
+          if (this.closeBottom) {
+            style.bottom = this.closeBottom + 'rpx'
+          }
+        }
+        if (this.closeSize) {
+          style.fontSize = this.closeSize + 'rpx'
+        }
+        if (this.closeColor) {
+          style.color = this.closeColor
+        }
+        return style
+      },
+      maskStyle() {
+        let style = {}
+        style.zIndex = this.zIndex ? this.zIndex - 1 : this.$t.zIndex.landsacpe - 1
+        return style
+      }
+    },
+    watch: {
+      show: {
+        handler(val) {
+          this.showValue = val
+        },
+        immediate: true
+      }
+    },
+    data() {
+      return {
+        showValue: false
+      }
+    },
+    methods: {
+      // 关闭压屏窗
+      close() {
+        this.showValue = false
+        this.$emit('close')
+      },
+      // 点击遮罩关闭
+      closeMask() {
+        if (!this.maskCloseable) return
+        this.close()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-landscape {
+    width: 100%;
+    overflow: hidden;
+    
+    &__container {
+      max-width: 100%;
+      position: fixed;
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    
+    &__icon {
+      position: absolute;
+      text-align: center;
+      font-size: 50rpx;
+      color: #FFFFFF;
+      
+      &--left-top {
+        top: -40rpx;
+        left: 20rpx;
+      }
+      
+      &--right-top {
+        top: -40rpx;
+        right: 40rpx;
+      }
+      
+      &--bottom {
+        left: 50%;
+        bottom: -40rpx;
+        transform: translateX(-50%);
+      }
+    }
+    
+    &__mask {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      background-color: $tn-mask-bg-color;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      transform: scale3d(1, 1, 0);
+      transition: all 0.25s ease-in;
+      
+      &--show {
+        opacity: 1 !important;
+        transform: scale3d(1, 1, 1);
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue b/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue
new file mode 100644
index 0000000..09c16a7
--- /dev/null
+++ b/tuniao-ui/components/tn-lazy-load/tn-lazy-load.vue
@@ -0,0 +1,254 @@
+<template>
+  <view class="tn-lazy-load-class tn-lazy-load">
+    <view
+      class="tn-lazy-load__item"
+      :class="[`tn-lazy-load__item--${elIndex}`]"
+      :style="[lazyLoadItemStyle]"
+    >
+      <view class="tn-lazy-load__item__content">
+        <image
+          v-if="!error"
+          class="tn-lazy-load__item__image"
+          :style="[imageStyle]"
+          :src="show ? image : loadingImg"
+          :mode="imgMode"
+          @load="handleImgLoaded"
+          @error="handleImgError"
+          @tap="handleImgClick"
+        ></image>
+        <image
+          v-else
+          class="tn-lazy-load__item__image tn-lazy-load__item__image--error"
+          :style="[imageStyle]"
+          :src="errorImg"
+          :mode="imgMode"
+          @load="handleErrorImgLoaded"
+          @tap="handleImgClick"
+        ></image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-lazy-load',
+    props: {
+      // 组件标识
+      index: {
+        type: [String, Number],
+        default: ''
+      },
+      // 待显示的图片地址
+      image: {
+        type: String,
+        default: ''
+      },
+      // 图片裁剪模式
+      imgMode: {
+        type: String,
+        default: 'scaleToFill'
+      },
+      // 占位图片路径
+      loadingImg: {
+      	type: String,
+      	// default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII='
+      },
+      // 加载失败的错误占位图
+      errorImg: {
+      	type: String,
+      	default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdDMjhENDYyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdDMjhENDcyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0MyOEQ0NDJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0MyOEQ0NTJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhLwhikAAAAzUExURZWVldfX162t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'
+      },
+      // 图片进入可见区域前多少像素前，单位rpx，开始加载图片
+      // 负数为图片超出屏幕底部多少像素后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发（图片还没出现在屏幕上）
+      threshold: {
+        type: [Number, String],
+        default: 100
+      },
+      // 是否开启过渡效果
+      isEffect: {
+        type: Boolean,
+        default: true
+      },
+      // 动画过渡时间
+      duration: {
+        type: [String, Number],
+        default: 500
+      },
+      // 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显
+      // linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
+      effect: {
+      	type: String,
+      	default: 'ease-in-out'
+      },
+      // 图片高度，单位rpx
+      height: {
+        type: [String, Number],
+        default: 450
+      },
+      // 图片圆角
+      borderRadius: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      thresholdValue() {
+        // 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原
+        let threshold = uni.upx2px(Math.abs(this.threshold))
+        return this.threshold < 0 ? -threshold : threshold
+      },
+      lazyLoadItemStyle() {
+        let style = {}
+        style.opacity = Number(this.opacity)
+        if (this.borderRadius) {
+          style.borderRadius = this.borderRadius
+        }
+        // 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
+        style.transition = `opacity ${this.time / 1000}s ${this.effect}`
+        style.height = this.$t.string.getLengthUnitValue(this.height)
+        return style
+      },
+      imageStyle() {
+        let style = {}
+        if (typeof this.height === 'string' && this.height.indexOf('%') === -1) {
+          style.height = this.$t.string.getLengthUnitValue(this.height)
+        }
+        return style
+      }
+    },
+    watch: {
+      show(val) {
+        // 如果不开启过渡效果直接返回
+        if (!this.effect) return
+        this.time = 0
+        // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
+        this.opacity = 0
+        setTimeout(() => {
+          this.time = this.duration
+          this.opacity = 1
+        }, 30)
+      },
+      image(val) {
+        // 修改图片后重置部分变量
+        if (!val) {
+          // 如果传入null或者''，或者undefined，标记为错误状态
+          this.error = true
+        } else {
+          this.init()
+          this.error = false
+        }
+      }
+    },
+    data() {
+      return {
+        elIndex: this.$t.uuid(),
+        // 显示图片
+        show: false,
+        // 图片透明度
+        opacity: 1,
+        // 动画时间
+        time: this.duration,
+        // 懒加载状态
+        // loadlazy-懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
+        loadStatus: '',
+        // 图片加载失败
+        error: false
+      }
+    },
+    created() {
+      // 由于一些特殊原因，不能将此变量放到data中定义
+      this.observer = {}
+      this.observerName = 'lazyLoadContentObserver'
+    },
+    mounted() {
+      // 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
+      this.$nextTick(() => {
+        uni.$once('tOnLazyLoadReachBottom', () => {
+          if (!this.show) this.show = true
+        })
+      })
+      // mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
+      setTimeout(() => {
+        this.disconnectObserver(this.observerName)
+        const contentObserver = uni.createIntersectionObserver(this)
+        contentObserver.relativeToViewport({
+          bottom: this.thresholdValue
+        }).observe(`.tn-lazy-load__item--${this.elIndex}`, (res) => {
+          if (res.intersectionRatio > 0) {
+            // 懒加载状态改变
+            this.show = true
+            // 如果图片已经加载，去掉监听，减少性能消耗
+            this.disconnectObserver(this.observerName)
+          }
+        })
+        this[this.observerName] = contentObserver
+      }, 50)
+    },
+    methods: {
+      // 初始化
+      init() {
+        this.error = false
+        this.loadStatus = ''
+      },
+      // 处理图片点击事件
+      handleImgClick() {
+        let whichImg = ''
+        // 如果show为false，则表示图片还没有开始加载，点击的是最开始占位图
+        if (this.show === false) whichImg = 'lazyImg'
+        // 如果error为true，则表示图片加载失败，点击的是错误占位图
+        else if (this.error === true) whichImg = 'errorImg'
+        // 点击了正常的图片
+        else whichImg = 'realImg'
+        
+        this.$emit('click', {
+          index: this.index,
+          whichImg: whichImg
+        })
+      },
+      // 处理图片加载完成事件，通过show来区分是占位图触发还是加载真正的图片触发
+      handleImgLoaded() {
+        if (this.loadStatus = '') {
+          // 占位图加载完成
+          this.loadStatus = 'lazyed'
+        }
+        else if (this.loadStatus == 'lazyed') {
+          // 真正的图片加载完成
+          this.loadStatus = 'loaded'
+          this.$emit('loaded', this.index)
+        }
+      },
+      // 处理错误图片加载完成
+      handleErrorImgLoaded() {
+        this.$emit('error', this.index)
+      },
+      // 处理图片加载失败
+      handleImgError() {
+        this.error = true
+      },
+      disconnectObserver(observerName) {
+        const observer = this[observerName]
+        observer && observer.disconnect()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-lazy-load {
+    &__item {
+      background-color: $tn-bg-gray-color;
+      overflow: hidden;
+      
+      &__image {
+        // 解决父容器会多出3px的问题
+        display: block;
+        width: 100%;
+        // 骗系统开启硬件加速
+        transform: transition3d(0, 0, 0);
+        // 防止图片加载“闪一下”
+        will-change: transform;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-line-progress/tn-line-progress.vue b/tuniao-ui/components/tn-line-progress/tn-line-progress.vue
new file mode 100644
index 0000000..79b1275
--- /dev/null
+++ b/tuniao-ui/components/tn-line-progress/tn-line-progress.vue
@@ -0,0 +1,143 @@
+<template>
+  <view
+    class="tn-line-progress-class tn-line-progress"
+    :style="[progressStyle]"
+  >
+    <view
+      class="tn-line-progress--active"
+      :class="[
+        $t.color.getBackgroundColorInternalClass(activeColor),
+        striped ? stripedAnimation ? 'tn-line-progress__striped tn-line-progress__striped--active' : 'tn-line-progress__striped' : '',
+      ]"
+      :style="[progressActiveStyle]"
+    >
+      <slot v-if="$slots.default || $slots.$default"></slot>
+      <block v-else-if="showPercent">{{ percent + '%' }}</block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-line-progress',
+    props: {
+      // 进度（百分比）
+      percent: {
+        type: Number,
+        default: 0,
+        validator: val => {
+          return val >= 0 && val <= 100
+        }
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 是否显示为圆角
+      round: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示条纹
+      striped: {
+        type: Boolean,
+        default: false
+      },
+      // 条纹是否运动
+      stripedAnimation: {
+        type: Boolean,
+        default: true
+      },
+      // 激活部分颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 非激活部分颜色
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 是否显示进度条内部百分比值
+      showPercent: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      progressStyle() {
+        let style = {}
+        style.borderRadius = this.round ? '100rpx' : 0
+        if (this.height) {
+          style.height = this.$t.string.getLengthUnitValue(this.height)
+        }
+        if (this.inactiveColor) {
+          style.backgroundColor = this.inactiveColor
+        }
+        return style
+      },
+      progressActiveStyle() {
+        let style = {}
+        style.width = this.percent + '%'
+        if (this.$t.color.getBackgroundColorStyle(this.activeColor)) {
+          style.backgroundColor = this.$t.color.getBackgroundColorStyle(this.activeColor)
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-line-progress {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    width: 100%;
+    height: 28rpx;
+    overflow: hidden;
+    border-radius: 100rpx;
+    background-color: $tn-progress-bg-color;
+    
+    &--active {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-items: flex-end;
+      justify-content: space-around;
+      width: 0;
+      height: 100%;
+      font-size: 20rpx;
+      color: #FFFFFF;
+      background-color: $tn-main-color;
+      transition: all 0.3s ease;
+    }
+    
+    &__striped {
+      background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+      background-size: 80rpx 80rpx;
+      
+      &--active {
+        animation: progress-striped 2s linear infinite;
+      }
+    }
+  }
+  
+  @keyframes progress-striped {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 80rpx 0;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-list-cell/tn-list-cell.vue b/tuniao-ui/components/tn-list-cell/tn-list-cell.vue
new file mode 100644
index 0000000..514ebb5
--- /dev/null
+++ b/tuniao-ui/components/tn-list-cell/tn-list-cell.vue
@@ -0,0 +1,209 @@
+<template>
+  <view
+    class="tn-list-cell-class tn-list-cell"
+    :class="[
+      backgroundColorClass,
+      fontColorClass,
+      cellClass
+    ]"
+    :hover-class="hover ? 'tn-hover' : ''"
+    :hover-stay-time="150"
+    :style="[cellStyle]"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    name: 'tn-list-cell',
+    props: {
+      // 列表序号
+      index: {
+        type: [Number, String],
+        default: '0'
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 是否有箭头
+      arrow: {
+        type: Boolean,
+        default: false
+      },
+      //箭头是否有偏移距离
+      arrowRight: {
+      	type: Boolean,
+      	default: true
+      },
+      // 是否有点击效果
+      hover: {
+        type: Boolean,
+        default: false
+      },
+      // 隐藏线条
+      unlined: {
+        type: Boolean,
+        default: false
+      },
+      //线条是否有左偏移距离
+      lineLeft: {
+      	type: Boolean,
+      	default: true
+      },
+      //线条是否有右偏移距离
+      lineRight: {
+      	type: Boolean,
+      	default: true
+      },
+      //是否加圆角
+      radius: {
+      	type: Boolean,
+      	default: false
+      }
+    },
+    computed: {
+      cellClass() {
+        let clazz = ''
+        
+        if (this.arrow) {
+          clazz += ' tn-list-cell--arrow'
+          if (!this.arrowRight) {
+            clazz += ' tn-list-cell--arrow--none-right'
+          }
+        }
+        
+        if (this.unlined) {
+          clazz += ' tn-list-cell--unlined'
+        } else {
+          if (this.lineLeft) {
+            clazz += ' tn-list-cell--line-left'
+          }
+          if (this.lineRight) {
+            clazz += ' tn-list-cell--line-right'
+          }
+        }
+        
+        if (this.radius) {
+          clazz += ' tn-list-cell--radius'
+        }
+        
+        return clazz
+      },
+      cellStyle() {
+        let style = {}
+        
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        
+        return style
+      },
+      
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick() {
+        this.$emit("click", {
+          index: Number(this.index)
+        })
+        this.$emit("tap", {
+          index: Number(this.index)
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-list-cell {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    color: $tn-font-color;
+    font-size: 28rpx;
+    padding: 26rpx 30rpx;
+    
+    &--radius {
+      border-radius: 12rpx;
+      overflow: hidden;
+    }
+    
+    &--arrow {
+      &::before {
+        content: " ";
+        position: absolute;
+        top: 50%;
+        right: 30rpx;
+        width: 20rpx;
+        height: 20rpx;
+        margin-top: -12rpx;
+        border-width: 4rpx 4rpx 0 0;
+        border-color: $tn-font-holder-color;
+        border-style: solid;
+        transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+      }
+      
+      &--none-right {
+        &::before {
+          right: 0 !important;
+        }
+      }
+    }
+    
+    &::after {
+      content: " ";
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      pointer-events: none;
+      border-bottom: 1px solid $tn-border-solid-color;
+      transform: scaleY(0.5) translateZ(0);
+      transform-origin: 0 100%;
+    }
+    
+    &--line-left {
+      &::after {
+        left: 30rpx !important;
+      }
+    }
+    
+    &--line-right {
+      &::after {
+        right: 30rpx !important;
+      }
+    }
+    
+    &--unlined {
+      &::after {
+        border-bottom: 0 !important;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-list-view/tn-list-view.vue b/tuniao-ui/components/tn-list-view/tn-list-view.vue
new file mode 100644
index 0000000..810e335
--- /dev/null
+++ b/tuniao-ui/components/tn-list-view/tn-list-view.vue
@@ -0,0 +1,184 @@
+<template>
+  <view
+    class="tn-list-view-class tn-list-view"
+    :class="[
+      backgroundColorClass,
+      viewClass
+    ]"
+    :style="[viewStyle]"
+  >
+    <view
+      v-if="showTitle"
+      class="tn-list-view__title"
+      :class="[
+        fontColorClass
+      ]"
+      :style="[titleStyle]"
+      @tap="handleClickTitle"
+    >{{ title }}</view>
+    
+    <view
+      v-else
+      :class="[{'tn-list-view__title--card': card}]"
+      @tap="handleClickTitle"
+    >
+      <slot name="title"></slot>
+    </view>
+    
+    <view
+      class="tn-list-view__content tn-border-solid-top tn-border-solid-bottom"
+      :class="[contentClass]"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    name: 'tn-list-view',
+    props: {
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 去掉边框 上边框 top, 下边框 bottom, 所有边框 all
+      unlined: {
+        type: String,
+        default: 'all'
+      },
+      // 上外边距
+      marginTop: {
+        type: String,
+        default: ''
+      },
+      // 内容是否显示为卡片模式
+      card: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自定义标题
+      customTitle: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      showTitle() {
+        return !this.customTitle && this.title
+      },
+      viewClass() {
+        let clazz = ''
+        
+        if (this.card) {
+          clazz += ' tn-list-view--card'
+        }
+        
+        return clazz
+      },
+      viewStyle() {
+        let style = {}
+        
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        if (this.marginTop) {
+          style.marginTop = this.marginTop
+        }
+        
+        return style
+      },
+      titleStyle() {
+        let style = {}
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        
+        return style
+      },
+      contentClass() {
+        let clazz = ''
+        
+        if (this.card) {
+          clazz += ' tn-list-view__content--card'
+        }
+        
+        switch(this.unlined) {
+          case 'top':
+            clazz += ' tn-none-border-top'
+            break
+          case 'bottom':
+            clazz += ' tn-none-border-bottom'
+            break
+          case 'all':
+            clazz += ' tn-none-border'
+            break
+        }
+        
+        return clazz
+      }
+    },
+    data () {
+      return {
+        kindShowFlag: this.showKind
+      }
+    },
+    methods: {
+      // 处理标题点击事件
+      handleClickTitle() {
+        if (!this.kindList) return
+        this.kindShowFlag = !this.kindShowFlag
+        this.$emit("clickTitle", {})
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-list-view {
+    background-color: #FFFFFF;
+    
+    &__title {
+      width: 100%;
+      padding: 30rpx;
+      font-size: 30rpx;
+      line-height: 30rpx;
+      box-sizing: border-box;
+      
+      &--card {
+        // margin: 0rpx 30rpx;
+      }
+    }
+    
+    &__content {
+      width: 100%;
+      position: relative;
+      border-radius: 0;
+      
+      &--card {
+        // width: auto;
+        // overflow: hidden;
+        // margin-right: 30rpx;
+        // margin-left: 30rpx;
+        // border-radius: 20rpx
+      }
+    }
+    
+    &--card {
+      // padding-bottom: 30rpx;
+      border-radius: 20rpx;
+      overflow: hidden;
+    }
+    
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-load-more/tn-load-more.vue b/tuniao-ui/components/tn-load-more/tn-load-more.vue
new file mode 100644
index 0000000..dfe943f
--- /dev/null
+++ b/tuniao-ui/components/tn-load-more/tn-load-more.vue
@@ -0,0 +1,195 @@
+<template>
+  <view class="tn-load-more-class tn-load-more">
+    <view
+      class="tn-load-more__wrap"
+      :class="[backgroundColorClass]"
+      :style="[loadStyle]"
+    >
+      <view class="tn-load-more__line"></view>
+      <view
+        class="tn-load-more__content"
+        :class="[{'tn-load-more__content--more': (status === 'loadmore' || status === 'nomore')}]"
+      >
+        <view class="tn-load-more__loading">
+          <tn-loading
+            class="tn-load-more__loading__icon"
+            :mode="loadingIconType"
+            :show="status === 'loading' && loadingIcon"
+            :color="loadingIconColor"
+          ></tn-loading>
+        </view>
+        <view
+          class="tn-load-more__text"
+          :class="[fontColorClass, {'tn-load-more__text--dot': (status === 'nomore' && dot)}]"
+          :style="[loadTextStyle]"
+        >{{ showText }}</view>
+      </view>
+      <view class="tn-load-more__line"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-load-more',
+    mixins: [componentsColorMixin],
+    props: {
+      // 加载状态
+      // loadmore -> 加载更多
+      // loading -> 加载中
+      // nomore -> 没有更多
+      status: {
+        type: String,
+        default: 'loadmore'
+      },
+      // 显示加载图标
+      loadingIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 加载图标样式，参考tn-loading组件的加载类型
+      loadingIconType: {
+        type: String,
+        default: 'circle'
+      },
+      // 在圆圈加载状态下，圆圈的颜色
+      loadingIconColor: {
+        type: String,
+        default: ''
+      },
+      // 显示的文字
+      loadText: {
+        type: Object,
+        default() {
+          return {
+            loadmore: '',
+            loading: '',
+            nomore: ''
+          }
+        }
+      },
+      // 是否显示粗点，在nomore状态下生效
+      dot: {
+        type: Boolean,
+        default: false
+      },
+      // 自定义组件样式
+      customStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      loadStyle() {
+        let style = {}
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        // 合并用户自定义样式
+        if (Object.keys(this.customStyle).length > 0) {
+          Object.assign(style, this.customStyle)
+        }
+        return style
+      },
+      loadTextStyle() {
+        let style = {}
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSizeStyle) {
+          style.fontSize = this.fontSizeStyle
+          style.lineHeight = this.$t.string.getLengthUnitValue(this.fontSize + 2, this.fontUnit)
+        }
+        return style
+      },
+      // 显示的提示文字
+      showText() {
+        let text = ''
+        if (this.status === 'loadmore') text = this.loadText.loadmore || getLocalizedText(this, '加载更多', 'Load More')
+        else if (this.status === 'loading') text = this.loadText.loading || getLocalizedText(this, '正在加载...', 'Loading...')
+        else if (this.status === 'nomore' && this.dot) text = this.dotText
+        else text = this.loadText.nomore || getLocalizedText(this, '没有更多了', 'No more data')
+        
+        return text
+      }
+    },
+    data() {
+      return {
+        // 粗点
+        dotText: '●'
+      }
+    },
+    methods: {
+      // 处理加载更多事件
+      loadMore() {
+        // 只有在 loadmore 状态下点击才会发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
+        if (this.status === 'loadmore') this.$emit('loadmore')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-load-more {
+    
+    &__wrap {
+      background-color: transparent;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      color: $tn-content-color;
+    }
+    
+    &__line {
+      vertical-align: middle;
+      border: 1px solid $tn-content-color;
+      width: 50rpx;
+      transform: scaleY(0.5);
+    }
+    
+    &__content {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 0 12rpx;
+      
+      &--more {
+        position: relative;
+      }
+    }
+    
+    &__loading {
+      margin-right: 8rpx;
+      
+      &__icon {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    
+    &__text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      line-height: 30rpx;
+      
+      &--dot {
+        font-size: 28rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-loading/tn-loading.vue b/tuniao-ui/components/tn-loading/tn-loading.vue
new file mode 100644
index 0000000..f623c93
--- /dev/null
+++ b/tuniao-ui/components/tn-loading/tn-loading.vue
@@ -0,0 +1,114 @@
+<template>
+  <view
+    v-if="show"
+    class="tn-loading-class tn-loading"
+    :class="[
+      `tn-loading-${mode}`,
+      animation ? `tn-loading-${mode}--animation` : ''
+    ]"
+    :style="[loadStyle]"
+  ></view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-loading',
+    props: {
+      // 动画类型
+      // circle 圆圈 flower 花朵形状
+      mode: {
+        type: String,
+        default: 'circle'
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示加载动画
+      animation: {
+        type: Boolean,
+        default: true
+      },
+      // 圆圈颜色
+      color: {
+        type: String,
+        default: ''
+      },
+      // 图标大小
+      size: {
+        type: Number,
+        default: 34
+      }
+    },
+    computed: {
+      // 加载动画圆圈的样式
+      loadStyle() {
+        let style = {}
+        style.width = this.size + 'rpx'
+        style.height = style.width
+        if (this.mode === 'circle') style.borderColor = `#E6E6E6 #E6E6E6 #E6E6E6 ${this.color ? this.color : '#AAAAAA'}`
+        
+        return style
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-loading-circle {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    vertical-align: middle;
+    width: 28rpx;
+    height: 28rpx;
+    background: 0 0;
+    border-radius: 50%;
+    border: 2px solid;
+    border-color: #E6E6E6 #E6E6E6 #E6E6E6 #AAAAAA;
+    
+    &--animation {
+      animation: tn-circle 1s linear infinite;
+      -webkit-animation: tn-circle 1s linear infinite;
+    }
+  }
+  
+  .tn-loading-flower {
+    display: inline-block;
+    vertical-align: middle;
+    width: 28rpx;
+    height: 28rpx;
+    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;;
+    background-size: 100%;
+    
+    &--animation {
+      animation: tn-flower 1s steps(12) infinite;
+      -webkit-animation: tn-flower 1s steps(12) infinite;
+    }
+  }
+  
+  @keyframes tn-flower {
+  	0% {
+  		transform: rotate(0deg);
+  		-webkit-transform: rotate(0deg);
+  	}
+  
+  	to {
+  		transform: rotate(360deg);
+  		-webkit-transform: rotate(360deg);
+  	}
+  }
+  
+  @keyframes tn-circle {
+  	0% {
+  		transform: rotate(0);
+  		-webkit-transform: rotate(0);
+  	}
+  
+  	100% {
+  		transform: rotate(360deg);
+  		-webkit-transform: rotate(360deg);
+  	}
+  }
+</style>
diff --git a/tuniao-ui/components/tn-modal/tn-modal.vue b/tuniao-ui/components/tn-modal/tn-modal.vue
new file mode 100644
index 0000000..ddcf234
--- /dev/null
+++ b/tuniao-ui/components/tn-modal/tn-modal.vue
@@ -0,0 +1,246 @@
+<template>
+  <view v-if="value" class="tn-modal-class tn-modal">
+    <tn-popup
+      v-model="value"
+      mode="center"
+      :popup="false"
+      :borderRadius="radius"
+      :width="width"
+      :zoom="zoom"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :maskCloseable="maskCloseable"
+      :zIndex="zIndex"
+      :closeBtn="showCloseBtn"
+      @close="close"
+    >
+      <!-- 内容 -->
+      <view
+        class="tn-modal__box"
+        :class="[
+          backgroundColorClass
+        ]"
+        :style="[boxStyle]"
+      >
+        <!-- 不是自定义弹框内容 -->
+        <view v-if="!custom">
+          <view class="tn-modal__box__title" v-if="title && title !== ''">{{ title }}</view>
+          <view
+            class="tn-modal__box__content"
+            :class="[
+              fontColorClass,
+              contentClass
+            ]"
+            :style="contentStyle"
+          >{{ content }}</view>
+          <view v-if="button && button.length" class="tn-modal__box__btn-box" :class="[button.length != 2 ? 'tn-flex-direction-column' : '']">
+            <block v-for="(item, index) in button" :key="index">
+              <tn-button
+                width="100%"
+                height="68rpx"
+                :fontSize="26"
+                :backgroundColor="item.backgroundColor || ''"
+                :fontColor="item.fontColor || ''"
+                :plain="item.plain || false"
+                :shape="item.shape || 'round'"
+                :class="[
+                  button.length > 2 ? 'tn-margin-bottom' : ''
+                ]"
+                @click="handleClick(index)"
+                :style="{
+                  width: button.length != 2 ? '80%' : '46%'
+                }"
+              >
+                {{ item.text }}
+              </tn-button>
+            </block>
+          </view>
+        </view>
+        <view v-else>
+          <slot></slot>
+        </view>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-modal',
+    props: {
+      // 显示控制
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 弹框宽度
+      width: {
+        type: String,
+        default: '84%'
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 圆角
+      radius: {
+        type: Number,
+        default: 12
+      },
+      // 标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 内容
+      content: {
+        type: String,
+        default: ''
+      },
+      // 按钮内容 设置参数与button组件的参数一致
+      // {
+      //   text: '确定',
+      //   backgroundColor: 'red',
+      //   fontColor: 'white',
+      //   plain: true,
+      //   shape: ''
+      // }
+      button: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      },
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 点击遮罩是否可以关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示右上角关闭按钮
+      showCloseBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 放大动画
+      zoom: {
+        type: Boolean,
+        default: true
+      },
+      // 自定义弹框内容
+      custom: {
+        type: Boolean,
+        default: false
+      },
+      // 弹框的z-index
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      boxStyle() {
+        let style = {}
+        
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        return style
+      },
+      contentClass() {
+        let clazz = ''
+        if (this.title) {
+          clazz += ' tn-margin-top'
+        } else {
+          clazz += ' tn-modal__box__content--no-title'
+        }
+        
+        return clazz
+      },
+      contentStyle() {
+        let style = {}
+        
+        if (this.fontSize) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        
+        return style
+      },
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 处理按钮点击事件
+      handleClick(index) {
+        if (!this.value) return
+        this.$emit("click", {
+          index: Number(index)
+        })
+      },
+      // 处理关闭事件
+      close() {
+        this.$emit("cancel")
+        this.$emit('input', false)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-modal {
+    
+    &__box {
+      position: relative;
+      box-sizing: border-box;
+      background-color: #FFFFFF;
+      padding: 40rpx 64rpx;
+      
+      &__title {
+        text-align: center;
+        font-size: 34rpx;
+        color: #333;
+        padding-top: 20rpx;
+        font-weight: bold;
+      }
+      
+      &__content {
+        text-align: center;
+        padding-bottom: 30rpx;
+        color: $tn-font-color;
+        font-size: 28rpx;
+        
+        &--no-title {
+          padding-bottom: 0rpx !important;
+        }
+      }
+      
+      &__btn-box {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      
+      &__content ~ &__btn-box {
+        margin-top: 30rpx;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue b/tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
new file mode 100644
index 0000000..0fcb411
--- /dev/null
+++ b/tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue
@@ -0,0 +1,370 @@
+<template>
+  <view
+    class="tn-custom-nav-bar-class tn-custom-nav-bar"
+    :style="[navBarStyle]"
+  >
+  	<view
+      class="tn-custom-nav-bar__bar"
+      :class="[barClass]"
+      :style="[barStyle]"
+    >
+      <view v-if="isBack">
+        <view v-if="customBack">
+          <view 
+            :style="{
+              width: customBackStyleInfo.width + 'px',
+              height: customBackStyleInfo.height + 'px',
+              marginLeft: customBackStyleInfo.left + 'px'
+            }"
+          >
+            <slot name="back"></slot>
+          </view>
+        </view>
+        <view v-else class="tn-custom-nav-bar__bar__action" @tap="handlerBack">
+        	<text class="tn-custom-nav-bar__bar__action--nav-back" :class="[`tn-icon-${backIcon}`]"></text>
+        	<text class="tn-custom-nav-bar__bar__action--nav-back-text" v-if="resolvedBackTitle">{{ resolvedBackTitle }}</text>
+        </view>
+      </view>
+  		<view class="tn-custom-nav-bar__bar__content" :style="[contentStyle]">
+  			<slot></slot>
+  		</view>
+  		<view>
+        <slot name="right"></slot>
+      </view>
+  	</view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  import { buildHomePageUrl } from '../../../utils/app-state'
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+  export default {
+    name: 'tn-nav-bar',
+    mixins: [componentsColorMixin],
+    props: {
+      // 层级
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 导航栏的高度
+      height: {
+        type: Number,
+        default: 0
+      },
+      // 高度单位
+      unit: {
+        type: String,
+        default: 'px'
+      },
+      // 是否显示返回按钮
+      isBack: {
+        type: Boolean,
+        default: true
+      },
+      // 返回按钮的图标
+      backIcon: {
+        type: String,
+        default: 'left'
+      },
+      // 返回按钮旁显示的文字
+      backTitle: {
+        type: String,
+        default: null
+      },
+      // 透明状态栏
+      alpha: {
+        type: Boolean,
+        default: false
+      },
+      // 是否固定在顶部
+      fixed: {
+        type: Boolean,
+        default: true
+      },
+      // 是否显示底部阴影
+      bottomShadow: {
+        type: Boolean,
+        default: true
+      },
+      // 是否自定义返回按钮
+      customBack: {
+        type: Boolean,
+        default: false
+      },
+      // 返回前回调
+      beforeBack: {
+        type: Function,
+        default: null
+      }
+    },
+    computed: {
+      navBarStyle() {
+        let style = {}
+        style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
+        if (this.fixed) {
+          style.position = 'fixed'
+        }
+        style.zIndex = this.elZIndex
+        
+        return style
+      },
+      barClass() {
+        let clazz = ''
+        if (this.backgroundColorClass) {
+          clazz += ` ${this.backgroundColorClass}`
+        }
+        if (this.fontColorClass) {
+          clazz += `${this.fontColorClass}`
+        }
+        if (this.fixed) {
+          clazz += ' tn-custom-nav-bar__bar--fixed'
+        }
+        if (this.alpha) {
+          clazz += ' tn-custom-nav-bar__bar--alpha'
+        }
+        if (this.bottomShadow) {
+          clazz += ' tn-custom-nav-bar__bar--bottom-shadow'
+        }
+        
+        return clazz
+      },
+      barStyle() {
+        let style = {}
+        style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
+        
+        if (this.fixed) {
+          style.paddingTop = this.statusBarHeight + 'px'
+        }
+        
+        if(!this.backgroundColorClass) {
+          style.backgroundColor = this.backgroundColor !== '' ? this.backgroundColor : '#FFFFFF'
+        }
+        if (!this.fontColorClass && this.fontColor) {
+          style.color= this.fontColor
+        }
+        
+        style.zIndex = this.elZIndex
+        
+        return style
+      },
+      contentStyle() {
+        let style = {}
+        style.top = this.fixed ? this.statusBarHeight + 'px' : '0px'
+        style.height = this.height === 0 ? (this.customBarHeight - this.statusBarHeight) + this.unit : this.height + this.unit
+        style.lineHeight = style.height
+        
+        if (this.isBack) {
+          if (this.customBack) {
+            const width = (this.customBackStyleInfo.width + this.customBackStyleInfo.left) * 2
+            style.width = `calc(100% - ${width}px)`
+          } else {
+            style.width = 'calc(100% - 340rpx)'
+          }
+        } else {
+          style.width = '100%'
+        }
+        
+        return style
+      },
+      resolvedBackTitle() {
+        return this.backTitle === null ? getLocalizedText(this, '返回', 'Back') : this.backTitle
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$t.zIndex.navbar
+      }
+    },
+    data() {
+      return {
+        // 状态栏的高度
+        statusBarHeight: 0,
+        // 自定义导航栏的高度
+        customBarHeight: 0,
+        // 自定义返回按钮时，返回容器的宽高边距信息
+        customBackStyleInfo: {
+          width: 86,
+          height: 32,
+          left: 15
+        }
+      }
+    },
+    mounted() {
+      // 获取vuex中的自定义顶栏的高度
+      this.updateNavBarInfo()
+    },
+    created() {
+      // 获取胶囊信息
+      // #ifdef MP-WEIXIN
+      let custom = wx.getMenuButtonBoundingClientRect()
+      this.customBackStyleInfo.width = custom.width
+      this.customBackStyleInfo.height = custom.height
+      this.customBackStyleInfo.left = uni.upx2px(750) - custom.right
+      // #endif
+    },
+    methods: {
+      // 更新导航栏的高度
+      async updateNavBarInfo() {
+        // 获取vuex中的自定义顶栏的高度
+        let customBarHeight = this.vuex_custom_bar_height
+        let statusBarHeight = this.vuex_status_bar_height
+        // 如果获取失败则重新获取
+        if (!customBarHeight) {
+          try {
+            const navBarInfo = await this.$t.updateCustomBar()
+            customBarHeight = navBarInfo.customBarHeight
+            statusBarHeight = navBarInfo.statusBarHeight
+          } catch(e) {
+            if (!this._navBarRetryCount) this._navBarRetryCount = 0;
+            if (this._navBarRetryCount < 10) {
+              this._navBarRetryCount++;
+              setTimeout(() => {
+                this.updateNavBarInfo()
+              }, 50)
+            }
+            return
+          }
+        }
+        
+        // 更新vuex中的导航栏信息
+        this && this.$t.vuex('vuex_status_bar_height', statusBarHeight)
+        this && this.$t.vuex('vuex_custom_bar_height', customBarHeight)
+        
+        this.customBarHeight = customBarHeight
+        this.statusBarHeight = statusBarHeight
+      },
+      // 处理返回事件
+      async handlerBack() {
+        if (this.beforeBack && typeof(this.beforeBack) === 'function') {
+          // 执行回调，同时传入索引当作参数
+          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
+          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
+          let beforeBack = this.beforeBack.bind(this.$t.$parent.call(this))()
+          // 判断是否返回了Promise
+          if (!!beforeBack && typeof beforeBack.then === 'function') {
+            await beforeBack.then(res => {
+              // Promise返回成功
+              this.navBack()
+            }).catch(err => {})
+          } else if (beforeBack === true) {
+            this.navBack()
+          }
+        } else {
+          this.navBack()
+        }
+      },
+      // 返回上一页
+      navBack() {
+        
+        // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
+        const pages = getCurrentPages()
+        if (pages && pages.length > 0) {
+          const firstPage = pages[0]
+          if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
+            uni.reLaunch({
+              url: buildHomePageUrl()
+            })
+          } else {
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+        } else {
+          uni.reLaunch({
+            url: buildHomePageUrl()
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-custom-nav-bar {
+    display: block;
+    position: relative;
+    
+    &__bar {
+      display: flex;
+      position: relative;
+      align-items: center;
+      min-height: 100rpx;
+      justify-content: space-between;
+      min-height: 0px;
+      /* #ifdef MP-WEIXIN */
+      padding-right: 220rpx;
+      /* #endif */
+      /* #ifdef MP-ALIPAY */
+      padding-right: 150rpx;
+      /* #endif */
+      box-shadow: 0rpx 0rpx 0rpx;
+      z-index: 9999;
+      
+      &--fixed {
+        position: fixed;
+        width: 100%;
+        top: 0;
+      }
+      
+      &--alpha {
+        background: transparent !important;
+        box-shadow: none !important;
+      }
+      
+      &--bottom-shadow {
+        box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
+      }
+      
+      &__action {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        justify-content: center;
+        max-width: 100%;
+        
+        &--nav-back {
+          /* position: absolute; */
+          /* top: 50%; */
+          /* left: 20rpx; */
+          /* margin-top: -15rpx; */
+          // width: 25rpx;
+          // height: 25rpx;
+          padding: 20rpx;
+          font-size: 38rpx;
+          line-height: 100%;
+          // border-width: 0 0 4rpx 4rpx;
+          // border-color: #000000;
+          // border-style: solid;
+          // transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+        }
+        
+        &--nav-back-text {
+          padding: 20rpx 20rpx 20rpx 0rpx;
+        }
+      }
+      
+      &__content {
+        position: absolute;
+        text-align: center;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        font-size: 32rpx;
+
+        // cursor: none;
+        // pointer-events: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue b/tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue
new file mode 100644
index 0000000..22b1974
--- /dev/null
+++ b/tuniao-ui/components/tn-notice-bar/tn-notice-bar.vue
@@ -0,0 +1,209 @@
+<template>
+  <view
+    v-if="showNotice"
+    class="tn-notice-bar-class tn-notice-bar"
+    :style="{
+      borderRadius: radius + 'rpx'
+    }"
+  >
+    <block v-if="mode === 'horizontal' && circular">
+      <tn-row-notice
+        :backgroundColor="backgroundColor"
+        :fontColor="fontColor"
+        :fontSize="fontSize"
+        :fontUnit="fontUnit"
+        :list="list"
+        :show="show"
+        :playStatus="playStatus"
+        :leftIcon="leftIcon"
+        :leftIconName="leftIconName"
+        :leftIconSize="leftIconSize"
+        :rightIcon="rightIcon"
+        :rightIconName="rightIconName"
+        :rightIconSize="rightIconSize"
+        :closeBtn="closeBtn"
+        :autoplay="autoplay"
+        :radius="radius"
+        :padding="padding"
+        :speed="speed"
+        @click="click"
+        @close="close"
+        @clickLeft="clickLeftIcon"
+        @clickRight="clickRightIcon"
+      ></tn-row-notice>
+    </block>
+    <block v-if="mode === 'vertical' || (mode === 'horizontal' && !circular)">
+      <tn-column-notice
+        :backgroundColor="backgroundColor"
+        :fontColor="fontColor"
+        :fontSize="fontSize"
+        :fontUnit="fontUnit"
+        :list="list"
+        :show="show"
+        :mode="mode"
+        :playStatus="playStatus"
+        :leftIcon="leftIcon"
+        :leftIconName="leftIconName"
+        :leftIconSize="leftIconSize"
+        :rightIcon="rightIcon"
+        :rightIconName="rightIconName"
+        :rightIconSize="rightIconSize"
+        :closeBtn="closeBtn"
+        :autoplay="autoplay"
+        :radius="radius"
+        :padding="padding"
+        :duration="duration"
+        @click="click"
+        @close="close"
+        @clickLeft="clickLeftIcon"
+        @clickRight="clickRightIcon"
+        @end="end"
+      ></tn-column-notice>
+    </block>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-notice-bar',
+    mixins: [componentsColorMixin],
+    props: {
+      // 显示的内容
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 播放状态
+      // play -> 播放 paused -> 暂停
+      playStatus: {
+        type: String,
+        default: 'play'
+      },
+      // 滚动方向
+      // horizontal -> 水平滚动 vertical -> 垂直滚动
+      mode: {
+        type: String,
+        default: 'horizontal'
+      },
+      // 是否显示左边图标
+      leftIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 左边图标的名称
+      leftIconName: {
+        type: String,
+        default: 'sound'
+      },
+      // 左边图标的大小
+      leftIconSize: {
+        type: Number,
+        default: 34
+      },
+      // 是否显示右边的图标
+      rightIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 右边图标的名称
+      rightIconName: {
+        type: String,
+        default: 'right'
+      },
+      // 右边图标的大小
+      rightIconSize: {
+        type: Number,
+        default: 26
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 圆角
+      radius: {
+        type: Number,
+        default: 0
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: '18rpx 24rpx'
+      },
+      // 自动播放
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 滚动周期
+      duration: {
+        type: Number,
+        default: 2000
+      },
+      // 水平滚动时的速度，即每秒滚动多少rpx
+      speed: {
+        type: Number,
+        default: 160
+      },
+      // 水平滚动的时候是否采用衔接的模式
+      circular: {
+        type: Boolean,
+        default: true
+      },
+      // 没有数据时是否显示通知
+      autoHidden: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      // 当设置了show为false，或者autoHidden为true且list为空时，不显示通知
+      showNotice() {
+        if (this.show === false || (this.autoHidden && this.list.length === 0)) return false
+        else return true
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      // 点击了通知栏
+      click(index) {
+        this.$emit('click', index)
+      },
+      // 点击了关闭按钮
+      close() {
+        this.$emit('close')
+      },
+      // 点击了左边图标
+      clickLeftIcon() {
+        this.$emit('clickLeft')
+      },
+      // 点击了右边图标
+      clickRightIcon() {
+        this.$emit('clickRight')
+      },
+      // 一个周期滚动结束
+      end() {
+        this.$emit('end')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-notice-bar {
+    overflow: hidden;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-number-box/tn-number-box.vue b/tuniao-ui/components/tn-number-box/tn-number-box.vue
new file mode 100644
index 0000000..bc2bc38
--- /dev/null
+++ b/tuniao-ui/components/tn-number-box/tn-number-box.vue
@@ -0,0 +1,401 @@
+<template>
+  <view class="tn-number-box-class tn-number-box">
+    <!-- 减 -->
+    <view
+      class="tn-number-box__btn__minus"
+      :class="[
+        backgroundColorClass,
+        fontColorClass,
+        {'tn-number-box__btn--disabled': disabled || inputValue <= min}
+      ]"
+      :style="{
+        backgroundColor: backgroundColorStyle,
+        height: $t.string.getLengthUnitValue(inputHeight),
+        color: fontColorStyle,
+        fontSize: fontSizeStyle
+      }"
+      @touchstart.stop.prevent="touchStart('minus')"
+      @touchend.stop.prevent="clearTimer"
+    >
+      <view class="tn-icon-reduce"></view>
+    </view>
+    
+    <!-- 输入框 -->
+    <input
+      v-model="inputValue"
+      :disabled="disabledInput || disabled"
+      :cursor-spacing="getCursorSpacing"
+      class="tn-number-box__input"
+      :class="[
+        fontColorClass,
+        {'tn-number-box__input--disabled': disabledInput || disabled}
+      ]"
+      :style="{
+        width: $t.string.getLengthUnitValue(inputWidth),
+        height: $t.string.getLengthUnitValue(inputHeight),
+        color: fontColorStyle,
+        fontSize: fontSizeStyle,
+        backgroundColor: backgroundColorStyle
+      }"
+      @blur="blurInput"
+      @focus="focusInput"
+    />
+    
+    <!-- 加 -->
+    <view
+      class="tn-number-box__btn__plus"
+      :class="[
+        backgroundColorClass,
+        fontColorClass,
+        {'tn-number-box__btn--disabled': disabled || inputValue >= max}
+      ]"
+      :style="{
+        backgroundColor: backgroundColorStyle,
+        height: $t.string.getLengthUnitValue(inputHeight),
+        color: fontColorStyle,
+        fontSize: fontSizeStyle
+      }"
+      @touchstart.stop.prevent="touchStart('plus')"
+      @touchend.stop.prevent="clearTimer"
+    >
+      <view class="tn-icon-add"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  
+  export default {
+    mixins: [componentsColor],
+    name: 'tn-number-box',
+    props: {
+      value: {
+        type: Number,
+        default: 1
+      },
+      // 索引
+      index: {
+        type: [Number, String],
+        default: ''
+      },
+      // 最小值
+      min: {
+        type: Number,
+        default: 0
+      },
+      // 最大值
+      max: {
+        type: Number,
+        default: 99999
+      },
+      // 步进值
+      step: {
+        type: Number,
+        default: 1
+      },
+      // 禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否禁用输入
+      disabledInput: {
+        type: Boolean,
+        default: false
+      },
+      // 输入框的宽度
+      inputWidth: {
+        type: Number,
+        default: 88
+      },
+      // 输入框的高度
+      inputHeight: {
+        type: Number,
+        default: 50
+      },
+      // 输入框和键盘之间的距离
+      cursorSpacing: {
+        type: Number,
+        default: 100
+      },
+      // 是否开启长按进行连续递增减
+      longPress: {
+        type: Boolean,
+        default: true
+      },
+      // 长按触发间隔
+      longPressTime: {
+        type: Number,
+        default: 250
+      },
+      // 是否只能输入正整数
+      positiveInteger: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      getCursorSpacing() {
+        return Number(uni.upx2px(this.cursorSpacing))
+      }
+    },
+    data() {
+      return {
+        // 输入框的值
+        inputValue: 1,
+        // 长按定时器
+        longPressTimer: null,
+        // 标记值的改变是来自外部还是内部
+        changeFromInner: false,
+        // 内部定时器
+        innerChangeTimer: null
+      }
+    },
+    watch: {
+      value(val) {
+        // 只有value的改变是来自外部的时候，才去同步inputValue的值，否则会造成循环错误
+        if (!this.changeFromInner) {
+          this.updateInputValue()
+          // 因为inputValue变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
+          // 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
+          // 将changeFromInner设置为false
+          this.$nextTick(() => {
+          	this.changeFromInner = false
+          })
+        }
+      },
+      inputValue(newVal, oldVal) {
+        // 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
+        if (newVal === '') return
+        let value = 0
+        // 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
+        let isNumber = this.$t.test.number(newVal)
+        if (isNumber && newVal >= this.min && newVal <= this.max) value = newVal
+        else value = oldVal
+        
+        // 判断是否只能输入大于等于0的整数
+        if (this.positiveInteger) {
+          // 小于0或者带有小数点
+          if (newVal < 0 || String(newVal).indexOf('.') !== -1) {
+            value = Math.floor(newVal)
+            // 双向绑定input的值，必须要使用$nextTick修改显示的值
+            this.$nextTick(() => {
+            	this.inputValue = value
+            })
+          }
+        }
+        this.handleChange(value, 'change')
+      },
+      min() {
+        this.updateInputValue()
+      },
+      max() {
+        this.updateInputValue()
+      }
+    },
+    created() {
+      this.updateInputValue()
+    },
+    methods: {
+      // 开始点击按钮
+      touchStart(func) {
+        // 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
+        this[func]()
+        // 如果没有开启长按功能，直接返回
+        if (!this.longPress) return
+        // 清空长按定时器，防止重复注册
+        if (this.longPressTimer) {
+          clearInterval(this.longPressTimer)
+          this.longPressTimer = null
+        }
+        this.longPressTimer = setInterval(() => {
+          // 执行加减操作
+          this[func]()
+        }, this.longPressTime)
+      },
+      // 清除定时器
+      clearTimer() {
+        this.$nextTick(() => {
+          if (this.longPressTimer) {
+            clearInterval(this.longPressTimer)
+            this.longPressTimer = null
+          }
+        })
+      },
+      // 减
+      minus() {
+        this.computeValue('minus')
+      },
+      // 加
+      plus() {
+        this.computeValue('plus')
+      },
+      // 处理小数相加减出现溢出问题
+      calcPlus(num1, num2) {
+        let baseNum = 0, baseNum1 = 0, baseNum2 = 0
+        try {
+          baseNum1 = num1.toString().split('.')[1].length
+        } catch(e) {
+          baseNum1 = 0
+        }
+        try {
+          baseNum2 = num2.toString().split('.')[1].length
+        } catch(e) {
+          baseNum2 = 0
+        }
+        
+        baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
+        // 精度
+        let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
+        return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision)
+      },
+      calcMinus(num1, num2) {
+        let baseNum = 0, baseNum1 = 0, baseNum2 = 0
+        try {
+          baseNum1 = num1.toString().split('.')[1].length
+        } catch(e) {
+          baseNum1 = 0
+        }
+        try {
+          baseNum2 = num2.toString().split('.')[1].length
+        } catch(e) {
+          baseNum2 = 0
+        }
+        
+        baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
+        // 精度
+        let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
+        return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision)
+      },
+      // 处理操作后的值
+      computeValue(type) {
+        uni.hideKeyboard()
+        if (this.disabled) return
+        let value = 0
+        
+        if (type === 'minus') {
+          // 减
+          value = this.calcMinus(this.inputValue, this.step)
+        } else if (type === 'plus') {
+          // 加
+          value = this.calcPlus(this.inputValue, this.step)
+        }
+        // 判断是否比最小值小和操作最大值
+        if (value < this.min || value > this.max) return
+        
+        this.inputValue = value
+        this.handleChange(value, type)
+      },
+      // 处理用户手动输入
+      blurInput(event) {
+        let val = 0,
+            value = event.detail.value
+        // 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
+        // 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
+        if (!/(^\d+$)/.test(value) || value[0] == 0) {
+          val = this.min
+        } else {
+          val = +value
+        }
+        
+        if (val > this.max) {
+          val = this.max
+        } else if (val < this.min) {
+          val = this.min
+        }
+        this.$nextTick(() => {
+          this.inputValue = val
+        })
+        this.handleChange(val, 'blur')
+      },
+      // 获取焦点
+      focusInput() {
+        this.$emit('focus')
+      },
+      // 初始化inputValue
+      updateInputValue() {
+        let value = this.value
+        if (value <= this.min) {
+          value = this.min
+        } else if (value >= this.max) {
+          value = this.max
+        }
+        
+        this.inputValue = Number(value)
+      },
+      // 处理值改变状态
+      handleChange(value, type) {
+        if (this.disabled) return
+        // 清除定时器，防止混乱
+        if (this.innerChangeTimer) {
+          clearTimeout(this.innerChangeTimer)
+          this.innerChangeTimer = null
+        }
+        
+        // 内部修改值
+        this.changeFromInner = true
+        // 一定时间内，清除changeFromInner标记，否则内部值改变后
+        // 外部通过程序修改value值，将会无效
+        this.innerChangeTimer = setTimeout(() => {
+          this.changeFromInner = false
+        }, 150)
+        this.$emit('input', Number(value))
+        this.$emit(type, {
+          value: Number(value),
+          index: this.index
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-number-box {
+    display: inline-flex;
+    align-items: center;
+    
+    &__btn {
+      &__plus,&__minus {
+        width: 60rpx;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        background-color: $tn-font-holder-color;
+      }
+      
+      &__plus {
+        border-radius: 0 8rpx 8rpx 0;
+      }
+      
+      &__minus {
+        border-radius: 8rpx 0 0 8rpx;
+      }
+      
+      &--disabled {
+        color: $tn-font-sub-color !important;
+        background: $tn-font-holder-color !important;
+      }
+    }
+    
+    &__input {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      text-align: center;
+      box-sizing: border-box;
+      padding: 0 4rpx;
+      margin: 0 6rpx;
+      background-color: $tn-font-holder-color;
+      
+      &--disabled {
+        color: $tn-font-sub-color !important;
+        background: $tn-font-holder-color !important;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue b/tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue
new file mode 100644
index 0000000..fbc2c72
--- /dev/null
+++ b/tuniao-ui/components/tn-number-keyboard/tn-number-keyboard.vue
@@ -0,0 +1,182 @@
+<template>
+  <view class="tn-number-keyboard-class tn-number-keyboard" @touchmove.stop.prevent="() => {}">
+    <view class="tn-number-keyboard__grids">
+      <view
+        v-for="(item, index) in dataList"
+        :key="index"
+        class="tn-number-keyboard__grids__item"
+        :class="{
+          'tn-bg-gray--light': showGaryBg(index),
+          'tn-border-solid-top': index <= 2,
+          'tn-border-solid-bottom': index < 9,
+          'tn-border-solid-right': (index + 1) % 3 != 0
+        }"
+        :hover-class="hoverClass(index)"
+        :hover-stay-time="150"
+        @tap="keyboardClick(item)"
+      >
+        <view class="tn-number-keyboard__grids__btn">{{ item }}</view>
+      </view>
+      
+      <view
+        class="tn-number-keyboard__grids__item tn-bg-gray--light"
+        hover-class="tn-hover"
+        :hover-stay-time="150"
+        @touchstart.stop="backspaceClick"
+        @touchend="clearTimer"
+      >
+        <view class="tn-number-keyboard__grids__btn tn-number-keyboard__back">
+          <view class="tn-icon-left tn-number-keyboard__back__icon"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-number-keyboard',
+    props: {
+      // 键盘类型
+      // number -> 数字键盘 card -> 身份证键盘
+      mode: {
+        type: String,
+        default: 'number'
+      },
+      // 是否显示键盘的'.'符号
+      dotEnabled: {
+        type: Boolean,
+        default: true
+      },
+      // 是否为乱序键盘
+      randomEnabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 键盘显示的内容
+      dataList() {
+        let tmp = []
+        if (!this.dotEnabled && this.mode === 'number') {
+          if (!this.randomEnabled) {
+            return [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
+          } else {
+            let data = this.$t.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+            data.splice(-1, 0, '')
+            return data
+          }
+        } else if (this.dotEnabled && this.mode === 'number') {
+          if (!this.randomEnabled) {
+            return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]
+          } else {
+            let data = this.$t.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+            data.splice(-1, 0, this.dot)
+            return data
+          }
+        } else if (this.mode === 'card') {
+          if (!this.randomEnabled) {
+            return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]
+          } else {
+            let data = this.$t.array.random([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
+            data.splice(-1, 0, this.cardX)
+            return data
+          }
+        }
+      },
+      // 按键的样式
+      keyStyle() {
+        return index => {
+          let style = {}
+          if (this.mode === 'number' && !this.dotEnabled && index === 9) style.flex = '0 0 66.6666666666%'
+          return style
+        }
+      },
+      // 是否让按键显示灰色，只在数字键盘和非乱序且在点击时
+      showGaryBg() {
+        return index => {
+          if (!this.randomEnabled && index === 9 && (this.mode !== 'number' || (this.mode === 'number' && this.dotEnabled))) return true
+          else return false
+        }
+      },
+      // 手指停留的class
+      hoverClass() {
+        return index => {
+          if (this.mode === 'number' && !this.dotEnabled && index === 9) return ''
+          if (!this.randomEnabled && index === 9 && (this.mode === 'number' && this.dotEnabled || this.mode === 'card')) return 'tn-hover'
+          else return 'tn-number-keyboard--hover'
+        }
+      }
+    },
+    data() {
+      return {
+        // 退格键内容
+        backspace: 'backspace',
+        // 点内容
+        dot: '.',
+        // 长按多次删除事件监听
+        longPressDeleteTimer: null,
+        // 身份证的X符号
+        cardX: 'X'
+      }
+    },
+    methods: {
+      // 点击退格键
+      backspaceClick() {
+        this.$emit('backspace')
+        this.clearTimer()
+        this.longPressDeleteTimer = setInterval(() => {
+          this.$emit('backspace')
+        }, 250)
+      },
+      // 获取键盘显示的内容
+      keyboardClick(value) {
+        if (this.mode === 'number' && !this.dotEnabled && value === '') return
+        // 允许键盘显示点模式和触发非点按键时，将内容转换为数字类型
+        if (this.dotEnabled && value != this.dot && value != this.cardX) value = Number(value)
+        this.$emit('change', value)
+      },
+      // 清除定时器
+      clearTimer() {
+        if (this.longPressDeleteTimer) {
+          clearInterval(this.longPressDeleteTimer)
+          this.longPressDeleteTimer = null
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-number-keyboard {
+    position: relative;
+    
+    &__grids {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      
+      &__item {
+        display: flex;
+        flex-direction: row;
+        flex: 0 0 33.3333333333%;
+        align-items: center;
+        justify-content: center;
+        height: 110rpx;
+        text-align: center;
+        font-size: 50rpx;
+        color: $tn-font-color;
+        font-weight: 500;
+      }
+    }
+    
+    &__back {
+      font-size: 38rpx;
+    }
+    
+    &--hover {
+      background-color: $tn-font-holder-color;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-picker/tn-picker.vue b/tuniao-ui/components/tn-picker/tn-picker.vue
new file mode 100644
index 0000000..a2c5492
--- /dev/null
+++ b/tuniao-ui/components/tn-picker/tn-picker.vue
@@ -0,0 +1,750 @@
+<template>
+  <view v-if="value" class="tn-picker-class tn-picker">
+    <tn-popup
+      v-model="value"
+      mode="bottom"
+      :popup="false"
+      length="auto"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :maskCloseable="maskCloseable"
+      :zIndex="elZIndex"
+      @close="close"
+    >
+      <view class="tn-picker__content" :style="{ zIndex: elZIndex }">
+        <!-- 顶部 -->
+        <view class="tn-picker__content__header" @touchmove.stop.prevent>
+          <!-- 取消按钮 -->
+          <view
+            class="tn-picker__content__header__btn tn-picker__content__header--cancel"
+            :style="{ color: cancelColor }"
+            hover-class="tn-hover-class"
+            :hover-stay-time="150"
+            @tap="getResult('cancel')"
+          >{{ resolvedCancelText }}</view>
+          <!-- 标题 -->
+          <view class="tn-picker__content__header__title">{{ title }}</view>
+          <!-- 确认按钮 -->
+          <view
+            class="tn-picker__content__header__btn tn-picker__content__header--confirm"
+            :style="{ color: moving ? cancelColor : confirmColor}"
+            hover-class="tn-hover-class"
+            :hover-stay-time="150"
+            @touchmove.stop
+            @tap.stop="getResult('confirm')"
+          >{{ resolvedConfirmText }}</view>
+        </view>
+        <!-- 主体 -->
+        <view class="tn-picker__content__body">
+          <!-- 地区选择 -->
+          <picker-view
+            v-if="mode === 'region'"
+            class="tn-picker__content__body__view"
+            :value="valueArr"
+            @change="change"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+          >
+            <picker-view-column v-if="!reset && params.province">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in provinces" :key="index">
+                <view class="tn-text-ellipsis">{{ item.label }}</view>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.city">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in citys" :key="index">
+                <view class="tn-text-ellipsis">{{ item.label }}</view>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.area">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in areas" :key="index">
+                <view class="tn-text-ellipsis">{{ item.label }}</view>
+              </view>
+            </picker-view-column>
+          </picker-view>
+          <!-- 时间选择 -->
+          <picker-view
+            v-else-if="mode === 'time'"
+            class="tn-picker__content__body__view"
+            :value="valueArr"
+            @change="change"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+          >
+            <picker-view-column v-if="!reset && params.year">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in years" :key="index">
+                {{ item }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item__text">{{ t('yearUnit') }}</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.month">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in months" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">{{ t('monthUnit') }}</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.day">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in days" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">{{ t('dayUnit') }}</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.hour">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in hours" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">{{ t('hourUnit') }}</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.minute">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in minutes" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">{{ t('minuteUnit') }}</text>
+              </view>
+            </picker-view-column>
+            <picker-view-column v-if="!reset && params.second">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in seconds" :key="index">
+                {{ formatNumber(item) }}
+                <text v-if="showTimeTag" class="tn-picker__content__body__item--text">{{ t('secondUnit') }}</text>
+              </view>
+            </picker-view-column>
+          </picker-view>
+          <!-- 单列选择 -->
+          <picker-view
+            v-else-if="mode === 'selector'"
+            class="tn-picker__content__body__view"
+            :value="valueArr"
+            @change="change"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+          >
+            <picker-view-column v-if="!reset">
+              <view class="tn-picker__content__body__item" v-for="(item, index) in range" :key="index">
+                <view class="tn-text-ellipsis">{{ getItemValue(item, 'selector') }}</view>
+              </view>
+            </picker-view-column>
+          </picker-view>
+          <!-- 多列选择 -->
+          <picker-view
+            v-else-if="mode === 'multiSelector'"
+            class="tn-picker__content__body__view"
+            :value="valueArr"
+            @change="change"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+          >
+            <picker-view-column v-if="!reset" v-for="(item, index) in range" :key="index">
+              <view class="tn-picker__content__body__item" v-for="(sub_item, sub_index) in item" :key="sub_index">
+                <view class="tn-text-ellipsis">{{ getItemValue(sub_item, 'multiSelector') }}</view>
+              </view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  import provinces from '../../libs/utils/province.js'
+  import citys from '../../libs/utils/city.js'
+  import areas from '../../libs/utils/area.js'
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+  
+  export default {
+    name: 'tn-picker',
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      // 顶部标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // picker中显示的参数
+      params: {
+        type: Object,
+        default() {
+          return {
+            year: true,
+            month: true,
+            day: true,
+            hour: false,
+            minute: false,
+            second: false,
+            province: true,
+            city: true,
+            area: true,
+            timestamp: true
+          }
+        }
+      },
+      // 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
+      mode: {
+        type: String,
+        default: 'time'
+      },
+      // 当mode=selector或者mode=multiSelector时，提供的数组
+      range: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 当mode=selector或者mode=multiSelector时，提供的默认项下标
+      defaultSelector: {
+        type: Array,
+        default() {
+          return [0]
+        }
+      },
+      // 当range是一个Array<Object>时，通过rangeKey来指定Object中key的值作为显示的内容
+      rangeKey: {
+        type: String,
+        default: ''
+      },
+      // 时间模式 ，是否显示时间后的单位
+      showTimeTag: {
+        type: Boolean,
+        default: true
+      },
+      // 开始年份
+      startYear: {
+        type: [String, Number],
+        default: 1950
+      },
+      // 结束年份
+      endYear: {
+        type: [String, Number],
+        default: 2050
+      },
+      // 默认显示的时间
+      // 2021-09-01 || 2021-09-01 13:00:23 || 2021/09/01
+      defaultTime: {
+        type: String,
+         default: ''
+      },
+      // 默认显示的地区
+      // 可传类似["广东省", "广州市", "天河区"]
+      defaultRegin: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 默认显示的地区编码
+      // 可传类似["11", "1101", "110101"]
+      // 如果defaultRegin和areaCode同时存在，优先使用areaCode的值
+      areaCode: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 取消按钮的文字
+      cancelText: {
+        type: String,
+        default: null
+      },
+      // 取消按钮的颜色
+      cancelColor: {
+        type: String,
+        default: ''
+      },
+      // 确认按钮的文字
+      confirmText: {
+        type: String,
+        default: null
+      },
+      // 确认按钮的演示
+      confirmColor: {
+        type: String,
+        default: ''
+      },
+      safeAreaInsetBottom: {
+        type: Boolean,
+        default: false
+      },
+      // 是否允许通过点击遮罩关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 监听参数变化
+      propsChange() {
+        return [this.mode, this.defaultTime, this.startYear, this.endYear, this.defaultRegin, this.areaCode]
+      },
+      // 监听地区发生变化
+      regionChange() {
+        return [this.province, this.city]
+      },
+      // 监听年月发生变化
+      yearAndMonth() {
+        return [this.year, this.month]
+      },
+      resolvedCancelText() {
+        return this.cancelText === null ? getLocalizedText(this, '取 消', 'Cancel') : this.cancelText
+      },
+      resolvedConfirmText() {
+        return this.confirmText === null ? getLocalizedText(this, '确 认', 'Confirm') : this.confirmText
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$t.zIndex.popup
+      }
+    },
+    data() {
+      return {
+        years: [],
+        months: [],
+        days: [],
+        hours: [],
+        minutes: [],
+        seconds: [],
+        year: 0,
+        month: 0,
+        day: 0,
+        hour: 0,
+        minute: 0,
+        second: 0,
+        reset: false,
+        startDate: '',
+        endDate: '',
+        valueArr: [],
+        provinces: provinces,
+        citys: citys[0],
+        areas: areas[0][0],
+        province: 0,
+        city: 0,
+        area: 0,
+        // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
+        moving: false
+      }
+    },
+    watch: {
+      propsChange() {
+        this.reset = true
+        setTimeout(() => this.init(), 10)
+      },
+      regionChange() {
+        // 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
+        this.citys = citys[this.province]
+        this.areas = areas[this.province][this.city]
+      },
+      yearAndMonth() {
+        // 月份的变化，实时变更日的天数，因为不同月份，天数不一样
+        // 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
+        if (this.params.year) this.setDays()
+      },
+      value(val) {
+        // 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
+        if (val) {
+          this.reset = true
+          setTimeout(() => this.init(), 10)
+        }
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      t(key) {
+        const map = {
+          yearUnit: getLocalizedText(this, '年', 'Y'),
+          monthUnit: getLocalizedText(this, '月', 'M'),
+          dayUnit: getLocalizedText(this, '日', 'D'),
+          hourUnit: getLocalizedText(this, '时', 'h'),
+          minuteUnit: getLocalizedText(this, '分', 'm'),
+          secondUnit: getLocalizedText(this, '秒', 's')
+        }
+        return map[key] || ''
+      },
+      // 记录开始滑动
+      pickStart() {
+        // #ifdef MP-WEIXIN
+        this.moving = true
+        // #endif
+      },
+      // 记录滚动结束
+      pickEnd() {
+        // #ifdef MP-WEIXIN
+        this.moving = false
+        // #endif
+      },
+      // 根据传递的列表的数据获取显示的数据
+      getItemValue(item, mode) {
+        // 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
+        if (this.mode === mode) {
+          return typeof item === 'object' ? item[this.rangeKey] : item
+        }
+      },
+      // 往数字前面补0
+      formatNumber(num) {
+        return this.$t.number.formatNumberAddZero(num)
+      },
+      // 生成递进的数组
+      generateArray(start, end) {
+        // 转为数值格式，否则用户给end-year等传递字符串值时，下面的end+1会导致字符串拼接，而不是相加
+        start = Number(start)
+        end = Number(end)
+        end = end > start ? end : start
+        // 生成数组并获取其中索引然后提取出来(获取开始和结束之间的数据)
+        return [...Array(end+1).keys()].slice(start)
+      },
+      getIndex(arr, val) {
+        let index = arr.indexOf(val)
+        // 如果index为-1着找不到元素
+        // ~(-1)=(-1)-1=0
+        return ~index ? index : 0
+      },
+      // 日期时间处理
+      initTimeValue() {
+        // 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
+        let fdate = this.defaultTime.replace(/\-/g, '/')
+        fdate = fdate && fdate.indexOf('/') == -1 ? `2021/01/01 ${fdate}` : fdate
+        let time = null
+        if (fdate) time = new Date(fdate)
+        else time = new Date()
+        // 获取年月日时分秒
+        this.year = time.getFullYear()
+        this.month = time.getMonth() + 1
+        this.day = time.getDate()
+        this.hour = time.getHours()
+        this.minute = time.getMinutes()
+        this.second = time.getSeconds()
+      },
+      // 初始化数据
+      init() {
+        this.valueArr = []
+        this.reset = false
+        if (this.mode === 'time') {
+          this.initTimeValue()
+          if (this.params.year) {
+            this.valueArr.push(0)
+            this.setYears()
+          }
+          if (this.params.month) {
+            this.valueArr.push(0)
+            this.setMonths()
+          }
+          if (this.params.day) {
+            this.valueArr.push(0)
+            this.setDays()
+          }
+          if (this.params.hour) {
+            this.valueArr.push(0)
+            this.setHours()
+          }
+          if (this.params.minute) {
+            this.valueArr.push(0)
+            this.setMinutes()
+          }
+          if (this.params.second) {
+            this.valueArr.push(0)
+            this.setSeconds()
+          }
+        } else if (this.mode === 'region') {
+          if (this.params.province) {
+            this.valueArr.push(0)
+            this.setProvinces()
+          }
+          if (this.params.city) {
+            this.valueArr.push(0)
+            this.setCitys()
+          }
+          if (this.params.area) {
+            this.valueArr.push(0)
+            this.setAreas()
+          }
+        } else if (this.mode === 'selector') {
+          this.valueArr = this.defaultSelector
+        } else if (this.mode === 'multiSelector') {
+          this.valueArr = this.defaultSelector
+          this.multiSelectorValue = this.defaultSelector
+        }
+        this.$forceUpdate()
+      },
+      // 设置picker某一列的值
+      setYears() {
+        this.years = this.generateArray(this.startYear, this.endYear)
+        // 设置this.valueArr某一项的值，是为了让picker预选中某一个值
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year))
+      },
+      setMonths() {
+        this.months = this.generateArray(1, 12)
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month))
+      },
+      setDays() {
+        let totalDays = new Date(this.year, this.month, 0).getDate()
+        this.days = this.generateArray(1, totalDays)
+        let index = 0
+        // 避免多次触发导致值数组计算错误
+        if (this.params.year && this.params.month) index = 2
+        else if (this.params.month) index = 1
+        else if (this.params.year) index = 1
+        else index = 0
+        
+        // 当月份变化时，会导致日期的天数也会变化，如果原来选的天数大于变化后的天数，则重置为变化后的最大值
+        // 比如原来选中3月31日，调整为2月后，日期变为最大29，这时如果day值继续为31显然不合理，于是将其置为29(picker-column从1开始)
+        if (this.day > this.days.length) this.day = this.days.length
+        this.valueArr.splice(index, 1, this.getIndex(this.days, this.day))
+      },
+      setHours() {
+        this.hours = this.generateArray(0, 23)
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour))
+      },
+      setMinutes() {
+        this.minutes = this.generateArray(0, 59)
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute))
+      },
+      setSeconds() {
+        this.seconds = this.generateArray(0, 59)
+        this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second))
+      },
+      setProvinces() {
+        if (!this.params.province) return
+        let tmp = ''
+        let useCode = false
+        // 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
+        if (this.areaCode.length) {
+          tmp = this.areaCode[0]
+          useCode = true
+        } else if (this.defaultRegin.length) {
+          tmp = this.defaultRegin[0]
+        } else {
+          tmp = 0
+        }
+        // 遍历省份数组
+        provinces.map((v, k) => {
+          if (useCode ? v.value == tmp : v.label == tmp) {
+            this.province = k
+            return
+          }
+        })
+        this.provinces = provinces
+        this.valueArr.splice(0, 1, this.province)
+      },
+      setCitys() {
+        if (!this.params.city) return
+        let tmp = ''
+        let useCode = false
+        // 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
+        if (this.areaCode.length) {
+          tmp = this.areaCode[1]
+          useCode = true
+        } else if (this.defaultRegin.length) {
+          tmp = this.defaultRegin[1]
+        } else {
+          tmp = 0
+        }
+        // 遍历省份数组
+        citys[this.province].map((v, k) => {
+          if (useCode ? v.value == tmp : v.label == tmp) {
+            this.city = k
+            return
+          }
+        })
+        this.citys = citys[this.province]
+        this.valueArr.splice(1, 1, this.city)
+      },
+      setAreas() {
+        if (!this.params.area) return
+        let tmp = ''
+        let useCode = false
+        // 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
+        if (this.areaCode.length) {
+          tmp = this.areaCode[2]
+          useCode = true
+        } else if (this.defaultRegin.length) {
+          tmp = this.defaultRegin[2]
+        } else {
+          tmp = 0
+        }
+        // 遍历省份数组
+        areas[this.province][this.city].map((v, k) => {
+          if (useCode ? v.value == tmp : v.label == tmp) {
+            this.area = k
+            return
+          }
+        })
+        this.areas = areas[this.province][this.city]
+        this.valueArr.splice(2, 1, this.area)
+      },
+      close() {
+        this.$emit('input', false)
+      },
+      // 监听用户修改了picker列选项
+      change(event) {
+        this.valueArr = event.detail.value
+        let i = 0
+        if (this.mode === 'time') {
+          // 使用i++是因为不知道数组的长度
+          if (this.params.year) this.year = this.years[this.valueArr[i++]]
+          if (this.params.month) this.month = this.months[this.valueArr[i++]]
+          if (this.params.day) this.day = this.days[this.valueArr[i++]]
+          if (this.params.hour) this.hour = this.hours[this.valueArr[i++]]
+          if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]]
+          if (this.params.second) this.second = this.seconds[this.valueArr[i++]]
+        } else if (this.mode === 'region') {
+          // 标记省市是否发生了变化
+          let provinceChange = false,
+              cityChange = false
+          if (this.params.province) {
+            let value = this.valueArr[i++]
+            if (this.province != value) {
+              // 如果省份发生了变化，则重置市区的索引为0
+              this.city = 0
+              this.area = 0
+              provinceChange = true
+            }
+            this.province = value
+          }
+          if (this.params.city && !provinceChange) {
+            let value = this.valueArr[i++]
+            if (this.city != value) {
+              // 如果市发生了变化，则重置区的索引为0
+              this.area = 0
+              cityChange = true
+            }
+            this.city = value
+          }
+          if (this.params.area && !provinceChange && !cityChange) this.area = this.valueArr[i++]
+          
+          // 如果有省市进行了改变，重新设置列表的值
+          if (provinceChange || cityChange) {
+            this.valueArr = [this.province, this.city, this.area]
+          }
+        } else if (this.mode === 'multiSelector') {
+          let index = null
+          // 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
+          this.defaultSelector.map((v, idx) => {
+            if (v != event.detail.value[idx]) index = idx
+          })
+          // 为了让用户对多列变化时，动态设置其他列
+          if (index != null) {
+            this.$emit('columnchange', {
+              column: index,
+              index: event.detail.value[index]
+            })
+          }
+        }
+      },
+      // 用户点击确定按钮
+      getResult(event = null) {
+        // #ifdef MP-WEIXIN
+        if (this.moving) return
+        // #endif
+        let result = {}
+        // 只返回用户需要的数据
+        if (this.mode === 'time') {
+          if (this.params.year) result.year = this.formatNumber(this.year || 0)
+          if (this.params.month) result.month = this.formatNumber(this.month || 0)
+          if (this.params.day) result.day = this.formatNumber(this.day || 0)
+          if (this.params.hour) result.hour = this.formatNumber(this.hour || 0)
+          if (this.params.minute) result.minute = this.formatNumber(this.minute || 0)
+          if (this.params.second) result.second = this.formatNumber(this.second || 0)
+          if (this.params.timestamp) result.timestamp = this.getTimestamp()
+        } else if (this.mode === 'region') {
+          if (this.params.province) result.province = provinces[this.province]
+          if (this.params.city) result.city = citys[this.province][this.city]
+          if (this.params.area) result.area = areas[this.province][this.city][this.area]
+        } else if (this.mode === 'multiSelector') {
+          result = this.valueArr
+        } else if (this.mode === 'selector') {
+          result = this.valueArr
+        }
+        
+        if (event) this.$emit(event, result)
+        this.close()
+      },
+      // 获取时间戳
+      getTimestamp() {
+      	// yyyy-mm-dd为安卓写法，不支持iOS，需要使用"/"分隔，才能二者兼容
+      	let time = this.year + '/' + this.month + '/' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this.second;
+      	return new Date(time).getTime() / 1000;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-picker {
+    &__content {
+      position: relative;
+      
+      &__header {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 90rpx;
+        margin-top: 10rpx;
+        padding: 0 30rpx;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        font-size: 30rpx;
+        background-color: #FFFFFF;
+        
+        &__btn {
+          padding: 16rpx;
+          box-sizing: border-box;
+          text-align: center;
+          text-decoration: none;
+        }
+        
+        &__title {
+          color: $tn-font-color;
+        }
+        
+        &--cancel {
+          color: $tn-font-sub-color;
+        }
+        
+        &--confirm {
+          background-color: #FEA500;
+          color: #FFFFFF;
+          padding: 10rpx 25rpx;
+          border-radius: 10rpx;
+        }
+      }
+      
+      &__body {
+        width: 100%;
+        height: 500rpx;
+        overflow: hidden;
+        background-color: #FFFFFF;
+        
+        &__view {
+          height: 100%;
+          box-sizing: border-box;
+        }
+        
+        &__item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          font-size: 32rpx;
+          color: $tn-font-color;
+          padding: 0 8rpx;
+          
+          &--text {
+            font-size: 24rpx;
+            padding-left: 8rpx;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-popup/tn-popup.vue b/tuniao-ui/components/tn-popup/tn-popup.vue
new file mode 100644
index 0000000..58c9309
--- /dev/null
+++ b/tuniao-ui/components/tn-popup/tn-popup.vue
@@ -0,0 +1,491 @@
+<template>
+  <view
+    v-if="visibleSync"
+    class="tn-popup-class tn-popup"
+    :style="[customStyle, popupStyle, { zIndex: elZIndex - 1}]"
+    hover-stop-propagation
+  >
+    <!-- mask -->
+    <view
+      class="tn-popup__mask"
+      :class="[{'tn-popup__mask--show': showPopup && mask}]"
+      :style="{zIndex: elZIndex - 2}"
+      @tap="maskClick"
+      @touchmove.stop.prevent = "() => {}"
+      hover-stop-propagation
+    ></view>
+    <!-- 弹框内容 -->
+    <view
+      class="tn-popup__content"
+      :class="[
+        mode !== 'center' ? backgroundColorClass : '',
+        safeAreaInsetBottom ? 'tn-safe-area-inset-bottom' : '',
+        'tn-popup--' + mode,
+        showPopup ? 'tn-popup__content--visible' : '',
+        zoom && mode === 'center' ? 'tn-popup__content__center--animation-zoom' : ''
+      ]"
+      :style="[contentStyle]"
+      @tap="modeCenterClose"
+      @touchmove.stop.prevent
+      @tap.stop.prevent
+    >
+      <!-- 居中时候的内容 -->
+      <view
+        v-if="mode === 'center'"
+        class="tn-popup__content__center_box"
+        :class="[backgroundColorClass]"
+        :style="[centerStyle]"
+        @touchmove.stop.prevent
+        @tap.stop.prevent
+      >
+        <!-- 关闭按钮 -->
+        <view
+          v-if="closeBtn"
+          class="tn-popup__close"
+          :class="[`tn-icon-${closeBtnIcon}`, `tn-popup__close--${closeBtnPosition}`]"
+          :style="[closeBtnStyle, {zIndex: elZIndex}]"
+          @tap="close"
+        ></view>
+        <scroll-view class="tn-popup__content__scroll-view">
+          <slot></slot>
+        </scroll-view>
+      </view>
+      
+      <!-- 除居中外的其他情况 -->
+      <scroll-view v-else class="tn-popup__content__scroll-view">
+        <slot></slot>
+      </scroll-view>
+      <!-- 关闭按钮 -->
+      <view
+        v-if="mode !== 'center' && closeBtn"
+        class="tn-popup__close"
+        :class="[`tn-popup__close--${closeBtnPosition}`]"
+        :style="{zIndex: elZIndex}"
+        @tap="close"
+      >
+        <view :class="[`tn-icon-${closeBtnIcon}`]" :style="[closeBtnStyle]"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-popup',
+    props: {
+      value: {
+      	type: Boolean,
+      	default: false
+      },
+      // 弹出方向
+      // left/right/top/bottom/center
+      mode: {
+        type: String,
+        default: 'left'
+      },
+      // 是否显示遮罩
+      mask: {
+        type: Boolean,
+        default: true
+      },
+      // 抽屉的宽度（mode=left/right）,高度（mode=top/bottom）
+      length: {
+        type: [Number, String],
+        default: 'auto'
+      },
+      // 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
+      // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+      width: {
+      	type: String,
+      	default: ''
+      },
+      // 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
+      // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+      height: {
+      	type: String,
+      	default: ''
+      },
+      // 是否开启动画，只在mode=center有效
+      zoom: {
+        type: Boolean,
+        default: true
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 是否可以通过点击遮罩进行关闭
+      maskCloseable: {
+      	type: Boolean,
+      	default: true
+      },
+      // 用户自定义样式
+      customStyle: {
+      	type: Object,
+      	default() {
+      		return {}
+      	}
+      },
+      // 显示圆角的大小
+      borderRadius: {
+        type: Number,
+        default: 0
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 关闭按钮的图标
+      closeBtnIcon: {
+        type: String,
+        default: 'close'
+      },
+      // 关闭按钮显示的位置
+      // top-left/top-right/bottom-left/bottom-right
+      closeBtnPosition: {
+        type: String,
+        default: 'top-right'
+      },
+      // 关闭按钮图标颜色
+      closeIconColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 关闭按钮图标的大小
+      closeIconSize: {
+        type: Number,
+        default: 30
+      },
+      // 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
+      negativeTop: {
+      	type: Number,
+      	default: 0
+      },
+      // marginTop，在mode = top,left,right时生效，避免用户使用了自定义导航栏，组件把导航栏遮挡了
+      marginTop: {
+        type: Number,
+        default: 0
+      },
+      // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
+      // 对v-model双向绑定多层调用造成报错不能修改props值的问题
+      popup: {
+      	type: Boolean,
+      	default: true
+      },
+    },
+    computed: {
+      // 处理使用了自定义导航栏时被遮挡的问题
+      popupStyle() {
+        let style = {}
+        if ((this.mode === 'top' || this.mode === 'left' || this.mode === 'right') && this.marginTop) {
+          style.marginTop = this.$t.string.getLengthUnitValue(this.marginTop, 'px')
+        }
+        
+        return style
+      },
+      // 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
+      contentStyle() {
+        let style = {}
+        // 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
+        if (this.mode === 'left' || this.mode === 'right') {
+          style = {
+            width: this.width ? this.$t.string.getLengthUnitValue(this.width) : this.$t.string.getLengthUnitValue(this.length),
+            height: '100%',
+            transform: `translate3D(${this.mode === 'left' ? '-100%' : '100%'}, 0px, 0px)`
+          }
+        } else if (this.mode === 'top' || this.mode === 'bottom') {
+          style = {
+            width: '100%',
+            height: this.height ? this.$t.string.getLengthUnitValue(this.height) : this.$t.string.getLengthUnitValue(this.length),
+            transform: `translate3D(0px, ${this.mode === 'top' ? '-100%': '100%'}, 0px)`
+          }
+        }
+        style.zIndex = this.elZIndex
+        // 如果设置了圆角的值，添加弹窗的圆角
+        if (this.borderRadius) {
+          switch(this.mode) {
+            case 'left':
+              style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`
+              break
+            case 'top':
+              style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`
+              break
+            case 'right':
+              style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`
+              break
+            case 'bottom':
+              style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`
+              break
+          }
+          style.overflow = 'hidden'
+        }
+        
+        if (this.backgroundColorStyle && this.mode !== 'center') {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        
+        return style
+      },
+      // 中部弹窗的样式
+      centerStyle() {
+        let style = {}
+        style.width = this.width ? this.$t.string.getLengthUnitValue(this.width) : this.$t.string.getLengthUnitValue(this.length)
+        // 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开
+        style.height = this.height ? this.$t.string.getLengthUnitValue(this.height) : 'auto'
+        style.zIndex = this.elZIndex
+        if (this.negativeTop) {
+          style.marginTop = `-${this.$t.string.getLengthUnitValue(this.negativeTop)}`
+        }
+        if (this.borderRadius) {
+          style.borderRadius = `${this.borderRadius}rpx`
+          style.overflow='hidden'
+        }
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        return style
+      },
+      // 关闭按钮样式
+      closeBtnStyle() {
+        let style = {}
+        if (this.closeIconColor) {
+          style.color = this.closeIconColor
+        }
+        if (this.closeIconSize) {
+          style.fontSize = this.closeIconSize + 'rpx'
+        }
+        
+        return style
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$t.zIndex.popup
+      }
+    },
+    data() {
+      return {
+        timer: null,
+        visibleSync: false,
+        showPopup: false,
+        closeFromInner: false
+      }
+    },
+    watch: {
+      value(val) {
+        if (val) {
+          // console.log(this.visibleSync);
+          if (this.visibleSync) {
+            this.visibleSync = false
+            return
+          }
+          this.open()
+        } else if (!this.closeFromInner) {
+          this.close()
+        }
+        this.closeFromInner = false
+      }
+    },
+    mounted() {
+      // 组件渲染完成时，检查value是否为true，如果是，弹出popup
+      this.value && this.open()
+    },
+    methods: {
+      // 点击遮罩
+      maskClick() {
+        if (!this.maskCloseable) return
+        this.close()
+      },
+      open() {
+        this.change('visibleSync', 'showPopup', true)
+      },
+      // 关闭弹框
+      close() {
+        // 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
+        // 造成@close事件触发两次
+        this.closeFromInner = true
+        this.change('showPopup', 'visibleSync', false)
+      },
+      // 中部弹出时，需要.tn-drawer-content将内容居中，此元素会铺满屏幕，点击需要关闭弹窗
+      // 让其只在mode=center时起作用 
+      modeCenterClose() {
+        if (this.mode != 'center' || !this.maskCloseable) return
+        this.close()
+      },
+      // 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+      // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+      change(param1, param2, status) {
+        // 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
+        if (this.popup === true) {
+          this.$emit('input', status)
+        }
+        this[param1] = status
+        if (status) {
+          // #ifdef H5 || MP
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            clearTimeout(this.timer)
+          }, 10)
+          // #endif
+          // #ifndef H5 || MP
+          this.$nextTick(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+          })
+          // #endif
+        } else {
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            clearTimeout(this.timer)
+          }, 250)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-popup {
+    /* #ifndef APP-NVUE */
+    display: block;
+    /* #endif */
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    
+    &__content {
+      /* #ifndef APP-NVUE */
+      display: block;
+      /* #endif */
+      position: absolute;
+      transition: all 0.25s linear;
+      
+      &--visible {
+        transform: translate3D(0px, 0px, 0px) !important;
+        &.tn-popup--center {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+      
+      &__center_box {
+        min-width: 100rpx;
+        min-height: 100rpx;
+        /* #ifndef APP-NVUE */
+        display: block;
+        /* #endif */
+        position: relative;
+        background-color: #FFFFFF;
+      }
+      
+      &__scroll-view {
+        width: 100%;
+        height: 100%;
+      }
+      
+      &__center--animation-zoom {
+        transform: scale(1.15);
+      }
+    }
+    
+    &__scroll_view {
+      width: 100%;
+      height: 100%;
+    }
+    
+    &--left {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      background-color: #FFFFFF;
+    }
+    
+    &--right {
+      top: 0;
+      bottom: 0;
+      right: 0;
+      background-color: #FFFFFF;
+    }
+    
+    &--top {
+      left: 0;
+      right: 0;
+      top: 0;
+      background-color: #FFFFFF;
+    }
+    
+    &--bottom {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #FFFFFF;
+    }
+    
+    &--center {
+      display: flex;
+      flex-direction: column;
+      bottom: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+    }
+    
+    &__close {
+      position: absolute;
+      
+      &--top-left {
+        top: 30rpx;
+        left: 30rpx;
+      }
+      
+      &--top-right {
+        top: 30rpx;
+        right: 30rpx;
+      }
+      
+      &--bottom-left {
+        bottom: 30rpx;
+        left: 30rpx;
+      }
+      
+      &--bottom-right {
+        bottom: 30rpx;
+        right: 30rpx;
+      }
+    }
+    
+    &__mask {
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      border: 0;
+      background-color: $tn-mask-bg-color;
+      transition: 0.25s linear;
+      transition-property: opacity;
+      opacity: 0;
+      
+      &--show {
+        opacity: 1;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-radio-group/tn-radio-group.vue b/tuniao-ui/components/tn-radio-group/tn-radio-group.vue
new file mode 100644
index 0000000..8d4f135
--- /dev/null
+++ b/tuniao-ui/components/tn-radio-group/tn-radio-group.vue
@@ -0,0 +1,124 @@
+<template>
+  <view class="tn-radio-group-class tn-radio-group">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import Emitter from '../../libs/utils/emitter.js'
+  
+  export default {
+    mixins: [ Emitter ],
+    name: 'tn-radio-group',
+    props: {
+      // 单选组的值，会选中值相同的选项
+      value: {
+        type: String,
+        default: ''
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用点击标签进行选择
+      disabledLabel: {
+        type: Boolean,
+        default: false
+      },
+      // 选择框的形状 square 方形 circle 圆形
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 组件大小
+      size: {
+        type: Number,
+        default: 34
+      },
+      // 每个radio占的宽度
+      width: {
+        type: String,
+        default: 'auto'
+      },
+      // 是否换行
+      wrap: {
+        type: Boolean,
+        default: false
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 20
+      }
+    },
+    computed: {
+      // 这里computed的变量，都是子组件tn-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+      // 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(tn-radio-group)
+      // 拉取父组件新的变化后的参数
+      parentData() {
+        return [this.value, this.disabled, this.activeColor, this.size, this.disabledLabel, this.shape, this.iconSize, this.width, this.wrap]
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    watch: {
+      // 当父组件中的子组件需要共享的参数发生了变化，手动通知子组件
+      parentData() {
+        if (this.children.length) {
+          this.children.map(child => {
+            // 判断子组件(tn-radio)如果有updateParentData方法的话，子组件重新从父组件拉取了最新的值
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    },
+    created() {
+      // 如果将children定义在data中，在微信小程序会造成循环引用而报错
+      this.children = []
+    },
+    methods: {
+      // 改方法由子组件tn-radio调用，当一个tn-radio被选中的时候，给父组件设置value值（通知其他tn-radio组件）
+      setValue(value) {
+        // 通过子组件传递过来的value值(此被选中的子组件内部已将parentValue设置等于value的值)，将其他tn-radio设置未选中的状态
+        this.children.map(child => {
+          if (child.parentData.value !== value) child.parentData.value = ''
+        })
+        // 通过emit事件，设置父组件通过v-model双向绑定的值
+        this.$emit('input', value)
+        this.$emit('change', value)
+        // 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
+        // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+        setTimeout(() => {
+        	// 将当前的值发送到 tn-form-item 进行校验
+        	this.dispatch('tn-form-item', 'on-form-change', value);
+        }, 60)
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-radio-group {
+    /* #ifndef MP || APP-NVUE */
+    display: inline-flex;
+    flex-wrap: wrap;
+    /* #endif */
+    &::after {
+      content: " ";
+      display: table;
+      clear: both;
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-radio/tn-radio.vue b/tuniao-ui/components/tn-radio/tn-radio.vue
new file mode 100644
index 0000000..7a45db5
--- /dev/null
+++ b/tuniao-ui/components/tn-radio/tn-radio.vue
@@ -0,0 +1,265 @@
+<template>
+  <view class="tn-radio-class tn-radio" :style="[radioStyle]">
+    <view
+      class="tn-radio__icon-wrap"
+      :class="[iconClass]"
+      :style=[iconStyle]
+      @tap="toggle"
+    >
+      <view class="tn-icon-success-circle-fill tn-radio__icon-wrap__icon"></view>
+    </view>
+    
+    <view
+      class="tn-radio__label"
+      :style="{
+        fontSize: labelSize ? labelSize + 'rpx' : ''
+      }"
+      @tap="onClickLabel"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-radio',
+    props: {
+      // radio名称
+      name: {
+        type: [String, Number],
+        default: ''
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用点击标签进行选择
+      disabledLabel: {
+        type: Boolean,
+        default: false
+      },
+      // 选择框的形状 square 方形 circle 圆形
+      shape: {
+        type: String,
+        default: ''
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 组件尺寸
+      size: {
+        type: Number,
+        default: 0
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 0
+      },
+      // label字体大小
+      labelSize: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      // 禁用，父组件会覆盖子组件的状态
+      isDisabled() {
+        return this.disabled ? this.disabled : (this.parentData.disabled ? this.parentData.disabled : false)
+      },
+      // 禁用label点击，父组件会覆盖子组件的状态
+      isDisabledLabel() {
+        return this.disabledLabel ? this.disabledLabel : (this.parentData.disabledLabel ? this.parentData.disabledLabel : false)
+      },
+      // 组件尺寸
+      elSize() {
+        return this.size ? this.size : (this.parentData.size ? this.parentData.size : 34)
+      },
+      // 组件选中时的颜色
+      elActiveColor() {
+        return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#01BEFF')
+      },
+      // 组件形状
+      elShape() {
+        return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle')
+      },
+      iconClass() {
+        let clazz = ''
+        clazz += (' tn-radio__icon-wrap--' + this.elShape)
+        
+        if (this.parentData.value === this.name) clazz += ' tn-radio__icon-wrap--checked'
+        if (this.isDisabled) clazz += ' tn-radio__icon-wrap--disabled'
+        if (this.parentData.value === this.name && this.isDisabled) clazz += ' tn-radio__icon-wrap--disabled--checked'
+      
+        return clazz
+      },
+      iconStyle() {
+        // 当前radio的name等于parent的value才认为时选中
+        let style = {}
+        if (this.elActiveColor && this.parentData.value === this.name && !this.isDisabled) {
+          style.borderColor = this.elActiveColor
+          style.backgroundColor = this.elActiveColor
+        }
+        
+        style.color = this.parentData.value === this.name ? '#FFFFFF' : 'transparent'
+        
+        style.width = this.elSize + 'rpx'
+        style.height = style.width
+        
+        style.fontSize = (this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 20)) + 'rpx'
+        
+        return style
+      },
+      radioStyle() {
+        let style = {}
+        if (this.parent && this.parentData.width) {
+          // #ifdef MP
+          // 各家小程序因为它们特殊的编译结构，使用float布局
+          style.float = 'left';
+          // #endif
+          // #ifndef MP
+          // H5和APP使用flex布局
+          style.flex = `0 0 ${this.parentData.width}`;
+          // #endif
+        }
+        if(this.parent && this.parentData.wrap) {
+        	style.width = '100%';
+        	// #ifndef MP
+        	// H5和APP使用flex布局，将宽度设置100%，即可自动换行
+        	style.flex = '0 0 100%';
+        	// #endif
+        }
+        
+        return style
+      }
+    },
+    data() {
+      return {
+        // 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.xxx的形式
+        // 故只能使用如此方法
+        parentData: {
+          value: null,
+          disabled: null,
+          disabledLabel: null,
+          shape: null,
+          activeColor: null,
+          size: null,
+          width: null,
+          wrap: null,
+          iconSize: null,
+        }
+      }
+    },
+    created() {
+      // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+      this.updateParentData()
+      this.parent.children.push(this)
+    },
+    methods: {
+      updateParentData() {
+        this.getParentData('tn-radio-group')
+      },
+      onClickLabel() {
+        if (!this.isDisabledLabel && !this.isDisabled) {
+          this.setRadioCheckedStatus()
+        }
+      },
+      toggle() {
+        if (!this.isDisabled) {
+          this.setRadioCheckedStatus()
+        }
+      },
+      emitEvent() {
+        // tn-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件
+        if (this.parentData.value !== this.name) this.$emit('change', this.name)
+      },
+      // 改变选中的状态
+      // 更改本组件的parentData.value的值为本组件的name值，同时通过父组件遍历所有的radio实例
+      // 将本组件外的其他radio的parentData.value都设置为空
+      setRadioCheckedStatus() {
+        this.emitEvent()
+        if (this.parent) {
+          this.parent.setValue(this.name)
+          this.parentData.value = this.name
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-radio {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+    line-height: 1.8;
+    
+    &__icon-wrap {
+      color: $tn-font-color;
+      display: flex;
+      flex-direction: row;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: 42rpx;
+      height: 42rpx;
+      color: transparent;
+      text-align: center;
+      transition-property: color, border-color, background-color;
+      font-size: 20rpx;
+      border: 1rpx solid $tn-font-sub-color;
+      transition-duration: 0.2s;
+      
+      /* #ifdef MP-TOUTIAO */
+      // 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+      &__icon {
+      	line-height: 0;
+      }
+      /* #endif */
+      
+      &--circle {
+        border-radius: 100%;
+      }
+      
+      &--square {
+        border-radius: 6rpx;
+      }
+      
+      &--checked {
+        color: #FFFFFF;
+        background-color: $tn-main-color;
+        border-color: $tn-main-color;
+      }
+      
+      &--disabled {
+        background-color: $tn-font-holder-color;
+        border-color: $tn-font-sub-color;
+      }
+      
+      &--disabled--checked {
+        color: $tn-font-sub-color !important;
+      }
+    }
+    
+    &__label {
+      word-wrap: break-word;
+      margin-left: 10rpx;
+      margin-right: 24rpx;
+      color: $tn-font-color;
+      font-size: 30rpx;
+      
+      &--disabled {
+        color: $tn-font-sub-color;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-rate/tn-rate.vue b/tuniao-ui/components/tn-rate/tn-rate.vue
new file mode 100644
index 0000000..f29d5cb
--- /dev/null
+++ b/tuniao-ui/components/tn-rate/tn-rate.vue
@@ -0,0 +1,334 @@
+<template>
+  <view
+    :id="elId"
+    class="tn-rate-class tn-rate"
+    @touchmove.stop.prevent="touchMove"
+  >
+    <view class="tn-rate__wrap" :class="[elClass]" v-for="(item, index) in count" :key="index">
+      <view
+        class="tn-rate__wrap__icon"
+        :class="[`tn-icon-${(allowHalf && halfIcon ? activeIndex > index + 1 : activeIndex > index) ? elActionIcon : elInactionIcon}`]"
+        :style="[iconStyle(index)]"
+        @tap="click(index + 1, $event)"
+      >
+        <!-- 半图标 -->
+        <view
+          v-if="showHalfIcon(index)"
+          class="tn-rate__wrap__icon--half"
+          :class="[`tn-icon-${elActionIcon}`]"
+          :style="[halfIconStyle]"
+        ></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-rate',
+    props: {
+      // 选中星星的数量
+      value: {
+        type: Number,
+        default: 0
+      },
+      // 显示的星星数
+      count: {
+        type: Number,
+        default: 5
+      },
+      // 最小能选择的星星数
+      minCount: {
+        type: Number,
+        default: 0
+      },
+      // 禁用状态
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否可以选择半星
+      allowHalf: {
+        type: Boolean,
+        default: false
+      },
+      // 星星大小
+      size: {
+        type: Number,
+        default: 32
+      },
+      // 被选中的图标
+      activeIcon: {
+        type: String,
+        default: 'star-fill'
+      },
+      // 未被选中的图标
+      inactiveIcon: {
+        type: String,
+        default: 'star'
+      },
+      // 被选中的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 默认颜色
+      inactiveColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 星星之间的距离
+      gutter: {
+        type: Number,
+        default: 10
+      },
+      // 自定义颜色
+      colors: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 自定义图标
+      icons: {
+        type: Array,
+        default() {
+          return []
+        }
+      }
+    },
+    computed: {
+      // 图标显示的比例
+      showHalfIcon(index) {
+        return index => {
+          return this.allowHalf && Math.ceil(this.activeIndex) === index + 1 && this.halfIcon
+        }
+      },
+      // 被激活的图标
+      elActionIcon() {
+        const len = this.icons.length
+        // icons参数传递了3个图标，当选中2个时，用第一个图标，4个时，用第二个图标
+        // 5个时，用第三个图标作为激活的图标
+        if (len && len <= this.count) {
+          const step = Math.round(Math.ceil(this.activeIndex) / Math.round(this.count / len))
+          if (step < 1) return this.icons[0]
+          if (step > len) return this.icons[len - 1]
+          return this.icons[step - 1]
+        }
+        return this.activeIcon
+      },
+      // 未被激活的图标
+      elInactionIcon() {
+        const len = this.icons.length
+        // icons参数传递了3个图标，当选中2个时，用第一个图标，4个时，用第二个图标
+        // 5个时，用第三个图标作为激活的图标
+        if (len && len <= this.count) {
+          const step = Math.round(Math.ceil(this.activeIndex) / Math.round(this.count / len))
+          if (step < 1) return this.icons[0]
+          if (step > len) return this.icons[len - 1]
+          return this.icons[step - 1]
+        }
+        return this.inactiveIcon
+      },
+      // 被激活的颜色
+      elActionColor() {
+        const len = this.colors.length
+        // 如果有设置colors参数(此参数用于将图标分段，比如一共5颗星，colors传3个颜色值，那么根据一定的规则，2颗星可能为第一个颜色
+        // 4颗星为第二个颜色值，5颗星为第三个颜色值)
+        if (len && len <= this.count) {
+          const step = Math.round(Math.ceil(this.activeIndex) / Math.round(this.count / len))
+          if (step < 1) return this.colors[0]
+          if (step > len) return this.colors[len - 1]
+          return this.colors[step - 1]
+        }
+        return this.activeColor
+      },
+      // 图标的样式
+      iconStyle() {
+        return index => {
+          let style = {}
+          
+          style.fontSize = this.$t.string.getLengthUnitValue(this.size)
+          style.padding = `0 ${this.$t.string.getLengthUnitValue(this.gutter / 2)}`
+          // 当前图标的颜色
+          if (this.allowHalf && this.halfIcon) {
+            style.color = this.activeIndex > index + 1 ? this.elActionColor : this.inactiveColor
+          } else {
+            style.color = this.activeIndex > index ? this.elActionColor : this.inactiveColor
+          }
+          return style
+        }
+      },
+      // 半图标样式
+      halfIconStyle() {
+        let style = {}
+        
+        style.fontSize = this.$t.string.getLengthUnitValue(this.size)
+        style.padding = `0 ${this.$t.string.getLengthUnitValue(this.gutter / 2)}`
+        style.color = this.elActionColor
+        return style
+      }
+    },
+    data() {
+      return {
+        // 保证控件的唯一性
+        elId: this.$t.uuid(),
+        elClass: this.$t.uuid(),
+        // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
+        starBoxLeft: 0,
+        // 当前激活的星星的序号
+        activeIndex: this.value,
+        // 每个星星的宽度
+        starWidth: 0,
+        // 每个星星最右边到盒子组件最左边的距离
+        starWidthArr: [],
+        // 标记是否为半图标
+        halfIcon: false,
+      }
+    },
+    watch: {
+      value(val) {
+        this.activeIndex = val
+        if (this.allowHalf && (val % 1 === 0.5)) {
+          this.halfIcon = true
+        } else {
+          this.halfIcon = false
+        }
+      },
+      size() {
+        // 当尺寸修改的时候重新获取布局尺寸信息
+        this.$nextTick(() => {
+          this.getElRectById()
+          this.getElRectByClass()
+        })
+      }
+    },
+    mounted() {
+      this.getElRectById()
+      this.getElRectByClass()
+    },
+    methods: {
+      // 获取评分组件盒子的布局信息
+      getElRectById() {
+        this._tGetRect('#'+this.elId).then(res => {
+          this.starBoxLeft = res.left
+        })
+      },
+      // 获取单个星星的尺寸
+      getElRectByClass() {
+        this._tGetRect('.'+this.elClass).then(res => {
+          this.starWidth = res.width
+          // 把每个星星最右边到盒子最左边的距离
+          for (let i = 0; i < this.count; i++) {
+            this.starWidthArr[i] = (i + 1) * this.starWidth
+          }
+        })
+      },
+      // 手指滑动
+      touchMove(e) {
+        if (this.disabled) return
+        if (!e.changedTouches[0]) return
+        
+        const movePageX = e.changedTouches[0].pageX
+        // 滑动点相对于评分盒子左边的距离
+        const distance = movePageX - this.starBoxLeft
+        
+        // 如果滑动到了评分盒子的左边界，设置为0星
+        if (distance <= 0) {
+          this.activeIndex = 0
+        }
+        
+        // 计算滑动的距离相当于点击多少颗星星
+        let index = Math.ceil(distance / this.starWidth)
+        if (this.allowHalf) {
+          const iconHalfWidth = this.starWidthArr[index - 1] - (this.starWidth / 2)
+          if (distance < iconHalfWidth) {
+            this.halfIcon = true
+            index -= 0.5
+          } else {
+            this.halfIcon = false
+          }
+        }
+        this.activeIndex = index > this.count ? this.count : index
+        
+        if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+        
+        this.emitEvent()
+      },
+      // 通过点击直接选中
+      click(index, e) {
+        if (this.disabled) return
+        // 半星选择
+        if (this.allowHalf) {
+          if (!e.changedTouches[0]) return
+          const movePageX = e.changedTouches[0].pageX
+          // 点击点相对于当前图标左边的距离
+          const distance = movePageX - this.starBoxLeft
+          const iconHalfWidth = this.starWidthArr[index - 1] - (this.starWidth / 2)
+          if (distance < iconHalfWidth) {
+            this.halfIcon = true
+          } else {
+            this.halfIcon = false
+          }
+        }
+        
+        // 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
+        if (index == 1) {
+          if (this.allowHalf && this.allowHalf) {
+            if ((this.activeIndex === 0.5 && this.halfIcon) || 
+                (this.activeIndex === 1 && !this.halfIcon)) {
+              this.activeIndex = 0
+            } else {
+              this.activeIndex = this.halfIcon ? 0.5 : 1
+            }
+          } else {
+            if (this.activeIndex == 1) {
+              this.activeIndex = 0
+            } else {
+              this.activeIndex = 1
+            }
+          }
+        } else {
+          this.activeIndex = (this.allowHalf && this.halfIcon) ? index - 0.5 : index
+        }
+        
+        if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+        
+        this.emitEvent()
+      },
+      // 发送事件
+      emitEvent() {
+        this.$emit('change', this.activeIndex)
+        // 修改v-model的值
+        this.$emit('input', this.activeIndex)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-rate {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    
+    &__wrap {
+      
+      &__icon {
+        position: relative;
+        box-sizing: border-box;
+        
+        &--half {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: inline-block;
+          overflow: hidden;
+          width: 50%;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-read-more/tn-read-more.vue b/tuniao-ui/components/tn-read-more/tn-read-more.vue
new file mode 100644
index 0000000..abead4e
--- /dev/null
+++ b/tuniao-ui/components/tn-read-more/tn-read-more.vue
@@ -0,0 +1,235 @@
+<template>
+  <view>
+    <view class="tn-read-more-class tn-read-more">
+      <!-- 内容 -->
+      <view
+        :id="elId"
+        class="tn-read-more__content"
+        :style="[contentStyle]"
+      >
+        <slot></slot>
+      </view>
+      
+      <!-- 展开收起按钮 -->
+      <view
+        v-if="isLongContent"
+        class="tn-read-more__show-more__wrap"
+        :class="{'tn-read-more__show-more': showMore}"
+        :style="[innerShadowStyle]"
+        @tap="toggleReadMore">
+        <text class="tn-read-more__show-more--text" :style="[fontStyle]">{{ showMore ? resolvedCloseText : resolvedOpenText }}</text>
+        <view class="tn-read-more__show-more--icon">
+          <view :class="[tipIconClass]" :style="[fontStyle]"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-read-more',
+    mixins: [componentsColorMixin],
+    props: {
+      // 默认占位高度
+      showHeight: {
+        type: Number,
+        default: 400
+      },
+      // 显示收起按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 展开提示文字
+      openText: {
+        type: String,
+        default: ''
+      },
+      // 收起提示文字
+      closeText: {
+        type: String,
+        default: ''
+      },
+      // 展开提示图标
+      openIcon: {
+        type: String,
+        default: 'down'
+      },
+      // 收起提示图标
+      closeIcon: {
+        type: String,
+        default: 'up'
+      },
+      // 阴影样式
+      shadowStyle: {
+        type: Object,
+        default () {
+        	return {
+        		backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+        		paddingTop: "300rpx",
+        		marginTop: "-300rpx"
+        	}
+        }
+      },
+      // 组件标识
+      index: {
+        type: [Number, String],
+        default: ''
+      }
+    },
+    computed: {
+      resolvedOpenText() {
+        return this.openText || getLocalizedText(this, '展开阅读全文', 'Read More')
+      },
+      resolvedCloseText() {
+        return this.closeText || getLocalizedText(this, '收起', 'Collapse')
+      },
+      paramsChange() {
+        return `${this.open}-${this.showHeight}`
+      },
+      contentStyle() {
+        let style = {}
+        if (this.isLongContent && !this.showMore) {
+          style.height = `${this.showHeight}rpx`
+        } else {
+          if (!this.initHeight) {
+            style.height = 'auto'
+          } else {
+            style.height = `${this.contentHeight}px`
+          }
+        }
+        
+        return style
+      },
+      innerShadowStyle() {
+        let style = {}
+        // 折叠时才需要阴影样式
+        if (!this.showMore) {
+          style = Object.assign(style, this.shadowStyle)
+        }
+        
+        return style
+      },
+      fontStyle() {
+        let style = {}
+        style.color = this.fontColorStyle ? this.fontColorStyle : '#01BEFF'
+        style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '28rpx'
+        
+        return style
+      },
+      tipIconClass() {
+        if (this.showMore) {
+          if (this.closeIcon) {
+            return `tn-icon-${this.closeIcon}`
+          }
+        } else {
+          if (this.openIcon) {
+            return `tn-icon-${this.openIcon}`
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        elId: this.$t.uuid(),
+        // 标记是否已经初始化高度完成
+        initHeight: false,
+        // 是否需要隐藏一部分内容
+        isLongContent: false,
+        // 当前展开的打开、关闭状态
+        showMore: false,
+        // 内容的高度
+        contentHeight: 0
+      }
+    },
+    watch: {
+      paramsChange(value) {
+        this.initHeight = false
+        this.isLongContent = false
+        this.showMore = true
+        this.$nextTick(() => {
+          this.init()
+        })
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      // 初始化组件
+      init() {
+        // 判断高度，如果真实内容的高度大于占位高度，则显示展开与收起的控制按钮
+        this._tGetRect('#' + this.elId).then(res => {
+          this.contentHeight = res.height
+          this.initHeight = true
+          if (res.height > uni.upx2px(this.showHeight)) {
+            this.isLongContent = true
+            this.showMore = false
+          }
+        })
+      },
+      // 展开或者收起内容
+      toggleReadMore() {
+        this.showMore = !this.showMore
+        // 是否显示收起按钮
+        if (!this.closeBtn) this.isLongContent = false
+        
+        this.$emit(this.showMore ? 'open' : 'closed', this.index)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-read-more {
+    
+    &__content {
+      font-size: 28rpx;
+      color: $tn-font-color;
+      line-height: 1.8;
+      text-align: left;
+      overflow: hidden;
+      transition: all 0.3s linear;
+    }
+    
+    &__show-more {
+      padding-top: 0;
+      background: none;
+      margin-top: 20rpx;
+      
+      &__wrap {
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 26rpx;
+      }
+      
+      &--text {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+      
+      &--icon {
+        margin-left: 14rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-row-notice/tn-row-notice.vue b/tuniao-ui/components/tn-row-notice/tn-row-notice.vue
new file mode 100644
index 0000000..9cc965e
--- /dev/null
+++ b/tuniao-ui/components/tn-row-notice/tn-row-notice.vue
@@ -0,0 +1,301 @@
+<template>
+  <view
+    v-if="show"
+    class="tn-row-notice-class tn-row-notice"
+    :class="[backgroundColorClass]"
+    :style="[noticeStyle]"
+  >
+    <view class="tn-row-notice__wrap">
+      <!-- 左图标 -->
+      <view class="tn-row-notice__icon">
+        <view
+          v-if="leftIcon"
+          class="tn-row-notice__icon--left" 
+          :class="[`tn-icon-${leftIconName}`,fontColorClass]"
+          :style="[fontStyle('leftIcon')]"
+          @tap="clickLeftIcon"></view>
+      </view>
+      
+      <!-- 消息体 -->
+      <view class="tn-row-notice__content-box" id="tn-row-notice__content-box">
+        <view
+          class="tn-row-notice__content"
+          id="tn-row-notice__content"
+          :style="{
+            animationDuration: animationDuration,
+            animationPlayState: animationPlayState
+          }"
+        >
+          <text
+            class="tn-row-notice__content--text"
+            :class="[fontColorClass]"
+            :style="[fontStyle()]"
+            @tap="click"
+          >{{ showText }}</text>
+        </view>
+      </view>
+      
+      <!-- 右图标 -->
+      <view class="tn-row-notice__icon">
+        <view
+          v-if="rightIcon"
+          class="tn-row-notice__icon--right" 
+          :class="[`tn-icon-${rightIconName}`,fontColorClass]"
+          :style="[fontStyle('rightIcon')]"
+          @tap="clickRightIcon"></view>
+        <view
+          v-if="closeBtn"
+          class="tn-row-notice__icon--right" 
+          :class="[`tn-icon-close`,fontColorClass]"
+          :style="[fontStyle('close')]"
+          @tap="close"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-row-notice',
+    mixins: [componentsColorMixin],
+    props: {
+      // 显示的内容
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 播放状态
+      // play -> 播放 paused -> 暂停
+      playStatus: {
+        type: String,
+        default: 'play'
+      },
+      // 是否显示左边图标
+      leftIcon: {
+        type: Boolean,
+        default: true
+      },
+      // 左边图标的名称
+      leftIconName: {
+        type: String,
+        default: 'sound'
+      },
+      // 左边图标的大小
+      leftIconSize: {
+        type: Number,
+        default: 34
+      },
+      // 是否显示右边的图标
+      rightIcon: {
+        type: Boolean,
+        default: false
+      },
+      // 右边图标的名称
+      rightIconName: {
+        type: String,
+        default: 'right'
+      },
+      // 右边图标的大小
+      rightIconSize: {
+        type: Number,
+        default: 26
+      },
+      // 是否显示关闭按钮
+      closeBtn: {
+        type: Boolean,
+        default: false
+      },
+      // 圆角
+      radius: {
+        type: Number,
+        default: 0
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: '18rpx 24rpx'
+      },
+      // 自动播放
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 水平滚动时的速度，即每秒滚动多少rpx
+      speed: {
+        type: Number,
+        default: 160
+      }
+    },
+    computed: {
+      fontStyle() {
+        return (type) => {
+          let style = {}
+          style.color = this.fontColorStyle ? this.fontColorStyle : ''
+          style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
+          if (type === 'leftIcon' && this.leftIconSize) {
+            style.fontSize = this.leftIconSize + 'rpx'
+          }
+          if (type === 'rightIcon' && this.rightIconSize) {
+            style.fontSize = this.rightIconSize + 'rpx'
+          }
+          if (type === 'close') {
+            style.fontSize = '24rpx'
+          }
+          
+          return style
+        }
+      },
+      noticeStyle() {
+        let style = {}
+        style.backgroundColor = this.backgroundColorStyle ? this.backgroundColorStyle : 'transparent'
+        if (this.padding) style.padding = this.padding
+        return style
+      }
+    },
+    data() {
+      return {
+        // 滚动文字的宽度
+        textWidth: 0,
+        // 存放滚动文字的盒子的宽度
+        textBoxWidth: 0,
+        // 动画执行的时间
+        animationDuration: '10s',
+        // 动画执行状态
+        animationPlayState: 'paused',
+        // 当前显示的文本
+        showText: ''
+      }
+    },
+    watch: {
+      list: {
+        handler(value) {
+          this.showText = value.join('，')
+          this.$nextTick(() => {
+            this.initNotice()
+          })
+        },
+        immediate: true
+      },
+      playStatus(value) {
+        if (value === 'play') this.animationPlayState = 'running'
+        else this.animationPlayState = 'paused'
+      },
+      speed(value) {
+        this.initNotice()
+      }
+    },
+    methods: {
+      // 初始化通知栏
+      initNotice() {
+        let query = [],
+          textBoxWidth = 0,
+          textWidth = 0;
+        let textQuery = new Promise((resolve, reject) => {
+          uni.createSelectorQuery()
+            .in(this)
+            .select(`#tn-row-notice__content`)
+            .boundingClientRect()
+            .exec(ret => {
+              this.textWidth = ret[0].width
+              resolve()
+            })
+        })
+        query.push(textQuery)
+        
+        Promise.all(query).then(() => {
+          // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#tn-row-notice__content-box的宽度，因为设置了.tn-row-notice__content样式中设置了padding-left: 100%
+          this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`
+          // 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
+          this.animationPlayState = 'paused'
+          setTimeout(() => {
+            if (this.autoplay && this.playStatus === 'play') this.animationPlayState = 'running'
+          }, 10)
+        })
+      },
+      // 点击了通知栏
+      click() {
+        this.$emit('click')
+      },
+      // 点击了关闭按钮
+      close() {
+        this.$emit('close')
+      },
+      // 点击了左边图标
+      clickLeftIcon() {
+        this.$emit('clickLeft')
+      },
+      // 点击了右边图标
+      clickRightIcon() {
+        this.$emit('clickRight')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-row-notice {
+    width: 100%;
+    overflow: hidden;
+    
+    &__wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    &__content {
+      &-box {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        overflow: hidden;
+        margin-left: 12rpx;
+      }
+      
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      text-align: right;
+      // 为了能滚动起来
+      padding-left: 100%;
+      animation: tn-notice-loop-animation 10s linear infinite both;
+      
+      &--text {
+        word-break: keep-all;
+        white-space: nowrap;
+      }
+    }
+    
+    &__icon {
+      &--left {
+        display: inline-flex;
+        align-items: center;
+      }
+      
+      &--right {
+        margin-left: 12rpx;
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+  
+  @keyframes tn-notice-loop-animation {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-scroll-list/tn-scroll-list.vue b/tuniao-ui/components/tn-scroll-list/tn-scroll-list.vue
new file mode 100644
index 0000000..1dd86eb
--- /dev/null
+++ b/tuniao-ui/components/tn-scroll-list/tn-scroll-list.vue
@@ -0,0 +1,177 @@
+<template>
+  <view class="tn-scroll-list-class tn-scroll-list">
+    <scroll-view
+      class="tn-scroll-list__scroll-view"
+      scroll-x
+      :upper-threshold="0"
+      :lower-threshold="0"
+      @scroll="scrollHandler"
+      @scrolltoupper="scrollToUpperHandler"
+      @scrolltolower="scrollToLowerHandler"
+    >
+      <view class="tn-scroll-list__scroll-view__content">
+        <slot></slot>
+      </view>
+    </scroll-view>
+    
+    <!-- 指示器-->
+    <view
+      v-if="indicator"
+      class="tn-scroll-list__indicator"
+      :style="[indicatorStyle]"
+    >
+      <view class="tn-scroll-list__indicator__line" :style="[lineStyle]">
+        <view class="tn-scroll-list__indicator__line__bar" :style="[barStyle]"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-scroll-list',
+    props: {
+      // 是否显示指示器
+      indicator: {
+        type: Boolean,
+        default: true
+      },
+      // 指示器整体宽度
+      indicatorWidth: {
+        type: [String, Number],
+        default: 50
+      },
+      // 指示器滑块的宽度
+      indicatorBarWidth: {
+        type: [String, Number],
+        default: 20
+      },
+      // 指示器颜色
+      indicatorColor: {
+        type: String,
+        default: '#E6E6E6'
+      },
+      // 指示器激活时颜色
+      indicatorActiveColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 自定义指示器样式
+      indicatorStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      // 指示器滑块样式
+      barStyle() {
+        let style = {}
+        // 获取滑动距离的比值
+        // 滑块当前移动距离与总需滑动距离(指示器的总宽度减去滑块宽度)的比值 = scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比
+        const scrollLeft = this.scrollInfo.scrollLeft,
+          scrollWidth = this.scrollInfo.scrollWidth,
+          barAllMoveWidth = uni.upx2px(this.indicatorWidth) - uni.upx2px(this.indicatorBarWidth);
+        const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
+        style.transform = `translateX(${x}px)`
+        // 设置滑块的宽度和背景颜色
+        style.width = `${this.indicatorBarWidth}rpx`
+        style.backgroundColor = this.indicatorActiveColor
+        return style
+      },
+      // 指示器整体样式
+      lineStyle() {
+        let style = {}
+        style.width = `${this.indicatorWidth}rpx`
+        style.backgroundColor = this.indicatorColor
+        return style
+      }
+    },
+    data() {
+      return {
+        // 滑动时滑块信息
+        scrollInfo: {
+          scrollLeft: 0,
+          scrollWidth: 0
+        },
+        // 滑动区域的宽度
+        scrollWidth: 0
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      // 初始化
+      init() {
+        this.getComponentWidth()
+      },
+      // 处理滚动事件
+      scrollHandler(event) {
+        this.scrollInfo = event.detail
+      },
+      // 滚动到最左边触发事件
+      scrollToUpperHandler() {
+        this.$emit('left')
+        this.scrollInfo.scrollLeft = 0
+      },
+      // 滚动到最右边触发事件
+      scrollToLowerHandler() {
+        this.$emit('right')
+        // this.scrollInfo.scrollLeft = uni.upx2px(this.indicatorWidth) - uni.upx2px(this.indicatorBarWidth)
+      },
+      // 获取组件的宽度
+      getComponentWidth() {
+        this._tGetRect('.tn-scroll-list').then(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.getComponentWidth()
+            }, 10)
+            return
+          }
+          this.scrollWidth = res.width
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-scroll-list {
+    padding-bottom: 20rpx;
+    
+    &__scroll-view {
+      display: flex;
+      flex-direction: row;
+      
+      &__content {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+    
+    &__indicator {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      margin-top: 30rpx;
+      
+      &__line {
+        width: 120rpx;
+        height: 8rpx;
+        border-radius: 200rpx;
+        overflow: hidden;
+        
+        &__bar {
+          width: 40rpx;
+          height: 8rpx;
+          border-radius: 200rpx;
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-scroll-view/tn-scroll-view.vue b/tuniao-ui/components/tn-scroll-view/tn-scroll-view.vue
new file mode 100644
index 0000000..2bca2f5
--- /dev/null
+++ b/tuniao-ui/components/tn-scroll-view/tn-scroll-view.vue
@@ -0,0 +1,419 @@
+<template>
+  <view class="tn-scroll-view-class tn-scroll-view">
+    <scroll-view
+      class="scroll-view"
+      :style="[scrollViewStyle]"
+      scroll-y
+      scroll-anchoring
+      enable-back-to-top
+      :throttle="false"
+      :scroll-top="scrollTop"
+      :lower-threshold="lowerThreshold"
+      @scroll="handleScroll"
+      @touchend="handleTouchEnd"
+      @touchmove.prevent.stop="handleTouchMove"
+      @touchstart="handleTouchStart"
+      @scrolltolower="handleScrollTolower"
+    >
+      <view class="scroll__content" :style="[scrollContentStyle]">
+        <view class="scroll__pull-down">
+          <slot name="pulldown">
+            <view class="scroll__refresh" :style="[refreshStyle]">
+              <view><tn-loading :animation="refreshing"></tn-loading></view>
+              <view class="scroll__refresh--text" :style="[refreshTextStyle]">{{ refreshStateText }}</view>
+            </view>
+          </slot>
+        </view>
+        <view :id="elScrollDataId" class="scroll__data">
+          <slot></slot>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-scroll-view',
+    mixins: [ componentsColor ],
+    props: {
+      // H5顶部导航栏的高度
+      h5NavHeight: {
+        type: Number,
+        default: 45
+      },
+      // 自定义顶部导航栏高度
+      customNavHeight: {
+        type: Number,
+        default: 0
+      },
+      // 可滚动区域顶部偏移高度
+      offsetTop: {
+        type: Number,
+        default: 0
+      },
+      // 可滚动区域底部偏移高度
+      offsetBottom: {
+        type: Number,
+        default: 0
+      },
+      // 容器高度 (不设置则自动计算)
+      height: {
+        type: Number,
+        default: null
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 禁用下拉刷新
+      pullDownDisabled: {
+        type: Boolean,
+        default: false
+      },
+      // 下拉速率
+      pullDownSpeed: {
+        type: Number,
+        default: 0.5
+      },
+      // 刷新延迟
+      refreshDelayed: {
+        type: Number,
+        default: 800
+      },
+      // 刷新完成后延迟
+      refreshFinishDelayed: {
+        type: Number,
+        default: 800
+      },
+      // 下拉刷新距离
+      refresherThreshold: {
+        type: Number,
+        default: 70
+      },
+      // 上拉加载距离
+      lowerThreshold: {
+        type: Number,
+        default: 40
+      },
+      // 刷新状态
+      refreshState: {
+        type: Boolean,
+        default: false
+      },
+      // 正在刷新文字
+      refreshingText: {
+        type: String,
+        default: ''
+      },
+      // 刷新成功文字
+      refreshSuccessText: {
+        type: String,
+        default: ''
+      },
+      // 下拉中的文字
+      pulldownText: {
+        type: String,
+        default: ''
+      },
+      // 下拉完成的文字
+      pulldownFinishText: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        // 滚动容器内容id
+        elScrollDataId: '',
+        // 系统信息
+        systemInfo: {
+          height: 0,
+          statusBarHeight: 0
+        },
+        // 距离顶部滚动高度
+        scrollTop: 0,
+        // 滚动内容视图顶部位置
+        scrollDataTop: -1,
+        // 滚动内容视图顶部位置偏移
+        scrollDataOffsetTop: -1,
+        // 滚动区域的高度
+        scrollViewHeight: 0,
+        // 当前滚动高度
+        currentScrollTop: 0,
+        // 当前触摸点Y轴开始坐标
+        currentTouchStartY: 0,
+        // 刷新状态文字
+        refreshStateText: '',
+        // 是否刷新中
+        refreshing: false,
+        // 是否刷新完成
+        refreshFinish: false,
+        // 是否正在下拉
+        pulldowning: false,
+        // 下拉高度
+        pullDownHeight: 0,
+        // 是否显示下拉加载
+        showPullDown: false
+      }
+    },
+    computed: {
+      scrollViewStyle() {
+        let style = {}
+        style.height = this.scrollViewHeight + 'px'
+        if (!this.backgroundColorClass) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        return style
+      },
+      scrollContentStyle() {
+        let style = {}
+        style.transform = this.showPullDown ? `translateY(${this.pullDownHeight}px)` : `translateY(0px)`
+        style.transition = this.pulldowning ? `transform 100ms ease-out` : `transform 500ms cubic-bezier(0.19,1.64,0.42,0.72)`
+        return style
+      },
+      refreshStyle() {
+        let style = {}
+        style.opacity = this.showPullDown ? 1 : 0
+        return style
+      },
+      refreshTextStyle() {
+        let style = {}
+        if (!this.fontColorClass) {
+          style.color = this.fontColorStyle
+        }
+        return style
+      },
+      loadTextStyle() {
+        let style = {}
+        if (!this.fontColorClass) {
+          style.color = this.fontColorStyle
+        }
+        return style
+      }
+    },
+    watch: {
+      refreshState(nVal, oVal) {
+        if (!nVal) {
+          if (this.showPullDown) {
+            // 关闭正在下拉
+            this.pulldowning = false
+            // 隐藏下拉刷新
+            this.showPullDown = false
+            // 关闭正在刷新
+            this.refreshing = false
+          }
+        }
+      }
+    },
+    created() {
+      this.elScrollDataId = this.$t.uuid()
+      this.getSystemInfo()
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      getLocalizedLabel(key) {
+        const map = {
+          refreshingText: getLocalizedText(this, '正在刷新', 'Refreshing'),
+          refreshSuccessText: getLocalizedText(this, '刷新成功', 'Refresh complete'),
+          pulldownText: getLocalizedText(this, '下拉刷新', 'Pull to refresh'),
+          pulldownFinishText: getLocalizedText(this, '松开刷新', 'Release to refresh')
+        }
+        return map[key] || ''
+      },
+      // 组件初始化
+      init() {
+        this.refreshStateText = this.pulldownText || this.getLocalizedLabel('pulldownText')
+        // 初始化scrollView信息
+        this.updateScrollViewInfo()
+      },
+      // 获取系统信息
+      getSystemInfo() {
+        const systemInfo = uni.getSystemInfoSync()
+        this.systemInfo.height = systemInfo.safeArea.height
+        this.systemInfo.statusBarHeight = systemInfo.statusBarHeight
+      },
+      // 更新scrollView信息
+      updateScrollViewInfo() {
+        if (this.height) {
+          this.scrollViewHeight = this.height
+        } else {
+          // 设置scrollView的高度和组件顶部位置
+          // console.log(this.systemInfo, this.offsetTop, this.customNavHeight);
+          // #ifdef H5
+          this.scrollViewHeight = this.systemInfo.height - (
+            this.offsetTop + 
+            (this.customNavHeight ? this.customNavHeight : this.h5NavHeight) + 
+            this.offsetBottom)
+          this.scrollDataOffsetTop = this.offsetTop + (this.customNavHeight ? this.customNavHeight : this.h5NavHeight)
+          // #endif
+          // #ifndef H5
+          this.scrollViewHeight = this.systemInfo.height - (
+            this.offsetTop + 
+            this.systemInfo.statusBarHeight +
+            this.offsetBottom)
+          this.scrollDataOffsetTop = this.offsetTop + this.systemInfo.statusBarHeight
+          // #endif
+        }
+      },
+      // 获取scrollView内容信息
+      async getScrollDataInfo() {
+        const scrollInfo = await this._tGetRect(`#${this.elScrollDataId}`)
+        this.scrollDataTop = scrollInfo.top
+      },
+      // 上拉触底事件
+      handleScrollTolower(e) {
+        if (this.pullUpDisabled) return
+        this.$emit('scrolltolower', e)
+      },
+      // 滚动事件
+      handleScroll(e) {
+        this.currentScrollTop = e.detail.scrollTop
+        this.$emit('scroll', e.detail)
+      },
+      // 触摸按下事件
+      handleTouchStart(e) {
+        if (this.disabled) return
+        this.currentTouchStartY = e.touches[0].clientY
+        this.getScrollDataInfo()
+        this.$emit('touchStart', e)
+      },
+      // 触摸下滑事件
+      handleTouchMove(e) {
+        if (this.disabled) return
+        if (this.currentScrollTop == 0 && e.touches[0].clientY >= this.currentTouchStartY) {
+          // 容器滑动的偏移
+          const moveOffset = this.scrollDataTop > 0 ?
+            (this.scrollDataOffsetTop - this.scrollDataTop) :
+            (Math.abs(this.scrollDataTop) + this.scrollDataOffsetTop)
+          
+          this.pulldowning = true
+          this.showPullDown = true
+          let pullDownDistance = ((e.touches[0].clientY - this.currentTouchStartY)  - moveOffset) * this.pullDownSpeed
+          this.pullDownHeight = pullDownDistance
+          // this.pullDownHeight = pullDownDistance > this.refresherThreshold ? this.refresherThreshold : pullDownDistance
+          this.refreshStateText = this.pullDownHeight >= this.refresherThreshold
+            ? (this.pulldownFinishText || this.getLocalizedLabel('pulldownFinishText'))
+            : (this.pulldownText || this.getLocalizedLabel('pulldownText'))
+          if (pullDownDistance > this.refresherThreshold) {
+            this.$emit('refreshReady')
+          }
+        }
+        this.$emit('touchMove', e)
+      },
+      // 触摸松开处理
+      handleTouchEnd(e) {
+        if (this.disabled) return
+        // 处理下拉刷新
+        if (this.showPullDown) {
+          // 当下拉高度小于下拉阈值
+          if (this.pullDownHeight < this.refresherThreshold) {
+            // 关闭正在下拉
+            this.pulldowning = false
+            // 重置下拉高度
+            this.pullDownHeight = 0
+            // 隐藏下拉刷新
+            this.showPullDown = false
+            // 触发下拉中断事件
+            this.$emit('refreshStop')
+          } else {
+            this.pullDownHeight = this.pullDownHeight > this.refresherThreshold ? this.refresherThreshold : this.pullDownHeight
+            this.refresh()
+          }
+        }
+        
+        // 触发下拉触摸松开事件
+        this.$emit('touchEnd', e)
+      },
+      
+      // 刷新数据
+      refresh() {
+        // 设置刷新未完成
+        this.refreshFinish = false
+        // 开启正在刷新
+        this.refreshing = true
+        // 设置正在刷新状态文字
+        this.refreshStateText = this.refreshingText || this.getLocalizedLabel('refreshingText')
+        // 触发refresh事件
+        setTimeout(() => {
+          this.$emit('refresh')
+        }, this.refreshDelayed)
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-scroll-view {
+    
+    .scroll-view {
+      position: relative;
+      touch-action: none;
+      
+      .scroll__content {
+        display: flex;
+        will-change: transform;
+        flex-direction: column;
+        
+        .scroll {
+          &__pull-down {
+            position: absolute;
+            left: 0;
+            width: 100%;
+            display: flex;
+            padding: 30rpx 0;
+            align-items: center;
+            justify-content: center;
+            transform: translateY(-100%);
+          }
+          
+          &__refresh {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &--text {
+              margin-left: 10rpx;
+            }
+          }
+          
+          &__data {
+            
+          }
+          
+          &__pull-up {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transform: translateY(100%);
+          }
+          &__load {
+            padding: 20rpx 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &--text {
+              margin-left: 10rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-select/tn-select.vue b/tuniao-ui/components/tn-select/tn-select.vue
new file mode 100644
index 0000000..53e71d7
--- /dev/null
+++ b/tuniao-ui/components/tn-select/tn-select.vue
@@ -0,0 +1,393 @@
+<template>
+  <view v-if="value" class="tn-select-class tn-select">
+    <tn-popup
+      v-model="value"
+      mode="bottom"
+      :popup="false"
+      length="auto"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :maskCloseable="maskCloseable"
+      :zIndex="elZIndex"
+      @close="close"
+    >
+      <view class="tn-select__content">
+        <!-- 头部 -->
+        <view class="tn-select__content__header" @touchmove.stop.prevent>
+          <view
+            class="tn-select__content__header__btn tn-select__content__header--cancel"
+            :style="{ color: cancelColor }"
+            hover-class="tn-hover-class"
+            hover-stay-time="150"
+            @tap="getResult('cancel')"
+          >{{ resolvedCancelText }}</view>
+          <view class="tn-select__content__header__title">{{ title }}</view>
+          <view
+            class="tn-select__content__header__btn tn-select__content__header--confirm"
+            :style="{ color: confirmColor }"
+            hover-class="tn-hover-class"
+            hover-stay-time="150"
+            @tap="getResult('confirm')"
+          >{{ resolvedConfirmText }}</view>
+        </view>
+        <!-- 列表内容 -->
+        <view class="tn-select__content__body">
+          <picker-view
+            class="tn-select__content__body__view"
+            :value="defaultSelector"
+            @pickstart="pickStart"
+            @pickend="pickEnd"
+            @change="columnChange"
+          >
+            <picker-view-column v-for="(item, index) in columnData" :key="index">
+              <view class="tn-select__content__body__item" v-for="(sub_item, sub_index) in item" :key="sub_index">
+                <view class="tn-text-ellipsis">
+                  {{ sub_item[labelName] }}
+                </view>
+              </view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+      </view>
+    </tn-popup>
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-select',
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 列表模式
+      // single 单列 multi 多列 multi-auto 多列联动
+      mode: {
+        type: String,
+        default: 'single'
+      },
+      // 列数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // value属性名
+      valueName: {
+        type: String,
+        default: 'value'
+      },
+      // label属性名
+      labelName: {
+        type: String,
+        default: 'label'
+      },
+      // 当mode=multi-auto时，children的属性名
+      childName: {
+        type: String,
+        default: 'children'
+      },
+      // 默认值
+      defaultValue: {
+        type: Array,
+        default() {
+          return [0]
+        }
+      },
+      // 顶部标题
+      title: {
+        type: String,
+        default: ''
+      },
+      // 取消按钮文字
+      cancelText: {
+        type: String,
+        default: null
+      },
+      // 取消按钮文字颜色
+      cancelColor: {
+        type: String,
+        default: ''
+      },
+      // 确认按钮文字
+      confirmText: {
+        type: String,
+        default: null
+      },
+      // 确认按钮文字颜色
+      confirmColor: {
+        type: String,
+        default: ''
+      },
+      // 点击遮罩关闭
+      maskCloseable: {
+        type: Boolean,
+        default: true
+      },
+      // 预留安全区域
+      safeAreaInsetBottom: {
+        type: Boolean,
+        default: false
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      resolvedCancelText() {
+        return this.cancelText === null ? getLocalizedText(this, '取消', 'Cancel') : this.cancelText
+      },
+      resolvedConfirmText() {
+        return this.confirmText === null ? getLocalizedText(this, '确认', 'Confirm') : this.confirmText
+      },
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$t.zIndex.popup
+      }
+    },
+    data() {
+      return {
+        // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
+        moving: false,
+        // 用户保存当前列的索引，用于判断下一次变化时改变的列
+        defaultSelector: [0],
+        // picker-view数据
+        columnData: [],
+        // 保存用户选择的结果
+        selectValue: [],
+        // 上一次改变时的index
+        lastSelectIndex: [],
+        // 列数
+        columnNum: 0
+      }
+    },
+    watch: {
+      // 在select弹起的时候，重新初始化所有数据
+      value: {
+        handler(val) {
+          if (val) setTimeout(() => this.init(), 10)
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      // 标识滑动开始，只有微信小程序才有这样的事件
+      pickStart() {
+      	// #ifdef MP-WEIXIN
+      	this.moving = true;
+      	// #endif
+      },
+      // 标识滑动结束
+      pickEnd() {
+      	// #ifdef MP-WEIXIN
+      	this.moving = false;
+      	// #endif
+      },
+      init() {
+        this.setColumnNum()
+        this.setDefaultSelector()
+        this.setColumnData()
+        this.setSelectValue()
+      },
+      // 获取默认选中列下标
+      setDefaultSelector() {
+        // 如果没有传入默认值，生成用0填充长度为columnNum的数组
+        this.defaultSelector = this.defaultValue.length === this.columnNum ? this.defaultValue : Array(this.columnNum).fill(0)
+        this.lastSelectIndex = this.$t.deepClone(this.defaultSelector)
+      },
+      // 计算列数
+      setColumnNum() {
+        // 单列的数量为1
+        if (this.mode === 'single') this.columnNum = 1
+        // 多列时取list的长度
+        else if (this.mode === 'multi') this.columnNum = this.list.length
+        // 多列联动时，通过遍历list的第一个元素，得出有多少列
+        else if (this.mode === 'multi-auto') {
+          let num = 1
+          let column = this.list
+          // 如果存在children属性，再次遍历
+          while (column[0][this.childName]) {
+            column = column[0] ? column[0][this.childName] : {},
+            num++
+          }
+          this.columnNum = num
+        }
+      },
+      // 获取需要展示在picker中的列数据
+      setColumnData() {
+        let data = []
+        this.selectValue = []
+        if (this.mode === 'multi-auto') {
+          // 获取所有数据中的第一个元素
+          let column = this.list[this.defaultSelector.length ? this.defaultSelector[0] : 0]
+          // 通过循环所有列数，再根据设定列的数组，得出当前需要渲染的整个列数组
+          for (let i = 0; i < this.columnNum; i++) {
+            // 第一列默认为整个list数组
+            if (i === 0) {
+              data[i] = this.list
+              column = column[this.childName]
+            } else {
+              // 大于第一列时，判断是否有默认选中的，如果没有就用该列的第一项
+              data[i] = column
+              column = column[this.defaultSelector[i]][this.childName]
+            }
+          }
+        } else if (this.mode === 'single') {
+          data[0] = this.list
+        } else {
+          data = this.list
+        }
+        this.columnData = data
+      },
+      // 获取默认选中的值，如果没有设置，则默认选中第一项
+      setSelectValue() {
+        let tmp = null
+        for (let i = 0; i < this.columnNum; i++) {
+          tmp = this.columnData[i][this.defaultSelector[i]]
+          let data = {
+            value: tmp ? tmp[this.valueName] : null,
+            label: tmp ? tmp[this.labelName] : null
+          }
+          // 判断是否存在额外的参数
+          if (tmp && tmp.extra) data.extra = tmp.extra
+          this.selectValue.push(data)
+        }
+      },
+      // 列选项
+      columnChange(event) {
+        let index = null
+        let columnIndex = event.detail.value
+        
+        this.selectValue = []
+        if (this.mode === 'multi-auto') {
+          // 对比前后两个数组，判断变更的是那一列
+          this.lastSelectIndex.map((v, idx) => {
+            if (v != columnIndex[idx]) index = idx
+          })
+          this.defaultSelector = columnIndex
+          // 当前变化列的下一列的数据，需要获取上一列的数据，同时需要指定是上一列的第几个的children，再往后的
+          // 默认是队列的第一个为默认选项
+          for (let i = index + 1; i < this.columnNum; i++) {
+            this.columnData[i] = this.columnData[i - 1][i - 1 == index ? columnIndex[index] : 0][this.childName]
+            this.defaultSelector[i] = 0
+          }
+          // 在历遍的过程中，可能由于上一步修改this.columnData，导致产生连锁反应，程序触发columnChange，会有多次调用
+          // 只有在最后一次数据稳定后的结果是正确的，此前的历遍中，可能会产生undefined，故需要判断
+          columnIndex.map((item, index) => {
+            let data = this.columnData[index][columnIndex[index]]
+            let tmp = {
+              value: data ? data[this.valueName] : null,
+              label: data ? data[this.labelName] : null
+            }
+            if (data && data.extra !== undefined) tmp.extra = data.extra
+            this.selectValue.push(tmp)
+          })
+          this.lastSelectIndex = columnIndex
+        } else if (this.mode === 'single') {
+          let data = this.columnData[0][columnIndex[0]]
+          let tmp = {
+            value: data ? data[this.valueName] : null,
+            label: data ? data[this.labelName] : null
+          }
+          if (data && data.extra !== undefined) tmp.extra = data.extra
+          this.selectValue.push(tmp)
+        } else if (this.mode === 'multi') {
+          columnIndex.map((item, index) => {
+            let data = this.columnData[index][columnIndex[index]]
+            let tmp = {
+              value: data ? data[this.valueName] : null,
+              label: data ? data[this.labelName] : null
+            }
+            if (data && data.extra !== undefined) tmp.extra = data.extra
+            this.selectValue.push(tmp)
+          })
+        }
+      },
+      close() {
+        this.$emit('input', false)
+      },
+      getResult(event = null) {
+        // #ifdef MP-WEIXIN
+        if (this.moving) return;
+        // #endif
+        if (event) this.$emit(event, this.selectValue)
+        this.close()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-select {
+    
+    &__content {
+      position: relative;
+      
+      &__header {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 90rpx;
+        padding: 0 40rpx;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        font-size: 30rpx;
+        background-color: #FFFFFF;
+        
+        &__btn {
+          padding: 16rpx;
+          box-sizing: border-box;
+          text-align: center;
+          text-decoration: none;
+        }
+        
+        &__title {
+          color: $tn-font-color;
+        }
+        
+        &--cancel {
+          color: $tn-font-sub-color;
+        }
+        
+        &--confirm {
+          color: $tn-main-color;
+        }
+      }
+      
+      &__body {
+        width: 100%;
+        height: 500rpx;
+        overflow: hidden;
+        background-color: #FFFFFF;
+        
+        &__view {
+          height: 100%;
+          box-sizing: border-box;
+        }
+        
+        &__item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          font-size: 32rpx;
+          color: $tn-font-color;
+          padding: 0 8rpx;
+        }
+      }
+    }
+    
+  }
+</style>
diff --git a/tuniao-ui/components/tn-sign-board/tn-sign-board.vue b/tuniao-ui/components/tn-sign-board/tn-sign-board.vue
new file mode 100644
index 0000000..47034b1
--- /dev/null
+++ b/tuniao-ui/components/tn-sign-board/tn-sign-board.vue
@@ -0,0 +1,724 @@
+<template>
+  <view v-if="show" class="tn-sign-board-class tn-sign-board" :style="{top: `${customBarHeight}px`, height: `calc(100% - ${customBarHeight}px)`}">
+    <!-- 签名canvas -->
+    <view class="tn-sign-board__content">
+      <view class="tn-sign-board__content__wrapper">
+        <canvas class="tn-sign-board__content__canvas" :canvas-id="canvasName" :disableScroll="true" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
+      </view>
+    </view>
+    
+    <!-- 底部工具栏 -->
+    <view class="tn-sign-board__tools">
+      <!-- 可选颜色 -->
+      <view class="tn-sign-board__tools__color">
+        <view
+          v-for="(item, index) in signSelectColor"
+          :key="index"
+          class="tn-sign-board__tools__color__item"
+          :class="[{'tn-sign-board__tools__color__item--active': currentSelectColor === item}]"
+          :style="{backgroundColor: item}"
+          @tap="colorSwitch(item)"
+        ></view>
+      </view>
+      
+      <!-- 按钮 -->
+      <view class="tn-sign-board__tools__button">
+        <view class="tn-sign-board__tools__button__item tn-bg-red" @tap="reDraw">{{ t('clear') }}</view>
+        <view class="tn-sign-board__tools__button__item tn-bg-blue" @tap="save">{{ t('save') }}</view>
+        <view class="tn-sign-board__tools__button__item tn-bg-indigo" @tap="previewImage">{{ t('preview') }}</view>
+        <view class="tn-sign-board__tools__button__item tn-bg-orange" @tap="closeBoard">{{ t('close') }}</view>
+      </view>
+    </view>
+    
+    <!-- 伪全屏生成旋转图片canvas容器，不在页面上展示 -->
+    <view style="position: fixed; left: -2000px;width: 0;height: 0;overflow: hidden;">
+      <canvas canvas-id="temp-tn-sign-canvas" :style="{width: `${canvasHeight}px`, height: `${canvasHeight}px`}"></canvas>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-sign-board',
+    props: {
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 可选签名颜色
+      signSelectColor: {
+        type: Array,
+        default() {
+          return ['#080808', '#E83A30']
+        }
+      },
+      // 是否旋转输出图片
+      rotate: {
+        type: Boolean,
+        default: true
+      },
+      // 自定义顶栏的高度
+      customBarHeight: {
+        type: [String, Number],
+        default: 0
+      }
+    },
+    data() {
+      return {
+        canvasName: 'tn-sign-canvas',
+        ctx: null,
+        canvasWidth: 0,
+        canvasHeight: 0,
+        currentSelectColor: this.signSelectColor[0],
+        // 第一次触摸
+        firstTouch: false,
+        // 透明度
+        transparent: 1,
+        // 笔迹倍数
+        lineSize: 1.5,
+        // 最小画笔半径
+        minLine: 0.5,
+        // 最大画笔半径
+        maxLine: 4,
+        // 画笔压力
+        pressure: 1,
+        // 顺滑度，用60的距离来计算速度
+        smoothness: 60,
+        // 当前触摸的点
+        currentPoint: {},
+        // 当前线条
+        currentLine: [],
+        // 画笔圆半径
+        radius: 1,
+        // 裁剪区域
+        cutArea: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        // 所有线条， 生成贝塞尔点
+        // bethelPoint: [],
+        // 上一个点
+        lastPoint: 0,
+        // 笔迹
+        chirography: [],
+        // 当前笔迹
+        // currentChirography: {},
+        // 画线轨迹，生成线条的实际点
+        linePrack: [],
+        i18n: {
+          zh: {
+            clear: '清除',
+            save: '保存',
+            preview: '预览',
+            close: '关闭',
+            rotateFailed: '旋转图片失败',
+            saveFailed: '保存失败',
+            previewFailed: '预览失败',
+            dialogTitle: '提示信息',
+            dialogContent: '关闭后内容将被清除，是否确认关闭'
+          },
+          en: {
+            clear: 'Clear',
+            save: 'Save',
+            preview: 'Preview',
+            close: 'Close',
+            rotateFailed: 'Failed to rotate image',
+            saveFailed: 'Save failed',
+            previewFailed: 'Preview failed',
+            dialogTitle: 'Notice',
+            dialogContent: 'Content will be cleared after closing. Continue?'
+          }
+        }
+      }
+    },
+    watch: {
+      show(value) {
+        if (value && this.canvasWidth === 0 && this.canvasHeight === 0) {
+          this.$nextTick(() => {
+            this.getCanvasInfo()
+          })
+        }
+      },
+      signSelectColor(value) {
+        if (value.length > 0) {
+          this.currentSelectColor = value[0]
+        }
+      }
+    },
+    created() {
+      // 创建canvas
+      this.ctx = uni.createCanvasContext(this.canvasName, this)
+    },
+    mounted() {
+      // 获取画板的相关信息
+      // this.$nextTick(() => {
+      //   this.getCanvasInfo()
+      // })
+    },
+    methods: {
+      t(key) {
+        return this.$translate(this.i18n, key)
+      },
+      // 获取画板的相关信息
+      getCanvasInfo() {
+        this._tGetRect('.tn-sign-board__content__canvas').then(res => {
+         this.canvasWidth = res.width
+         this.canvasHeight = res.height
+         
+         // 初始化Canvas
+         this.$nextTick(() => {
+           this.initCanvas('#FFFFFF')
+         })
+        })
+      },
+      // 初始化Canvas
+      initCanvas(color) {
+        /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
+        // rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
+        // 矩形的宽高需要减去边框的宽度
+        this.ctx.rect(0, 0, this.canvasWidth - uni.upx2px(4), this.canvasHeight - uni.upx2px(4))
+        this.ctx.setFillStyle(color)
+        this.ctx.fill()
+        this.ctx.draw()
+      },
+      // 开始画
+      onTouchStart(e) {
+        if (e.type != 'touchstart') return false
+        
+        // 设置线条颜色
+        this.ctx.setFillStyle(this.currentSelectColor)
+        // 设置透明度
+        this.ctx.setGlobalAlpha(this.transparent)
+        let currentPoint = {
+          x: e.touches[0].x,
+          y: e.touches[0].y
+        }
+        let currentLine = this.currentLine
+        currentLine.unshift({
+          time: new Date().getTime(),
+          dis: 0,
+          x: currentPoint.x,
+          y: currentPoint.y
+        })
+        this.currentPoint = currentPoint
+        
+        if (this.firstTouch) {
+          this.cutArea = {
+            top: currentPoint.y,
+            right: currentPoint.x,
+            bottom: currentPoint.y,
+            left: currentPoint.x
+          }
+          this.firstTouch = false
+        }
+        
+        this.pointToLine(currentLine)
+      },
+      // 正在画
+      onTouchMove(e) {
+        if (e.type != 'touchmove') return false
+        if (e.cancelable) {
+          // 判断默认行为是否已经被禁用
+          if (!e.defaultPrevented) {
+            e.preventDefault()
+          }
+        }
+        let point = {
+          x: e.touches[0].x,
+          y: e.touches[0].y
+        }
+        
+        if (point.y < this.cutArea.top) {
+          this.cutArea.top = point.y
+        }
+        if (point.y < 0) this.cutArea.top = 0
+        
+        if (point.x < this.cutArea.right) {
+          this.cutArea.right = point.x
+        }
+        if (this.canvasWidth - point.x <= 0) {
+          this.cutArea.right = this.canvasWidth
+        }
+        if (point.y > this.cutArea.bottom) {
+          this.cutArea.bottom = this.canvasHeight
+        }
+        if (this.canvasHeight - point.y <= 0) {
+          this.cutArea.bottom = this.canvasHeight
+        }
+        if (point.x < this.cutArea.left) {
+          this.cutArea.left = point.x
+        }
+        if (point.x < 0) this.cutArea.left = 0
+        
+        this.lastPoint = this.currentPoint
+        this.currentPoint = point
+        
+        let currentLine = this.currentLine
+        currentLine.unshift({
+          time: new Date().getTime(),
+          dis: this.distance(this.currentPoint, this.lastPoint),
+          x: point.x,
+          y: point.y
+        })
+        
+        this.pointToLine(currentLine)
+      },
+      // 移动结束
+      onTouchEnd(e) {
+        if (e.type != 'touchend') return false
+        let point = {
+          x: e.changedTouches[0].x,
+          y: e.changedTouches[0].y
+        }
+        this.lastPoint = this.currentPoint
+        this.currentPoint = point
+        
+        let currentLine = this.currentLine
+        currentLine.unshift({
+          time: new Date().getTime(),
+          dis: this.distance(this.currentPoint, this.lastPoint),
+          x: point.x,
+          y: point.y
+        })
+        
+        //一笔结束，保存笔迹的坐标点，清空，当前笔迹
+        //增加判断是否在手写区域
+        this.pointToLine(currentLine)
+        let currentChirography = {
+          lineSize: this.lineSize,
+          lineColor: this.currentSelectColor
+        }
+        
+        let chirography = this.chirography
+        chirography.unshift(currentChirography)
+        this.chirography = chirography
+        
+        let linePrack = this.linePrack
+        linePrack.unshift(this.currentLine)
+        this.linePrack = linePrack
+        this.currentLine = []
+      },
+      // 重置绘画板
+      reDraw() {
+        this.initCanvas('#FFFFFF')
+      },
+      // 保存
+      save() {
+        // 在组件内使用需要第二个参数this
+        uni.canvasToTempFilePath({
+          canvasId: this.canvasName,
+          fileType: 'png',
+          quality: 1,
+          success: (res) => {
+            if (this.rotate) {
+              this.getRotateImage(res.tempFilePath).then((res) => {
+                this.$emit('save', res)
+              }).catch(err => {
+                this.$t.message.toast(this.t('rotateFailed'))
+              })
+            } else {
+              this.$emit('save', res.tempFilePath)
+            }
+          },
+          fail: () => {
+            this.$t.message.toast(this.t('saveFailed'))
+          }
+        }, this)
+      },
+      // 预览图片
+      previewImage() {
+        // 在组件内使用需要第二个参数this
+        uni.canvasToTempFilePath({
+          canvasId: this.canvasName,
+          fileType: 'png',
+          quality: 1,
+          success: (res) => {
+            if (this.rotate) {
+              this.getRotateImage(res.tempFilePath).then((res) => {
+                uni.previewImage({
+                  urls: [res]
+                })
+              }).catch(err => {
+                this.$t.message.toast(this.t('rotateFailed'))
+              })
+            } else {
+              uni.previewImage({
+                urls: [res.tempFilePath]
+              })
+            }
+          },
+          fail: (e) => {
+            this.$t.message.toast(this.t('previewFailed'))
+          }
+        }, this)
+      },
+      // 关闭签名板
+      closeBoard() {
+        this.$t.message.modal(this.t('dialogTitle'), this.t('dialogContent'), () => {
+          this.$emit('closed')
+        }, true)
+      },
+      // 切换画笔颜色
+      colorSwitch(color) {
+        this.currentSelectColor = color
+      },
+      // 绘制两点之间的线条
+      pointToLine(line) {
+        this.calcBethelLine(line)
+      },
+      // 计算插值，让线条更加圆滑
+      calcBethelLine(line) {
+        if (line.length <= 1) {
+          line[0].r = this.radius
+          return
+        }
+        let x0,
+          x1,
+          x2,
+          y0,
+          y1,
+          y2,
+          r0,
+          r1,
+          r2,
+          len,
+          lastRadius,
+          dis = 0,
+          time = 0,
+          curveValue = 0.5;
+        if (line.length <= 2) {
+          x0 = line[1].x
+          y0 = line[1].y
+          x2 = line[1].x + (line[0].x - line[1].x) * curveValue
+          y2 = line[1].y + (line[0].y - line[1].y) * curveValue
+          x1 = x0 + (x2 - x0) * curveValue
+          y1 = y0 + (y2 - y0) * curveValue
+        } else {
+          x0 = line[2].x + (line[1].x - line[2].x) * curveValue
+          y0 = line[2].y + (line[1].y - line[2].y) * curveValue
+          x1 = line[1].x
+          y1 = line[1].y
+          x2 = x1 + (line[0].x - x1) * curveValue
+          y2 = y1 + (line[0].y - y1) * curveValue
+        }
+        // 三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
+        len = this.distance({
+          x: x2,
+          y: y2
+        }, {
+          x: x0,
+          y: y0
+        })
+        lastRadius = this.radius
+        for (let i = 0; i < line.length - 1; i++) {
+          dis += line[i].dis
+          time += line[i].time - line[i + 1].time
+          if (dis > this.smoothness) break
+        }
+        
+        this.radius = Math.min((time / len) * this.pressure + this.minLine, this.maxLine) * this.lineSize
+        line[0].r = this.radius
+        // 计算笔迹半径
+        if (line.length <= 2) {
+          r0 = (lastRadius + this.radius) / 2
+          r1 = r0
+          r2 = r1
+        } else {
+          r0 = (line[2].r + line[1].r) / 2
+          r1 = line[1].r
+          r2 = (line[1].r + line[0].r) / 2
+        }
+        let n = 5
+        let point = []
+        for (let i = 0; i < n; i++) {
+          let t = i / (n - 1)
+          let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2
+          let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2
+          let r = lastRadius + ((this.radius - lastRadius) / n) * i
+          point.push({
+            x,
+            y,
+            r
+          })
+          if (point.length === 3) {
+            let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r)
+            a[0].color = this.currentSelectColor
+            
+            this.drawBethel(a, true)
+            point = [{
+              x,
+              y,
+              r
+            }]
+          }
+        }
+        this.currentLine = line
+      },
+      // 求两点之间的距离
+      distance(a, b) {
+        let x = b.x - a.x
+        let y = b.y - a.y
+        return Math.sqrt(x * x + y * y)
+      },
+      // 计算点信息
+      ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
+        let a = [],
+          vx01,
+          vy01,
+          norm,
+          n_x0,
+          n_y0,
+          vx21,
+          vy21,
+          n_x2,
+          n_y2;
+        vx01 = x1 - x0
+        vy01 = y1 - y0
+        norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2
+        vx01 = (vx01 / norm) * r0
+        vy01 = (vy01 / norm) * r0
+        n_x0 = vy01
+        n_y0 = -vx01
+        vx21 = x1 - x2
+        vy21 = y1 - y2
+        norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2
+        vx21 = (vx21 / norm) * r2
+        vy21 = (vy21 / norm) * r2
+        n_x2 = -vy21
+        n_y2 = vx21
+        a.push({
+          mx: x0 + n_x0,
+          my: y0 + n_y0,
+          color: '#080808'
+        })
+        a.push({
+          c1x: x1 + n_x0,
+          c1y: y1 + n_y0,
+          c2x: x1 + n_x2,
+          c2y: y1 + n_y2,
+          ex: x2 + n_x2,
+          ey: y2 + n_y2
+        })
+        a.push({
+          c1x: x2 + n_x2 - vx21,
+          c1y: y2 + n_y2 - vy21,
+          c2x: x2 - n_x2 - vx21,
+          c2y: y2 - n_y2 - vy21,
+          ex: x2 - n_x2,
+          ey: y2 - n_y2
+        })
+        a.push({
+          c1x: x1 - n_x2,
+          c1y: y1 - n_y2,
+          c2x: x1 - n_x0,
+          c2y: y1 - n_y0,
+          ex: x0 - n_x0,
+          ey: y0 - n_y0
+        })
+        a.push({
+          c1x: x0 - n_x0 - vx01,
+          c1y: y0 - n_y0 - vy01,
+          c2x: x0 + n_x0 - vx01,
+          c2y: y0 + n_y0 - vy01,
+          ex: x0 + n_x0,
+          ey: y0 + n_y0
+        })
+        a[0].mx = a[0].mx.toFixed(1)
+        a[0].mx = parseFloat(a[0].mx)
+        a[0].my = a[0].my.toFixed(1)
+        a[0].my = parseFloat(a[0].my)
+        for (let i = 1; i < a.length; i++) {
+          a[i].c1x = a[i].c1x.toFixed(1)
+          a[i].c1x = parseFloat(a[i].c1x)
+          a[i].c1y = a[i].c1y.toFixed(1)
+          a[i].c1y = parseFloat(a[i].c1y)
+          a[i].c2x = a[i].c2x.toFixed(1)
+          a[i].c2x = parseFloat(a[i].c2x)
+          a[i].c2y = a[i].c2y.toFixed(1)
+          a[i].c2y = parseFloat(a[i].c2y)
+          a[i].ex = a[i].ex.toFixed(1)
+          a[i].ex = parseFloat(a[i].ex)
+          a[i].ey = a[i].ey.toFixed(1)
+          a[i].ey = parseFloat(a[i].ey)
+        }
+        return a
+      },
+      // 绘制贝塞尔曲线
+      drawBethel(point, is_fill, color) {
+        this.ctx.beginPath()
+        this.ctx.moveTo(point[0].mx, point[0].my)
+        if (color != undefined) {
+          this.ctx.setFillStyle(color)
+          this.ctx.setStrokeStyle(color)
+        } else {
+          this.ctx.setFillStyle(point[0].color)
+          this.ctx.setStrokeStyle(point[0].color)
+        }
+        for (let i = 1; i < point.length; i++) {
+          this.ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey)
+        }
+        this.ctx.stroke()
+        if (is_fill != undefined) {
+          //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
+          this.ctx.fill()
+        }
+        this.ctx.draw(true)
+      },
+      // 旋转图片
+      async getRotateImage(dataUrl) {
+        // const url = await this.base64ToPath(dataUrl)
+        const url = dataUrl
+        
+        // 创建新画布
+        const tempCtx = uni.createCanvasContext('temp-tn-sign-canvas', this)
+        const width = this.canvasWidth
+        const height = this.canvasHeight
+        tempCtx.restore()
+        tempCtx.save()
+        tempCtx.translate(0, height)
+        tempCtx.rotate(270 * Math.PI / 180)
+        tempCtx.drawImage(url, 0, 0, width, height)
+        tempCtx.draw()
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            uni.canvasToTempFilePath({
+              canvasId: 'temp-tn-sign-canvas',
+              fileType: 'png',
+              x: 0,
+              y: height - width,
+              width: height,
+              height: width,
+              success: res => resolve(res.tempFilePath),
+              fail: reject
+            }, this)
+          }, 50)
+        })
+      },
+      // 将base64转换为本地
+      base64ToPath(dataUrl) {
+        return new Promise((resolve, reject) => {
+          // 判断地址是否包含bas64字样，不包含直接返回
+          if (dataUrl.indexOf('base64') !== -1) {
+            const data = uni.base64ToArrayBuffer(dataUrl.replace(/^data:image\/\w+;base64,/, ''))
+            // #ifdef MP-WEIXIN
+            const filePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`
+            // #endif
+            // #ifndef MP-WEIXIN
+            const filePath = `${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`
+            // #endif
+            uni.getFileSystemManager().writeFile({
+              filePath,
+              data,
+              encoding: 'base64',
+              success: () => resolve(filePath),
+              fail: reject
+            })
+          } else {
+            resolve(dataUrl)
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-sign-board {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #E6E6E6;
+    z-index: 997;
+    display: flex;
+    flex-direction: row-reverse;
+    
+    &__content {
+      width: 84%;
+      height: 100%;
+      
+      &__wrapper {
+        width: calc(100% - 60rpx);
+        height: calc(100% - 60rpx);
+        margin: 30rpx;
+        border-radius: 20rpx;
+        border: 2rpx dotted #AAAAAA;
+        overflow: hidden;
+      }
+      
+      &__canvas {
+        width: 100%;
+        height: 100%;
+        background-color: #FFFFFF;
+      }
+    }
+    
+    &__tools {
+      width: 16%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      
+      &__color {
+        margin-top: 30rpx;
+        
+        &__item {
+          width: 70rpx;
+          height: 70rpx;
+          border-radius: 100rpx;
+          margin: 20rpx auto;
+          
+          &--active {
+            position: relative;
+            
+            &::after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              width: 40%;
+              height: 40%;
+              border-radius: 100rpx;
+              background-color: #FFFFFF;
+              transform: translate(-50%, -50%);
+            }
+          }
+        }
+      }
+      
+      &__button {
+        margin-bottom: 30rpx;
+        display: flex;
+        flex-direction: column;
+        
+        &__item {
+          width: 130rpx;
+          height: 60rpx;
+          line-height: 60rpx;
+          text-align: center;
+          margin: 60rpx auto;
+          border-radius: 10rpx;
+          color: #FFFFFF;
+          transform-origin: center center;
+          transform: rotateZ(90deg);
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-skeleton/tn-skeleton.vue b/tuniao-ui/components/tn-skeleton/tn-skeleton.vue
new file mode 100644
index 0000000..615ab06
--- /dev/null
+++ b/tuniao-ui/components/tn-skeleton/tn-skeleton.vue
@@ -0,0 +1,254 @@
+<template>
+  <view
+    v-if="show"
+    class="tn-skeleton-class tn-skeleton"
+    :class="[backgroundColorClass]"
+    :style="[skeletonStyle]"
+    @touchmove.stop.prevent
+  >
+    <view
+      v-for="(item, index) in rectNodes"
+      :key="$t.uuid()"
+      class="tn-skeleton__item tn-skeleton__item--rect"
+      :class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
+      :style="[itemStyle('rect', item)]"
+    ></view>
+    <view
+      v-for="(item, index) in circleNodes"
+      :key="$t.uuid()"
+      class="tn-skeleton__item tn-skeleton__item--circle"
+      :class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
+      :style="[itemStyle('circle', item)]"
+    ></view>
+    <view
+      v-for="(item, index) in filletNodes"
+      :key="$t.uuid()"
+      class="tn-skeleton__item tn-skeleton__item--fillet"
+      :class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
+      :style="[itemStyle('fillet', item)]"
+    ></view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-skeleton',
+    mixins: [ componentsColorMixin ],
+    props: {
+      // 显示骨架屏
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 需要渲染的元素背景颜色
+      elBackgroundColor: {
+        type: String,
+        default: ''
+      },
+      // 开启加载动画
+      animation: {
+        type: Boolean,
+        default: true
+      },
+      // 矩形元素自定义样式
+      rectCustomStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 圆形元素自定义样式
+      circleCustomStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 圆角元素自定义样式
+      filletCustomStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    computed: {
+      elBackgroundColorStyle() {
+        return this.$t.color.getBackgroundColorStyle(this.elBackgroundColor)
+      },
+      elBackgroundColorClass() {
+        return this.$t.color.getBackgroundColorInternalClass(this.elBackgroundColor)
+      },
+      // 骨架屏样式
+      skeletonStyle() {
+        let style = {}
+        style.width = this.skeletonWidth + 'px'
+        style.height = this.skeletonHeight + 'px'
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        style.left = this.left + 'px'
+        style.top = this.top + 'px'
+        return style
+      },
+      // 元素样式
+      itemStyle() {
+        return (type, item) => {
+          let style = {}
+          style.width = item.width + 'px'
+          style.height = item.height + 'px'
+          if (this.elBackgroundColorStyle) {
+            style.backgroundColor = this.elBackgroundColorStyle
+          }
+          style.left = (item.left - this.left) + 'px'
+          style.top = (item.top - this.top) + 'px'
+          if (type === 'rect') {
+            Object.assign(style, this.rectCustomStyle)
+          } else if (type === 'circle') {
+            style.borderRadius = (item.width / 2) + 'px'
+            Object.assign(style, this.circleCustomStyle)
+          } else if (type === 'fillet') {
+            Object.assign(style, this.filletCustomStyle)
+          }
+          return style
+        }
+      }
+    },
+    data() {
+      return {
+        // 骨架屏宽度
+        skeletonWidth: 750,
+        // 骨架屏高度
+        skeletonHeight: 1500,
+        // 圆角元素
+        filletNodes: [],
+        // 圆形元素
+        circleNodes: [],
+        // 矩形元素
+        rectNodes: [],
+        // 元素偏移位置
+        top: 0,
+        left: 0
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        // 获取系统信息
+        const systemInfo = uni.getSystemInfoSync()
+        this.skeletonWidth = systemInfo.safeArea.width
+        this.skeletonHeight = systemInfo.safeArea.height
+        this.selectQueryInfo()
+      })
+    },
+    methods: {
+      // 查询节点信息
+      selectQueryInfo() {
+        // 获取整个父容器的宽高作为骨架屏的宽高
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        let query = null
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        // #ifdef MP-WEIXIN
+        query = uni.createSelectorQuery().in(this.$parent)
+        // #endif
+        // #ifndef MP-WEIXIN
+        query = uni.createSelectorQuery()
+        // #endif
+        query.selectAll('.tn-skeleton').boundingClientRect().exec((res) => {
+          console.log(res);
+          this.skeletonWidth = res[0][0].width
+          this.skeletonHeight = res[0][0].height
+          this.top = res[0][0].bottom - res[0][0].height
+          this.left = res[0][0].left
+        })
+        
+        // 获取元素列表
+        this.getRectElements()
+        this.getCircleElements()
+        this.getFillteElements()
+      },
+      // 矩形元素列表
+      getRectElements() {
+        let query = null
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        // #ifdef MP-WEIXIN
+        query = uni.createSelectorQuery().in(this.$parent)
+        // #endif
+        // #ifndef MP-WEIXIN
+        query = uni.createSelectorQuery()
+        // #endif
+        query.selectAll('.tn-skeleton-rect').boundingClientRect().exec((res) => {
+          this.rectNodes = res[0]
+        })
+      },
+      // 圆形元素列表
+      getCircleElements() {
+        let query = null
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        // #ifdef MP-WEIXIN
+        query = uni.createSelectorQuery().in(this.$parent)
+        // #endif
+        // #ifndef MP-WEIXIN
+        query = uni.createSelectorQuery()
+        // #endif
+        query.selectAll('.tn-skeleton-circle').boundingClientRect().exec((res) => {
+          this.circleNodes = res[0]
+        })
+      },
+      // 圆角元素列表
+      getFillteElements() {
+        let query = null
+        // 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
+        // #ifdef MP-WEIXIN
+        query = uni.createSelectorQuery().in(this.$parent)
+        // #endif
+        // #ifndef MP-WEIXIN
+        query = uni.createSelectorQuery()
+        // #endif
+        query.selectAll('.tn-skeleton-fillet').boundingClientRect().exec((res) => {
+          this.filletNodes = res[0]
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-skeleton {
+    position: absolute;
+    z-index: 9998;
+    overflow: hidden;
+    background-color: #FFFFFF;
+    
+    &__item {
+      position: absolute;
+      background-color: #F0F0F0;
+      
+      &--fillet {
+        border-radius: 10rpx;
+      }
+      
+      &--fade {
+        width: 100%;
+        height: 100%;
+        background-color: #E6E6E6;
+        animation-duration: 1.5s;
+        animation-name: blink;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: infinite;
+      }
+    }
+  }
+  
+  @keyframes blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-slider/tn-slider.vue b/tuniao-ui/components/tn-slider/tn-slider.vue
new file mode 100644
index 0000000..94b658f
--- /dev/null
+++ b/tuniao-ui/components/tn-slider/tn-slider.vue
@@ -0,0 +1,255 @@
+<template>
+  <view
+    class="tn-slider-class tn-slider"
+    :class="{'tn-slider--disabled': disabled}"
+    :style="{
+      backgroundColor: inactiveColor
+    }"
+    @tap="click"
+  >
+    <!-- slider滑动线 -->
+    <view
+      class="tn-slider__gap"
+      :style="[
+        barStyle,
+        {
+          height: this.$t.string.getLengthUnitValue(lineHeight),
+          backgroundColor: activeColor
+        }
+      ]"
+    >
+      <!-- slider滑块 -->
+      <view
+        class="tn-slider__button-wrap"
+        @touchstart="touchStart"
+        @touchmove="touchMove"
+        @touchend="touchEnd"
+        @touchcancel="touchEnd"
+      >
+        <view v-if="$slots.default || $slots.$default">
+          <slot></slot>
+        </view>
+        <view
+          v-else
+          class="tn-slider__button"
+          :style="[blockStyle, {
+            height: this.$t.string.getLengthUnitValue(blockWidth),
+            width: this.$t.string.getLengthUnitValue(blockWidth),
+            backgroundColor: blockColor
+          }]"
+        ></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-slider',
+    props: {
+      // 进度值
+      value: {
+        type: [Number, String],
+        default: 0
+      },
+      // 最小值
+      min: {
+        type: Number,
+        default: 0
+      },
+      // 最大值
+      max: {
+        type: Number,
+        default: 100
+      },
+      // 步进值
+      step: {
+        type: Number,
+        default: 1
+      },
+      // 禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 滑块宽度
+      blockWidth: {
+        type: Number,
+        default: 30
+      },
+      // 滑动条高度
+      lineHeight: {
+        type: Number,
+        default: 8
+      },
+      // 滑动条激活的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 滑动条未被激活的颜色
+      inactiveColor: {
+        type: String,
+        default: '#E6E6E6'
+      },
+      // 滑块的颜色
+      blockColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 自定义滑块的样式
+      blockStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        startX: 0,
+        status: 'end',
+        newValue: 0,
+        distanceX: 0,
+        startValue: 0,
+        barStyle: {},
+        sliderRect: {
+          left: 0,
+          width: 0
+        }
+      }
+    },
+    watch: {
+      value(val) {
+        // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+        if (this.status === 'end') this.updateValue(val, false)
+      }
+    },
+    created() {
+      this.updateValue(this.value, false)
+    },
+    mounted() {
+      this._tGetRect('.tn-slider').then(res => {
+        this.sliderRect = res
+      })
+    },
+    methods: {
+      // 开始滑动
+      touchStart(event) {
+        if (this.disabled) return
+        if (!event.changedTouches[0]) return
+        
+        this.startX = 0
+        // 触摸点
+        this.startX = event.changedTouches[0].pageX
+        this.startValue = this.format(this.value)
+        
+        // 标识当前开始触摸
+        this.status = 'start'
+      },
+      // 滑动移动中
+      touchMove(event) {
+        if (this.disabled) return
+        if (!event.changedTouches[0]) return
+        
+        // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+        // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+        if (this.status === 'start') this.$emit('start')
+        let movePageX = event.changedTouches[0].pageX
+        // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+        this.distanceX = movePageX - this.sliderRect.left
+        // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+        // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+        this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + this.min
+        this.status = 'moving'
+        this.$emit('moving')
+        
+        this.updateValue(this.newValue, true)
+      },
+      // 滑动结束
+      touchEnd() {
+        if(this.disabled) return
+        if (this.status === 'moving') {
+          this.updateValue(this.newValue, false)
+          this.$emit('end')
+        }
+        this.status = 'end'
+      },
+      // 更新数值
+      updateValue(value, drag) {
+        // 去掉小数部分，对step进行步进处理
+        value = this.format(value)
+        const width = Math.round((value - this.min) / (this.max - this.min) * 100)
+        // 不允许滑动的距离小于0和超过100
+        if (width < 0 || width > 100) return
+        // 设置移动的百分比
+        let barStyle = {
+          width: width + '%'
+        }
+        // 移动期间取消动画
+        if (drag === true) {
+          barStyle.transition = 'none'
+        } else {
+          // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+          delete barStyle.transition
+        }
+        
+        // 修改value值
+        this.$emit('input', value)
+        this.barStyle = barStyle
+      },
+      // 点击事件
+      click(event) {
+        if (this.disabled) return
+        // 直接点击的情况，计算方式和touchMove方法一致
+        const value = (((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this.min)) + this.min
+        this.updateValue(value, false)
+      },
+      // 格式化滑动的值
+      format(value) {
+        return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-slider {
+    width: 100%;
+    position: relative;
+    border-radius: 1000rpx;
+    // 增加点击的范围
+    border-width: 20rpx;
+    border-style: solid;
+    border-color: transparent;
+    background-color: $tn-font-holder-color;
+    background-clip: content-box;
+    
+    &__gap {
+      position: relative;
+      border-radius: inherit;
+      transition: width 0.2s;
+      background-color: #01BEFF;
+    }
+    
+    &__button {
+      width: 30rpx;
+      height: 30rpx;
+      border-radius: 50%;
+      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.6);
+      background-color: #FFFFFF;
+      cursor: pointer;
+      
+      &-wrap {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate3d(50%, -50%, 0);
+      }
+    }
+    
+    &--disabled {
+      opacity: 0.6;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-stack-swiper/index-h5.wxs b/tuniao-ui/components/tn-stack-swiper/index-h5.wxs
new file mode 100644
index 0000000..92b8627
--- /dev/null
+++ b/tuniao-ui/components/tn-stack-swiper/index-h5.wxs
@@ -0,0 +1,657 @@
+
+function setTimeout(instance, cb, time) {
+  if (time > 0) {
+    var s = getDate().getTime()
+    var fn = function () {
+        if (getDate().getTime() - s > time) {
+            cb && cb()
+        } else
+            instance.requestAnimationFrame(fn)
+    }
+    fn()
+  }
+  else
+    cb && cb()
+}
+
+// 判断触摸的移动方向
+function decideSwiperDirection(startTouches, currentTouches, direction) {
+  // 震动偏移容差
+  var toleranceShake = 30
+  // 移动容差
+  var toleranceTranslate = 10
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
+        if (currentTouches.x - startTouches.x > 0) {
+          return 'right'
+        } else if (currentTouches.x - startTouches.x < 0) {
+          return 'left'
+        }
+      }
+    }
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
+        if (currentTouches.y - startTouches.y > 0) {
+          return 'down'
+        } else if (currentTouches.y - startTouches.y < 0) {
+          return 'up'
+        }
+      }
+    }
+  }
+  return ''
+}
+
+// 更新轮播样式信息
+function updateSwiperStyle(currentTouches, instance, state) {
+  var itemData = state.itemData
+  var itemsInstance = state.itemsInstance
+  var list = state.list
+  var currentIndex = state.currentIndex
+  var touchRelactive = state.touchRelactive
+  // console.log(itemAnimationWidth);
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向
+    var itemAnimationWidth = state.itemAnimationWidth
+    // 偏移的x轴距离
+    var translateX = currentTouches.x - touchRelactive.x
+    if (currentTouches.x > itemData.windowWidth || currentTouches.x < 0) return
+    // console.log(translateX);
+    // 更新其他轮播样式
+    if (state.direction == 'left') {
+      // 设置当前激活元素的偏移量
+      instance.setStyle({
+        'transform': 'translate3d('+ translateX + 'px, 0px, 0px)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 移动距离是否超过了指定的容器宽度
+      if (Math.abs(translateX) > itemAnimationWidth) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != currentIndex) {
+            var preIndex = (index == 0) ? list.length - 1 : index - 1
+            var distanceRate = (Math.abs(translateX) - itemAnimationWidth) / (itemData.itemWidth - itemAnimationWidth)
+            var itemTranslateX = list[index].translateX - (list[index].translateX - list[preIndex].translateX) * distanceRate
+            var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
+            var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(list[index]);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log(itemOpacity);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    } else if (state.direction == 'right') {
+      var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
+      // 右滑的时候把最底部的取出，并放到最高层级
+      state.itemsInstance[preIndex].setStyle({
+        'transform': 'translate3d(-' + (itemData.itemWidth - translateX) + 'px, 0px, 0px) scale(1)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 当前轮播逐渐缩小
+      if (Math.abs(translateX) < itemAnimationWidth) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != preIndex) {
+            var replaceIndex = index == list.length - 1 ? 0 : index + 1
+            var distanceRate = Math.abs(translateX) / itemAnimationWidth
+            var itemTranslateX = list[index].translateX + (list[replaceIndex].translateX - list[index].translateX) * distanceRate
+            var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
+            var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(index);
+            // console.log(replaceIndex);
+            // console.log(list[index]);
+            // console.log(list[replaceIndex].translateX - list[index].translateX);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    }
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向
+    var itemAnimationHeight = state.itemAnimationHeight
+    // 偏移的y轴距离
+    var translateY = currentTouches.y - touchRelactive.y
+    if (currentTouches.y > itemData.windowHeight || currentTouches.y < 0) return
+    // console.log(translateX);
+    // 更新其他轮播样式
+    if (state.direction == 'up') {
+      // 设置当前激活元素的偏移量
+      instance.setStyle({
+        'transform': 'translate3d(0px, '+ translateY + 'px, 0px)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 移动距离是否超过了指定的容器宽度
+      if (Math.abs(translateY) > itemAnimationHeight) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != currentIndex) {
+            var preIndex = (index == 0) ? list.length - 1 : index - 1
+            var distanceRate = (Math.abs(translateY) - itemAnimationHeight) / (itemData.itemHeight - itemAnimationHeight)
+            var itemTranslateY = list[index].translateY - (list[index].translateY - list[preIndex].translateY) * distanceRate
+            var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
+            var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(list[index]);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+              
+            })
+          }
+        })
+      }
+    } else if (state.direction == 'down') {
+      var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
+      // 下滑的时候把最底部的取出，并放到最高层级
+      state.itemsInstance[preIndex].setStyle({
+        'transform': 'translate3d(0px, -' + (itemData.itemHeight - translateY) + 'px, 0px) scale(1)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 当前轮播逐渐缩小
+      if (Math.abs(translateY) < itemAnimationHeight) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != preIndex) {
+            var replaceIndex = index == list.length - 1 ? 0 : index + 1
+            var distanceRate = Math.abs(translateY) / itemAnimationHeight
+            var itemTranslateY = list[index].translateY + (list[replaceIndex].translateY - list[index].translateY) * distanceRate
+            var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
+            var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(index);
+            // console.log(replaceIndex);
+            // console.log(list[index]);
+            // console.log(list[replaceIndex].translateX - list[index].translateX);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    }
+  }
+}
+
+// 更新当前轮播序号
+function updateCurrentSwiperIndex(index, ownerInstance, state) {
+  state.currentIndex = index
+  ownerInstance.callMethod('changeSwiperIndex', {
+    index: index
+  })
+}
+
+// 切换到下一个轮播
+function switchNextSwiper(newIndex, touches, instance, state) {
+  var currentIndex = state.currentIndex
+  var list = state.list
+  var direction = state.itemData.direction
+  var touchRelactive = state.touchRelactive || {x: 0, y: 0}
+  
+  // 已经完成轮播切换
+  var currentListItemData = JSON.parse(JSON.stringify(list))
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    var itemWidth = state.itemData.itemWidth
+    // 当前轮播移动到最左边
+    instance.setStyle({
+      'transform': 'translate3d(-'+ itemWidth + 'px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
+    
+    setTimeout(instance, function() {
+      for (var i = list.length - 1; i >= 0; i--) {
+        var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
+        // console.log(i);
+        // console.log(replaceIndex);
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    var itemHeight = state.itemData.itemHeight
+    // 当前轮播移动到最上边
+    instance.setStyle({
+      'transform': 'translate3d(0px, -'+ itemHeight + 'px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
+    
+    setTimeout(instance, function() {
+      for (var i = list.length - 1; i >= 0; i--) {
+        var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
+        // console.log(i);
+        // console.log(replaceIndex);
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  }
+}
+
+// 切换到上一个轮播
+function switchPrevSwiper(newIndex, touches, instance, state) {
+  var currentIndex = state.currentIndex
+  var list = state.list
+  var direction = state.itemData.direction
+  var touchRelactive = state.touchRelactive || {x: 0, y: 0}
+  
+  var currentListItemData = JSON.parse(JSON.stringify(list))
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    var itemWidth = state.itemData.itemWidth
+    // 当前上一个轮播移动到正常位置
+    state.itemsInstance[newIndex].setStyle({
+      'transform': 'translate3d(0px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
+    // 更新除当前上一个轮播外的其他轮播，向后移动一个层级
+    // 更新列表位置相关数据
+    setTimeout(instance, function() {
+      for (var i = 0; i < list.length; i++) {
+        var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    var itemHeight = state.itemData.itemHeight
+    // 当前上一个轮播移动到正常位置
+    state.itemsInstance[newIndex].setStyle({
+      'transform': 'translate3d(0px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
+    // 更新除当前上一个轮播外的其他轮播，向后移动一个层级
+    // 更新列表位置相关数据
+    setTimeout(instance, function() {
+      for (var i = 0; i < list.length; i++) {
+        var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  }
+}
+
+// 反转动画
+function toggleSwiperAnimation(state, add) {
+  if (!state.itemsInstance) return
+  if (add === true) {
+    state.itemsInstance.forEach(function(item, index) {
+      if (!item.hasClass('tn-stack-swiper__item__transition')) {
+        item.addClass('tn-stack-swiper__item__transition')
+      }
+    })
+  } else {
+    state.itemsInstance.forEach(function(item, index) {
+      if (item.hasClass('tn-stack-swiper__item__transition')) {
+        item.removeClass('tn-stack-swiper__item__transition')
+      }
+    })
+  }
+}
+
+// 更新数据
+var itemDataObserver = function (newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  state.itemData = newVal
+}
+
+// 列表初始化
+var listObserver = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  state.itemsInstance = ownerInstance.selectAllComponents('.tn-stack-swiper__item')
+  
+  state.list = newVal || []
+  
+  state.list.forEach(function(item, index) {
+    var itemInstance = state.itemsInstance[index]
+    if (item && itemInstance) {
+      if (itemData.direction === 'horizontal') {
+        itemInstance.setStyle({
+          'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+          'z-index': item.zIndex,
+          'opacity': item.opacity
+        })
+      } else if (itemData.direction === 'vertical') {
+        itemInstance.setStyle({
+          'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+          'z-index': item.zIndex,
+          'opacity': item.opacity
+        })
+      }
+    }
+  })
+}
+
+// 切换轮播位置
+var swiperIndexChange = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()  
+  // console.log(newVal);
+  // ownerInstance.callMethod('printLog', newVal)
+  // console.log(oldVal);
+  // ownerInstance.callMethod('printLog', oldVal)
+  // 排除第一次初始化和手动切换的情况
+  if (oldVal < 0 || typeof oldVal == 'undefined' || state.currentIndex == newVal) {
+    if (oldVal < 0 || typeof oldVal == 'undefined') {
+      state.currentIndex = 0
+    }
+    return
+  }
+  state.currentIndex = newVal
+  // console.log(state.currentIndex);
+  if (newVal > oldVal || (oldVal == state.list.length - 1 && newVal == 0)) {
+    // console.log("next");
+    // state.itemsInstance.forEach(function(item, index) {
+    //   item.addClass("tn-stack-swiper__item__transition")
+    // })
+    switchNextSwiper(newVal, {
+      pageX: 0
+    }, state.itemsInstance[oldVal], state)
+  } else if (newVal < oldVal || (oldVal == 0 && newVal == state.list.length - 1)) {
+    // console.log("prev");
+  }
+}
+
+// 自动轮播切换状态
+var autoplayFlagChange = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  
+  if (newVal === true) {
+    toggleSwiperAnimation(state, true)
+  } else {
+    toggleSwiperAnimation(state, false)
+  }
+}
+
+// 开始触摸
+var touchStart = function (event, ownerInstance) {
+  // console.log('touchStart');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  
+  var itemData = state.itemData
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 记录当前滑动开始的x，y坐标
+  state.touchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 记录触摸id，用于处理多指的情况
+  state.touchId = touches.identifier
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向移动
+    // 设置左右滑动时相对偏移距离
+    state.itemAnimationWidth = itemData.itemWidth * (dataset.switchrate / 100)
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向移动
+    // 设置上下滑动时相对偏移距离
+    state.itemAnimationHeight = itemData.itemHeight * (dataset.switchrate / 100)
+  }
+  
+  // 移除运动动画时间
+  toggleSwiperAnimation(state, false)
+  
+  // 标记开始触摸
+  state.touching = true
+  ownerInstance.callMethod('changeTouchState', {
+    touching: true
+  })
+  // 停止执行自动轮播
+  ownerInstance.callMethod('clearAutoPlayTimer')
+}
+
+// 开始移动
+var touchMove = function (event, ownerInstance) {
+  // console.log('touchMove');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  // 还没开始触摸直接返回
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  var currentTouchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 是否已经确定了移动方向
+  if (!state.direction) {
+    state.direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, itemData.direction)
+  }
+  // console.log(decideSwiperDirection(state.touchRelactive, currentTouchRelactive));
+  updateSwiperStyle(currentTouchRelactive, instance, state)
+}
+
+// 移动结束
+var touchEnd = function (event, ownerInstance) {
+  // console.log('touchEnd');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var list = state.list
+  var touchRelactive = state.touchRelactive
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  // 还没开始触摸直接返回
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  // 添加运动动画时间
+  toggleSwiperAnimation(state, true)
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向移动
+    var itemAnimationWidth = state.itemAnimationWidth
+    // 判断时左滑还是右滑
+    // 判断是否超过自动滚动到下一页还是回滚
+    if (state.direction == 'left') {
+      if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex
+            })
+          }
+        })
+      } else {
+        var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
+        switchNextSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    } else if (state.direction == 'right') {
+      if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
+        // 滑动显示图片回滚
+        var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
+        state.itemsInstance[preIndex].setStyle({
+          'transform': 'translate3d(-' + itemData.itemWidth + 'px, 0px, 0px) scale(1)',
+          'z-index': list[state.currentIndex].zIndex + 1,
+          'opacity': list[state.currentIndex].opacity
+        })
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
+        switchPrevSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    }
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向移动
+    var itemAnimationHeight = state.itemAnimationHeight
+    // 判断时上滑还是下滑
+    // 判断是否超过自动滚动到下一页还是回滚
+    if (state.direction == 'up') {
+      if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
+        switchNextSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    } else if (state.direction == 'down') {
+      if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
+        // 滑动显示图片回滚
+        var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
+        state.itemsInstance[preIndex].setStyle({
+          'transform': 'translate3d(0px, -' + itemData.itemHeight + 'px, 0px) scale(1)',
+          'z-index': list[state.currentIndex].zIndex + 1,
+          'opacity': list[state.currentIndex].opacity
+        })
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
+        switchPrevSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    }
+  }
+  
+  // 清除对应的标志位
+  state.touchRelactive = null
+  state.touching = false
+  state.direction = null
+  state.touchId = null
+  
+  ownerInstance.callMethod('changeTouchState', {
+    touching: false
+  })
+  // 重新开始执行自动轮播
+  ownerInstance.callMethod('setAutoPlay')
+}
+
+module.exports = {
+  itemDataObserver: itemDataObserver,
+  listObserver: listObserver,
+  swiperIndexChange: swiperIndexChange,
+  autoplayFlagChange: autoplayFlagChange,
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-stack-swiper/index.wxs b/tuniao-ui/components/tn-stack-swiper/index.wxs
new file mode 100644
index 0000000..92b8627
--- /dev/null
+++ b/tuniao-ui/components/tn-stack-swiper/index.wxs
@@ -0,0 +1,657 @@
+
+function setTimeout(instance, cb, time) {
+  if (time > 0) {
+    var s = getDate().getTime()
+    var fn = function () {
+        if (getDate().getTime() - s > time) {
+            cb && cb()
+        } else
+            instance.requestAnimationFrame(fn)
+    }
+    fn()
+  }
+  else
+    cb && cb()
+}
+
+// 判断触摸的移动方向
+function decideSwiperDirection(startTouches, currentTouches, direction) {
+  // 震动偏移容差
+  var toleranceShake = 30
+  // 移动容差
+  var toleranceTranslate = 10
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
+        if (currentTouches.x - startTouches.x > 0) {
+          return 'right'
+        } else if (currentTouches.x - startTouches.x < 0) {
+          return 'left'
+        }
+      }
+    }
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
+      // console.log(currentTouches.x, startTouches.x);
+      if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
+        if (currentTouches.y - startTouches.y > 0) {
+          return 'down'
+        } else if (currentTouches.y - startTouches.y < 0) {
+          return 'up'
+        }
+      }
+    }
+  }
+  return ''
+}
+
+// 更新轮播样式信息
+function updateSwiperStyle(currentTouches, instance, state) {
+  var itemData = state.itemData
+  var itemsInstance = state.itemsInstance
+  var list = state.list
+  var currentIndex = state.currentIndex
+  var touchRelactive = state.touchRelactive
+  // console.log(itemAnimationWidth);
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向
+    var itemAnimationWidth = state.itemAnimationWidth
+    // 偏移的x轴距离
+    var translateX = currentTouches.x - touchRelactive.x
+    if (currentTouches.x > itemData.windowWidth || currentTouches.x < 0) return
+    // console.log(translateX);
+    // 更新其他轮播样式
+    if (state.direction == 'left') {
+      // 设置当前激活元素的偏移量
+      instance.setStyle({
+        'transform': 'translate3d('+ translateX + 'px, 0px, 0px)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 移动距离是否超过了指定的容器宽度
+      if (Math.abs(translateX) > itemAnimationWidth) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != currentIndex) {
+            var preIndex = (index == 0) ? list.length - 1 : index - 1
+            var distanceRate = (Math.abs(translateX) - itemAnimationWidth) / (itemData.itemWidth - itemAnimationWidth)
+            var itemTranslateX = list[index].translateX - (list[index].translateX - list[preIndex].translateX) * distanceRate
+            var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
+            var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(list[index]);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log(itemOpacity);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    } else if (state.direction == 'right') {
+      var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
+      // 右滑的时候把最底部的取出，并放到最高层级
+      state.itemsInstance[preIndex].setStyle({
+        'transform': 'translate3d(-' + (itemData.itemWidth - translateX) + 'px, 0px, 0px) scale(1)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 当前轮播逐渐缩小
+      if (Math.abs(translateX) < itemAnimationWidth) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != preIndex) {
+            var replaceIndex = index == list.length - 1 ? 0 : index + 1
+            var distanceRate = Math.abs(translateX) / itemAnimationWidth
+            var itemTranslateX = list[index].translateX + (list[replaceIndex].translateX - list[index].translateX) * distanceRate
+            var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
+            var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(index);
+            // console.log(replaceIndex);
+            // console.log(list[index]);
+            // console.log(list[replaceIndex].translateX - list[index].translateX);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    }
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向
+    var itemAnimationHeight = state.itemAnimationHeight
+    // 偏移的y轴距离
+    var translateY = currentTouches.y - touchRelactive.y
+    if (currentTouches.y > itemData.windowHeight || currentTouches.y < 0) return
+    // console.log(translateX);
+    // 更新其他轮播样式
+    if (state.direction == 'up') {
+      // 设置当前激活元素的偏移量
+      instance.setStyle({
+        'transform': 'translate3d(0px, '+ translateY + 'px, 0px)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 移动距离是否超过了指定的容器宽度
+      if (Math.abs(translateY) > itemAnimationHeight) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != currentIndex) {
+            var preIndex = (index == 0) ? list.length - 1 : index - 1
+            var distanceRate = (Math.abs(translateY) - itemAnimationHeight) / (itemData.itemHeight - itemAnimationHeight)
+            var itemTranslateY = list[index].translateY - (list[index].translateY - list[preIndex].translateY) * distanceRate
+            var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
+            var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(list[index]);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+              
+            })
+          }
+        })
+      }
+    } else if (state.direction == 'down') {
+      var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
+      // 下滑的时候把最底部的取出，并放到最高层级
+      state.itemsInstance[preIndex].setStyle({
+        'transform': 'translate3d(0px, -' + (itemData.itemHeight - translateY) + 'px, 0px) scale(1)',
+        'z-index': list[currentIndex].zIndex + 1,
+        'opacity': list[currentIndex].opacity
+      })
+      // 当前轮播逐渐缩小
+      if (Math.abs(translateY) < itemAnimationHeight) {
+        state.itemsInstance.forEach( function(itemInstance, index) {
+          if (index != preIndex) {
+            var replaceIndex = index == list.length - 1 ? 0 : index + 1
+            var distanceRate = Math.abs(translateY) / itemAnimationHeight
+            var itemTranslateY = list[index].translateY + (list[replaceIndex].translateY - list[index].translateY) * distanceRate
+            var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
+            var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
+            // console.log(preIndex);
+            // console.log(index);
+            // console.log(replaceIndex);
+            // console.log(list[index]);
+            // console.log(list[replaceIndex].translateX - list[index].translateX);
+            // console.log(distanceRate);
+            // console.log(itemTranslateX);
+            // console.log(itemScale);
+            // console.log('-----------------------------------------------------------');
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
+              'z-index': list[index].zIndex,
+              'opacity': itemOpacity
+            })
+          }
+        })
+      }
+    }
+  }
+}
+
+// 更新当前轮播序号
+function updateCurrentSwiperIndex(index, ownerInstance, state) {
+  state.currentIndex = index
+  ownerInstance.callMethod('changeSwiperIndex', {
+    index: index
+  })
+}
+
+// 切换到下一个轮播
+function switchNextSwiper(newIndex, touches, instance, state) {
+  var currentIndex = state.currentIndex
+  var list = state.list
+  var direction = state.itemData.direction
+  var touchRelactive = state.touchRelactive || {x: 0, y: 0}
+  
+  // 已经完成轮播切换
+  var currentListItemData = JSON.parse(JSON.stringify(list))
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    var itemWidth = state.itemData.itemWidth
+    // 当前轮播移动到最左边
+    instance.setStyle({
+      'transform': 'translate3d(-'+ itemWidth + 'px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
+    
+    setTimeout(instance, function() {
+      for (var i = list.length - 1; i >= 0; i--) {
+        var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
+        // console.log(i);
+        // console.log(replaceIndex);
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    var itemHeight = state.itemData.itemHeight
+    // 当前轮播移动到最上边
+    instance.setStyle({
+      'transform': 'translate3d(0px, -'+ itemHeight + 'px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
+    
+    setTimeout(instance, function() {
+      for (var i = list.length - 1; i >= 0; i--) {
+        var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
+        // console.log(i);
+        // console.log(replaceIndex);
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  }
+}
+
+// 切换到上一个轮播
+function switchPrevSwiper(newIndex, touches, instance, state) {
+  var currentIndex = state.currentIndex
+  var list = state.list
+  var direction = state.itemData.direction
+  var touchRelactive = state.touchRelactive || {x: 0, y: 0}
+  
+  var currentListItemData = JSON.parse(JSON.stringify(list))
+  
+  if (direction === 'horizontal') {
+    // 水平方向移动
+    var itemWidth = state.itemData.itemWidth
+    // 当前上一个轮播移动到正常位置
+    state.itemsInstance[newIndex].setStyle({
+      'transform': 'translate3d(0px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
+    // 更新除当前上一个轮播外的其他轮播，向后移动一个层级
+    // 更新列表位置相关数据
+    setTimeout(instance, function() {
+      for (var i = 0; i < list.length; i++) {
+        var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  } else if (direction === 'vertical') {
+    // 垂直方向移动
+    var itemHeight = state.itemData.itemHeight
+    // 当前上一个轮播移动到正常位置
+    state.itemsInstance[newIndex].setStyle({
+      'transform': 'translate3d(0px, 0px, 0px) scale(1)',
+      'z-index': list[currentIndex].zIndex + 1,
+      'opacity': list[currentIndex].opacity
+    })
+    // 计算当前移动需要的剩余时间
+    var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
+    // 更新除当前上一个轮播外的其他轮播，向后移动一个层级
+    // 更新列表位置相关数据
+    setTimeout(instance, function() {
+      for (var i = 0; i < list.length; i++) {
+        var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
+        state.itemsInstance[i].setStyle({
+          'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
+          'z-index': currentListItemData[replaceIndex].zIndex,
+          'opacity': currentListItemData[replaceIndex].opacity
+        })
+        state.list[i] = currentListItemData[replaceIndex]
+      }
+    }, time)
+  }
+}
+
+// 反转动画
+function toggleSwiperAnimation(state, add) {
+  if (!state.itemsInstance) return
+  if (add === true) {
+    state.itemsInstance.forEach(function(item, index) {
+      if (!item.hasClass('tn-stack-swiper__item__transition')) {
+        item.addClass('tn-stack-swiper__item__transition')
+      }
+    })
+  } else {
+    state.itemsInstance.forEach(function(item, index) {
+      if (item.hasClass('tn-stack-swiper__item__transition')) {
+        item.removeClass('tn-stack-swiper__item__transition')
+      }
+    })
+  }
+}
+
+// 更新数据
+var itemDataObserver = function (newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  state.itemData = newVal
+}
+
+// 列表初始化
+var listObserver = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  state.itemsInstance = ownerInstance.selectAllComponents('.tn-stack-swiper__item')
+  
+  state.list = newVal || []
+  
+  state.list.forEach(function(item, index) {
+    var itemInstance = state.itemsInstance[index]
+    if (item && itemInstance) {
+      if (itemData.direction === 'horizontal') {
+        itemInstance.setStyle({
+          'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+          'z-index': item.zIndex,
+          'opacity': item.opacity
+        })
+      } else if (itemData.direction === 'vertical') {
+        itemInstance.setStyle({
+          'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+          'z-index': item.zIndex,
+          'opacity': item.opacity
+        })
+      }
+    }
+  })
+}
+
+// 切换轮播位置
+var swiperIndexChange = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()  
+  // console.log(newVal);
+  // ownerInstance.callMethod('printLog', newVal)
+  // console.log(oldVal);
+  // ownerInstance.callMethod('printLog', oldVal)
+  // 排除第一次初始化和手动切换的情况
+  if (oldVal < 0 || typeof oldVal == 'undefined' || state.currentIndex == newVal) {
+    if (oldVal < 0 || typeof oldVal == 'undefined') {
+      state.currentIndex = 0
+    }
+    return
+  }
+  state.currentIndex = newVal
+  // console.log(state.currentIndex);
+  if (newVal > oldVal || (oldVal == state.list.length - 1 && newVal == 0)) {
+    // console.log("next");
+    // state.itemsInstance.forEach(function(item, index) {
+    //   item.addClass("tn-stack-swiper__item__transition")
+    // })
+    switchNextSwiper(newVal, {
+      pageX: 0
+    }, state.itemsInstance[oldVal], state)
+  } else if (newVal < oldVal || (oldVal == 0 && newVal == state.list.length - 1)) {
+    // console.log("prev");
+  }
+}
+
+// 自动轮播切换状态
+var autoplayFlagChange = function(newVal, oldVal, ownerInstance, instance) {
+  var state = ownerInstance.getState()
+  
+  if (newVal === true) {
+    toggleSwiperAnimation(state, true)
+  } else {
+    toggleSwiperAnimation(state, false)
+  }
+}
+
+// 开始触摸
+var touchStart = function (event, ownerInstance) {
+  // console.log('touchStart');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  
+  var itemData = state.itemData
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 记录当前滑动开始的x，y坐标
+  state.touchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 记录触摸id，用于处理多指的情况
+  state.touchId = touches.identifier
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向移动
+    // 设置左右滑动时相对偏移距离
+    state.itemAnimationWidth = itemData.itemWidth * (dataset.switchrate / 100)
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向移动
+    // 设置上下滑动时相对偏移距离
+    state.itemAnimationHeight = itemData.itemHeight * (dataset.switchrate / 100)
+  }
+  
+  // 移除运动动画时间
+  toggleSwiperAnimation(state, false)
+  
+  // 标记开始触摸
+  state.touching = true
+  ownerInstance.callMethod('changeTouchState', {
+    touching: true
+  })
+  // 停止执行自动轮播
+  ownerInstance.callMethod('clearAutoPlayTimer')
+}
+
+// 开始移动
+var touchMove = function (event, ownerInstance) {
+  // console.log('touchMove');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  // 还没开始触摸直接返回
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  var currentTouchRelactive = {
+    x: touches.pageX,
+    y: touches.pageY
+  }
+  // 是否已经确定了移动方向
+  if (!state.direction) {
+    state.direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, itemData.direction)
+  }
+  // console.log(decideSwiperDirection(state.touchRelactive, currentTouchRelactive));
+  updateSwiperStyle(currentTouchRelactive, instance, state)
+}
+
+// 移动结束
+var touchEnd = function (event, ownerInstance) {
+  // console.log('touchEnd');
+  var instance = event.instance
+  var dataset = instance.getDataset()
+  var state = ownerInstance.getState()
+  var itemData = state.itemData
+  var list = state.list
+  var touchRelactive = state.touchRelactive
+  
+  // 判断是否为为当前显示的轮播
+  if (dataset.index != state.currentIndex) return
+  
+  // 还没开始触摸直接返回
+  if (!state.touching) return
+  
+  var touches = event.changedTouches[0]
+  if (!touches) return
+  
+  // 判断是否为同一个触摸点
+  if (state.touchId != touches.identifier) return
+  
+  // 添加运动动画时间
+  toggleSwiperAnimation(state, true)
+  
+  if (itemData.direction === 'horizontal') {
+    // 水平方向移动
+    var itemAnimationWidth = state.itemAnimationWidth
+    // 判断时左滑还是右滑
+    // 判断是否超过自动滚动到下一页还是回滚
+    if (state.direction == 'left') {
+      if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex
+            })
+          }
+        })
+      } else {
+        var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
+        switchNextSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    } else if (state.direction == 'right') {
+      if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
+        // 滑动显示图片回滚
+        var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
+        state.itemsInstance[preIndex].setStyle({
+          'transform': 'translate3d(-' + itemData.itemWidth + 'px, 0px, 0px) scale(1)',
+          'z-index': list[state.currentIndex].zIndex + 1,
+          'opacity': list[state.currentIndex].opacity
+        })
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
+        switchPrevSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    }
+  } else if (itemData.direction === 'vertical') {
+    // 垂直方向移动
+    var itemAnimationHeight = state.itemAnimationHeight
+    // 判断时上滑还是下滑
+    // 判断是否超过自动滚动到下一页还是回滚
+    if (state.direction == 'up') {
+      if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
+        switchNextSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    } else if (state.direction == 'down') {
+      if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
+        // 滑动显示图片回滚
+        var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
+        state.itemsInstance[preIndex].setStyle({
+          'transform': 'translate3d(0px, -' + itemData.itemHeight + 'px, 0px) scale(1)',
+          'z-index': list[state.currentIndex].zIndex + 1,
+          'opacity': list[state.currentIndex].opacity
+        })
+        list.forEach(function(item, index) {
+          var itemInstance = state.itemsInstance[index]
+          if (item && itemInstance) {
+            itemInstance.setStyle({
+              'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
+              'z-index': item.zIndex,
+              'opacity': item.opacity
+            })
+          }
+        })
+      } else {
+        var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
+        switchPrevSwiper(newIndex, touches, instance, state)
+        
+        updateCurrentSwiperIndex(newIndex, ownerInstance, state)
+      }
+    }
+  }
+  
+  // 清除对应的标志位
+  state.touchRelactive = null
+  state.touching = false
+  state.direction = null
+  state.touchId = null
+  
+  ownerInstance.callMethod('changeTouchState', {
+    touching: false
+  })
+  // 重新开始执行自动轮播
+  ownerInstance.callMethod('setAutoPlay')
+}
+
+module.exports = {
+  itemDataObserver: itemDataObserver,
+  listObserver: listObserver,
+  swiperIndexChange: swiperIndexChange,
+  autoplayFlagChange: autoplayFlagChange,
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue b/tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue
new file mode 100644
index 0000000..a69d8c2
--- /dev/null
+++ b/tuniao-ui/components/tn-stack-swiper/tn-stack-swiper.vue
@@ -0,0 +1,284 @@
+<template>
+  <view
+    class="tn-stack-swiper-class tn-stack-swiper"
+    :style="{
+      width: $t.string.getLengthUnitValue(width),
+      height: $t.string.getLengthUnitValue(height)
+    }"
+    :list="swiperList"
+    :itemData="itemData"
+    :currentIndex="swiperIndex"
+    :autoplayFlag="autoplayFlag"
+    :change:list="wxs.listObserver"
+    :change:itemData="wxs.itemDataObserver"
+    :change:currentIndex="wxs.swiperIndexChange"
+    :change:autoplayFlag="wxs.autoplayFlagChange"
+  >
+    <block v-for="(item, index) in list" :key="index">
+      <!-- #ifdef MP-WEIXIN -->
+      <view
+        class="tn-stack-swiper__item tn-stack-swiper__item__transition"
+        :class="[`tn-stack-swiper__item--${direction}`]"
+        :data-index="index"
+        :data-switchRate="switchRate"
+        @touchstart="wxs.touchStart"
+        :catch:touchmove="touching?wxs.touchMove:''"
+        :catch:touchend="touching?wxs.touchEnd:''"
+      >
+        <image class="tn-stack-swiper__image" mode="aspectFill" :src="item.image"></image>
+      </view>
+      <!-- #endif -->
+      
+      <!-- #ifndef MP-WEIXIN -->
+      <view
+        class="tn-stack-swiper__item"
+        :class="[`tn-stack-swiper__item--${direction}`]"
+        :data-index="index"
+        :data-switchRate="switchRate"
+        @touchstart="wxs.touchStart"
+        @touchmove="wxs.touchMove"
+        @touchend="wxs.touchEnd"
+      >
+        <image class="tn-stack-swiper__image" mode="aspectFill" :src="item.image"></image>
+      </view>
+      <!-- #endif -->
+    </block>
+  </view>
+</template>
+
+<!-- #ifdef MP-WEIXIN -->
+<script src="./index.wxs" lang="wxs" module="wxs"></script>
+<!-- #endif -->
+<!-- #ifndef MP-WEIXIN -->
+<script src="./index-h5.wxs" lang="wxs" module="wxs"></script>
+<!-- #endif -->
+<script>
+  export default {
+    name: 'tn-stack-swiper',
+    props: {
+      // 显示图片的列表数据
+      // {
+      //   // 图片地址
+      //   image: 'xxx'
+      // }
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 轮播容器的宽度 rpx
+      width: {
+        type: [String, Number],
+        default: '100%'
+      },
+      // 轮播容器的高度 rpx
+      height: {
+        type: [String, Number],
+        default: 500
+      },
+      // 自动切换
+      autoplay: {
+        type: Boolean,
+        default: false
+      },
+      // 自动切换时长 ms
+      interval: {
+        type: Number,
+        default: 5000
+      },
+      // 滑动切换移动比例, [0 - 100]
+      // 比例相对于item的宽度
+      switchRate: {
+        type: Number,
+        default: 30
+      },
+      // 缩放比例 [0-1]
+      scaleRate: {
+        type: Number,
+        default: 0.1
+      },
+      // 下一轮播偏移比例
+      translateRate: {
+        type: Number,
+        default: 16
+      },
+      // 下一轮播透明比例
+      opacityRate: {
+        type: Number,
+        default:10
+      },
+      // 滑动方向
+      // horizontal -> 水平 vertical -> 垂直
+      direction: {
+        type: String,
+        default: 'horizontal'
+      }
+    },
+    data() {
+      return {
+        autoplayTimer: null,
+        // window窗口的宽度
+        windowWidth: 0,
+        // 轮播item的宽度
+        swiperItemWidth: 0,
+        // 轮播item的高度
+        swiperItemHeight: 0,
+        // 当前选中的轮播item
+        swiperIndex: -1,
+        // 标记是否开始触摸
+        touching: true,
+        // 轮播列表信息
+        swiperList: [],
+        // 标记当前是否为自动播放
+        autoplayFlag: false
+      }
+    },
+    computed: {
+      itemData() {
+        return {
+          windowWidth: this.windowWidth,
+          itemWidth: this.swiperItemWidth,
+          itemHeight: this.swiperItemHeight,
+          direction: this.direction,
+          autoplaying: this.autoplayFlag
+        }
+      }
+    },
+    watch: {
+      list(val) {
+        this.swiperList = []
+        this.$nextTick(() => {
+          this.initSwiperRectInfo()
+        })
+      },
+      autoplay(val) {
+        if (!val) {
+          this.clearAutoPlayTimer()
+        } else {
+          this.setAutoPlay()
+        }
+      }
+    },
+    created() {
+      this.autoplayFlag = this.autoplay
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initSwiperRectInfo()
+      })
+    },
+    destroyed() {
+      this.clearAutoPlayTimer()
+    },
+    methods: {
+      // 初始化轮播容器信息
+      async initSwiperRectInfo() {
+        // 用于一开始绑定事件
+        // this.touching = true
+        // 获取轮播item的宽度
+        const swiperItemRect = await this._tGetRect('.tn-stack-swiper__item')
+        if (!swiperItemRect || !swiperItemRect.width || !swiperItemRect.height) {
+          setTimeout(() => {
+            this.initSwiperRectInfo()
+          }, 50)
+          return
+        }
+        this.swiperItemWidth = swiperItemRect.width
+        this.swiperItemHeight = swiperItemRect.height
+        // this.touching = false
+        
+        // 获取系统的窗口宽度信息
+        const systemInfo = uni.getSystemInfoSync()
+        this.windowWidth = systemInfo.windowWidth
+        this.swiperIndex = 0
+        
+        // 设置对应swiper元素的位置和层级信息
+        this.swiperList = this.list.map((item, index) => {
+          
+          const scale = 1 - (this.scaleRate * index)
+          
+          if (this.direction === 'horizontal') {
+            item.translateX = ((index * this.translateRate) * 0.01 * this.swiperItemWidth)
+          } else if (this.direction === 'vertical') {
+            item.translateY = ((index * this.translateRate) * 0.01 * this.swiperItemHeight)
+          }
+          item.opacity = (1 - ((index * this.opacityRate) * 0.01))
+          item.zIndex = this.list.length - index
+          item.scale = scale <= 0 ? 0 : scale
+          
+          return item
+        })
+        
+        this.setAutoPlay()
+      },
+      // 设置自动切换轮播
+      setAutoPlay() {
+        if (this.autoplay) {
+          this.clearAutoPlayTimer()
+          this.autoplayFlag = true
+          this.autoplayTimer = setInterval(() => {
+            this.swiperIndex = this.swiperIndex + 1 > this.swiperList.length - 1 ? 0 : this.swiperIndex + 1
+          }, this.interval)
+        }
+      },
+      // 清除自动切换定时器
+      clearAutoPlayTimer() {
+        if (this.autoplayTimer != null) {
+          this.autoplayFlag = false
+          clearInterval(this.autoplayTimer)
+        }
+      },
+      // 修改轮播选中index
+      changeSwiperIndex(e) {
+        // console.log(e.index);
+        this.swiperIndex = e.index
+        this.$emit('change', { index: e.index })
+      },
+      // 修改触摸状态
+      changeTouchState(e) {
+        this.touching = e.touching
+      },
+      // 打印日志
+      printLog(data) {
+        console.log("log", data);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-stack-swiper {
+    position: relative;
+    
+    &__item {
+      position: absolute;
+      border-radius: 20rpx;
+      overflow: hidden;
+      
+      &--horizontal {
+        width: 88%;
+        height: 100%;
+        transform-origin: left center;
+      }
+      
+      &--vertical {
+        width: 100%;
+        height: 88%;
+        transform-origin: top center;
+      }
+      
+      &__transition {
+        transition-property: transform,opacity;
+        transition-duration: 0.25s;
+        transition-timing-function: ease-out;
+        // transition: transform, opacity 0.25s ease-in-out !important;
+      }
+    }
+    
+    &__image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-steps/tn-steps.vue b/tuniao-ui/components/tn-steps/tn-steps.vue
new file mode 100644
index 0000000..e43ba61
--- /dev/null
+++ b/tuniao-ui/components/tn-steps/tn-steps.vue
@@ -0,0 +1,346 @@
+<template>
+  <view
+    class="tn-steps-class tn-steps"
+    :style="{
+      flexDirection: direction
+    }"
+  >
+    <view
+      v-for="(item, index) in list"
+      :key="index"
+      class="tn-steps__item"
+      :class="[`tn-steps__item--${direction}`]"
+      @tap="clickStepItem(index)"
+    >
+      <!-- 数值模式 -->
+      <view
+        v-if="mode === 'number'"
+        class="tn-steps__item__number"
+        :style="{
+          backgroundColor: currentIndex <= index ? 'transparent' : activeColor,
+          borderColor: currentIndex <= index ? inActiveColor : activeColor
+        }"
+      >
+        <text
+          class="tn-steps__item__number__text"
+          :class="[{'tn-steps__item__number__text--visible': currentIndex <= index}]"
+          :style="{
+            color: currentIndex <= index ? inActiveColor : activeColor
+          }"
+        >
+          {{ index + 1}}
+        </text>
+        <view class="tn-steps__item__number__icon" :class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': currentIndex > index}]"></view>
+      </view>
+      
+      <!-- 点模式 -->
+      <view
+        v-if="mode === 'dot'"
+        class="tn-steps__item__dot"
+        :style="{
+          backgroundColor: currentIndex <= index ? inActiveColor : activeColor
+        }"
+      ></view>
+      
+      <!-- 图标模式 -->
+      <view
+        v-if="mode === 'icon'"
+        class="tn-steps__item__icon"
+        :class="[iconModeClass(index)]"
+        :style="{
+          color: currentIndex <= index ? inActiveColor : activeColor
+        }"
+      ></view>
+      
+      <!-- 点图标模式 -->
+      <view v-if="mode === 'dotIcon'" class="tn-steps__item__dot-icon">
+        <view v-if="currentIndex <= index" class="tn-steps__item__dot-icon--dot" :style="{backgroundColor: inActiveColor}"></view>
+        <view v-else class="tn-steps__item__dot-icon--icon" :class="[iconModeClass(index)]" :style="{color: activeColor}"></view>
+      </view>
+      
+      <!-- 步骤下的文字 -->
+      <text
+        v-if="showTitle"
+        class="tn-steps__item__text tn-text-ellipsis"
+        :class="[`tn-steps__item__text--${direction}`]"
+        :style="{
+          color: currentIndex <= index ? inActiveColor : activeColor
+        }"
+      >
+        {{ item.name }}
+      </text>
+      
+      <!-- 连接的横线 -->
+      <view
+        v-if="index < list.length - 1"
+        class="tn-steps__item__line"
+        :class="[`tn-steps__item__line--${mode}`]"
+        :style="{
+          borderColor: currentIndex <= index + 1 ? inActiveColor : activeColor
+        }"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-steps',
+    props: {
+      // 模式类型
+      // dot -> 点 number -> 数字 icon -> 图标 dotIcon -> 点图标
+      mode: {
+        type: String,
+        default: 'dot'
+      },
+      // 步骤条的方向
+      // row -> 横向 column -> 竖向
+      direction: {
+        type: String,
+        default: 'row'
+      },
+      // 步骤条数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 当前激活的步数
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 激活步骤的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 未激活步骤的颜色
+      inActiveColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 激活后显示的图标，在数字模式下有效
+      icon: {
+        type: String,
+        default: 'success'
+      },
+      // 是否显示标题
+      showTitle: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      // icon模式下图标的值
+      iconModeClass() {
+        return (index) => {
+          const item = this.list[index]
+          // 状态被选中并且对应数据下存在selectIcon属性
+          if (this.currentIndex > index && item.hasOwnProperty('selectIcon')) {
+            return `tn-icon-${item.selectIcon}`
+          } else {
+            // 未选中
+            return `tn-icon-${item.icon || this.icon}`
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        currentIndex: 0
+      }
+    },
+    watch: {
+      current: {
+        handler(val) {
+          this.currentIndex = val
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      // 点击了某一个选项
+      clickStepItem(index) {
+        const chooseIndex = index + 1
+        this.currentIndex = chooseIndex
+        this.$emit('click', { index: chooseIndex })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  $tn-steps-item-number-width: 44rpx;
+  $tn-steps-item-dot-width: 20rpx;
+  
+  .tn-steps {
+    display: flex;
+    flex-direction: row;
+    
+    &__item {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      min-width: 100rpx;
+      font-size: 28rpx;
+      text-align: center;
+      
+      &__number {
+        // display: flex;
+        // flex-wrap: wrap;
+        // align-items: center;
+        // justify-content: center;
+        position: relative;
+        width: $tn-steps-item-number-width;
+        height: $tn-steps-item-number-width;
+        line-height: calc(#{$tn-steps-item-number-width} - 2rpx);
+        border: 1px solid #AAAAAA;
+        border-radius: 50%;
+        overflow: hidden;
+        transition: all 0.3s linear;
+        
+        &__text {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          margin: auto;
+          transition: inherit;
+          transform: translateY(-#{$tn-steps-item-number-width});
+          
+          &--visible {
+            transform: translateY(0);
+          }
+        }
+        
+        &__icon {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          margin: auto;
+          color: #FFFFFF;
+          transition: all 0.3s linear;
+          transform: translateY(#{$tn-steps-item-number-width});
+          
+          &--visible {
+            transform: translateY(0);
+          }
+        }
+      }
+      
+      &__dot {
+        width: $tn-steps-item-dot-width;
+        height: $tn-steps-item-dot-width;
+        display: flex;
+        flex-direction: row;
+        border-radius: 50%;
+        transition: all 0.3s linear;
+        
+        &--icon {
+          width: $tn-steps-item-number-width;
+          height: $tn-steps-item-number-width;
+        }
+      }
+      
+      &__icon {
+        width: $tn-steps-item-number-width;
+        height: $tn-steps-item-number-width;
+        font-size: $tn-steps-item-number-width;
+        transition: all 0.3s linear;
+      }
+      
+      &__dot-icon {
+        width: $tn-steps-item-number-width;
+        height: $tn-steps-item-number-width;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s linear;
+        
+        &--dot {
+          width: $tn-steps-item-dot-width;
+          height: $tn-steps-item-dot-width;
+          border-radius: 50%;
+          transition: inherit;
+        }
+        
+        &--icon {
+          width: $tn-steps-item-number-width;
+          height: $tn-steps-item-number-width;
+          font-size: $tn-steps-item-number-width;
+          transition: inherit;
+        }
+      }
+      
+      &__text {
+        transition: all 0.3s linear;
+        &--row {
+          margin-top: 14rpx;
+        }
+        
+        &--column {
+          margin-left: 14rpx;
+        }
+      }
+      
+      &__line {
+        position: absolute;
+        z-index: 0;
+        vertical-align: middle;
+        transition: all 0.3s linear;
+      }
+      
+      &--row {
+        display: flex;
+        flex-direction: column;
+        
+        .tn-steps__item__line {
+          border-bottom-width: 1px;
+          border-bottom-style: solid;
+          width: 50%;
+          left: 75%;
+          
+          &--dot {
+            top: calc(#{$tn-steps-item-dot-width} / 2);
+          }
+          
+          &--number, &--icon, &--dotIcon {
+            top: calc(#{$tn-steps-item-number-width} / 2);
+          }
+        }
+      }
+      
+      &--column {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        min-height: 120rpx;
+        
+        .tn-steps__item__line {
+          border-left-width: 1px;
+          border-left-style: solid;
+          height: 50%;
+          top: 75%;
+          
+          &--dot {
+            left: calc(#{$tn-steps-item-dot-width} / 2);
+          }
+          
+          &--number, &--icon, &--dotIcon {
+            left: calc(#{$tn-steps-item-number-width} / 2);
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-sticky/tn-sticky.vue b/tuniao-ui/components/tn-sticky/tn-sticky.vue
new file mode 100644
index 0000000..618637b
--- /dev/null
+++ b/tuniao-ui/components/tn-sticky/tn-sticky.vue
@@ -0,0 +1,186 @@
+<template>
+  <view class="tn-sticky-class">
+    <view
+      class="tn-sticky__wrap"
+      :class="[stickyClass]"
+      :style="[stickyStyle]"
+    >
+      <view
+        class="tn-sticky__item"
+        :style="{
+          position: fixed ? 'fixed' : 'static',
+          top: stickyTop + 'px',
+          left: left + 'px',
+          width: width === 'auto' ? 'auto' : width + 'px',
+          zIndex: elZIndex
+        }"
+      >
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-sticky',
+    props: {
+      // 吸顶容器到顶部某个距离的时候进行吸顶
+      // 在H5中，customNavBar的高度为45px
+      offsetTop: {
+        type: Number,
+        default: 0
+      },
+      // H5顶部导航栏的高度
+      h5NavHeight: {
+        type: Number,
+        default: 45
+      },
+      // 自定义顶部导航栏高度
+      customNavHeight: {
+        type: Number,
+        default: 0
+      },
+      // 是否开启吸顶
+      enabled: {
+        type: Boolean,
+        default: true
+      },
+      // 吸顶容器的背景颜色
+      backgroundColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // z-index
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 索引值，区分不同的吸顶组件
+      index: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      elZIndex() {
+        return this.zIndex ? this.zIndex : this.$t.zIndex.sticky
+      },
+      backgroundColorStyle() {
+        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
+      },
+      backgroundColorClass() {
+        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
+      },
+      stickyClass() {
+        let clazz = ''
+        clazz += this.elClass
+        if (this.backgroundColorClass) {
+          clazz += ` ${this.backgroundColorClass}`
+        }
+        return clazz
+      },
+      stickyStyle() {
+        let style = {}
+        style.height = this.fixed ? this.height + 'px' : 'auto'
+        if (this.backgroundColorStyle) {
+          style.color = this.backgroundColorStyle
+        }
+        if (this.elZIndex) {
+          style.zIndex = this.elZIndex
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        // 监听组件别名
+        stickyObserverName: 'tnStickyObserver',
+        // 组件的唯一编号
+        elClass: this.$t.uuid(),
+        // 是否固定
+        fixed: false,
+        // 高度
+        height: 'auto',
+        // 宽度
+        width: 'auto',
+        // 距离顶部的距离
+        stickyTop: 0,
+        // 左边距离
+        left: 0
+      }
+    },
+    watch: {
+      offsetTop(val) {
+        this.initObserver()
+      },
+      enabled(val) {
+        if (val === false) {
+          this.fixed = false
+          this.disconnectObserver(this.stickyObserverName)
+        } else {
+          this.initObserver()
+        }
+      },
+      customNavHeight(val) {
+        this.initObserver()
+      }
+    },
+    mounted() {
+      this.initObserver()
+    },
+    methods: {
+      // 初始化监听组件的布局状态
+      initObserver() {
+        if (!this.enabled) return
+        // #ifdef H5
+        this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight
+        // #endif
+         // #ifndef H5
+         this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.customNavHeight : this.customNavHeight
+         // #endif
+         
+         this.disconnectObserver(this.stickyObserverName)
+         this._tGetRect('.' + this.elClass).then((res) => {
+           this.height = res.height
+           this.left = res.left
+           this.width = res.width
+           this.$nextTick(() => {
+             this.connectObserver()
+           })
+         })
+      },
+      // 监听组件的布局状态
+      connectObserver() {
+        this.disconnectObserver(this.stickyObserverName)
+        // 组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
+        const contentObserver = this.createIntersectionObserver({
+          thresholds: [0.95, 0.98, 1]
+        })
+        contentObserver.relativeToViewport({
+          top: -this.stickyTop
+        })
+        contentObserver.observe('.' + this.elClass, res => {
+          if (!this.enabled) return
+          this.setFixed(res.boundingClientRect.top)
+        })
+        this[this.stickyObserverName] = contentObserver
+      },
+      // 设置是否固定
+      setFixed(top) {
+        const fixed = top < this.stickyTop
+        if (fixed) this.$emit('fixed', this.index)
+        else if (this.fixed) this.$emit('unfixed', this.index)
+        this.fixed = fixed
+      },
+      // 停止监听组件的布局状态
+      disconnectObserver(observerName) {
+        const observer = this[observerName]
+        observer && observer.disconnect()
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/tuniao-ui/components/tn-subsection/tn-subsection.vue b/tuniao-ui/components/tn-subsection/tn-subsection.vue
new file mode 100644
index 0000000..738a4c7
--- /dev/null
+++ b/tuniao-ui/components/tn-subsection/tn-subsection.vue
@@ -0,0 +1,410 @@
+<template>
+  <view
+    class="tn-subsection-class tn-subsection"
+    :class="[subsectionBackgroundColorClass]"
+    :style="[subsectionStyle]"
+  >
+    <!-- 滑块 -->
+    <block v-for="(item, index) in listInfo" :key="index">
+      <view
+        class="tn-subsection__item tn-text-ellipsis"
+        :class="[
+          'section-item-' + index,
+          noBorderRight(index)
+        ]"
+        :style="[itemStyle(index)]"
+        @tap="click(index)"
+      >
+        <view class="tn-subsection__item--text tn-text-ellipsis" :style="[textStyle(index)]">
+          {{ item.name }}
+        </view>
+      </view>
+    </block>
+    <!-- 背景 -->
+    <view
+      class="tn-subsection__bg"
+      :class="[itemBarClass]"
+      :style="[itemBarStyle]"
+    ></view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColorMixin],
+    name: 'tn-subsection',
+    props: {
+      // 模式选择
+      // button 按钮模式 subsection 分段模式
+      mode: {
+        type: String,
+        default: 'subsection'
+      },
+      // 组件高度
+      height: {
+        type: Number,
+        default: 60
+      },
+      // tab的数据
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 当前活动tab的index
+      current: {
+        type: [Number, String],
+        default: 0
+      },
+      // 激活时的字体颜色
+      activeColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 未激活时的字体颜色
+      inactiveColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 激活tab的字体是否加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      backgroundColor: {
+        type: String,
+        default: '#F4F4F4'
+      },
+      // 滑块的颜色
+      buttonColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 当mode为button时生效，圆角的值，单位rpx
+      borderRadius: {
+        type: Number,
+        default: 10
+      },
+      // 是否开启动画
+      animation: {
+        type: Boolean,
+        default: true
+      },
+      // 动画类型
+      // cubic-bezier -> 贝塞尔曲线
+      animationType: {
+        type: String,
+        default: ''
+      },
+      // 滑动滑块的是否，是否触发震动
+      vibrateShort: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        // 列表数据
+        listInfo: [],
+        // 子元素的背景样式
+        itemBgStyle: {
+          width: 0,
+          left: 0,
+          backgroundColor: '#ffffff',
+          height: '100%'
+        },
+        // 当前选中的滑块
+        currentIndex: this.current,
+        buttonPadding: 3,
+        // 组件初始化的是否current变换不应该震动
+        firstVibrateShort: true
+      }
+    },
+    watch: {
+      current: {
+        handler(val) {
+          this.currentIndex = val
+          this.changeSectionStatus(val)
+        },
+        immediate: true
+      }
+    },
+    created() {
+      // 将list的数据，传入listInfo数组
+      // 接受直接数组形式，或者数组元素为对象的形式，如：['开启', '关闭'],或者[{name: '开启'}, {name: '关闭'}]
+      this.listInfo = this.list.map((item, index) => {
+        if (typeof item !== 'object') {
+          let obj = {
+            width: 0,
+            name: item
+          }
+          return obj
+        } else {
+          item.width = 0
+          return obj
+        }
+      })
+    },
+    computed: {
+      // 设置mode=subsection时，滑块没有样式
+      noBorderRight() {
+        return index => {
+          if (this.mode !== 'subsection') return
+          let clazz = ''
+          // 不显示右边的边距
+          if (index < this.list.length - 1) clazz += ' tn-subsection__item--none-border-right'
+          // 显示整个组件的左右边圆角
+          if (index === 0) clazz += ' tn-subsection__item--first'
+          if (index === this.list.length - 1) clazz += ' tn-subsection__item--last'
+          return clazz
+        }
+      },
+      // 文字的样式
+      textStyle() {
+        return index => {
+          let style = {}
+          // 设置字体颜色
+          if (index === this.currentIndex) {
+            style.color = this.activeColor
+          } else {
+            style.color = this.inactiveColor
+          }
+          // 字体加粗
+          if (index === this.currentIndex && this.bold) style.fontWeight = 'bold'
+          // 文字大小
+          style.fontSize = (this.fontSize || 26) + this.fontUnit
+          return style
+        }
+      },
+      // 每个分段器item的样式
+      itemStyle() {
+        return index => {
+          let style = {}
+          if (this.fontSizeStyle) {
+            style.fontSize = this.fontSizeStyle
+          }
+          if (this.mode === 'subsection') {
+            // 设置border的样式
+            style.borderColor = this.buttonColor
+            style.borderWidth = '1rpx'
+            style.borderStyle = 'solid'
+          }
+          return style
+        }
+      },
+      // mode = button时，设置外层view的样式
+      subsectionStyle() {
+        let style = {}
+        style.height = this.height + 'rpx'
+        if (this.mode === 'button') {
+          style.backgroundColor = this.backgroundColorStyle
+          style.padding = `${this.buttonPadding}px`
+          style.borderRadius = `${this.borderRadius}rpx`
+        }
+        return style
+      },
+      // mode = button时，设置外层view的背景class
+      subsectionBackgroundColorClass() {
+        let clazz = ''
+        if (this.mode === 'button' && this.backgroundColorClass) {
+          clazz = this.backgroundColorClass
+        }
+        return clazz
+      },
+      itemBarClass() {
+        let clazz = ''
+        const buttonBgClass = this.$t.color.getBackgroundColorInternalClass(this.buttonColor)
+        if (this.animation) {
+          clazz += ' tn-subsection__bg__animation'
+          if (this.animationType) {
+            clazz += ` tn-subsection__bg__animation--${this.animationType}`
+          }
+        }
+        if (buttonBgClass) {
+          clazz += ` ${buttonBgClass}`
+        }
+        return clazz
+      },
+      // 滑块样式
+      itemBarStyle() {
+        let style = {}
+        const buttonBgStyle = this.$t.color.getBackgroundColorStyle(this.buttonColor)
+        if (buttonBgStyle) {
+          style.backgroundColor = this.buttonColor
+        }
+        style.zIndex = 1
+        if (this.mode === 'button') {
+          style.borderRadius = `${this.borderRadius}rpx`
+          style.bottom = `${this.buttonPadding}px`
+          style.height = (this.height - (this.buttonPadding * 4)) + 'rpx'
+          style.zIndex = 0
+        }
+        return Object.assign(this.itemBgStyle, style)
+      }
+    },
+    mounted() {
+      // 等待加载组件完成
+      setTimeout(() => {
+        this.getTabsInfo()
+      }, 10)
+    },
+    methods: {
+      // 改变滑块样式
+      changeSectionStatus(val) {
+        if (this.mode === 'subsection') {
+          // 根据滑块在最左和最右时，显示对应的圆角
+          if (val === this.list.length - 1) {
+            this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`
+          }
+          if (val === 0) {
+            this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`
+          }
+          if (val > 0 && val < this.list.length - 1) {
+            this.itemBgStyle.borderRadius = '0'
+          }
+        }
+        // 更新滑块的位置
+        setTimeout(() => {
+          this.itemBgLeft()
+        }, 10)
+        if (this.vibrateShort && !this.firstVibrateShort) {
+          // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
+          // #ifndef H5
+          uni.vibrateShort();
+          // #endif
+        }
+        this.firstVibrateShort = false
+      },
+      // 获取各个tab的节点信息
+      getTabsInfo() {
+        let view = uni.createSelectorQuery().in(this)
+        for (let i = 0; i < this.list.length; i++) {
+          view.select('.section-item-' + i).boundingClientRect()
+        }
+        view.exec(res => {
+          // 如果没有获取到，则重新获取
+          if (!res.length) {
+            setTimeout(() => {
+              this.getTabsInfo()
+              return
+            }, 10)
+          }
+          // 将每个分段器的宽度放入listInfo中
+          res.map((item, index) => {
+            this.listInfo[index].width = item.width
+          })
+          // 初始化滑块的宽度
+          if (this.mode === 'subsection') {
+            this.itemBgStyle.width = this.listInfo[0].width + 'px'
+          } else if (this.mode === 'button') {
+            this.itemBgStyle.width = this.listInfo[0].width + 'px'
+          }
+          
+          // 初始化滑块的位置
+          this.itemBgLeft()
+        })
+      },
+      // 设置滑块的位置
+      itemBgLeft() {
+        let left = 0
+        // 计算当前活跃item到组件左边的距离
+        this.listInfo.map((item, index) => {
+          if (index < this.currentIndex) left += item.width
+        })
+        // 根据不同的模式，计算滑块的位置
+        if (this.mode === 'subsection') {
+          this.itemBgStyle.left = left + 'px'
+        } else if (this.mode === 'button') {
+          this.itemBgStyle.left = left + this.buttonPadding + 'px'
+        }
+      },
+      
+      // 点击事件
+      click(index) {
+        // 不允许点击当前激活的选项
+        if (index === this.currentIndex) return
+        this.currentIndex = index
+        this.changeSectionStatus(index)
+        this.$emit('change', {
+          index: Number(index),
+          name: this.listInfo[index]['name']
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-subsection {
+    /* #ifndef APP-PLUS */
+    display: flex;
+    flex-direction: row;
+    /* #endif */
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+    
+    &__item {
+      /* #ifndef APP-PLUS */
+      display: flex;
+      flex-direction: row;
+      /* #endif */
+      flex: 1;
+      text-align: center;
+      font-size: 26rpx;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      color: #FFFFFF;
+      padding: 0 6rpx;
+      
+      
+      &--text {
+        transition: all 0.3s;
+        color: #FFFFFF;
+        /* #ifndef APP-PLUS */
+        display: flex;
+        flex-direction: row;
+        /* #endif */
+        align-items: center;
+        position: relative;
+        z-index: 3;
+      }
+      
+      &--first {
+        border-top-left-radius: 8rpx;
+        border-bottom-left-radius: 8rpx;
+      }
+      
+      &--last {
+        border-top-right-radius: 8rpx;
+        border-bottom-right-radius: 8rpx;
+      }
+      
+      &--none-border-right {
+        border-right: none !important;
+      }
+    }
+    
+    &__bg {
+      background-color: $tn-main-color;
+      position: absolute;
+      z-index: -1;
+      transition-property: all;
+      transition-duration: 0s;
+      transition-timing-function: linear;
+      
+      &__animation {
+        transition-duration: 0.25s !important;
+        
+        &--cubic-bezier {
+          transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
+        }
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-swipe-action-item/index.wxs b/tuniao-ui/components/tn-swipe-action-item/index.wxs
new file mode 100644
index 0000000..977b970
--- /dev/null
+++ b/tuniao-ui/components/tn-swipe-action-item/index.wxs
@@ -0,0 +1,230 @@
+/**
+ * 此为wxs模块，只支持APP-VUE，微信和QQ小程序以及H5平台
+ * wxs内部不支持es6语法，变量只能使用var定义，无法使用解构，箭头函数等特性
+ */
+
+// 开始触摸
+function touchStart(event, ownerInstance) {
+  // 触发事件的组件的ComponentDescriptor实例
+  var instance = event.instance
+  // wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
+  var state = instance.getState()
+  if (state.disabled) return
+  var touches = event.touches
+  // 如果进行的是多指触控，不允许操作
+  if (touches && touches.length > 1) return
+  // 标识当前为滑动中状态
+  state.moving = true
+  // 记录触摸开始点的坐标点
+  state.startX = touches[0].pageX
+  state.startY = touches[0].pageY
+  // 记录开始触摸的时间
+  state.touchStartTime = getDate().getTime()
+  
+  ownerInstance.callMethod('closeOther')
+}
+
+// 触摸滑动
+function touchMove(event, ownerInstance) {
+  // 触发事件的组件的ComponentDescriptor实例
+  var instance = event.instance
+  // wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
+  var state = instance.getState()
+  if (state.disabled || !state.moving) return
+  var touches = event.touches
+  var pageX = touches[0].pageX
+  var pageY = touches[0].pageY
+  var moveX = pageX - state.startX
+  var moveY = pageY - state.startY
+  var buttonsWidth = state.buttonsWidth
+  
+  // 移动的X轴距离大于Y轴距离，也即终点与起点位置连线，与X轴夹角小于45度时，禁止页面滚动
+  if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
+    // event.preventDefault && event.preventDefault()
+    // event.stopPropagation && event.stopPropagation()
+  }
+  // 移动的Y轴距离大于X轴距离，也即终点与起点位置连线，与Y轴夹角小于45度时，认为页面时上下滑动而不是左右滑动单元格
+  if (Math.abs(moveX) < Math.abs(moveY)) return
+  
+  // 限制右滑的距离，不允许内容部分往右偏移，右滑会导致X轴偏移值大于0，以此做判断
+  // 此处不能直接return，因为滑动过程中会缺失某些关键点坐标，会导致错乱，所以处理的方法是在超出后设置为0
+  if (state.status === 'open') {
+    // 在开启状态下，忽略左滑动
+    if (moveX < 0) moveX = 0
+    // 要收起菜单，最大能移动的距离为按钮的总宽度
+    if (moveX > buttonsWidth) moveX = buttonsWidth
+    // 如果是已经打开的状态，向左滑动时，移动收起菜单
+    moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
+  } else {
+    // 关闭状态下，忽略右滑
+    if (moveX > 0) return
+    // 滑动的距离不允许超过所有按钮的总宽度，此时只能左滑
+    // 滑动距离设置为按钮的宽度（负数）
+    if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
+    // 在滑动过程中不断移动单元格内容，使其不断显示出来
+    moveSwipeAction(moveX, instance, ownerInstance)
+  }
+}
+
+// 触摸结束
+function touchEnd(event, ownerInstance) {
+  // 触发事件的组件的ComponentDescriptor实例
+  var instance = event.instance
+  // wxs内的局部变量快照，此快照是属于整个组件，在touchstart和touchmove事件中都能获取到相同的结果
+  var state = instance.getState()
+  if (!state.moving || state.disabled) return
+  var touches = event.changedTouches ? event.changedTouches[0] : {}
+  var pageX = touches.pageX
+  var pageY = touches.pageY
+  var moveX = pageX - state.startX
+  if (state.status === 'open') {
+    // 在开启状态下，忽略左滑动
+    if (moveX < 0) moveX = 0
+    // 在开启状态下，点击一下内容区域，moveX为0，也即没有移动，这是执行收起操作
+    if (moveX === 0) {
+      return closeSwipeAction(instance, ownerInstance)
+    }
+    
+    // 在开启状态下，滑动距离小于阈值，则默认不关闭同时恢复原来的打开状态
+    if (Math.abs(moveX) < state.threshold) {
+      openSwipeAction(instance, ownerInstance)
+    } else {
+      // 如果滑动距离大于阈值则执行收起逻辑
+      closeSwipeAction(instance, ownerInstance)
+    }
+  } else {
+    
+    // 获取手指离开的时间
+    var touchEndTime = getDate().getTime()
+    // 判断是否点击了
+    if (Math.abs(pageX - state.startX) < 5 && Math.abs(pageY - state.startY) < 5 && touchEndTime - state.touchStartTime < 100) {
+      ownerInstance.callMethod('handlerItemClick')
+    }
+    
+    // 在关闭状态下，忽略右滑动
+    if (moveX > 0) return
+    if (Math.abs(moveX) < state.threshold) {
+      closeSwipeAction(instance, ownerInstance)
+    } else {
+      openSwipeAction(instance, ownerInstance)
+    }
+  }
+}
+
+// 获取过渡时间
+function getDuration(value) {
+  if (value.toString().indexOf('s') >= 0) return value
+  return value > 30 ? value + 'ms' : value + 's'
+}
+
+// 移动滑动选择器内容区域，同时显示出其隐藏的菜单
+function moveSwipeAction(moveX, instance, ownerInstance) {
+  var state = instance.getState()
+  // 获取所有按钮的实例，需要通过它去设置按钮的位移
+  var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
+  
+  // 设置菜单内容部分的偏移
+  instance.requestAnimationFrame(function () {
+    instance.setStyle({
+      // 设置translateX的值
+      'transition': 'none',
+      transform: 'translateX('+ moveX +'px)',
+      '-webkit-transform': 'translateX('+ moveX +'px)'
+    })
+  })
+}
+
+// 一次性展开滑动菜单
+function openSwipeAction(instance, ownerInstance) {
+  var state = instance.getState()
+  // 获取所有按钮的实例，需要通过它去设置按钮的位移
+  var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
+  // 处理duration单位问题
+  var duration = getDuration(state.duration)
+  // 展开过程中，是向左移动，所以x的偏移应该是负值
+  var buttonsWidth = -state.buttonsWidth
+  instance.requestAnimationFrame(function () {
+    // 设置菜单主体内容
+    instance.setStyle({
+      'transition': 'transform ' + duration,
+      'transform': 'translateX('+ buttonsWidth +'px)',
+      '-webkit-transform': 'translateX('+ buttonsWidth +'px)'
+    })
+  })
+  setStatus('open', instance, ownerInstance)
+}
+
+// 一次性收起滑动菜单
+function closeSwipeAction(instance, ownerInstance) {
+  var state = instance.getState()
+  // 获取所有按钮的实例，需要通过它去设置按钮的位移
+  var buttons = ownerInstance.selectAllComponents('.tn-swipe-action-item__right__button')
+  var len = buttons.length
+  // 处理duration单位问题
+  var duration = getDuration(state.duration)
+  instance.requestAnimationFrame(function () {
+    // 设置菜单主体内容
+    instance.setStyle({
+      'transition': 'transform ' + duration,
+      'transform': 'translateX(0px)',
+      '-webkit-transform': 'translateX(0px)'
+    })
+    // 设置各个隐藏按钮的收起状态
+    for (var i = len - 1; i >= 0; i--) {
+      buttons[i].setStyle({
+        'transition': 'transform ' + duration,
+        'transform': 'translateX(0px)',
+        '-webkit-transform': 'translateX(0px)'
+      })
+    }
+  })
+  setStatus('close', instance, ownerInstance)
+}
+
+// 标记菜单的当前状态，open - 打开 close - 关闭
+function setStatus(status, instance, ownerInstance) {
+  var state = instance.getState()
+  state.status = status
+  ownerInstance.callMethod('setStatus', status)
+}
+
+// status的状态发生变化
+function statusChange(newValue, oldValue, ownerInstance, instance) {
+  var state = instance.getState()
+  if (state.disabled) return
+  // 打开或关闭单元格
+  if (newValue === 'close' && state.status === 'open') {
+    closeSwipeAction(instance, ownerInstance)
+  } else if (newValue === 'open' && state.status === 'close') {
+    openSwipeAction(instance, ownerInstance)
+  }
+}
+
+// 菜单尺寸发生变化
+function sizeChange(newValue, oldValue, ownerInstance, instance) {
+  // wxs内的局部变量快照
+  var state = instance.getState()
+  state.disabled = newValue.disabled
+  state.duration = newValue.duration
+  state.show = newValue.show
+  state.threshold = newValue.threshold
+  state.buttons = newValue.buttons
+  
+  if (state.buttons) {
+    var len = state.buttons.length
+    var buttonsWidth = 0
+    var buttons = newValue.buttons
+    for (var i = 0; i < len; i++) {
+      buttonsWidth += buttons[i].width
+    }
+  }
+  state.buttonsWidth = buttonsWidth
+}
+
+module.exports = {
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd,
+  sizeChange: sizeChange,
+  statusChange: statusChange
+}
\ No newline at end of file
diff --git a/tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue b/tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue
new file mode 100644
index 0000000..993750c
--- /dev/null
+++ b/tuniao-ui/components/tn-swipe-action-item/tn-swipe-action-item.vue
@@ -0,0 +1,236 @@
+<template>
+  <view class="tn-swipe-action-item-class tn-swipe-action-item">
+    <view class="tn-swipe-action-item__right">
+      <slot name="button">
+        <view
+          v-for="(item, index) in options"
+          :key="index" 
+          class="tn-swipe-action-item__right__button"
+          :style="[{
+            alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
+          }]"
+          @tap="buttonClickHandler(item, index)"
+        >
+          <view
+            class="tn-swipe-action-item__right__button__wrapper"
+            :style="[{
+              backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#AAAAAA',
+              borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
+              padding: item.style && item.style.borderRadius ? '0' : '0 30rpx'
+            }, item.style]"
+          >
+            <view
+              v-if="item.icon"
+              :class="[`tn-icon-${item.icon}`]"
+              :style="[{
+                color: item.style && item.style.color ? item.style.color : '#FFFFFF',
+                fontSize: item.iconSize ? item.iconSize + 'rpx' : item.style && item.style.fontSize ? (item.style.fontsize * 1.2) + 'rpx' : '34rpx',
+                marginRight: item.text ? '4rpx' : 0
+              }]"
+            ></view>
+            <text
+              v-if="item.text"
+              class="tn-swipe-action-item__right__button__text tn-text-ellipsis"
+              :style="[{
+                color: item.style && item.style.color ? item.style.color : '#FFFFFF',
+                fontSize: item.style && item.style.fontSize ? item.style.fontSize + 'rpx' : '32rpx',
+                lineHeight: item.style && item.style.fontSize ? item.style.fontSize + 'rpx' : '32rpx'
+              }]"
+            >{{ item.text }}</text>
+          </view>
+        </view>
+      </slot>
+    </view>
+    
+    <view
+      class="tn-swipe-action-item__content"
+      :status="status"
+      :size="size"
+      :change:status="wxs.statusChange"
+      :change:size="wxs.sizeChange"
+      @touchstart="wxs.touchStart"
+      @touchmove="wxs.touchMove"
+      @touchend="wxs.touchEnd"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
+<script src="./index.wxs" module="wxs" lang="wxs"></script>
+<!-- #endif -->
+<script>
+  
+  export default {
+    name: 'tn-swipe-action-item',
+    props: {
+      // 是否显示滑动菜单
+      show: {
+        type: Boolean,
+        default: false
+      },
+      // 标识符，如果是v-for可用index的索引值
+      name: {
+        type: [String, Number],
+        default: ''
+      },
+      // 右侧按钮内容
+      options: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否自动关闭其他swipe按钮组
+      autoClose: {
+        type: Boolean,
+        default: true
+      },
+      // 滑动距离阈值，大于此值才会打开菜单
+      threshold: {
+        type: Number,
+        default: 60
+      },
+      // 动画过渡时间，单位ms
+      duration: {
+        type: Number,
+        default: 300
+      }
+    },
+    computed: {
+      // 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
+      itemData() {
+        return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
+      }
+    },
+    data() {
+      return {
+        // 按钮尺寸信息
+        size: {},
+        // 父组件参数
+        parentData: {
+          autoClose: true
+        },
+        // 当前状态
+        status: 'close'
+      }
+    },
+    watch: {
+      itemData() {
+        this.queryRect()
+      }
+    },
+    created() {
+      this.parent = false
+      this.updateParentData()
+      this.parent && this.parent.children.push(this)
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    methods: {
+      init() {
+        this.queryRect()
+      },
+      // 更新父组件信息
+      updateParentData() {
+        this.getParentData('tn-swipe-action')
+      },
+      // 查询节点
+      queryRect() {
+        this._tGetRect('.tn-swipe-action-item__right__button', true).then(res => {
+          this.size = {
+            buttons: res,
+            show: this.show,
+            disabled: this.disabled,
+            threshold: this.threshold,
+            duration: this.duration
+          }
+        })
+      },
+      // 按钮点击
+      buttonClickHandler(item, index) {
+        this.$emit('click', {
+          type: 'button',
+          index
+        })
+      },
+      // item点击
+      handlerItemClick() {
+        this.$emit('click', {
+          type: 'item',
+          name: this.name
+        })
+      },
+      // 关闭时执行
+      closeHandler() {
+        this.status = 'close'
+      },
+      // 设置状态
+      setStatus(status) {
+        this.status = status
+      },
+      // 关闭其他单元格
+      closeOther() {
+        this.parent && this.parent.closeOther(this)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-swipe-action-item {
+    position: relative;
+    overflow: hidden;
+    // touch-action: none;
+    
+    &__right {
+      display: flex;
+      flex-direction: row;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      
+      &__button {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        
+        &__wrapper {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          padding: 0 30rpx;
+        }
+        
+        &__text {
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+          justify-content: center;
+          text-align: center;
+          color: #FFFFFF;
+          font-size: 30rpx;
+        }
+      }
+    }
+    
+    &__content {
+      background-color: #FFFFFF;
+      transform: translateX(0px);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue b/tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue
new file mode 100644
index 0000000..1b238b4
--- /dev/null
+++ b/tuniao-ui/components/tn-swipe-action/tn-swipe-action.vue
@@ -0,0 +1,61 @@
+<template>
+  <view class="tn-swipe-action-class tn-swipe-action">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-swipe-action',
+    props: {
+      // 是否自动关闭其他swipe按钮组
+      autoClose: {
+        type: Boolean,
+        default: true
+      }
+    },
+    provide() {
+      return {
+        swipeAction: this
+      }
+    },
+    computed: {
+      // 用于监听父组件参数变化
+      parentData() {
+        return [this.autoClose]
+      }
+    },
+    data() {
+      return {}
+    },
+    watch: {
+      parentData() {
+        if (this.children.length) {
+          this.children.map(child => {
+            // 判断子组件(tn-swipe-action-item)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    },
+    created() {
+      this.children = []
+    },
+    methods: {
+      // 关闭其他单元格
+      closeOther(child) {
+        if (this.autoClose) {
+          // 历遍所有的单元格，找出非当前操作中的单元格，进行关闭
+          this.children.map((item, index) => {
+            if (child !== item) {
+              item.closeHandler()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/tuniao-ui/components/tn-swiper/tn-swiper.vue b/tuniao-ui/components/tn-swiper/tn-swiper.vue
new file mode 100644
index 0000000..5312b5c
--- /dev/null
+++ b/tuniao-ui/components/tn-swiper/tn-swiper.vue
@@ -0,0 +1,364 @@
+<template>
+  <view class="tn-swiper__wrap-class tn-swiper__wrap" :style="{borderRadius: `${radius}rpx`}">
+    <!-- 轮播图 -->
+    <swiper
+      class="tn-swiper"
+      :class="[backgroundColorClass]"
+      :style="[swiperStyle]"
+      :current="current"
+      :interval="interval"
+      :circular="circular"
+      :autoplay="autoplay"
+      :duration="duration"
+      :previous-margin="effect3d ? effect3dPreviousSpacing + 'rpx' : '0'"
+      :next-margin="effect3d ? effect3dPreviousSpacing + 'rpx' : '0'"
+      @change="change"
+    >
+      <swiper-item
+        v-for="(item, index) in list"
+        :key="index"
+        class="tn-swiper__item"
+      >
+        <view
+          class="tn-swiper__item__image__wrap"
+          :class="[swiperIndex !== index ? 'tn-swiper__item__image--scale' : '']"
+          :style="{
+            borderRadius: `${radius}rpx`,
+            transform: effect3d && swiperIndex !== index ? 'scaleY(0.9)' : 'scaleY(1)',
+            margin: effect3d && swiperIndex !== index ? '0 20rpx' : 0
+          }"
+          @click="click(index)"
+        >
+          <image class="tn-swiper__item__image" :src="item[name] || item" :mode="imageMode"></image>
+          <view
+            v-if="title && item[titleName]"
+            class="tn-swiper__item__title tn-text-ellipsis"
+            :style="[titleStyle]">
+            {{ item[titleName] }}
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+    
+    <!-- 指示点 -->
+    <view class="tn-swiper__indicator" :style="[indicatorStyle]">
+      <block v-if="mode === 'rect'">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="tn-swiper__indicator__rect"
+          :class="{'tn-swiper__indicator__rect--active': swiperIndex === index}"
+        ></view>
+      </block>
+      <block v-if="mode === 'dot'">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="tn-swiper__indicator__dot"
+          :class="{'tn-swiper__indicator__dot--active': swiperIndex === index}"
+        ></view>
+      </block>
+      <block v-if="mode === 'round'">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="tn-swiper__indicator__round"
+          :class="{'tn-swiper__indicator__round--active': swiperIndex === index}"
+        ></view>
+      </block>
+      <block v-if="mode === 'number'">
+        <view class="tn-swiper__indicator__number">{{ swiperIndex + 1 }}/{{ list.length }}</view>
+      </block>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-swiper',
+    props: {
+      // 轮播图列表数据
+      // [{image: xxx.jpg, title: 'xxxx'}]
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 初始化时，默认显示第几项
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 250
+      },
+      // 背景颜色
+      backgroundColor: {
+        type: String,
+        default: 'transparent'
+      },
+      // 图片的属性名
+      name: {
+        type: String,
+        default: 'image'
+      },
+      // 是否显示标题
+      title: {
+        type: Boolean,
+        default: false
+      },
+      // 标题的属性名
+      titleName: {
+        type: String,
+        default: 'title'
+      },
+      // 用户自定义标题样式
+      titleStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 圆角的值
+      radius: {
+        type: Number,
+        default: 8
+      },
+      // 指示器模式
+      // rect -> 方形 round -> 圆角方形 dot -> 点 number -> 轮播图下标
+      mode: {
+        type: String,
+        default: 'round'
+      },
+      // 指示器位置
+      // topLeft \ topCenter \ topRight \ bottomLeft \ bottomCenter \ bottomRight
+      indicatorPosition: {
+        type: String,
+        default: 'bottomCenter'
+      },
+      // 开启3D缩放效果
+      effect3d: {
+        type: Boolean,
+        default: false
+      },
+      // 在3D缩放模式下，item之间的间隔
+      effect3dPreviousSpacing: {
+        type: Number,
+        default: 50
+      },
+      // 自定播放
+      autoplay: {
+        type: Boolean,
+        default: true
+      },
+      // 图片之间播放间隔多久
+      interval: {
+        type: Number,
+        default: 3000
+      },
+      // 轮播间隔时间
+      duration: {
+        type: Number,
+        default: 500
+      },
+      // 是否衔接滑动
+      circular: {
+        type: Boolean,
+        default: true
+      },
+      // 图片裁剪模式
+      imageMode: {
+        type: String,
+        default: 'aspectFill'
+      }
+    },
+    computed: {
+      backgroundColorStyle() {
+        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
+      },
+      backgroundColorClass() {
+        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
+      },
+      swiperStyle() {
+        let style = {}
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        if (this.height) {
+          style.height = this.height + 'rpx'
+        }
+        return style
+      },
+      indicatorStyle() {
+        let style = {}
+        if (this.indicatorPosition === 'topLeft' || this.indicatorPosition === 'bottomLeft') style.justifyContent = 'flex-start'
+        if (this.indicatorPosition === 'topCenter' || this.indicatorPosition === 'bottomCenter') style.justifyContent =  'center'
+        if (this.indicatorPosition === 'topRight' || this.indicatorPosition === 'bottomRight') style.justifyContent =  'flex-end'
+        if (['topLeft','topCenter','topRight'].indexOf(this.indicatorPosition) >= 0) {
+          style.top = '12rpx'
+          style.bottom = 'auto'
+        } else {
+          style.top = 'auto'
+          style.bottom = '12rpx'
+        }
+        style.padding = `0 ${this.effect3d ? '74rpx' : '24rpx'}`
+        
+        return style
+      },
+      swiperTitleStyle() {
+        let style = {}
+        if (this.mode === 'none' || this.mode === '') style.paddingBottom = '12rpx'
+        if (['bottomLeft','bottomCenter','bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode === 'number') {
+          style.paddingBottom = '60rpx'
+        } else if (['bottomLeft','bottomCenter','bottomRight'].indexOf(this.indicatorPosition) >= 0 && this.mode !== 'number') {
+          style.paddingBottom = '40rpx'
+        } else {
+          style.paddingBottom = '12rpx'
+        }
+        
+        style = Object.assign(style, this.titleStyle)
+        return style
+      }
+    },
+    data() {
+      return {
+        // 当前显示的item的index
+        swiperIndex: this.current
+      }
+    },
+    watch: {
+      list(newVal, oldVal) {
+        // 如果修改了list的数据，重置current的值
+        if (newVal.length !== oldVal.length) this.swiperIndex = 0
+      },
+      current(value) {
+        // 监听外部current的变化，实时修改内部依赖于此测swiperIndex值，如果更新了current，而不是更新swiperIndex，就会错乱，因为指示器是依赖于swiperIndex的
+        this.swiperIndex = value
+      }
+    },
+    methods: {
+      click(index) {
+        this.$emit('click', index)
+      },
+      // 图片自动切换时触发
+      change(event) {
+        const current = event.detail.current
+        this.swiperIndex = current
+        this.$emit('change', current)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-swiper {
+    
+    &__wrap {
+      position: relative;
+      overflow: hidden;
+      transform: translateY(0);
+    }
+    
+    &__item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      overflow: hidden;
+      
+      &__image {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+        display: block;
+        /* #ifdef H5 */
+        pointer-events: none;
+        /* #endif */
+        
+        &__wrap {
+          width: 100%;
+          height: 100%;
+          flex: 1;
+          transition: all 0.5s;
+          overflow: hidden;
+          box-sizing: content-box;
+          position: relative;
+        }
+        
+        &--scale {
+          transform-origin: center center;
+        }
+      }
+      
+      &__title {
+        width: 100%;
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.3);
+        bottom: 0;
+        left: 0;
+        font-size: 28rpx;
+        padding: 12rpx 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
+    
+    &__indicator {
+      padding: 0 24rpx;
+      position: absolute;
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      z-index: 1;
+      
+      &__rect {
+        width: 26rpx;
+        height: 8rpx;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: all 0.5s;
+        
+        &--active {
+          background-color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      
+      &__dot {
+        width: 14rpx;
+        height: 14rpx;
+        margin: 0 6rpx;
+        border-radius: 20rpx;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: all 0.5s;
+        
+        &--active {
+          background-color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      
+      &__round {
+        width: 14rpx;
+        height: 14rpx;
+        margin: 0 6rpx;
+        border-radius: 20rpx;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: all 0.5s;
+        
+        &--active {
+          width: 34rpx;
+          background-color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      
+      &__number {
+        padding: 6rpx 16rpx;
+        line-height: 1;
+        background-color: rgba(0, 0, 0, 0.3);
+        color: rgba(255, 255, 255, 0.8);
+        border-radius: 100rpx;
+        font-size: 26rpx;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-switch/tn-switch.vue b/tuniao-ui/components/tn-switch/tn-switch.vue
new file mode 100644
index 0000000..6dbcad4
--- /dev/null
+++ b/tuniao-ui/components/tn-switch/tn-switch.vue
@@ -0,0 +1,241 @@
+<template>
+  <view
+    class="tn-switch-class tn-switch"
+    :class="[
+      value ? 'tn-switch--on' : '',
+      disabled ? 'tn-switch--disabled' : '',
+      `tn-switch--${shape}`
+    ]"
+    :style="[switchStyle]"
+    @tap="click"
+  >
+    <view
+      class="tn-switch__node"
+      :class="[`tn-switch__node--${shape}`]"
+      :style="[switchNodeStyle]"
+    >
+      <tn-loading class="tn-switch__node__loading" :show="loading" mode="flower" :size="size * 0.6" :color="loadingColor"></tn-loading>
+    </view>
+    <!-- 左图标 -->
+    <view
+      v-if="leftIcon !== ''"
+      class="tn-switch__icon tn-switch__icon--left"
+      :class="[
+        `tn-icon-${leftIcon}`,
+        value ? 'tn-switch__icon--show' : ''
+      ]"
+      :style="[iconStyle]"></view>
+    <!-- 右图标 -->
+    <view 
+      v-if="rightIcon !== ''"
+      class="tn-switch__icon tn-switch__icon--right"
+      :class="[
+        `tn-icon-${rightIcon}`,
+        !value ? 'tn-switch__icon--show' : ''
+      ]"
+      :style="[iconStyle]"></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-switch',
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      },
+      // 按钮的样式
+      // circle 圆角 square 方形
+      shape: {
+        type: String,
+        default: 'circle'
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 尺寸
+      size: {
+        type: Number,
+        default: 50
+      },
+      // 打开时的背景颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 关闭时的背景颜色
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 激活时的值
+      activeValue: {
+        type: [Number, String, Boolean],
+        default: true
+      },
+      // 关闭时的值
+      inactiveValue: {
+        type: [Number, String, Boolean],
+        default: false
+      },
+      // 左图标
+      leftIcon: {
+        type: String,
+        default: ''
+      },
+      // 右图标
+      rightIcon: {
+        type: String,
+        default: ''
+      },
+      // 是否为加载状态
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      // 点击手机是否震动
+      vibrateShort: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      switchStyle() {
+        let style = {}
+        style.fontSize = this.$t.string.getLengthUnitValue(this.size)
+        style.backgroundColor = this.value ? 
+          this.activeColor ? this.activeColor : '#01BEFF' : 
+          this.inactiveColor ? this.inactiveColor : '#AAAAAA'
+        return style
+      },
+      switchNodeStyle() {
+        let style = {}
+        style.width = this.$t.string.getLengthUnitValue(this.size)
+        style.height = style.width
+        return style
+      },
+      iconStyle() {
+        let style = {}
+        style.fontSize = this.$t.string.getLengthUnitValue(this.size - 20)
+        style.lineHeight = this.$t.string.getLengthUnitValue(this.size)
+        return style
+      },
+      loadingColor() {
+        return this.value ? this.activeColor : ''
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    methods: {
+      click() {
+        if (!this.disabled && !this.loading) {
+          if (this.vibrateShort) uni.vibrateShort()
+          this.$emit('input', !this.value)
+          // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+          this.$nextTick(() => {
+          	this.$emit('change', this.value ? this.activeValue : this.inactiveValue);
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-switch {
+    /* #ifndef APP-NVUE */
+    display: inline-block;
+    /* #endif */
+    position: relative;
+    box-sizing: initial;
+    width: 2em;
+    height: 1em;
+    font-size: 50rpx;
+    background-color: #AAAAAA;
+    transition: background-color 0.3s;
+    
+    &__node {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background-color: #FFFFFF;
+      transform: scale(0.9);
+      box-shadow: 0 6rpx 2rpx 0 rgba(0, 0, 0, 0.05), 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.1), 0 6rpx 6rpx 0 rgba(0, 0, 0, 0.05);
+      transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+      -webkit-transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+      
+      &__loading {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      &--circle {
+        border-radius: 100%;
+      }
+      
+      &--square {
+        border-radius: 15%;
+      }
+    }
+    
+    &__icon {
+      color: #FFFFFF;
+      font-size: 30rpx;
+      line-height: 50rpx;
+      height: 100%;
+      vertical-align: middle;
+      position: absolute;
+      transform: scale(0);
+      transform-origin: 50% 50%;
+      transition: transform 0.3s ease-in-out;
+      
+      &--left {
+        top: 0;
+        left: 10rpx;
+      }
+      
+      &--right {
+        top: 0;
+        right: 10rpx;
+      }
+      
+      &--show {
+        transform: scale(1);
+      }
+    }
+    
+    &--circle {
+      border-radius: 1em;
+    }
+    
+    &--square {
+      border-radius: 0.1em;
+    }
+    
+    &--on {
+      background-color: $tn-main-color;
+      
+      .tn-switch__node {
+        transform: translateX(100%) scale(0.9);
+      }
+    }
+    
+    &--disabled {
+      opacity: 0.4;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tabbar/tn-tabbar.vue b/tuniao-ui/components/tn-tabbar/tn-tabbar.vue
new file mode 100644
index 0000000..6ec273a
--- /dev/null
+++ b/tuniao-ui/components/tn-tabbar/tn-tabbar.vue
@@ -0,0 +1,576 @@
+<template>
+  <view v-if="show" class="tn-tabbar-class tn-tabbar" @touchmove.stop.prevent="() => {}">
+    <!-- tabbar 内容-->
+    <view
+      class="tn-tabbar__content"
+      :class="{
+        'tn-tabbar--fixed': fixed,
+        'tn-safe-area-inset-bottom': safeAreaInsetBottom,
+        'tn-tabbar--shadow': shadow
+      }"
+      :style="{
+        height: height + 'rpx',
+        backgroundColor: bgColor
+      }"
+    >
+      <!-- tabbar item -->
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="tn-tabbar__content__item"
+        :id="`tabbar_item_${index}`"
+        :class="{'tn-tabbar__content__item--out': item.out}"
+        :style="{
+          backgroundColor: bgColor
+        }"
+        @tap.stop="clickItemHandler(index)"
+      >
+        <!-- tabbar item的图片或者icon-->
+        <view :class="[itemButtonClass(index)]"
+          :style="[itemButtonStyle(index)]"
+        >
+          <image
+            v-if="isImage(index)"
+            :src="elIcon(index)"
+            mode="scaleToFill"
+            class="tn-tabbar__content__item__image"
+            :style="{
+              width: `${item.iconSize || iconSize}rpx`,
+              height: `${item.iconSize || iconSize}rpx`
+            }"
+          ></image>
+          <view
+            v-else
+            class="tn-tabbar__content__item__icon"
+            :class="[`tn-icon-${elIcon(index)}`,elIconColor(index, false)]"
+            :style="{
+              fontSize: `${item.iconSize || iconSize}rpx`,
+              color: elIconColor(index)
+            }"
+          ></view>
+          
+          <!-- 角标-->
+          <tn-badge
+            v-if="!item.out && (item.count || item.dot)"
+            :dot="item.dot || false"
+            backgroundColor="tn-bg-red"
+            fontColor="#FFFFFF"
+            :radius="item.dot ? 14 : 0"
+            :fontSize="14"
+            padding="2rpx 4rpx"
+            :absolute="true"
+            :top="2"
+          >
+            {{ $t.number.formatNumberString(item.count) }}
+          </tn-badge>
+        </view>
+        
+        <!-- tabbar item的文字-->
+        <view
+          class="tn-tabbar__content__item__text"
+          :class="[elColor(index, false)]"
+          :style="{
+            color: elColor(index),
+            fontSize: `${fontSize}rpx`
+          }"
+        >
+          <text class="tn-text-ellipsis">{{ item.title }}</text>
+        </view>
+      </view>
+      
+      <!-- item 突起部分 -->
+      <view
+        v-if="outItemIndex !== -1"
+        class="tn-tabbar__content__out"
+        :class="[{
+          'tn-tabbar__content__out--shadow': shadow
+        }, animation && value === outItemIndex ? `tn-tabbar__content__out--animation--${animationMode}` : '']"
+        :style="{
+          backgroundColor: bgColor,
+          left: outItemLeft,
+          width: `${outHeight}rpx`,
+          height: `${outHeight}rpx`,
+          top: `-${outHeight * 0.3}rpx`
+        }"
+        @tap.stop="clickItemHandler(outItemIndex)"
+      ></view>
+    </view>
+    
+    <!-- 防止tabbar塌陷 -->
+    <view class="tn-tabbar__placeholder" :class="{'tn-safe-area-inset-bottom': safeAreaInsetBottom}" :style="{
+      height: `calc(${height}rpx)`
+    }"></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-tabbar',
+    props: {
+      // 绑定当前被选中的current值
+      value: {
+        type: [String, Number],
+        default: 0
+      },
+      // 是否显示
+      show: {
+        type: Boolean,
+        default: true
+      },
+      // 图标列表
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 高度，单位rpx
+      height: {
+        type: Number,
+        default: 100
+      },
+      // 突起的高度
+      outHeight: {
+        type: Number,
+        default: 100
+      },
+      // 背景颜色
+      bgColor: {
+        type: String,
+        default: '#FFFFFF'
+      },
+      // 图标大小
+      iconSize: {
+        type: Number,
+        default: 50
+      },
+      // 字体大小
+      fontSize: {
+        type: Number,
+        default: 20
+      },
+      // 激活时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 非激活时的颜色
+      inactiveColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 激活时图标的颜色
+      activeIconColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 非激活时图标的颜色
+      inactiveIconColor: {
+        type: String,
+        default: '#AAAAAA'
+      },
+      // 激活时的自定义样式
+      activeStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示阴影
+      shadow: {
+        type: Boolean,
+        default: true
+      },
+      // 点击时是否有动画
+      animation: {
+        type: Boolean,
+        default: false
+      },
+      // 点击时的动画模式
+      animationMode: {
+        type: String,
+        default: 'scale'
+      },
+      // 是否固定在底部
+      fixed: {
+        type: Boolean,
+        default: true
+      },
+      // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+      safeAreaInsetBottom: {
+      	type: Boolean,
+      	default: false
+      },
+      // 切换前回调
+      beforeSwitch: {
+        type: Function,
+        default: null
+      }
+    },
+    computed: {
+      // 当前字体的颜色
+      elColor() {
+        return (index, style = true) => {
+          let currentItem = this.list[index]
+          let color = ''
+          if (index === this.value) {
+            color = currentItem['activeColor'] || this.activeColor
+          } else {
+            color = currentItem['inactiveColor'] || this.inactiveColor
+          }
+          // 判断是否获取内部样式
+          if (style) {
+            if (this.$t.color.getFontColorStyle(color) !== '') {
+              return color
+            } else {
+              return ''
+            }
+          } else {
+            if (this.$t.color.getFontColorStyle(color) === '') {
+              return color
+            } else {
+              return ''
+            }
+          }
+        }
+      },
+      // 当前图标的颜色
+      elIconColor() {
+        return (index, style = true) => {
+          let currentItem = this.list[index]
+          let color = ''
+          if (index === this.value) {
+            color = currentItem['activeIconColor'] || this.activeIconColor
+          } else {
+            color = currentItem['inactiveIconColor'] || this.inactiveIconColor
+          }
+          // 判断是否获取内部样式
+          if (style) {
+            if (this.$t.color.getFontColorStyle(color) !== '') {
+              return color
+            } else {
+              return ''
+            }
+          } else {
+            if (this.$t.color.getFontColorStyle(color) === '') {
+              return color + ' tn-tabbar__content__item__icon--clip'
+            } else {
+              return ''
+            }
+          }
+        }
+      },
+      // 当前的图标
+      elIcon() {
+        return (index) => {
+          let currentItem = this.list[index]
+          if (index === this.value) {
+            return currentItem['activeIcon']
+          } else {
+            return currentItem['inactiveIcon']
+          }
+        }
+      },
+      // 突起部分item button对应的类
+      itemButtonClass() {
+        return (index) => {
+          let clazz = ''
+          if (this.list[index]['out']) {
+            clazz += 'tn-tabbar__content__item__button--out'
+            if (this.$t.color.getFontColorStyle(this.activeIconColor) === '') {
+              clazz += ` ${this.activeIconColor}`
+            }
+            if (this.value === index) {
+              clazz += ` tn-tabbar__content__item__button--out--animation--${this.animationMode}`
+            }
+          } else {
+            clazz += 'tn-tabbar__content__item__button'
+            if (this.value === index) {
+              clazz += ` tn-tabbar__content__item__button--animation--${this.animationMode}`
+            }
+          }
+          return clazz
+        }
+      },
+      // 突起部分item button样式
+      itemButtonStyle() {
+        return (index) => {
+          let style = {}
+          if (this.list[index]['out']) {
+            if (this.$t.color.getFontColorStyle(this.activeIconColor) !== '') {
+              style.backgroundColor = this.activeIconColor
+            }
+            style.width = `${this.outHeight - 35}rpx`
+            style.height = `${this.outHeight - 35}rpx`
+            style.top = `-${this.outHeight * 0.15}rpx`
+            
+            return style
+          }
+          return style
+        }
+      },
+      // 判断图标是否为图片
+      isImage() {
+        return (index) => {
+          const icon = this.list[index]['activeIcon']
+          // 只有包含了'/'就认为是图片
+          return icon.indexOf('/') !== -1
+        }
+      }
+    },
+    data() {
+      return {
+        // 当前突起的位置
+        outItemLeft: '50%',
+        // 当前设置了突起按钮的index
+        outItemIndex: -1,
+        // 每一个item的信息
+        tabbatItemInfo: []
+      }
+    },
+    watch: {
+      
+    },
+    created() {
+      this.getOutItemIndex()
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getTabbarItem()
+      })
+    },
+    methods: {
+      // 获取每一个item的信息
+      getTabbarItem() {
+        let query = uni.createSelectorQuery().in(this)
+        // 遍历获取信息
+        for (let i = 0; i < this.list.length; i++) {
+          query.select(`#tabbar_item_${i}`).fields({
+            size: true,
+            rect: true
+          })
+        }
+        query.exec(res => {
+          if (!res) {
+            setTimeout(() => {
+              this.getTabbarItem()
+            }, 10)
+            return
+          }
+          this.tabbatItemInfo = res.map((item) => {
+            return {
+              left: item.left,
+              width: item.width
+            }
+          })
+          this.updateOutItemLeft()
+        })
+      },
+      // 获取突起Item所在的index(如果存在)
+      getOutItemIndex() {
+        this.outItemIndex = this.list.findIndex((item) => {
+          return item.hasOwnProperty('out') && item.out
+        })
+      },
+      // 点击底部菜单时触发
+      async clickItemHandler(index) {
+        if (this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {
+          // 执行回调，同时传入索引当作参数
+          // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
+          // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
+          let beforeSwitch = this.beforeSwitch.bind(this.$t.$parent.call(this))(index)
+          // 判断是否返回了Promise
+          if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
+            await beforeSwitch.then(res => {
+              // Promise返回成功
+              this.switchTab(index)
+            }).catch(err => {
+              
+            })
+          } else if (beforeSwitch === true) {
+            this.switchTab(index)
+          }
+        } else {
+          this.switchTab(index)
+        }
+      },
+      // 切换tab
+      switchTab(index) {
+        // 发出事件和修改v-model绑定的值
+        this.$emit('change', index)
+        this.$emit('input', index)
+      },
+      // 设置突起的位置
+      updateOutItemLeft() {
+        // 查找出需要突起的元素
+        const index = this.list.findIndex((item) => {
+          return item.out
+        })
+        if (index !== -1) {
+          this.outItemLeft = this.tabbatItemInfo[index].left + (this.tabbatItemInfo[index].width / 2) + 'px'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-tabbar {
+    
+    &__content {
+      box-sizing: content-box;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      z-index: 1024;
+      
+      &__out {
+        position: absolute;
+        z-index: 4;
+        border-radius: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        
+        &--shadow {
+          box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
+          
+          &::before {
+            content: " ";
+            position: absolute;
+            width: 100%;
+            height: 50rpx;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+            background-color: inherit;
+          }
+        }
+        
+        &--animation {
+          &--scale {
+            transform-origin: 50% 100%;
+            animation:tabbar-content-out-click 0.2s forwards 1 ease-in-out;
+          }
+        }
+      }
+      
+      &__item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: center;
+        height: 100%;
+        position: relative;
+        
+        &__button {
+          margin-bottom: 10rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          
+          &--out {
+            margin-bottom: 10rpx;
+            border-radius: 50%;
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 6;
+            
+            &--animation {
+              &--scale {
+                transform-origin: 50% 100%;
+                animation:tabbar-item-button-out-click 0.2s forwards 1;
+              }
+            }
+          }
+          
+          &--animation {
+            &--scale {
+              .tn-tabbar__content__item__icon, .tn-tabbar__content__item__image {
+                transform-origin: 50% 100%;
+                animation:tabbar-item-button-click 0.2s forwards 1;
+              }
+            }
+          }
+        }
+        
+        &__icon {
+          
+          &--clip {
+            -webkit-background-clip: text;
+            color: transparent !important;
+          }
+        }
+        
+        &__text {
+          width: 100%;
+          font-size: 26rpx;
+          line-height: 28rpx;
+          text-align: center;
+          margin-bottom: 10rpx;
+          z-index: 10;
+          transition: all 0.2s ease-in-out;
+        }
+        
+        &--out {
+          height: calc(100% - 1px);
+        }
+      }
+    }
+    
+    &--fixed {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    
+    &--shadow {
+      box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
+    }
+  }
+  
+  /* 点击动画 start */
+  
+  @keyframes tabbar-item-button-click{
+    from{
+      transform: scale(0.8);
+    }
+    to{
+      transform: scale(1);
+    }
+  }
+  
+  @keyframes tabbar-item-button-out-click {
+    0%{
+      transform: translateY(0) scale(1);
+    }
+    50%{
+      transform: translateY(-10rpx) scale(1.2);
+    }
+    100%{
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  @keyframes tabbar-content-out-click {
+    0%{
+      transform: translateX(-50%) translateY(0) scale(1);
+    }
+    50% {
+      transform: translateX(-50%) translateY(-10rpx) scale(1.1);
+    }
+    100% {
+      transform: translateX(-50%) translateY(0) scale(1);
+    }
+  }
+  
+  /* 点击动画 end */
+</style>
diff --git a/tuniao-ui/components/tn-table/tn-table.vue b/tuniao-ui/components/tn-table/tn-table.vue
new file mode 100644
index 0000000..8b79535
--- /dev/null
+++ b/tuniao-ui/components/tn-table/tn-table.vue
@@ -0,0 +1,100 @@
+<template>
+  <view class="tn-table-class tn-table" :class="[tableClass]" :style="[tableStyle]">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-table',
+    props: {
+      // 边框宽度
+      borderWidth: {
+        type: [String, Number],
+        default: ''
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: ''
+      },
+      // 显示上边框
+      borderTop: {
+        type: Boolean,
+        default: true
+      },
+      // 显示右边框
+      borderRight: {
+        type: Boolean,
+        default: false
+      },
+      // 显示下边框
+      borderBottom: {
+        type: Boolean,
+        default: false
+      },
+      // 显示左边框
+      borderLeft: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      parentData() {
+        return [this.borderWidth, this.borderColor]
+      },
+      tableClass() {
+        let clazz = ''
+        return clazz
+      },
+      tableStyle() {
+        let style = {}
+        if (this.borderWidth !== '') {
+          style.borderWidth = this.$t.string.getLengthUnitValue(this.borderWidth)
+        }
+        if (this.borderColor) {
+          style.borderColor = this.borderColor
+        }
+        if (this.borderLeft) {
+          style.borderLeftStyle = 'solid'
+        }
+        if (this.borderRight) {
+          style.borderRightStyle = 'solid'
+        }
+        if (this.borderTop) {
+          style.borderTopStyle = 'solid'
+        }
+        if (this.borderBottom) {
+          style.borderBottomStyle = 'solid'
+        }
+        return style
+      }
+    },
+    data() {
+      return {}
+    },
+    created() {
+      this.children = []
+    },
+    watch: {
+      parentData() {
+        // 更新子组件的数据
+        if (this.children.length) {
+          this.children.map((child) => {
+            typeof(child.updateParentData) === 'function' && child.updateParentData()
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-table {
+    box-sizing: border-box;
+    
+    border-width: 1rpx;
+    border-style: none;
+    border-color: #AAAAAA;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tabs-cool/tn-tabs-cool.vue b/tuniao-ui/components/tn-tabs-cool/tn-tabs-cool.vue
new file mode 100644
index 0000000..a04c7b4
--- /dev/null
+++ b/tuniao-ui/components/tn-tabs-cool/tn-tabs-cool.vue
@@ -0,0 +1,349 @@
+<template>
+  <view class="tn-tabs-class tn-tabs" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $t.string.getLengthUnitValue(top, 'px')}">
+    
+    <!-- _tgetRect()对组件根节点无效，因为写了.in(this)，故这里获取内层接点尺寸 -->
+    <view :id="id">
+      <scroll-view scroll-x class="tn-tabs__scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
+        <view class="tn-tabs__scroll-view__box" :class="{'tn-tabs__scroll-view--flex': !isScroll}">
+          <!-- item -->
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            :id="'tn-tabs__scroll-view__item-' + index"
+            class="tn-tabs__scroll-view__item tn-text-ellipsis"
+            :style="[tabItemStyle(index)]"
+            @tap="clickTab(index)"
+          >
+            <tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
+            {{ item[name] || item['name'] }}
+          </view>
+          
+          <!-- 底部滑块 -->
+          <view v-if="showBar" class="tn-tabs__bar tn-icon-starry" :style="[tabBarStyle]"></view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColor],
+    name: 'tn-tabs',
+    props: {
+      // 标签列表
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 列表数据tab名称的属性
+      name: {
+        type: String,
+        default: 'name'
+      },
+      // 列表数据微标数量的属性
+      count: {
+        type: String,
+        default: 'count'
+      },
+      // 当前活动的tab索引
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 菜单是否可以滑动
+      isScroll: {
+        type: Boolean,
+        default: true
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 80
+      },
+      // 距离顶部的距离(px)
+      top: {
+        type: Number,
+        default: 0
+      },
+      // item的宽度
+      itemWidth: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 过渡动画时长
+      duration: {
+        type: Number,
+        default: 0.3
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 未被选中时的颜色
+      inactiveColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 选中的item样式
+      activeItemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 未选中的item样式
+      inactiveItemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示底部滑块
+      showBar: {
+        type: Boolean,
+        default: true
+      },
+      // 底部滑块的宽度
+      barWidth: {
+        type: Number,
+        default: 40
+      },
+      // 底部滑块的高度
+      barHeight: {
+        type: Number,
+        default: 6
+      },
+      // 自定义底部滑块的样式
+      barStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 单个tab的左右内边距
+      gutter: {
+        type: Number,
+        default: 30
+      },
+      // 微标的偏移数[top, right]
+      badgeOffset: {
+        type: Array,
+        default() {
+          return [20, 22]
+        }
+      },
+      // 是否加粗字体
+      bold: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 底部滑块样式
+      tabBarStyle() {
+        let style = {
+          // width: this.$t.string.getLengthUnitValue(this.barWidth),
+          // height: this.$t.string.getLengthUnitValue(this.barHeight),
+          // borderRadius: `${this.barHeight / 2}rpx`,
+          // backgroundColor: this.activeColor,
+          opacity: this.barMoveFirst ? 0 : 1,
+          transform: `translate(${this.scrollBarLeft}px, -100%)`,
+          transitionDuration: this.barMoveFirst ? '0s' : `${this.duration}s`
+        }
+        Object.assign(style, this.barStyle)
+        return style
+      },
+      // tabItem样式
+      tabItemStyle() {
+        return index => {
+          let style = {
+            width: this.$t.string.getLengthUnitValue(this.itemWidth),
+            height: this.$t.string.getLengthUnitValue(this.height),
+            lineHeight: this.$t.string.getLengthUnitValue(this.height),
+            fontSize: this.fontSizeStyle || '28rpx',
+            padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
+            flex: this.isScroll ? 'auto' : '1',
+            transitionDuration: `${this.duration}s`
+          }
+          if (index === this.currentIndex) {
+            if (this.bold) {
+              style.fontWeight = 'bold'
+            }
+            style.color = this.activeColor
+            Object.assign(style, this.activeItemStyle)
+          } else {
+            style.color = this.inactiveColor
+            Object.assign(style, this.inactiveItemStyle)
+          }
+          return style
+        }
+      }
+    },
+    data() {
+      return {
+        // id值
+        id: this.$t.uuid(),
+        // 滚动scroll-view的左边距离
+        scrollLeft: 0,
+        // 存放查询后tab菜单的节点信息
+        tabQueryInfo: [],
+        // 组件宽度
+        componentWidth: 0,
+        // 底部滑块的移动距离
+        scrollBarLeft: 0,
+        // 组件到屏幕左边的巨鹿
+        componentLeft: 0,
+        // 当前选中的itemIndex
+        currentIndex: this.current,
+        // 标记底部滑块是否第一次移动，第一次移动的时候不触发动画
+        barMoveFirst: true
+      }
+    },
+    watch: {
+      // 监听tab的变化，重新计算tab菜单信息
+      list(newValue, oldValue) {
+        // list变化时，重置内部索引，防止出现超过数据边界的问题
+        if (newValue.length !== oldValue.length) this.currentIndex = 0
+        this.$nextTick(() => {
+          this.init()
+        })
+      },
+      current: {
+        handler(val) {
+          this.$nextTick(() => {
+            this.currentIndex = val
+            this.scrollByIndex()
+          })
+        },
+        immediate: true
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      // 初始化变量
+      async init() {
+        // 获取tabs组件的信息
+        let tabRect = await this._tGetRect('#' + this.id)
+        // 计算组件的宽度
+        this.componentLeft = tabRect.left
+        this.componentWidth = tabRect.width
+        this.getTabRect()
+      },
+      // 点击tab菜单
+      clickTab(index) {
+        if (index === this.currentIndex) return
+        this.$emit('change', index)
+      },
+      // 查询tab的布局信息
+      getTabRect() {
+        let query = uni.createSelectorQuery().in(this)
+        // 遍历所有的tab
+        for (let i = 0; i < this.list.length; i++) {
+          query.select(`#tn-tabs__scroll-view__item-${i}`).fields({
+            size: true,
+            rect: true
+          })
+        }
+        query.exec((res) => {
+          this.tabQueryInfo = res
+          // 初始滚动条和底部滑块的位置
+          this.scrollByIndex()
+        })
+      },
+      // 滚动scrollView，让活动的tab处于屏幕中间
+      scrollByIndex() {
+        // 当前获取tab的布局信息
+        let tabInfo = this.tabQueryInfo[this.currentIndex]
+        if (!tabInfo) return
+        
+        // 活动tab的宽度
+        let tabWidth = tabInfo.width
+        // 活动item的左边到组件左边的距离
+        let offsetLeft = tabInfo.left - this.componentLeft
+        // 计算scroll-view移动的距离
+        let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2
+        this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft
+        
+        // 计算当前滑块需要移动的距离，当前活动item的中点到左边的距离减去滑块宽度的一半
+        let left = tabInfo.left + tabInfo.width / 2 - this.componentLeft
+        
+        // 计算当前活跃item到组件左边的距离
+        this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2
+        
+        // 防止在计算时出错，所以延迟执行标记不是第一次移动
+        if (this.barMoveFirst) {
+          setTimeout(() => {
+            this.barMoveFirst = false
+          }, 100)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* #ifndef APP-NVUE */
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  /* #endif */
+  
+  /* #ifdef H5 */
+  // 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+  scroll-view ::v-deep ::-webkit-scrollbar {
+  	display: none;
+  	width: 0 !important;
+  	height: 0 !important;
+  	-webkit-appearance: none;
+  	background: transparent;
+  }
+  /* #endif */
+  
+  .tn-tabs {
+    &__scroll-view {
+      position: relative;
+      width: 100%;
+      white-space: nowrap;
+      
+      &__box {
+        position: relative;
+        /* #ifdef MP-TOUTIAO */
+        white-space: nowrap;
+        /* #endif */
+      }
+      
+      &__item {
+        position: relative;
+        /* #ifndef APP-NVUE */
+        display: inline-block;
+        /* #endif */
+        text-align: center;
+        transition-property: background-color, color;
+      }
+      
+      &--flex {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+    
+    &__bar {
+      position: absolute;
+      bottom: -50rpx;
+      font-size: 40rpx;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue b/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue
new file mode 100644
index 0000000..d3e59fe
--- /dev/null
+++ b/tuniao-ui/components/tn-tabs-swiper/tn-tabs-swiper.vue
@@ -0,0 +1,444 @@
+<template>
+  <view class="tn-tabs-swiper-class tn-tabs-swiper" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $t.string.getLengthUnitValue(top, 'px'), zIndex: zIndex}">
+    
+    <scroll-view scroll-x class="tn-tabs-swiper__scroll-view" :scroll-left="scrollLeft" scroll-with-animation :style="{zIndex: zIndex + 1}">
+      <view class="tn-tabs-swiper__scroll-view__box" :class="{'tn-tabs-swiper__scroll-view--flex': !isScroll}">
+        
+        <!-- item -->
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          :id="'tn-tabs-swiper__scroll-view__item-' + index"
+          class="tn-tabs-swiper__scroll-view__item tn-text-ellipsis"
+          :style="[tabItemStyle(index)]"
+          @tap="emit(index)"
+        >
+          <tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
+          {{ item[name] || item['name'] }}
+        </view>
+        
+        <!-- 底部滑块 -->
+        <view v-if="showBar" class="tn-tabs-swiper__bar" :style="[tabBarStyle]"></view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  const { windowWidth } = uni.getSystemInfoSync()
+  
+  export default {
+    mixins: [componentsColor],
+    name: 'tn-tabs-swiper',
+    props: {
+      // 标签列表
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 列表数据tab名称的属性
+      name: {
+        type: String,
+        default: 'name'
+      },
+      // 列表数据微标数量的属性
+      count: {
+        type: String,
+        default: 'count'
+      },
+      // 当前活动的tab索引
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 菜单是否可以滑动
+      isScroll: {
+        type: Boolean,
+        default: true
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 80
+      },
+      // 距离顶部的距离(px)
+      top: {
+        type: Number,
+        default: 0
+      },
+      // item的高度
+      itemWidth: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // swiper的宽度
+      swiperWidth: {
+        type: Number,
+        default: 750
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 未被选中时的颜色
+      inactiveColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 选中的item样式
+      activeItemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示底部滑块
+      showBar: {
+        type: Boolean,
+        default: true
+      },
+      // 底部滑块的宽度
+      barWidth: {
+        type: Number,
+        default: 40
+      },
+      // 底部滑块的高度
+      barHeight: {
+        type: Number,
+        default: 6
+      },
+      // 自定义底部滑块的样式
+      barStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 单个tab的左右内边距
+      gutter: {
+        type: Number,
+        default: 30
+      },
+      // 微标的偏移数[top, right]
+      badgeOffset: {
+        type: Array,
+        default() {
+          return [20, 22]
+        }
+      },
+      // 是否加粗字体
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 滚动至中心目标类型
+      autoCenterMode: {
+        type: String,
+        default: 'window'
+      },
+      zIndex: {
+        type: Number,
+        default: 1
+      }
+    },
+    computed: {
+      currentIndex() {
+        const current = Number(this.current)
+        // 判断是否超出
+        if (current > this.list.length - 1) {
+          return this.list.length - 1
+        }
+        if (current < 0) return 0
+        return current
+      },
+      // 滑块需要移动的距离
+      scrollBarLeft() {
+        return Number(this.tabLineDx) + Number(this.tabLineAddDx)
+      },
+      // 滑块宽度转换为px
+      barWidthPx() {
+        return uni.upx2px(this.barWidth)
+      },
+      // 将swiper宽度转换为px
+      swiperWidthPx() {
+        return uni.upx2px(this.swiperWidth)
+      },
+      // tab样式
+      tabItemStyle() {
+        return index => {
+          let style = {
+            height: this.$t.string.getLengthUnitValue(this.height),
+            lineHeight: this.$t.string.getLengthUnitValue(this.height),
+            fontSize: this.fontSizeStyle || '28rpx',
+            color: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor,
+            padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
+            flex: this.isScroll ? 'auto' : '1',
+            zIndex: this.zIndex + 2
+          }
+          if (index === this.currentIndex) {
+            if (this.bold) {
+              style.fontWeight = 'bold'
+            }
+            Object.assign(style, this.activeItemStyle)
+          }
+          return style
+        }
+      },
+      // 底部滑块样式
+      tabBarStyle() {
+        let style = {
+          width: this.$t.string.getLengthUnitValue(this.barWidth),
+          height: this.$t.string.getLengthUnitValue(this.barHeight),
+          borderRadius: `${this.barHeight / 2}rpx`,
+          backgroundColor: this.activeColor,
+          left: this.scrollBarLeft + 'px'
+        }
+        Object.assign(style, this.barStyle)
+        return style
+      },
+    },
+    data() {
+      return {
+        // 滚动scroll-view的左边滚动距离
+        scrollLeft: 0,
+        // 存放tab菜单节点信息
+        tabsInfo: [],
+        // 屏幕宽度
+        windowWidth: 0,
+        // 滑动动画结束后对应的标签Index
+        animationFinishCurrent: this.current,
+        // 组件的宽度
+        componentsWidth: 0,
+        // 移动距离
+        tabLineAddDx: 0,
+        tabLineDx: 0,
+        // 颜色渐变数组
+        colorGradientArr: [],
+        // 两个颜色之间的渐变等分
+        colorStep: 100,
+      }
+    },
+    watch: {
+      current(value) {
+        this.change(value)
+        this.setFinishCurrent(value)
+      },
+      list() {
+        this.$nextTick(() => {
+          this.init()
+        })
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      // 初始化
+      async init() {
+        await this.getTabsInfo()
+        this.countLine3Dx()
+        this.getQuery(() => {
+          this.setScrollViewToCenter()
+        })
+        // 获取渐变颜色数组
+        this.colorGradientArr = this.$t.color.colorGradient(this.inactiveColor, this.activeColor, this.colorStep)
+      },
+      // 发送事件
+      emit(index) {
+        this.$emit('change', index)
+      },
+      // tabs发生变化
+      change() {
+        this.setScrollViewToCenter()
+      },
+      // 获取各个tab的节点信息
+      getTabsInfo() {
+        return new Promise((resolve, reject) => {
+          let view = uni.createSelectorQuery().in(this)
+          for (let i = 0; i < this.list.length; i++) {
+            view.select('#tn-tabs-swiper__scroll-view__item-'+i).boundingClientRect()
+          }
+          view.exec(res => {
+            const arr = []
+            for (let i = 0; i < res.length; i++) {
+              // 添加颜色属性
+              res[i].color = this.inactiveColor
+              if (i === this.currentIndex) res[i].color = this.activeColor
+              arr.push(res[i])
+            }
+            this.tabsInfo = arr
+            resolve()
+          })
+        })
+      },
+      // 查询components信息
+      getQuery(cb) {
+        try {
+          let view = uni.createSelectorQuery().in(this).select('.tn-tabs-swiper')
+          view.fields({
+              size: true
+            },
+            data => {
+              if (data) {
+                this.componentsWidth = data.width
+                if (cb && typeof cb === 'function') cb(data)
+              } else {
+                this.getQuery(cb)
+              }
+            }
+          ).exec()
+        } catch (e) {
+          this.componentsWidth = windowWidth
+        }
+      },
+      // 当swiper滑动结束的时候，计算滑块最终停留的位置
+      countLine3Dx() {
+        const tab = this.tabsInfo[this.animationFinishCurrent]
+        // 让滑块中心点和当前tab中心重合
+        if (tab) this.tabLineDx = tab.left + tab.width / 2 - this.barWidthPx / 2 - this.tabsInfo[0].left
+      },
+      // 把活动的tab移动到屏幕中心
+      setScrollViewToCenter() {
+        let tab = this.tabsInfo[this.animationFinishCurrent]
+        if (tab) {
+          let tabCenter = tab.left + tab.width / 2
+          let parentWidth
+          // 活动tab移动到中心时，以屏幕还是tab组件宽度为基准
+          if (this.autoCenterMode === 'window') {
+            parentWidth = windowWidth
+          } else {
+            parentWidth = this.componentsWidth
+          }
+          this.scrollLeft = tabCenter - parentWidth / 2
+        }
+      },
+      // 设置偏移位置
+      setDx(dx) {
+        
+        // 计算下一个标签的步进值
+        let nextIndexStep = Math.ceil(Math.abs(dx / this.swiperWidthPx))
+        let nextTabIndex = dx > 0 ? this.animationFinishCurrent + 1 : this.animationFinishCurrent - 1
+        // 处理索引超出边界问题
+        nextTabIndex = nextTabIndex <= 0 ? 0 : nextTabIndex
+        nextTabIndex = nextTabIndex >= this.list.length ? this.list.length - 1 : nextTabIndex
+        
+        // 当前tab中心点x轴坐标
+        let currentTab = this.tabsInfo[this.animationFinishCurrent]
+        let currentTabX = currentTab.left + currentTab.width / 2
+        
+        // 下一个tab中心点x轴坐标
+        let nextTab = this.tabsInfo[nextTabIndex]
+        let nextTabX = nextTab.left + nextTab.width / 2
+        
+        // 两个tab之间的距离
+        let distanceX = Math.abs(nextTabX - currentTabX)
+        this.tabLineAddDx = (dx / this.swiperWidthPx) * distanceX
+        this.setTabColor(this.animationFinishCurrent, nextTabIndex, dx)
+      },
+      // 设置tab的颜色
+      setTabColor(currentTabIndex, nextTabIndex, dx) {
+        let nextIndexStep = Math.ceil(Math.abs(dx / this.swiperWidthPx))
+        if (Math.abs(dx) > this.swiperWidthPx) {
+          dx = dx > 0 ? dx - (this.swiperWidthPx * (nextIndexStep - 1)) : dx + (this.swiperWidthPx * (nextIndexStep - 1))
+        }
+        let colorIndex = Math.abs(Math.ceil((dx / this.swiperWidthPx) * 100))
+        let colorLength = this.colorGradientArr.length
+        // 处理超出索引边界
+        colorIndex = colorIndex >= colorLength ? colorLength - 1 : colorIndex <= 0 ? 0 : colorIndex
+        if (nextIndexStep > 1) {
+          // 设置下一个tab的颜色
+          // 设置之前tab的颜色为默认颜色
+          if (dx > 0) {
+            this.tabsInfo[nextTabIndex + (nextIndexStep - 1) > this.tabsInfo.length - 1 ? this.tabsInfo.length - 1 : nextTabIndex + (nextIndexStep - 1)].color = this.colorGradientArr[colorIndex]
+            this.tabsInfo[nextTabIndex + (nextIndexStep - 2) > this.tabsInfo.length - 1 ? this.tabsInfo.length - 1 : nextTabIndex + (nextIndexStep - 2)].color = this.colorGradientArr[colorLength - 1 - colorIndex]
+          } else {
+            this.tabsInfo[nextTabIndex - (nextIndexStep - 1) < 0 ? 0 : nextTabIndex - (nextIndexStep - 1)].color = this.colorGradientArr[colorIndex]
+            this.tabsInfo[nextTabIndex - (nextIndexStep - 2) < 0 ? 0 : nextTabIndex - (nextIndexStep - 2)].color = this.colorGradientArr[colorLength - 1 - colorIndex]
+          }
+        } else {
+          // 设置下一个tab的颜色
+          this.tabsInfo[nextTabIndex].color = this.colorGradientArr[colorIndex]
+          // 设置当前tab的颜色
+          this.tabsInfo[currentTabIndex].color = this.colorGradientArr[colorLength - 1 - colorIndex]
+        }
+        
+      },
+      // swiper滑动结束
+      setFinishCurrent(current) {
+        // 如果滑动的索引不一致，修改tab颜色变化，因为可能会有直接点击tab的情况
+        this.tabsInfo.map((item, index) => {
+          if (current == index) item.color = this.activeColor
+          else item.color = this.inactiveColor
+          return item
+        })
+        this.tabLineAddDx = 0
+        this.animationFinishCurrent = current
+        this.countLine3Dx()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* #ifndef APP-NVUE */
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  /* #endif */
+  
+  /* #ifdef H5 */
+  // 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+  scroll-view ::v-deep ::-webkit-scrollbar {
+  	display: none;
+  	width: 0 !important;
+  	height: 0 !important;
+  	-webkit-appearance: none;
+  	background: transparent;
+  }
+  /* #endif */
+  
+  .tn-tabs-swiper {
+    &__scroll-view {
+      position: relative;
+      width: 100%;
+      white-space: nowrap;
+      
+      &__box {
+        position: relative;
+        /* #ifdef MP-TOUTIAO */
+        white-space: nowrap;
+        /* #endif */
+      }
+      
+      &__item {
+        position: relative;
+        /* #ifndef APP-NVUE */
+        display: inline-block;
+        /* #endif */
+        text-align: center;
+        transition-property: background-color, color;
+      }
+      
+      &--flex {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+    
+    &__bar {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-tabs/tn-tabs.vue b/tuniao-ui/components/tn-tabs/tn-tabs.vue
new file mode 100644
index 0000000..3695351
--- /dev/null
+++ b/tuniao-ui/components/tn-tabs/tn-tabs.vue
@@ -0,0 +1,348 @@
+<template>
+  <view class="tn-tabs-class tn-tabs" :class="[backgroundColorClass]" :style="{backgroundColor: backgroundColorStyle, marginTop: $t.string.getLengthUnitValue(top, 'px')}">
+    
+    <!-- _tgetRect()对组件根节点无效，因为写了.in(this)，故这里获取内层接点尺寸 -->
+    <view :id="id">
+      <scroll-view scroll-x class="tn-tabs__scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
+        <view class="tn-tabs__scroll-view__box" :class="{'tn-tabs__scroll-view--flex': !isScroll}">
+          <!-- item -->
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            :id="'tn-tabs__scroll-view__item-' + index"
+            class="tn-tabs__scroll-view__item tn-text-ellipsis"
+            :style="[tabItemStyle(index)]"
+            @tap="clickTab(index)"
+          >
+            <tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
+            {{ item[name] || item['name'] }}
+          </view>
+          
+          <!-- 底部滑块 -->
+          <view v-if="showBar" class="tn-tabs__bar" :style="[tabBarStyle]"></view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColor from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [componentsColor],
+    name: 'tn-tabs',
+    props: {
+      // 标签列表
+      list: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 列表数据tab名称的属性
+      name: {
+        type: String,
+        default: 'name'
+      },
+      // 列表数据微标数量的属性
+      count: {
+        type: String,
+        default: 'count'
+      },
+      // 当前活动的tab索引
+      current: {
+        type: Number,
+        default: 0
+      },
+      // 菜单是否可以滑动
+      isScroll: {
+        type: Boolean,
+        default: true
+      },
+      // 高度
+      height: {
+        type: Number,
+        default: 80
+      },
+      // 距离顶部的距离(px)
+      top: {
+        type: Number,
+        default: 0
+      },
+      // item的宽度
+      itemWidth: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 过渡动画时长
+      duration: {
+        type: Number,
+        default: 0.3
+      },
+      // 选中时的颜色
+      activeColor: {
+        type: String,
+        default: '#01BEFF'
+      },
+      // 未被选中时的颜色
+      inactiveColor: {
+        type: String,
+        default: '#080808'
+      },
+      // 选中的item样式
+      activeItemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 未选中的item样式
+      inactiveItemStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 是否显示底部滑块
+      showBar: {
+        type: Boolean,
+        default: true
+      },
+      // 底部滑块的宽度
+      barWidth: {
+        type: Number,
+        default: 40
+      },
+      // 底部滑块的高度
+      barHeight: {
+        type: Number,
+        default: 6
+      },
+      // 自定义底部滑块的样式
+      barStyle: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 单个tab的左右内边距
+      gutter: {
+        type: Number,
+        default: 30
+      },
+      // 微标的偏移数[top, right]
+      badgeOffset: {
+        type: Array,
+        default() {
+          return [20, 22]
+        }
+      },
+      // 是否加粗字体
+      bold: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 底部滑块样式
+      tabBarStyle() {
+        let style = {
+          width: this.$t.string.getLengthUnitValue(this.barWidth),
+          height: this.$t.string.getLengthUnitValue(this.barHeight),
+          borderRadius: `${this.barHeight / 2}rpx`,
+          backgroundColor: this.activeColor,
+          opacity: this.barMoveFirst ? 0 : 1,
+          transform: `translate(${this.scrollBarLeft}px, -100%)`,
+          transitionDuration: this.barMoveFirst ? '0s' : `${this.duration}s`
+        }
+        Object.assign(style, this.barStyle)
+        return style
+      },
+      // tabItem样式
+      tabItemStyle() {
+        return index => {
+          let style = {
+            width: this.$t.string.getLengthUnitValue(this.itemWidth),
+            height: this.$t.string.getLengthUnitValue(this.height),
+            lineHeight: this.$t.string.getLengthUnitValue(this.height),
+            fontSize: this.fontSizeStyle || '28rpx',
+            padding: this.isScroll ? `0 ${this.gutter}rpx` : '',
+            flex: this.isScroll ? 'auto' : '1',
+            transitionDuration: `${this.duration}s`
+          }
+          if (index === this.currentIndex) {
+            if (this.bold) {
+              style.fontWeight = 'bold'
+            }
+            style.color = this.activeColor
+            Object.assign(style, this.activeItemStyle)
+          } else {
+            style.color = this.inactiveColor
+            Object.assign(style, this.inactiveItemStyle)
+          }
+          return style
+        }
+      }
+    },
+    data() {
+      return {
+        // id值
+        id: this.$t.uuid(),
+        // 滚动scroll-view的左边距离
+        scrollLeft: 0,
+        // 存放查询后tab菜单的节点信息
+        tabQueryInfo: [],
+        // 组件宽度
+        componentWidth: 0,
+        // 底部滑块的移动距离
+        scrollBarLeft: 0,
+        // 组件到屏幕左边的巨鹿
+        componentLeft: 0,
+        // 当前选中的itemIndex
+        currentIndex: this.current,
+        // 标记底部滑块是否第一次移动，第一次移动的时候不触发动画
+        barMoveFirst: true
+      }
+    },
+    watch: {
+      // 监听tab的变化，重新计算tab菜单信息
+      list(newValue, oldValue) {
+        // list变化时，重置内部索引，防止出现超过数据边界的问题
+        if (newValue.length !== oldValue.length) this.currentIndex = 0
+        this.$nextTick(() => {
+          this.init()
+        })
+      },
+      current: {
+        handler(val) {
+          this.$nextTick(() => {
+            this.currentIndex = val
+            this.scrollByIndex()
+          })
+        },
+        immediate: true
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      // 初始化变量
+      async init() {
+        // 获取tabs组件的信息
+        let tabRect = await this._tGetRect('#' + this.id)
+        // 计算组件的宽度
+        this.componentLeft = tabRect.left
+        this.componentWidth = tabRect.width
+        this.getTabRect()
+      },
+      // 点击tab菜单
+      clickTab(index) {
+        if (index === this.currentIndex) return
+        this.$emit('change', index)
+      },
+      // 查询tab的布局信息
+      getTabRect() {
+        let query = uni.createSelectorQuery().in(this)
+        // 遍历所有的tab
+        for (let i = 0; i < this.list.length; i++) {
+          query.select(`#tn-tabs__scroll-view__item-${i}`).fields({
+            size: true,
+            rect: true
+          })
+        }
+        query.exec((res) => {
+          this.tabQueryInfo = res
+          // 初始滚动条和底部滑块的位置
+          this.scrollByIndex()
+        })
+      },
+      // 滚动scrollView，让活动的tab处于屏幕中间
+      scrollByIndex() {
+        // 当前获取tab的布局信息
+        let tabInfo = this.tabQueryInfo[this.currentIndex]
+        if (!tabInfo) return
+        
+        // 活动tab的宽度
+        let tabWidth = tabInfo.width
+        // 活动item的左边到组件左边的距离
+        let offsetLeft = tabInfo.left - this.componentLeft
+        // 计算scroll-view移动的距离
+        let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2
+        this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft
+        
+        // 计算当前滑块需要移动的距离，当前活动item的中点到左边的距离减去滑块宽度的一半
+        let left = tabInfo.left + tabInfo.width / 2 - this.componentLeft
+        
+        // 计算当前活跃item到组件左边的距离
+        this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2
+        
+        // 防止在计算时出错，所以延迟执行标记不是第一次移动
+        if (this.barMoveFirst) {
+          setTimeout(() => {
+            this.barMoveFirst = false
+          }, 100)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /* #ifndef APP-NVUE */
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  /* #endif */
+  
+  /* #ifdef H5 */
+  // 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+  scroll-view ::v-deep ::-webkit-scrollbar {
+  	display: none;
+  	width: 0 !important;
+  	height: 0 !important;
+  	-webkit-appearance: none;
+  	background: transparent;
+  }
+  /* #endif */
+  
+  .tn-tabs {
+    &__scroll-view {
+      position: relative;
+      width: 100%;
+      white-space: nowrap;
+      
+      &__box {
+        position: relative;
+        /* #ifdef MP-TOUTIAO */
+        white-space: nowrap;
+        /* #endif */
+      }
+      
+      &__item {
+        position: relative;
+        /* #ifndef APP-NVUE */
+        display: inline-block;
+        /* #endif */
+        text-align: center;
+        transition-property: background-color, color;
+      }
+      
+      &--flex {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+    
+    &__bar {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tag/tn-tag.vue b/tuniao-ui/components/tn-tag/tn-tag.vue
new file mode 100644
index 0000000..180ca59
--- /dev/null
+++ b/tuniao-ui/components/tn-tag/tn-tag.vue
@@ -0,0 +1,223 @@
+<template>
+  <view
+    class="tn-tag-class tn-tag"
+    :class="[
+      tagClass,
+      backgroundColorClass,
+      fontColorClass
+    ]"
+    :style="[tagStyle]"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    mixins: [ componentsColorMixin ],
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    name: 'tn-tag',
+    props: {
+      // 序号，用于区分多个标签
+      index: {
+        type: [Number, String],
+        default: '0'
+      },
+      // 形状 圆角 radius 椭圆  circle 左半圆 circleLeft 右半圆 circleRight
+      shape: {
+        type: String,
+        default: ''
+      },
+      // 标签大小 sm lg
+      size: {
+        type: String,
+        default: ''
+      },
+      // 宽度
+      width: {
+        type: String,
+        default: ''
+      },
+      // 高度
+      height: {
+        type: String,
+        default: ''
+      },
+      // 内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 外边距
+      margin: {
+        type: String,
+        default: '0'
+      },
+      // 是否镂空
+      plain: {
+        type: Boolean,
+        default: false
+      },
+      // 是否将元素基点设置在左边
+      originLeft: {
+        type: Boolean,
+        default: false
+      },
+      // 是否将元素基点设置在右边
+      originRight: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      tagClass() {
+        let clazz = ''
+        // 设置标签的形状
+        switch(this.shape) {
+          case 'radius':
+            clazz += ' tn-radius'
+            break
+          case 'circle':
+            clazz += ' tn-round'
+            break
+          case 'circleLeft':
+            clazz += ' tn-tag--fillet-left'
+            break
+          case 'circleRight':
+            clazz += ' tn-tag--fillet-right'
+            break
+        }
+        
+        // 设置为镂空并且设置镂空便可才进行设置
+        if (this.plain) {
+          clazz += ' tn-tag--plain tn-border-solid'
+          if (this.backgroundColor !== '' && this.backgroundColor.includes('tn-bg')) {
+            const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
+            clazz += ` tn-border-${color}`
+          }
+        }
+        
+        // 设置基准点
+        if (this.originLeft) {
+          clazz += ' tn-tag--origin-left'
+        }
+        if (this.originRight) {
+          clazz += ' tn-tag--origin-right'
+        }
+        
+        return clazz
+      },
+      tagStyle() {
+        let style = {}
+        switch(this.size) {
+          case 'sm':
+            style.padding = '0 12rpx'
+            style.fontSize = '20rpx'
+            style.height = '32rpx'
+            break
+          case 'lg':
+            style.padding = '0 20rpx'
+            style.fontSize = '28rpx'
+            style.height = '62rpx'
+            break
+          default:
+            style.padding = '0 16rpx'
+            style.fontSize = '24rpx'
+            style.height = '48rpx'
+            break
+        }
+        
+        style.width = this.width || '120rpx'
+        style.height = this.height || style.height
+        
+        style.padding = this.padding || style.padding
+        if (this.margin) {
+          style.margin = this.margin
+        }
+        
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSize !== 0) {
+          style.fontSize = this.fontSize + this.fontUnit
+        }
+
+        if (!this.backgroundColorClass) {
+          style.backgroundColor = !this.plain ? (this.backgroundColorStyle || '#FFFFFF') : ''
+          if (this.plain) {
+            style.borderColor = (this.backgroundColorStyle || '#080808')
+          }
+        }
+        
+        
+        
+        return style
+      },
+    },
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick() {
+        this.$emit('click', {
+          index: Number(this.index)
+        })
+        this.$emit('tap', {
+          index: Number(this.index)
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-tag {
+    vertical-align: middle;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    white-space: nowrap;
+    // color: #FFFFFF;
+    
+    &--fillet-left {
+      border-radius: 50rpx 0 0 50rpx;
+    }
+    
+    &--fillet-right {
+      border-radius: 0 50rpx 50rpx 0;
+    }
+    
+    &--plain {
+      background-color: transparent !important;
+      background-image: none;
+      
+      &.tn-round {
+        border-radius: 1000rpx !important;
+      }
+      
+      &.tn-radius {
+        border-radius: 12rpx !important;
+      }
+    }
+    
+    &--origin-left {
+      transform-origin: 0 center;
+    }
+    
+    &--origin-right {
+      transform-origin: 100% center;
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-td/tn-td.vue b/tuniao-ui/components/tn-td/tn-td.vue
new file mode 100644
index 0000000..56645a5
--- /dev/null
+++ b/tuniao-ui/components/tn-td/tn-td.vue
@@ -0,0 +1,307 @@
+<template>
+  <view class="tn-td-class tn-td" :class="[tdClass]" :style="[tdStyle]" @tap.stop="handleClick">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-td',
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    mixins: [componentsColorMixin],
+    props: {
+      // 占整个表格的宽度跨度
+      // [1-24]
+      span: {
+        type: Number,
+        default: 24
+      },
+      // 宽度
+      // 优先级比span高
+      width: {
+        type: [String, Number],
+        default: ''
+      },
+      // 高度
+      height: {
+        type: [String, Number],
+        default: ''
+      },
+      // 字体加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 格内边距
+      padding: {
+        type: String,
+        default: ''
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: ''
+      },
+      // 边框宽度
+      borderWidth: {
+        type: [String, Number],
+        default: ''
+      },
+      // 左边框
+      borderLeft: {
+        type: Boolean,
+        default: false
+      },
+      // 下边框
+      borderBottom: {
+        type: Boolean,
+        default: false
+      },
+      // 右边框
+      borderRight: {
+        type: Boolean,
+        default: true
+      },
+      // 文字超出隐藏
+      ellipsis: {
+        type: Boolean,
+        default: false
+      },
+      // 文本对齐方式
+      // left center right
+      textAlign: {
+        type: String,
+        default: 'left'
+      },
+      // 排列方式
+      // left center right
+      alignItems: {
+        type: String,
+        default: 'left'
+      },
+      // 收缩表格
+      shrink: {
+        type: Boolean,
+        default: true
+      },
+      // 铺满剩余空间
+      grow: {
+        type: Boolean,
+        default: false
+      },
+      // 隐藏
+      hidden: {
+        type: Boolean,
+        default: false
+      },
+      // 固定列数据
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 列数
+      index: {
+        type: [String, Number],
+        default: 0
+      },
+      // keys
+      keys: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      tdClass() {
+        let clazz = ''
+        clazz += `${this.ellipsis ? 'tn-td--ellipsis' : 'tn-td--normal'}`
+        if (this.backgroundColorClass) {
+          clazz += ` ${this.backgroundColorClass}`
+        }
+        if (this.fontColorClass) {
+          clazz += ` ${this.fontColorClass}`
+        }
+        if (this.alignItems) {
+          clazz += ` tn-td--${this.alignItems}`
+        }
+        if (this.textAlign) {
+          clazz += ` tn-td__text--${this.textAlign}`
+        }
+        if (!this.shrink) {
+          clazz += ' tn-td--shrink'
+        }
+        if (this.grow) {
+          clazz += ' tn-td--grow'
+        }
+        if (this.hidden) {
+          clazz += ' tn-td--hidden'
+        }
+        return clazz
+      },
+      tdStyle() {
+        let style = {}
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSizeStyle) {
+          style.fontSize = this.fontSizeStyle
+        }
+        style.width = this.getWidth()
+        if (this.height) {
+          style.height = this.$t.string.getLengthUnitValue(this.height)
+        }
+        style.fontWeight = this.bold ? 'bold' : 'normal'
+        if (this.padding) {
+          style.padding = this.padding
+        }
+        if (this.borderWidth !== '' || this.parentData.borderWidthValue !== '') {
+          style.borderWidth = this.borderWidth !== '' ? this.$t.string.getLengthUnitValue(this.borderWidth) : this.$t.string.getLengthUnitValue(this.parentData.borderWidthValue)
+        }
+        if (this.borderColor || this.parentData.borderColorValue) {
+          style.borderColor = this.borderColor || this.parentData.borderColorValue
+        }
+        if (this.borderLeft) {
+          style.borderLeftStyle = 'solid'
+        }
+        if (this.borderRight) {
+          style.borderRightStyle = 'solid'
+        }
+        if (this.borderBottom) {
+          style.borderBottomStyle = 'solid'
+        }
+        if (this.fixed) {
+          style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.tableTd
+        }
+        return style
+      }
+    },
+    data() {
+      return {
+        parentData: {
+          borderColorValue: null,
+          borderWidthValue: null
+        }
+      }
+    },
+    created() {
+      this.parent = false
+      this.updateParentData()
+      this.parent && this.parent.children.push(this)
+    },
+    methods: {
+      // 获取表格宽度
+      getWidth() {
+        if (this.width) {
+          return this.$t.string.getLengthUnitValue(this.width)
+        }
+        return [
+          '4.16666667%',
+          '8.33333333%',
+          '12.5%',
+          '16.66666667%',
+          '20.83333333%',
+          '25%',
+          '29.16666667%',
+          '33.33333333%',
+          '37.5%',
+          '41.66666667%',
+          '45.83333333%',
+          '50%',
+          '54.16666667%',
+          '58.33333333%',
+          '62.5%',
+          '66.66666667%',
+          '70.83333333%',
+          '75%',
+          '79.16666667%',
+          '83.33333333%',
+          '87.5%',
+          '91.66666667%',
+          '95.83333333%',
+          '100%'
+        ][this.span - 1]
+      },
+      // 点击事件
+      handleClick() {
+        this.$emit('click', {
+          index: this.index,
+          key: this.keys
+        })
+      },
+      // 更新父组件信息
+      updateParentData() {
+        this.getParentData('tn-tr')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-td {
+    box-sizing: border-box;
+    position: relative;
+    word-break: break-all;
+    background-color: transparent;
+    height: auto;
+    padding: 12rpx;
+    
+    border-width: 1rpx;
+    border-style: none;
+    border-color: #AAAAAA;
+    
+    &--normal {
+      display: inline-flex;
+      align-items: center;
+    }
+    &--ellipsis {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap !important;
+      text-overflow: ellipsis;
+    }
+    
+    &--shrink {
+      flex-shrink: 0;
+    }
+    &--grow {
+      flex-grow: 1;
+    }
+    
+    &--left {
+      justify-content: flex-start;
+    }
+    &--center {
+      justify-content: center;
+    }
+    &--right {
+      justify-content: flex-end;
+    }
+    
+    &__text {
+      &--left {
+        text-align: left;
+      }
+      &--center {
+        text-align: center;
+      }
+      &--right {
+        text-align: right;
+      }
+    }
+    
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue b/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue
new file mode 100644
index 0000000..5372a10
--- /dev/null
+++ b/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue
@@ -0,0 +1,71 @@
+<template>
+  <view class="tn-time-line-item-class tn-time-line-item">
+    <view>
+      <slot name="content"></slot>
+    </view>
+    <view class="tn-time-line-item__node" :style="[nodeStyle]">
+      <slot name="node">
+        <view class="tn-time-line-item__node--dot"></view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-time-line-item',
+    props: {
+      // 节点左边图标的绝对定位top值
+      top: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      nodeStyle() {
+        let style = {}
+        if (this.top !== '') style.top = this.top + 'rpx'
+        
+        return style
+      }
+    },
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line-item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    margin-bottom: 32rpx;
+    
+    &__node {
+      display: flex;
+      flex-direction: row;
+      position: absolute;
+      top: 12rpx;
+      left: -40rpx;
+      align-items: center;
+      justify-content: center;
+      font-size: 24rpx;
+      transform-origin: 0;
+      transform: translateX(-50%);
+      z-index: 1;
+      background-color: transparent;
+      
+      &--dot {
+        width: 16rpx;
+        height: 16rpx;
+        border-radius: 100rpx;
+        background-color: #AAAAAA;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue_bk b/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue_bk
new file mode 100644
index 0000000..5372a10
--- /dev/null
+++ b/tuniao-ui/components/tn-time-line-item/tn-time-line-item.vue_bk
@@ -0,0 +1,71 @@
+<template>
+  <view class="tn-time-line-item-class tn-time-line-item">
+    <view>
+      <slot name="content"></slot>
+    </view>
+    <view class="tn-time-line-item__node" :style="[nodeStyle]">
+      <slot name="node">
+        <view class="tn-time-line-item__node--dot"></view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-time-line-item',
+    props: {
+      // 节点左边图标的绝对定位top值
+      top: {
+        type: [String, Number],
+        default: ''
+      }
+    },
+    computed: {
+      nodeStyle() {
+        let style = {}
+        if (this.top !== '') style.top = this.top + 'rpx'
+        
+        return style
+      }
+    },
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line-item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    margin-bottom: 32rpx;
+    
+    &__node {
+      display: flex;
+      flex-direction: row;
+      position: absolute;
+      top: 12rpx;
+      left: -40rpx;
+      align-items: center;
+      justify-content: center;
+      font-size: 24rpx;
+      transform-origin: 0;
+      transform: translateX(-50%);
+      z-index: 1;
+      background-color: transparent;
+      
+      &--dot {
+        width: 16rpx;
+        height: 16rpx;
+        border-radius: 100rpx;
+        background-color: #AAAAAA;
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-time-line/tn-time-line.vue b/tuniao-ui/components/tn-time-line/tn-time-line.vue
new file mode 100644
index 0000000..951dd3f
--- /dev/null
+++ b/tuniao-ui/components/tn-time-line/tn-time-line.vue
@@ -0,0 +1,39 @@
+<template>
+  <view class="tn-time-line-class tn-time-line">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-time-line',
+    props: {
+      
+    },
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line {
+    padding-left: 40rpx;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      left: 0;
+      top: 12rpx;
+      bottom: 0;
+      border-left: 1px solid #AAAAAA;
+      transform-origin: 0 0;
+      transform: scaleX(0.5);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-time-line/tn-time-line.vue_bk b/tuniao-ui/components/tn-time-line/tn-time-line.vue_bk
new file mode 100644
index 0000000..951dd3f
--- /dev/null
+++ b/tuniao-ui/components/tn-time-line/tn-time-line.vue_bk
@@ -0,0 +1,39 @@
+<template>
+  <view class="tn-time-line-class tn-time-line">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-time-line',
+    props: {
+      
+    },
+    data() {
+      return {
+        
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-time-line {
+    padding-left: 40rpx;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      width: 1px;
+      left: 0;
+      top: 12rpx;
+      bottom: 0;
+      border-left: 1px solid #AAAAAA;
+      transform-origin: 0 0;
+      transform: scaleX(0.5);
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tips/tn-tips.vue b/tuniao-ui/components/tn-tips/tn-tips.vue
new file mode 100644
index 0000000..e13d5ba
--- /dev/null
+++ b/tuniao-ui/components/tn-tips/tn-tips.vue
@@ -0,0 +1,240 @@
+<template>
+  <view
+    v-if="visibleSync"
+    class="tn-tips-class tn-tips"
+    :class="[tipsClass]"
+    :style="[tipsStyle]"
+  >
+    <view
+      class="tn-tips__content"
+      :class="[
+        backgroundColorClass,
+        fontColorClass
+      ]"
+      :style="{
+        backgroundColor: backgroundColorStyle,
+        color: fontColorStyle
+      }"
+    >{{ msg }}</view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    name: 'tn-tips',
+    props: {
+      // 层级
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 提示框显示位置 top center bottom
+      position: {
+        type: String,
+        default: 'top'
+      },
+      // 当位置设置为top的时候，设置距离顶部的距离
+      top: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      tipsClass() {
+        let clazz = ''
+        switch (this.position) {
+          case 'top':
+            clazz += ' tn-tips--top'
+            break
+          case 'center':
+            clazz += ' tn-tips--center'
+            break
+          case 'bottom':
+            clazz += ' tn-tips--bottom'
+            break
+          default:
+            clazz += ' tn-tips--top'
+        }
+        if (this.showTips) {
+          clazz += ' tn-tips--show'
+        }
+        
+        return clazz
+      },
+      tipsStyle() {
+        let style = {}
+        if ((this.position === 'top' || this.position === '') && this.top) {
+          style.top = this.top + 'px'
+        }
+        style.zIndex = (this.zIndex ? this.zIndex : this.$t.zIndex.tips) + 1
+        
+        return style
+      },
+      backgroundColorStyle() {
+        return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
+      },
+      backgroundColorClass() {
+        return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
+      },
+      fontColorStyle() {
+        return this.$t.color.getFontColorStyle(this.fontColor)
+      },
+      fontColorClass() {
+        return this.$t.color.getFontColorInternalClass(this.fontColor)
+      },
+    },
+    data() {
+      return {
+        //关闭提示框定时器
+        timer: null,
+        // 是否渲染组件
+        visibleSync: false,
+        // 是否显示内容
+        showTips: false,
+        // 提示信息
+        msg: '',
+        // 背景颜色
+        backgroundColor: '',
+        // 字体颜色
+        fontColor: ''
+      }
+    },
+    methods: {
+      show(options = {}) {
+        const {
+          duration = 2000,
+          msg = '',
+          backgroundColor = '',
+          fontColor = ''
+        } = options
+        
+        if (this.timer !== null) clearTimeout(this.timer)
+        
+        // 如果没有设置内容则不弹出
+        if (!msg) {
+          this._clearOptions()
+          this.$emit('close')
+          return
+        }
+        
+        this.msg = msg
+        this.backgroundColor = backgroundColor || '#01BEFF'
+        this.fontColor = fontColor || '#FFFFFF'
+        
+        this.change('visibleSync', 'showTips', true)
+        
+        this.timer = setTimeout(() => {
+          clearTimeout(this.timer)
+          this.timer = null
+          this.change('showTips', 'visibleSync', false)
+        }, duration)
+      },
+      
+      // 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+      // 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+      change(param1, param2, status) {
+        this[param1] = status
+        if (status) {
+          // #ifdef H5 || MP
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+          }, 50)
+          // #endif
+          // #ifndef H5 || MP
+          this.$nextTick(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+          })
+          // #endif
+        } else {
+          this.timer = setTimeout(() => {
+            this[param2] = status
+            this.$emit(status ? 'open' : 'close')
+            this._clearOptions()
+          }, 300)
+        }
+      },
+      
+      // 清除传递的参数
+      _clearOptions() {
+        this.msg = ''
+        this.backgroundColor = ''
+        this.fontColor = ''
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  /*注意问题：
+   1、fixed 元素宽度无法自适应，所以增加了子元素
+   2、fixed 和 display冲突导致动画效果消失，暂时使用visibility替代
+  */
+  .tn-tips {
+    height: auto;
+    position: fixed;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease-in-out;
+    opacity: 0;
+    
+    &__content {
+      word-wrap: break-word;
+      word-break: break-all;
+      width: 100%;
+      height: auto;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: #FFFFFF;
+    }
+    
+    &--top {
+      width: 100% !important;
+      /* padding: 18rpx 30rpx; */
+      top: 0;
+      left: 0;
+      transform: translateY(-100%) translateZ(0);
+      word-break: break-all;
+    }
+    
+    &--center {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    
+    &--bottom {
+      bottom: 120rpx;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    
+    &--center, &--bottom {
+      .content {
+        border-radius: 8rpx;
+        padding: 0;
+      }
+    }
+    
+    &--center, &--bottom {
+      .tn-tips__content {
+        padding: 18rpx 30rpx !important;
+      }
+    }
+    
+    &--show {
+      opacity: 1;
+      
+      &.tn-tips--top {
+        transform: translateY(0) translateZ(0) !important;
+      }
+    }
+    
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-toast/tn-toast.vue b/tuniao-ui/components/tn-toast/tn-toast.vue
new file mode 100644
index 0000000..f49a9a1
--- /dev/null
+++ b/tuniao-ui/components/tn-toast/tn-toast.vue
@@ -0,0 +1,227 @@
+<template>
+  <view v-if="visible">
+    <view
+      class="tn-toast-class tn-toast"
+      :class="[toastClass]"
+      :style="[toastStyle]"
+    >
+      <image v-if="image" :src="image" class="tn-toast__img" :class="{'tn-margin-bottom-sm': title || content}"></image>
+      <view v-if="icon" class="tn-toast__icon">
+        <view :class="['tn-icon-' + icon]"></view>
+      </view>
+      <view
+        v-if="title"
+        class="tn-toast__text"
+        :class="[haveIcon || haveContent ? '' : 'tn-toast--unicon']"
+      >{{ title }}</view>
+      <view
+        v-if="haveContent"
+        class="tn-toast__text tn-toast__content"
+      >{{ content }}</view>
+    </view>
+    
+    <view class="tn-toast__mask" :class="[visible ? 'tn-toast__mask--show' : '']" :style="[maskStyle]"></view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    name: 'tn-toast',
+    props: {
+      // 层级
+      zIndex: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      toastClass() {
+        let clazz = ''
+        if (this.visible) {
+          clazz += ' tn-toast--show'
+        }
+        
+        if (this.content) {
+          clazz += ' tn-toast--padding'
+        }
+        if (this.icon || this.image) {
+          clazz += ' tn-toast--unicon'
+        }
+        
+        return clazz
+      },
+      toastStyle() {
+        let style = {}
+        style.width = 'auto'
+        if (this.icon || this.image) {
+          // style.width = this.content ? '420rpx' : '360rpx'
+        }
+
+        style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.toast
+        
+        return style
+      },
+      maskStyle() {
+        let style = {}
+        const zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.toast
+        style.zIndex = zIndex - 1
+        return style
+      },
+      haveIcon() {
+        return this.icon || this.image
+      },
+      haveContent() {
+        return this.content
+      }
+    },
+    data() {
+      return {
+        // 自动关闭定时器
+        timer: null,
+        // 是否显示
+        visible: false,
+        // 显示的标题
+        title: '',
+        // 显示的内容
+        content: "",
+        // 是否显示icon (icon库的图标)
+        icon: '',
+        // 是否显示图片 (图片地址)
+        image: ''
+      }
+    },
+    methods: {
+      // 显示弹框
+      show(options = {}) {
+        const {
+          duration = 2000,
+          title = '',
+          content = '',
+          icon = '',
+          image = ''
+        } = options
+        if (this.timer !== null ){
+          clearTimeout(this.timer)
+        }
+        // 如果没有设置任何内容就不弹出
+        if (!icon && !image && !title && !content) {
+          this._clearOptions()
+          this.$emit('closed')
+          return
+        }
+        
+        this.visible = true
+        this.title = title
+        this.content = content
+        this.icon = icon
+        if (!icon) {
+          this.image = image
+        }
+        
+        this.timer = setTimeout(() => {
+          this.visible = false
+          clearTimeout(this.timer)
+          this.timer = null
+          this._clearOptions()
+          this.$emit('closed')
+        }, duration)
+      },
+      
+      
+      // 清除传递的参数
+      _clearOptions() {
+        this.title = ''
+        this.content = ''
+        this.icon = ''
+        this.image = ''
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-toast {
+    height: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 10rpx;
+    opacity: 0;
+    position: fixed;
+    left: 50%;
+    top: 48%;
+    transform: translate(-50%, -50%);
+    transition: 0.3 ease-in-out;
+    transition-property: opacity, visibility;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 20rpx 20rpx 20rpx 20rpx;
+    box-sizing: border-box;
+    
+    &--show {
+      opacity: 1;
+      
+      &.tn-toast--padding {
+        padding-top: 50rpx !important;
+        padding-bottom: 50rpx !important;
+      }
+      
+      &.tn-toast--unicon {
+        padding: 20rpx 20rpx 20rpx 20rpx !important;
+      }
+    }
+    
+    &__img {
+      width: 120rpx;
+      height: 120rpx;
+      display: block;
+    }
+    
+    &__text {
+      font-size: 28rpx;
+      line-height: 28rpx;
+      color: #ffffff;
+      text-align: center;
+    }
+    
+    &__icon {
+      color: #FFFFFF;
+      font-size: 64rpx;
+    }
+    
+    &__content {
+      padding-top: 10rpx;
+      font-size: 24rpx !important;
+    }
+    
+    &--unicon {
+      padding: 0;
+      word-break: break-all;
+    }
+    
+    &--padding {
+      padding: 10rpx;
+    }
+    
+    &__mask {
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      border: 0;
+      background-color: rgba(0, 0, 0, 0);
+      transition: 0.3s ease-in-out;
+      transition-property: opacity;
+      opacity: 0;
+      
+      &--show {
+        height: 100%;
+        opacity: 1;
+      }
+    }
+  }
+  
+</style>
diff --git a/tuniao-ui/components/tn-tr/tn-tr.vue b/tuniao-ui/components/tn-tr/tn-tr.vue
new file mode 100644
index 0000000..a305792
--- /dev/null
+++ b/tuniao-ui/components/tn-tr/tn-tr.vue
@@ -0,0 +1,210 @@
+<template>
+  <view class="tn-tr-class tn-tr" :class="[trClass]" :style="[trStyle]">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-tr',
+    options: {
+    	// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+    	virtualHost: true
+    },
+    mixins: [componentsColorMixin],
+    props: {
+      // 宽度
+      width: {
+        type: [String, Number],
+        default: ''
+      },
+      // 边框颜色
+      borderColor: {
+        type: String,
+        default: ''
+      },
+      // 边框宽度
+      borderWidth: {
+        type: [String, Number],
+        default: ''
+      },
+      // 左边框
+      borderLeft: {
+        type: Boolean,
+        default: false
+      },
+      // 上边框
+      borderTop: {
+        type: Boolean,
+        default: false
+      },
+      // 换行显示
+      wrap: {
+        type: Boolean,
+        default: false
+      },
+      // 固定表格
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+      // left偏移值
+      left: {
+        type: [String, Number],
+        default: 0
+      },
+      // right偏移值
+      right: {
+        type: [String, Number],
+        default: 0
+      },
+      // top偏移值(自定义顶部导航栏时用到)
+      top: {
+        type: [String, Number],
+        default: 0
+      },
+      // 外边距
+      margin: {
+        type: String,
+        default: ''
+      },
+      // zIndex
+      zIndex: {
+        type: Number,
+        default: 0
+      },
+      // 行数索引
+      index: {
+        type: [String, Number],
+        default: 0
+      },
+      // 参数
+      params: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      borderWidthValue() {
+        return this.borderWidth || this.parentData.borderWidth || ''
+      },
+      borderColorValue() {
+        return this.borderColor || this.parentData.borderColor || ''
+      },
+      trClass() {
+        let clazz = ''
+        if (this.backgroundColorClass) {
+          clazz += ` ${this.backgroundColorClass}`
+        }
+        if (this.fontColorClass) {
+          clazz += ` ${this.fontColorClass}`
+        }
+        if (this.wrap) {
+          clazz += ' tn-tr--wrap'
+        }
+        if (this.fixed) {
+          clazz += ' tn-tr--fixed'
+        }
+        return clazz
+      },
+      trStyle() {
+        let style = {}
+        if (this.width) {
+          style.width = this.$t.string.getLengthUnitValue(this.width)
+        }
+        if (this.backgroundColorStyle) {
+          style.backgroundColor = this.backgroundColorStyle
+        }
+        if (this.fontColorStyle) {
+          style.color = this.fontColorStyle
+        }
+        if (this.fontSizeStyle) {
+          style.fontSize = this.fontSizeStyle
+        }
+        if (this.borderWidth !== '' || this.parentData.borderWidth !== '') {
+          style.borderWidth = this.borderWidth !== '' ? this.$t.string.getLengthUnitValue(this.borderWidth) : this.$t.string.getLengthUnitValue(this.parentData.borderWidth)
+        }
+        if (this.borderColor || this.parentData.borderColor) {
+          style.borderColor = this.borderColor || this.parentData.borderColor
+        }
+        if (this.borderLeft) {
+          style.borderLeftStyle = 'solid'
+        }
+        if (this.borderTop) {
+          style.borderTopStyle = 'solid'
+        }
+        if (this.fixed) {
+          style.left = this.left ? this.$t.string.getLengthUnitValue(this.left) : 'auto'
+          style.right = this.right ? this.$t.string.getLengthUnitValue(this.right) : 'auto'
+          style.top = this.top ? this.$t.string.getLengthUnitValue(this.top) : 'auto'
+        }
+        if (this.margin) {
+          style.margin = this.margin
+        }
+        style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.tableTr
+        return style
+      }
+    },
+    data() {
+      return {
+        parentData: {
+          borderColor: null,
+          borderWidth: null
+        }
+      }
+    },
+    watch: {
+      parentData: {
+        handler() {
+          // 更新子组件的数据
+          if (this.children.length) {
+            this.children.map((child) => {
+              typeof(child.updateParentData) === 'function' && child.updateParentData()
+            })
+          }
+        },
+        deep: true
+      }
+    },
+    created() {
+      this.children = []
+      this.parent = false
+      this.updateParentData()
+      this.parent && this.parent.children.push(this)
+    },
+    methods: {
+      handleClick() {
+        this.$emit('click', {
+          index: this.index,
+          params: this.params
+        })
+      },
+      // 更新父组件信息
+      updateParentData() {
+        this.getParentData('tn-table')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-tr {
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    
+    border-width: 1rpx;
+    border-style: none none solid none;
+    border-color: #AAAAAA;
+    
+    &--wrap {
+      flex-wrap: wrap;
+    }
+    
+    &--fixed {
+      position: fixed;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tree-node/tn-tree-node.vue b/tuniao-ui/components/tn-tree-node/tn-tree-node.vue
new file mode 100644
index 0000000..10f3f4d
--- /dev/null
+++ b/tuniao-ui/components/tn-tree-node/tn-tree-node.vue
@@ -0,0 +1,143 @@
+<template>
+  <view class="tn-tree-node-class tn-tree-node">
+    <view class="tn-tree__label" @tap="handleClick">
+      <view
+        v-if="node.children && node.children.length > 0 && triangle"
+        class="tn-tree__triangle"
+        :class="[{'tn-tree__triangle--90deg': !collapsed}]"
+      ></view>
+      <view class="tn-tree__label__item">
+        <view v-if="collapsed && node.image" class="tn-tree__label__item__image">
+          <image :src="node.image" mode="widthFix"></image>
+        </view>
+        <view v-if="!collapsed && node.activeImage" class="tn-tree__label__item__image">
+          <image :src="node.activeImage" mode="widthFix"></image>
+        </view>
+        <view class="tn-tree__label__item__text">{{ node.text }}</view>
+      </view>
+    </view>
+    <view v-if="!collapsed && node.children && node.children.length > 0" class="tn-tree__children">
+      <tn-tree-node
+        v-for="(item, index) in node.children"
+        :key="index"
+        :node="item"
+        :collapsible="collapsible"
+        :triangle="triangle"
+        @click="nodeClick"
+      ></tn-tree-node>
+    </view>
+  </view>
+</template>
+
+<script>
+  //如果未开启easycom模式，请自行引入tn-tree-node组件
+  export default {
+    name: 'tn-tree-node',
+    props: {
+      // 节点信息
+      node: {
+        type: Object,
+        default() {
+          return {}
+        }
+      },
+      // 可以折叠
+      collapsible: {
+        type: Boolean,
+        default: true
+      },
+      // 显示三角形
+      triangle: {
+        type: Boolean,
+        default: true
+      }
+    },
+    watch: {
+      node(val) {
+        if (val.collapsed !== this.collapsed && this.node.children && this.node.children.length > 0) {
+          this.collapsed = val.collapsed
+        }
+      }
+    },
+    data() {
+      return {
+        // 标记是否折叠
+        collapsed: true
+      }
+    },
+    created() {
+      if (this.node.collapsed === false) {
+        this.collapsed = false
+      }
+    },
+    methods: {
+      // 处理点击
+      handleClick(e) {
+        if (this.collapsible && this.node.children && this.node.children.length > 0) {
+          this.collapsed = !this.collapsed
+        }
+        this.$emit('click', this.node)
+      },
+      nodeClick(e) {
+        this.$emit('click', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-tree-node {
+    
+    .tn-tree {
+      &__label {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        padding: 20rpx 30rpx;
+        background-color: transparent;
+        /* #ifdef H5 */
+        cursor: pointer;
+        /* #endif */
+        // 字体抗锯齿
+        -webkit-font-smoothing: antialiased;
+        
+        &__item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          
+          &__image {
+            width: 40rpx;
+            height: 40rpx;
+            margin-right: 16rpx;
+            
+            image {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+      
+      &__children {
+        padding-left: 60rpx;
+        position: relative;
+      }
+      
+      &__triangle {
+        width: 0;
+        height: 0;
+        border-top: 12rpx solid transparent;
+        border-bottom: 12rpx solid transparent;
+        border-left: 16rpx solid #080808;
+        margin-right: 20rpx;
+        transition:  transform 0.25s ease-out;
+        flex-shrink: 0;
+        
+        &--90deg {
+          transform:rotate(90deg) translate3d(0, 0, 0);
+        }
+      }
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-tree-view/tn-tree-view.vue b/tuniao-ui/components/tn-tree-view/tn-tree-view.vue
new file mode 100644
index 0000000..99e8c7f
--- /dev/null
+++ b/tuniao-ui/components/tn-tree-view/tn-tree-view.vue
@@ -0,0 +1,50 @@
+<template>
+  <view class="tn-tree-view-class tn-tree-view">
+    <tn-tree-node
+      v-for="(item, index) in treeData"
+      :key="index"
+      :node="item"
+      :collapsible="collapsible"
+      :triangle="triangle"
+      @click="handleClick"
+    ></tn-tree-node>
+  </view>
+</template>
+
+<script>
+  //如果未开启easycom模式，请自行引入tn-tree-node组件
+  export default {
+    name: 'tn-tree-view',
+    props: {
+      // 节点信息
+      treeData: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 可以折叠
+      collapsible: {
+        type: Boolean,
+        default: true
+      },
+      // 显示三角形
+      triangle: {
+        type: Boolean,
+        default: true
+      }
+    },
+    methods: {
+      handleClick(e) {
+        this.$emit('click', e)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-tree-view {
+    width: 100%;
+    position: relative;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue b/tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue
new file mode 100644
index 0000000..1b7a587
--- /dev/null
+++ b/tuniao-ui/components/tn-verification-code-input/tn-verification-code-input.vue
@@ -0,0 +1,324 @@
+<template>
+  <view class="tn-verification-code-class tn-verification-code">
+    <view class="tn-code__container">
+      <input class="tn-code__input" :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxLength" @input="getValue" />
+      <view v-for="(item, index) in loopCharArr" :key="index">
+        <view
+          class="tn-code__item"
+          :class="[{
+            'tn-code__item--breathe': breathe && charArrLength === index,
+            'tn-code__item__box': mode === 'box',
+            'tn-code__item__box--active': mode === 'box' && charArrLength === index
+          }]"
+          :style="[itemStyle(index)]"
+        >
+          <view
+            v-if="mode !== 'middleLine'"
+            class="tn-code__item__line tn-code__item__line--placeholder"
+            :style="[placeholderLineStyle(index)]"
+          ></view>
+          <view
+            v-if="mode === 'middleLine' && charArrLength <= index"
+            class="tn-code__item__line tn-code__item__line--middle"
+            :class="[{
+              'tn-code__item__line--bold': bold,
+              'tn-code__item--breathe': breathe && charArrLength === index,
+              'tn-code__item__line--active': charArrLength === index
+            }]"
+            :style="[lineStyle(index)]"
+          ></view>
+          <view
+            v-if="mode === 'bottomLine'"
+            class="tn-code__item__line tn-code__item__line--bottom"
+            :class="[{
+              'tn-code__item__line--bold': bold,
+              'tn-code__item--breathe': breathe && charArrLength === index,
+              'tn-code__item__line--active': charArrLength === index
+            }]"
+            :style="[lineStyle(index)]"
+          ></view>
+          <block v-if="!dotFill">
+            <text>{{ charArr[index] ? charArr[index] : '' }}</text>
+          </block>
+          <block v-else>
+            <text class="tn-code__item__dot">{{ charArr[index] ? '●' : '' }}</text>
+          </block>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-verification-code',
+    props: {
+      // 验证码的值
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      // 最大输入长度
+      maxLength: {
+        type: Number,
+        default: 4
+      },
+      // 显示模式
+      // box -> 盒子 bottomLine -> 底部横线 middleLine -> 中间横线
+      mode: {
+        type: String,
+        default: 'box'
+      },
+      // 用圆点填充空白位置
+      dotFill: {
+        type: Boolean,
+        default: false
+      },
+      // 字体加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 字体大小
+      fontSize: {
+        type: [String, Number],
+        default: ''
+      },
+      // 激活时颜色
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      // 未激活时颜色
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      // 输入框宽度，单位rpx
+      inputWidth: {
+        type: Number,
+        default: 80
+      },
+      // 当前激活的item带呼吸效果
+      breathe: {
+        type: Boolean,
+        default: true
+      },
+      // 自动获取焦点
+      focus: {
+        type: Boolean,
+        default: false
+      },
+      // 隐藏原生键盘，当使用自定义键盘的时候设置该参数未true即可
+      disabledKeyboard: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      // 拆分要显示的字符
+      charArr() {
+        return this.valueModel.split('')
+      },
+      // 当前输入字符的长度
+      charArrLength() {
+        return this.charArr.length
+      },
+      // 输入框的个数
+      loopCharArr() {
+        return new Array(this.maxLength)
+      },
+      itemStyle() {
+        return (index) => {
+          let style = {}
+          style.fontWeight = this.bold ? 'bold' : 'normal'
+          if (this.fontSize) {
+            style.fontSize = this.fontSize + 'rpx'
+          }
+          if (this.inputWidth) {
+            style.width = this.inputWidth + 'rpx'
+            style.height = this.inputWidth + 'rpx'
+            style.lineHeight = this.inputWidth + 'rpx'
+          }
+          if (this.inactiveColor) {
+            style.color = this.inactiveColor
+            style.borderColor = this.inactiveColor
+          }
+          if (this.mode === 'box' && this.charArrLength === index) {
+            style.borderColor = this.activeColor
+          }
+          return style
+        }
+      },
+      placeholderLineStyle() {
+        return (index) => {
+          let style = {}
+          style.display = this.charArrLength === index ? 'block' : 'none'
+          if (this.inputWidth) {
+            style.height = (this.inputWidth * 0.5) + 'rpx'
+          }
+          return style
+        }
+      },
+      lineStyle() {
+        return (index) => {
+          let style = {}
+          if (this.inactiveColor) {
+            style.backgroundColor = this.inactiveColor
+          }
+          if (this.charArrLength === index && this.activeColor) {
+            style.backgroundColor = this.activeColor
+          }
+          return style
+        }
+      }
+    },
+    watch: {
+      value: {
+        handler(val) {
+          // 转换为字符串
+          val = String(val)
+          // 截掉超出的部分
+          this.valueModel = val.substring(0, this.maxLength)
+        },
+        immediate: true
+      }
+    },
+    data() {
+      return {
+        valueModel: ''
+      }
+    },
+    methods: {
+      // 获取填写的值
+      getValue(e) {
+        const {
+          value
+        } = e.detail
+        this.valueModel = value
+        // 判断输入的长度是否超出了maxlength的值
+        if (String(value).length > this.maxLength) return
+        // 未达到maxlength之前，触发change事件，否则触发finish事件
+        this.$emit('change', value)
+        this.$emit('input', value)
+        if (String(value).length == this.maxLength) {
+          this.$emit('finish', value)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-verification-code {
+    text-align: center;
+    
+    .tn-code {
+      &__container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+        position: relative;
+      }
+      
+      &__input {
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 200%;
+        height: 100%;
+        text-align: left;
+        z-index: 9;
+        opacity: 0;
+        background: none;
+      }
+      
+      &__item {
+        position: relative;
+        width: 80rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin: 10rpx 10rpx;
+        font-size: 60rpx;
+        font-weight: bold;
+        color: #838383;
+        
+        &--breathe {
+          animation: breathe 2s infinite ease;
+        }
+        
+        &__box {
+          border: 2rpx solid #AAAAAA;
+          border-radius: 6rpx;
+          
+          &--active {
+            animation-timing-function: ease-in-out;
+            animation-duration: 1500ms;
+            animation-iteration-count: infinite;
+            animation-direction: alternate;
+            overflow: hidden;
+            border: 2rpx solid #01BEFF;
+          }
+        }
+        
+        &__line {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background-color: #AAAAAA;
+          
+          &--bold {
+            height: 4px !important;
+          }
+          
+          &--placeholder {
+            display: none;
+            width: 2rpx;
+            height: 40rpx;
+          }
+          
+          &--middle, &--bottom {
+            width: 80%;
+            height: 2px;
+            border-radius: 2px;
+          }
+          &--bottom {
+            top: auto !important;
+            bottom: 0;
+            transform: translateX(-50%) !important;
+          }
+          
+          &--active {
+            background-color: #01BEFF !important;
+          }
+        }
+        
+        &__dot {
+          font-size: 34rpx;
+          line-height: 34rpx;
+        }
+      }
+    }
+  }
+  
+  @keyframes breathe {
+    0% {
+      opacity: 0.3;
+    }
+    
+    50% {
+      opacity: 1;
+    }
+    
+    100% {
+      opacity: 0.3;
+    }
+  }
+</style>
diff --git a/tuniao-ui/components/tn-verification-code/tn-verification-code.vue b/tuniao-ui/components/tn-verification-code/tn-verification-code.vue
new file mode 100644
index 0000000..687d318
--- /dev/null
+++ b/tuniao-ui/components/tn-verification-code/tn-verification-code.vue
@@ -0,0 +1,165 @@
+<template>
+  <view class="tn-code-class tn-code">
+    
+  </view>
+</template>
+
+<script>
+  import { getCurrentLanguage } from '../../../utils/i18n'
+
+  function getLocalizedText(vm, zh, en) {
+    const language = vm && vm.$getLanguage ? vm.$getLanguage() : getCurrentLanguage()
+    return language === 'en' ? en : zh
+  }
+
+  export default {
+    name: 'tn-verification-code',
+    props: {
+      // 倒计时总秒数
+      seconds: {
+        type: Number,
+        default: 60
+      },
+      // 开始时提示文字
+      startText: {
+        type: String,
+        default: null
+      },
+      // 倒计时提示文字
+      countDownText: {
+        type: String,
+        default: null
+      },
+      // 结束时提示文字
+      endText: {
+        type: String,
+        default: null
+      },
+      // 是否在H5刷新或各端返回再进入时继续倒计时
+      keepRunning: {
+      	type: Boolean,
+      	default: false
+      },
+      // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+      uniqueKey: {
+      	type: String,
+      	default: ''
+      }
+    },
+    data() {
+      return {
+        timer: null,
+        secNum: this.seconds,
+        // 是否可以执行验证码操作
+        canGetCode: true
+      }
+    },
+    watch: {
+      seconds: {
+        handler(n) {
+          this.secNum = n
+        },
+        immediate: true
+      }
+    },
+    mounted() {
+      this.checkKeepRunning()
+    },
+    beforeDestroy() {
+      this.setTimeToStorage()
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    methods: {
+      resolvedStartText() {
+        return this.startText === null ? getLocalizedText(this, '获取验证码', 'Get Code') : this.startText
+      },
+      resolvedCountDownText() {
+        return this.countDownText === null ? getLocalizedText(this, 's秒后重新获取', 'Resend in s') : this.countDownText
+      },
+      resolvedEndText() {
+        return this.endText === null ? getLocalizedText(this, '重新获取', 'Resend') : this.endText
+      },
+      // 检查是否继续运行
+      checkKeepRunning() {
+        // 获取上一次退出页面时的时间戳，如果没有上次保存，该值为空
+        let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$tCountDownTimestamp'))
+        if (!lastTimestamp) return this.changeEvent(this.resolvedStartText())
+        // 当前秒的时间戳
+        // + new Date() 相当于 new Date().getTime()
+        let nowTimestamp = Math.floor((+ new Date()) / 1000)
+        // 判断当前的时间戳，是否小于上一次的设定结束的时间，提前于结束的时间戳
+        if (this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
+          // 剩余尚未执行完倒计时秒数
+          this.secNum = lastTimestamp - nowTimestamp
+          // 清除本地保存的变量
+          uni.removeStorageSync(this.uniqueKey + '_$tCountDownTimestamp')
+          // 开始倒计时
+          this.start()
+        } else {
+          // 如果不存在需要继续上一次的倒计时，执行正常的逻辑
+          this.changeEvent(this.resolvedStartText());
+        }
+      },
+      // 开始倒计时
+      start() {
+        // 防止快速点击获取验证码按钮导致产生多个定时器导致混乱
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+        this.$emit('start')
+        this.canGetCode = false
+        
+        this.changeEvent(this.resolvedCountDownText().replace(/s|S/, this.secNum))
+        this.setTimeToStorage()
+        this.timer = setInterval(() => {
+          if (--this.secNum) {
+            this.changeEvent(this.resolvedCountDownText().replace(/s|S/, this.secNum))
+          } else {
+            // 倒计时结束，清空定时器、重置提示信息
+            this.reset()
+            this.$emit('end')
+          }
+        }, 1000)
+      },
+      // 重置倒计时
+      reset() {
+        this.canGetCode = true
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+        this.secNum = this.seconds
+        this.changeEvent(this.resolvedEndText())
+      },
+      // 倒计时改变事件
+      changeEvent(text) {
+        this.$emit('change', text)
+      },
+      // 保存当前时间戳
+      // 防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+      setTimeToStorage() {
+        if (!this.keepRunning ||!this.timer) return
+        // 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
+        // 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
+        if (this.secNum > 0 && this.secNum <= this.seconds) {
+          let nowTimestamp = Math.floor((+ new Date()) / 1000)
+          // 保存本次倒计时结束时候的时间戳
+          uni.setStorageSync(this.uniqueKey + '_$tCountDownTimestamp', nowTimestamp + this.secNum)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-code {
+    width: 0;
+    height: 0;
+    position: fixed;
+    z-index: -1;
+  }
+</style>
diff --git a/tuniao-ui/components/tn-waterfall/tn-waterfall.vue b/tuniao-ui/components/tn-waterfall/tn-waterfall.vue
new file mode 100644
index 0000000..827be0e
--- /dev/null
+++ b/tuniao-ui/components/tn-waterfall/tn-waterfall.vue
@@ -0,0 +1,165 @@
+<template>
+  <view class="tn-waterfall-class tn-waterfall">
+    <view id="tn-waterfall-left" class="tn-waterfall__column"><slot name="left" :leftList="leftList"></slot></view>
+    <view id="tn-waterfall-right" class="tn-waterfall__column"><slot name="right" :rightList="rightList"></slot></view>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: 'tn-waterfall',
+    props: {
+      // 瀑布流数据
+      value: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      // 数据的id值，根据id值对数据执行删除操作
+      // 如数据为：{id: 1, name: 'tuniao'}，那么该值设置为id
+      idKey: {
+        type: String,
+        default: 'id'
+      },
+      // 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好
+      // 单位ms
+      addTime: {
+        type: Number,
+        default: 200
+      }
+    },
+    computed: {
+      // 破坏value变量引用，否则数据会保持不变
+      copyValue() {
+        return this.cloneData(this.value)
+      }
+    },
+    watch: {
+      copyValue(nVal, oVal) {
+        // 取出数组发生变化的部分
+        let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
+        // 拼接原有数据
+        this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)))
+        this.splitData()
+      }
+    },
+    data() {
+      return {
+        // 左列表
+        leftList: [],
+        // 右列表
+        rightList: [],
+        // 临时列表
+        tempList: []
+      }
+    },
+    mounted() {
+      this.tempList = this.cloneData(this.copyValue)
+      this.splitData()
+    },
+    methods: {
+      // 拆分数据
+      async splitData() {
+        if (!this.tempList.length) return
+        
+        let leftRect = await this._tGetRect('#tn-waterfall-left')
+        let rightRect = await this._tGetRect('#tn-waterfall-right')
+        
+        let item = this.tempList[0]
+        // 因为经过上面两个await节点查询和定时器，数组有可能会变成空[]，导致item的值为undefined
+        // 解决多次快速滚动会导致数据乱的问题
+        if (!item) return
+        
+        // 如果左边小于或者等于右边，就添加到左边，否则添加到右边
+        if (leftRect.height < rightRect.height) {
+          this.leftList.push(item)
+        } else if (leftRect.height > rightRect.height) {
+          this.rightList.push(item)
+        } else {
+          // 为了保证前两项添加时，左右两边都还没有内容，这时候根据队列长度判断下一项该放在哪一边
+          if (this.leftList.length <= this.rightList.length) {
+            this.leftList.push(item)
+          } else {
+            this.rightList.push(item)
+          }
+        }
+        
+        // 移除临时数组中已处理的数据
+        this.tempList.splice(0, 1)
+        // 如果还有数据则继续执行
+        if (this.tempList.length) {
+          setTimeout(() => {
+            this.splitData()
+          }, this.addTime)
+        } else {
+          this.$emit('finish')
+        }
+      },
+      // 复制对象和数组（深度复制不会影响原对象和数组）
+      cloneData(data) {
+        return JSON.parse(JSON.stringify(data))
+      },
+      // 清空数据列表
+      clear() {
+        this.leftList = []
+        this.rightList = []
+        this.$emit('input', [])
+        this.tempList = []
+      },
+      // 清除指定的某一条数据，根据id来实现
+      remove(id) {
+        // 如果查找不到就返回-1
+        let index = -1
+        index = this.leftList.findIndex(val => val[this.idKey] == id)
+        if (index != -1) {
+          // 如果index不等于-1，说明已经找到了指定的数据
+          this.leftList.splice(index, 1)
+        } else {
+          // 同理于上面的方法
+          index = this.rightList.findIndex(val => val[this.idKey] == id)
+          if (index != -1) this.rightList.splice(index, 1)
+        }
+        // 同时删除父组件对应的数据
+        index = this.value.findIndex(val => val[this.idKey] == id)
+        if (index != -1) this.$emit('input', this.value.splice(index, 1))
+      },
+      // 修改指定数据的属性
+      modify(id, key, value) {
+        // 如果查找不到就返回-1
+        let index = -1
+        index = this.leftList.findIndex(val => val[this.idKey] == id)
+        if (index != -1) {
+          // 如果index不等于-1，说明已经找到了指定的数据
+          this.leftList[index][key] = value
+        } else {
+          // 同理于上面的方法
+          index = this.rightList.findIndex(val => val[this.idKey] == id)
+          if (index != -1) this.rightList[index][key] = value
+        }
+        // 同时删除父组件对应的数据
+        index = this.value.findIndex(val => val[this.idKey] == id)
+        if(index != -1) {
+          let data = this.cloneData(this.value)
+          data[index][key] = value
+          this.$emit('input', data)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tn-waterfall {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    
+    &__column {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: auto;
+    }
+  }
+</style>
diff --git a/tuniao-ui/iconfont.css b/tuniao-ui/iconfont.css
new file mode 100644
index 0000000..dbc77cf
--- /dev/null
+++ b/tuniao-ui/iconfont.css
@@ -0,0 +1,3309 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "tuniaoFont"; /* Project id 3063751 */
+  src: 
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3063751_1fts6hwrgsv.woff?t=1708062800672') format('woff'),
+       url('//at.alicdn.com/t/c/font_3063751_1fts6hwrgsv.ttf?t=1708062800672') format('truetype');
+}
+
+[class*='tn-icon-'] {
+  font-family: 'tuniaoFont' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  text-align: center;
+  text-decoration: none;
+}
+
+.tn-icon-budget:before {
+  content: "\ea7c";
+}
+
+.tn-icon-bank:before {
+  content: "\ea7d";
+}
+
+.tn-icon-leaf-simple:before {
+  content: "\ea76";
+}
+
+.tn-icon-charts-column-fill:before {
+  content: "\ea77";
+}
+
+.tn-icon-charts-column:before {
+  content: "\ea78";
+}
+
+.tn-icon-charts-ring-fill:before {
+  content: "\ea79";
+}
+
+.tn-icon-charts-ring:before {
+  content: "\ea7a";
+}
+
+.tn-icon-sprout:before {
+  content: "\ea7b";
+}
+
+.tn-icon-charts-pie:before {
+  content: "\ea74";
+}
+
+.tn-icon-charts-pie-fill:before {
+  content: "\ea75";
+}
+
+.tn-icon-stop-circle-fill:before {
+  content: "\ea72";
+}
+
+.tn-icon-stop-circle:before {
+  content: "\ea73";
+}
+
+.tn-icon-income:before {
+  content: "\ea70";
+}
+
+.tn-icon-income-fill:before {
+  content: "\ea71";
+}
+
+.tn-icon-menu-square-select-fill:before {
+  content: "\ea6c";
+}
+
+.tn-icon-menu-circle-select:before {
+  content: "\ea6d";
+}
+
+.tn-icon-menu-circle-select-fill:before {
+  content: "\ea6e";
+}
+
+.tn-icon-menu-square-select:before {
+  content: "\ea6f";
+}
+
+.tn-icon-stack:before {
+  content: "\ea65";
+}
+
+.tn-icon-school:before {
+  content: "\ea66";
+}
+
+.tn-icon-read:before {
+  content: "\ea67";
+}
+
+.tn-icon-medicine:before {
+  content: "\ea68";
+}
+
+.tn-icon-medicine-fill:before {
+  content: "\ea69";
+}
+
+.tn-icon-medal:before {
+  content: "\ea6a";
+}
+
+.tn-icon-basketball:before {
+  content: "\ea6b";
+}
+
+.tn-icon-transfer-circle:before {
+  content: "\ea61";
+}
+
+.tn-icon-transfer-circle-fill:before {
+  content: "\ea62";
+}
+
+.tn-icon-transfer-square:before {
+  content: "\ea63";
+}
+
+.tn-icon-transfer-square-fill:before {
+  content: "\ea64";
+}
+
+.tn-icon-stroller:before {
+  content: "\ea53";
+}
+
+.tn-icon-baby-girl:before {
+  content: "\ea54";
+}
+
+.tn-icon-baby-boy:before {
+  content: "\ea55";
+}
+
+.tn-icon-clothing-male:before {
+  content: "\ea56";
+}
+
+.tn-icon-clothing-female:before {
+  content: "\ea57";
+}
+
+.tn-icon-boy:before {
+  content: "\ea58";
+}
+
+.tn-icon-girl:before {
+  content: "\ea59";
+}
+
+.tn-icon-building:before {
+  content: "\ea5a";
+}
+
+.tn-icon-mansion:before {
+  content: "\ea5b";
+}
+
+.tn-icon-restroom-female-circle-fill:before {
+  content: "\ea5c";
+}
+
+.tn-icon-restroom-male-circle-fill:before {
+  content: "\ea5d";
+}
+
+.tn-icon-restroom-female-fill:before {
+  content: "\ea5e";
+}
+
+.tn-icon-restroom-male-fill:before {
+  content: "\ea5f";
+}
+
+.tn-icon-leaf:before {
+  content: "\ea60";
+}
+
+.tn-icon-pacman:before {
+  content: "\ea52";
+}
+
+.tn-icon-ad:before {
+  content: "\ea4e";
+}
+
+.tn-icon-ad-fill:before {
+  content: "\ea4f";
+}
+
+.tn-icon-ad-no:before {
+  content: "\ea50";
+}
+
+.tn-icon-ad-no-fill:before {
+  content: "\ea51";
+}
+
+.tn-icon-text-new:before {
+  content: "\ea4d";
+}
+
+.tn-icon-menu-set:before {
+  content: "\ea4b";
+}
+
+.tn-icon-menu-set-fill:before {
+  content: "\ea4c";
+}
+
+.tn-icon-discord:before {
+  content: "\ea48";
+}
+
+.tn-icon-android:before {
+  content: "\ea49";
+}
+
+.tn-icon-tissue:before {
+  content: "\ea4a";
+}
+
+.tn-icon-carousel:before {
+  content: "\ea47";
+}
+
+.tn-icon-dandelion:before {
+  content: "\ea46";
+}
+
+.tn-icon-coworker:before {
+  content: "\ea40";
+}
+
+.tn-icon-world:before {
+  content: "\ea41";
+}
+
+.tn-icon-discern:before {
+  content: "\ea42";
+}
+
+.tn-icon-chat:before {
+  content: "\ea43";
+}
+
+.tn-icon-reduce-lack:before {
+  content: "\ea44";
+}
+
+.tn-icon-add-lack:before {
+  content: "\ea45";
+}
+
+.tn-icon-left-circle-simple:before {
+  content: "\ea38";
+}
+
+.tn-icon-left-circle-simple-fill:before {
+  content: "\ea39";
+}
+
+.tn-icon-down-circle-simple:before {
+  content: "\ea3a";
+}
+
+.tn-icon-down-circle-simple-fill:before {
+  content: "\ea3b";
+}
+
+.tn-icon-right-circle-simple-fill:before {
+  content: "\ea3c";
+}
+
+.tn-icon-right-circle-simple:before {
+  content: "\ea3d";
+}
+
+.tn-icon-up-circle-simple:before {
+  content: "\ea3e";
+}
+
+.tn-icon-up-circle-simple-fill:before {
+  content: "\ea3f";
+}
+
+.tn-icon-my-love:before {
+  content: "\ea35";
+}
+
+.tn-icon-address-fill:before {
+  content: "\ea36";
+}
+
+.tn-icon-address:before {
+  content: "\ea37";
+}
+
+.tn-icon-like-lack-fill:before {
+  content: "\ea32";
+}
+
+.tn-icon-oa:before {
+  content: "\ea33";
+}
+
+.tn-icon-like-break-fill:before {
+  content: "\ea34";
+}
+
+.tn-icon-signal:before {
+  content: "\ea2e";
+}
+
+.tn-icon-help-question:before {
+  content: "\ea2f";
+}
+
+.tn-icon-radioactivity:before {
+  content: "\ea30";
+}
+
+.tn-icon-signal-no:before {
+  content: "\ea31";
+}
+
+.tn-icon-dice-face:before {
+  content: "\ea2d";
+}
+
+.tn-icon-vip-diamond:before {
+  content: "\e9c9";
+}
+
+.tn-icon-video-square:before {
+  content: "\e9ca";
+}
+
+.tn-icon-vip-diamond-fill:before {
+  content: "\ea29";
+}
+
+.tn-icon-vr:before {
+  content: "\ea2a";
+}
+
+.tn-icon-vr-fill:before {
+  content: "\ea2b";
+}
+
+.tn-icon-video-square-fill:before {
+  content: "\ea2c";
+}
+
+.tn-icon-arrivals:before {
+  content: "\ea27";
+}
+
+.tn-icon-departures:before {
+  content: "\ea28";
+}
+
+.tn-icon-parking:before {
+  content: "\ea26";
+}
+
+.tn-icon-fireworks:before {
+  content: "\ea25";
+}
+
+.tn-icon-cloud-fill:before {
+  content: "\ea23";
+}
+
+.tn-icon-cloud:before {
+  content: "\ea24";
+}
+
+.tn-icon-snowflake:before {
+  content: "\e949";
+}
+
+.tn-icon-prohibit:before {
+  content: "\ea22";
+}
+
+.tn-icon-honeycomb-fill:before {
+  content: "\ea20";
+}
+
+.tn-icon-honeycomb:before {
+  content: "\ea21";
+}
+
+.tn-icon-starry:before {
+  content: "\ea1e";
+}
+
+.tn-icon-vscode:before {
+  content: "\ea1f";
+}
+
+.tn-icon-tips-fill:before {
+  content: "\ea1b";
+}
+
+.tn-icon-tip:before {
+  content: "\ea1c";
+}
+
+.tn-icon-tips:before {
+  content: "\ea1d";
+}
+
+.tn-icon-write-feather-fill:before {
+  content: "\ea19";
+}
+
+.tn-icon-write-feather:before {
+  content: "\ea1a";
+}
+
+.tn-icon-eat:before {
+  content: "\e98b";
+}
+
+.tn-icon-eat-fill:before {
+  content: "\e98c";
+}
+
+.tn-icon-eat-west:before {
+  content: "\ea0f";
+}
+
+.tn-icon-eat-west-fill:before {
+  content: "\ea10";
+}
+
+.tn-icon-eat-other:before {
+  content: "\ea11";
+}
+
+.tn-icon-eat-other-fill:before {
+  content: "\ea12";
+}
+
+.tn-icon-food-fill:before {
+  content: "\ea13";
+}
+
+.tn-icon-food:before {
+  content: "\ea14";
+}
+
+.tn-icon-folder-reduce:before {
+  content: "\ea15";
+}
+
+.tn-icon-folder-add-fill:before {
+  content: "\ea16";
+}
+
+.tn-icon-folder-reduce-fill:before {
+  content: "\ea17";
+}
+
+.tn-icon-folder-add:before {
+  content: "\ea18";
+}
+
+.tn-icon-fold:before {
+  content: "\ea0d";
+}
+
+.tn-icon-unfold:before {
+  content: "\ea0e";
+}
+
+.tn-icon-refresh-simple:before {
+  content: "\ea0c";
+}
+
+.tn-icon-assign-fill:before {
+  content: "\ea0a";
+}
+
+.tn-icon-assign:before {
+  content: "\ea0b";
+}
+
+.tn-icon-praise-simple:before {
+  content: "\ea06";
+}
+
+.tn-icon-praise-simple-fill:before {
+  content: "\ea07";
+}
+
+.tn-icon-tread-simple-fill:before {
+  content: "\ea08";
+}
+
+.tn-icon-tread-simple:before {
+  content: "\ea09";
+}
+
+.tn-icon-fish:before {
+  content: "\ea05";
+}
+
+.tn-icon-pushpin-fill:before {
+  content: "\ea03";
+}
+
+.tn-icon-pushpin:before {
+  content: "\ea04";
+}
+
+.tn-icon-equal:before {
+  content: "\ea00";
+}
+
+.tn-icon-equal-fill:before {
+  content: "\ea01";
+}
+
+.tn-icon-totop-simple:before {
+  content: "\ea02";
+}
+
+.tn-icon-floral-fill:before {
+  content: "\e9fe";
+}
+
+.tn-icon-floral:before {
+  content: "\e9ff";
+}
+
+.tn-icon-my-job:before {
+  content: "\e9f9";
+}
+
+.tn-icon-my-job-fill:before {
+  content: "\e9fa";
+}
+
+.tn-icon-my-formal:before {
+  content: "\e9fb";
+}
+
+.tn-icon-my-formal-fill:before {
+  content: "\e9fc";
+}
+
+.tn-icon-history:before {
+  content: "\e9fd";
+}
+
+.tn-icon-seafox:before {
+  content: "\e9f8";
+}
+
+.tn-icon-norm-fill:before {
+  content: "\e9f6";
+}
+
+.tn-icon-norm:before {
+  content: "\e9f7";
+}
+
+.tn-icon-cargoship:before {
+  content: "\e9f5";
+}
+
+.tn-icon-menu-grille-fill:before {
+  content: "\e9f3";
+}
+
+.tn-icon-menu-grille:before {
+  content: "\e9f4";
+}
+
+.tn-icon-piggy-bank:before {
+  content: "\e9ef";
+}
+
+.tn-icon-skull-fill:before {
+  content: "\e9f0";
+}
+
+.tn-icon-skull:before {
+  content: "\e9f1";
+}
+
+.tn-icon-piggy-bank-fill:before {
+  content: "\e9f2";
+}
+
+.tn-icon-next-song:before {
+  content: "\e9eb";
+}
+
+.tn-icon-previous-song:before {
+  content: "\e9ec";
+}
+
+.tn-icon-previous-song-fill:before {
+  content: "\e9ed";
+}
+
+.tn-icon-next-song-fill:before {
+  content: "\e9ee";
+}
+
+.tn-icon-ai:before {
+  content: "\e9e9";
+}
+
+.tn-icon-ai-fill:before {
+  content: "\e9ea";
+}
+
+.tn-icon-headset-fill:before {
+  content: "\e9e8";
+}
+
+.tn-icon-reduce-rhombus-fill:before {
+  content: "\e9e6";
+}
+
+.tn-icon-reduce-rhombus:before {
+  content: "\e9e7";
+}
+
+.tn-icon-umbrella-fill:before {
+  content: "\e9a1";
+}
+
+.tn-icon-footprint-fill:before {
+  content: "\e992";
+}
+
+.tn-icon-folder:before {
+  content: "\e9df";
+}
+
+.tn-icon-folder-fill:before {
+  content: "\e9e0";
+}
+
+.tn-icon-folder-download-fill:before {
+  content: "\e9e1";
+}
+
+.tn-icon-pyramid:before {
+  content: "\e9e2";
+}
+
+.tn-icon-folder-upload:before {
+  content: "\e9e3";
+}
+
+.tn-icon-folder-download:before {
+  content: "\e9e4";
+}
+
+.tn-icon-folder-upload-fill:before {
+  content: "\e9e5";
+}
+
+.tn-icon-hotspot:before {
+  content: "\e9dc";
+}
+
+.tn-icon-router:before {
+  content: "\e9dd";
+}
+
+.tn-icon-router-fill:before {
+  content: "\e9de";
+}
+
+.tn-icon-menu-rhombus:before {
+  content: "\e9da";
+}
+
+.tn-icon-menu-rhombus-fill:before {
+  content: "\e9db";
+}
+
+.tn-icon-plane-fill:before {
+  content: "\e9d8";
+}
+
+.tn-icon-plane:before {
+  content: "\e9d9";
+}
+
+.tn-icon-spiral:before {
+  content: "\e9d2";
+}
+
+.tn-icon-lotus:before {
+  content: "\e9d3";
+}
+
+.tn-icon-koi:before {
+  content: "\e9d4";
+}
+
+.tn-icon-koi-fill:before {
+  content: "\e9d5";
+}
+
+.tn-icon-add-rhombus-fill:before {
+  content: "\e9d6";
+}
+
+.tn-icon-add-rhombus:before {
+  content: "\e9d7";
+}
+
+.tn-icon-bookmark:before {
+  content: "\e9ce";
+}
+
+.tn-icon-bookmark-fill:before {
+  content: "\e9cf";
+}
+
+.tn-icon-refresh:before {
+  content: "\e9d0";
+}
+
+.tn-icon-refresh-square:before {
+  content: "\e9d1";
+}
+
+.tn-icon-tread-fill:before {
+  content: "\e9cb";
+}
+
+.tn-icon-audio:before {
+  content: "\e9cc";
+}
+
+.tn-icon-tread:before {
+  content: "\e9cd";
+}
+
+.tn-icon-play:before {
+  content: "\e9c8";
+}
+
+.tn-icon-inventory-fill:before {
+  content: "\e9c3";
+}
+
+.tn-icon-percent-fill:before {
+  content: "\e9c4";
+}
+
+.tn-icon-percent:before {
+  content: "\e9c5";
+}
+
+.tn-icon-inventory:before {
+  content: "\e9c6";
+}
+
+.tn-icon-activity:before {
+  content: "\e9c7";
+}
+
+.tn-icon-qr-code-circle:before {
+  content: "\e9c2";
+}
+
+.tn-icon-task-fill:before {
+  content: "\e9c0";
+}
+
+.tn-icon-task:before {
+  content: "\e9c1";
+}
+
+.tn-icon-text-best:before {
+  content: "\e9be";
+}
+
+.tn-icon-text-free:before {
+  content: "\e9bf";
+}
+
+.tn-icon-text-zgs:before {
+  content: "\e8ff";
+}
+
+.tn-icon-text-xzx:before {
+  content: "\e9ba";
+}
+
+.tn-icon-text-like:before {
+  content: "\e9bb";
+}
+
+.tn-icon-text-sale:before {
+  content: "\e9bc";
+}
+
+.tn-icon-text-hot:before {
+  content: "\e9bd";
+}
+
+.tn-icon-home-leaf:before {
+  content: "\e9b8";
+}
+
+.tn-icon-home-leaf-fill:before {
+  content: "\e9b9";
+}
+
+.tn-icon-service-simple-fill:before {
+  content: "\e9b6";
+}
+
+.tn-icon-service-simple:before {
+  content: "\e9b7";
+}
+
+.tn-icon-meteor-fill:before {
+  content: "\e9b4";
+}
+
+.tn-icon-meteor:before {
+  content: "\e9b5";
+}
+
+.tn-icon-dice-five:before {
+  content: "\e9ae";
+}
+
+.tn-icon-dice-one:before {
+  content: "\e9af";
+}
+
+.tn-icon-dice-three:before {
+  content: "\e9b0";
+}
+
+.tn-icon-dice-six:before {
+  content: "\e9b1";
+}
+
+.tn-icon-dice-four:before {
+  content: "\e9b2";
+}
+
+.tn-icon-dice-two:before {
+  content: "\e9b3";
+}
+
+.tn-icon-theme-fill:before {
+  content: "\e938";
+}
+
+.tn-icon-theme:before {
+  content: "\e9ad";
+}
+
+.tn-icon-download-simple:before {
+  content: "\e9ab";
+}
+
+.tn-icon-upload-simple:before {
+  content: "\e9ac";
+}
+
+.tn-icon-on:before {
+  content: "\e9a9";
+}
+
+.tn-icon-off:before {
+  content: "\e9aa";
+}
+
+.tn-icon-my-circle:before {
+  content: "\e9a7";
+}
+
+.tn-icon-my-circle-fill:before {
+  content: "\e9a8";
+}
+
+.tn-icon-temperature-f:before {
+  content: "\e9a5";
+}
+
+.tn-icon-temperature-c:before {
+  content: "\e9a6";
+}
+
+.tn-icon-sunrise:before {
+  content: "\e9a3";
+}
+
+.tn-icon-sunset:before {
+  content: "\e9a4";
+}
+
+.tn-icon-password:before {
+  content: "\e9a0";
+}
+
+.tn-icon-umbrella:before {
+  content: "\e9a2";
+}
+
+.tn-icon-unite:before {
+  content: "\e999";
+}
+
+.tn-icon-unite-fill:before {
+  content: "\e99a";
+}
+
+.tn-icon-global:before {
+  content: "\e99b";
+}
+
+.tn-icon-reload-home:before {
+  content: "\e99c";
+}
+
+.tn-icon-reload-planet:before {
+  content: "\e99d";
+}
+
+.tn-icon-reload-home-fill:before {
+  content: "\e99e";
+}
+
+.tn-icon-reload-planet-fill:before {
+  content: "\e99f";
+}
+
+.tn-icon-route:before {
+  content: "\e997";
+}
+
+.tn-icon-route-fill:before {
+  content: "\e998";
+}
+
+.tn-icon-my-simple-fill:before {
+  content: "\e98e";
+}
+
+.tn-icon-my-simple:before {
+  content: "\e98f";
+}
+
+.tn-icon-around-fill:before {
+  content: "\e990";
+}
+
+.tn-icon-around:before {
+  content: "\e991";
+}
+
+.tn-icon-footprint:before {
+  content: "\e993";
+}
+
+.tn-icon-my-lack-fill:before {
+  content: "\e994";
+}
+
+.tn-icon-my-lack:before {
+  content: "\e995";
+}
+
+.tn-icon-bigscreen:before {
+  content: "\e996";
+}
+
+.tn-icon-escalator:before {
+  content: "\e98d";
+}
+
+.tn-icon-suitcase:before {
+  content: "\e989";
+}
+
+.tn-icon-suitcase-fill:before {
+  content: "\e98a";
+}
+
+.tn-icon-add-square-fill:before {
+  content: "\e904";
+}
+
+.tn-icon-cute:before {
+  content: "\e988";
+}
+
+.tn-icon-compress:before {
+  content: "\e96e";
+}
+
+.tn-icon-expend:before {
+  content: "\e96f";
+}
+
+.tn-icon-windows:before {
+  content: "\e970";
+}
+
+.tn-icon-trademark:before {
+  content: "\e971";
+}
+
+.tn-icon-tailor:before {
+  content: "\e972";
+}
+
+.tn-icon-move:before {
+  content: "\e973";
+}
+
+.tn-icon-pillow:before {
+  content: "\e974";
+}
+
+.tn-icon-bathtub:before {
+  content: "\e975";
+}
+
+.tn-icon-buy:before {
+  content: "\e976";
+}
+
+.tn-icon-buy-fill:before {
+  content: "\e977";
+}
+
+.tn-icon-allday:before {
+  content: "\e978";
+}
+
+.tn-icon-home-love-fill:before {
+  content: "\e979";
+}
+
+.tn-icon-home-love:before {
+  content: "\e97a";
+}
+
+.tn-icon-gesture-two:before {
+  content: "\e97b";
+}
+
+.tn-icon-gesture-four:before {
+  content: "\e97c";
+}
+
+.tn-icon-gesture-five:before {
+  content: "\e97d";
+}
+
+.tn-icon-gesture-one:before {
+  content: "\e97e";
+}
+
+.tn-icon-gesture-three:before {
+  content: "\e97f";
+}
+
+.tn-icon-gesture-dropdown:before {
+  content: "\e980";
+}
+
+.tn-icon-plant-fill:before {
+  content: "\e981";
+}
+
+.tn-icon-plant:before {
+  content: "\e982";
+}
+
+.tn-icon-pillow-fill:before {
+  content: "\e983";
+}
+
+.tn-icon-bathtub-fill:before {
+  content: "\e984";
+}
+
+.tn-icon-wheelchair:before {
+  content: "\e985";
+}
+
+.tn-icon-narrow-all:before {
+  content: "\e986";
+}
+
+.tn-icon-fullscreen-all:before {
+  content: "\e987";
+}
+
+.tn-icon-close-square-fill:before {
+  content: "\e945";
+}
+
+.tn-icon-add-square:before {
+  content: "\e962";
+}
+
+.tn-icon-close-square:before {
+  content: "\e963";
+}
+
+.tn-icon-my-reduce:before {
+  content: "\e964";
+}
+
+.tn-icon-square-fill:before {
+  content: "\e965";
+}
+
+.tn-icon-pay-fill:before {
+  content: "\e966";
+}
+
+.tn-icon-commissary:before {
+  content: "\e967";
+}
+
+.tn-icon-commissary-fill:before {
+  content: "\e968";
+}
+
+.tn-icon-notice-no-fill:before {
+  content: "\e969";
+}
+
+.tn-icon-cross-fill:before {
+  content: "\e96a";
+}
+
+.tn-icon-nintendo-switch:before {
+  content: "\e96b";
+}
+
+.tn-icon-mammoth:before {
+  content: "\e96c";
+}
+
+.tn-icon-open:before {
+  content: "\e96d";
+}
+
+.tn-icon-bed-fill:before {
+  content: "\e916";
+}
+
+.tn-icon-bed:before {
+  content: "\e961";
+}
+
+.tn-icon-menu-flex-fill:before {
+  content: "\e956";
+}
+
+.tn-icon-menu-flex:before {
+  content: "\e957";
+}
+
+.tn-icon-logistics-fill:before {
+  content: "\e958";
+}
+
+.tn-icon-ghost-fill:before {
+  content: "\e959";
+}
+
+.tn-icon-keyboard-circle-fill:before {
+  content: "\e95a";
+}
+
+.tn-icon-brand-fill:before {
+  content: "\e95b";
+}
+
+.tn-icon-clear-fill:before {
+  content: "\e95c";
+}
+
+.tn-icon-mouse-fill:before {
+  content: "\e95d";
+}
+
+.tn-icon-brand:before {
+  content: "\e95e";
+}
+
+.tn-icon-monitor-fill:before {
+  content: "\e95f";
+}
+
+.tn-icon-covid-19-fill:before {
+  content: "\e960";
+}
+
+.tn-icon-install-fill:before {
+  content: "\e936";
+}
+
+.tn-icon-install:before {
+  content: "\e955";
+}
+
+.tn-icon-restroom-female:before {
+  content: "\e953";
+}
+
+.tn-icon-restroom-male:before {
+  content: "\e954";
+}
+
+.tn-icon-first:before {
+  content: "\e950";
+}
+
+.tn-icon-third:before {
+  content: "\e951";
+}
+
+.tn-icon-second:before {
+  content: "\e952";
+}
+
+.tn-icon-ninja:before {
+  content: "\e94b";
+}
+
+.tn-icon-program:before {
+  content: "\e94c";
+}
+
+.tn-icon-program-fill:before {
+  content: "\e94d";
+}
+
+.tn-icon-circle-more:before {
+  content: "\e94e";
+}
+
+.tn-icon-windmill:before {
+  content: "\e94f";
+}
+
+.tn-icon-alien:before {
+  content: "\e946";
+}
+
+.tn-icon-taichi:before {
+  content: "\e947";
+}
+
+.tn-icon-knot:before {
+  content: "\e948";
+}
+
+.tn-icon-whale:before {
+  content: "\e94a";
+}
+
+.tn-icon-dragon:before {
+  content: "\e944";
+}
+
+.tn-icon-home-in-fill:before {
+  content: "\e942";
+}
+
+.tn-icon-home-in:before {
+  content: "\e943";
+}
+
+.tn-icon-home-loading:before {
+  content: "\e940";
+}
+
+.tn-icon-home-loading-fill:before {
+  content: "\e941";
+}
+
+.tn-icon-cell:before {
+  content: "\e93b";
+}
+
+.tn-icon-loading:before {
+  content: "\e93c";
+}
+
+.tn-icon-orange:before {
+  content: "\e93d";
+}
+
+.tn-icon-bigbug:before {
+  content: "\e93e";
+}
+
+.tn-icon-dinosaur:before {
+  content: "\e93f";
+}
+
+.tn-icon-dna:before {
+  content: "\e931";
+}
+
+.tn-icon-chain:before {
+  content: "\e932";
+}
+
+.tn-icon-email:before {
+  content: "\e933";
+}
+
+.tn-icon-education:before {
+  content: "\e934";
+}
+
+.tn-icon-english:before {
+  content: "\e935";
+}
+
+.tn-icon-seal:before {
+  content: "\e937";
+}
+
+.tn-icon-book:before {
+  content: "\e939";
+}
+
+.tn-icon-email-fill:before {
+  content: "\e93a";
+}
+
+.tn-icon-maths:before {
+  content: "\e92f";
+}
+
+.tn-icon-molecule:before {
+  content: "\e930";
+}
+
+.tn-icon-ghost:before {
+  content: "\e92d";
+}
+
+.tn-icon-money-fill:before {
+  content: "\e92e";
+}
+
+.tn-icon-menu-alone:before {
+  content: "\e929";
+}
+
+.tn-icon-menu-alone-fill:before {
+  content: "\e92a";
+}
+
+.tn-icon-tree:before {
+  content: "\e92b";
+}
+
+.tn-icon-rabbit:before {
+  content: "\e92c";
+}
+
+.tn-icon-block-fill:before {
+  content: "\e925";
+}
+
+.tn-icon-block:before {
+  content: "\e926";
+}
+
+.tn-icon-menu-classify:before {
+  content: "\e927";
+}
+
+.tn-icon-menu-classify-fill:before {
+  content: "\e928";
+}
+
+.tn-icon-home-totop-fill:before {
+  content: "\e923";
+}
+
+.tn-icon-home-totop:before {
+  content: "\e924";
+}
+
+.tn-icon-petal:before {
+  content: "\e920";
+}
+
+.tn-icon-clover-fill:before {
+  content: "\e921";
+}
+
+.tn-icon-clover:before {
+  content: "\e922";
+}
+
+.tn-icon-heartbeat:before {
+  content: "\e917";
+}
+
+.tn-icon-paperbag:before {
+  content: "\e918";
+}
+
+.tn-icon-paperbag-fill:before {
+  content: "\e919";
+}
+
+.tn-icon-menu-match:before {
+  content: "\e91a";
+}
+
+.tn-icon-menu-match-fill:before {
+  content: "\e91b";
+}
+
+.tn-icon-sofa-fill:before {
+  content: "\e91c";
+}
+
+.tn-icon-fullscreen:before {
+  content: "\e91d";
+}
+
+.tn-icon-narrow:before {
+  content: "\e91e";
+}
+
+.tn-icon-smallscreen:before {
+  content: "\e91f";
+}
+
+.tn-icon-payment-wechat:before {
+  content: "\e90a";
+}
+
+.tn-icon-cursor:before {
+  content: "\e912";
+}
+
+.tn-icon-cursor-fill:before {
+  content: "\e913";
+}
+
+.tn-icon-check:before {
+  content: "\e914";
+}
+
+.tn-icon-payment-alipay:before {
+  content: "\e915";
+}
+
+.tn-icon-dashboard:before {
+  content: "\e90b";
+}
+
+.tn-icon-module:before {
+  content: "\e90c";
+}
+
+.tn-icon-at-sign:before {
+  content: "\e90d";
+}
+
+.tn-icon-copyright:before {
+  content: "\e90e";
+}
+
+.tn-icon-pin:before {
+  content: "\e90f";
+}
+
+.tn-icon-module-fill:before {
+  content: "\e910";
+}
+
+.tn-icon-dashboard-fill:before {
+  content: "\e911";
+}
+
+.tn-icon-birthday:before {
+  content: "\e905";
+}
+
+.tn-icon-sofa:before {
+  content: "\e906";
+}
+
+.tn-icon-iot:before {
+  content: "\e907";
+}
+
+.tn-icon-monitor:before {
+  content: "\e908";
+}
+
+.tn-icon-iot-fill:before {
+  content: "\e909";
+}
+
+.tn-icon-tabs-smile:before {
+  content: "\e900";
+}
+
+.tn-icon-huawei:before {
+  content: "\e901";
+}
+
+.tn-icon-iphone:before {
+  content: "\e902";
+}
+
+.tn-icon-tiktok:before {
+  content: "\e903";
+}
+
+.tn-icon-sword-fill:before {
+  content: "\e8fa";
+}
+
+.tn-icon-job-fill:before {
+  content: "\e8fb";
+}
+
+.tn-icon-rocket-fill:before {
+  content: "\e8fc";
+}
+
+.tn-icon-totop:before {
+  content: "\e8fd";
+}
+
+.tn-icon-totop-fill:before {
+  content: "\e8fe";
+}
+
+.tn-icon-logout:before {
+  content: "\e8f8";
+}
+
+.tn-icon-login:before {
+  content: "\e8f9";
+}
+
+.tn-icon-expand:before {
+  content: "\e8f7";
+}
+
+.tn-icon-bug:before {
+  content: "\e8e3";
+}
+
+.tn-icon-bug-fill:before {
+  content: "\e8e4";
+}
+
+.tn-icon-company-fill:before {
+  content: "\e8e5";
+}
+
+.tn-icon-edit-write-fill:before {
+  content: "\e8e6";
+}
+
+.tn-icon-menu-circle-fill:before {
+  content: "\e8e7";
+}
+
+.tn-icon-level-fill:before {
+  content: "\e8e8";
+}
+
+.tn-icon-menu-fill:before {
+  content: "\e8e9";
+}
+
+.tn-icon-science-fill:before {
+  content: "\e8ea";
+}
+
+.tn-icon-deploy-fill:before {
+  content: "\e8eb";
+}
+
+.tn-icon-menu-more-fill:before {
+  content: "\e8ec";
+}
+
+.tn-icon-search-menu-fill:before {
+  content: "\e8ed";
+}
+
+.tn-icon-organizatio-fill:before {
+  content: "\e8ee";
+}
+
+.tn-icon-platform-fill:before {
+  content: "\e8ef";
+}
+
+.tn-icon-platform:before {
+  content: "\e8f0";
+}
+
+.tn-icon-search-list-fill:before {
+  content: "\e8f1";
+}
+
+.tn-icon-menu-sort-fill:before {
+  content: "\e8f2";
+}
+
+.tn-icon-cube-fill:before {
+  content: "\e8f3";
+}
+
+.tn-icon-menu-sorts-fill:before {
+  content: "\e8f4";
+}
+
+.tn-icon-server-fill:before {
+  content: "\e8f5";
+}
+
+.tn-icon-menu-list-fill:before {
+  content: "\e8f6";
+}
+
+.tn-icon-errands:before {
+  content: "\e8df";
+}
+
+.tn-icon-errands-fill:before {
+  content: "\e8e0";
+}
+
+.tn-icon-delivery-fill:before {
+  content: "\e8e1";
+}
+
+.tn-icon-delivery:before {
+  content: "\e8e2";
+}
+
+.tn-icon-vip-text:before {
+  content: "\e8dc";
+}
+
+.tn-icon-panda:before {
+  content: "\e8dd";
+}
+
+.tn-icon-logo-shangpu:before {
+  content: "\e8de";
+}
+
+.tn-icon-mouse:before {
+  content: "\e8db";
+}
+
+.tn-icon-notebook-fill:before {
+  content: "\e8da";
+}
+
+.tn-icon-headset:before {
+  content: "\e8d8";
+}
+
+.tn-icon-shears:before {
+  content: "\e8d9";
+}
+
+.tn-icon-notebook:before {
+  content: "\e8d7";
+}
+
+.tn-icon-battery-empty:before {
+  content: "\e8d1";
+}
+
+.tn-icon-battery-low:before {
+  content: "\e8d2";
+}
+
+.tn-icon-battery-mid:before {
+  content: "\e8d3";
+}
+
+.tn-icon-battery-high:before {
+  content: "\e8d4";
+}
+
+.tn-icon-battery-full:before {
+  content: "\e8d5";
+}
+
+.tn-icon-bluetooth:before {
+  content: "\e8d6";
+}
+
+.tn-icon-science:before {
+  content: "\e8cf";
+}
+
+.tn-icon-clip:before {
+  content: "\e8d0";
+}
+
+.tn-icon-con-aquarius:before {
+  content: "\e8c2";
+}
+
+.tn-icon-con-pisces:before {
+  content: "\e8c3";
+}
+
+.tn-icon-con-aries:before {
+  content: "\e8c4";
+}
+
+.tn-icon-con-taurus:before {
+  content: "\e8c5";
+}
+
+.tn-icon-con-gemini:before {
+  content: "\e8c6";
+}
+
+.tn-icon-con-cancer:before {
+  content: "\e8c7";
+}
+
+.tn-icon-con-leo:before {
+  content: "\e8c8";
+}
+
+.tn-icon-con-virgo:before {
+  content: "\e8c9";
+}
+
+.tn-icon-con-libra:before {
+  content: "\e8ca";
+}
+
+.tn-icon-con-scorpio:before {
+  content: "\e8cb";
+}
+
+.tn-icon-con-sagittarius:before {
+  content: "\e8cc";
+}
+
+.tn-icon-con-apricorn:before {
+  content: "\e8cd";
+}
+
+.tn-icon-constellation:before {
+  content: "\e8ce";
+}
+
+.tn-icon-wea-cloud-more:before {
+  content: "\e8b9";
+}
+
+.tn-icon-wea-cloud:before {
+  content: "\e8ba";
+}
+
+.tn-icon-wea-cloud-sun:before {
+  content: "\e8bb";
+}
+
+.tn-icon-wea-rain:before {
+  content: "\e8bc";
+}
+
+.tn-icon-wea-rain-middle:before {
+  content: "\e8bd";
+}
+
+.tn-icon-wea-rain-heavy:before {
+  content: "\e8be";
+}
+
+.tn-icon-wea-snow:before {
+  content: "\e8bf";
+}
+
+.tn-icon-wea-wind:before {
+  content: "\e8c0";
+}
+
+.tn-icon-wea-sun:before {
+  content: "\e8c1";
+}
+
+.tn-icon-empty-data:before {
+  content: "\e8ab";
+}
+
+.tn-icon-empty-message:before {
+  content: "\e8ac";
+}
+
+.tn-icon-empty-cart:before {
+  content: "\e8ad";
+}
+
+.tn-icon-empty-history:before {
+  content: "\e8ae";
+}
+
+.tn-icon-empty-favor:before {
+  content: "\e8af";
+}
+
+.tn-icon-empty-list:before {
+  content: "\e8b0";
+}
+
+.tn-icon-empty-network:before {
+  content: "\e8b1";
+}
+
+.tn-icon-empty-search:before {
+  content: "\e8b2";
+}
+
+.tn-icon-empty-order:before {
+  content: "\e8b3";
+}
+
+.tn-icon-empty-comment:before {
+  content: "\e8b4";
+}
+
+.tn-icon-empty-coupon:before {
+  content: "\e8b5";
+}
+
+.tn-icon-empty-address:before {
+  content: "\e8b6";
+}
+
+.tn-icon-empty-permission:before {
+  content: "\e8b7";
+}
+
+.tn-icon-empty-page:before {
+  content: "\e8b8";
+}
+
+.tn-icon-job:before {
+  content: "\e8aa";
+}
+
+.tn-icon-rocket:before {
+  content: "\e8a5";
+}
+
+.tn-icon-sword:before {
+  content: "\e8a6";
+}
+
+.tn-icon-notice-no:before {
+  content: "\e8a7";
+}
+
+.tn-icon-notice-fill:before {
+  content: "\e8a8";
+}
+
+.tn-icon-notice:before {
+  content: "\e8a9";
+}
+
+.tn-icon-font:before {
+  content: "\e8a4";
+}
+
+.tn-icon-chemistry:before {
+  content: "\e8a3";
+}
+
+.tn-icon-biology:before {
+  content: "\e8a2";
+}
+
+.tn-icon-level:before {
+  content: "\e8a0";
+}
+
+.tn-icon-deploy:before {
+  content: "\e8a1";
+}
+
+.tn-icon-server:before {
+  content: "\e89f";
+}
+
+.tn-icon-cube:before {
+  content: "\e89e";
+}
+
+.tn-icon-organizatio:before {
+  content: "\e89d";
+}
+
+.tn-icon-company:before {
+  content: "\e89c";
+}
+
+.tn-icon-pharmacy:before {
+  content: "\e89b";
+}
+
+.tn-icon-medical:before {
+  content: "\e89a";
+}
+
+.tn-icon-my-add:before {
+  content: "\e898";
+}
+
+.tn-icon-my:before {
+  content: "\e897";
+}
+
+.tn-icon-my-fill:before {
+  content: "\e896";
+}
+
+.tn-icon-trust:before {
+  content: "\e895";
+}
+
+.tn-icon-trust-fill:before {
+  content: "\e894";
+}
+
+.tn-icon-moon:before {
+  content: "\e893";
+}
+
+.tn-icon-moon-fill:before {
+  content: "\e892";
+}
+
+.tn-icon-funds:before {
+  content: "\e891";
+}
+
+.tn-icon-funds-fill:before {
+  content: "\e890";
+}
+
+.tn-icon-signpost:before {
+  content: "\e88f";
+}
+
+.tn-icon-signpost-fill:before {
+  content: "\e88e";
+}
+
+.tn-icon-vip:before {
+  content: "\e88d";
+}
+
+.tn-icon-vip-fill:before {
+  content: "\e88c";
+}
+
+.tn-icon-hardware:before {
+  content: "\e88b";
+}
+
+.tn-icon-hardware-fill:before {
+  content: "\e88a";
+}
+
+.tn-icon-honor:before {
+  content: "\e889";
+}
+
+.tn-icon-honor-fill:before {
+  content: "\e888";
+}
+
+.tn-icon-count:before {
+  content: "\e887";
+}
+
+.tn-icon-count-fill:before {
+  content: "\e886";
+}
+
+.tn-icon-discover-planet:before {
+  content: "\e885";
+}
+
+.tn-icon-discover-planet-fill:before {
+  content: "\e884";
+}
+
+.tn-icon-discover:before {
+  content: "\e883";
+}
+
+.tn-icon-discover-fill:before {
+  content: "\e882";
+}
+
+.tn-icon-home:before {
+  content: "\e881";
+}
+
+.tn-icon-home-fill:before {
+  content: "\e880";
+}
+
+.tn-icon-home-vertical:before {
+  content: "\e87f";
+}
+
+.tn-icon-home-vertical-fill:before {
+  content: "\e87e";
+}
+
+.tn-icon-home-smile:before {
+  content: "\e87d";
+}
+
+.tn-icon-home-smile-fill:before {
+  content: "\e87c";
+}
+
+.tn-icon-home-capsule:before {
+  content: "\e87b";
+}
+
+.tn-icon-home-capsule-fill:before {
+  content: "\e87a";
+}
+
+.tn-icon-focus:before {
+  content: "\e878";
+}
+
+.tn-icon-all:before {
+  content: "\e877";
+}
+
+.tn-icon-assort-fill:before {
+  content: "\e876";
+}
+
+.tn-icon-assort:before {
+  content: "\e875";
+}
+
+.tn-icon-menu-list:before {
+  content: "\e874";
+}
+
+.tn-icon-menu-sorts:before {
+  content: "\e873";
+}
+
+.tn-icon-menu-sort:before {
+  content: "\e872";
+}
+
+.tn-icon-menu-more:before {
+  content: "\e871";
+}
+
+.tn-icon-menu:before {
+  content: "\e870";
+}
+
+.tn-icon-menu-circle:before {
+  content: "\e86f";
+}
+
+.tn-icon-search-menu:before {
+  content: "\e86e";
+}
+
+.tn-icon-search-list:before {
+  content: "\e86d";
+}
+
+.tn-icon-search:before {
+  content: "\e86c";
+}
+
+.tn-icon-link:before {
+  content: "\e86b";
+}
+
+.tn-icon-code:before {
+  content: "\e869";
+}
+
+.tn-icon-computer:before {
+  content: "\e868";
+}
+
+.tn-icon-computer-fill:before {
+  content: "\e867";
+}
+
+.tn-icon-ipad:before {
+  content: "\e866";
+}
+
+.tn-icon-ipad-fill:before {
+  content: "\e865";
+}
+
+.tn-icon-phone:before {
+  content: "\e864";
+}
+
+.tn-icon-phone-fill:before {
+  content: "\e863";
+}
+
+.tn-icon-tel:before {
+  content: "\e862";
+}
+
+.tn-icon-tel-circle-fill:before {
+  content: "\e860";
+}
+
+.tn-icon-tel-circle:before {
+  content: "\e861";
+}
+
+.tn-icon-watercup:before {
+  content: "\e85f";
+}
+
+.tn-icon-gloves-fill:before {
+  content: "\e85d";
+}
+
+.tn-icon-gloves:before {
+  content: "\e85e";
+}
+
+.tn-icon-covid-19:before {
+  content: "\e85c";
+}
+
+.tn-icon-sport-jog:before {
+  content: "\e858";
+}
+
+.tn-icon-sport-run:before {
+  content: "\e859";
+}
+
+.tn-icon-sport-swim:before {
+  content: "\e85a";
+}
+
+.tn-icon-sport-cycle:before {
+  content: "\e85b";
+}
+
+.tn-icon-airplane:before {
+  content: "\e857";
+}
+
+.tn-icon-train:before {
+  content: "\e855";
+}
+
+.tn-icon-steamship:before {
+  content: "\e856";
+}
+
+.tn-icon-bus:before {
+  content: "\e854";
+}
+
+.tn-icon-balancecar:before {
+  content: "\e853";
+}
+
+.tn-icon-electromobile:before {
+  content: "\e852";
+}
+
+.tn-icon-zodiac-zhu:before {
+  content: "\e851";
+}
+
+.tn-icon-zodiac-gou:before {
+  content: "\e850";
+}
+
+.tn-icon-zodiac-ji:before {
+  content: "\e84f";
+}
+
+.tn-icon-zodiac-hou:before {
+  content: "\e84e";
+}
+
+.tn-icon-zodiac-yang:before {
+  content: "\e84d";
+}
+
+.tn-icon-zodiac-ma:before {
+  content: "\e84c";
+}
+
+.tn-icon-zodiac-she:before {
+  content: "\e84b";
+}
+
+.tn-icon-zodiac-long:before {
+  content: "\e84a";
+}
+
+.tn-icon-zodiac-tu:before {
+  content: "\e849";
+}
+
+.tn-icon-zodiac-hu:before {
+  content: "\e848";
+}
+
+.tn-icon-zodiac-niu:before {
+  content: "\e847";
+}
+
+.tn-icon-zodiac-shu:before {
+  content: "\e846";
+}
+
+.tn-icon-lucky-money:before {
+  content: "\e844";
+}
+
+.tn-icon-lucky-money-fill:before {
+  content: "\e845";
+}
+
+.tn-icon-prize:before {
+  content: "\e842";
+}
+
+.tn-icon-gift:before {
+  content: "\e843";
+}
+
+.tn-icon-pay:before {
+  content: "\e841";
+}
+
+.tn-icon-refund:before {
+  content: "\e840";
+}
+
+.tn-icon-money:before {
+  content: "\e83f";
+}
+
+.tn-icon-power:before {
+  content: "\e83e";
+}
+
+.tn-icon-fingerprint:before {
+  content: "\e83d";
+}
+
+.tn-icon-qr-beibei:before {
+  content: "\e83c";
+}
+
+.tn-icon-qr-code:before {
+  content: "\e83b";
+}
+
+.tn-icon-qr-barcode:before {
+  content: "\e83a";
+}
+
+.tn-icon-scan:before {
+  content: "\e839";
+}
+
+.tn-icon-revoke:before {
+  content: "\e837";
+}
+
+.tn-icon-filter:before {
+  content: "\e838";
+}
+
+.tn-icon-upload:before {
+  content: "\e835";
+}
+
+.tn-icon-download:before {
+  content: "\e836";
+}
+
+.tn-icon-fork:before {
+  content: "\e832";
+}
+
+.tn-icon-relation:before {
+  content: "\e833";
+}
+
+.tn-icon-master:before {
+  content: "\e834";
+}
+
+.tn-icon-facebook:before {
+  content: "\e82e";
+}
+
+.tn-icon-google:before {
+  content: "\e82f";
+}
+
+.tn-icon-linkedin:before {
+  content: "\e830";
+}
+
+.tn-icon-twitter:before {
+  content: "\e831";
+}
+
+.tn-icon-logo-tuniao:before {
+  content: "\e82d";
+}
+
+.tn-icon-sina:before {
+  content: "\e82b";
+}
+
+.tn-icon-taobao:before {
+  content: "\e82c";
+}
+
+.tn-icon-gitee:before {
+  content: "\e82a";
+}
+
+.tn-icon-github:before {
+  content: "\e829";
+}
+
+.tn-icon-dingtalk:before {
+  content: "\e828";
+}
+
+.tn-icon-alipay:before {
+  content: "\e827";
+}
+
+.tn-icon-qq:before {
+  content: "\e826";
+}
+
+.tn-icon-moments:before {
+  content: "\e825";
+}
+
+.tn-icon-wechat:before {
+  content: "\e824";
+}
+
+.tn-icon-wechat-fill:before {
+  content: "\e823";
+}
+
+.tn-icon-service:before {
+  content: "\e821";
+}
+
+.tn-icon-service-fill:before {
+  content: "\e822";
+}
+
+.tn-icon-team:before {
+  content: "\e81f";
+}
+
+.tn-icon-team-fill:before {
+  content: "\e820";
+}
+
+.tn-icon-emoji-sad:before {
+  content: "\e81e";
+}
+
+.tn-icon-emoji-sad-fill:before {
+  content: "\e81d";
+}
+
+.tn-icon-emoji-general:before {
+  content: "\e81b";
+}
+
+.tn-icon-emoji-general-fill:before {
+  content: "\e818";
+}
+
+.tn-icon-emoji-good:before {
+  content: "\e817";
+}
+
+.tn-icon-emoji-good-fill:before {
+  content: "\e816";
+}
+
+.tn-icon-clock:before {
+  content: "\e812";
+}
+
+.tn-icon-clock-fill:before {
+  content: "\e813";
+}
+
+.tn-icon-time-fill:before {
+  content: "\e7d9";
+}
+
+.tn-icon-time:before {
+  content: "\e7dc";
+}
+
+.tn-icon-delete:before {
+  content: "\e7d6";
+}
+
+.tn-icon-delete-fill:before {
+  content: "\e7d7";
+}
+
+.tn-icon-clear:before {
+  content: "\e7d5";
+}
+
+.tn-icon-set:before {
+  content: "\e7d1";
+}
+
+.tn-icon-set-fill:before {
+  content: "\e7d2";
+}
+
+.tn-icon-keyboard-circle:before {
+  content: "\e810";
+}
+
+.tn-icon-keyboard:before {
+  content: "\e811";
+}
+
+.tn-icon-wifi-no:before {
+  content: "\e81c";
+}
+
+.tn-icon-wifi:before {
+  content: "\e7d0";
+}
+
+.tn-icon-creative-stop:before {
+  content: "\e819";
+}
+
+.tn-icon-creative-stop-fill:before {
+  content: "\e81a";
+}
+
+.tn-icon-creative-fill:before {
+  content: "\e80e";
+}
+
+.tn-icon-creative:before {
+  content: "\e80f";
+}
+
+.tn-icon-trophy-fill:before {
+  content: "\e80a";
+}
+
+.tn-icon-trophy:before {
+  content: "\e80b";
+}
+
+.tn-icon-game-fill:before {
+  content: "\e808";
+}
+
+.tn-icon-game:before {
+  content: "\e809";
+}
+
+.tn-icon-tag-fill:before {
+  content: "\e806";
+}
+
+.tn-icon-tag:before {
+  content: "\e807";
+}
+
+.tn-icon-logistics:before {
+  content: "\e7cf";
+}
+
+.tn-icon-taxi-fill:before {
+  content: "\e800";
+}
+
+.tn-icon-taxi:before {
+  content: "\e805";
+}
+
+.tn-icon-flag:before {
+  content: "\e7f5";
+}
+
+.tn-icon-flag-fill:before {
+  content: "\e7ff";
+}
+
+.tn-icon-baby:before {
+  content: "\e7f1";
+}
+
+.tn-icon-baby-fill:before {
+  content: "\e7f4";
+}
+
+.tn-icon-shop:before {
+  content: "\e7cd";
+}
+
+.tn-icon-shop-fill:before {
+  content: "\e7ce";
+}
+
+.tn-icon-coupon-fill:before {
+  content: "\e7c8";
+}
+
+.tn-icon-coupon:before {
+  content: "\e7c9";
+}
+
+.tn-icon-shopbag-fill:before {
+  content: "\e7c6";
+}
+
+.tn-icon-shopbag:before {
+  content: "\e7c7";
+}
+
+.tn-icon-basket-fill:before {
+  content: "\e7c4";
+}
+
+.tn-icon-basket:before {
+  content: "\e7c5";
+}
+
+.tn-icon-cart-fill:before {
+  content: "\e7c2";
+}
+
+.tn-icon-cart:before {
+  content: "\e7c3";
+}
+
+.tn-icon-ticket:before {
+  content: "\e7f8";
+}
+
+.tn-icon-ticket-fill:before {
+  content: "\e7fe";
+}
+
+.tn-icon-receipt:before {
+  content: "\e7f6";
+}
+
+.tn-icon-receipt-fill:before {
+  content: "\e7f7";
+}
+
+.tn-icon-cardbag:before {
+  content: "\e7fa";
+}
+
+.tn-icon-cardbag-fill:before {
+  content: "\e7fd";
+}
+
+.tn-icon-bankcard-fill:before {
+  content: "\e7d3";
+}
+
+.tn-icon-bankcard:before {
+  content: "\e7d4";
+}
+
+.tn-icon-identity:before {
+  content: "\e7cb";
+}
+
+.tn-icon-identity-fill:before {
+  content: "\e7cc";
+}
+
+.tn-icon-calendar:before {
+  content: "\e7c0";
+}
+
+.tn-icon-calendar-fill:before {
+  content: "\e7c1";
+}
+
+.tn-icon-order:before {
+  content: "\e7be";
+}
+
+.tn-icon-order-fill:before {
+  content: "\e7bf";
+}
+
+.tn-icon-image:before {
+  content: "\e7bc";
+}
+
+.tn-icon-image-fill:before {
+  content: "\e7bd";
+}
+
+.tn-icon-image-text:before {
+  content: "\e7bb";
+}
+
+.tn-icon-image-text-fill:before {
+  content: "\e7ba";
+}
+
+.tn-icon-data:before {
+  content: "\e7b9";
+}
+
+.tn-icon-data-fill:before {
+  content: "\e7b8";
+}
+
+.tn-icon-statistics:before {
+  content: "\e7b7";
+}
+
+.tn-icon-statistics-fill:before {
+  content: "\e7b6";
+}
+
+.tn-icon-trusty-fill:before {
+  content: "\e801";
+}
+
+.tn-icon-trusty:before {
+  content: "\e802";
+}
+
+.tn-icon-safe-fill:before {
+  content: "\e803";
+}
+
+.tn-icon-safe:before {
+  content: "\e804";
+}
+
+.tn-icon-edit:before {
+  content: "\e7b5";
+}
+
+.tn-icon-edit-form:before {
+  content: "\e7b4";
+}
+
+.tn-icon-edit-write:before {
+  content: "\e7b3";
+}
+
+.tn-icon-write-fill:before {
+  content: "\e7b1";
+}
+
+.tn-icon-write:before {
+  content: "\e7b2";
+}
+
+.tn-icon-eye-hide:before {
+  content: "\e7af";
+}
+
+.tn-icon-eye-close:before {
+  content: "\e7b0";
+}
+
+.tn-icon-eye:before {
+  content: "\e7ad";
+}
+
+.tn-icon-eye-fill:before {
+  content: "\e7ae";
+}
+
+.tn-icon-unlock:before {
+  content: "\e7da";
+}
+
+.tn-icon-lock:before {
+  content: "\e7db";
+}
+
+.tn-icon-sex:before {
+  content: "\e7ac";
+}
+
+.tn-icon-sex-female:before {
+  content: "\e7ab";
+}
+
+.tn-icon-sex-male:before {
+  content: "\e7aa";
+}
+
+.tn-icon-circle-lack:before {
+  content: "\e7a8";
+}
+
+.tn-icon-circle-arrow:before {
+  content: "\e7a9";
+}
+
+.tn-icon-circle-fill:before {
+  content: "\e7a4";
+}
+
+.tn-icon-circle:before {
+  content: "\e7a3";
+}
+
+.tn-icon-copy-fill:before {
+  content: "\e7a1";
+}
+
+.tn-icon-copy:before {
+  content: "\e7a2";
+}
+
+.tn-icon-square:before {
+  content: "\e7a0";
+}
+
+.tn-icon-group-double:before {
+  content: "\e79e";
+}
+
+.tn-icon-group-square:before {
+  content: "\e79f";
+}
+
+.tn-icon-group-triangle:before {
+  content: "\e795";
+}
+
+.tn-icon-group-circle:before {
+  content: "\e796";
+}
+
+.tn-icon-group-null:before {
+  content: "\e797";
+}
+
+.tn-icon-share-triangle:before {
+  content: "\e792";
+}
+
+.tn-icon-share-square:before {
+  content: "\e790";
+}
+
+.tn-icon-share-circle:before {
+  content: "\e791";
+}
+
+.tn-icon-share:before {
+  content: "\e78f";
+}
+
+.tn-icon-send-fill:before {
+  content: "\e793";
+}
+
+.tn-icon-send:before {
+  content: "\e794";
+}
+
+.tn-icon-light-fill:before {
+  content: "\e78d";
+}
+
+.tn-icon-light:before {
+  content: "\e78e";
+}
+
+.tn-icon-praise-fill:before {
+  content: "\e7eb";
+}
+
+.tn-icon-praise:before {
+  content: "\e7f0";
+}
+
+.tn-icon-star-fill:before {
+  content: "\e78b";
+}
+
+.tn-icon-star:before {
+  content: "\e78c";
+}
+
+.tn-icon-caring:before {
+  content: "\e789";
+}
+
+.tn-icon-caring-fill:before {
+  content: "\e78a";
+}
+
+.tn-icon-fire:before {
+  content: "\e787";
+}
+
+.tn-icon-fire-fill:before {
+  content: "\e788";
+}
+
+.tn-icon-topic:before {
+  content: "\e786";
+}
+
+.tn-icon-topics:before {
+  content: "\e784";
+}
+
+.tn-icon-topics-fill:before {
+  content: "\e785";
+}
+
+.tn-icon-like-break:before {
+  content: "\e782";
+}
+
+.tn-icon-like-lack:before {
+  content: "\e783";
+}
+
+.tn-icon-like:before {
+  content: "\e781";
+}
+
+.tn-icon-like-fill:before {
+  content: "\e780";
+}
+
+.tn-icon-reply:before {
+  content: "\e7a6";
+}
+
+.tn-icon-reply-fill:before {
+  content: "\e7a7";
+}
+
+.tn-icon-comment-fill:before {
+  content: "\e79c";
+}
+
+.tn-icon-comment:before {
+  content: "\e79d";
+}
+
+.tn-icon-message-fill:before {
+  content: "\e798";
+}
+
+.tn-icon-message:before {
+  content: "\e799";
+}
+
+.tn-icon-flower-fill:before {
+  content: "\e77e";
+}
+
+.tn-icon-flower:before {
+  content: "\e77f";
+}
+
+.tn-icon-location-fill:before {
+  content: "\e77c";
+}
+
+.tn-icon-location:before {
+  content: "\e77d";
+}
+
+.tn-icon-map-fill:before {
+  content: "\e77a";
+}
+
+.tn-icon-map:before {
+  content: "\e77b";
+}
+
+.tn-icon-camera:before {
+  content: "\e774";
+}
+
+.tn-icon-camera-fill:before {
+  content: "\e775";
+}
+
+.tn-icon-live-stream:before {
+  content: "\e7fb";
+}
+
+.tn-icon-live-stream-fill:before {
+  content: "\e7fc";
+}
+
+.tn-icon-sing:before {
+  content: "\e7f9";
+}
+
+.tn-icon-music-fill:before {
+  content: "\e7ec";
+}
+
+.tn-icon-music-stop:before {
+  content: "\e7ed";
+}
+
+.tn-icon-video-fill:before {
+  content: "\e7e9";
+}
+
+.tn-icon-video:before {
+  content: "\e7ea";
+}
+
+.tn-icon-voice-fill:before {
+  content: "\e7e7";
+}
+
+.tn-icon-voice:before {
+  content: "\e7e8";
+}
+
+.tn-icon-previous-fill:before {
+  content: "\e7f2";
+}
+
+.tn-icon-next-fill:before {
+  content: "\e7f3";
+}
+
+.tn-icon-play-fill:before {
+  content: "\e7ee";
+}
+
+.tn-icon-stop:before {
+  content: "\e7ef";
+}
+
+.tn-icon-backspace:before {
+  content: "\e814";
+}
+
+.tn-icon-backspace-fill:before {
+  content: "\e815";
+}
+
+.tn-icon-sound-close-fill:before {
+  content: "\e778";
+}
+
+.tn-icon-sound-close:before {
+  content: "\e779";
+}
+
+.tn-icon-sound-fill:before {
+  content: "\e776";
+}
+
+.tn-icon-sound:before {
+  content: "\e777";
+}
+
+.tn-icon-sound-reduce-fill:before {
+  content: "\e7e5";
+}
+
+.tn-icon-sound-reduce:before {
+  content: "\e7e6";
+}
+
+.tn-icon-sound-add:before {
+  content: "\e80c";
+}
+
+.tn-icon-sound-add-fill:before {
+  content: "\e80d";
+}
+
+.tn-icon-sequence-vertical:before {
+  content: "\e79a";
+}
+
+.tn-icon-sequence:before {
+  content: "\e79b";
+}
+
+.tn-icon-align-center:before {
+  content: "\e7e1";
+}
+
+.tn-icon-align-right:before {
+  content: "\e7e2";
+}
+
+.tn-icon-align-left:before {
+  content: "\e7e3";
+}
+
+.tn-icon-align:before {
+  content: "\e7e4";
+}
+
+.tn-icon-title:before {
+  content: "\e772";
+}
+
+.tn-icon-sort:before {
+  content: "\e773";
+}
+
+.tn-icon-more-vertical:before {
+  content: "\e770";
+}
+
+.tn-icon-more-horizontal:before {
+  content: "\e771";
+}
+
+.tn-icon-more-circle:before {
+  content: "\e76e";
+}
+
+.tn-icon-more-circle-fill:before {
+  content: "\e76f";
+}
+
+.tn-icon-warning:before {
+  content: "\e76c";
+}
+
+.tn-icon-warning-fill:before {
+  content: "\e76d";
+}
+
+.tn-icon-zoom-out:before {
+  content: "\e76a";
+}
+
+.tn-icon-zoom-out-fill:before {
+  content: "\e76b";
+}
+
+.tn-icon-zoom-in-fill:before {
+  content: "\e768";
+}
+
+.tn-icon-zoom-in:before {
+  content: "\e769";
+}
+
+.tn-icon-success-square:before {
+  content: "\e763";
+}
+
+.tn-icon-success-circle-fill:before {
+  content: "\e764";
+}
+
+.tn-icon-success-circle:before {
+  content: "\e765";
+}
+
+.tn-icon-success-square-fill:before {
+  content: "\e766";
+}
+
+.tn-icon-success:before {
+  content: "\e767";
+}
+
+.tn-icon-close-fill:before {
+  content: "\e760";
+}
+
+.tn-icon-close:before {
+  content: "\e761";
+}
+
+.tn-icon-close-circle:before {
+  content: "\e762";
+}
+
+.tn-icon-help:before {
+  content: "\e75e";
+}
+
+.tn-icon-help-fill:before {
+  content: "\e75f";
+}
+
+.tn-icon-tip-fill:before {
+  content: "\e75d";
+}
+
+.tn-icon-left:before {
+  content: "\e7e0";
+}
+
+.tn-icon-left-triangle:before {
+  content: "\e757";
+}
+
+.tn-icon-left-fill:before {
+  content: "\e758";
+}
+
+.tn-icon-left-double:before {
+  content: "\e759";
+}
+
+.tn-icon-left-circle:before {
+  content: "\e75a";
+}
+
+.tn-icon-left-arrow:before {
+  content: "\e75b";
+}
+
+.tn-icon-down:before {
+  content: "\e7df";
+}
+
+.tn-icon-down-arrow:before {
+  content: "\e752";
+}
+
+.tn-icon-down-circle:before {
+  content: "\e753";
+}
+
+.tn-icon-down-double:before {
+  content: "\e754";
+}
+
+.tn-icon-down-fill:before {
+  content: "\e755";
+}
+
+.tn-icon-down-triangle:before {
+  content: "\e756";
+}
+
+.tn-icon-right:before {
+  content: "\e7de";
+}
+
+.tn-icon-right-fill:before {
+  content: "\e74d";
+}
+
+.tn-icon-right-arrow:before {
+  content: "\e74e";
+}
+
+.tn-icon-right-double:before {
+  content: "\e74f";
+}
+
+.tn-icon-right-triangle:before {
+  content: "\e750";
+}
+
+.tn-icon-right-circle:before {
+  content: "\e751";
+}
+
+.tn-icon-up:before {
+  content: "\e7dd";
+}
+
+.tn-icon-up-arrow:before {
+  content: "\e748";
+}
+
+.tn-icon-up-circle:before {
+  content: "\e749";
+}
+
+.tn-icon-up-triangle:before {
+  content: "\e74a";
+}
+
+.tn-icon-up-double:before {
+  content: "\e74b";
+}
+
+.tn-icon-up-fill:before {
+  content: "\e74c";
+}
+
+.tn-icon-add-circle:before {
+  content: "\e740";
+}
+
+.tn-icon-add:before {
+  content: "\e741";
+}
+
+.tn-icon-add-fill:before {
+  content: "\e742";
+}
+
+.tn-icon-reduce:before {
+  content: "\e743";
+}
+
+.tn-icon-reduce-square-fill:before {
+  content: "\e744";
+}
+
+.tn-icon-reduce-square:before {
+  content: "\e745";
+}
+
+.tn-icon-reduce-circle:before {
+  content: "\e746";
+}
+
+.tn-icon-reduce-circle-fill:before {
+  content: "\e747";
+}
diff --git a/tuniao-ui/index.js b/tuniao-ui/index.js
new file mode 100644
index 0000000..63ec034
--- /dev/null
+++ b/tuniao-ui/index.js
@@ -0,0 +1,70 @@
+// 引入全局mixin
+import mixin from './libs/mixin/mixin.js'
+
+// 调试输出信息
+function wranning(str) {
+  // 开发环境进行信息输出,主要是一些报错信息
+  // 这个环境的来由是在程序编写时候,点击hx编辑器运行调试代码的时候,详见:
+  // 	https://uniapp.dcloud.io/frame?id=%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e5%92%8c%e7%94%9f%e4%ba%a7%e7%8e%af%e5%a2%83
+  if (process.env.NODE_ENV === 'development') {
+  	console.warn(str)
+  }
+}
+
+// 更新自定义状态栏的信息
+import updateCustomBarInfo from './libs/function/updateCustomBarInfo.js'
+// 获取颜色工具
+import color from './libs/function/color.js'
+// 消息工具
+import message from './libs/function/message.js'
+// 获取唯一id
+import uuid from './libs/function/uuid.js'
+// 数组工具
+import array from './libs/function/array.js'
+
+// 规则检验
+import test from './libs/function/test.js'
+// 获取整个父组件
+import $parent from './libs/function/$parent.js'
+// 格式化字符串工具
+import string from './libs/function/string.js'
+// 格式化数值工具
+import number from './libs/function/number.js'
+// 深度复制
+import deepClone from './libs/function/deepClone.js'
+
+// z-index配置信息
+import zIndex from './libs/config/zIndex.js'
+// 主题颜色信息
+import colorInfo from './libs/config/color.js'
+
+const $t = {
+  updateCustomBar: updateCustomBarInfo,
+  color,
+  message,
+  uuid,
+  array,
+  test,
+  $parent,
+  string,
+  number,
+  deepClone,
+  zIndex,
+  colorInfo,
+}
+
+// 挂载到uni对象上
+uni.$t = $t
+
+const install = Vue => {
+  // 全局混入
+  Vue.mixin(mixin)
+  
+  // Filter格式化
+  
+  Vue.prototype.$t = $t
+}
+
+export default {
+  install
+}
diff --git a/tuniao-ui/index.scss b/tuniao-ui/index.scss
new file mode 100644
index 0000000..b0493b3
--- /dev/null
+++ b/tuniao-ui/index.scss
@@ -0,0 +1,13 @@
+// 引入公共基础类
+@import './libs/css/main.scss';
+@import './libs/css/color.scss';
+
+// 小程序特有的样式
+/* #ifdef MP */
+@import "./libs/css/style.mp.scss";
+/* #endif */
+
+// H5特有的样式
+/* #ifdef H5 */
+@import "./libs/css/style.h5.scss";
+/* #endif */
\ No newline at end of file
diff --git a/tuniao-ui/libs/config/color.js b/tuniao-ui/libs/config/color.js
new file mode 100644
index 0000000..eb71bf2
--- /dev/null
+++ b/tuniao-ui/libs/config/color.js
@@ -0,0 +1,15 @@
+// TuniaoUI颜色值
+export default {
+  mainColor: '#01BEFF',
+  reverseMainColor: '#FFF00D',
+  femaleColor: '#FF71D2',
+  maleColor: '#82B2FF',
+  mainOrange: '#FBBD12',
+  bgColor: '#FFFFFF',
+  spaceColor: '#F8F7F8',
+  fontColor: '#080808',
+  fontSubColor: '#AAAAAA',
+  contentColor: '#838383',
+  fontHolderColor: '#E6E6E6',
+  maskBgColor: 'rgba(0, 0, 0, 0.4)',
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/config/zIndex.js b/tuniao-ui/libs/config/zIndex.js
new file mode 100644
index 0000000..e3ba9a3
--- /dev/null
+++ b/tuniao-ui/libs/config/zIndex.js
@@ -0,0 +1,17 @@
+// 各组件的z-index值
+export default {
+  landsacpe: 29100,
+  navbar: 29090,
+  toast: 20090,
+  goodsNav: 20089,
+  alert: 20085,
+  modal: 20080,
+  popup: 20075,
+  tips: 19080,
+  sticky: 19075,
+  indexListSticky: 19070,
+  fab: 19060,
+  mask: 9999,
+  tableTr: 1001,
+  tableTd: 1000
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/css/color.scss b/tuniao-ui/libs/css/color.scss
new file mode 100644
index 0000000..51f98eb
--- /dev/null
+++ b/tuniao-ui/libs/css/color.scss
@@ -0,0 +1,563 @@
+
+@mixin getColor($color: #FFFFFF, $light-color: #FFFFFF, $dark-color: #FFFFFF, $disabled-color: #FFFFFF) {
+  color: $color !important;
+  @if $color != #FFFFFF and $color != #000000 {
+    &--light {
+      color: $light-color !important;
+    }
+    &--dark {
+      color: $dark-color !important;
+    }
+    &--disabled {
+      color: $disabled-color !important;
+    }
+  }
+}
+
+@mixin getBorderColor($color: #FFFFFF, $light-color: #FFFFFF, $dark-color: #FFFFFF, $disabled-color: #FFFFFF) {
+  @if $color != #FFFFFF and $color != #000000 {
+    &--light {
+        border-color: $light-color !important;
+    }
+    &--dark {
+        border-color: $dark-color !important;
+    }
+    &--disabled {
+        border-color: $disabled-color !important;
+    }
+  }
+    border-color: $color !important;
+}
+
+@mixin getBackgroundColor($color: #FFFFFF, $light-color: #FFFFFF, $dark-color: #FFFFFF, $disabled-color: #FFFFFF) {
+  background-color: $color !important;
+  @if $color != #FFFFFF and $color != #000000 {
+    color: $tn-font-color;
+    &--light {
+      background-color: $light-color !important;
+    }
+    &--dark {
+      background-color: $dark-color !important;
+    }
+    &--disabled {
+      background-color: $disabled-color !important;
+    }
+  }
+  @else {
+    color: $tn-font-color;
+  }
+}
+
+@mixin getShadowColor($type: box, $color: #FFFFFF) {
+  @if $type == box {
+    box-shadow: 12rpx 12rpx 16rpx #{$color};
+  } @else if $type == text {
+    text-shadow: 6rpx 6rpx 8rpx #{$color};
+  }
+}
+
+@mixin getGradientColor($start-color, $end-color, $font-color: #FFFFFF) {
+  background-image: repeating-linear-gradient(45deg, $start-color, $end-color);
+  color: $font-color;
+  
+  &--reverse {
+    background-image: repeating-linear-gradient(-45deg, $start-color, $end-color);
+    color: $font-color;
+  }
+}
+
+@mixin getMainColorGradient($start-color, $start-color-light, $start-color-disabled, $end-color, $end-color-light) {
+  @include getGradientColor($start-color, $end-color);
+  
+  &--light {
+    @include getGradientColor($start-color-light, $end-color-light, $start-color);
+  }
+  
+  &--single {
+    @include getGradientColor($start-color, $start-color-disabled);
+  }
+}
+
+/* 颜色 start */
+.tn-color-red {
+  @include getColor($tn-color-red, $tn-color-red-light, $tn-color-red-dark, $tn-color-red-disabled);
+}
+.tn-color-purplered {
+  @include getColor($tn-color-purplered, $tn-color-purplered-light, $tn-color-purplered-dark, $tn-color-purplered-disabled);
+}
+.tn-color-purple {
+  @include getColor($tn-color-purple, $tn-color-purple-light, $tn-color-purple-dark, $tn-color-purple-disabled);
+}
+.tn-color-bluepurple {
+  @include getColor($tn-color-bluepurple, $tn-color-bluepurple-light, $tn-color-bluepurple-dark, $tn-color-bluepurple-disabled);
+}
+.tn-color-aquablue {
+  @include getColor($tn-color-aquablue, $tn-color-aquablue-light, $tn-color-aquablue-dark, $tn-color-aquablue-disabled);
+}
+.tn-color-blue {
+  @include getColor($tn-color-blue, $tn-color-blue-light, $tn-color-blue-dark, $tn-color-blue-disabled);
+}
+.tn-color-indigo {
+  @include getColor($tn-color-indigo, $tn-color-indigo-light, $tn-color-indigo-dark, $tn-color-indigo-disabled);
+}
+.tn-color-cyan {
+  @include getColor($tn-color-cyan, $tn-color-cyan-light, $tn-color-cyan-dark, $tn-color-cyan-disabled);
+}
+.tn-color-teal {
+  @include getColor($tn-color-teal, $tn-color-teal-light, $tn-color-teal-dark, $tn-color-teal-disabled);
+}
+.tn-color-green {
+  @include getColor($tn-color-green, $tn-color-green-light, $tn-color-green-dark, $tn-color-green-disabled);
+}
+.tn-color-yellowgreen {
+  @include getColor($tn-color-yellowgreen, $tn-color-yellowgreen-light, $tn-color-yellowgreen-dark, $tn-color-yellowgreen-disabled);
+}
+.tn-color-lime {
+  @include getColor($tn-color-lime, $tn-color-lime-light, $tn-color-lime-dark, $tn-color-lime-disabled);
+}
+.tn-color-yellow {
+  @include getColor($tn-color-yellow, $tn-color-yellow-light, $tn-color-yellow-dark, $tn-color-yellow-disabled);
+}
+.tn-color-orangeyellow {
+  @include getColor($tn-color-orangeyellow, $tn-color-orangeyellow-light, $tn-color-orangeyellow-dark, $tn-color-orangeyellow-disabled);
+}
+.tn-color-orange {
+  @include getColor($tn-color-orange, $tn-color-orange-light, $tn-color-orange-dark, $tn-color-orange-disabled);
+}
+.tn-color-orangered {
+  @include getColor($tn-color-orangered, $tn-color-orangered-light, $tn-color-orangered-dark, $tn-color-orangered-disabled);
+}
+.tn-color-brown {
+  @include getColor($tn-color-brown, $tn-color-brown-light, $tn-color-brown-dark, $tn-color-brown-disabled);
+}
+.tn-color-grey {
+  @include getColor($tn-color-grey, $tn-color-grey-light, $tn-color-grey-dark, $tn-color-grey-disabled);
+}
+.tn-color-gray {
+  @include getColor($tn-color-gray, $tn-color-gray-light, $tn-color-gray-dark, $tn-color-gray-disabled);
+}
+.tn-color-white {
+  @include getColor();
+}
+.tn-color-black {
+  @include getColor(#000000);
+}
+/* 颜色 end */
+
+/* 边框颜色 start */
+.tn-border-red {
+  @include getBorderColor($tn-color-red, $tn-color-red-light, $tn-color-red-dark, $tn-color-red-disabled);
+}
+.tn-border-purplered {
+  @include getBorderColor($tn-color-purplered, $tn-color-purplered-light, $tn-color-purplered-dark, $tn-color-purplered-disabled);
+}
+.tn-border-purple {
+  @include getBorderColor($tn-color-purple, $tn-color-purple-light, $tn-color-purple-dark, $tn-color-purple-disabled);
+}
+.tn-border-bluepurple {
+  @include getBorderColor($tn-color-bluepurple, $tn-color-bluepurple-light, $tn-color-bluepurple-dark, $tn-color-bluepurple-disabled);
+}
+.tn-border-aquablue {
+  @include getBorderColor($tn-color-aquablue, $tn-color-aquablue-light, $tn-color-aquablue-dark, $tn-color-aquablue-disabled);
+}
+.tn-border-blue {
+  @include getBorderColor($tn-color-blue, $tn-color-blue-light, $tn-color-blue-dark, $tn-color-blue-disabled);
+}
+.tn-border-indigo {
+  @include getBorderColor($tn-color-indigo, $tn-color-indigo-light, $tn-color-indigo-dark, $tn-color-indigo-disabled);
+}
+.tn-border-cyan {
+  @include getBorderColor($tn-color-cyan, $tn-color-cyan-light, $tn-color-cyan-dark, $tn-color-cyan-disabled);
+}
+.tn-border-teal {
+  @include getBorderColor($tn-color-teal, $tn-color-teal-light, $tn-color-teal-dark, $tn-color-teal-disabled);
+}
+.tn-border-green {
+  @include getBorderColor($tn-color-green, $tn-color-green-light, $tn-color-green-dark, $tn-color-green-disabled);
+}
+.tn-border-yellowgreen {
+  @include getBorderColor($tn-color-yellowgreen, $tn-color-yellowgreen-light, $tn-color-yellowgreen-dark, $tn-color-yellowgreen-disabled);
+}
+.tn-border-lime {
+  @include getBorderColor($tn-color-lime, $tn-color-lime-light, $tn-color-lime-dark, $tn-color-lime-disabled);
+}
+.tn-border-yellow {
+  @include getBorderColor($tn-color-yellow, $tn-color-yellow-light, $tn-color-yellow-dark, $tn-color-yellow-disabled);
+}
+.tn-border-orangeyellow {
+  @include getBorderColor($tn-color-orangeyellow, $tn-color-orangeyellow-light, $tn-color-orangeyellow-dark, $tn-color-orangeyellow-disabled);
+}
+.tn-border-orange {
+  @include getBorderColor($tn-color-orange, $tn-color-orange-light, $tn-color-orange-dark, $tn-color-orange-disabled);
+}
+.tn-border-orangered {
+  @include getBorderColor($tn-color-orangered, $tn-color-orangered-light, $tn-color-orangered-dark, $tn-color-orangered-disabled);
+}
+.tn-border-brown {
+  @include getBorderColor($tn-color-brown, $tn-color-brown-light, $tn-color-brown-dark, $tn-color-brown-disabled);
+}
+.tn-border-grey {
+  @include getBorderColor($tn-color-grey, $tn-color-grey-light, $tn-color-grey-dark, $tn-color-grey-disabled);
+}
+.tn-border-gray {
+  @include getBorderColor($tn-color-gray, $tn-color-gray-light, $tn-color-gray-dark, $tn-color-gray-disabled);
+}
+.tn-border-white {
+  @include getBorderColor();
+}
+.tn-border-black {
+  @include getBorderColor(#000000);
+}
+/* 边框颜色 end */
+
+/* 背景颜色 start */
+.tn-bg-red {
+  @include getBackgroundColor($tn-color-red, $tn-color-red-light, $tn-color-red-dark, $tn-color-red-disabled);
+}
+.tn-bg-purplered {
+  @include getBackgroundColor($tn-color-purplered, $tn-color-purplered-light, $tn-color-purplered-dark, $tn-color-purplered-disabled);
+}
+.tn-bg-purple {
+  @include getBackgroundColor($tn-color-purple, $tn-color-purple-light, $tn-color-purple-dark, $tn-color-purple-disabled);
+}
+.tn-bg-bluepurple {
+  @include getBackgroundColor($tn-color-bluepurple, $tn-color-bluepurple-light, $tn-color-bluepurple-dark, $tn-color-bluepurple-disabled);
+}
+.tn-bg-aquablue {
+  @include getBackgroundColor($tn-color-aquablue, $tn-color-aquablue-light, $tn-color-aquablue-dark, $tn-color-aquablue-disabled);
+}
+.tn-bg-blue {
+  @include getBackgroundColor($tn-color-blue, $tn-color-blue-light, $tn-color-blue-dark, $tn-color-blue-disabled);
+}
+.tn-bg-indigo {
+  @include getBackgroundColor($tn-color-indigo, $tn-color-indigo-light, $tn-color-indigo-dark, $tn-color-indigo-disabled);
+}
+.tn-bg-cyan {
+  @include getBackgroundColor($tn-color-cyan, $tn-color-cyan-light, $tn-color-cyan-dark, $tn-color-cyan-disabled);
+}
+.tn-bg-teal {
+  @include getBackgroundColor($tn-color-teal, $tn-color-teal-light, $tn-color-teal-dark, $tn-color-teal-disabled);
+}
+.tn-bg-green {
+  @include getBackgroundColor($tn-color-green, $tn-color-green-light, $tn-color-green-dark, $tn-color-green-disabled);
+}
+.tn-bg-yellowgreen {
+  @include getBackgroundColor($tn-color-yellowgreen, $tn-color-yellowgreen-light, $tn-color-yellowgreen-dark, $tn-color-yellowgreen-disabled);
+}
+.tn-bg-lime {
+  @include getBackgroundColor($tn-color-lime, $tn-color-lime-light, $tn-color-lime-dark, $tn-color-lime-disabled);
+}
+.tn-bg-yellow {
+  @include getBackgroundColor($tn-color-yellow, $tn-color-yellow-light, $tn-color-yellow-dark, $tn-color-yellow-disabled);
+}
+.tn-bg-orangeyellow {
+  @include getBackgroundColor($tn-color-orangeyellow, $tn-color-orangeyellow-light, $tn-color-orangeyellow-dark, $tn-color-orangeyellow-disabled);
+}
+.tn-bg-orange {
+  @include getBackgroundColor($tn-color-orange, $tn-color-orange-light, $tn-color-orange-dark, $tn-color-orange-disabled);
+}
+.tn-bg-orangered {
+  @include getBackgroundColor($tn-color-orangered, $tn-color-orangered-light, $tn-color-orangered-dark, $tn-color-orangered-disabled);
+}
+.tn-bg-brown {
+  @include getBackgroundColor($tn-color-brown, $tn-color-brown-light, $tn-color-brown-dark, $tn-color-brown-disabled);
+}
+.tn-bg-grey {
+  @include getBackgroundColor($tn-color-grey, $tn-color-grey-light, $tn-color-grey-dark, $tn-color-grey-disabled);
+}
+.tn-bg-gray {
+  @include getBackgroundColor($tn-color-gray, $tn-color-gray-light, $tn-color-gray-dark, $tn-color-gray-disabled);
+}
+.tn-bg-white {
+  @include getBackgroundColor();
+}
+.tn-bg-black {
+  @include getBackgroundColor(#000000);
+}
+/* 背景颜色 end */
+
+/* 阴影颜色 start */
+.tn-shadow-red {
+  @include getShadowColor(box, $tn-color-red-light);
+}
+.tn-shadow-purplered {
+  @include getShadowColor(box, $tn-color-purplered-light);
+}
+.tn-shadow-purple {
+  @include getShadowColor(box, $tn-color-purple-light);
+}
+.tn-shadow-bluepurple {
+  @include getShadowColor(box, $tn-color-bluepurple-light);
+}
+.tn-shadow-aquablue {
+  @include getShadowColor(box, $tn-color-aquablue-light);
+}
+.tn-shadow-blue {
+  @include getShadowColor(box, $tn-color-blue-light);
+}
+.tn-shadow-indigo {
+  @include getShadowColor(box, $tn-color-indigo-light);
+}
+.tn-shadow-cyan {
+  @include getShadowColor(box, $tn-color-cyan-light);
+}
+.tn-shadow-teal {
+  @include getShadowColor(box, $tn-color-teal-light);
+}
+.tn-shadow-green {
+  @include getShadowColor(box, $tn-color-green-light);
+}
+.tn-shadow-yellowgreen {
+  @include getShadowColor(box, $tn-color-yellowgreen-light);
+}
+.tn-shadow-lime {
+  @include getShadowColor(box, $tn-color-lime-light);
+}
+.tn-shadow-yellow {
+  @include getShadowColor(box, $tn-color-yellow-light);
+}
+.tn-shadow-orangeyellow {
+  @include getShadowColor(box, $tn-color-orangeyellow-light);
+}
+.tn-shadow-orange {
+  @include getShadowColor(box, $tn-color-orange-light);
+}
+.tn-shadow-orangered {
+  @include getShadowColor(box, $tn-color-orangered-light);
+}
+.tn-shadow-brown {
+  @include getShadowColor(box, $tn-color-brown-light);
+}
+.tn-shadow-grey {
+  @include getShadowColor(box, $tn-color-grey-light);
+}
+.tn-shadow-gray {
+  @include getShadowColor(box, $tn-color-gray-light);
+}
+
+.tn-text-shadow-red {
+  @include getShadowColor(text, $tn-color-red-light);
+}
+.tn-text-shadow-purplered {
+  @include getShadowColor(text, $tn-color-purplered-light);
+}
+.tn-text-shadow-purple {
+  @include getShadowColor(text, $tn-color-purple-light);
+}
+.tn-text-shadow-bluepurple {
+  @include getShadowColor(text, $tn-color-bluepurple-light);
+}
+.tn-text-shadow-aquablue {
+  @include getShadowColor(text, $tn-color-aquablue-light);
+}
+.tn-text-shadow-blue {
+  @include getShadowColor(text, $tn-color-blue-light);
+}
+.tn-text-shadow-indigo {
+  @include getShadowColor(text, $tn-color-indigo-light);
+}
+.tn-text-shadow-cyan {
+  @include getShadowColor(text, $tn-color-cyan-light);
+}
+.tn-text-shadow-teal {
+  @include getShadowColor(text, $tn-color-teal-light);
+}
+.tn-text-shadow-green {
+  @include getShadowColor(text, $tn-color-green-light);
+}
+.tn-text-shadow-yellowgreen {
+  @include getShadowColor(text, $tn-color-yellowgreen-light);
+}
+.tn-text-shadow-lime {
+  @include getShadowColor(text, $tn-color-lime-light);
+}
+.tn-text-shadow-yellow {
+  @include getShadowColor(text, $tn-color-yellow-light);
+}
+.tn-text-shadow-orangeyellow {
+  @include getShadowColor(text, $tn-color-orangeyellow-light);
+}
+.tn-text-shadow-orange {
+  @include getShadowColor(text, $tn-color-orange-light);
+}
+.tn-text-shadow-orangered {
+  @include getShadowColor(text, $tn-color-orangered-light);
+}
+.tn-text-shadow-brown {
+  @include getShadowColor(text, $tn-color-brown-light);
+}
+.tn-text-shadow-grey {
+  @include getShadowColor(text, $tn-color-grey-light);
+}
+.tn-text-shadow-gray {
+  @include getShadowColor(text, $tn-color-gray-light);
+}
+/* 阴影颜色 end */
+
+/* 主色渐变色 start */
+.tn-main-gradient-red {
+  @include getMainColorGradient($tn-color-red, $tn-color-red-light, $tn-color-red-disabled, $tn-color-purplered, $tn-color-purplered-light);
+}
+.tn-main-gradient-purplered {
+  @include getMainColorGradient($tn-color-purplered, $tn-color-purplered-light, $tn-color-purplered-disabled, $tn-color-purple, $tn-color-purple-light);
+}
+.tn-main-gradient-purple {
+  @include getMainColorGradient($tn-color-purple, $tn-color-purple-light, $tn-color-purple-disabled, $tn-color-bluepurple, $tn-color-bluepurple-light);
+}
+.tn-main-gradient-bluepurple {
+  @include getMainColorGradient($tn-color-bluepurple, $tn-color-bluepurple-light, $tn-color-bluepurple-disabled, $tn-color-aquablue, $tn-color-aquablue-light);
+}
+.tn-main-gradient-aquablue {
+  @include getMainColorGradient($tn-color-aquablue, $tn-color-aquablue-light, $tn-color-aquablue-disabled, $tn-color-blue, $tn-color-blue-light);
+}
+.tn-main-gradient-blue {
+  @include getMainColorGradient($tn-color-blue, $tn-color-blue-light, $tn-color-blue-disabled, $tn-color-indigo, $tn-color-indigo-light);
+}
+.tn-main-gradient-indigo {
+  @include getMainColorGradient($tn-color-indigo, $tn-color-indigo-light, $tn-color-indigo-disabled, $tn-color-cyan, $tn-color-cyan-light);
+}
+.tn-main-gradient-cyan {
+  @include getMainColorGradient($tn-color-cyan, $tn-color-cyan-light, $tn-color-cyan-disabled, $tn-color-teal, $tn-color-teal-light);
+}
+.tn-main-gradient-teal {
+  @include getMainColorGradient($tn-color-teal, $tn-color-teal-light, $tn-color-teal-disabled, $tn-color-green, $tn-color-green-light);
+}
+.tn-main-gradient-green {
+  @include getMainColorGradient($tn-color-green, $tn-color-green-light, $tn-color-green-disabled, $tn-color-yellowgreen, $tn-color-yellowgreen-light);
+}
+.tn-main-gradient-yellowgreen {
+  @include getMainColorGradient($tn-color-yellowgreen, $tn-color-yellowgreen-light, $tn-color-yellowgreen-disabled, $tn-color-lime, $tn-color-lime-light);
+}
+.tn-main-gradient-lime {
+  @include getMainColorGradient($tn-color-lime, $tn-color-lime-light, $tn-color-lime-disabled, $tn-color-yellow, $tn-color-yellow-light);
+}
+.tn-main-gradient-yellow {
+  @include getMainColorGradient($tn-color-yellow, $tn-color-yellow-light, $tn-color-yellow-disabled, $tn-color-orangeyellow, $tn-color-orangeyellow-light);
+}
+.tn-main-gradient-orangeyellow {
+  @include getMainColorGradient($tn-color-orangeyellow, $tn-color-orangeyellow-light, $tn-color-orangeyellow-disabled, $tn-color-orange, $tn-color-orange-light);
+}
+.tn-main-gradient-orange {
+  @include getMainColorGradient($tn-color-orange, $tn-color-orange-light, $tn-color-orange-disabled, $tn-color-orangered, $tn-color-orangered-light);
+}
+.tn-main-gradient-orangered {
+  @include getMainColorGradient($tn-color-orangered, $tn-color-orangered-light, $tn-color-orangered-disabled, $tn-color-red, $tn-color-red-light);
+}
+/* 主色渐变色 end */
+
+/* 动态背景颜色 start */
+
+.tn-dynamic-bg-1 {
+  color: #fff;
+  background: linear-gradient(45deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
+  background-size: 500% 500%;
+  animation: dynamicBg 15s ease infinite;
+}
+
+@keyframes dynamicBg {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* 动态背景颜色 end */
+
+/* 酷炫背景颜色图片 start */
+
+.tn-cool-bg-color-1 {
+  @include getGradientColor($tn-cool-bg-color-1-start, $tn-cool-bg-color-1-end);
+}
+.tn-cool-bg-color-2 {
+  @include getGradientColor($tn-cool-bg-color-2-start, $tn-cool-bg-color-2-end);
+}
+.tn-cool-bg-color-3 {
+  @include getGradientColor($tn-cool-bg-color-3-start, $tn-cool-bg-color-3-end);
+}
+.tn-cool-bg-color-4 {
+  @include getGradientColor($tn-cool-bg-color-4-start, $tn-cool-bg-color-4-end);
+}
+.tn-cool-bg-color-5 {
+  @include getGradientColor($tn-cool-bg-color-5-start, $tn-cool-bg-color-5-end);
+}
+.tn-cool-bg-color-6 {
+  @include getGradientColor($tn-cool-bg-color-6-start, $tn-cool-bg-color-6-end);
+}
+.tn-cool-bg-color-7 {
+  @include getGradientColor($tn-cool-bg-color-7-start, $tn-cool-bg-color-7-end);
+}
+.tn-cool-bg-color-8 {
+  @include getGradientColor($tn-cool-bg-color-8-start, $tn-cool-bg-color-8-end);
+}
+.tn-cool-bg-color-9 {
+  @include getGradientColor($tn-cool-bg-color-9-start, $tn-cool-bg-color-9-end);
+}
+.tn-cool-bg-color-10 {
+  @include getGradientColor($tn-cool-bg-color-10-start, $tn-cool-bg-color-10-end);
+}
+.tn-cool-bg-color-11 {
+  @include getGradientColor($tn-cool-bg-color-11-start, $tn-cool-bg-color-11-end);
+}
+.tn-cool-bg-color-12 {
+  @include getGradientColor($tn-cool-bg-color-12-start, $tn-cool-bg-color-12-end);
+}
+.tn-cool-bg-color-13 {
+  @include getGradientColor($tn-cool-bg-color-13-start, $tn-cool-bg-color-13-end);
+}
+.tn-cool-bg-color-14 {
+  @include getGradientColor($tn-cool-bg-color-14-start, $tn-cool-bg-color-14-end);
+}
+.tn-cool-bg-color-15 {
+  @include getGradientColor($tn-cool-bg-color-15-start, $tn-cool-bg-color-15-end);
+}
+.tn-cool-bg-color-16 {
+  @include getGradientColor($tn-cool-bg-color-16-start, $tn-cool-bg-color-16-end);
+}
+
+.tn-cool-bg-image::after {
+  content: " ";
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  bottom: 0;
+  border-radius: 10rpx;
+  opacity: 1;
+  transform: scale(1, 1);
+  background-size: 100% 100%;
+  background-image: inherit;
+}
+
+.tn-cool-bg-image:nth-of-type(1n)::after {
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/1.png);
+}
+
+.tn-cool-bg-image:nth-of-type(2n)::after {
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
+}
+
+.tn-cool-bg-image:nth-of-type(3n)::after {
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/3.png);
+}
+
+.tn-cool-bg-image:nth-of-type(4n)::after {
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/4.png);
+}
+
+.tn-cool-bg-image:nth-of-type(5n)::after {
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/5.png);
+}
+
+.tn-cool-bg-image:nth-of-type(6n)::after {
+  background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/6.png);
+}
+
+/* 酷炫背景颜色图片 end */
diff --git a/tuniao-ui/libs/css/main.scss b/tuniao-ui/libs/css/main.scss
new file mode 100644
index 0000000..b7acbd5
--- /dev/null
+++ b/tuniao-ui/libs/css/main.scss
@@ -0,0 +1,746 @@
+$direction: top, right, bottom, left;
+
+body {
+  // 全局灰白效果
+  // filter: grayscale(100%);
+  // -webkit-filter: grayscale(100%);
+  
+	background-color: $tn-bg-color;
+	/* background-color: #ffffff; */
+	font-size: 28rpx;
+	color: $tn-font-color;
+	font-family: Helvetica Neue, Helvetica, sans-serif;
+  // 修复点击view标签的时候会有蓝色遮罩
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+view,
+scroll-view,
+swiper,
+button,
+input,
+textarea,
+label,
+navigator,
+image {
+	box-sizing: border-box;
+}
+
+button::after {
+	border: none;
+}
+
+.tn-round {
+	border-radius: 5000rpx !important;
+}
+
+.tn-radius {
+	border-radius: 6rpx;
+}
+
+/* 基本样式 start */
+
+.tn-width-full {
+  width: 100%;
+}
+
+.tn-height-full {
+  height: 100%;
+}
+
+/* 基本样式 end */
+
+
+/* 边框 start */
+
+.tn-border-solid,
+.tn-border-solid-top,
+.tn-border-solid-right,
+.tn-border-solid-bottom,
+.tn-border-solid-left,
+.tn-border-solids,
+.tn-border-solids-top,
+.tn-border-solids-right,
+.tn-border-solids-bottom,
+.tn-border-solids-left,
+.tn-border-dashed,
+.tn-border-dashed-top,
+.tn-border-dashed-right,
+.tn-border-dashed-bottom,
+.tn-border-dashed-left {
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+@for $i from 0 to length($direction) + 1 {
+  @if $i == 0 {
+    .tn-border-solid {
+      border-width: 1rpx !important;
+      border-style: solid;
+      border-color: $tn-border-solid-color;
+      
+      &.tn-bold-border {
+        border-width: 6rpx !important;
+      }
+    }
+    .tn-border-solids {
+      border-width: 1rpx !important;
+      border-style: solid;
+      border-color: $tn-border-solids-color;
+      
+      &.tn-bold-border {
+        border-width: 6rpx !important;
+      }
+    }
+    .tn-border-dashed {
+      border-width: 1rpx !important;
+      border-style: dashed;
+      border-color: $tn-border-dashed-color;
+      
+      &.tn-bold-border {
+        border-width: 6rpx !important;
+      }
+    }
+  } @else {
+    .tn-border-solid-#{nth($direction, $i)} {
+      border: 0rpx;
+      border-#{nth($direction, $i)}-width: 1rpx !important;
+      border-style: solid;
+      border-color: $tn-border-solid-color;
+      
+      &.tn-bold-border {
+        border-#{nth($direction, $i)}-width: 6rpx !important;
+      }
+    }
+    .tn-border-solids-#{nth($direction, $i)} {
+      border: 0rpx;
+      border-#{nth($direction, $i)}-width: 1rpx !important;
+      border-style: solid;
+      border-color: $tn-border-solids-color;
+      
+      &.tn-bold-border {
+        border-#{nth($direction, $i)}-width: 6rpx !important;
+      }
+    }
+    .tn-border-dashed-#{nth($direction, $i)} {
+      border: 0rpx;
+      border-#{nth($direction, $i)}-width: 1rpx !important;
+      border-style: dashed;
+      border-color: $tn-border-dashed-color;
+      
+      &.tn-bold-border {
+        border-#{nth($direction, $i)}-width: 6rpx !important;
+      }
+    }
+  }
+}
+
+.tn-none-border.tn-border-solid,
+.tn-none-border.tn-border-solid-top,
+.tn-none-border.tn-border-solid-right,
+.tn-none-border.tn-border-solid-bottom,
+.tn-none-border.tn-border-solid-left,
+.tn-none-border.tn-border-solids,
+.tn-none-border.tn-border-solids-top,
+.tn-none-border.tn-border-solids-right,
+.tn-none-border.tn-border-solids-bottom,
+.tn-none-border.tn-border-solids-left,
+.tn-none-border.tn-border-dashed,
+.tn-none-border.tn-border-dashed-top,
+.tn-none-border.tn-border-dashed-right,
+.tn-none-border.tn-border-dashed-bottom,
+.tn-none-border.tn-border-dashed-left {
+  border: 0 !important;
+}
+
+.tn-none-border-top.tn-border-solid,
+.tn-none-border-top.tn-border-solid-top,
+.tn-none-border-top.tn-border-solid-right,
+.tn-none-border-top.tn-border-solid-bottom,
+.tn-none-border-top.tn-border-solid-left,
+.tn-none-border-top.tn-border-solids,
+.tn-none-border-top.tn-border-solids-top,
+.tn-none-border-top.tn-border-solids-right,
+.tn-none-border-top.tn-border-solids-bottom,
+.tn-none-border-top.tn-border-solids-left,
+.tn-none-border-top.tn-border-dashed,
+.tn-none-border-top.tn-border-dashed-top,
+.tn-none-border-top.tn-border-dashed-right,
+.tn-none-border-top.tn-border-dashed-bottom,
+.tn-none-border-top.tn-border-dashed-left {
+  /* height: 0 !important; */
+  border-top: 0 !important;
+}
+
+.tn-none-border-right.tn-border-solid,
+.tn-none-border-right.tn-border-solid-top,
+.tn-none-border-right.tn-border-solid-right,
+.tn-none-border-right.tn-border-solid-bottom,
+.tn-none-border-right.tn-border-solid-left,
+.tn-none-border-right.tn-border-solids,
+.tn-none-border-right.tn-border-solids-top,
+.tn-none-border-right.tn-border-solids-right,
+.tn-none-border-right.tn-border-solids-bottom,
+.tn-none-border-right.tn-border-solids-left,
+.tn-none-border-right.tn-border-dashed,
+.tn-none-border-right.tn-border-dashed-top,
+.tn-none-border-right.tn-border-dashed-right,
+.tn-none-border-right.tn-border-dashed-bottom,
+.tn-none-border-right.tn-border-dashed-left {
+  /* width: 0 !important; */
+  border-right: 0 !important;
+}
+
+.tn-none-border-bottom.tn-border-solid,
+.tn-none-border-bottom.tn-border-solid-top,
+.tn-none-border-bottom.tn-border-solid-right,
+.tn-none-border-bottom.tn-border-solid-bottom,
+.tn-none-border-bottom.tn-border-solid-left,
+.tn-none-border-bottom.tn-border-solids,
+.tn-none-border-bottom.tn-border-solids-top,
+.tn-none-border-bottom.tn-border-solids-right,
+.tn-none-border-bottom.tn-border-solids-bottom,
+.tn-none-border-bottom.tn-border-solids-left,
+.tn-none-border-bottom.tn-border-dashed,
+.tn-none-border-bottom.tn-border-dashed-top,
+.tn-none-border-bottom.tn-border-dashed-right,
+.tn-none-border-bottom.tn-border-dashed-bottom,
+.tn-none-border-bottom.tn-border-dashed-left {
+  /* height: 0 !important; */
+  border-bottom: 0 !important;
+}
+
+.tn-none-border-left.tn-border-solid,
+.tn-none-border-left.tn-border-solid-top,
+.tn-none-border-left.tn-border-solid-right,
+.tn-none-border-left.tn-border-solid-bottom,
+.tn-none-border-left.tn-border-solid-left,
+.tn-none-border-left.tn-border-solids,
+.tn-none-border-left.tn-border-solids-top,
+.tn-none-border-left.tn-border-solids-right,
+.tn-none-border-left.tn-border-solids-bottom,
+.tn-none-border-left.tn-border-solids-left,
+.tn-none-border-left.tn-border-dashed,
+.tn-none-border-left.tn-border-dashed-top,
+.tn-none-border-left.tn-border-dashed-right,
+.tn-none-border-left.tn-border-dashed-bottom,
+.tn-none-border-left.tn-border-dashed-left {
+  /* width: 0 !important; */
+  border-left: 0 !important;
+}
+
+/* 边框 end */
+
+
+/* 阴影 start */
+
+.tn-shadow {
+  box-shadow: 6rpx 6rpx 8rpx $tn-shadow-color;
+}
+
+.tn-shadow-warp {
+  position: relative;
+  box-shadow: 0 0 10rpx $tn-shadow-color;
+}
+
+.tn-shadow-warp::before,
+.tn-shadow-warp::after {
+  content: " ";
+  position: absolute;
+  top: 20rpx;
+  bottom: 30rpx;
+  left: 20rpx;
+  width: 50%;
+  box-shadow: 0 30rpx 20rpx $tn-box-shadow-color;
+  transform: rotate(-3deg);
+  z-index: -1;
+}
+
+.tn-shadow-warp::after {
+  right: 20rpx;
+  left: auto;
+  transform: rotate(3deg);
+}
+
+.tn-shadow-blur {
+  position: relative;
+}
+
+.tn-shadow-blur::before {
+  content: " ";
+  display: block;
+  background: inherit;
+  filter: blur(10rpx);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 10rpx;
+  left: 10rpx;
+  z-index: -1;
+  opacity: 0.4;
+  transform-origin: 0 0;
+  border-radius: inherit;
+  transform: scale(1, 1);
+}
+
+/* 阴影 end */
+
+
+/* flex start */
+
+.tn-flex {
+  display: -webkit-flex;
+  display: flex;
+}
+
+/* flex伸缩基准值 */
+.tn-flex-basic-xs {
+  flex-basis: 20%;
+}
+
+.tn-flex-basic-sm {
+  flex-basis: 40%;
+}
+
+.tn-flex-basic-md {
+  flex-basis: 50%;
+}
+
+.tn-flex-basic-lg {
+  flex-basis: 60%;
+}
+
+.tn-flex-basic-xl {
+  flex-basis: 80%;
+}
+
+.tn-flex-basic-full {
+  flex-basis: 100%;
+}
+
+/* flex布局的方向 */
+.tn-flex-direction-column {
+  flex-direction: column;
+}
+
+.tn-flex-direction-row {
+  flex-direction: row;
+}
+
+.tn-flex-direction-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.tn-flex-direction-row-reverse {
+  flex-direction: row-reverse;
+}
+
+/* flex容器设置换行 */
+.tn-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.tn-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+/* flex容器自身垂直方向对齐方式 */
+.tn-flex-center {
+  align-self: center;
+}
+
+.tn-flex-top {
+  align-self: flex-start;
+}
+
+.tn-flex-end {
+  align-self: flex-end;
+}
+
+.tn-flex-stretch {
+  align-self: stretch;
+}
+
+/* flex子元素垂直方向对齐方式 */
+.tn-flex-col-center {
+  align-items: center;
+}
+
+.tn-flex-col-top {
+  align-items: flex-start;
+}
+
+.tn-flex-col-bottom {
+  align-items: flex-end;
+}
+
+/* flex子元素水平方向对齐方式 */
+.tn-flex-row-center {
+  justify-content: center;
+}
+
+.tn-flex-row-left {
+  justify-content: flex-start;
+}
+
+.tn-flex-row-right {
+  justify-content: flex-end;
+}
+
+.tn-flex-row-between {
+  justify-content: space-between;
+}
+
+.tn-flex-row-around {
+  justify-content: space-around;
+}
+
+/* flex子元素空间分配 */
+@for $i from 0 to 12 {
+  .tn-flex-#{$i} {
+    flex: $i;
+  }
+}
+
+.tn-col-12 {
+  width: 100%;
+}
+
+.tn-col-11 {
+  width: 91.66666667%;
+}
+
+.tn-col-10 {
+  width: 83.33333333%;
+}
+
+.tn-col-9 {
+  width: 75%;
+}
+
+.tn-col-8 {
+  width: 66.66666667%;
+}
+
+.tn-col-7 {
+  width: 58.33333333%;
+}
+
+.tn-col-6 {
+  width: 50%;
+}
+
+.tn-col-5 {
+  width: 41.66666667%;
+}
+
+.tn-col-4 {
+  width: 33.33333333%;
+}
+
+.tn-col-3 {
+  width: 25%;
+}
+
+.tn-col-2 {
+  width: 16.66666667%;
+}
+
+.tn-col-1 {
+  width: 8.33333333%;
+}
+
+/* flex end */
+
+/* 内边距 start */
+
+@for $i from 0 to length($direction) + 1 {
+  @if $i == 0 {
+    .tn-no-margin {
+      margin: 0;
+    }
+    .tn-margin-xs {
+    	margin: 10rpx;
+    }
+    .tn-margin-sm {
+    	margin: 20rpx;
+    }
+    .tn-margin-md {
+    	margin: 24rpx;
+    }
+    .tn-margin {
+    	margin: 30rpx;
+    }
+    .tn-margin-lg {
+    	margin: 40rpx;
+    }
+    .tn-margin-xl {
+    	margin: 50rpx;
+    }
+    .tn-margin-xxl {
+    	margin: 60rpx;
+    }
+  } @else {
+    .tn-no-margin-#{nth($direction, $i)} {
+      margin-#{nth($direction, $i)}: 0;
+    }
+    .tn-margin-#{nth($direction, $i)}-xs {
+    	margin-#{nth($direction, $i)}: 10rpx;
+    }
+    .tn-margin-#{nth($direction, $i)}-sm {
+    	margin-#{nth($direction, $i)}: 20rpx;
+    }
+    .tn-margin-#{nth($direction, $i)}-md {
+    	margin-#{nth($direction, $i)}: 24rpx;
+    }
+    .tn-margin-#{nth($direction, $i)} {
+    	margin-#{nth($direction, $i)}: 30rpx;
+    }
+    .tn-margin-#{nth($direction, $i)}-lg {
+    	margin-#{nth($direction, $i)}: 40rpx;
+    }
+    .tn-margin-#{nth($direction, $i)}-xl {
+    	margin-#{nth($direction, $i)}: 50rpx;
+    }
+    .tn-margin-#{nth($direction, $i)}-xxl {
+    	margin-#{nth($direction, $i)}: 60rpx;
+    }
+  }
+}
+
+/* 内边距 end */
+
+/* 外边距 start */
+
+@for $i from 0 to length($direction) + 1 {
+  @if $i == 0 {
+    .tn-no-padding {
+      padding: 0;
+    }
+    .tn-padding-xs {
+    	padding: 10rpx;
+    }
+    .tn-padding-sm {
+    	padding: 20rpx;
+    }
+    .tn-padding-md {
+    	padding: 24rpx;
+    }
+    .tn-padding {
+    	padding: 30rpx;
+    }
+    .tn-padding-lg {
+    	padding: 40rpx;
+    }
+    .tn-padding-xl {
+    	padding: 50rpx;
+    }
+    .tn-padding-xxl {
+    	padding: 60rpx;
+    }
+  } @else {
+    .tn-no-padding-#{nth($direction, $i)} {
+      padding-#{nth($direction, $i)}: 0;
+    }
+    .tn-padding-#{nth($direction, $i)}-xs {
+    	padding-#{nth($direction, $i)}: 10rpx;
+    }
+    .tn-padding-#{nth($direction, $i)}-sm {
+    	padding-#{nth($direction, $i)}: 20rpx;
+    }
+    .tn-padding-#{nth($direction, $i)}-md {
+    	padding-#{nth($direction, $i)}: 24rpx;
+    }
+    .tn-padding-#{nth($direction, $i)} {
+    	padding-#{nth($direction, $i)}: 30rpx;
+    }
+    .tn-padding-#{nth($direction, $i)}-lg {
+    	padding-#{nth($direction, $i)}: 40rpx;
+    }
+    .tn-padding-#{nth($direction, $i)}-xl {
+    	padding-#{nth($direction, $i)}: 50rpx;
+    }
+    .tn-padding-#{nth($direction, $i)}-xxl {
+    	padding-#{nth($direction, $i)}: 60rpx;
+    }
+  }
+}
+
+/* 外边距 end */
+
+/* float start */
+
+.tn-float-left {
+  float: left;
+}
+
+.tn-float-right {
+  float: right;
+}
+
+.tn-clear-float {
+  clear: both;
+}
+
+.tn-clear-float::after,
+.tn-clear-float::before {
+  content: " ";
+  display: table;
+  clear: both;
+}
+
+/* float end */
+
+/* 文本 start */
+
+.tn-text-xs {
+  font-size: 20rpx;
+}
+
+.tn-text-sm {
+  font-size: 24rpx;
+}
+
+.tn-text-md {
+  font-size: 28rpx;
+}
+
+.tn-text-lg {
+  font-size: 32rpx;
+}
+
+.tn-text-xl {
+  font-size: 36rpx;
+}
+
+.tn-text-xxl {
+  font-size: 40rpx;
+}
+
+.tn-text-xl-xxl {
+  font-size: 80rpx;
+}
+
+.tn-text-xxl-xxl {
+  font-size: 120rpx;
+}
+
+.tn-text-upper {
+  text-transform: uppercase;
+}
+
+.tn-text-cap {
+  text-transform: capitalize;
+}
+
+.tn-text-lower {
+  text-transform: lowercase;
+}
+
+.tn-text-bold {
+  font-weight: bold;
+}
+
+.tn-text-center {
+  text-align: center;
+}
+
+.tn-text-left {
+	text-align: left;
+}
+
+.tn-text-right {
+	text-align: right;
+}
+
+.tn-text-justify {
+	text-align: justify;
+}
+
+.tn-text-content {
+  line-height: 1.6;
+}
+
+.tn-text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tn-text-ellipsis-2 {
+	display: -webkit-box;
+	overflow: hidden;
+	white-space: normal !important;
+	text-overflow: ellipsis;
+	word-wrap: break-word;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
+.tn-text-clip {
+  -webkit-background-clip: text;
+  color: transparent !important;
+}
+
+.tn-text-break-word {
+  word-wrap: break-word;
+}
+
+/* 文本 end */
+
+/* hover 点击效果 start */
+.tn-hover {
+  opacity: 0.6;
+}
+/* hover 点击效果 end */
+
+/* 去除原生button样式 start */
+.tn-button--clear-style {
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: inherit;
+  color: inherit;
+}
+/* 去除原生button样式 end */
+
+/* 头像组 start */
+// .tn-avatar-group {
+//   direction: rtl;
+//   unicode-bidi: bidi-override;
+//   padding: 0 10rpx 0 40rpx;
+//   display: inline-block;
+  
+//   .tn-avatar {
+//     margin-left: -30rpx !important;
+//     border: 4rpx solid $tn-border-solid-color;
+//     vertical-align: middle;
+    
+//     &--sm {
+//       margin-left: -20rpx !important;
+//       border: 1rpx solid $tn-border-solid-color;
+//     }
+//   }
+// }
+/* 头像组 end */
+
+/* 提升H5端uni.toast()的层级，避免被tn-modal等遮盖 start */
+/* #ifdef H5 */
+uni-toast {
+    z-index: 10090;
+}
+uni-toast .uni-toast {
+   z-index: 10090;
+}
+/* #endif */
+/* 提升H5端uni.toast()的层级，避免被tn-modal等遮盖 end */
+
+/* iPhoneX底部安全区定义 start */
+.tn-safe-area-inset-bottom {
+  padding-bottom: 0;  
+  padding-bottom: constant(safe-area-inset-bottom);  
+  padding-bottom: env(safe-area-inset-bottom);  
+} 
+/* iPhoneX底部安全区定义 end */
diff --git a/tuniao-ui/libs/css/style.h5.scss b/tuniao-ui/libs/css/style.h5.scss
new file mode 100644
index 0000000..647c902
--- /dev/null
+++ b/tuniao-ui/libs/css/style.h5.scss
@@ -0,0 +1,35 @@
+/* H5的时候，隐藏滚动条 */
+::-webkit-scrollbar {
+	display: none;  
+	width: 0 !important;  
+	height: 0 !important;  
+	-webkit-appearance: none;  
+	background: transparent;  
+}
+
+/* 双标签 start*/
+.capsule {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 20%;
+  min-width: 136rpx;
+  height: 45rpx;
+  
+  .capsule-tag {
+    margin: 0;
+    
+    &:first-child {
+      border-top-right-radius: 0rpx;
+      border-bottom-right-radius: 0rpx;
+    }
+    
+    &:last-child {
+      
+      &::after {
+        border-top-left-radius: 0rpx;
+        border-bottom-left-radius: 0rpx;
+      }
+    }
+  }
+}
+/* 双标签 end*/
\ No newline at end of file
diff --git a/tuniao-ui/libs/css/style.mp.scss b/tuniao-ui/libs/css/style.mp.scss
new file mode 100644
index 0000000..f5aed9e
--- /dev/null
+++ b/tuniao-ui/libs/css/style.mp.scss
@@ -0,0 +1,52 @@
+::-webkit-scrollbar {
+	display: none;  
+	width: 0 !important;  
+	height: 0 !important;  
+	-webkit-appearance: none;  
+	background: transparent;  
+}
+/* 微信小程序编译后页面有组件名的元素，特别处理 start */
+/* #ifdef MP-WEIXIN || MP-QQ */
+// 各家小程序宫格组件外层设置为100%，避免受到父元素display: flex;的影响
+
+/* 双标签 start*/
+.capsule {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 20%;
+  min-width: 136rpx;
+  height: 45rpx;
+  
+  tn-tag {
+    margin: 0;
+    width: 100%;
+    
+    &:first-child {
+      .tn-tag {
+        border-top-right-radius: 0rpx;
+        border-bottom-right-radius: 0rpx;
+      }
+    }
+    
+    &:last-child {
+      .tn-tag {
+        &::after {
+          border-top-left-radius: 0rpx;
+          border-bottom-left-radius: 0rpx;
+        }
+      }
+      
+      
+    }
+  }
+}
+/* 双标签 end*/
+
+/* #endif */
+/* 微信小程序编译后页面有组件名的元素，特别处理 end */
+
+/* 头条小程序编译后页面有组件名的元素，特别处理 start */
+/* #ifdef MP-TOUTIAO */
+// 各家小程序宫格组件外层设置为100%，避免受到父元素display: flex;的影响
+/* #endif */
+/* 头条小程序编译后页面有组件名的元素，特别处理 end */
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/$parent.js b/tuniao-ui/libs/function/$parent.js
new file mode 100644
index 0000000..49854cc
--- /dev/null
+++ b/tuniao-ui/libs/function/$parent.js
@@ -0,0 +1,18 @@
+// 获取父组件的参数，在支付宝小程序中不支持provide/inject的写法
+// 在非H5中this.$parent可以获取到父组件，但是在H5中需要多次调用this.$parent.$parent.xxx
+// 传递默认值undefined表示查找最顶层的$parent
+export default function $parent(name = undefined) {
+  let parent = this.$parent
+  // 通过whle遍历，这里主要是为了H5需要多层解析
+  while(parent) {
+    // 父组件
+    if (parent.$options && parent.$options.name !== name) {
+      // 如果组件的name不相等，则继续查找
+      parent = parent.$parent
+    } else {
+      return parent
+    }
+  }
+  
+  return false
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/array.js b/tuniao-ui/libs/function/array.js
new file mode 100644
index 0000000..fa947ea
--- /dev/null
+++ b/tuniao-ui/libs/function/array.js
@@ -0,0 +1,22 @@
+/**
+ * 打乱传入的数组
+ * 
+ * @param {Array} array 待打乱的数组 
+ */
+function random(array = []) {
+  return array.sort(() => Math.random() - 0.5)
+}
+
+/**
+ * 判断是否为数组
+ * 
+ * @param {Object} arr
+ */
+function isArray(arr) {
+  return Object.prototype.toString.call(arr) === '[object Array]'
+}
+
+export default {
+  random,
+  isArray
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/color.js b/tuniao-ui/libs/function/color.js
new file mode 100644
index 0000000..11f3365
--- /dev/null
+++ b/tuniao-ui/libs/function/color.js
@@ -0,0 +1,270 @@
+let color = [
+  'red',
+  'purplered',
+  'purple',
+  'bluepurple',
+  'aquablue',
+  'blue',
+  'indigo',
+  'cyan',
+  'teal',
+  'green',
+  'yellowgreen',
+  'lime',
+  'yellow',
+  'orangeyellow',
+  'orange',
+  'orangered',
+  'brown',
+  'grey',
+  'gray'
+]
+
+// 酷炫颜色的数量
+const COOL_BG_COLOR_COUNT = 16
+
+/**
+ * 获取图鸟配色颜色列表
+ */
+function getTuniaoColorList() {
+  return color
+}
+
+/**
+ * 获取指定类型的随机颜色对应的类
+ * @param {String} type 颜色类型
+ */
+function getRandomColorClass(type = 'bg') {
+  const index = Math.floor(Math.random() * color.length)
+  const colorValue = color[index]
+
+  return 'tn-' + type + '-' + colorValue
+}
+
+/**
+ * 随机获取酷炫背景对应的类
+ */
+function getRandomCoolBgClass() {
+  const index = (Math.random() * COOL_BG_COLOR_COUNT) + 1
+  return 'tn-cool-bg-color-' + Math.floor(index)
+}
+
+/**
+ * 根据传入的值获取内部背景颜色类
+ * 
+ * @param {String} backgroundColor 背景颜色信息
+ */
+function getBackgroundColorInternalClass(backgroundColor = '') {
+  if (!backgroundColor) return ''
+  
+  if (['tn-bg', 'tn-dynamic-bg', 'tn-main-gradient', 'tn-cool-bg'].some(item => {
+    return backgroundColor.includes(item)
+  })) {
+    return backgroundColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取背景颜色样式
+ * 
+ * @param {String} backgroundColor 背景颜色信息
+ */
+function getBackgroundColorStyle(backgroundColor = '') {
+  if (!backgroundColor) return ''
+  
+  if (!backgroundColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
+    return backgroundColor.includes(item)
+  })) {
+    return backgroundColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取内部字体颜色类
+ * 
+ * @param {String} fontColor 背景颜色信息
+ */
+function getFontColorInternalClass(fontColor = '') {
+  if (!fontColor) return ''
+  
+  if (['tn-color'].some(item => {
+    return fontColor.includes(item)
+  })) {
+    return fontColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取字体颜色样式
+ * 
+ * @param {String} fontColor 背景颜色信息
+ */
+function getFontColorStyle(fontColor = '') {
+  if (!fontColor) return ''
+  
+  if (!fontColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
+    return fontColor.includes(item)
+  })) {
+    return fontColor
+  }
+  return ''
+}
+
+/**
+ * 求两个颜色之间的渐变值
+ * 
+ * @param {String} startColor 开始颜色
+ * @param {String} endColor 结束颜色
+ * @param {Number} step 颜色等分的份额 
+ */
+function colorGradient(startColor = 'rgb(0, 0, 0)', endColor='rgb(255, 255, 255)', step = 10) {
+  let startRGB = hexToRGB(startColor, false)
+  let startR = startRGB[0]
+  let startG = startRGB[1]
+  let startB = startRGB[2]
+  
+  let endRGB = hexToRGB(endColor, false)
+  let endR = endRGB[0]
+  let endG = endRGB[1]
+  let endB = endRGB[2]
+  
+  // 求差值
+  let R = (endR - startR) / step
+  let G = (endG - startG) / step
+  let B = (endB - startB) / step
+  
+  let colorArr = []
+  for (let i = 0; i < step; i++) {
+    // 计算每一步的hex值
+    let hex = rgbToHex(`rgb(${Math.round(R * i + startR)}, ${Math.round(G * i + startG)}, ${Math.round(B * i + startB)})`)
+    colorArr.push(hex)
+  }
+  return colorArr
+}
+
+/**
+ * 将hex的颜色表示方式转换为rgb表示方式
+ * 
+ * @param {String} color 颜色
+ * @param {Boolean} str 是否返回字符串
+ * @return {Array|String} rgb的值
+ */
+function hexToRGB(color, str = true) {
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  
+  color = color.toLowerCase()
+  if (color && reg.test(color)) {
+    // #000 => #000000
+    if (color.length === 4) {
+      let colorNew = '#'
+      for (let i = 1; i < 4; i++) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+      }
+      color = colorNew
+    }
+    // 处理六位的颜色值
+    let colorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
+    }
+    if (!str) {
+      return colorChange
+    } else {
+      return `rgb(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]})`
+    }
+  } else if (/^(rgb|RGB)/.test(color)) {
+    let arr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(',')
+    return arr.map(item => Number(item))
+  } else {
+    return color
+  }
+}
+
+/**
+ * 将rgb的颜色表示方式转换成hex表示方式
+ * 
+ * @param {Object} rgb rgb颜色值
+ */
+function rgbToHex(rgb) {
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  if (/^(rgb|RGB)/.test(rgb)) {
+    let color = rgb.replace(/(?:\(|\)|rgb|GRB)*/g, "").split(',')
+    let strHex = '#'
+    for (let i = 0; i < color.length; i++) {
+      let hex = Number(color[i]).toString(16)
+      // 保证每个值否是两位数
+      hex = String(hex).length === 1 ? 0 + '' + hex: hex
+      if (hex === '0') {
+        hex += hex
+      }
+      strHex += hex
+    }
+    if (strHex.length !== 7) {
+      strHex = rgb
+    }
+    return strHex
+  } else if (reg.test(rgb)) {
+    let num = rgb.replace(/#/, '').split('')
+    if (num.length === 6) {
+      return rgb
+    } else if (num.length === 3) {
+      let numHex = '#'
+      for (let i = 0; i < num.length; i++) {
+        numHex += (num[i] + num[i])
+      }
+      return numHex
+    }
+  } else {
+    return rgb
+  }
+}
+
+/**
+ * 将传入的颜色值转换为rgba字符串
+ * 
+ * @param {String} color 颜色
+ * @param {Number} alpha 透明度
+ */
+function colorToRGBA(color, alpha = 0.3) {
+  color = rgbToHex(color)
+  // 十六进制颜色值的正则表达式
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  
+  color = color.toLowerCase()
+  if (color && reg.test(color)) {
+    // #000 => #000000
+    if (color.length === 4) {
+      let colorNew = '#'
+      for (let i = 1; i < 4; i++) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+      }
+      color = colorNew
+    }
+    // 处理六位的颜色值
+    let colorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
+    }
+    return `rgba(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]}, ${alpha})`
+  } else {
+    return color
+  }
+}
+
+export default {
+  COOL_BG_COLOR_COUNT: COOL_BG_COLOR_COUNT,
+  getTuniaoColorList,
+  getRandomColorClass,
+  getRandomCoolBgClass,
+  getBackgroundColorInternalClass,
+  getBackgroundColorStyle,
+  getFontColorInternalClass,
+  getFontColorStyle,
+  colorGradient,
+  hexToRGB,
+  rgbToHex,
+  colorToRGBA
+}
diff --git a/tuniao-ui/libs/function/colorUtils.js b/tuniao-ui/libs/function/colorUtils.js
new file mode 100644
index 0000000..11f3365
--- /dev/null
+++ b/tuniao-ui/libs/function/colorUtils.js
@@ -0,0 +1,270 @@
+let color = [
+  'red',
+  'purplered',
+  'purple',
+  'bluepurple',
+  'aquablue',
+  'blue',
+  'indigo',
+  'cyan',
+  'teal',
+  'green',
+  'yellowgreen',
+  'lime',
+  'yellow',
+  'orangeyellow',
+  'orange',
+  'orangered',
+  'brown',
+  'grey',
+  'gray'
+]
+
+// 酷炫颜色的数量
+const COOL_BG_COLOR_COUNT = 16
+
+/**
+ * 获取图鸟配色颜色列表
+ */
+function getTuniaoColorList() {
+  return color
+}
+
+/**
+ * 获取指定类型的随机颜色对应的类
+ * @param {String} type 颜色类型
+ */
+function getRandomColorClass(type = 'bg') {
+  const index = Math.floor(Math.random() * color.length)
+  const colorValue = color[index]
+
+  return 'tn-' + type + '-' + colorValue
+}
+
+/**
+ * 随机获取酷炫背景对应的类
+ */
+function getRandomCoolBgClass() {
+  const index = (Math.random() * COOL_BG_COLOR_COUNT) + 1
+  return 'tn-cool-bg-color-' + Math.floor(index)
+}
+
+/**
+ * 根据传入的值获取内部背景颜色类
+ * 
+ * @param {String} backgroundColor 背景颜色信息
+ */
+function getBackgroundColorInternalClass(backgroundColor = '') {
+  if (!backgroundColor) return ''
+  
+  if (['tn-bg', 'tn-dynamic-bg', 'tn-main-gradient', 'tn-cool-bg'].some(item => {
+    return backgroundColor.includes(item)
+  })) {
+    return backgroundColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取背景颜色样式
+ * 
+ * @param {String} backgroundColor 背景颜色信息
+ */
+function getBackgroundColorStyle(backgroundColor = '') {
+  if (!backgroundColor) return ''
+  
+  if (!backgroundColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
+    return backgroundColor.includes(item)
+  })) {
+    return backgroundColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取内部字体颜色类
+ * 
+ * @param {String} fontColor 背景颜色信息
+ */
+function getFontColorInternalClass(fontColor = '') {
+  if (!fontColor) return ''
+  
+  if (['tn-color'].some(item => {
+    return fontColor.includes(item)
+  })) {
+    return fontColor
+  }
+  return ''
+}
+
+/**
+ * 根据传入的值获取字体颜色样式
+ * 
+ * @param {String} fontColor 背景颜色信息
+ */
+function getFontColorStyle(fontColor = '') {
+  if (!fontColor) return ''
+  
+  if (!fontColor.startsWith('tn-') || ['#', 'rgb', 'rgba'].some(item => {
+    return fontColor.includes(item)
+  })) {
+    return fontColor
+  }
+  return ''
+}
+
+/**
+ * 求两个颜色之间的渐变值
+ * 
+ * @param {String} startColor 开始颜色
+ * @param {String} endColor 结束颜色
+ * @param {Number} step 颜色等分的份额 
+ */
+function colorGradient(startColor = 'rgb(0, 0, 0)', endColor='rgb(255, 255, 255)', step = 10) {
+  let startRGB = hexToRGB(startColor, false)
+  let startR = startRGB[0]
+  let startG = startRGB[1]
+  let startB = startRGB[2]
+  
+  let endRGB = hexToRGB(endColor, false)
+  let endR = endRGB[0]
+  let endG = endRGB[1]
+  let endB = endRGB[2]
+  
+  // 求差值
+  let R = (endR - startR) / step
+  let G = (endG - startG) / step
+  let B = (endB - startB) / step
+  
+  let colorArr = []
+  for (let i = 0; i < step; i++) {
+    // 计算每一步的hex值
+    let hex = rgbToHex(`rgb(${Math.round(R * i + startR)}, ${Math.round(G * i + startG)}, ${Math.round(B * i + startB)})`)
+    colorArr.push(hex)
+  }
+  return colorArr
+}
+
+/**
+ * 将hex的颜色表示方式转换为rgb表示方式
+ * 
+ * @param {String} color 颜色
+ * @param {Boolean} str 是否返回字符串
+ * @return {Array|String} rgb的值
+ */
+function hexToRGB(color, str = true) {
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  
+  color = color.toLowerCase()
+  if (color && reg.test(color)) {
+    // #000 => #000000
+    if (color.length === 4) {
+      let colorNew = '#'
+      for (let i = 1; i < 4; i++) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+      }
+      color = colorNew
+    }
+    // 处理六位的颜色值
+    let colorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
+    }
+    if (!str) {
+      return colorChange
+    } else {
+      return `rgb(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]})`
+    }
+  } else if (/^(rgb|RGB)/.test(color)) {
+    let arr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(',')
+    return arr.map(item => Number(item))
+  } else {
+    return color
+  }
+}
+
+/**
+ * 将rgb的颜色表示方式转换成hex表示方式
+ * 
+ * @param {Object} rgb rgb颜色值
+ */
+function rgbToHex(rgb) {
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  if (/^(rgb|RGB)/.test(rgb)) {
+    let color = rgb.replace(/(?:\(|\)|rgb|GRB)*/g, "").split(',')
+    let strHex = '#'
+    for (let i = 0; i < color.length; i++) {
+      let hex = Number(color[i]).toString(16)
+      // 保证每个值否是两位数
+      hex = String(hex).length === 1 ? 0 + '' + hex: hex
+      if (hex === '0') {
+        hex += hex
+      }
+      strHex += hex
+    }
+    if (strHex.length !== 7) {
+      strHex = rgb
+    }
+    return strHex
+  } else if (reg.test(rgb)) {
+    let num = rgb.replace(/#/, '').split('')
+    if (num.length === 6) {
+      return rgb
+    } else if (num.length === 3) {
+      let numHex = '#'
+      for (let i = 0; i < num.length; i++) {
+        numHex += (num[i] + num[i])
+      }
+      return numHex
+    }
+  } else {
+    return rgb
+  }
+}
+
+/**
+ * 将传入的颜色值转换为rgba字符串
+ * 
+ * @param {String} color 颜色
+ * @param {Number} alpha 透明度
+ */
+function colorToRGBA(color, alpha = 0.3) {
+  color = rgbToHex(color)
+  // 十六进制颜色值的正则表达式
+  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+  
+  color = color.toLowerCase()
+  if (color && reg.test(color)) {
+    // #000 => #000000
+    if (color.length === 4) {
+      let colorNew = '#'
+      for (let i = 1; i < 4; i++) {
+        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
+      }
+      color = colorNew
+    }
+    // 处理六位的颜色值
+    let colorChange = []
+    for (let i = 1; i < 7; i += 2) {
+      colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
+    }
+    return `rgba(${colorChange[0]}, ${colorChange[1]}, ${colorChange[2]}, ${alpha})`
+  } else {
+    return color
+  }
+}
+
+export default {
+  COOL_BG_COLOR_COUNT: COOL_BG_COLOR_COUNT,
+  getTuniaoColorList,
+  getRandomColorClass,
+  getRandomCoolBgClass,
+  getBackgroundColorInternalClass,
+  getBackgroundColorStyle,
+  getFontColorInternalClass,
+  getFontColorStyle,
+  colorGradient,
+  hexToRGB,
+  rgbToHex,
+  colorToRGBA
+}
diff --git a/tuniao-ui/libs/function/deepClone.js b/tuniao-ui/libs/function/deepClone.js
new file mode 100644
index 0000000..81f4e42
--- /dev/null
+++ b/tuniao-ui/libs/function/deepClone.js
@@ -0,0 +1,29 @@
+/**
+ * 判断是否为数组
+ * 
+ * @param {Object} arr
+ */
+function isArray(arr) {
+  return Object.prototype.toString.call(arr) === '[object Array]'
+}
+
+/**
+ * 深度复制数据
+ * 
+ * @param {Object} obj
+ */
+function deepClone(obj) {
+  if ([null, undefined, NaN, false].includes(obj)) return obj
+  if (typeof obj !== 'object' && typeof obj !== 'function') {
+    return obj
+  }
+  var o = isArray(obj) ? [] : {}
+  for (let i in obj) {
+    if (obj.hasOwnProperty(i)) {
+      o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
+    }
+  }
+  return o
+}
+
+export default deepClone
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/message.js b/tuniao-ui/libs/function/message.js
new file mode 100644
index 0000000..82e5bf3
--- /dev/null
+++ b/tuniao-ui/libs/function/message.js
@@ -0,0 +1,80 @@
+import { getCurrentLanguage } from '../../../utils/i18n'
+
+function getLocalizedText(zh, en) {
+  return getCurrentLanguage() === 'en' ? en : zh
+}
+
+/**
+ * 弹出系统内置的toast
+ */
+function toast(title, mask = false, cb = null, icon = 'none', duration = 1500) {
+  uni.showToast({
+    title: title,
+    icon: icon,
+    mask: mask,
+    duration: duration,
+    success: () => {
+      setTimeout(() => {
+        cb && cb()
+      }, duration)
+    }
+  })
+}
+
+/**
+ * 弹出内置的加载框
+ */
+function loading(title) {
+  uni.showLoading({
+    title: title,
+    mask: true
+  })
+}
+
+/**
+ * 弹出系统内置的modal
+ */
+function modal(title,
+  content,
+  confirmCb,
+  showCancel = false,
+  cancelCb = null,
+  confirmText = getLocalizedText('确定', 'Confirm'),
+  cancelText = getLocalizedText('取消', 'Cancel')) {
+  uni.showModal({
+    title: title,
+    content: content,
+    showCancel: showCancel,
+    cancelText: cancelText,
+    confirmText: confirmText,
+    success: (res) => {
+      if (res.cancel) {
+        cancelCb && cancelCb()
+      } else if (res.confirm) {
+        confirmCb && confirmCb()
+      }
+    }
+  })
+}
+
+/**
+ * 关闭系统内置toast
+ */
+function closeToast() {
+  uni.hideToast()
+}
+
+/**
+ * 关闭系统内置的加载框
+ */
+function closeLoading() {
+  uni.hideLoading()
+}
+
+export default {
+  toast,
+  loading,
+  modal,
+  closeToast,
+  closeLoading
+}
diff --git a/tuniao-ui/libs/function/messageUtils.js b/tuniao-ui/libs/function/messageUtils.js
new file mode 100644
index 0000000..82e5bf3
--- /dev/null
+++ b/tuniao-ui/libs/function/messageUtils.js
@@ -0,0 +1,80 @@
+import { getCurrentLanguage } from '../../../utils/i18n'
+
+function getLocalizedText(zh, en) {
+  return getCurrentLanguage() === 'en' ? en : zh
+}
+
+/**
+ * 弹出系统内置的toast
+ */
+function toast(title, mask = false, cb = null, icon = 'none', duration = 1500) {
+  uni.showToast({
+    title: title,
+    icon: icon,
+    mask: mask,
+    duration: duration,
+    success: () => {
+      setTimeout(() => {
+        cb && cb()
+      }, duration)
+    }
+  })
+}
+
+/**
+ * 弹出内置的加载框
+ */
+function loading(title) {
+  uni.showLoading({
+    title: title,
+    mask: true
+  })
+}
+
+/**
+ * 弹出系统内置的modal
+ */
+function modal(title,
+  content,
+  confirmCb,
+  showCancel = false,
+  cancelCb = null,
+  confirmText = getLocalizedText('确定', 'Confirm'),
+  cancelText = getLocalizedText('取消', 'Cancel')) {
+  uni.showModal({
+    title: title,
+    content: content,
+    showCancel: showCancel,
+    cancelText: cancelText,
+    confirmText: confirmText,
+    success: (res) => {
+      if (res.cancel) {
+        cancelCb && cancelCb()
+      } else if (res.confirm) {
+        confirmCb && confirmCb()
+      }
+    }
+  })
+}
+
+/**
+ * 关闭系统内置toast
+ */
+function closeToast() {
+  uni.hideToast()
+}
+
+/**
+ * 关闭系统内置的加载框
+ */
+function closeLoading() {
+  uni.hideLoading()
+}
+
+export default {
+  toast,
+  loading,
+  modal,
+  closeToast,
+  closeLoading
+}
diff --git a/tuniao-ui/libs/function/number.js b/tuniao-ui/libs/function/number.js
new file mode 100644
index 0000000..ec64ff0
--- /dev/null
+++ b/tuniao-ui/libs/function/number.js
@@ -0,0 +1,128 @@
+/**
+ * 格式化数字字符串
+ * @param {String, Number} value 待格式化的字符串
+ * @param {Number} digits 保留位数 
+ */
+function formatNumberString(value, digits = 2) {
+  let number = 0
+  // 判断是什么类型
+  if (typeof value === 'string') {
+    number = Number(value)
+  } else if (typeof value === 'number') {
+    number = value
+  }
+  if (isNaN(number) || number === 0) {
+    return 0
+  }
+  
+  let maxNumber = Math.pow(10, digits) - 1
+  if (number > maxNumber) {
+    return `${maxNumber}+`
+  }
+  
+  return number
+}
+
+/**
+ * 格式化数字字符串，往数字前添加0
+ * 
+ * @param {Object} num 待格式化的数值
+ */
+function formatNumberAddZero(value) {
+  let number = 0
+  // 判断是什么类型
+  if (typeof value === 'string') {
+    number = Number(value)
+  } else if (typeof value === 'number') {
+    number = value
+  }
+  if (isNaN(number) || +number < 10) {
+    return '0' + number
+  } else {
+    return String(number)
+  }
+  
+}
+
+/**
+ * 格式化数字，往数值后添加单位
+ *
+ * @param {Object} value 待格式化的数值
+ * @param {Object} digits 保留位数
+ */
+function formatNumberAddPriceUnit(value, digits = 2) {
+  // 数值分割点
+  const unitSplit = [
+    { value: 1, symbol: ''},
+    { value: 1E3, symbol: 'K'},
+    { value: 1E4, symbol: 'W'},
+  ]
+  
+  const reg = /\.0+$|(\.[0=9]*[1-9])0+$/
+  
+  let number = 0
+  // 判断是什么类型
+  if (typeof value === 'string') {
+    number = Number(value)
+  } else if (typeof value === 'number') {
+    number = value
+  }
+  
+  let i
+  for (i = unitSplit.length - 1; i > 0; i--) {
+    if (number >= unitSplit[i].value) break
+  }
+  return (number / unitSplit[i].value).toFixed(digits).replace(reg, "$1") + unitSplit[i].symbol
+}
+
+/**
+ * 获取数值的整数位数
+ *
+ * @param {Object} number 数值 
+ */
+function getDigit(number) {
+  let digit = -1
+  while (number >= 1) {
+    digit++
+    number = number / 10
+  }
+  return digit
+}
+
+/**
+ * 获取指定范围的随机数(返回整数)
+ 
+ * @param {Object} min 最小值
+ * @param {Object} max 最大值
+ */
+function random(min, max) {
+  if (min >= 0 && max > 0 && max >= min) {
+    let gab = max - min
+    return Math.random() * gab + min
+  } else {
+    return 0
+  }
+}
+
+/**
+ * 获取指定范围的随机数(返回整数)
+ 
+ * @param {Object} min 最小值
+ * @param {Object} max 最大值
+ */
+function randomInt(min, max) {
+  if (min >= 0 && max > 0 && max >= min) {
+    let gab = max - min + 1
+    return Math.floor(Math.random() * gab + min)
+  } else {
+    return 0
+  }
+}
+
+export default {
+  formatNumberString,
+  formatNumberAddZero,
+  formatNumberAddPriceUnit,
+  random,
+  randomInt
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/string.js b/tuniao-ui/libs/function/string.js
new file mode 100644
index 0000000..dadc24c
--- /dev/null
+++ b/tuniao-ui/libs/function/string.js
@@ -0,0 +1,69 @@
+/**
+ * 去掉字符串中空格
+ * 
+ * @param {String} str 待处理的字符串
+ * @param {String} type 处理类型
+ */
+function trim(str, type = 'both') {
+  if (type === 'both') {
+    return str.replace(/^\s+|\s+$/g, "")
+  } else if (type === 'left') {
+    return str.replace(/^\s*/g, "")
+  } else if (type === 'right') {
+    return str.replace(/(\s*$)/g, "")
+  } else if (type === 'all') {
+    return str.replace(/\s+/g, "")
+  } else {
+    return str
+  }
+}
+
+/**
+ * 获取带单位的长度值
+ * 
+ * @param {String} value 待处理的值
+ * @param {String} unit 单位
+ */
+function getLengthUnitValue(value, unit = 'rpx') {
+  if (!value) {
+    return ''
+  }
+  if (/(%|px|rpx|auto)$/.test(value)) return value
+  else return value + unit
+}
+
+/**
+ * 将驼峰命名的字符串转换为指定连接符来进行连接
+ * 
+ * @param {Object} string 待转换的字符串
+ * @param {Object} replace 进行连接的字符
+ */
+function humpConvertChar(string, replace = '_') {
+  if (!string || !replace) {
+    return ''
+  }
+  return string.replace(/([A-Z])/g, `${replace}$1`).toLowerCase()
+}
+
+/**
+ * 将用指定连接符来进行连接的字符串转为驼峰命名的字符串
+ * 
+ * @param {Object} string 待转换的字符串
+ * @param {Object} replace 进行连接的字符
+ */
+function charConvertHump(string, replace = '_') {
+  if (!string || !replace) {
+    return ''
+  }
+  let reg = RegExp(replace + "(\\w)", "g")
+  return string.replace(reg, function(all, letter) {
+    return letter.toUpperCase()
+  })
+}
+
+export default {
+  trim,
+  getLengthUnitValue,
+  humpConvertChar,
+  charConvertHump
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/test.js b/tuniao-ui/libs/function/test.js
new file mode 100644
index 0000000..94fddac
--- /dev/null
+++ b/tuniao-ui/libs/function/test.js
@@ -0,0 +1,232 @@
+/**
+ * 验证电子邮箱格式
+ */
+function email(value) {
+	return /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(value);
+}
+
+/**
+ * 验证手机格式
+ */
+function mobile(value) {
+	return /^1[3-9]\d{9}$/.test(value)
+}
+
+/**
+ * 验证URL格式
+ */
+function url(value) {
+	return /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/.test(value)
+}
+
+/**
+ * 验证日期格式
+ */
+function date(value) {
+	return !/Invalid|NaN/.test(new Date(value).toString())
+}
+
+/**
+ * 验证ISO类型的日期格式
+ */
+function dateISO(value) {
+	return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
+}
+
+/**
+ * 验证十进制数字
+ */
+function number(value) {
+	return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
+}
+
+/**
+ * 验证整数
+ */
+function digits(value) {
+	return /^\d+$/.test(value)
+}
+
+/**
+ * 验证身份证号码
+ */
+function idCard(value) {
+	return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
+		value)
+}
+
+/**
+ * 是否车牌号
+ */
+function carNo(value) {
+	// 新能源车牌
+	const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
+	// 旧车牌
+	const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
+	if (value.length === 7) {
+		return creg.test(value);
+	} else if (value.length === 8) {
+		return xreg.test(value);
+	} else {
+		return false;
+	}
+}
+
+/**
+ * 金额,只允许2位小数
+ */
+function amount(value) {
+	//金额，只允许保留两位小数
+	return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value);
+}
+
+/**
+ * 中文
+ */
+function chinese(value) {
+	let reg = /^[\u4e00-\u9fa5]+$/gi;
+	return reg.test(value);
+}
+
+/**
+ * 只能输入字母
+ */
+function letter(value) {
+	return /^[a-zA-Z]*$/.test(value);
+}
+
+/**
+ * 只能是字母或者数字
+ */
+function enOrNum(value) {
+	//英文或者数字
+	let reg = /^[0-9a-zA-Z]*$/g;
+	return reg.test(value);
+}
+
+/**
+ * 验证是否包含某个值
+ */
+function contains(value, param) {
+	return value.indexOf(param) >= 0
+}
+
+/**
+ * 验证一个值范围[min, max]
+ */
+function range(value, param) {
+	return value >= param[0] && value <= param[1]
+}
+
+/**
+ * 验证一个长度范围[min, max]
+ */
+function rangeLength(value, param) {
+	return value.length >= param[0] && value.length <= param[1]
+}
+
+/**
+ * 是否固定电话
+ */
+function landline(value) {
+	let reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/;
+	return reg.test(value);
+}
+
+/**
+ * 判断是否为空
+ */
+function empty(value) {
+	switch (typeof value) {
+		case 'undefined':
+			return true;
+		case 'string':
+			if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
+			break;
+		case 'boolean':
+			if (!value) return true;
+			break;
+		case 'number':
+			if (0 === value || isNaN(value)) return true;
+			break;
+		case 'object':
+			if (null === value || value.length === 0) return true;
+			for (var i in value) {
+				return false;
+			}
+			return true;
+	}
+	return false;
+}
+
+/**
+ * 是否json字符串
+ */
+function jsonString(value) {
+	if (typeof value == 'string') {
+		try {
+			var obj = JSON.parse(value);
+			if (typeof obj == 'object' && obj) {
+				return true;
+			} else {
+				return false;
+			}
+		} catch (e) {
+			return false;
+		}
+	}
+	return false;
+}
+
+
+/**
+ * 是否数组
+ */
+function array(value) {
+	if (typeof Array.isArray === "function") {
+		return Array.isArray(value);
+	} else {
+		return Object.prototype.toString.call(value) === "[object Array]";
+	}
+}
+
+/**
+ * 是否对象
+ */
+function object(value) {
+	return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+/**
+ * 是否短信验证码
+ */
+function code(value, len = 6) {
+	return new RegExp(`^\\d{${len}}$`).test(value);
+}
+
+
+export default {
+	email,
+	mobile,
+	url,
+	date,
+	dateISO,
+	number,
+	digits,
+	idCard,
+	carNo,
+	amount,
+	chinese,
+	letter,
+	enOrNum,
+	contains,
+	range,
+	rangeLength,
+	empty,
+	isEmpty: empty,
+	jsonString,
+	landline,
+	object,
+	array,
+	code
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/function/updateCustomBarInfo.js b/tuniao-ui/libs/function/updateCustomBarInfo.js
new file mode 100644
index 0000000..eae9f45
--- /dev/null
+++ b/tuniao-ui/libs/function/updateCustomBarInfo.js
@@ -0,0 +1,44 @@
+/**
+ * 更新自定义顶部导航栏的高度
+ */
+function updateCustomBarInfo () {
+  return new Promise((resolve, reject) => {
+    uni.getSystemInfo({
+      success: (e) => {
+        let statusBarHeight = 0
+        let customBarHeight = 0
+        // #ifndef MP
+        statusBarHeight = e.statusBarHeight
+        if (e.platform == 'android') {
+          customBarHeight = e.statusBarHeight + 50
+        } else {
+          customBarHeight = e.statusBarHeight + 45
+        };
+        // #endif
+
+        // #ifdef MP-WEIXIN
+        statusBarHeight = e.statusBarHeight
+        let custom = wx.getMenuButtonBoundingClientRect()
+        customBarHeight = custom.bottom + ((custom.top - e.statusBarHeight) <= 4 ? (custom.top - e
+          .statusBarHeight) + 4 : (custom.top - e.statusBarHeight))
+        // #endif		
+
+        // #ifdef MP-ALIPAY
+        statusBarHeight = e.statusBarHeight
+        customBarHeight = e.statusBarHeight + e.titleBarHeight
+        // #endif
+        resolve({
+          statusBarHeight,
+          customBarHeight
+        })
+      },
+      fail: (err) => {
+        console.log("获取设备信息失败", err);
+        reject()
+      }
+    })
+
+  })
+}
+
+export default updateCustomBarInfo
diff --git a/tuniao-ui/libs/function/uuid.js b/tuniao-ui/libs/function/uuid.js
new file mode 100644
index 0000000..e3cf39e
--- /dev/null
+++ b/tuniao-ui/libs/function/uuid.js
@@ -0,0 +1,41 @@
+/**
+ * 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85
+ * 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier) 
+ * 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题
+ * 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱
+ * v-for的时候,推荐使用后端返回的id而不是循环的index
+ * @param {Number} len uuid的长度
+ * @param {Boolean} firstT 将返回的首字母置为"t"
+ * @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
+ */
+function uuid(len = 32, firstT = true, radix = null) {
+	let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+	let uuid = []
+	radix = radix || chars.length
+
+	if (len) {
+		// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+		for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
+	} else {
+		let r;
+		// rfc4122标准要求返回的uuid中,某些位为固定的字符
+		uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
+		uuid[14] = '4'
+
+		for (let i = 0; i < 36; i++) {
+			if (!uuid[i]) {
+				r = 0 | Math.random() * 16
+				uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]
+			}
+		}
+	}
+	// 移除第一个字符,并用t替代,因为第一个字符为数值时,该uuid不能用作id或者class
+	if (firstT) {
+		uuid.shift()
+		return 't' + uuid.join('')
+	} else {
+		return uuid.join('')
+	}
+}
+
+export default uuid
\ No newline at end of file
diff --git a/tuniao-ui/libs/luch-request/adapters/index.js b/tuniao-ui/libs/luch-request/adapters/index.js
new file mode 100644
index 0000000..5a478b5
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/adapters/index.js
@@ -0,0 +1,99 @@
+import buildURL from '../helpers/buildURL'
+import buildFullPath from '../core/buildFullPath'
+import settle from '../core/settle'
+import { isUndefined } from "../utils"
+
+/**
+ * 返回可选值存在的配置
+ * @param {Array} keys - 可选值数组
+ * @param {Object} config2 - 配置
+ * @return {{}} - 存在的配置项
+ */
+const mergeKeys = (keys, config2) => {
+  let config = {}
+  keys.forEach(prop => {
+    if (!isUndefined(config2[prop])) {
+      config[prop] = config2[prop]
+    }
+  })
+  return config
+}
+export default (config) => {
+  return new Promise((resolve, reject) => {
+    let fullPath = buildURL(buildFullPath(config.baseURL, config.url), config.params)
+    const _config = {
+      url: fullPath,
+      header: config.header,
+      complete: (response) => {
+        config.fullPath = fullPath
+        response.config = config
+        try {
+          // 对可能字符串不是json 的情况容错
+          if (typeof response.data === 'string') {
+            response.data = JSON.parse(response.data)
+          }
+          // eslint-disable-next-line no-empty
+        } catch (e) {
+        }
+        settle(resolve, reject, response)
+      }
+    }
+    let requestTask
+    if (config.method === 'UPLOAD') {
+      delete _config.header['content-type']
+      delete _config.header['Content-Type']
+      let otherConfig = {
+        // #ifdef MP-ALIPAY
+        fileType: config.fileType,
+        // #endif
+        filePath: config.filePath,
+        name: config.name
+      }
+      const optionalKeys = [
+        // #ifdef APP-PLUS || H5
+        'files',
+        // #endif
+        // #ifdef H5
+        'file',
+        // #endif
+        // #ifdef H5 || APP-PLUS
+        'timeout',
+        // #endif
+        'formData'
+      ]
+      requestTask = uni.uploadFile({..._config, ...otherConfig, ...mergeKeys(optionalKeys, config)})
+    } else if (config.method === 'DOWNLOAD') {
+      // #ifdef H5 || APP-PLUS
+      if (!isUndefined(config['timeout'])) {
+        _config['timeout'] = config['timeout']
+      }
+      // #endif
+      requestTask = uni.downloadFile(_config)
+    } else {
+      const optionalKeys = [
+        'data',
+        'method',
+        // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
+        'timeout',
+        // #endif
+        'dataType',
+        // #ifndef MP-ALIPAY
+        'responseType',
+        // #endif
+        // #ifdef APP-PLUS
+        'sslVerify',
+        // #endif
+        // #ifdef H5
+        'withCredentials',
+        // #endif
+        // #ifdef APP-PLUS
+        'firstIpv4',
+        // #endif
+      ]
+      requestTask = uni.request({..._config,...mergeKeys(optionalKeys, config)})
+    }
+    if (config.getTask) {
+      config.getTask(requestTask, config)
+    }
+  })
+}
diff --git a/tuniao-ui/libs/luch-request/core/InterceptorManager.js b/tuniao-ui/libs/luch-request/core/InterceptorManager.js
new file mode 100644
index 0000000..3ea0d5e
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/InterceptorManager.js
@@ -0,0 +1,51 @@
+'use strict'
+
+
+function InterceptorManager() {
+  this.handlers = []
+}
+
+/**
+ * Add a new interceptor to the stack
+ *
+ * @param {Function} fulfilled The function to handle `then` for a `Promise`
+ * @param {Function} rejected The function to handle `reject` for a `Promise`
+ *
+ * @return {Number} An ID used to remove interceptor later
+ */
+InterceptorManager.prototype.use = function use(fulfilled, rejected) {
+  this.handlers.push({
+    fulfilled: fulfilled,
+    rejected: rejected
+  })
+  return this.handlers.length - 1
+}
+
+/**
+ * Remove an interceptor from the stack
+ *
+ * @param {Number} id The ID that was returned by `use`
+ */
+InterceptorManager.prototype.eject = function eject(id) {
+  if (this.handlers[id]) {
+    this.handlers[id] = null
+  }
+}
+
+/**
+ * Iterate over all the registered interceptors
+ *
+ * This method is particularly useful for skipping over any
+ * interceptors that may have become `null` calling `eject`.
+ *
+ * @param {Function} fn The function to call for each interceptor
+ */
+InterceptorManager.prototype.forEach = function forEach(fn) {
+  this.handlers.forEach(h => {
+    if (h !== null) {
+      fn(h)
+    }
+  })
+}
+
+export default InterceptorManager
diff --git a/tuniao-ui/libs/luch-request/core/Request.js b/tuniao-ui/libs/luch-request/core/Request.js
new file mode 100644
index 0000000..43bb14c
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/Request.js
@@ -0,0 +1,200 @@
+/**
+ * @Class Request
+ * @description luch-request http请求插件
+ * @version 3.0.7
+ * @Author lu-ch
+ * @Date 2021-09-04
+ * @Email webwork.s@qq.com
+ * 文档: https://www.quanzhan.co/luch-request/
+ * github: https://github.com/lei-mu/luch-request
+ * DCloud: http://ext.dcloud.net.cn/plugin?id=392
+ * HBuilderX: beat-3.0.4 alpha-3.0.4
+ */
+
+
+import dispatchRequest from './dispatchRequest'
+import InterceptorManager from './InterceptorManager'
+import mergeConfig from './mergeConfig'
+import defaults from './defaults'
+import { isPlainObject } from '../utils'
+import clone from '../utils/clone'
+
+export default class Request {
+  /**
+   * @param {Object} arg - 全局配置
+   * @param {String} arg.baseURL - 全局根路径
+   * @param {Object} arg.header - 全局header
+   * @param {String} arg.method = [GET|POST|PUT|DELETE|CONNECT|HEAD|OPTIONS|TRACE] - 全局默认请求方式
+   * @param {String} arg.dataType = [json] - 全局默认的dataType
+   * @param {String} arg.responseType = [text|arraybuffer] - 全局默认的responseType。支付宝小程序不支持
+   * @param {Object} arg.custom - 全局默认的自定义参数
+   * @param {Number} arg.timeout - 全局默认的超时时间，单位 ms。默认60000。H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
+   * @param {Boolean} arg.sslVerify - 全局默认的是否验证 ssl 证书。默认true.仅App安卓端支持（HBuilderX 2.3.3+）
+   * @param {Boolean} arg.withCredentials - 全局默认的跨域请求时是否携带凭证（cookies）。默认false。仅H5支持（HBuilderX 2.6.15+）
+   * @param {Boolean} arg.firstIpv4 - 全DNS解析时优先使用ipv4。默认false。仅 App-Android 支持 (HBuilderX 2.8.0+)
+   * @param {Function(statusCode):Boolean} arg.validateStatus - 全局默认的自定义验证器。默认statusCode >= 200 && statusCode < 300
+   */
+  constructor(arg = {}) {
+    if (!isPlainObject(arg)) {
+      arg = {}
+      console.warn('设置全局参数必须接收一个Object')
+    }
+    this.config = clone({...defaults, ...arg})
+    this.interceptors = {
+      request: new InterceptorManager(),
+      response: new InterceptorManager()
+    }
+  }
+
+  /**
+   * @Function
+   * @param {Request~setConfigCallback} f - 设置全局默认配置
+   */
+  setConfig(f) {
+    this.config = f(this.config)
+  }
+
+  middleware(config) {
+    config = mergeConfig(this.config, config)
+    let chain = [dispatchRequest, undefined]
+    let promise = Promise.resolve(config)
+
+    this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
+      chain.unshift(interceptor.fulfilled, interceptor.rejected)
+    })
+
+    this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
+      chain.push(interceptor.fulfilled, interceptor.rejected)
+    })
+
+    while (chain.length) {
+      promise = promise.then(chain.shift(), chain.shift())
+    }
+
+    return promise
+  }
+
+  /**
+   * @Function
+   * @param {Object} config - 请求配置项
+   * @prop {String} options.url - 请求路径
+   * @prop {Object} options.data - 请求参数
+   * @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
+   * @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse
+   * @prop {Object} [options.header = config.header] - 请求header
+   * @prop {Object} [options.method = config.method] - 请求方法
+   * @returns {Promise<unknown>}
+   */
+  request(config = {}) {
+    return this.middleware(config)
+  }
+
+  get(url, options = {}) {
+    return this.middleware({
+      url,
+      method: 'GET',
+      ...options
+    })
+  }
+
+  post(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'POST',
+      ...options
+    })
+  }
+
+  // #ifndef MP-ALIPAY
+  put(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'PUT',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
+  delete(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'DELETE',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef H5 || MP-WEIXIN
+  connect(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'CONNECT',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef  H5 || MP-WEIXIN || MP-BAIDU
+  head(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'HEAD',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
+  options(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'OPTIONS',
+      ...options
+    })
+  }
+
+  // #endif
+
+  // #ifdef H5 || MP-WEIXIN
+  trace(url, data, options = {}) {
+    return this.middleware({
+      url,
+      data,
+      method: 'TRACE',
+      ...options
+    })
+  }
+
+  // #endif
+
+  upload(url, config = {}) {
+    config.url = url
+    config.method = 'UPLOAD'
+    return this.middleware(config)
+  }
+
+  download(url, config = {}) {
+    config.url = url
+    config.method = 'DOWNLOAD'
+    return this.middleware(config)
+  }
+}
+
+
+/**
+ * setConfig回调
+ * @return {Object} - 返回操作后的config
+ * @callback Request~setConfigCallback
+ * @param {Object} config - 全局默认config
+ */
diff --git a/tuniao-ui/libs/luch-request/core/buildFullPath.js b/tuniao-ui/libs/luch-request/core/buildFullPath.js
new file mode 100644
index 0000000..f2852f4
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/buildFullPath.js
@@ -0,0 +1,20 @@
+'use strict'
+
+import isAbsoluteURL from '../helpers/isAbsoluteURL'
+import combineURLs from '../helpers/combineURLs'
+
+/**
+ * Creates a new URL by combining the baseURL with the requestedURL,
+ * only when the requestedURL is not already an absolute URL.
+ * If the requestURL is absolute, this function returns the requestedURL untouched.
+ *
+ * @param {string} baseURL The base URL
+ * @param {string} requestedURL Absolute or relative URL to combine
+ * @returns {string} The combined full path
+ */
+export default function buildFullPath(baseURL, requestedURL) {
+  if (baseURL && !isAbsoluteURL(requestedURL)) {
+    return combineURLs(baseURL, requestedURL)
+  }
+  return requestedURL
+}
diff --git a/tuniao-ui/libs/luch-request/core/defaults.js b/tuniao-ui/libs/luch-request/core/defaults.js
new file mode 100644
index 0000000..38afc3a
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/defaults.js
@@ -0,0 +1,30 @@
+/**
+ * 默认的全局配置
+ */
+
+
+export default {
+  baseURL: '',
+  header: {},
+  method: 'GET',
+  dataType: 'json',
+  // #ifndef MP-ALIPAY
+  responseType: 'text',
+  // #endif
+  custom: {},
+  // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
+  timeout: 60000,
+  // #endif
+  // #ifdef APP-PLUS
+  sslVerify: true,
+  // #endif
+  // #ifdef H5
+  withCredentials: false,
+  // #endif
+  // #ifdef APP-PLUS
+  firstIpv4: false,
+  // #endif
+  validateStatus: function validateStatus(status) {
+    return status >= 200 && status < 300
+  }
+}
diff --git a/tuniao-ui/libs/luch-request/core/dispatchRequest.js b/tuniao-ui/libs/luch-request/core/dispatchRequest.js
new file mode 100644
index 0000000..c5f2c85
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/dispatchRequest.js
@@ -0,0 +1,6 @@
+import adapter from '../adapters/index'
+
+
+export default (config) => {
+  return adapter(config)
+}
diff --git a/tuniao-ui/libs/luch-request/core/mergeConfig.js b/tuniao-ui/libs/luch-request/core/mergeConfig.js
new file mode 100644
index 0000000..a3ccbf7
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/mergeConfig.js
@@ -0,0 +1,103 @@
+import {deepMerge, isUndefined} from '../utils'
+
+/**
+ * 合并局部配置优先的配置，如果局部有该配置项则用局部，如果全局有该配置项则用全局
+ * @param {Array} keys - 配置项
+ * @param {Object} globalsConfig - 当前的全局配置
+ * @param {Object} config2 - 局部配置
+ * @return {{}}
+ */
+const mergeKeys = (keys, globalsConfig, config2) => {
+  let config = {}
+  keys.forEach(prop => {
+    if (!isUndefined(config2[prop])) {
+      config[prop] = config2[prop]
+    } else if (!isUndefined(globalsConfig[prop])) {
+      config[prop] = globalsConfig[prop]
+    }
+  })
+  return config
+}
+/**
+ *
+ * @param globalsConfig - 当前实例的全局配置
+ * @param config2 - 当前的局部配置
+ * @return - 合并后的配置
+ */
+export default (globalsConfig, config2 = {}) => {
+  const method = config2.method || globalsConfig.method || 'GET'
+  let config = {
+    baseURL: globalsConfig.baseURL || '',
+    method: method,
+    url: config2.url || '',
+    params: config2.params || {},
+    custom: {...(globalsConfig.custom || {}), ...(config2.custom || {})},
+    header: deepMerge(globalsConfig.header || {}, config2.header || {})
+  }
+  const defaultToConfig2Keys = ['getTask', 'validateStatus']
+  config = {...config, ...mergeKeys(defaultToConfig2Keys, globalsConfig, config2)}
+
+  // eslint-disable-next-line no-empty
+  if (method === 'DOWNLOAD') {
+    // #ifdef H5 || APP-PLUS
+    if (!isUndefined(config2.timeout)) {
+      config['timeout'] = config2['timeout']
+    } else if (!isUndefined(globalsConfig.timeout)) {
+      config['timeout'] = globalsConfig['timeout']
+    }
+    // #endif
+  } else if (method === 'UPLOAD') {
+    delete config.header['content-type']
+    delete config.header['Content-Type']
+    const uploadKeys = [
+      // #ifdef APP-PLUS || H5
+      'files',
+      // #endif
+      // #ifdef MP-ALIPAY
+      'fileType',
+      // #endif
+      // #ifdef H5
+      'file',
+      // #endif
+      'filePath',
+      'name',
+      // #ifdef H5 || APP-PLUS
+      'timeout',
+      // #endif
+      'formData',
+    ]
+    uploadKeys.forEach(prop => {
+      if (!isUndefined(config2[prop])) {
+        config[prop] = config2[prop]
+      }
+    })
+    // #ifdef H5 || APP-PLUS
+    if (isUndefined(config.timeout) && !isUndefined(globalsConfig.timeout)) {
+      config['timeout'] = globalsConfig['timeout']
+    }
+    // #endif
+  } else {
+    const defaultsKeys = [
+      'data',
+      // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
+      'timeout',
+      // #endif
+      'dataType',
+      // #ifndef MP-ALIPAY
+      'responseType',
+      // #endif
+      // #ifdef APP-PLUS
+      'sslVerify',
+      // #endif
+      // #ifdef H5
+      'withCredentials',
+      // #endif
+      // #ifdef APP-PLUS
+      'firstIpv4',
+      // #endif
+    ]
+    config = {...config, ...mergeKeys(defaultsKeys, globalsConfig, config2)}
+  }
+
+  return config
+}
diff --git a/tuniao-ui/libs/luch-request/core/settle.js b/tuniao-ui/libs/luch-request/core/settle.js
new file mode 100644
index 0000000..b2f1659
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/core/settle.js
@@ -0,0 +1,16 @@
+/**
+ * Resolve or reject a Promise based on response status.
+ *
+ * @param {Function} resolve A function that resolves the promise.
+ * @param {Function} reject A function that rejects the promise.
+ * @param {object} response The response.
+ */
+export default function settle(resolve, reject, response) {
+  const validateStatus = response.config.validateStatus
+  const status = response.statusCode
+  if (status && (!validateStatus || validateStatus(status))) {
+    resolve(response)
+  } else {
+    reject(response)
+  }
+}
diff --git a/tuniao-ui/libs/luch-request/helpers/buildURL.js b/tuniao-ui/libs/luch-request/helpers/buildURL.js
new file mode 100644
index 0000000..d26dc30
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/helpers/buildURL.js
@@ -0,0 +1,69 @@
+'use strict'
+
+import * as utils from './../utils'
+
+function encode(val) {
+  return encodeURIComponent(val).
+    replace(/%40/gi, '@').
+    replace(/%3A/gi, ':').
+    replace(/%24/g, '$').
+    replace(/%2C/gi, ',').
+    replace(/%20/g, '+').
+    replace(/%5B/gi, '[').
+    replace(/%5D/gi, ']')
+}
+
+/**
+ * Build a URL by appending params to the end
+ *
+ * @param {string} url The base of the url (e.g., http://www.google.com)
+ * @param {object} [params] The params to be appended
+ * @returns {string} The formatted url
+ */
+export default function buildURL(url, params) {
+  /*eslint no-param-reassign:0*/
+  if (!params) {
+    return url
+  }
+
+  var serializedParams
+  if (utils.isURLSearchParams(params)) {
+    serializedParams = params.toString()
+  } else {
+    var parts = []
+
+    utils.forEach(params, function serialize(val, key) {
+      if (val === null || typeof val === 'undefined') {
+        return
+      }
+
+      if (utils.isArray(val)) {
+        key = key + '[]'
+      } else {
+        val = [val]
+      }
+
+      utils.forEach(val, function parseValue(v) {
+        if (utils.isDate(v)) {
+          v = v.toISOString()
+        } else if (utils.isObject(v)) {
+          v = JSON.stringify(v)
+        }
+        parts.push(encode(key) + '=' + encode(v))
+      })
+    })
+
+    serializedParams = parts.join('&')
+  }
+
+  if (serializedParams) {
+    var hashmarkIndex = url.indexOf('#')
+    if (hashmarkIndex !== -1) {
+      url = url.slice(0, hashmarkIndex)
+    }
+
+    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
+  }
+
+  return url
+}
diff --git a/tuniao-ui/libs/luch-request/helpers/combineURLs.js b/tuniao-ui/libs/luch-request/helpers/combineURLs.js
new file mode 100644
index 0000000..7b9d1ef
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/helpers/combineURLs.js
@@ -0,0 +1,14 @@
+'use strict'
+
+/**
+ * Creates a new URL by combining the specified URLs
+ *
+ * @param {string} baseURL The base URL
+ * @param {string} relativeURL The relative URL
+ * @returns {string} The combined URL
+ */
+export default function combineURLs(baseURL, relativeURL) {
+  return relativeURL
+    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
+    : baseURL
+}
diff --git a/tuniao-ui/libs/luch-request/helpers/isAbsoluteURL.js b/tuniao-ui/libs/luch-request/helpers/isAbsoluteURL.js
new file mode 100644
index 0000000..2a82517
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/helpers/isAbsoluteURL.js
@@ -0,0 +1,14 @@
+'use strict'
+
+/**
+ * Determines whether the specified URL is absolute
+ *
+ * @param {string} url The URL to test
+ * @returns {boolean} True if the specified URL is absolute, otherwise false
+ */
+export default function isAbsoluteURL(url) {
+  // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
+  // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
+  // by any combination of letters, digits, plus, period, or hyphen.
+  return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)
+}
diff --git a/tuniao-ui/libs/luch-request/index.d.ts b/tuniao-ui/libs/luch-request/index.d.ts
new file mode 100644
index 0000000..e939ce1
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/index.d.ts
@@ -0,0 +1,116 @@
+type AnyObject = Record<string | number | symbol, any>
+type HttpPromise<T> = Promise<HttpResponse<T>>;
+type Tasks = UniApp.RequestTask | UniApp.UploadTask | UniApp.DownloadTask
+export interface RequestTask {
+  abort: () => void;
+  offHeadersReceived: () => void;
+  onHeadersReceived: () => void;
+}
+export interface HttpRequestConfig<T = Tasks> {
+  /** 请求基地址 */
+  baseURL?: string;
+  /** 请求服务器接口地址 */
+  url?: string;
+
+  /** 请求查询参数，自动拼接为查询字符串 */
+  params?: AnyObject;
+  /** 请求体参数 */
+  data?: AnyObject;
+
+  /** 文件对应的 key */
+  name?: string;
+  /** HTTP 请求中其他额外的 form data */
+  formData?: AnyObject;
+  /** 要上传文件资源的路径。 */
+  filePath?: string;
+  /** 需要上传的文件列表。使用 files 时，filePath 和 name 不生效，App、H5（ 2.6.15+） */
+  files?: Array<{
+    name?: string;
+    file?: File;
+    uri: string;
+  }>;
+  /** 要上传的文件对象，仅H5（2.6.15+）支持 */
+  file?: File;
+
+  /** 请求头信息 */
+  header?: AnyObject;
+  /** 请求方式 */
+  method?: "GET" | "POST" | "PUT" | "DELETE" | "CONNECT" | "HEAD" | "OPTIONS" | "TRACE" | "UPLOAD" | "DOWNLOAD";
+  /** 如果设为 json，会尝试对返回的数据做一次 JSON.parse */
+  dataType?: string;
+  /** 设置响应的数据类型，支付宝小程序不支持 */
+  responseType?: "text" | "arraybuffer";
+  /** 自定义参数 */
+  custom?: AnyObject;
+  /** 超时时间，仅微信小程序（2.10.0）、支付宝小程序支持 */
+  timeout?: number;
+  /** DNS解析时优先使用ipv4，仅 App-Android 支持 (HBuilderX 2.8.0+) */
+  firstIpv4?: boolean;
+  /** 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+） */
+  sslVerify?: boolean;
+  /** 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+） */
+  withCredentials?: boolean;
+
+  /** 返回当前请求的task, options。请勿在此处修改options。 */
+  getTask?: (task: T, options: HttpRequestConfig<T>) => void;
+  /**  全局自定义验证器 */
+  validateStatus?: (statusCode: number) => boolean | void;
+}
+export interface HttpResponse<T = any> {
+  config: HttpRequestConfig;
+  statusCode: number;
+  cookies: Array<string>;
+  data: T;
+  errMsg: string;
+  header: AnyObject;
+}
+export interface HttpUploadResponse<T = any> {
+  config: HttpRequestConfig;
+  statusCode: number;
+  data: T;
+  errMsg: string;
+}
+export interface HttpDownloadResponse extends HttpResponse {
+  tempFilePath: string;
+}
+export interface HttpError {
+  config: HttpRequestConfig;
+  statusCode?: number;
+  cookies?: Array<string>;
+  data?: any;
+  errMsg: string;
+  header?: AnyObject;
+}
+export interface HttpInterceptorManager<V, E = V> {
+  use(
+    onFulfilled?: (config: V) => Promise<V> | V,
+    onRejected?: (config: E) => Promise<E> | E
+  ): void;
+  eject(id: number): void;
+}
+export abstract class HttpRequestAbstract {
+  constructor(config?: HttpRequestConfig);
+  config: HttpRequestConfig;
+  interceptors: {
+    request: HttpInterceptorManager<HttpRequestConfig, HttpRequestConfig>;
+    response: HttpInterceptorManager<HttpResponse, HttpError>;
+  }
+  middleware<T = any>(config: HttpRequestConfig): HttpPromise<T>;
+  request<T = any>(config: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  get<T = any>(url: string, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  upload<T = any>(url: string, config?: HttpRequestConfig<UniApp.UploadTask>): HttpPromise<T>;
+  delete<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  head<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  post<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  put<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  connect<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  options<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+  trace<T = any>(url: string, data?: AnyObject, config?: HttpRequestConfig<UniApp.RequestTask>): HttpPromise<T>;
+
+  download(url: string, config?: HttpRequestConfig<UniApp.DownloadTask>): Promise<HttpDownloadResponse>;
+
+  setConfig(onSend: (config: HttpRequestConfig) => HttpRequestConfig): void;
+}
+
+declare class HttpRequest extends HttpRequestAbstract { }
+export default HttpRequest;
diff --git a/tuniao-ui/libs/luch-request/index.js b/tuniao-ui/libs/luch-request/index.js
new file mode 100644
index 0000000..d8fe348
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/index.js
@@ -0,0 +1,2 @@
+import Request from './core/Request'
+export default Request
diff --git a/tuniao-ui/libs/luch-request/utils.js b/tuniao-ui/libs/luch-request/utils.js
new file mode 100644
index 0000000..0b5bf21
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/utils.js
@@ -0,0 +1,135 @@
+'use strict'
+
+// utils is a library of generic helper functions non-specific to axios
+
+var toString = Object.prototype.toString
+
+/**
+ * Determine if a value is an Array
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an Array, otherwise false
+ */
+export function isArray (val) {
+  return toString.call(val) === '[object Array]'
+}
+
+
+/**
+ * Determine if a value is an Object
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an Object, otherwise false
+ */
+export function isObject (val) {
+  return val !== null && typeof val === 'object'
+}
+
+/**
+ * Determine if a value is a Date
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Date, otherwise false
+ */
+export function isDate (val) {
+  return toString.call(val) === '[object Date]'
+}
+
+/**
+ * Determine if a value is a URLSearchParams object
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a URLSearchParams object, otherwise false
+ */
+export function isURLSearchParams (val) {
+  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams
+}
+
+
+/**
+ * Iterate over an Array or an Object invoking a function for each item.
+ *
+ * If `obj` is an Array callback will be called passing
+ * the value, index, and complete array for each item.
+ *
+ * If 'obj' is an Object callback will be called passing
+ * the value, key, and complete object for each property.
+ *
+ * @param {Object|Array} obj The object to iterate
+ * @param {Function} fn The callback to invoke for each item
+ */
+export function forEach (obj, fn) {
+  // Don't bother if no value provided
+  if (obj === null || typeof obj === 'undefined') {
+    return
+  }
+
+  // Force an array if not already something iterable
+  if (typeof obj !== 'object') {
+    /*eslint no-param-reassign:0*/
+    obj = [obj]
+  }
+
+  if (isArray(obj)) {
+    // Iterate over array values
+    for (var i = 0, l = obj.length; i < l; i++) {
+      fn.call(null, obj[i], i, obj)
+    }
+  } else {
+    // Iterate over object keys
+    for (var key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        fn.call(null, obj[key], key, obj)
+      }
+    }
+  }
+}
+
+/**
+ * 是否为boolean 值
+ * @param val
+ * @returns {boolean}
+ */
+export function isBoolean(val) {
+  return typeof val === 'boolean'
+}
+
+/**
+ * 是否为真正的对象{} new Object
+ * @param {any} obj - 检测的对象
+ * @returns {boolean}
+ */
+export function isPlainObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]'
+}
+
+
+
+/**
+ * Function equal to merge with the difference being that no reference
+ * to original objects is kept.
+ *
+ * @see merge
+ * @param {Object} obj1 Object to merge
+ * @returns {Object} Result of all merge properties
+ */
+export function deepMerge(/* obj1, obj2, obj3, ... */) {
+  let result = {}
+  function assignValue(val, key) {
+    if (typeof result[key] === 'object' && typeof val === 'object') {
+      result[key] = deepMerge(result[key], val)
+    } else if (typeof val === 'object') {
+      result[key] = deepMerge({}, val)
+    } else {
+      result[key] = val
+    }
+  }
+  for (let i = 0, l = arguments.length; i < l; i++) {
+    forEach(arguments[i], assignValue)
+  }
+  return result
+}
+
+export function isUndefined (val) {
+  return typeof val === 'undefined'
+}
diff --git a/tuniao-ui/libs/luch-request/utils/clone.js b/tuniao-ui/libs/luch-request/utils/clone.js
new file mode 100644
index 0000000..2fee704
--- /dev/null
+++ b/tuniao-ui/libs/luch-request/utils/clone.js
@@ -0,0 +1,264 @@
+/* eslint-disable */
+var clone = (function() {
+  'use strict';
+
+  function _instanceof(obj, type) {
+    return type != null && obj instanceof type;
+  }
+
+  var nativeMap;
+  try {
+    nativeMap = Map;
+  } catch(_) {
+    // maybe a reference error because no `Map`. Give it a dummy value that no
+    // value will ever be an instanceof.
+    nativeMap = function() {};
+  }
+
+  var nativeSet;
+  try {
+    nativeSet = Set;
+  } catch(_) {
+    nativeSet = function() {};
+  }
+
+  var nativePromise;
+  try {
+    nativePromise = Promise;
+  } catch(_) {
+    nativePromise = function() {};
+  }
+
+  /**
+   * Clones (copies) an Object using deep copying.
+   *
+   * This function supports circular references by default, but if you are certain
+   * there are no circular references in your object, you can save some CPU time
+   * by calling clone(obj, false).
+   *
+   * Caution: if `circular` is false and `parent` contains circular references,
+   * your program may enter an infinite loop and crash.
+   *
+   * @param `parent` - the object to be cloned
+   * @param `circular` - set to true if the object to be cloned may contain
+   *    circular references. (optional - true by default)
+   * @param `depth` - set to a number if the object is only to be cloned to
+   *    a particular depth. (optional - defaults to Infinity)
+   * @param `prototype` - sets the prototype to be used when cloning an object.
+   *    (optional - defaults to parent prototype).
+   * @param `includeNonEnumerable` - set to true if the non-enumerable properties
+   *    should be cloned as well. Non-enumerable properties on the prototype
+   *    chain will be ignored. (optional - false by default)
+   */
+  function clone(parent, circular, depth, prototype, includeNonEnumerable) {
+    if (typeof circular === 'object') {
+      depth = circular.depth;
+      prototype = circular.prototype;
+      includeNonEnumerable = circular.includeNonEnumerable;
+      circular = circular.circular;
+    }
+    // maintain two arrays for circular references, where corresponding parents
+    // and children have the same index
+    var allParents = [];
+    var allChildren = [];
+
+    var useBuffer = typeof Buffer != 'undefined';
+
+    if (typeof circular == 'undefined')
+      circular = true;
+
+    if (typeof depth == 'undefined')
+      depth = Infinity;
+
+    // recurse this function so we don't reset allParents and allChildren
+    function _clone(parent, depth) {
+      // cloning null always returns null
+      if (parent === null)
+        return null;
+
+      if (depth === 0)
+        return parent;
+
+      var child;
+      var proto;
+      if (typeof parent != 'object') {
+        return parent;
+      }
+
+      if (_instanceof(parent, nativeMap)) {
+        child = new nativeMap();
+      } else if (_instanceof(parent, nativeSet)) {
+        child = new nativeSet();
+      } else if (_instanceof(parent, nativePromise)) {
+        child = new nativePromise(function (resolve, reject) {
+          parent.then(function(value) {
+            resolve(_clone(value, depth - 1));
+          }, function(err) {
+            reject(_clone(err, depth - 1));
+          });
+        });
+      } else if (clone.__isArray(parent)) {
+        child = [];
+      } else if (clone.__isRegExp(parent)) {
+        child = new RegExp(parent.source, __getRegExpFlags(parent));
+        if (parent.lastIndex) child.lastIndex = parent.lastIndex;
+      } else if (clone.__isDate(parent)) {
+        child = new Date(parent.getTime());
+      } else if (useBuffer && Buffer.isBuffer(parent)) {
+        if (Buffer.from) {
+          // Node.js >= 5.10.0
+          child = Buffer.from(parent);
+        } else {
+          // Older Node.js versions
+          child = new Buffer(parent.length);
+          parent.copy(child);
+        }
+        return child;
+      } else if (_instanceof(parent, Error)) {
+        child = Object.create(parent);
+      } else {
+        if (typeof prototype == 'undefined') {
+          proto = Object.getPrototypeOf(parent);
+          child = Object.create(proto);
+        }
+        else {
+          child = Object.create(prototype);
+          proto = prototype;
+        }
+      }
+
+      if (circular) {
+        var index = allParents.indexOf(parent);
+
+        if (index != -1) {
+          return allChildren[index];
+        }
+        allParents.push(parent);
+        allChildren.push(child);
+      }
+
+      if (_instanceof(parent, nativeMap)) {
+        parent.forEach(function(value, key) {
+          var keyChild = _clone(key, depth - 1);
+          var valueChild = _clone(value, depth - 1);
+          child.set(keyChild, valueChild);
+        });
+      }
+      if (_instanceof(parent, nativeSet)) {
+        parent.forEach(function(value) {
+          var entryChild = _clone(value, depth - 1);
+          child.add(entryChild);
+        });
+      }
+
+      for (var i in parent) {
+        var attrs = Object.getOwnPropertyDescriptor(parent, i);
+        if (attrs) {
+          child[i] = _clone(parent[i], depth - 1);
+        }
+
+        try {
+          var objProperty = Object.getOwnPropertyDescriptor(parent, i);
+          if (objProperty.set === 'undefined') {
+            // no setter defined. Skip cloning this property
+            continue;
+          }
+          child[i] = _clone(parent[i], depth - 1);
+        } catch(e){
+          if (e instanceof TypeError) {
+            // when in strict mode, TypeError will be thrown if child[i] property only has a getter
+            // we can't do anything about this, other than inform the user that this property cannot be set.
+            continue
+          } else if (e instanceof ReferenceError) {
+            //this may happen in non strict mode
+            continue
+          }
+        }
+
+      }
+
+      if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(parent);
+        for (var i = 0; i < symbols.length; i++) {
+          // Don't need to worry about cloning a symbol because it is a primitive,
+          // like a number or string.
+          var symbol = symbols[i];
+          var descriptor = Object.getOwnPropertyDescriptor(parent, symbol);
+          if (descriptor && !descriptor.enumerable && !includeNonEnumerable) {
+            continue;
+          }
+          child[symbol] = _clone(parent[symbol], depth - 1);
+          Object.defineProperty(child, symbol, descriptor);
+        }
+      }
+
+      if (includeNonEnumerable) {
+        var allPropertyNames = Object.getOwnPropertyNames(parent);
+        for (var i = 0; i < allPropertyNames.length; i++) {
+          var propertyName = allPropertyNames[i];
+          var descriptor = Object.getOwnPropertyDescriptor(parent, propertyName);
+          if (descriptor && descriptor.enumerable) {
+            continue;
+          }
+          child[propertyName] = _clone(parent[propertyName], depth - 1);
+          Object.defineProperty(child, propertyName, descriptor);
+        }
+      }
+
+      return child;
+    }
+
+    return _clone(parent, depth);
+  }
+
+  /**
+   * Simple flat clone using prototype, accepts only objects, usefull for property
+   * override on FLAT configuration object (no nested props).
+   *
+   * USE WITH CAUTION! This may not behave as you wish if you do not know how this
+   * works.
+   */
+  clone.clonePrototype = function clonePrototype(parent) {
+    if (parent === null)
+      return null;
+
+    var c = function () {};
+    c.prototype = parent;
+    return new c();
+  };
+
+// private utility functions
+
+  function __objToStr(o) {
+    return Object.prototype.toString.call(o);
+  }
+  clone.__objToStr = __objToStr;
+
+  function __isDate(o) {
+    return typeof o === 'object' && __objToStr(o) === '[object Date]';
+  }
+  clone.__isDate = __isDate;
+
+  function __isArray(o) {
+    return typeof o === 'object' && __objToStr(o) === '[object Array]';
+  }
+  clone.__isArray = __isArray;
+
+  function __isRegExp(o) {
+    return typeof o === 'object' && __objToStr(o) === '[object RegExp]';
+  }
+  clone.__isRegExp = __isRegExp;
+
+  function __getRegExpFlags(re) {
+    var flags = '';
+    if (re.global) flags += 'g';
+    if (re.ignoreCase) flags += 'i';
+    if (re.multiline) flags += 'm';
+    return flags;
+  }
+  clone.__getRegExpFlags = __getRegExpFlags;
+
+  return clone;
+})();
+
+export default clone
diff --git a/tuniao-ui/libs/mixin/components_color.js b/tuniao-ui/libs/mixin/components_color.js
new file mode 100644
index 0000000..3e6fb6b
--- /dev/null
+++ b/tuniao-ui/libs/mixin/components_color.js
@@ -0,0 +1,47 @@
+module.exports = {
+  data() {
+    
+  },
+  props: {
+    // 背景颜色
+    backgroundColor: {
+      type: String,
+      default: ''
+    },
+    // 字体颜色
+    fontColor: {
+      type: String,
+      default: ''
+    },
+    // 字体大小
+    fontSize: {
+      type: Number,
+      default: 0
+    },
+    // 字体大小单位
+    fontUnit: {
+      type: String,
+      default: 'rpx'
+    }
+  },
+  computed: {
+    backgroundColorStyle() {
+      return this.$t.color.getBackgroundColorStyle(this.backgroundColor)
+    },
+    backgroundColorClass() {
+      return this.$t.color.getBackgroundColorInternalClass(this.backgroundColor)
+    },
+    fontColorStyle() {
+      return this.$t.color.getFontColorStyle(this.fontColor)
+    },
+    fontColorClass() {
+      return this.$t.color.getFontColorInternalClass(this.fontColor)
+    },
+    fontSizeStyle() {
+      return this.$t.string.getLengthUnitValue(this.fontSize, this.fontUnit)
+    }
+  },
+  methods: {
+    
+  }
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/mixin/mixin.js b/tuniao-ui/libs/mixin/mixin.js
new file mode 100644
index 0000000..171a784
--- /dev/null
+++ b/tuniao-ui/libs/mixin/mixin.js
@@ -0,0 +1,68 @@
+module.exports = {
+  data() {
+    return {}
+  },
+  onLoad() {
+    // getRect挂载再$t上，用为这个方法需要使用in（this），所以无法把它独立层一个单独的文件导出
+    this.$t.getRect = this._tGetRect
+  },
+  beforeDestory() {
+    // 判断当前页面是否存在parent和children
+    // 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
+    if (this.parent && uni.$t.test.array(this.parent.children)) {
+      // 组件销毁时，移除子组件在父组件children数组中的实例
+      const childrenList = this.parent.children
+      childrenList.map((child, index) => {
+        // 如果相对，则移除
+        if (child === this) {
+          childrenList.splice(index, 1)
+        }
+      })
+    }
+  },
+  methods: {
+    /**
+     * 查询节点信息
+     * 当前方法在支付宝小程序中无法获取组件跟接点的尺寸
+     * 解决办法：为组件根部再套一个没有任何作用的view元素
+     */
+    _tGetRect(selector, all) {
+      return new Promise((resolve) => {
+        uni.createSelectorQuery()
+          .in(this)[all ? 'selectAll' : 'select'](selector)
+          .boundingClientRect(rect => {
+            if (all && Array.isArray(rect) && rect.length) {
+              resolve(rect)
+            }
+            if (!all && rect) {
+              resolve(rect)
+            }
+          })
+          .exec()
+      })
+    },
+    /**
+     * 获取父组件的数据
+     */
+    getParentData(parentName = '') {
+      // 避免再created中定义parent变量
+      if (!this.parent) this.parent = false
+      // 通过获取父组件实例
+      // 将父组件this中对应的参数，赋值给本组件的parentData对象中对应的属性
+      // 头条小程序不支持通过this.parent.xxx去监听父组件参数的变化，所以需要本方法进行实现
+      this.parent = this.$t.$parent.call(this, parentName)
+      if (this.parent) {
+        // 遍历parentData中的属性，将parent中同名的属性赋值给parentData
+        Object.keys(this.parentData).map(key => {
+          this.parentData[key] = this.parent[key]
+        })
+      }
+    },
+    /**
+     * 阻止事件冒泡
+     */
+    preventEvent(e) {
+      e && e.stopPropagation && e.stopPropagation()
+    }
+  }
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/mixin/mpShare.js b/tuniao-ui/libs/mixin/mpShare.js
new file mode 100644
index 0000000..4782c92
--- /dev/null
+++ b/tuniao-ui/libs/mixin/mpShare.js
@@ -0,0 +1,30 @@
+module.exports = {
+  onLoad() {
+    // 设置默认的转发参数
+    this.$t.mpShare = {
+      // 分享的标题，默认为小程序名称
+      title: '',
+      // 分享的路径，默认为当前页面
+      path: '',
+      // 分享时显示的图片，默认为当前页面截图
+      imageUrl: '',
+      // 当前页面是否可以分享
+      share: true
+    }
+    if (!this.$t.mpShare.share) {
+      uni.hideShareMenu()
+    }
+  },
+  onShareAppMessage() {
+    return this.$t.mpShare
+  },
+  // #ifdef MP-WEIXIN
+  onShareTimeline() {
+    return {
+      title: this.$t.mpShare.title,
+      query: this.$t.mpShare.path.substring(this.$t.mpShare.path.indexOf('?') + 1, this.$t.mpShare.path.length),
+      imageUrl: this.$t.mpShare.imageUrl
+    }
+  }
+  // #endif
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/mixin/touch.js b/tuniao-ui/libs/mixin/touch.js
new file mode 100644
index 0000000..a77445f
--- /dev/null
+++ b/tuniao-ui/libs/mixin/touch.js
@@ -0,0 +1,61 @@
+const MIN_DISTANCE = 10
+
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal'
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical'
+  }
+  return ''
+}
+
+export default {
+  methods: {
+    touchStart(e) {
+      this.resetTouchStatus()
+      const touch = this.getTouchPoint(e)
+      this.startX = touch.x
+      this.startY = touch.y
+    },
+    touchMove(e) {
+      const touch = this.getTouchPoint(e)
+      this.deltaX = touch.x - this.startX
+      this.deltaY = touch.y - this.startY
+      this.offsetX = Math.abs(this.deltaX)
+      this.offsetY = Math.abs(this.deltaY)
+      this.direction = this.direction || getDirection(this.offsetX, this.offsetY)
+    },
+    getTouchPoint(e) {
+      if (!e) {
+        return {
+          x: 0,
+          y: 0
+        }
+      }
+      if (e.touches && e.touches[0]) {
+        return {
+          x: e.touches[0].pageX,
+          y: e.touches[0].pageY
+        }
+      }
+      if (e.changedTouches && e.changedTouches[0]) {
+        return {
+          x: e.changedTouches[0].pageX,
+          y: e.changedTouches[0].pageY
+        }
+      }
+      return {
+        x: e.clientX || 0,
+        y: e.clientY || 0
+      }
+    },
+    resetTouchStatus() {
+      this.direction = ''
+      this.deltaX = 0
+      this.deltaY = 0
+      this.offsetX = 0
+      this.offsetY = 0
+    }
+  }
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/area.js b/tuniao-ui/libs/utils/area.js
new file mode 100644
index 0000000..0d602e9
--- /dev/null
+++ b/tuniao-ui/libs/utils/area.js
@@ -0,0 +1 @@
+var areaData=[[[{"label":"东城区","value":"110101"},{"label":"西城区","value":"110102"},{"label":"朝阳区","value":"110105"},{"label":"丰台区","value":"110106"},{"label":"石景山区","value":"110107"},{"label":"海淀区","value":"110108"},{"label":"门头沟区","value":"110109"},{"label":"房山区","value":"110111"},{"label":"通州区","value":"110112"},{"label":"顺义区","value":"110113"},{"label":"昌平区","value":"110114"},{"label":"大兴区","value":"110115"},{"label":"怀柔区","value":"110116"},{"label":"平谷区","value":"110117"},{"label":"密云区","value":"110118"},{"label":"延庆区","value":"110119"}]],[[{"label":"和平区","value":"120101"},{"label":"河东区","value":"120102"},{"label":"河西区","value":"120103"},{"label":"南开区","value":"120104"},{"label":"河北区","value":"120105"},{"label":"红桥区","value":"120106"},{"label":"东丽区","value":"120110"},{"label":"西青区","value":"120111"},{"label":"津南区","value":"120112"},{"label":"北辰区","value":"120113"},{"label":"武清区","value":"120114"},{"label":"宝坻区","value":"120115"},{"label":"滨海新区","value":"120116"},{"label":"宁河区","value":"120117"},{"label":"静海区","value":"120118"},{"label":"蓟州区","value":"120119"}]],[[{"label":"长安区","value":"130102"},{"label":"桥西区","value":"130104"},{"label":"新华区","value":"130105"},{"label":"井陉矿区","value":"130107"},{"label":"裕华区","value":"130108"},{"label":"藁城区","value":"130109"},{"label":"鹿泉区","value":"130110"},{"label":"栾城区","value":"130111"},{"label":"井陉县","value":"130121"},{"label":"正定县","value":"130123"},{"label":"行唐县","value":"130125"},{"label":"灵寿县","value":"130126"},{"label":"高邑县","value":"130127"},{"label":"深泽县","value":"130128"},{"label":"赞皇县","value":"130129"},{"label":"无极县","value":"130130"},{"label":"平山县","value":"130131"},{"label":"元氏县","value":"130132"},{"label":"赵县","value":"130133"},{"label":"石家庄高新技术产业开发区","value":"130171"},{"label":"石家庄循环化工园区","value":"130172"},{"label":"辛集市","value":"130181"},{"label":"晋州市","value":"130183"},{"label":"新乐市","value":"130184"}],[{"label":"路南区","value":"130202"},{"label":"路北区","value":"130203"},{"label":"古冶区","value":"130204"},{"label":"开平区","value":"130205"},{"label":"丰南区","value":"130207"},{"label":"丰润区","value":"130208"},{"label":"曹妃甸区","value":"130209"},{"label":"滦县","value":"130223"},{"label":"滦南县","value":"130224"},{"label":"乐亭县","value":"130225"},{"label":"迁西县","value":"130227"},{"label":"玉田县","value":"130229"},{"label":"唐山市芦台经济技术开发区","value":"130271"},{"label":"唐山市汉沽管理区","value":"130272"},{"label":"唐山高新技术产业开发区","value":"130273"},{"label":"河北唐山海港经济开发区","value":"130274"},{"label":"遵化市","value":"130281"},{"label":"迁安市","value":"130283"}],[{"label":"海港区","value":"130302"},{"label":"山海关区","value":"130303"},{"label":"北戴河区","value":"130304"},{"label":"抚宁区","value":"130306"},{"label":"青龙满族自治县","value":"130321"},{"label":"昌黎县","value":"130322"},{"label":"卢龙县","value":"130324"},{"label":"秦皇岛市经济技术开发区","value":"130371"},{"label":"北戴河新区","value":"130372"}],[{"label":"邯山区","value":"130402"},{"label":"丛台区","value":"130403"},{"label":"复兴区","value":"130404"},{"label":"峰峰矿区","value":"130406"},{"label":"肥乡区","value":"130407"},{"label":"永年区","value":"130408"},{"label":"临漳县","value":"130423"},{"label":"成安县","value":"130424"},{"label":"大名县","value":"130425"},{"label":"涉县","value":"130426"},{"label":"磁县","value":"130427"},{"label":"邱县","value":"130430"},{"label":"鸡泽县","value":"130431"},{"label":"广平县","value":"130432"},{"label":"馆陶县","value":"130433"},{"label":"魏县","value":"130434"},{"label":"曲周县","value":"130435"},{"label":"邯郸经济技术开发区","value":"130471"},{"label":"邯郸冀南新区","value":"130473"},{"label":"武安市","value":"130481"}],[{"label":"桥东区","value":"130502"},{"label":"桥西区","value":"130503"},{"label":"邢台县","value":"130521"},{"label":"临城县","value":"130522"},{"label":"内丘县","value":"130523"},{"label":"柏乡县","value":"130524"},{"label":"隆尧县","value":"130525"},{"label":"任县","value":"130526"},{"label":"南和县","value":"130527"},{"label":"宁晋县","value":"130528"},{"label":"巨鹿县","value":"130529"},{"label":"新河县","value":"130530"},{"label":"广宗县","value":"130531"},{"label":"平乡县","value":"130532"},{"label":"威县","value":"130533"},{"label":"清河县","value":"130534"},{"label":"临西县","value":"130535"},{"label":"河北邢台经济开发区","value":"130571"},{"label":"南宫市","value":"130581"},{"label":"沙河市","value":"130582"}],[{"label":"竞秀区","value":"130602"},{"label":"莲池区","value":"130606"},{"label":"满城区","value":"130607"},{"label":"清苑区","value":"130608"},{"label":"徐水区","value":"130609"},{"label":"涞水县","value":"130623"},{"label":"阜平县","value":"130624"},{"label":"定兴县","value":"130626"},{"label":"唐县","value":"130627"},{"label":"高阳县","value":"130628"},{"label":"容城县","value":"130629"},{"label":"涞源县","value":"130630"},{"label":"望都县","value":"130631"},{"label":"安新县","value":"130632"},{"label":"易县","value":"130633"},{"label":"曲阳县","value":"130634"},{"label":"蠡县","value":"130635"},{"label":"顺平县","value":"130636"},{"label":"博野县","value":"130637"},{"label":"雄县","value":"130638"},{"label":"保定高新技术产业开发区","value":"130671"},{"label":"保定白沟新城","value":"130672"},{"label":"涿州市","value":"130681"},{"label":"定州市","value":"130682"},{"label":"安国市","value":"130683"},{"label":"高碑店市","value":"130684"}],[{"label":"桥东区","value":"130702"},{"label":"桥西区","value":"130703"},{"label":"宣化区","value":"130705"},{"label":"下花园区","value":"130706"},{"label":"万全区","value":"130708"},{"label":"崇礼区","value":"130709"},{"label":"张北县","value":"130722"},{"label":"康保县","value":"130723"},{"label":"沽源县","value":"130724"},{"label":"尚义县","value":"130725"},{"label":"蔚县","value":"130726"},{"label":"阳原县","value":"130727"},{"label":"怀安县","value":"130728"},{"label":"怀来县","value":"130730"},{"label":"涿鹿县","value":"130731"},{"label":"赤城县","value":"130732"},{"label":"张家口市高新技术产业开发区","value":"130771"},{"label":"张家口市察北管理区","value":"130772"},{"label":"张家口市塞北管理区","value":"130773"}],[{"label":"双桥区","value":"130802"},{"label":"双滦区","value":"130803"},{"label":"鹰手营子矿区","value":"130804"},{"label":"承德县","value":"130821"},{"label":"兴隆县","value":"130822"},{"label":"滦平县","value":"130824"},{"label":"隆化县","value":"130825"},{"label":"丰宁满族自治县","value":"130826"},{"label":"宽城满族自治县","value":"130827"},{"label":"围场满族蒙古族自治县","value":"130828"},{"label":"承德高新技术产业开发区","value":"130871"},{"label":"平泉市","value":"130881"}],[{"label":"新华区","value":"130902"},{"label":"运河区","value":"130903"},{"label":"沧县","value":"130921"},{"label":"青县","value":"130922"},{"label":"东光县","value":"130923"},{"label":"海兴县","value":"130924"},{"label":"盐山县","value":"130925"},{"label":"肃宁县","value":"130926"},{"label":"南皮县","value":"130927"},{"label":"吴桥县","value":"130928"},{"label":"献县","value":"130929"},{"label":"孟村回族自治县","value":"130930"},{"label":"河北沧州经济开发区","value":"130971"},{"label":"沧州高新技术产业开发区","value":"130972"},{"label":"沧州渤海新区","value":"130973"},{"label":"泊头市","value":"130981"},{"label":"任丘市","value":"130982"},{"label":"黄骅市","value":"130983"},{"label":"河间市","value":"130984"}],[{"label":"安次区","value":"131002"},{"label":"广阳区","value":"131003"},{"label":"固安县","value":"131022"},{"label":"永清县","value":"131023"},{"label":"香河县","value":"131024"},{"label":"大城县","value":"131025"},{"label":"文安县","value":"131026"},{"label":"大厂回族自治县","value":"131028"},{"label":"廊坊经济技术开发区","value":"131071"},{"label":"霸州市","value":"131081"},{"label":"三河市","value":"131082"}],[{"label":"桃城区","value":"131102"},{"label":"冀州区","value":"131103"},{"label":"枣强县","value":"131121"},{"label":"武邑县","value":"131122"},{"label":"武强县","value":"131123"},{"label":"饶阳县","value":"131124"},{"label":"安平县","value":"131125"},{"label":"故城县","value":"131126"},{"label":"景县","value":"131127"},{"label":"阜城县","value":"131128"},{"label":"河北衡水经济开发区","value":"131171"},{"label":"衡水滨湖新区","value":"131172"},{"label":"深州市","value":"131182"}]],[[{"label":"小店区","value":"140105"},{"label":"迎泽区","value":"140106"},{"label":"杏花岭区","value":"140107"},{"label":"尖草坪区","value":"140108"},{"label":"万柏林区","value":"140109"},{"label":"晋源区","value":"140110"},{"label":"清徐县","value":"140121"},{"label":"阳曲县","value":"140122"},{"label":"娄烦县","value":"140123"},{"label":"山西转型综合改革示范区","value":"140171"},{"label":"古交市","value":"140181"}],[{"label":"城区","value":"140202"},{"label":"矿区","value":"140203"},{"label":"南郊区","value":"140211"},{"label":"新荣区","value":"140212"},{"label":"阳高县","value":"140221"},{"label":"天镇县","value":"140222"},{"label":"广灵县","value":"140223"},{"label":"灵丘县","value":"140224"},{"label":"浑源县","value":"140225"},{"label":"左云县","value":"140226"},{"label":"大同县","value":"140227"},{"label":"山西大同经济开发区","value":"140271"}],[{"label":"城区","value":"140302"},{"label":"矿区","value":"140303"},{"label":"郊区","value":"140311"},{"label":"平定县","value":"140321"},{"label":"盂县","value":"140322"},{"label":"山西阳泉经济开发区","value":"140371"}],[{"label":"城区","value":"140402"},{"label":"郊区","value":"140411"},{"label":"长治县","value":"140421"},{"label":"襄垣县","value":"140423"},{"label":"屯留县","value":"140424"},{"label":"平顺县","value":"140425"},{"label":"黎城县","value":"140426"},{"label":"壶关县","value":"140427"},{"label":"长子县","value":"140428"},{"label":"武乡县","value":"140429"},{"label":"沁县","value":"140430"},{"label":"沁源县","value":"140431"},{"label":"山西长治高新技术产业园区","value":"140471"},{"label":"潞城市","value":"140481"}],[{"label":"城区","value":"140502"},{"label":"沁水县","value":"140521"},{"label":"阳城县","value":"140522"},{"label":"陵川县","value":"140524"},{"label":"泽州县","value":"140525"},{"label":"高平市","value":"140581"}],[{"label":"朔城区","value":"140602"},{"label":"平鲁区","value":"140603"},{"label":"山阴县","value":"140621"},{"label":"应县","value":"140622"},{"label":"右玉县","value":"140623"},{"label":"怀仁县","value":"140624"},{"label":"山西朔州经济开发区","value":"140671"}],[{"label":"榆次区","value":"140702"},{"label":"榆社县","value":"140721"},{"label":"左权县","value":"140722"},{"label":"和顺县","value":"140723"},{"label":"昔阳县","value":"140724"},{"label":"寿阳县","value":"140725"},{"label":"太谷县","value":"140726"},{"label":"祁县","value":"140727"},{"label":"平遥县","value":"140728"},{"label":"灵石县","value":"140729"},{"label":"介休市","value":"140781"}],[{"label":"盐湖区","value":"140802"},{"label":"临猗县","value":"140821"},{"label":"万荣县","value":"140822"},{"label":"闻喜县","value":"140823"},{"label":"稷山县","value":"140824"},{"label":"新绛县","value":"140825"},{"label":"绛县","value":"140826"},{"label":"垣曲县","value":"140827"},{"label":"夏县","value":"140828"},{"label":"平陆县","value":"140829"},{"label":"芮城县","value":"140830"},{"label":"永济市","value":"140881"},{"label":"河津市","value":"140882"}],[{"label":"忻府区","value":"140902"},{"label":"定襄县","value":"140921"},{"label":"五台县","value":"140922"},{"label":"代县","value":"140923"},{"label":"繁峙县","value":"140924"},{"label":"宁武县","value":"140925"},{"label":"静乐县","value":"140926"},{"label":"神池县","value":"140927"},{"label":"五寨县","value":"140928"},{"label":"岢岚县","value":"140929"},{"label":"河曲县","value":"140930"},{"label":"保德县","value":"140931"},{"label":"偏关县","value":"140932"},{"label":"五台山风景名胜区","value":"140971"},{"label":"原平市","value":"140981"}],[{"label":"尧都区","value":"141002"},{"label":"曲沃县","value":"141021"},{"label":"翼城县","value":"141022"},{"label":"襄汾县","value":"141023"},{"label":"洪洞县","value":"141024"},{"label":"古县","value":"141025"},{"label":"安泽县","value":"141026"},{"label":"浮山县","value":"141027"},{"label":"吉县","value":"141028"},{"label":"乡宁县","value":"141029"},{"label":"大宁县","value":"141030"},{"label":"隰县","value":"141031"},{"label":"永和县","value":"141032"},{"label":"蒲县","value":"141033"},{"label":"汾西县","value":"141034"},{"label":"侯马市","value":"141081"},{"label":"霍州市","value":"141082"}],[{"label":"离石区","value":"141102"},{"label":"文水县","value":"141121"},{"label":"交城县","value":"141122"},{"label":"兴县","value":"141123"},{"label":"临县","value":"141124"},{"label":"柳林县","value":"141125"},{"label":"石楼县","value":"141126"},{"label":"岚县","value":"141127"},{"label":"方山县","value":"141128"},{"label":"中阳县","value":"141129"},{"label":"交口县","value":"141130"},{"label":"孝义市","value":"141181"},{"label":"汾阳市","value":"141182"}]],[[{"label":"新城区","value":"150102"},{"label":"回民区","value":"150103"},{"label":"玉泉区","value":"150104"},{"label":"赛罕区","value":"150105"},{"label":"土默特左旗","value":"150121"},{"label":"托克托县","value":"150122"},{"label":"和林格尔县","value":"150123"},{"label":"清水河县","value":"150124"},{"label":"武川县","value":"150125"},{"label":"呼和浩特金海工业园区","value":"150171"},{"label":"呼和浩特经济技术开发区","value":"150172"}],[{"label":"东河区","value":"150202"},{"label":"昆都仑区","value":"150203"},{"label":"青山区","value":"150204"},{"label":"石拐区","value":"150205"},{"label":"白云鄂博矿区","value":"150206"},{"label":"九原区","value":"150207"},{"label":"土默特右旗","value":"150221"},{"label":"固阳县","value":"150222"},{"label":"达尔罕茂明安联合旗","value":"150223"},{"label":"包头稀土高新技术产业开发区","value":"150271"}],[{"label":"海勃湾区","value":"150302"},{"label":"海南区","value":"150303"},{"label":"乌达区","value":"150304"}],[{"label":"红山区","value":"150402"},{"label":"元宝山区","value":"150403"},{"label":"松山区","value":"150404"},{"label":"阿鲁科尔沁旗","value":"150421"},{"label":"巴林左旗","value":"150422"},{"label":"巴林右旗","value":"150423"},{"label":"林西县","value":"150424"},{"label":"克什克腾旗","value":"150425"},{"label":"翁牛特旗","value":"150426"},{"label":"喀喇沁旗","value":"150428"},{"label":"宁城县","value":"150429"},{"label":"敖汉旗","value":"150430"}],[{"label":"科尔沁区","value":"150502"},{"label":"科尔沁左翼中旗","value":"150521"},{"label":"科尔沁左翼后旗","value":"150522"},{"label":"开鲁县","value":"150523"},{"label":"库伦旗","value":"150524"},{"label":"奈曼旗","value":"150525"},{"label":"扎鲁特旗","value":"150526"},{"label":"通辽经济技术开发区","value":"150571"},{"label":"霍林郭勒市","value":"150581"}],[{"label":"东胜区","value":"150602"},{"label":"康巴什区","value":"150603"},{"label":"达拉特旗","value":"150621"},{"label":"准格尔旗","value":"150622"},{"label":"鄂托克前旗","value":"150623"},{"label":"鄂托克旗","value":"150624"},{"label":"杭锦旗","value":"150625"},{"label":"乌审旗","value":"150626"},{"label":"伊金霍洛旗","value":"150627"}],[{"label":"海拉尔区","value":"150702"},{"label":"扎赉诺尔区","value":"150703"},{"label":"阿荣旗","value":"150721"},{"label":"莫力达瓦达斡尔族自治旗","value":"150722"},{"label":"鄂伦春自治旗","value":"150723"},{"label":"鄂温克族自治旗","value":"150724"},{"label":"陈巴尔虎旗","value":"150725"},{"label":"新巴尔虎左旗","value":"150726"},{"label":"新巴尔虎右旗","value":"150727"},{"label":"满洲里市","value":"150781"},{"label":"牙克石市","value":"150782"},{"label":"扎兰屯市","value":"150783"},{"label":"额尔古纳市","value":"150784"},{"label":"根河市","value":"150785"}],[{"label":"临河区","value":"150802"},{"label":"五原县","value":"150821"},{"label":"磴口县","value":"150822"},{"label":"乌拉特前旗","value":"150823"},{"label":"乌拉特中旗","value":"150824"},{"label":"乌拉特后旗","value":"150825"},{"label":"杭锦后旗","value":"150826"}],[{"label":"集宁区","value":"150902"},{"label":"卓资县","value":"150921"},{"label":"化德县","value":"150922"},{"label":"商都县","value":"150923"},{"label":"兴和县","value":"150924"},{"label":"凉城县","value":"150925"},{"label":"察哈尔右翼前旗","value":"150926"},{"label":"察哈尔右翼中旗","value":"150927"},{"label":"察哈尔右翼后旗","value":"150928"},{"label":"四子王旗","value":"150929"},{"label":"丰镇市","value":"150981"}],[{"label":"乌兰浩特市","value":"152201"},{"label":"阿尔山市","value":"152202"},{"label":"科尔沁右翼前旗","value":"152221"},{"label":"科尔沁右翼中旗","value":"152222"},{"label":"扎赉特旗","value":"152223"},{"label":"突泉县","value":"152224"}],[{"label":"二连浩特市","value":"152501"},{"label":"锡林浩特市","value":"152502"},{"label":"阿巴嘎旗","value":"152522"},{"label":"苏尼特左旗","value":"152523"},{"label":"苏尼特右旗","value":"152524"},{"label":"东乌珠穆沁旗","value":"152525"},{"label":"西乌珠穆沁旗","value":"152526"},{"label":"太仆寺旗","value":"152527"},{"label":"镶黄旗","value":"152528"},{"label":"正镶白旗","value":"152529"},{"label":"正蓝旗","value":"152530"},{"label":"多伦县","value":"152531"},{"label":"乌拉盖管委会","value":"152571"}],[{"label":"阿拉善左旗","value":"152921"},{"label":"阿拉善右旗","value":"152922"},{"label":"额济纳旗","value":"152923"},{"label":"内蒙古阿拉善经济开发区","value":"152971"}]],[[{"label":"和平区","value":"210102"},{"label":"沈河区","value":"210103"},{"label":"大东区","value":"210104"},{"label":"皇姑区","value":"210105"},{"label":"铁西区","value":"210106"},{"label":"苏家屯区","value":"210111"},{"label":"浑南区","value":"210112"},{"label":"沈北新区","value":"210113"},{"label":"于洪区","value":"210114"},{"label":"辽中区","value":"210115"},{"label":"康平县","value":"210123"},{"label":"法库县","value":"210124"},{"label":"新民市","value":"210181"}],[{"label":"中山区","value":"210202"},{"label":"西岗区","value":"210203"},{"label":"沙河口区","value":"210204"},{"label":"甘井子区","value":"210211"},{"label":"旅顺口区","value":"210212"},{"label":"金州区","value":"210213"},{"label":"普兰店区","value":"210214"},{"label":"长海县","value":"210224"},{"label":"瓦房店市","value":"210281"},{"label":"庄河市","value":"210283"}],[{"label":"铁东区","value":"210302"},{"label":"铁西区","value":"210303"},{"label":"立山区","value":"210304"},{"label":"千山区","value":"210311"},{"label":"台安县","value":"210321"},{"label":"岫岩满族自治县","value":"210323"},{"label":"海城市","value":"210381"}],[{"label":"新抚区","value":"210402"},{"label":"东洲区","value":"210403"},{"label":"望花区","value":"210404"},{"label":"顺城区","value":"210411"},{"label":"抚顺县","value":"210421"},{"label":"新宾满族自治县","value":"210422"},{"label":"清原满族自治县","value":"210423"}],[{"label":"平山区","value":"210502"},{"label":"溪湖区","value":"210503"},{"label":"明山区","value":"210504"},{"label":"南芬区","value":"210505"},{"label":"本溪满族自治县","value":"210521"},{"label":"桓仁满族自治县","value":"210522"}],[{"label":"元宝区","value":"210602"},{"label":"振兴区","value":"210603"},{"label":"振安区","value":"210604"},{"label":"宽甸满族自治县","value":"210624"},{"label":"东港市","value":"210681"},{"label":"凤城市","value":"210682"}],[{"label":"古塔区","value":"210702"},{"label":"凌河区","value":"210703"},{"label":"太和区","value":"210711"},{"label":"黑山县","value":"210726"},{"label":"义县","value":"210727"},{"label":"凌海市","value":"210781"},{"label":"北镇市","value":"210782"}],[{"label":"站前区","value":"210802"},{"label":"西市区","value":"210803"},{"label":"鲅鱼圈区","value":"210804"},{"label":"老边区","value":"210811"},{"label":"盖州市","value":"210881"},{"label":"大石桥市","value":"210882"}],[{"label":"海州区","value":"210902"},{"label":"新邱区","value":"210903"},{"label":"太平区","value":"210904"},{"label":"清河门区","value":"210905"},{"label":"细河区","value":"210911"},{"label":"阜新蒙古族自治县","value":"210921"},{"label":"彰武县","value":"210922"}],[{"label":"白塔区","value":"211002"},{"label":"文圣区","value":"211003"},{"label":"宏伟区","value":"211004"},{"label":"弓长岭区","value":"211005"},{"label":"太子河区","value":"211011"},{"label":"辽阳县","value":"211021"},{"label":"灯塔市","value":"211081"}],[{"label":"双台子区","value":"211102"},{"label":"兴隆台区","value":"211103"},{"label":"大洼区","value":"211104"},{"label":"盘山县","value":"211122"}],[{"label":"银州区","value":"211202"},{"label":"清河区","value":"211204"},{"label":"铁岭县","value":"211221"},{"label":"西丰县","value":"211223"},{"label":"昌图县","value":"211224"},{"label":"调兵山市","value":"211281"},{"label":"开原市","value":"211282"}],[{"label":"双塔区","value":"211302"},{"label":"龙城区","value":"211303"},{"label":"朝阳县","value":"211321"},{"label":"建平县","value":"211322"},{"label":"喀喇沁左翼蒙古族自治县","value":"211324"},{"label":"北票市","value":"211381"},{"label":"凌源市","value":"211382"}],[{"label":"连山区","value":"211402"},{"label":"龙港区","value":"211403"},{"label":"南票区","value":"211404"},{"label":"绥中县","value":"211421"},{"label":"建昌县","value":"211422"},{"label":"兴城市","value":"211481"}]],[[{"label":"南关区","value":"220102"},{"label":"宽城区","value":"220103"},{"label":"朝阳区","value":"220104"},{"label":"二道区","value":"220105"},{"label":"绿园区","value":"220106"},{"label":"双阳区","value":"220112"},{"label":"九台区","value":"220113"},{"label":"农安县","value":"220122"},{"label":"长春经济技术开发区","value":"220171"},{"label":"长春净月高新技术产业开发区","value":"220172"},{"label":"长春高新技术产业开发区","value":"220173"},{"label":"长春汽车经济技术开发区","value":"220174"},{"label":"榆树市","value":"220182"},{"label":"德惠市","value":"220183"}],[{"label":"昌邑区","value":"220202"},{"label":"龙潭区","value":"220203"},{"label":"船营区","value":"220204"},{"label":"丰满区","value":"220211"},{"label":"永吉县","value":"220221"},{"label":"吉林经济开发区","value":"220271"},{"label":"吉林高新技术产业开发区","value":"220272"},{"label":"吉林中国新加坡食品区","value":"220273"},{"label":"蛟河市","value":"220281"},{"label":"桦甸市","value":"220282"},{"label":"舒兰市","value":"220283"},{"label":"磐石市","value":"220284"}],[{"label":"铁西区","value":"220302"},{"label":"铁东区","value":"220303"},{"label":"梨树县","value":"220322"},{"label":"伊通满族自治县","value":"220323"},{"label":"公主岭市","value":"220381"},{"label":"双辽市","value":"220382"}],[{"label":"龙山区","value":"220402"},{"label":"西安区","value":"220403"},{"label":"东丰县","value":"220421"},{"label":"东辽县","value":"220422"}],[{"label":"东昌区","value":"220502"},{"label":"二道江区","value":"220503"},{"label":"通化县","value":"220521"},{"label":"辉南县","value":"220523"},{"label":"柳河县","value":"220524"},{"label":"梅河口市","value":"220581"},{"label":"集安市","value":"220582"}],[{"label":"浑江区","value":"220602"},{"label":"江源区","value":"220605"},{"label":"抚松县","value":"220621"},{"label":"靖宇县","value":"220622"},{"label":"长白朝鲜族自治县","value":"220623"},{"label":"临江市","value":"220681"}],[{"label":"宁江区","value":"220702"},{"label":"前郭尔罗斯蒙古族自治县","value":"220721"},{"label":"长岭县","value":"220722"},{"label":"乾安县","value":"220723"},{"label":"吉林松原经济开发区","value":"220771"},{"label":"扶余市","value":"220781"}],[{"label":"洮北区","value":"220802"},{"label":"镇赉县","value":"220821"},{"label":"通榆县","value":"220822"},{"label":"吉林白城经济开发区","value":"220871"},{"label":"洮南市","value":"220881"},{"label":"大安市","value":"220882"}],[{"label":"延吉市","value":"222401"},{"label":"图们市","value":"222402"},{"label":"敦化市","value":"222403"},{"label":"珲春市","value":"222404"},{"label":"龙井市","value":"222405"},{"label":"和龙市","value":"222406"},{"label":"汪清县","value":"222424"},{"label":"安图县","value":"222426"}]],[[{"label":"道里区","value":"230102"},{"label":"南岗区","value":"230103"},{"label":"道外区","value":"230104"},{"label":"平房区","value":"230108"},{"label":"松北区","value":"230109"},{"label":"香坊区","value":"230110"},{"label":"呼兰区","value":"230111"},{"label":"阿城区","value":"230112"},{"label":"双城区","value":"230113"},{"label":"依兰县","value":"230123"},{"label":"方正县","value":"230124"},{"label":"宾县","value":"230125"},{"label":"巴彦县","value":"230126"},{"label":"木兰县","value":"230127"},{"label":"通河县","value":"230128"},{"label":"延寿县","value":"230129"},{"label":"尚志市","value":"230183"},{"label":"五常市","value":"230184"}],[{"label":"龙沙区","value":"230202"},{"label":"建华区","value":"230203"},{"label":"铁锋区","value":"230204"},{"label":"昂昂溪区","value":"230205"},{"label":"富拉尔基区","value":"230206"},{"label":"碾子山区","value":"230207"},{"label":"梅里斯达斡尔族区","value":"230208"},{"label":"龙江县","value":"230221"},{"label":"依安县","value":"230223"},{"label":"泰来县","value":"230224"},{"label":"甘南县","value":"230225"},{"label":"富裕县","value":"230227"},{"label":"克山县","value":"230229"},{"label":"克东县","value":"230230"},{"label":"拜泉县","value":"230231"},{"label":"讷河市","value":"230281"}],[{"label":"鸡冠区","value":"230302"},{"label":"恒山区","value":"230303"},{"label":"滴道区","value":"230304"},{"label":"梨树区","value":"230305"},{"label":"城子河区","value":"230306"},{"label":"麻山区","value":"230307"},{"label":"鸡东县","value":"230321"},{"label":"虎林市","value":"230381"},{"label":"密山市","value":"230382"}],[{"label":"向阳区","value":"230402"},{"label":"工农区","value":"230403"},{"label":"南山区","value":"230404"},{"label":"兴安区","value":"230405"},{"label":"东山区","value":"230406"},{"label":"兴山区","value":"230407"},{"label":"萝北县","value":"230421"},{"label":"绥滨县","value":"230422"}],[{"label":"尖山区","value":"230502"},{"label":"岭东区","value":"230503"},{"label":"四方台区","value":"230505"},{"label":"宝山区","value":"230506"},{"label":"集贤县","value":"230521"},{"label":"友谊县","value":"230522"},{"label":"宝清县","value":"230523"},{"label":"饶河县","value":"230524"}],[{"label":"萨尔图区","value":"230602"},{"label":"龙凤区","value":"230603"},{"label":"让胡路区","value":"230604"},{"label":"红岗区","value":"230605"},{"label":"大同区","value":"230606"},{"label":"肇州县","value":"230621"},{"label":"肇源县","value":"230622"},{"label":"林甸县","value":"230623"},{"label":"杜尔伯特蒙古族自治县","value":"230624"},{"label":"大庆高新技术产业开发区","value":"230671"}],[{"label":"伊春区","value":"230702"},{"label":"南岔区","value":"230703"},{"label":"友好区","value":"230704"},{"label":"西林区","value":"230705"},{"label":"翠峦区","value":"230706"},{"label":"新青区","value":"230707"},{"label":"美溪区","value":"230708"},{"label":"金山屯区","value":"230709"},{"label":"五营区","value":"230710"},{"label":"乌马河区","value":"230711"},{"label":"汤旺河区","value":"230712"},{"label":"带岭区","value":"230713"},{"label":"乌伊岭区","value":"230714"},{"label":"红星区","value":"230715"},{"label":"上甘岭区","value":"230716"},{"label":"嘉荫县","value":"230722"},{"label":"铁力市","value":"230781"}],[{"label":"向阳区","value":"230803"},{"label":"前进区","value":"230804"},{"label":"东风区","value":"230805"},{"label":"郊区","value":"230811"},{"label":"桦南县","value":"230822"},{"label":"桦川县","value":"230826"},{"label":"汤原县","value":"230828"},{"label":"同江市","value":"230881"},{"label":"富锦市","value":"230882"},{"label":"抚远市","value":"230883"}],[{"label":"新兴区","value":"230902"},{"label":"桃山区","value":"230903"},{"label":"茄子河区","value":"230904"},{"label":"勃利县","value":"230921"}],[{"label":"东安区","value":"231002"},{"label":"阳明区","value":"231003"},{"label":"爱民区","value":"231004"},{"label":"西安区","value":"231005"},{"label":"林口县","value":"231025"},{"label":"牡丹江经济技术开发区","value":"231071"},{"label":"绥芬河市","value":"231081"},{"label":"海林市","value":"231083"},{"label":"宁安市","value":"231084"},{"label":"穆棱市","value":"231085"},{"label":"东宁市","value":"231086"}],[{"label":"爱辉区","value":"231102"},{"label":"嫩江县","value":"231121"},{"label":"逊克县","value":"231123"},{"label":"孙吴县","value":"231124"},{"label":"北安市","value":"231181"},{"label":"五大连池市","value":"231182"}],[{"label":"北林区","value":"231202"},{"label":"望奎县","value":"231221"},{"label":"兰西县","value":"231222"},{"label":"青冈县","value":"231223"},{"label":"庆安县","value":"231224"},{"label":"明水县","value":"231225"},{"label":"绥棱县","value":"231226"},{"label":"安达市","value":"231281"},{"label":"肇东市","value":"231282"},{"label":"海伦市","value":"231283"}],[{"label":"加格达奇区","value":"232701"},{"label":"松岭区","value":"232702"},{"label":"新林区","value":"232703"},{"label":"呼中区","value":"232704"},{"label":"呼玛县","value":"232721"},{"label":"塔河县","value":"232722"},{"label":"漠河县","value":"232723"}]],[[{"label":"黄浦区","value":"310101"},{"label":"徐汇区","value":"310104"},{"label":"长宁区","value":"310105"},{"label":"静安区","value":"310106"},{"label":"普陀区","value":"310107"},{"label":"虹口区","value":"310109"},{"label":"杨浦区","value":"310110"},{"label":"闵行区","value":"310112"},{"label":"宝山区","value":"310113"},{"label":"嘉定区","value":"310114"},{"label":"浦东新区","value":"310115"},{"label":"金山区","value":"310116"},{"label":"松江区","value":"310117"},{"label":"青浦区","value":"310118"},{"label":"奉贤区","value":"310120"},{"label":"崇明区","value":"310151"}]],[[{"label":"玄武区","value":"320102"},{"label":"秦淮区","value":"320104"},{"label":"建邺区","value":"320105"},{"label":"鼓楼区","value":"320106"},{"label":"浦口区","value":"320111"},{"label":"栖霞区","value":"320113"},{"label":"雨花台区","value":"320114"},{"label":"江宁区","value":"320115"},{"label":"六合区","value":"320116"},{"label":"溧水区","value":"320117"},{"label":"高淳区","value":"320118"}],[{"label":"锡山区","value":"320205"},{"label":"惠山区","value":"320206"},{"label":"滨湖区","value":"320211"},{"label":"梁溪区","value":"320213"},{"label":"新吴区","value":"320214"},{"label":"江阴市","value":"320281"},{"label":"宜兴市","value":"320282"}],[{"label":"鼓楼区","value":"320302"},{"label":"云龙区","value":"320303"},{"label":"贾汪区","value":"320305"},{"label":"泉山区","value":"320311"},{"label":"铜山区","value":"320312"},{"label":"丰县","value":"320321"},{"label":"沛县","value":"320322"},{"label":"睢宁县","value":"320324"},{"label":"徐州经济技术开发区","value":"320371"},{"label":"新沂市","value":"320381"},{"label":"邳州市","value":"320382"}],[{"label":"天宁区","value":"320402"},{"label":"钟楼区","value":"320404"},{"label":"新北区","value":"320411"},{"label":"武进区","value":"320412"},{"label":"金坛区","value":"320413"},{"label":"溧阳市","value":"320481"}],[{"label":"虎丘区","value":"320505"},{"label":"吴中区","value":"320506"},{"label":"相城区","value":"320507"},{"label":"姑苏区","value":"320508"},{"label":"吴江区","value":"320509"},{"label":"苏州工业园区","value":"320571"},{"label":"常熟市","value":"320581"},{"label":"张家港市","value":"320582"},{"label":"昆山市","value":"320583"},{"label":"太仓市","value":"320585"}],[{"label":"崇川区","value":"320602"},{"label":"港闸区","value":"320611"},{"label":"通州区","value":"320612"},{"label":"海安县","value":"320621"},{"label":"如东县","value":"320623"},{"label":"南通经济技术开发区","value":"320671"},{"label":"启东市","value":"320681"},{"label":"如皋市","value":"320682"},{"label":"海门市","value":"320684"}],[{"label":"连云区","value":"320703"},{"label":"海州区","value":"320706"},{"label":"赣榆区","value":"320707"},{"label":"东海县","value":"320722"},{"label":"灌云县","value":"320723"},{"label":"灌南县","value":"320724"},{"label":"连云港经济技术开发区","value":"320771"},{"label":"连云港高新技术产业开发区","value":"320772"}],[{"label":"淮安区","value":"320803"},{"label":"淮阴区","value":"320804"},{"label":"清江浦区","value":"320812"},{"label":"洪泽区","value":"320813"},{"label":"涟水县","value":"320826"},{"label":"盱眙县","value":"320830"},{"label":"金湖县","value":"320831"},{"label":"淮安经济技术开发区","value":"320871"}],[{"label":"亭湖区","value":"320902"},{"label":"盐都区","value":"320903"},{"label":"大丰区","value":"320904"},{"label":"响水县","value":"320921"},{"label":"滨海县","value":"320922"},{"label":"阜宁县","value":"320923"},{"label":"射阳县","value":"320924"},{"label":"建湖县","value":"320925"},{"label":"盐城经济技术开发区","value":"320971"},{"label":"东台市","value":"320981"}],[{"label":"广陵区","value":"321002"},{"label":"邗江区","value":"321003"},{"label":"江都区","value":"321012"},{"label":"宝应县","value":"321023"},{"label":"扬州经济技术开发区","value":"321071"},{"label":"仪征市","value":"321081"},{"label":"高邮市","value":"321084"}],[{"label":"京口区","value":"321102"},{"label":"润州区","value":"321111"},{"label":"丹徒区","value":"321112"},{"label":"镇江新区","value":"321171"},{"label":"丹阳市","value":"321181"},{"label":"扬中市","value":"321182"},{"label":"句容市","value":"321183"}],[{"label":"海陵区","value":"321202"},{"label":"高港区","value":"321203"},{"label":"姜堰区","value":"321204"},{"label":"泰州医药高新技术产业开发区","value":"321271"},{"label":"兴化市","value":"321281"},{"label":"靖江市","value":"321282"},{"label":"泰兴市","value":"321283"}],[{"label":"宿城区","value":"321302"},{"label":"宿豫区","value":"321311"},{"label":"沭阳县","value":"321322"},{"label":"泗阳县","value":"321323"},{"label":"泗洪县","value":"321324"},{"label":"宿迁经济技术开发区","value":"321371"}]],[[{"label":"上城区","value":"330102"},{"label":"下城区","value":"330103"},{"label":"江干区","value":"330104"},{"label":"拱墅区","value":"330105"},{"label":"西湖区","value":"330106"},{"label":"滨江区","value":"330108"},{"label":"萧山区","value":"330109"},{"label":"余杭区","value":"330110"},{"label":"富阳区","value":"330111"},{"label":"临安区","value":"330112"},{"label":"桐庐县","value":"330122"},{"label":"淳安县","value":"330127"},{"label":"建德市","value":"330182"}],[{"label":"海曙区","value":"330203"},{"label":"江北区","value":"330205"},{"label":"北仑区","value":"330206"},{"label":"镇海区","value":"330211"},{"label":"鄞州区","value":"330212"},{"label":"奉化区","value":"330213"},{"label":"象山县","value":"330225"},{"label":"宁海县","value":"330226"},{"label":"余姚市","value":"330281"},{"label":"慈溪市","value":"330282"}],[{"label":"鹿城区","value":"330302"},{"label":"龙湾区","value":"330303"},{"label":"瓯海区","value":"330304"},{"label":"洞头区","value":"330305"},{"label":"永嘉县","value":"330324"},{"label":"平阳县","value":"330326"},{"label":"苍南县","value":"330327"},{"label":"文成县","value":"330328"},{"label":"泰顺县","value":"330329"},{"label":"温州经济技术开发区","value":"330371"},{"label":"瑞安市","value":"330381"},{"label":"乐清市","value":"330382"}],[{"label":"南湖区","value":"330402"},{"label":"秀洲区","value":"330411"},{"label":"嘉善县","value":"330421"},{"label":"海盐县","value":"330424"},{"label":"海宁市","value":"330481"},{"label":"平湖市","value":"330482"},{"label":"桐乡市","value":"330483"}],[{"label":"吴兴区","value":"330502"},{"label":"南浔区","value":"330503"},{"label":"德清县","value":"330521"},{"label":"长兴县","value":"330522"},{"label":"安吉县","value":"330523"}],[{"label":"越城区","value":"330602"},{"label":"柯桥区","value":"330603"},{"label":"上虞区","value":"330604"},{"label":"新昌县","value":"330624"},{"label":"诸暨市","value":"330681"},{"label":"嵊州市","value":"330683"}],[{"label":"婺城区","value":"330702"},{"label":"金东区","value":"330703"},{"label":"武义县","value":"330723"},{"label":"浦江县","value":"330726"},{"label":"磐安县","value":"330727"},{"label":"兰溪市","value":"330781"},{"label":"义乌市","value":"330782"},{"label":"东阳市","value":"330783"},{"label":"永康市","value":"330784"}],[{"label":"柯城区","value":"330802"},{"label":"衢江区","value":"330803"},{"label":"常山县","value":"330822"},{"label":"开化县","value":"330824"},{"label":"龙游县","value":"330825"},{"label":"江山市","value":"330881"}],[{"label":"定海区","value":"330902"},{"label":"普陀区","value":"330903"},{"label":"岱山县","value":"330921"},{"label":"嵊泗县","value":"330922"}],[{"label":"椒江区","value":"331002"},{"label":"黄岩区","value":"331003"},{"label":"路桥区","value":"331004"},{"label":"三门县","value":"331022"},{"label":"天台县","value":"331023"},{"label":"仙居县","value":"331024"},{"label":"温岭市","value":"331081"},{"label":"临海市","value":"331082"},{"label":"玉环市","value":"331083"}],[{"label":"莲都区","value":"331102"},{"label":"青田县","value":"331121"},{"label":"缙云县","value":"331122"},{"label":"遂昌县","value":"331123"},{"label":"松阳县","value":"331124"},{"label":"云和县","value":"331125"},{"label":"庆元县","value":"331126"},{"label":"景宁畲族自治县","value":"331127"},{"label":"龙泉市","value":"331181"}]],[[{"label":"瑶海区","value":"340102"},{"label":"庐阳区","value":"340103"},{"label":"蜀山区","value":"340104"},{"label":"包河区","value":"340111"},{"label":"长丰县","value":"340121"},{"label":"肥东县","value":"340122"},{"label":"肥西县","value":"340123"},{"label":"庐江县","value":"340124"},{"label":"合肥高新技术产业开发区","value":"340171"},{"label":"合肥经济技术开发区","value":"340172"},{"label":"合肥新站高新技术产业开发区","value":"340173"},{"label":"巢湖市","value":"340181"}],[{"label":"镜湖区","value":"340202"},{"label":"弋江区","value":"340203"},{"label":"鸠江区","value":"340207"},{"label":"三山区","value":"340208"},{"label":"芜湖县","value":"340221"},{"label":"繁昌县","value":"340222"},{"label":"南陵县","value":"340223"},{"label":"无为县","value":"340225"},{"label":"芜湖经济技术开发区","value":"340271"},{"label":"安徽芜湖长江大桥经济开发区","value":"340272"}],[{"label":"龙子湖区","value":"340302"},{"label":"蚌山区","value":"340303"},{"label":"禹会区","value":"340304"},{"label":"淮上区","value":"340311"},{"label":"怀远县","value":"340321"},{"label":"五河县","value":"340322"},{"label":"固镇县","value":"340323"},{"label":"蚌埠市高新技术开发区","value":"340371"},{"label":"蚌埠市经济开发区","value":"340372"}],[{"label":"大通区","value":"340402"},{"label":"田家庵区","value":"340403"},{"label":"谢家集区","value":"340404"},{"label":"八公山区","value":"340405"},{"label":"潘集区","value":"340406"},{"label":"凤台县","value":"340421"},{"label":"寿县","value":"340422"}],[{"label":"花山区","value":"340503"},{"label":"雨山区","value":"340504"},{"label":"博望区","value":"340506"},{"label":"当涂县","value":"340521"},{"label":"含山县","value":"340522"},{"label":"和县","value":"340523"}],[{"label":"杜集区","value":"340602"},{"label":"相山区","value":"340603"},{"label":"烈山区","value":"340604"},{"label":"濉溪县","value":"340621"}],[{"label":"铜官区","value":"340705"},{"label":"义安区","value":"340706"},{"label":"郊区","value":"340711"},{"label":"枞阳县","value":"340722"}],[{"label":"迎江区","value":"340802"},{"label":"大观区","value":"340803"},{"label":"宜秀区","value":"340811"},{"label":"怀宁县","value":"340822"},{"label":"潜山县","value":"340824"},{"label":"太湖县","value":"340825"},{"label":"宿松县","value":"340826"},{"label":"望江县","value":"340827"},{"label":"岳西县","value":"340828"},{"label":"安徽安庆经济开发区","value":"340871"},{"label":"桐城市","value":"340881"}],[{"label":"屯溪区","value":"341002"},{"label":"黄山区","value":"341003"},{"label":"徽州区","value":"341004"},{"label":"歙县","value":"341021"},{"label":"休宁县","value":"341022"},{"label":"黟县","value":"341023"},{"label":"祁门县","value":"341024"}],[{"label":"琅琊区","value":"341102"},{"label":"南谯区","value":"341103"},{"label":"来安县","value":"341122"},{"label":"全椒县","value":"341124"},{"label":"定远县","value":"341125"},{"label":"凤阳县","value":"341126"},{"label":"苏滁现代产业园","value":"341171"},{"label":"滁州经济技术开发区","value":"341172"},{"label":"天长市","value":"341181"},{"label":"明光市","value":"341182"}],[{"label":"颍州区","value":"341202"},{"label":"颍东区","value":"341203"},{"label":"颍泉区","value":"341204"},{"label":"临泉县","value":"341221"},{"label":"太和县","value":"341222"},{"label":"阜南县","value":"341225"},{"label":"颍上县","value":"341226"},{"label":"阜阳合肥现代产业园区","value":"341271"},{"label":"阜阳经济技术开发区","value":"341272"},{"label":"界首市","value":"341282"}],[{"label":"埇桥区","value":"341302"},{"label":"砀山县","value":"341321"},{"label":"萧县","value":"341322"},{"label":"灵璧县","value":"341323"},{"label":"泗县","value":"341324"},{"label":"宿州马鞍山现代产业园区","value":"341371"},{"label":"宿州经济技术开发区","value":"341372"}],[{"label":"金安区","value":"341502"},{"label":"裕安区","value":"341503"},{"label":"叶集区","value":"341504"},{"label":"霍邱县","value":"341522"},{"label":"舒城县","value":"341523"},{"label":"金寨县","value":"341524"},{"label":"霍山县","value":"341525"}],[{"label":"谯城区","value":"341602"},{"label":"涡阳县","value":"341621"},{"label":"蒙城县","value":"341622"},{"label":"利辛县","value":"341623"}],[{"label":"贵池区","value":"341702"},{"label":"东至县","value":"341721"},{"label":"石台县","value":"341722"},{"label":"青阳县","value":"341723"}],[{"label":"宣州区","value":"341802"},{"label":"郎溪县","value":"341821"},{"label":"广德县","value":"341822"},{"label":"泾县","value":"341823"},{"label":"绩溪县","value":"341824"},{"label":"旌德县","value":"341825"},{"label":"宣城市经济开发区","value":"341871"},{"label":"宁国市","value":"341881"}]],[[{"label":"鼓楼区","value":"350102"},{"label":"台江区","value":"350103"},{"label":"仓山区","value":"350104"},{"label":"马尾区","value":"350105"},{"label":"晋安区","value":"350111"},{"label":"闽侯县","value":"350121"},{"label":"连江县","value":"350122"},{"label":"罗源县","value":"350123"},{"label":"闽清县","value":"350124"},{"label":"永泰县","value":"350125"},{"label":"平潭县","value":"350128"},{"label":"福清市","value":"350181"},{"label":"长乐市","value":"350182"}],[{"label":"思明区","value":"350203"},{"label":"海沧区","value":"350205"},{"label":"湖里区","value":"350206"},{"label":"集美区","value":"350211"},{"label":"同安区","value":"350212"},{"label":"翔安区","value":"350213"}],[{"label":"城厢区","value":"350302"},{"label":"涵江区","value":"350303"},{"label":"荔城区","value":"350304"},{"label":"秀屿区","value":"350305"},{"label":"仙游县","value":"350322"}],[{"label":"梅列区","value":"350402"},{"label":"三元区","value":"350403"},{"label":"明溪县","value":"350421"},{"label":"清流县","value":"350423"},{"label":"宁化县","value":"350424"},{"label":"大田县","value":"350425"},{"label":"尤溪县","value":"350426"},{"label":"沙县","value":"350427"},{"label":"将乐县","value":"350428"},{"label":"泰宁县","value":"350429"},{"label":"建宁县","value":"350430"},{"label":"永安市","value":"350481"}],[{"label":"鲤城区","value":"350502"},{"label":"丰泽区","value":"350503"},{"label":"洛江区","value":"350504"},{"label":"泉港区","value":"350505"},{"label":"惠安县","value":"350521"},{"label":"安溪县","value":"350524"},{"label":"永春县","value":"350525"},{"label":"德化县","value":"350526"},{"label":"金门县","value":"350527"},{"label":"石狮市","value":"350581"},{"label":"晋江市","value":"350582"},{"label":"南安市","value":"350583"}],[{"label":"芗城区","value":"350602"},{"label":"龙文区","value":"350603"},{"label":"云霄县","value":"350622"},{"label":"漳浦县","value":"350623"},{"label":"诏安县","value":"350624"},{"label":"长泰县","value":"350625"},{"label":"东山县","value":"350626"},{"label":"南靖县","value":"350627"},{"label":"平和县","value":"350628"},{"label":"华安县","value":"350629"},{"label":"龙海市","value":"350681"}],[{"label":"延平区","value":"350702"},{"label":"建阳区","value":"350703"},{"label":"顺昌县","value":"350721"},{"label":"浦城县","value":"350722"},{"label":"光泽县","value":"350723"},{"label":"松溪县","value":"350724"},{"label":"政和县","value":"350725"},{"label":"邵武市","value":"350781"},{"label":"武夷山市","value":"350782"},{"label":"建瓯市","value":"350783"}],[{"label":"新罗区","value":"350802"},{"label":"永定区","value":"350803"},{"label":"长汀县","value":"350821"},{"label":"上杭县","value":"350823"},{"label":"武平县","value":"350824"},{"label":"连城县","value":"350825"},{"label":"漳平市","value":"350881"}],[{"label":"蕉城区","value":"350902"},{"label":"霞浦县","value":"350921"},{"label":"古田县","value":"350922"},{"label":"屏南县","value":"350923"},{"label":"寿宁县","value":"350924"},{"label":"周宁县","value":"350925"},{"label":"柘荣县","value":"350926"},{"label":"福安市","value":"350981"},{"label":"福鼎市","value":"350982"}]],[[{"label":"东湖区","value":"360102"},{"label":"西湖区","value":"360103"},{"label":"青云谱区","value":"360104"},{"label":"湾里区","value":"360105"},{"label":"青山湖区","value":"360111"},{"label":"新建区","value":"360112"},{"label":"南昌县","value":"360121"},{"label":"安义县","value":"360123"},{"label":"进贤县","value":"360124"}],[{"label":"昌江区","value":"360202"},{"label":"珠山区","value":"360203"},{"label":"浮梁县","value":"360222"},{"label":"乐平市","value":"360281"}],[{"label":"安源区","value":"360302"},{"label":"湘东区","value":"360313"},{"label":"莲花县","value":"360321"},{"label":"上栗县","value":"360322"},{"label":"芦溪县","value":"360323"}],[{"label":"濂溪区","value":"360402"},{"label":"浔阳区","value":"360403"},{"label":"柴桑区","value":"360404"},{"label":"武宁县","value":"360423"},{"label":"修水县","value":"360424"},{"label":"永修县","value":"360425"},{"label":"德安县","value":"360426"},{"label":"都昌县","value":"360428"},{"label":"湖口县","value":"360429"},{"label":"彭泽县","value":"360430"},{"label":"瑞昌市","value":"360481"},{"label":"共青城市","value":"360482"},{"label":"庐山市","value":"360483"}],[{"label":"渝水区","value":"360502"},{"label":"分宜县","value":"360521"}],[{"label":"月湖区","value":"360602"},{"label":"余江县","value":"360622"},{"label":"贵溪市","value":"360681"}],[{"label":"章贡区","value":"360702"},{"label":"南康区","value":"360703"},{"label":"赣县区","value":"360704"},{"label":"信丰县","value":"360722"},{"label":"大余县","value":"360723"},{"label":"上犹县","value":"360724"},{"label":"崇义县","value":"360725"},{"label":"安远县","value":"360726"},{"label":"龙南县","value":"360727"},{"label":"定南县","value":"360728"},{"label":"全南县","value":"360729"},{"label":"宁都县","value":"360730"},{"label":"于都县","value":"360731"},{"label":"兴国县","value":"360732"},{"label":"会昌县","value":"360733"},{"label":"寻乌县","value":"360734"},{"label":"石城县","value":"360735"},{"label":"瑞金市","value":"360781"}],[{"label":"吉州区","value":"360802"},{"label":"青原区","value":"360803"},{"label":"吉安县","value":"360821"},{"label":"吉水县","value":"360822"},{"label":"峡江县","value":"360823"},{"label":"新干县","value":"360824"},{"label":"永丰县","value":"360825"},{"label":"泰和县","value":"360826"},{"label":"遂川县","value":"360827"},{"label":"万安县","value":"360828"},{"label":"安福县","value":"360829"},{"label":"永新县","value":"360830"},{"label":"井冈山市","value":"360881"}],[{"label":"袁州区","value":"360902"},{"label":"奉新县","value":"360921"},{"label":"万载县","value":"360922"},{"label":"上高县","value":"360923"},{"label":"宜丰县","value":"360924"},{"label":"靖安县","value":"360925"},{"label":"铜鼓县","value":"360926"},{"label":"丰城市","value":"360981"},{"label":"樟树市","value":"360982"},{"label":"高安市","value":"360983"}],[{"label":"临川区","value":"361002"},{"label":"东乡区","value":"361003"},{"label":"南城县","value":"361021"},{"label":"黎川县","value":"361022"},{"label":"南丰县","value":"361023"},{"label":"崇仁县","value":"361024"},{"label":"乐安县","value":"361025"},{"label":"宜黄县","value":"361026"},{"label":"金溪县","value":"361027"},{"label":"资溪县","value":"361028"},{"label":"广昌县","value":"361030"}],[{"label":"信州区","value":"361102"},{"label":"广丰区","value":"361103"},{"label":"上饶县","value":"361121"},{"label":"玉山县","value":"361123"},{"label":"铅山县","value":"361124"},{"label":"横峰县","value":"361125"},{"label":"弋阳县","value":"361126"},{"label":"余干县","value":"361127"},{"label":"鄱阳县","value":"361128"},{"label":"万年县","value":"361129"},{"label":"婺源县","value":"361130"},{"label":"德兴市","value":"361181"}]],[[{"label":"历下区","value":"370102"},{"label":"市中区","value":"370103"},{"label":"槐荫区","value":"370104"},{"label":"天桥区","value":"370105"},{"label":"历城区","value":"370112"},{"label":"长清区","value":"370113"},{"label":"章丘区","value":"370114"},{"label":"平阴县","value":"370124"},{"label":"济阳县","value":"370125"},{"label":"商河县","value":"370126"},{"label":"济南高新技术产业开发区","value":"370171"}],[{"label":"市南区","value":"370202"},{"label":"市北区","value":"370203"},{"label":"黄岛区","value":"370211"},{"label":"崂山区","value":"370212"},{"label":"李沧区","value":"370213"},{"label":"城阳区","value":"370214"},{"label":"即墨区","value":"370215"},{"label":"青岛高新技术产业开发区","value":"370271"},{"label":"胶州市","value":"370281"},{"label":"平度市","value":"370283"},{"label":"莱西市","value":"370285"}],[{"label":"淄川区","value":"370302"},{"label":"张店区","value":"370303"},{"label":"博山区","value":"370304"},{"label":"临淄区","value":"370305"},{"label":"周村区","value":"370306"},{"label":"桓台县","value":"370321"},{"label":"高青县","value":"370322"},{"label":"沂源县","value":"370323"}],[{"label":"市中区","value":"370402"},{"label":"薛城区","value":"370403"},{"label":"峄城区","value":"370404"},{"label":"台儿庄区","value":"370405"},{"label":"山亭区","value":"370406"},{"label":"滕州市","value":"370481"}],[{"label":"东营区","value":"370502"},{"label":"河口区","value":"370503"},{"label":"垦利区","value":"370505"},{"label":"利津县","value":"370522"},{"label":"广饶县","value":"370523"},{"label":"东营经济技术开发区","value":"370571"},{"label":"东营港经济开发区","value":"370572"}],[{"label":"芝罘区","value":"370602"},{"label":"福山区","value":"370611"},{"label":"牟平区","value":"370612"},{"label":"莱山区","value":"370613"},{"label":"长岛县","value":"370634"},{"label":"烟台高新技术产业开发区","value":"370671"},{"label":"烟台经济技术开发区","value":"370672"},{"label":"龙口市","value":"370681"},{"label":"莱阳市","value":"370682"},{"label":"莱州市","value":"370683"},{"label":"蓬莱市","value":"370684"},{"label":"招远市","value":"370685"},{"label":"栖霞市","value":"370686"},{"label":"海阳市","value":"370687"}],[{"label":"潍城区","value":"370702"},{"label":"寒亭区","value":"370703"},{"label":"坊子区","value":"370704"},{"label":"奎文区","value":"370705"},{"label":"临朐县","value":"370724"},{"label":"昌乐县","value":"370725"},{"label":"潍坊滨海经济技术开发区","value":"370772"},{"label":"青州市","value":"370781"},{"label":"诸城市","value":"370782"},{"label":"寿光市","value":"370783"},{"label":"安丘市","value":"370784"},{"label":"高密市","value":"370785"},{"label":"昌邑市","value":"370786"}],[{"label":"任城区","value":"370811"},{"label":"兖州区","value":"370812"},{"label":"微山县","value":"370826"},{"label":"鱼台县","value":"370827"},{"label":"金乡县","value":"370828"},{"label":"嘉祥县","value":"370829"},{"label":"汶上县","value":"370830"},{"label":"泗水县","value":"370831"},{"label":"梁山县","value":"370832"},{"label":"济宁高新技术产业开发区","value":"370871"},{"label":"曲阜市","value":"370881"},{"label":"邹城市","value":"370883"}],[{"label":"泰山区","value":"370902"},{"label":"岱岳区","value":"370911"},{"label":"宁阳县","value":"370921"},{"label":"东平县","value":"370923"},{"label":"新泰市","value":"370982"},{"label":"肥城市","value":"370983"}],[{"label":"环翠区","value":"371002"},{"label":"文登区","value":"371003"},{"label":"威海火炬高技术产业开发区","value":"371071"},{"label":"威海经济技术开发区","value":"371072"},{"label":"威海临港经济技术开发区","value":"371073"},{"label":"荣成市","value":"371082"},{"label":"乳山市","value":"371083"}],[{"label":"东港区","value":"371102"},{"label":"岚山区","value":"371103"},{"label":"五莲县","value":"371121"},{"label":"莒县","value":"371122"},{"label":"日照经济技术开发区","value":"371171"},{"label":"日照国际海洋城","value":"371172"}],[{"label":"莱城区","value":"371202"},{"label":"钢城区","value":"371203"}],[{"label":"兰山区","value":"371302"},{"label":"罗庄区","value":"371311"},{"label":"河东区","value":"371312"},{"label":"沂南县","value":"371321"},{"label":"郯城县","value":"371322"},{"label":"沂水县","value":"371323"},{"label":"兰陵县","value":"371324"},{"label":"费县","value":"371325"},{"label":"平邑县","value":"371326"},{"label":"莒南县","value":"371327"},{"label":"蒙阴县","value":"371328"},{"label":"临沭县","value":"371329"},{"label":"临沂高新技术产业开发区","value":"371371"},{"label":"临沂经济技术开发区","value":"371372"},{"label":"临沂临港经济开发区","value":"371373"}],[{"label":"德城区","value":"371402"},{"label":"陵城区","value":"371403"},{"label":"宁津县","value":"371422"},{"label":"庆云县","value":"371423"},{"label":"临邑县","value":"371424"},{"label":"齐河县","value":"371425"},{"label":"平原县","value":"371426"},{"label":"夏津县","value":"371427"},{"label":"武城县","value":"371428"},{"label":"德州经济技术开发区","value":"371471"},{"label":"德州运河经济开发区","value":"371472"},{"label":"乐陵市","value":"371481"},{"label":"禹城市","value":"371482"}],[{"label":"东昌府区","value":"371502"},{"label":"阳谷县","value":"371521"},{"label":"莘县","value":"371522"},{"label":"茌平县","value":"371523"},{"label":"东阿县","value":"371524"},{"label":"冠县","value":"371525"},{"label":"高唐县","value":"371526"},{"label":"临清市","value":"371581"}],[{"label":"滨城区","value":"371602"},{"label":"沾化区","value":"371603"},{"label":"惠民县","value":"371621"},{"label":"阳信县","value":"371622"},{"label":"无棣县","value":"371623"},{"label":"博兴县","value":"371625"},{"label":"邹平县","value":"371626"}],[{"label":"牡丹区","value":"371702"},{"label":"定陶区","value":"371703"},{"label":"曹县","value":"371721"},{"label":"单县","value":"371722"},{"label":"成武县","value":"371723"},{"label":"巨野县","value":"371724"},{"label":"郓城县","value":"371725"},{"label":"鄄城县","value":"371726"},{"label":"东明县","value":"371728"},{"label":"菏泽经济技术开发区","value":"371771"},{"label":"菏泽高新技术开发区","value":"371772"}]],[[{"label":"中原区","value":"410102"},{"label":"二七区","value":"410103"},{"label":"管城回族区","value":"410104"},{"label":"金水区","value":"410105"},{"label":"上街区","value":"410106"},{"label":"惠济区","value":"410108"},{"label":"中牟县","value":"410122"},{"label":"郑州经济技术开发区","value":"410171"},{"label":"郑州高新技术产业开发区","value":"410172"},{"label":"郑州航空港经济综合实验区","value":"410173"},{"label":"巩义市","value":"410181"},{"label":"荥阳市","value":"410182"},{"label":"新密市","value":"410183"},{"label":"新郑市","value":"410184"},{"label":"登封市","value":"410185"}],[{"label":"龙亭区","value":"410202"},{"label":"顺河回族区","value":"410203"},{"label":"鼓楼区","value":"410204"},{"label":"禹王台区","value":"410205"},{"label":"祥符区","value":"410212"},{"label":"杞县","value":"410221"},{"label":"通许县","value":"410222"},{"label":"尉氏县","value":"410223"},{"label":"兰考县","value":"410225"}],[{"label":"老城区","value":"410302"},{"label":"西工区","value":"410303"},{"label":"瀍河回族区","value":"410304"},{"label":"涧西区","value":"410305"},{"label":"吉利区","value":"410306"},{"label":"洛龙区","value":"410311"},{"label":"孟津县","value":"410322"},{"label":"新安县","value":"410323"},{"label":"栾川县","value":"410324"},{"label":"嵩县","value":"410325"},{"label":"汝阳县","value":"410326"},{"label":"宜阳县","value":"410327"},{"label":"洛宁县","value":"410328"},{"label":"伊川县","value":"410329"},{"label":"洛阳高新技术产业开发区","value":"410371"},{"label":"偃师市","value":"410381"}],[{"label":"新华区","value":"410402"},{"label":"卫东区","value":"410403"},{"label":"石龙区","value":"410404"},{"label":"湛河区","value":"410411"},{"label":"宝丰县","value":"410421"},{"label":"叶县","value":"410422"},{"label":"鲁山县","value":"410423"},{"label":"郏县","value":"410425"},{"label":"平顶山高新技术产业开发区","value":"410471"},{"label":"平顶山市新城区","value":"410472"},{"label":"舞钢市","value":"410481"},{"label":"汝州市","value":"410482"}],[{"label":"文峰区","value":"410502"},{"label":"北关区","value":"410503"},{"label":"殷都区","value":"410505"},{"label":"龙安区","value":"410506"},{"label":"安阳县","value":"410522"},{"label":"汤阴县","value":"410523"},{"label":"滑县","value":"410526"},{"label":"内黄县","value":"410527"},{"label":"安阳高新技术产业开发区","value":"410571"},{"label":"林州市","value":"410581"}],[{"label":"鹤山区","value":"410602"},{"label":"山城区","value":"410603"},{"label":"淇滨区","value":"410611"},{"label":"浚县","value":"410621"},{"label":"淇县","value":"410622"},{"label":"鹤壁经济技术开发区","value":"410671"}],[{"label":"红旗区","value":"410702"},{"label":"卫滨区","value":"410703"},{"label":"凤泉区","value":"410704"},{"label":"牧野区","value":"410711"},{"label":"新乡县","value":"410721"},{"label":"获嘉县","value":"410724"},{"label":"原阳县","value":"410725"},{"label":"延津县","value":"410726"},{"label":"封丘县","value":"410727"},{"label":"长垣县","value":"410728"},{"label":"新乡高新技术产业开发区","value":"410771"},{"label":"新乡经济技术开发区","value":"410772"},{"label":"新乡市平原城乡一体化示范区","value":"410773"},{"label":"卫辉市","value":"410781"},{"label":"辉县市","value":"410782"}],[{"label":"解放区","value":"410802"},{"label":"中站区","value":"410803"},{"label":"马村区","value":"410804"},{"label":"山阳区","value":"410811"},{"label":"修武县","value":"410821"},{"label":"博爱县","value":"410822"},{"label":"武陟县","value":"410823"},{"label":"温县","value":"410825"},{"label":"焦作城乡一体化示范区","value":"410871"},{"label":"沁阳市","value":"410882"},{"label":"孟州市","value":"410883"}],[{"label":"华龙区","value":"410902"},{"label":"清丰县","value":"410922"},{"label":"南乐县","value":"410923"},{"label":"范县","value":"410926"},{"label":"台前县","value":"410927"},{"label":"濮阳县","value":"410928"},{"label":"河南濮阳工业园区","value":"410971"},{"label":"濮阳经济技术开发区","value":"410972"}],[{"label":"魏都区","value":"411002"},{"label":"建安区","value":"411003"},{"label":"鄢陵县","value":"411024"},{"label":"襄城县","value":"411025"},{"label":"许昌经济技术开发区","value":"411071"},{"label":"禹州市","value":"411081"},{"label":"长葛市","value":"411082"}],[{"label":"源汇区","value":"411102"},{"label":"郾城区","value":"411103"},{"label":"召陵区","value":"411104"},{"label":"舞阳县","value":"411121"},{"label":"临颍县","value":"411122"},{"label":"漯河经济技术开发区","value":"411171"}],[{"label":"湖滨区","value":"411202"},{"label":"陕州区","value":"411203"},{"label":"渑池县","value":"411221"},{"label":"卢氏县","value":"411224"},{"label":"河南三门峡经济开发区","value":"411271"},{"label":"义马市","value":"411281"},{"label":"灵宝市","value":"411282"}],[{"label":"宛城区","value":"411302"},{"label":"卧龙区","value":"411303"},{"label":"南召县","value":"411321"},{"label":"方城县","value":"411322"},{"label":"西峡县","value":"411323"},{"label":"镇平县","value":"411324"},{"label":"内乡县","value":"411325"},{"label":"淅川县","value":"411326"},{"label":"社旗县","value":"411327"},{"label":"唐河县","value":"411328"},{"label":"新野县","value":"411329"},{"label":"桐柏县","value":"411330"},{"label":"南阳高新技术产业开发区","value":"411371"},{"label":"南阳市城乡一体化示范区","value":"411372"},{"label":"邓州市","value":"411381"}],[{"label":"梁园区","value":"411402"},{"label":"睢阳区","value":"411403"},{"label":"民权县","value":"411421"},{"label":"睢县","value":"411422"},{"label":"宁陵县","value":"411423"},{"label":"柘城县","value":"411424"},{"label":"虞城县","value":"411425"},{"label":"夏邑县","value":"411426"},{"label":"豫东综合物流产业聚集区","value":"411471"},{"label":"河南商丘经济开发区","value":"411472"},{"label":"永城市","value":"411481"}],[{"label":"浉河区","value":"411502"},{"label":"平桥区","value":"411503"},{"label":"罗山县","value":"411521"},{"label":"光山县","value":"411522"},{"label":"新县","value":"411523"},{"label":"商城县","value":"411524"},{"label":"固始县","value":"411525"},{"label":"潢川县","value":"411526"},{"label":"淮滨县","value":"411527"},{"label":"息县","value":"411528"},{"label":"信阳高新技术产业开发区","value":"411571"}],[{"label":"川汇区","value":"411602"},{"label":"扶沟县","value":"411621"},{"label":"西华县","value":"411622"},{"label":"商水县","value":"411623"},{"label":"沈丘县","value":"411624"},{"label":"郸城县","value":"411625"},{"label":"淮阳县","value":"411626"},{"label":"太康县","value":"411627"},{"label":"鹿邑县","value":"411628"},{"label":"河南周口经济开发区","value":"411671"},{"label":"项城市","value":"411681"}],[{"label":"驿城区","value":"411702"},{"label":"西平县","value":"411721"},{"label":"上蔡县","value":"411722"},{"label":"平舆县","value":"411723"},{"label":"正阳县","value":"411724"},{"label":"确山县","value":"411725"},{"label":"泌阳县","value":"411726"},{"label":"汝南县","value":"411727"},{"label":"遂平县","value":"411728"},{"label":"新蔡县","value":"411729"},{"label":"河南驻马店经济开发区","value":"411771"}],[{"label":"济源市","value":"419001"}]],[[{"label":"江岸区","value":"420102"},{"label":"江汉区","value":"420103"},{"label":"硚口区","value":"420104"},{"label":"汉阳区","value":"420105"},{"label":"武昌区","value":"420106"},{"label":"青山区","value":"420107"},{"label":"洪山区","value":"420111"},{"label":"东西湖区","value":"420112"},{"label":"汉南区","value":"420113"},{"label":"蔡甸区","value":"420114"},{"label":"江夏区","value":"420115"},{"label":"黄陂区","value":"420116"},{"label":"新洲区","value":"420117"}],[{"label":"黄石港区","value":"420202"},{"label":"西塞山区","value":"420203"},{"label":"下陆区","value":"420204"},{"label":"铁山区","value":"420205"},{"label":"阳新县","value":"420222"},{"label":"大冶市","value":"420281"}],[{"label":"茅箭区","value":"420302"},{"label":"张湾区","value":"420303"},{"label":"郧阳区","value":"420304"},{"label":"郧西县","value":"420322"},{"label":"竹山县","value":"420323"},{"label":"竹溪县","value":"420324"},{"label":"房县","value":"420325"},{"label":"丹江口市","value":"420381"}],[{"label":"西陵区","value":"420502"},{"label":"伍家岗区","value":"420503"},{"label":"点军区","value":"420504"},{"label":"猇亭区","value":"420505"},{"label":"夷陵区","value":"420506"},{"label":"远安县","value":"420525"},{"label":"兴山县","value":"420526"},{"label":"秭归县","value":"420527"},{"label":"长阳土家族自治县","value":"420528"},{"label":"五峰土家族自治县","value":"420529"},{"label":"宜都市","value":"420581"},{"label":"当阳市","value":"420582"},{"label":"枝江市","value":"420583"}],[{"label":"襄城区","value":"420602"},{"label":"樊城区","value":"420606"},{"label":"襄州区","value":"420607"},{"label":"南漳县","value":"420624"},{"label":"谷城县","value":"420625"},{"label":"保康县","value":"420626"},{"label":"老河口市","value":"420682"},{"label":"枣阳市","value":"420683"},{"label":"宜城市","value":"420684"}],[{"label":"梁子湖区","value":"420702"},{"label":"华容区","value":"420703"},{"label":"鄂城区","value":"420704"}],[{"label":"东宝区","value":"420802"},{"label":"掇刀区","value":"420804"},{"label":"京山县","value":"420821"},{"label":"沙洋县","value":"420822"},{"label":"钟祥市","value":"420881"}],[{"label":"孝南区","value":"420902"},{"label":"孝昌县","value":"420921"},{"label":"大悟县","value":"420922"},{"label":"云梦县","value":"420923"},{"label":"应城市","value":"420981"},{"label":"安陆市","value":"420982"},{"label":"汉川市","value":"420984"}],[{"label":"沙市区","value":"421002"},{"label":"荆州区","value":"421003"},{"label":"公安县","value":"421022"},{"label":"监利县","value":"421023"},{"label":"江陵县","value":"421024"},{"label":"荆州经济技术开发区","value":"421071"},{"label":"石首市","value":"421081"},{"label":"洪湖市","value":"421083"},{"label":"松滋市","value":"421087"}],[{"label":"黄州区","value":"421102"},{"label":"团风县","value":"421121"},{"label":"红安县","value":"421122"},{"label":"罗田县","value":"421123"},{"label":"英山县","value":"421124"},{"label":"浠水县","value":"421125"},{"label":"蕲春县","value":"421126"},{"label":"黄梅县","value":"421127"},{"label":"龙感湖管理区","value":"421171"},{"label":"麻城市","value":"421181"},{"label":"武穴市","value":"421182"}],[{"label":"咸安区","value":"421202"},{"label":"嘉鱼县","value":"421221"},{"label":"通城县","value":"421222"},{"label":"崇阳县","value":"421223"},{"label":"通山县","value":"421224"},{"label":"赤壁市","value":"421281"}],[{"label":"曾都区","value":"421303"},{"label":"随县","value":"421321"},{"label":"广水市","value":"421381"}],[{"label":"恩施市","value":"422801"},{"label":"利川市","value":"422802"},{"label":"建始县","value":"422822"},{"label":"巴东县","value":"422823"},{"label":"宣恩县","value":"422825"},{"label":"咸丰县","value":"422826"},{"label":"来凤县","value":"422827"},{"label":"鹤峰县","value":"422828"}],[{"label":"仙桃市","value":"429004"},{"label":"潜江市","value":"429005"},{"label":"天门市","value":"429006"},{"label":"神农架林区","value":"429021"}]],[[{"label":"芙蓉区","value":"430102"},{"label":"天心区","value":"430103"},{"label":"岳麓区","value":"430104"},{"label":"开福区","value":"430105"},{"label":"雨花区","value":"430111"},{"label":"望城区","value":"430112"},{"label":"长沙县","value":"430121"},{"label":"浏阳市","value":"430181"},{"label":"宁乡市","value":"430182"}],[{"label":"荷塘区","value":"430202"},{"label":"芦淞区","value":"430203"},{"label":"石峰区","value":"430204"},{"label":"天元区","value":"430211"},{"label":"株洲县","value":"430221"},{"label":"攸县","value":"430223"},{"label":"茶陵县","value":"430224"},{"label":"炎陵县","value":"430225"},{"label":"云龙示范区","value":"430271"},{"label":"醴陵市","value":"430281"}],[{"label":"雨湖区","value":"430302"},{"label":"岳塘区","value":"430304"},{"label":"湘潭县","value":"430321"},{"label":"湖南湘潭高新技术产业园区","value":"430371"},{"label":"湘潭昭山示范区","value":"430372"},{"label":"湘潭九华示范区","value":"430373"},{"label":"湘乡市","value":"430381"},{"label":"韶山市","value":"430382"}],[{"label":"珠晖区","value":"430405"},{"label":"雁峰区","value":"430406"},{"label":"石鼓区","value":"430407"},{"label":"蒸湘区","value":"430408"},{"label":"南岳区","value":"430412"},{"label":"衡阳县","value":"430421"},{"label":"衡南县","value":"430422"},{"label":"衡山县","value":"430423"},{"label":"衡东县","value":"430424"},{"label":"祁东县","value":"430426"},{"label":"衡阳综合保税区","value":"430471"},{"label":"湖南衡阳高新技术产业园区","value":"430472"},{"label":"湖南衡阳松木经济开发区","value":"430473"},{"label":"耒阳市","value":"430481"},{"label":"常宁市","value":"430482"}],[{"label":"双清区","value":"430502"},{"label":"大祥区","value":"430503"},{"label":"北塔区","value":"430511"},{"label":"邵东县","value":"430521"},{"label":"新邵县","value":"430522"},{"label":"邵阳县","value":"430523"},{"label":"隆回县","value":"430524"},{"label":"洞口县","value":"430525"},{"label":"绥宁县","value":"430527"},{"label":"新宁县","value":"430528"},{"label":"城步苗族自治县","value":"430529"},{"label":"武冈市","value":"430581"}],[{"label":"岳阳楼区","value":"430602"},{"label":"云溪区","value":"430603"},{"label":"君山区","value":"430611"},{"label":"岳阳县","value":"430621"},{"label":"华容县","value":"430623"},{"label":"湘阴县","value":"430624"},{"label":"平江县","value":"430626"},{"label":"岳阳市屈原管理区","value":"430671"},{"label":"汨罗市","value":"430681"},{"label":"临湘市","value":"430682"}],[{"label":"武陵区","value":"430702"},{"label":"鼎城区","value":"430703"},{"label":"安乡县","value":"430721"},{"label":"汉寿县","value":"430722"},{"label":"澧县","value":"430723"},{"label":"临澧县","value":"430724"},{"label":"桃源县","value":"430725"},{"label":"石门县","value":"430726"},{"label":"常德市西洞庭管理区","value":"430771"},{"label":"津市市","value":"430781"}],[{"label":"永定区","value":"430802"},{"label":"武陵源区","value":"430811"},{"label":"慈利县","value":"430821"},{"label":"桑植县","value":"430822"}],[{"label":"资阳区","value":"430902"},{"label":"赫山区","value":"430903"},{"label":"南县","value":"430921"},{"label":"桃江县","value":"430922"},{"label":"安化县","value":"430923"},{"label":"益阳市大通湖管理区","value":"430971"},{"label":"湖南益阳高新技术产业园区","value":"430972"},{"label":"沅江市","value":"430981"}],[{"label":"北湖区","value":"431002"},{"label":"苏仙区","value":"431003"},{"label":"桂阳县","value":"431021"},{"label":"宜章县","value":"431022"},{"label":"永兴县","value":"431023"},{"label":"嘉禾县","value":"431024"},{"label":"临武县","value":"431025"},{"label":"汝城县","value":"431026"},{"label":"桂东县","value":"431027"},{"label":"安仁县","value":"431028"},{"label":"资兴市","value":"431081"}],[{"label":"零陵区","value":"431102"},{"label":"冷水滩区","value":"431103"},{"label":"祁阳县","value":"431121"},{"label":"东安县","value":"431122"},{"label":"双牌县","value":"431123"},{"label":"道县","value":"431124"},{"label":"江永县","value":"431125"},{"label":"宁远县","value":"431126"},{"label":"蓝山县","value":"431127"},{"label":"新田县","value":"431128"},{"label":"江华瑶族自治县","value":"431129"},{"label":"永州经济技术开发区","value":"431171"},{"label":"永州市金洞管理区","value":"431172"},{"label":"永州市回龙圩管理区","value":"431173"}],[{"label":"鹤城区","value":"431202"},{"label":"中方县","value":"431221"},{"label":"沅陵县","value":"431222"},{"label":"辰溪县","value":"431223"},{"label":"溆浦县","value":"431224"},{"label":"会同县","value":"431225"},{"label":"麻阳苗族自治县","value":"431226"},{"label":"新晃侗族自治县","value":"431227"},{"label":"芷江侗族自治县","value":"431228"},{"label":"靖州苗族侗族自治县","value":"431229"},{"label":"通道侗族自治县","value":"431230"},{"label":"怀化市洪江管理区","value":"431271"},{"label":"洪江市","value":"431281"}],[{"label":"娄星区","value":"431302"},{"label":"双峰县","value":"431321"},{"label":"新化县","value":"431322"},{"label":"冷水江市","value":"431381"},{"label":"涟源市","value":"431382"}],[{"label":"吉首市","value":"433101"},{"label":"泸溪县","value":"433122"},{"label":"凤凰县","value":"433123"},{"label":"花垣县","value":"433124"},{"label":"保靖县","value":"433125"},{"label":"古丈县","value":"433126"},{"label":"永顺县","value":"433127"},{"label":"龙山县","value":"433130"},{"label":"湖南吉首经济开发区","value":"433172"},{"label":"湖南永顺经济开发区","value":"433173"}]],[[{"label":"荔湾区","value":"440103"},{"label":"越秀区","value":"440104"},{"label":"海珠区","value":"440105"},{"label":"天河区","value":"440106"},{"label":"白云区","value":"440111"},{"label":"黄埔区","value":"440112"},{"label":"番禺区","value":"440113"},{"label":"花都区","value":"440114"},{"label":"南沙区","value":"440115"},{"label":"从化区","value":"440117"},{"label":"增城区","value":"440118"}],[{"label":"武江区","value":"440203"},{"label":"浈江区","value":"440204"},{"label":"曲江区","value":"440205"},{"label":"始兴县","value":"440222"},{"label":"仁化县","value":"440224"},{"label":"翁源县","value":"440229"},{"label":"乳源瑶族自治县","value":"440232"},{"label":"新丰县","value":"440233"},{"label":"乐昌市","value":"440281"},{"label":"南雄市","value":"440282"}],[{"label":"罗湖区","value":"440303"},{"label":"福田区","value":"440304"},{"label":"南山区","value":"440305"},{"label":"宝安区","value":"440306"},{"label":"龙岗区","value":"440307"},{"label":"盐田区","value":"440308"},{"label":"龙华区","value":"440309"},{"label":"坪山区","value":"440310"}],[{"label":"香洲区","value":"440402"},{"label":"斗门区","value":"440403"},{"label":"金湾区","value":"440404"}],[{"label":"龙湖区","value":"440507"},{"label":"金平区","value":"440511"},{"label":"濠江区","value":"440512"},{"label":"潮阳区","value":"440513"},{"label":"潮南区","value":"440514"},{"label":"澄海区","value":"440515"},{"label":"南澳县","value":"440523"}],[{"label":"禅城区","value":"440604"},{"label":"南海区","value":"440605"},{"label":"顺德区","value":"440606"},{"label":"三水区","value":"440607"},{"label":"高明区","value":"440608"}],[{"label":"蓬江区","value":"440703"},{"label":"江海区","value":"440704"},{"label":"新会区","value":"440705"},{"label":"台山市","value":"440781"},{"label":"开平市","value":"440783"},{"label":"鹤山市","value":"440784"},{"label":"恩平市","value":"440785"}],[{"label":"赤坎区","value":"440802"},{"label":"霞山区","value":"440803"},{"label":"坡头区","value":"440804"},{"label":"麻章区","value":"440811"},{"label":"遂溪县","value":"440823"},{"label":"徐闻县","value":"440825"},{"label":"廉江市","value":"440881"},{"label":"雷州市","value":"440882"},{"label":"吴川市","value":"440883"}],[{"label":"茂南区","value":"440902"},{"label":"电白区","value":"440904"},{"label":"高州市","value":"440981"},{"label":"化州市","value":"440982"},{"label":"信宜市","value":"440983"}],[{"label":"端州区","value":"441202"},{"label":"鼎湖区","value":"441203"},{"label":"高要区","value":"441204"},{"label":"广宁县","value":"441223"},{"label":"怀集县","value":"441224"},{"label":"封开县","value":"441225"},{"label":"德庆县","value":"441226"},{"label":"四会市","value":"441284"}],[{"label":"惠城区","value":"441302"},{"label":"惠阳区","value":"441303"},{"label":"博罗县","value":"441322"},{"label":"惠东县","value":"441323"},{"label":"龙门县","value":"441324"}],[{"label":"梅江区","value":"441402"},{"label":"梅县区","value":"441403"},{"label":"大埔县","value":"441422"},{"label":"丰顺县","value":"441423"},{"label":"五华县","value":"441424"},{"label":"平远县","value":"441426"},{"label":"蕉岭县","value":"441427"},{"label":"兴宁市","value":"441481"}],[{"label":"城区","value":"441502"},{"label":"海丰县","value":"441521"},{"label":"陆河县","value":"441523"},{"label":"陆丰市","value":"441581"}],[{"label":"源城区","value":"441602"},{"label":"紫金县","value":"441621"},{"label":"龙川县","value":"441622"},{"label":"连平县","value":"441623"},{"label":"和平县","value":"441624"},{"label":"东源县","value":"441625"}],[{"label":"江城区","value":"441702"},{"label":"阳东区","value":"441704"},{"label":"阳西县","value":"441721"},{"label":"阳春市","value":"441781"}],[{"label":"清城区","value":"441802"},{"label":"清新区","value":"441803"},{"label":"佛冈县","value":"441821"},{"label":"阳山县","value":"441823"},{"label":"连山壮族瑶族自治县","value":"441825"},{"label":"连南瑶族自治县","value":"441826"},{"label":"英德市","value":"441881"},{"label":"连州市","value":"441882"}],[{"label":"东莞市","value":"441900"}],[{"label":"中山市","value":"442000"}],[{"label":"湘桥区","value":"445102"},{"label":"潮安区","value":"445103"},{"label":"饶平县","value":"445122"}],[{"label":"榕城区","value":"445202"},{"label":"揭东区","value":"445203"},{"label":"揭西县","value":"445222"},{"label":"惠来县","value":"445224"},{"label":"普宁市","value":"445281"}],[{"label":"云城区","value":"445302"},{"label":"云安区","value":"445303"},{"label":"新兴县","value":"445321"},{"label":"郁南县","value":"445322"},{"label":"罗定市","value":"445381"}]],[[{"label":"兴宁区","value":"450102"},{"label":"青秀区","value":"450103"},{"label":"江南区","value":"450105"},{"label":"西乡塘区","value":"450107"},{"label":"良庆区","value":"450108"},{"label":"邕宁区","value":"450109"},{"label":"武鸣区","value":"450110"},{"label":"隆安县","value":"450123"},{"label":"马山县","value":"450124"},{"label":"上林县","value":"450125"},{"label":"宾阳县","value":"450126"},{"label":"横县","value":"450127"}],[{"label":"城中区","value":"450202"},{"label":"鱼峰区","value":"450203"},{"label":"柳南区","value":"450204"},{"label":"柳北区","value":"450205"},{"label":"柳江区","value":"450206"},{"label":"柳城县","value":"450222"},{"label":"鹿寨县","value":"450223"},{"label":"融安县","value":"450224"},{"label":"融水苗族自治县","value":"450225"},{"label":"三江侗族自治县","value":"450226"}],[{"label":"秀峰区","value":"450302"},{"label":"叠彩区","value":"450303"},{"label":"象山区","value":"450304"},{"label":"七星区","value":"450305"},{"label":"雁山区","value":"450311"},{"label":"临桂区","value":"450312"},{"label":"阳朔县","value":"450321"},{"label":"灵川县","value":"450323"},{"label":"全州县","value":"450324"},{"label":"兴安县","value":"450325"},{"label":"永福县","value":"450326"},{"label":"灌阳县","value":"450327"},{"label":"龙胜各族自治县","value":"450328"},{"label":"资源县","value":"450329"},{"label":"平乐县","value":"450330"},{"label":"荔浦县","value":"450331"},{"label":"恭城瑶族自治县","value":"450332"}],[{"label":"万秀区","value":"450403"},{"label":"长洲区","value":"450405"},{"label":"龙圩区","value":"450406"},{"label":"苍梧县","value":"450421"},{"label":"藤县","value":"450422"},{"label":"蒙山县","value":"450423"},{"label":"岑溪市","value":"450481"}],[{"label":"海城区","value":"450502"},{"label":"银海区","value":"450503"},{"label":"铁山港区","value":"450512"},{"label":"合浦县","value":"450521"}],[{"label":"港口区","value":"450602"},{"label":"防城区","value":"450603"},{"label":"上思县","value":"450621"},{"label":"东兴市","value":"450681"}],[{"label":"钦南区","value":"450702"},{"label":"钦北区","value":"450703"},{"label":"灵山县","value":"450721"},{"label":"浦北县","value":"450722"}],[{"label":"港北区","value":"450802"},{"label":"港南区","value":"450803"},{"label":"覃塘区","value":"450804"},{"label":"平南县","value":"450821"},{"label":"桂平市","value":"450881"}],[{"label":"玉州区","value":"450902"},{"label":"福绵区","value":"450903"},{"label":"容县","value":"450921"},{"label":"陆川县","value":"450922"},{"label":"博白县","value":"450923"},{"label":"兴业县","value":"450924"},{"label":"北流市","value":"450981"}],[{"label":"右江区","value":"451002"},{"label":"田阳县","value":"451021"},{"label":"田东县","value":"451022"},{"label":"平果县","value":"451023"},{"label":"德保县","value":"451024"},{"label":"那坡县","value":"451026"},{"label":"凌云县","value":"451027"},{"label":"乐业县","value":"451028"},{"label":"田林县","value":"451029"},{"label":"西林县","value":"451030"},{"label":"隆林各族自治县","value":"451031"},{"label":"靖西市","value":"451081"}],[{"label":"八步区","value":"451102"},{"label":"平桂区","value":"451103"},{"label":"昭平县","value":"451121"},{"label":"钟山县","value":"451122"},{"label":"富川瑶族自治县","value":"451123"}],[{"label":"金城江区","value":"451202"},{"label":"宜州区","value":"451203"},{"label":"南丹县","value":"451221"},{"label":"天峨县","value":"451222"},{"label":"凤山县","value":"451223"},{"label":"东兰县","value":"451224"},{"label":"罗城仫佬族自治县","value":"451225"},{"label":"环江毛南族自治县","value":"451226"},{"label":"巴马瑶族自治县","value":"451227"},{"label":"都安瑶族自治县","value":"451228"},{"label":"大化瑶族自治县","value":"451229"}],[{"label":"兴宾区","value":"451302"},{"label":"忻城县","value":"451321"},{"label":"象州县","value":"451322"},{"label":"武宣县","value":"451323"},{"label":"金秀瑶族自治县","value":"451324"},{"label":"合山市","value":"451381"}],[{"label":"江州区","value":"451402"},{"label":"扶绥县","value":"451421"},{"label":"宁明县","value":"451422"},{"label":"龙州县","value":"451423"},{"label":"大新县","value":"451424"},{"label":"天等县","value":"451425"},{"label":"凭祥市","value":"451481"}]],[[{"label":"秀英区","value":"460105"},{"label":"龙华区","value":"460106"},{"label":"琼山区","value":"460107"},{"label":"美兰区","value":"460108"}],[{"label":"海棠区","value":"460202"},{"label":"吉阳区","value":"460203"},{"label":"天涯区","value":"460204"},{"label":"崖州区","value":"460205"}],[{"label":"西沙群岛","value":"460321"},{"label":"南沙群岛","value":"460322"},{"label":"中沙群岛的岛礁及其海域","value":"460323"}],[{"label":"儋州市","value":"460400"}],[{"label":"五指山市","value":"469001"},{"label":"琼海市","value":"469002"},{"label":"文昌市","value":"469005"},{"label":"万宁市","value":"469006"},{"label":"东方市","value":"469007"},{"label":"定安县","value":"469021"},{"label":"屯昌县","value":"469022"},{"label":"澄迈县","value":"469023"},{"label":"临高县","value":"469024"},{"label":"白沙黎族自治县","value":"469025"},{"label":"昌江黎族自治县","value":"469026"},{"label":"乐东黎族自治县","value":"469027"},{"label":"陵水黎族自治县","value":"469028"},{"label":"保亭黎族苗族自治县","value":"469029"},{"label":"琼中黎族苗族自治县","value":"469030"}]],[[{"label":"万州区","value":"500101"},{"label":"涪陵区","value":"500102"},{"label":"渝中区","value":"500103"},{"label":"大渡口区","value":"500104"},{"label":"江北区","value":"500105"},{"label":"沙坪坝区","value":"500106"},{"label":"九龙坡区","value":"500107"},{"label":"南岸区","value":"500108"},{"label":"北碚区","value":"500109"},{"label":"綦江区","value":"500110"},{"label":"大足区","value":"500111"},{"label":"渝北区","value":"500112"},{"label":"巴南区","value":"500113"},{"label":"黔江区","value":"500114"},{"label":"长寿区","value":"500115"},{"label":"江津区","value":"500116"},{"label":"合川区","value":"500117"},{"label":"永川区","value":"500118"},{"label":"南川区","value":"500119"},{"label":"璧山区","value":"500120"},{"label":"铜梁区","value":"500151"},{"label":"潼南区","value":"500152"},{"label":"荣昌区","value":"500153"},{"label":"开州区","value":"500154"},{"label":"梁平区","value":"500155"},{"label":"武隆区","value":"500156"}],[{"label":"城口县","value":"500229"},{"label":"丰都县","value":"500230"},{"label":"垫江县","value":"500231"},{"label":"忠县","value":"500233"},{"label":"云阳县","value":"500235"},{"label":"奉节县","value":"500236"},{"label":"巫山县","value":"500237"},{"label":"巫溪县","value":"500238"},{"label":"石柱土家族自治县","value":"500240"},{"label":"秀山土家族苗族自治县","value":"500241"},{"label":"酉阳土家族苗族自治县","value":"500242"},{"label":"彭水苗族土家族自治县","value":"500243"}]],[[{"label":"锦江区","value":"510104"},{"label":"青羊区","value":"510105"},{"label":"金牛区","value":"510106"},{"label":"武侯区","value":"510107"},{"label":"成华区","value":"510108"},{"label":"龙泉驿区","value":"510112"},{"label":"青白江区","value":"510113"},{"label":"新都区","value":"510114"},{"label":"温江区","value":"510115"},{"label":"双流区","value":"510116"},{"label":"郫都区","value":"510117"},{"label":"金堂县","value":"510121"},{"label":"大邑县","value":"510129"},{"label":"蒲江县","value":"510131"},{"label":"新津县","value":"510132"},{"label":"都江堰市","value":"510181"},{"label":"彭州市","value":"510182"},{"label":"邛崃市","value":"510183"},{"label":"崇州市","value":"510184"},{"label":"简阳市","value":"510185"}],[{"label":"自流井区","value":"510302"},{"label":"贡井区","value":"510303"},{"label":"大安区","value":"510304"},{"label":"沿滩区","value":"510311"},{"label":"荣县","value":"510321"},{"label":"富顺县","value":"510322"}],[{"label":"东区","value":"510402"},{"label":"西区","value":"510403"},{"label":"仁和区","value":"510411"},{"label":"米易县","value":"510421"},{"label":"盐边县","value":"510422"}],[{"label":"江阳区","value":"510502"},{"label":"纳溪区","value":"510503"},{"label":"龙马潭区","value":"510504"},{"label":"泸县","value":"510521"},{"label":"合江县","value":"510522"},{"label":"叙永县","value":"510524"},{"label":"古蔺县","value":"510525"}],[{"label":"旌阳区","value":"510603"},{"label":"罗江区","value":"510604"},{"label":"中江县","value":"510623"},{"label":"广汉市","value":"510681"},{"label":"什邡市","value":"510682"},{"label":"绵竹市","value":"510683"}],[{"label":"涪城区","value":"510703"},{"label":"游仙区","value":"510704"},{"label":"安州区","value":"510705"},{"label":"三台县","value":"510722"},{"label":"盐亭县","value":"510723"},{"label":"梓潼县","value":"510725"},{"label":"北川羌族自治县","value":"510726"},{"label":"平武县","value":"510727"},{"label":"江油市","value":"510781"}],[{"label":"利州区","value":"510802"},{"label":"昭化区","value":"510811"},{"label":"朝天区","value":"510812"},{"label":"旺苍县","value":"510821"},{"label":"青川县","value":"510822"},{"label":"剑阁县","value":"510823"},{"label":"苍溪县","value":"510824"}],[{"label":"船山区","value":"510903"},{"label":"安居区","value":"510904"},{"label":"蓬溪县","value":"510921"},{"label":"射洪县","value":"510922"},{"label":"大英县","value":"510923"}],[{"label":"市中区","value":"511002"},{"label":"东兴区","value":"511011"},{"label":"威远县","value":"511024"},{"label":"资中县","value":"511025"},{"label":"内江经济开发区","value":"511071"},{"label":"隆昌市","value":"511083"}],[{"label":"市中区","value":"511102"},{"label":"沙湾区","value":"511111"},{"label":"五通桥区","value":"511112"},{"label":"金口河区","value":"511113"},{"label":"犍为县","value":"511123"},{"label":"井研县","value":"511124"},{"label":"夹江县","value":"511126"},{"label":"沐川县","value":"511129"},{"label":"峨边彝族自治县","value":"511132"},{"label":"马边彝族自治县","value":"511133"},{"label":"峨眉山市","value":"511181"}],[{"label":"顺庆区","value":"511302"},{"label":"高坪区","value":"511303"},{"label":"嘉陵区","value":"511304"},{"label":"南部县","value":"511321"},{"label":"营山县","value":"511322"},{"label":"蓬安县","value":"511323"},{"label":"仪陇县","value":"511324"},{"label":"西充县","value":"511325"},{"label":"阆中市","value":"511381"}],[{"label":"东坡区","value":"511402"},{"label":"彭山区","value":"511403"},{"label":"仁寿县","value":"511421"},{"label":"洪雅县","value":"511423"},{"label":"丹棱县","value":"511424"},{"label":"青神县","value":"511425"}],[{"label":"翠屏区","value":"511502"},{"label":"南溪区","value":"511503"},{"label":"宜宾县","value":"511521"},{"label":"江安县","value":"511523"},{"label":"长宁县","value":"511524"},{"label":"高县","value":"511525"},{"label":"珙县","value":"511526"},{"label":"筠连县","value":"511527"},{"label":"兴文县","value":"511528"},{"label":"屏山县","value":"511529"}],[{"label":"广安区","value":"511602"},{"label":"前锋区","value":"511603"},{"label":"岳池县","value":"511621"},{"label":"武胜县","value":"511622"},{"label":"邻水县","value":"511623"},{"label":"华蓥市","value":"511681"}],[{"label":"通川区","value":"511702"},{"label":"达川区","value":"511703"},{"label":"宣汉县","value":"511722"},{"label":"开江县","value":"511723"},{"label":"大竹县","value":"511724"},{"label":"渠县","value":"511725"},{"label":"达州经济开发区","value":"511771"},{"label":"万源市","value":"511781"}],[{"label":"雨城区","value":"511802"},{"label":"名山区","value":"511803"},{"label":"荥经县","value":"511822"},{"label":"汉源县","value":"511823"},{"label":"石棉县","value":"511824"},{"label":"天全县","value":"511825"},{"label":"芦山县","value":"511826"},{"label":"宝兴县","value":"511827"}],[{"label":"巴州区","value":"511902"},{"label":"恩阳区","value":"511903"},{"label":"通江县","value":"511921"},{"label":"南江县","value":"511922"},{"label":"平昌县","value":"511923"},{"label":"巴中经济开发区","value":"511971"}],[{"label":"雁江区","value":"512002"},{"label":"安岳县","value":"512021"},{"label":"乐至县","value":"512022"}],[{"label":"马尔康市","value":"513201"},{"label":"汶川县","value":"513221"},{"label":"理县","value":"513222"},{"label":"茂县","value":"513223"},{"label":"松潘县","value":"513224"},{"label":"九寨沟县","value":"513225"},{"label":"金川县","value":"513226"},{"label":"小金县","value":"513227"},{"label":"黑水县","value":"513228"},{"label":"壤塘县","value":"513230"},{"label":"阿坝县","value":"513231"},{"label":"若尔盖县","value":"513232"},{"label":"红原县","value":"513233"}],[{"label":"康定市","value":"513301"},{"label":"泸定县","value":"513322"},{"label":"丹巴县","value":"513323"},{"label":"九龙县","value":"513324"},{"label":"雅江县","value":"513325"},{"label":"道孚县","value":"513326"},{"label":"炉霍县","value":"513327"},{"label":"甘孜县","value":"513328"},{"label":"新龙县","value":"513329"},{"label":"德格县","value":"513330"},{"label":"白玉县","value":"513331"},{"label":"石渠县","value":"513332"},{"label":"色达县","value":"513333"},{"label":"理塘县","value":"513334"},{"label":"巴塘县","value":"513335"},{"label":"乡城县","value":"513336"},{"label":"稻城县","value":"513337"},{"label":"得荣县","value":"513338"}],[{"label":"西昌市","value":"513401"},{"label":"木里藏族自治县","value":"513422"},{"label":"盐源县","value":"513423"},{"label":"德昌县","value":"513424"},{"label":"会理县","value":"513425"},{"label":"会东县","value":"513426"},{"label":"宁南县","value":"513427"},{"label":"普格县","value":"513428"},{"label":"布拖县","value":"513429"},{"label":"金阳县","value":"513430"},{"label":"昭觉县","value":"513431"},{"label":"喜德县","value":"513432"},{"label":"冕宁县","value":"513433"},{"label":"越西县","value":"513434"},{"label":"甘洛县","value":"513435"},{"label":"美姑县","value":"513436"},{"label":"雷波县","value":"513437"}]],[[{"label":"南明区","value":"520102"},{"label":"云岩区","value":"520103"},{"label":"花溪区","value":"520111"},{"label":"乌当区","value":"520112"},{"label":"白云区","value":"520113"},{"label":"观山湖区","value":"520115"},{"label":"开阳县","value":"520121"},{"label":"息烽县","value":"520122"},{"label":"修文县","value":"520123"},{"label":"清镇市","value":"520181"}],[{"label":"钟山区","value":"520201"},{"label":"六枝特区","value":"520203"},{"label":"水城县","value":"520221"},{"label":"盘州市","value":"520281"}],[{"label":"红花岗区","value":"520302"},{"label":"汇川区","value":"520303"},{"label":"播州区","value":"520304"},{"label":"桐梓县","value":"520322"},{"label":"绥阳县","value":"520323"},{"label":"正安县","value":"520324"},{"label":"道真仡佬族苗族自治县","value":"520325"},{"label":"务川仡佬族苗族自治县","value":"520326"},{"label":"凤冈县","value":"520327"},{"label":"湄潭县","value":"520328"},{"label":"余庆县","value":"520329"},{"label":"习水县","value":"520330"},{"label":"赤水市","value":"520381"},{"label":"仁怀市","value":"520382"}],[{"label":"西秀区","value":"520402"},{"label":"平坝区","value":"520403"},{"label":"普定县","value":"520422"},{"label":"镇宁布依族苗族自治县","value":"520423"},{"label":"关岭布依族苗族自治县","value":"520424"},{"label":"紫云苗族布依族自治县","value":"520425"}],[{"label":"七星关区","value":"520502"},{"label":"大方县","value":"520521"},{"label":"黔西县","value":"520522"},{"label":"金沙县","value":"520523"},{"label":"织金县","value":"520524"},{"label":"纳雍县","value":"520525"},{"label":"威宁彝族回族苗族自治县","value":"520526"},{"label":"赫章县","value":"520527"}],[{"label":"碧江区","value":"520602"},{"label":"万山区","value":"520603"},{"label":"江口县","value":"520621"},{"label":"玉屏侗族自治县","value":"520622"},{"label":"石阡县","value":"520623"},{"label":"思南县","value":"520624"},{"label":"印江土家族苗族自治县","value":"520625"},{"label":"德江县","value":"520626"},{"label":"沿河土家族自治县","value":"520627"},{"label":"松桃苗族自治县","value":"520628"}],[{"label":"兴义市","value":"522301"},{"label":"兴仁县","value":"522322"},{"label":"普安县","value":"522323"},{"label":"晴隆县","value":"522324"},{"label":"贞丰县","value":"522325"},{"label":"望谟县","value":"522326"},{"label":"册亨县","value":"522327"},{"label":"安龙县","value":"522328"}],[{"label":"凯里市","value":"522601"},{"label":"黄平县","value":"522622"},{"label":"施秉县","value":"522623"},{"label":"三穗县","value":"522624"},{"label":"镇远县","value":"522625"},{"label":"岑巩县","value":"522626"},{"label":"天柱县","value":"522627"},{"label":"锦屏县","value":"522628"},{"label":"剑河县","value":"522629"},{"label":"台江县","value":"522630"},{"label":"黎平县","value":"522631"},{"label":"榕江县","value":"522632"},{"label":"从江县","value":"522633"},{"label":"雷山县","value":"522634"},{"label":"麻江县","value":"522635"},{"label":"丹寨县","value":"522636"}],[{"label":"都匀市","value":"522701"},{"label":"福泉市","value":"522702"},{"label":"荔波县","value":"522722"},{"label":"贵定县","value":"522723"},{"label":"瓮安县","value":"522725"},{"label":"独山县","value":"522726"},{"label":"平塘县","value":"522727"},{"label":"罗甸县","value":"522728"},{"label":"长顺县","value":"522729"},{"label":"龙里县","value":"522730"},{"label":"惠水县","value":"522731"},{"label":"三都水族自治县","value":"522732"}]],[[{"label":"五华区","value":"530102"},{"label":"盘龙区","value":"530103"},{"label":"官渡区","value":"530111"},{"label":"西山区","value":"530112"},{"label":"东川区","value":"530113"},{"label":"呈贡区","value":"530114"},{"label":"晋宁区","value":"530115"},{"label":"富民县","value":"530124"},{"label":"宜良县","value":"530125"},{"label":"石林彝族自治县","value":"530126"},{"label":"嵩明县","value":"530127"},{"label":"禄劝彝族苗族自治县","value":"530128"},{"label":"寻甸回族彝族自治县","value":"530129"},{"label":"安宁市","value":"530181"}],[{"label":"麒麟区","value":"530302"},{"label":"沾益区","value":"530303"},{"label":"马龙县","value":"530321"},{"label":"陆良县","value":"530322"},{"label":"师宗县","value":"530323"},{"label":"罗平县","value":"530324"},{"label":"富源县","value":"530325"},{"label":"会泽县","value":"530326"},{"label":"宣威市","value":"530381"}],[{"label":"红塔区","value":"530402"},{"label":"江川区","value":"530403"},{"label":"澄江县","value":"530422"},{"label":"通海县","value":"530423"},{"label":"华宁县","value":"530424"},{"label":"易门县","value":"530425"},{"label":"峨山彝族自治县","value":"530426"},{"label":"新平彝族傣族自治县","value":"530427"},{"label":"元江哈尼族彝族傣族自治县","value":"530428"}],[{"label":"隆阳区","value":"530502"},{"label":"施甸县","value":"530521"},{"label":"龙陵县","value":"530523"},{"label":"昌宁县","value":"530524"},{"label":"腾冲市","value":"530581"}],[{"label":"昭阳区","value":"530602"},{"label":"鲁甸县","value":"530621"},{"label":"巧家县","value":"530622"},{"label":"盐津县","value":"530623"},{"label":"大关县","value":"530624"},{"label":"永善县","value":"530625"},{"label":"绥江县","value":"530626"},{"label":"镇雄县","value":"530627"},{"label":"彝良县","value":"530628"},{"label":"威信县","value":"530629"},{"label":"水富县","value":"530630"}],[{"label":"古城区","value":"530702"},{"label":"玉龙纳西族自治县","value":"530721"},{"label":"永胜县","value":"530722"},{"label":"华坪县","value":"530723"},{"label":"宁蒗彝族自治县","value":"530724"}],[{"label":"思茅区","value":"530802"},{"label":"宁洱哈尼族彝族自治县","value":"530821"},{"label":"墨江哈尼族自治县","value":"530822"},{"label":"景东彝族自治县","value":"530823"},{"label":"景谷傣族彝族自治县","value":"530824"},{"label":"镇沅彝族哈尼族拉祜族自治县","value":"530825"},{"label":"江城哈尼族彝族自治县","value":"530826"},{"label":"孟连傣族拉祜族佤族自治县","value":"530827"},{"label":"澜沧拉祜族自治县","value":"530828"},{"label":"西盟佤族自治县","value":"530829"}],[{"label":"临翔区","value":"530902"},{"label":"凤庆县","value":"530921"},{"label":"云县","value":"530922"},{"label":"永德县","value":"530923"},{"label":"镇康县","value":"530924"},{"label":"双江拉祜族佤族布朗族傣族自治县","value":"530925"},{"label":"耿马傣族佤族自治县","value":"530926"},{"label":"沧源佤族自治县","value":"530927"}],[{"label":"楚雄市","value":"532301"},{"label":"双柏县","value":"532322"},{"label":"牟定县","value":"532323"},{"label":"南华县","value":"532324"},{"label":"姚安县","value":"532325"},{"label":"大姚县","value":"532326"},{"label":"永仁县","value":"532327"},{"label":"元谋县","value":"532328"},{"label":"武定县","value":"532329"},{"label":"禄丰县","value":"532331"}],[{"label":"个旧市","value":"532501"},{"label":"开远市","value":"532502"},{"label":"蒙自市","value":"532503"},{"label":"弥勒市","value":"532504"},{"label":"屏边苗族自治县","value":"532523"},{"label":"建水县","value":"532524"},{"label":"石屏县","value":"532525"},{"label":"泸西县","value":"532527"},{"label":"元阳县","value":"532528"},{"label":"红河县","value":"532529"},{"label":"金平苗族瑶族傣族自治县","value":"532530"},{"label":"绿春县","value":"532531"},{"label":"河口瑶族自治县","value":"532532"}],[{"label":"文山市","value":"532601"},{"label":"砚山县","value":"532622"},{"label":"西畴县","value":"532623"},{"label":"麻栗坡县","value":"532624"},{"label":"马关县","value":"532625"},{"label":"丘北县","value":"532626"},{"label":"广南县","value":"532627"},{"label":"富宁县","value":"532628"}],[{"label":"景洪市","value":"532801"},{"label":"勐海县","value":"532822"},{"label":"勐腊县","value":"532823"}],[{"label":"大理市","value":"532901"},{"label":"漾濞彝族自治县","value":"532922"},{"label":"祥云县","value":"532923"},{"label":"宾川县","value":"532924"},{"label":"弥渡县","value":"532925"},{"label":"南涧彝族自治县","value":"532926"},{"label":"巍山彝族回族自治县","value":"532927"},{"label":"永平县","value":"532928"},{"label":"云龙县","value":"532929"},{"label":"洱源县","value":"532930"},{"label":"剑川县","value":"532931"},{"label":"鹤庆县","value":"532932"}],[{"label":"瑞丽市","value":"533102"},{"label":"芒市","value":"533103"},{"label":"梁河县","value":"533122"},{"label":"盈江县","value":"533123"},{"label":"陇川县","value":"533124"}],[{"label":"泸水市","value":"533301"},{"label":"福贡县","value":"533323"},{"label":"贡山独龙族怒族自治县","value":"533324"},{"label":"兰坪白族普米族自治县","value":"533325"}],[{"label":"香格里拉市","value":"533401"},{"label":"德钦县","value":"533422"},{"label":"维西傈僳族自治县","value":"533423"}]],[[{"label":"城关区","value":"540102"},{"label":"堆龙德庆区","value":"540103"},{"label":"林周县","value":"540121"},{"label":"当雄县","value":"540122"},{"label":"尼木县","value":"540123"},{"label":"曲水县","value":"540124"},{"label":"达孜县","value":"540126"},{"label":"墨竹工卡县","value":"540127"},{"label":"格尔木藏青工业园区","value":"540171"},{"label":"拉萨经济技术开发区","value":"540172"},{"label":"西藏文化旅游创意园区","value":"540173"},{"label":"达孜工业园区","value":"540174"}],[{"label":"桑珠孜区","value":"540202"},{"label":"南木林县","value":"540221"},{"label":"江孜县","value":"540222"},{"label":"定日县","value":"540223"},{"label":"萨迦县","value":"540224"},{"label":"拉孜县","value":"540225"},{"label":"昂仁县","value":"540226"},{"label":"谢通门县","value":"540227"},{"label":"白朗县","value":"540228"},{"label":"仁布县","value":"540229"},{"label":"康马县","value":"540230"},{"label":"定结县","value":"540231"},{"label":"仲巴县","value":"540232"},{"label":"亚东县","value":"540233"},{"label":"吉隆县","value":"540234"},{"label":"聂拉木县","value":"540235"},{"label":"萨嘎县","value":"540236"},{"label":"岗巴县","value":"540237"}],[{"label":"卡若区","value":"540302"},{"label":"江达县","value":"540321"},{"label":"贡觉县","value":"540322"},{"label":"类乌齐县","value":"540323"},{"label":"丁青县","value":"540324"},{"label":"察雅县","value":"540325"},{"label":"八宿县","value":"540326"},{"label":"左贡县","value":"540327"},{"label":"芒康县","value":"540328"},{"label":"洛隆县","value":"540329"},{"label":"边坝县","value":"540330"}],[{"label":"巴宜区","value":"540402"},{"label":"工布江达县","value":"540421"},{"label":"米林县","value":"540422"},{"label":"墨脱县","value":"540423"},{"label":"波密县","value":"540424"},{"label":"察隅县","value":"540425"},{"label":"朗县","value":"540426"}],[{"label":"乃东区","value":"540502"},{"label":"扎囊县","value":"540521"},{"label":"贡嘎县","value":"540522"},{"label":"桑日县","value":"540523"},{"label":"琼结县","value":"540524"},{"label":"曲松县","value":"540525"},{"label":"措美县","value":"540526"},{"label":"洛扎县","value":"540527"},{"label":"加查县","value":"540528"},{"label":"隆子县","value":"540529"},{"label":"错那县","value":"540530"},{"label":"浪卡子县","value":"540531"}],[{"label":"那曲县","value":"542421"},{"label":"嘉黎县","value":"542422"},{"label":"比如县","value":"542423"},{"label":"聂荣县","value":"542424"},{"label":"安多县","value":"542425"},{"label":"申扎县","value":"542426"},{"label":"索县","value":"542427"},{"label":"班戈县","value":"542428"},{"label":"巴青县","value":"542429"},{"label":"尼玛县","value":"542430"},{"label":"双湖县","value":"542431"}],[{"label":"普兰县","value":"542521"},{"label":"札达县","value":"542522"},{"label":"噶尔县","value":"542523"},{"label":"日土县","value":"542524"},{"label":"革吉县","value":"542525"},{"label":"改则县","value":"542526"},{"label":"措勤县","value":"542527"}]],[[{"label":"新城区","value":"610102"},{"label":"碑林区","value":"610103"},{"label":"莲湖区","value":"610104"},{"label":"灞桥区","value":"610111"},{"label":"未央区","value":"610112"},{"label":"雁塔区","value":"610113"},{"label":"阎良区","value":"610114"},{"label":"临潼区","value":"610115"},{"label":"长安区","value":"610116"},{"label":"高陵区","value":"610117"},{"label":"鄠邑区","value":"610118"},{"label":"蓝田县","value":"610122"},{"label":"周至县","value":"610124"}],[{"label":"王益区","value":"610202"},{"label":"印台区","value":"610203"},{"label":"耀州区","value":"610204"},{"label":"宜君县","value":"610222"}],[{"label":"渭滨区","value":"610302"},{"label":"金台区","value":"610303"},{"label":"陈仓区","value":"610304"},{"label":"凤翔县","value":"610322"},{"label":"岐山县","value":"610323"},{"label":"扶风县","value":"610324"},{"label":"眉县","value":"610326"},{"label":"陇县","value":"610327"},{"label":"千阳县","value":"610328"},{"label":"麟游县","value":"610329"},{"label":"凤县","value":"610330"},{"label":"太白县","value":"610331"}],[{"label":"秦都区","value":"610402"},{"label":"杨陵区","value":"610403"},{"label":"渭城区","value":"610404"},{"label":"三原县","value":"610422"},{"label":"泾阳县","value":"610423"},{"label":"乾县","value":"610424"},{"label":"礼泉县","value":"610425"},{"label":"永寿县","value":"610426"},{"label":"彬县","value":"610427"},{"label":"长武县","value":"610428"},{"label":"旬邑县","value":"610429"},{"label":"淳化县","value":"610430"},{"label":"武功县","value":"610431"},{"label":"兴平市","value":"610481"}],[{"label":"临渭区","value":"610502"},{"label":"华州区","value":"610503"},{"label":"潼关县","value":"610522"},{"label":"大荔县","value":"610523"},{"label":"合阳县","value":"610524"},{"label":"澄城县","value":"610525"},{"label":"蒲城县","value":"610526"},{"label":"白水县","value":"610527"},{"label":"富平县","value":"610528"},{"label":"韩城市","value":"610581"},{"label":"华阴市","value":"610582"}],[{"label":"宝塔区","value":"610602"},{"label":"安塞区","value":"610603"},{"label":"延长县","value":"610621"},{"label":"延川县","value":"610622"},{"label":"子长县","value":"610623"},{"label":"志丹县","value":"610625"},{"label":"吴起县","value":"610626"},{"label":"甘泉县","value":"610627"},{"label":"富县","value":"610628"},{"label":"洛川县","value":"610629"},{"label":"宜川县","value":"610630"},{"label":"黄龙县","value":"610631"},{"label":"黄陵县","value":"610632"}],[{"label":"汉台区","value":"610702"},{"label":"南郑区","value":"610703"},{"label":"城固县","value":"610722"},{"label":"洋县","value":"610723"},{"label":"西乡县","value":"610724"},{"label":"勉县","value":"610725"},{"label":"宁强县","value":"610726"},{"label":"略阳县","value":"610727"},{"label":"镇巴县","value":"610728"},{"label":"留坝县","value":"610729"},{"label":"佛坪县","value":"610730"}],[{"label":"榆阳区","value":"610802"},{"label":"横山区","value":"610803"},{"label":"府谷县","value":"610822"},{"label":"靖边县","value":"610824"},{"label":"定边县","value":"610825"},{"label":"绥德县","value":"610826"},{"label":"米脂县","value":"610827"},{"label":"佳县","value":"610828"},{"label":"吴堡县","value":"610829"},{"label":"清涧县","value":"610830"},{"label":"子洲县","value":"610831"},{"label":"神木市","value":"610881"}],[{"label":"汉滨区","value":"610902"},{"label":"汉阴县","value":"610921"},{"label":"石泉县","value":"610922"},{"label":"宁陕县","value":"610923"},{"label":"紫阳县","value":"610924"},{"label":"岚皋县","value":"610925"},{"label":"平利县","value":"610926"},{"label":"镇坪县","value":"610927"},{"label":"旬阳县","value":"610928"},{"label":"白河县","value":"610929"}],[{"label":"商州区","value":"611002"},{"label":"洛南县","value":"611021"},{"label":"丹凤县","value":"611022"},{"label":"商南县","value":"611023"},{"label":"山阳县","value":"611024"},{"label":"镇安县","value":"611025"},{"label":"柞水县","value":"611026"}]],[[{"label":"城关区","value":"620102"},{"label":"七里河区","value":"620103"},{"label":"西固区","value":"620104"},{"label":"安宁区","value":"620105"},{"label":"红古区","value":"620111"},{"label":"永登县","value":"620121"},{"label":"皋兰县","value":"620122"},{"label":"榆中县","value":"620123"},{"label":"兰州新区","value":"620171"}],[{"label":"嘉峪关市","value":"620201"}],[{"label":"金川区","value":"620302"},{"label":"永昌县","value":"620321"}],[{"label":"白银区","value":"620402"},{"label":"平川区","value":"620403"},{"label":"靖远县","value":"620421"},{"label":"会宁县","value":"620422"},{"label":"景泰县","value":"620423"}],[{"label":"秦州区","value":"620502"},{"label":"麦积区","value":"620503"},{"label":"清水县","value":"620521"},{"label":"秦安县","value":"620522"},{"label":"甘谷县","value":"620523"},{"label":"武山县","value":"620524"},{"label":"张家川回族自治县","value":"620525"}],[{"label":"凉州区","value":"620602"},{"label":"民勤县","value":"620621"},{"label":"古浪县","value":"620622"},{"label":"天祝藏族自治县","value":"620623"}],[{"label":"甘州区","value":"620702"},{"label":"肃南裕固族自治县","value":"620721"},{"label":"民乐县","value":"620722"},{"label":"临泽县","value":"620723"},{"label":"高台县","value":"620724"},{"label":"山丹县","value":"620725"}],[{"label":"崆峒区","value":"620802"},{"label":"泾川县","value":"620821"},{"label":"灵台县","value":"620822"},{"label":"崇信县","value":"620823"},{"label":"华亭县","value":"620824"},{"label":"庄浪县","value":"620825"},{"label":"静宁县","value":"620826"},{"label":"平凉工业园区","value":"620871"}],[{"label":"肃州区","value":"620902"},{"label":"金塔县","value":"620921"},{"label":"瓜州县","value":"620922"},{"label":"肃北蒙古族自治县","value":"620923"},{"label":"阿克塞哈萨克族自治县","value":"620924"},{"label":"玉门市","value":"620981"},{"label":"敦煌市","value":"620982"}],[{"label":"西峰区","value":"621002"},{"label":"庆城县","value":"621021"},{"label":"环县","value":"621022"},{"label":"华池县","value":"621023"},{"label":"合水县","value":"621024"},{"label":"正宁县","value":"621025"},{"label":"宁县","value":"621026"},{"label":"镇原县","value":"621027"}],[{"label":"安定区","value":"621102"},{"label":"通渭县","value":"621121"},{"label":"陇西县","value":"621122"},{"label":"渭源县","value":"621123"},{"label":"临洮县","value":"621124"},{"label":"漳县","value":"621125"},{"label":"岷县","value":"621126"}],[{"label":"武都区","value":"621202"},{"label":"成县","value":"621221"},{"label":"文县","value":"621222"},{"label":"宕昌县","value":"621223"},{"label":"康县","value":"621224"},{"label":"西和县","value":"621225"},{"label":"礼县","value":"621226"},{"label":"徽县","value":"621227"},{"label":"两当县","value":"621228"}],[{"label":"临夏市","value":"622901"},{"label":"临夏县","value":"622921"},{"label":"康乐县","value":"622922"},{"label":"永靖县","value":"622923"},{"label":"广河县","value":"622924"},{"label":"和政县","value":"622925"},{"label":"东乡族自治县","value":"622926"},{"label":"积石山保安族东乡族撒拉族自治县","value":"622927"}],[{"label":"合作市","value":"623001"},{"label":"临潭县","value":"623021"},{"label":"卓尼县","value":"623022"},{"label":"舟曲县","value":"623023"},{"label":"迭部县","value":"623024"},{"label":"玛曲县","value":"623025"},{"label":"碌曲县","value":"623026"},{"label":"夏河县","value":"623027"}]],[[{"label":"城东区","value":"630102"},{"label":"城中区","value":"630103"},{"label":"城西区","value":"630104"},{"label":"城北区","value":"630105"},{"label":"大通回族土族自治县","value":"630121"},{"label":"湟中县","value":"630122"},{"label":"湟源县","value":"630123"}],[{"label":"乐都区","value":"630202"},{"label":"平安区","value":"630203"},{"label":"民和回族土族自治县","value":"630222"},{"label":"互助土族自治县","value":"630223"},{"label":"化隆回族自治县","value":"630224"},{"label":"循化撒拉族自治县","value":"630225"}],[{"label":"门源回族自治县","value":"632221"},{"label":"祁连县","value":"632222"},{"label":"海晏县","value":"632223"},{"label":"刚察县","value":"632224"}],[{"label":"同仁县","value":"632321"},{"label":"尖扎县","value":"632322"},{"label":"泽库县","value":"632323"},{"label":"河南蒙古族自治县","value":"632324"}],[{"label":"共和县","value":"632521"},{"label":"同德县","value":"632522"},{"label":"贵德县","value":"632523"},{"label":"兴海县","value":"632524"},{"label":"贵南县","value":"632525"}],[{"label":"玛沁县","value":"632621"},{"label":"班玛县","value":"632622"},{"label":"甘德县","value":"632623"},{"label":"达日县","value":"632624"},{"label":"久治县","value":"632625"},{"label":"玛多县","value":"632626"}],[{"label":"玉树市","value":"632701"},{"label":"杂多县","value":"632722"},{"label":"称多县","value":"632723"},{"label":"治多县","value":"632724"},{"label":"囊谦县","value":"632725"},{"label":"曲麻莱县","value":"632726"}],[{"label":"格尔木市","value":"632801"},{"label":"德令哈市","value":"632802"},{"label":"乌兰县","value":"632821"},{"label":"都兰县","value":"632822"},{"label":"天峻县","value":"632823"},{"label":"大柴旦行政委员会","value":"632857"},{"label":"冷湖行政委员会","value":"632858"},{"label":"茫崖行政委员会","value":"632859"}]],[[{"label":"兴庆区","value":"640104"},{"label":"西夏区","value":"640105"},{"label":"金凤区","value":"640106"},{"label":"永宁县","value":"640121"},{"label":"贺兰县","value":"640122"},{"label":"灵武市","value":"640181"}],[{"label":"大武口区","value":"640202"},{"label":"惠农区","value":"640205"},{"label":"平罗县","value":"640221"}],[{"label":"利通区","value":"640302"},{"label":"红寺堡区","value":"640303"},{"label":"盐池县","value":"640323"},{"label":"同心县","value":"640324"},{"label":"青铜峡市","value":"640381"}],[{"label":"原州区","value":"640402"},{"label":"西吉县","value":"640422"},{"label":"隆德县","value":"640423"},{"label":"泾源县","value":"640424"},{"label":"彭阳县","value":"640425"}],[{"label":"沙坡头区","value":"640502"},{"label":"中宁县","value":"640521"},{"label":"海原县","value":"640522"}]],[[{"label":"天山区","value":"650102"},{"label":"沙依巴克区","value":"650103"},{"label":"新市区","value":"650104"},{"label":"水磨沟区","value":"650105"},{"label":"头屯河区","value":"650106"},{"label":"达坂城区","value":"650107"},{"label":"米东区","value":"650109"},{"label":"乌鲁木齐县","value":"650121"},{"label":"乌鲁木齐经济技术开发区","value":"650171"},{"label":"乌鲁木齐高新技术产业开发区","value":"650172"}],[{"label":"独山子区","value":"650202"},{"label":"克拉玛依区","value":"650203"},{"label":"白碱滩区","value":"650204"},{"label":"乌尔禾区","value":"650205"}],[{"label":"高昌区","value":"650402"},{"label":"鄯善县","value":"650421"},{"label":"托克逊县","value":"650422"}],[{"label":"伊州区","value":"650502"},{"label":"巴里坤哈萨克自治县","value":"650521"},{"label":"伊吾县","value":"650522"}],[{"label":"昌吉市","value":"652301"},{"label":"阜康市","value":"652302"},{"label":"呼图壁县","value":"652323"},{"label":"玛纳斯县","value":"652324"},{"label":"奇台县","value":"652325"},{"label":"吉木萨尔县","value":"652327"},{"label":"木垒哈萨克自治县","value":"652328"}],[{"label":"博乐市","value":"652701"},{"label":"阿拉山口市","value":"652702"},{"label":"精河县","value":"652722"},{"label":"温泉县","value":"652723"}],[{"label":"库尔勒市","value":"652801"},{"label":"轮台县","value":"652822"},{"label":"尉犁县","value":"652823"},{"label":"若羌县","value":"652824"},{"label":"且末县","value":"652825"},{"label":"焉耆回族自治县","value":"652826"},{"label":"和静县","value":"652827"},{"label":"和硕县","value":"652828"},{"label":"博湖县","value":"652829"},{"label":"库尔勒经济技术开发区","value":"652871"}],[{"label":"阿克苏市","value":"652901"},{"label":"温宿县","value":"652922"},{"label":"库车县","value":"652923"},{"label":"沙雅县","value":"652924"},{"label":"新和县","value":"652925"},{"label":"拜城县","value":"652926"},{"label":"乌什县","value":"652927"},{"label":"阿瓦提县","value":"652928"},{"label":"柯坪县","value":"652929"}],[{"label":"阿图什市","value":"653001"},{"label":"阿克陶县","value":"653022"},{"label":"阿合奇县","value":"653023"},{"label":"乌恰县","value":"653024"}],[{"label":"喀什市","value":"653101"},{"label":"疏附县","value":"653121"},{"label":"疏勒县","value":"653122"},{"label":"英吉沙县","value":"653123"},{"label":"泽普县","value":"653124"},{"label":"莎车县","value":"653125"},{"label":"叶城县","value":"653126"},{"label":"麦盖提县","value":"653127"},{"label":"岳普湖县","value":"653128"},{"label":"伽师县","value":"653129"},{"label":"巴楚县","value":"653130"},{"label":"塔什库尔干塔吉克自治县","value":"653131"}],[{"label":"和田市","value":"653201"},{"label":"和田县","value":"653221"},{"label":"墨玉县","value":"653222"},{"label":"皮山县","value":"653223"},{"label":"洛浦县","value":"653224"},{"label":"策勒县","value":"653225"},{"label":"于田县","value":"653226"},{"label":"民丰县","value":"653227"}],[{"label":"伊宁市","value":"654002"},{"label":"奎屯市","value":"654003"},{"label":"霍尔果斯市","value":"654004"},{"label":"伊宁县","value":"654021"},{"label":"察布查尔锡伯自治县","value":"654022"},{"label":"霍城县","value":"654023"},{"label":"巩留县","value":"654024"},{"label":"新源县","value":"654025"},{"label":"昭苏县","value":"654026"},{"label":"特克斯县","value":"654027"},{"label":"尼勒克县","value":"654028"}],[{"label":"塔城市","value":"654201"},{"label":"乌苏市","value":"654202"},{"label":"额敏县","value":"654221"},{"label":"沙湾县","value":"654223"},{"label":"托里县","value":"654224"},{"label":"裕民县","value":"654225"},{"label":"和布克赛尔蒙古自治县","value":"654226"}],[{"label":"阿勒泰市","value":"654301"},{"label":"布尔津县","value":"654321"},{"label":"富蕴县","value":"654322"},{"label":"福海县","value":"654323"},{"label":"哈巴河县","value":"654324"},{"label":"青河县","value":"654325"},{"label":"吉木乃县","value":"654326"}],[{"label":"石河子市","value":"659001"},{"label":"阿拉尔市","value":"659002"},{"label":"图木舒克市","value":"659003"},{"label":"五家渠市","value":"659004"},{"label":"铁门关市","value":"659006"}]],[[{"label":"台北","value":"660101"}],[{"label":"高雄","value":"660201"}],[{"label":"基隆","value":"660301"}],[{"label":"台中","value":"660401"}],[{"label":"台南","value":"660501"}],[{"label":"新竹","value":"660601"}],[{"label":"嘉义","value":"660701"}],[{"label":"宜兰","value":"660801"}],[{"label":"桃园","value":"660901"}],[{"label":"苗栗","value":"661001"}],[{"label":"彰化","value":"661101"}],[{"label":"南投","value":"661201"}],[{"label":"云林","value":"661301"}],[{"label":"屏东","value":"661401"}],[{"label":"台东","value":"661501"}],[{"label":"花莲","value":"661601"}],[{"label":"澎湖","value":"661701"}]],[[{"label":"香港岛","value":"670101"}],[{"label":"九龙","value":"670201"}],[{"label":"新界","value":"670301"}]],[[{"label":"澳门半岛","value":"680101"}],[{"label":"氹仔岛","value":"680201"}],[{"label":"路环岛","value":"680301"}],[{"label":"路氹城","value":"680401"}]]];export default areaData;
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/async-validator.js b/tuniao-ui/libs/utils/async-validator.js
new file mode 100644
index 0000000..d7215b9
--- /dev/null
+++ b/tuniao-ui/libs/utils/async-validator.js
@@ -0,0 +1,1356 @@
+function _extends() {
+	_extends = Object.assign || function(target) {
+		for (var i = 1; i < arguments.length; i++) {
+			var source = arguments[i];
+
+			for (var key in source) {
+				if (Object.prototype.hasOwnProperty.call(source, key)) {
+					target[key] = source[key];
+				}
+			}
+		}
+
+		return target;
+	};
+
+	return _extends.apply(this, arguments);
+}
+
+/* eslint no-console:0 */
+var formatRegExp = /%[sdj%]/g;
+var warning = function warning() {}; // don't print warning message when in production env or node runtime
+
+if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV !== 'production' && typeof window !==
+	'undefined' && typeof document !== 'undefined') {
+	warning = function warning(type, errors) {
+		if (typeof console !== 'undefined' && console.warn) {
+			if (errors.every(function(e) {
+					return typeof e === 'string';
+				})) {
+				console.warn(type, errors);
+			}
+		}
+	};
+}
+
+function convertFieldsError(errors) {
+	if (!errors || !errors.length) return null;
+	var fields = {};
+	errors.forEach(function(error) {
+		var field = error.field;
+		fields[field] = fields[field] || [];
+		fields[field].push(error);
+	});
+	return fields;
+}
+
+function format() {
+	for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+		args[_key] = arguments[_key];
+	}
+
+	var i = 1;
+	var f = args[0];
+	var len = args.length;
+
+	if (typeof f === 'function') {
+		return f.apply(null, args.slice(1));
+	}
+
+	if (typeof f === 'string') {
+		var str = String(f).replace(formatRegExp, function(x) {
+			if (x === '%%') {
+				return '%';
+			}
+
+			if (i >= len) {
+				return x;
+			}
+
+			switch (x) {
+				case '%s':
+					return String(args[i++]);
+
+				case '%d':
+					return Number(args[i++]);
+
+				case '%j':
+					try {
+						return JSON.stringify(args[i++]);
+					} catch (_) {
+						return '[Circular]';
+					}
+
+					break;
+
+				default:
+					return x;
+			}
+		});
+
+		for (var arg = args[i]; i < len; arg = args[++i]) {
+			str += " " + arg;
+		}
+
+		return str;
+	}
+
+	return f;
+}
+
+function isNativeStringType(type) {
+	return type === 'string' || type === 'url' || type === 'hex' || type === 'email' || type === 'pattern';
+}
+
+function isEmptyValue(value, type) {
+	if (value === undefined || value === null) {
+		return true;
+	}
+
+	if (type === 'array' && Array.isArray(value) && !value.length) {
+		return true;
+	}
+
+	if (isNativeStringType(type) && typeof value === 'string' && !value) {
+		return true;
+	}
+
+	return false;
+}
+
+function asyncParallelArray(arr, func, callback) {
+	var results = [];
+	var total = 0;
+	var arrLength = arr.length;
+
+	function count(errors) {
+		results.push.apply(results, errors);
+		total++;
+
+		if (total === arrLength) {
+			callback(results);
+		}
+	}
+
+	arr.forEach(function(a) {
+		func(a, count);
+	});
+}
+
+function asyncSerialArray(arr, func, callback) {
+	var index = 0;
+	var arrLength = arr.length;
+
+	function next(errors) {
+		if (errors && errors.length) {
+			callback(errors);
+			return;
+		}
+
+		var original = index;
+		index = index + 1;
+
+		if (original < arrLength) {
+			func(arr[original], next);
+		} else {
+			callback([]);
+		}
+	}
+
+	next([]);
+}
+
+function flattenObjArr(objArr) {
+	var ret = [];
+	Object.keys(objArr).forEach(function(k) {
+		ret.push.apply(ret, objArr[k]);
+	});
+	return ret;
+}
+
+function asyncMap(objArr, option, func, callback) {
+	if (option.first) {
+		var _pending = new Promise(function(resolve, reject) {
+			var next = function next(errors) {
+				callback(errors);
+				return errors.length ? reject({
+					errors: errors,
+					fields: convertFieldsError(errors)
+				}) : resolve();
+			};
+
+			var flattenArr = flattenObjArr(objArr);
+			asyncSerialArray(flattenArr, func, next);
+		});
+
+		_pending["catch"](function(e) {
+			return e;
+		});
+
+		return _pending;
+	}
+
+	var firstFields = option.firstFields || [];
+
+	if (firstFields === true) {
+		firstFields = Object.keys(objArr);
+	}
+
+	var objArrKeys = Object.keys(objArr);
+	var objArrLength = objArrKeys.length;
+	var total = 0;
+	var results = [];
+	var pending = new Promise(function(resolve, reject) {
+		var next = function next(errors) {
+			results.push.apply(results, errors);
+			total++;
+
+			if (total === objArrLength) {
+				callback(results);
+				return results.length ? reject({
+					errors: results,
+					fields: convertFieldsError(results)
+				}) : resolve();
+			}
+		};
+
+		if (!objArrKeys.length) {
+			callback(results);
+			resolve();
+		}
+
+		objArrKeys.forEach(function(key) {
+			var arr = objArr[key];
+
+			if (firstFields.indexOf(key) !== -1) {
+				asyncSerialArray(arr, func, next);
+			} else {
+				asyncParallelArray(arr, func, next);
+			}
+		});
+	});
+	pending["catch"](function(e) {
+		return e;
+	});
+	return pending;
+}
+
+function complementError(rule) {
+	return function(oe) {
+		if (oe && oe.message) {
+			oe.field = oe.field || rule.fullField;
+			return oe;
+		}
+
+		return {
+			message: typeof oe === 'function' ? oe() : oe,
+			field: oe.field || rule.fullField
+		};
+	};
+}
+
+function deepMerge(target, source) {
+	if (source) {
+		for (var s in source) {
+			if (source.hasOwnProperty(s)) {
+				var value = source[s];
+
+				if (typeof value === 'object' && typeof target[s] === 'object') {
+					target[s] = _extends({}, target[s], {}, value);
+				} else {
+					target[s] = value;
+				}
+			}
+		}
+	}
+
+	return target;
+}
+
+/**
+ *  Rule for validating required fields.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function required(rule, value, source, errors, options, type) {
+	if (rule.required && (!source.hasOwnProperty(rule.field) || isEmptyValue(value, type || rule.type))) {
+		errors.push(format(options.messages.required, rule.fullField));
+	}
+}
+
+/**
+ *  Rule for validating whitespace.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function whitespace(rule, value, source, errors, options) {
+	if (/^\s+$/.test(value) || value === '') {
+		errors.push(format(options.messages.whitespace, rule.fullField));
+	}
+}
+
+/* eslint max-len:0 */
+
+var pattern = {
+	// http://emailregex.com/
+	email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+	url: new RegExp(
+		"^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$",
+		'i'),
+	hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
+};
+var types = {
+	integer: function integer(value) {
+		return types.number(value) && parseInt(value, 10) === value;
+	},
+	"float": function float(value) {
+		return types.number(value) && !types.integer(value);
+	},
+	array: function array(value) {
+		return Array.isArray(value);
+	},
+	regexp: function regexp(value) {
+		if (value instanceof RegExp) {
+			return true;
+		}
+
+		try {
+			return !!new RegExp(value);
+		} catch (e) {
+			return false;
+		}
+	},
+	date: function date(value) {
+		return typeof value.getTime === 'function' && typeof value.getMonth === 'function' && typeof value.getYear ===
+			'function';
+	},
+	number: function number(value) {
+		if (isNaN(value)) {
+			return false;
+		}
+
+		// 修改源码，将字符串数值先转为数值
+		return typeof +value === 'number';
+	},
+	object: function object(value) {
+		return typeof value === 'object' && !types.array(value);
+	},
+	method: function method(value) {
+		return typeof value === 'function';
+	},
+	email: function email(value) {
+		return typeof value === 'string' && !!value.match(pattern.email) && value.length < 255;
+	},
+	url: function url(value) {
+		return typeof value === 'string' && !!value.match(pattern.url);
+	},
+	hex: function hex(value) {
+		return typeof value === 'string' && !!value.match(pattern.hex);
+	}
+};
+/**
+ *  Rule for validating the type of a value.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function type(rule, value, source, errors, options) {
+	if (rule.required && value === undefined) {
+		required(rule, value, source, errors, options);
+		return;
+	}
+
+	var custom = ['integer', 'float', 'array', 'regexp', 'object', 'method', 'email', 'number', 'date', 'url', 'hex'];
+	var ruleType = rule.type;
+
+	if (custom.indexOf(ruleType) > -1) {
+		if (!types[ruleType](value)) {
+			errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+		} // straight typeof check
+
+	} else if (ruleType && typeof value !== rule.type) {
+		errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+	}
+}
+
+/**
+ *  Rule for validating minimum and maximum allowed values.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function range(rule, value, source, errors, options) {
+	var len = typeof rule.len === 'number';
+	var min = typeof rule.min === 'number';
+	var max = typeof rule.max === 'number'; // 正则匹配码点范围从U+010000一直到U+10FFFF的文字（补充平面Supplementary Plane）
+
+	var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+	var val = value;
+	var key = null;
+	var num = typeof value === 'number';
+	var str = typeof value === 'string';
+	var arr = Array.isArray(value);
+
+	if (num) {
+		key = 'number';
+	} else if (str) {
+		key = 'string';
+	} else if (arr) {
+		key = 'array';
+	} // if the value is not of a supported type for range validation
+	// the validation rule rule should use the
+	// type property to also test for a particular type
+
+
+	if (!key) {
+		return false;
+	}
+
+	if (arr) {
+		val = value.length;
+	}
+
+	if (str) {
+		// 处理码点大于U+010000的文字length属性不准确的bug，如"𠮷𠮷𠮷".lenght !== 3
+		val = value.replace(spRegexp, '_').length;
+	}
+
+	if (len) {
+		if (val !== rule.len) {
+			errors.push(format(options.messages[key].len, rule.fullField, rule.len));
+		}
+	} else if (min && !max && val < rule.min) {
+		errors.push(format(options.messages[key].min, rule.fullField, rule.min));
+	} else if (max && !min && val > rule.max) {
+		errors.push(format(options.messages[key].max, rule.fullField, rule.max));
+	} else if (min && max && (val < rule.min || val > rule.max)) {
+		errors.push(format(options.messages[key].range, rule.fullField, rule.min, rule.max));
+	}
+}
+
+var ENUM = 'enum';
+/**
+ *  Rule for validating a value exists in an enumerable list.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function enumerable(rule, value, source, errors, options) {
+	rule[ENUM] = Array.isArray(rule[ENUM]) ? rule[ENUM] : [];
+
+	if (rule[ENUM].indexOf(value) === -1) {
+		errors.push(format(options.messages[ENUM], rule.fullField, rule[ENUM].join(', ')));
+	}
+}
+
+/**
+ *  Rule for validating a regular expression pattern.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function pattern$1(rule, value, source, errors, options) {
+	if (rule.pattern) {
+		if (rule.pattern instanceof RegExp) {
+			// if a RegExp instance is passed, reset `lastIndex` in case its `global`
+			// flag is accidentally set to `true`, which in a validation scenario
+			// is not necessary and the result might be misleading
+			rule.pattern.lastIndex = 0;
+
+			if (!rule.pattern.test(value)) {
+				errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
+			}
+		} else if (typeof rule.pattern === 'string') {
+			var _pattern = new RegExp(rule.pattern);
+
+			if (!_pattern.test(value)) {
+				errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
+			}
+		}
+	}
+}
+
+var rules = {
+	required: required,
+	whitespace: whitespace,
+	type: type,
+	range: range,
+	"enum": enumerable,
+	pattern: pattern$1
+};
+
+/**
+ *  Performs validation for string types.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function string(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'string') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, 'string');
+
+		if (!isEmptyValue(value, 'string')) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+			rules.pattern(rule, value, source, errors, options);
+
+			if (rule.whitespace === true) {
+				rules.whitespace(rule, value, source, errors, options);
+			}
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a function.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function method(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function number(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (value === '') {
+			value = undefined;
+		}
+
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a boolean.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function _boolean(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates the regular expression type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function regexp(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value)) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number is an integer.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function integer(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number is a floating point number.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function floatFn(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates an array.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function array(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'array') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, 'array');
+
+		if (!isEmptyValue(value, 'array')) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates an object.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function object(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+var ENUM$1 = 'enum';
+/**
+ *  Validates an enumerable list.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function enumerable$1(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules[ENUM$1](rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a regular expression pattern.
+ *
+ *  Performs validation when a rule only contains
+ *  a pattern property but is not declared as a string type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function pattern$2(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, 'string') && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value, 'string')) {
+			rules.pattern(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+function date(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field); 
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value)) {
+			var dateObject;
+
+			if (typeof value === 'number') {
+				dateObject = new Date(value);
+			} else {
+				dateObject = value;
+			}
+
+			rules.type(rule, dateObject, source, errors, options);
+
+			if (dateObject) {
+				rules.range(rule, dateObject.getTime(), source, errors, options);
+			}
+		}
+	}
+
+	callback(errors);
+}
+
+function required$1(rule, value, callback, source, options) {
+	var errors = [];
+	var type = Array.isArray(value) ? 'array' : typeof value;
+	rules.required(rule, value, source, errors, options, type);
+	callback(errors);
+}
+
+function type$1(rule, value, callback, source, options) {
+	var ruleType = rule.type;
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value, ruleType) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, ruleType);
+
+		if (!isEmptyValue(value, ruleType)) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Performs validation for any type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function any(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+	}
+
+	callback(errors);
+}
+
+var validators = {
+	string: string,
+	method: method,
+	number: number,
+	"boolean": _boolean,
+	regexp: regexp,
+	integer: integer,
+	"float": floatFn,
+	array: array,
+	object: object,
+	"enum": enumerable$1,
+	pattern: pattern$2,
+	date: date,
+	url: type$1,
+	hex: type$1,
+	email: type$1,
+	required: required$1,
+	any: any
+};
+
+function newMessages() {
+	return {
+		"default": 'Validation error on field %s',
+		required: '%s is required',
+		"enum": '%s must be one of %s',
+		whitespace: '%s cannot be empty',
+		date: {
+			format: '%s date %s is invalid for format %s',
+			parse: '%s date could not be parsed, %s is invalid ',
+			invalid: '%s date %s is invalid'
+		},
+		types: {
+			string: '%s is not a %s',
+			method: '%s is not a %s (function)',
+			array: '%s is not an %s',
+			object: '%s is not an %s',
+			number: '%s is not a %s',
+			date: '%s is not a %s',
+			"boolean": '%s is not a %s',
+			integer: '%s is not an %s',
+			"float": '%s is not a %s',
+			regexp: '%s is not a valid %s',
+			email: '%s is not a valid %s',
+			url: '%s is not a valid %s',
+			hex: '%s is not a valid %s'
+		},
+		string: {
+			len: '%s must be exactly %s characters',
+			min: '%s must be at least %s characters',
+			max: '%s cannot be longer than %s characters',
+			range: '%s must be between %s and %s characters'
+		},
+		number: {
+			len: '%s must equal %s',
+			min: '%s cannot be less than %s',
+			max: '%s cannot be greater than %s',
+			range: '%s must be between %s and %s'
+		},
+		array: {
+			len: '%s must be exactly %s in length',
+			min: '%s cannot be less than %s in length',
+			max: '%s cannot be greater than %s in length',
+			range: '%s must be between %s and %s in length'
+		},
+		pattern: {
+			mismatch: '%s value %s does not match pattern %s'
+		},
+		clone: function clone() {
+			var cloned = JSON.parse(JSON.stringify(this));
+			cloned.clone = this.clone;
+			return cloned;
+		}
+	};
+}
+var messages = newMessages();
+
+/**
+ *  Encapsulates a validation schema.
+ *
+ *  @param descriptor An object declaring validation rules
+ *  for this schema.
+ */
+
+function Schema(descriptor) {
+	this.rules = null;
+	this._messages = messages;
+	this.define(descriptor);
+}
+
+Schema.prototype = {
+	messages: function messages(_messages) {
+		if (_messages) {
+			this._messages = deepMerge(newMessages(), _messages);
+		}
+
+		return this._messages;
+	},
+	define: function define(rules) {
+		if (!rules) {
+			throw new Error('Cannot configure a schema with no rules');
+		}
+
+		if (typeof rules !== 'object' || Array.isArray(rules)) {
+			throw new Error('Rules must be an object');
+		}
+
+		this.rules = {};
+		var z;
+		var item;
+
+		for (z in rules) {
+			if (rules.hasOwnProperty(z)) {
+				item = rules[z];
+				this.rules[z] = Array.isArray(item) ? item : [item];
+			}
+		}
+	},
+	validate: function validate(source_, o, oc) {
+		var _this = this;
+
+		if (o === void 0) {
+			o = {};
+		}
+
+		if (oc === void 0) {
+			oc = function oc() {};
+		}
+
+		var source = source_;
+		var options = o;
+		var callback = oc;
+
+		if (typeof options === 'function') {
+			callback = options;
+			options = {};
+		}
+
+		if (!this.rules || Object.keys(this.rules).length === 0) {
+			if (callback) {
+				callback();
+			}
+
+			return Promise.resolve();
+		}
+
+		function complete(results) {
+			var i;
+			var errors = [];
+			var fields = {};
+
+			function add(e) {
+				if (Array.isArray(e)) {
+					var _errors;
+
+					errors = (_errors = errors).concat.apply(_errors, e);
+				} else {
+					errors.push(e);
+				}
+			}
+
+			for (i = 0; i < results.length; i++) {
+				add(results[i]);
+			}
+
+			if (!errors.length) {
+				errors = null;
+				fields = null;
+			} else {
+				fields = convertFieldsError(errors);
+			}
+
+			callback(errors, fields);
+		}
+
+		if (options.messages) {
+			var messages$1 = this.messages();
+
+			if (messages$1 === messages) {
+				messages$1 = newMessages();
+			}
+
+			deepMerge(messages$1, options.messages);
+			options.messages = messages$1;
+		} else {
+			options.messages = this.messages();
+		}
+
+		var arr;
+		var value;
+		var series = {};
+		var keys = options.keys || Object.keys(this.rules);
+		keys.forEach(function(z) {
+			arr = _this.rules[z];
+			value = source[z];
+			arr.forEach(function(r) {
+				var rule = r;
+
+				if (typeof rule.transform === 'function') {
+					if (source === source_) {
+						source = _extends({}, source);
+					}
+
+					value = source[z] = rule.transform(value);
+				}
+
+				if (typeof rule === 'function') {
+					rule = {
+						validator: rule
+					};
+				} else {
+					rule = _extends({}, rule);
+				}
+
+				rule.validator = _this.getValidationMethod(rule);
+				rule.field = z;
+				rule.fullField = rule.fullField || z;
+				rule.type = _this.getType(rule);
+
+				if (!rule.validator) {
+					return;
+				}
+
+				series[z] = series[z] || [];
+				series[z].push({
+					rule: rule,
+					value: value,
+					source: source,
+					field: z
+				});
+			});
+		});
+		var errorFields = {};
+		return asyncMap(series, options, function(data, doIt) {
+			var rule = data.rule;
+			var deep = (rule.type === 'object' || rule.type === 'array') && (typeof rule.fields === 'object' || typeof rule.defaultField ===
+				'object');
+			deep = deep && (rule.required || !rule.required && data.value);
+			rule.field = data.field;
+
+			function addFullfield(key, schema) {
+				return _extends({}, schema, {
+					fullField: rule.fullField + "." + key
+				});
+			}
+
+			function cb(e) {
+				if (e === void 0) {
+					e = [];
+				}
+
+				var errors = e;
+
+				if (!Array.isArray(errors)) {
+					errors = [errors];
+				}
+
+				if (!options.suppressWarning && errors.length) {
+					Schema.warning('async-validator:', errors);
+				}
+
+				if (errors.length && rule.message) {
+					errors = [].concat(rule.message);
+				}
+
+				errors = errors.map(complementError(rule));
+
+				if (options.first && errors.length) {
+					errorFields[rule.field] = 1;
+					return doIt(errors);
+				}
+
+				if (!deep) {
+					doIt(errors);
+				} else {
+					// if rule is required but the target object
+					// does not exist fail at the rule level and don't
+					// go deeper
+					if (rule.required && !data.value) {
+						if (rule.message) {
+							errors = [].concat(rule.message).map(complementError(rule));
+						} else if (options.error) {
+							errors = [options.error(rule, format(options.messages.required, rule.field))];
+						} else {
+							errors = [];
+						}
+
+						return doIt(errors);
+					}
+
+					var fieldsSchema = {};
+
+					if (rule.defaultField) {
+						for (var k in data.value) {
+							if (data.value.hasOwnProperty(k)) {
+								fieldsSchema[k] = rule.defaultField;
+							}
+						}
+					}
+
+					fieldsSchema = _extends({}, fieldsSchema, {}, data.rule.fields);
+
+					for (var f in fieldsSchema) {
+						if (fieldsSchema.hasOwnProperty(f)) {
+							var fieldSchema = Array.isArray(fieldsSchema[f]) ? fieldsSchema[f] : [fieldsSchema[f]];
+							fieldsSchema[f] = fieldSchema.map(addFullfield.bind(null, f));
+						}
+					}
+
+					var schema = new Schema(fieldsSchema);
+					schema.messages(options.messages);
+
+					if (data.rule.options) {
+						data.rule.options.messages = options.messages;
+						data.rule.options.error = options.error;
+					}
+
+					schema.validate(data.value, data.rule.options || options, function(errs) {
+						var finalErrors = [];
+
+						if (errors && errors.length) {
+							finalErrors.push.apply(finalErrors, errors);
+						}
+
+						if (errs && errs.length) {
+							finalErrors.push.apply(finalErrors, errs);
+						}
+
+						doIt(finalErrors.length ? finalErrors : null);
+					});
+				}
+			}
+
+			var res;
+
+			if (rule.asyncValidator) {
+				res = rule.asyncValidator(rule, data.value, cb, data.source, options);
+			} else if (rule.validator) {
+				res = rule.validator(rule, data.value, cb, data.source, options);
+
+				if (res === true) {
+					cb();
+				} else if (res === false) {
+					cb(rule.message || rule.field + " fails");
+				} else if (res instanceof Array) {
+					cb(res);
+				} else if (res instanceof Error) {
+					cb(res.message);
+				}
+			}
+
+			if (res && res.then) {
+				res.then(function() {
+					return cb();
+				}, function(e) {
+					return cb(e);
+				});
+			}
+		}, function(results) {
+			complete(results);
+		});
+	},
+	getType: function getType(rule) {
+		if (rule.type === undefined && rule.pattern instanceof RegExp) {
+			rule.type = 'pattern';
+		}
+
+		if (typeof rule.validator !== 'function' && rule.type && !validators.hasOwnProperty(rule.type)) {
+			throw new Error(format('Unknown rule type %s', rule.type));
+		}
+
+		return rule.type || 'string';
+	},
+	getValidationMethod: function getValidationMethod(rule) {
+		if (typeof rule.validator === 'function') {
+			return rule.validator;
+		}
+
+		var keys = Object.keys(rule);
+		var messageIndex = keys.indexOf('message');
+
+		if (messageIndex !== -1) {
+			keys.splice(messageIndex, 1);
+		}
+
+		if (keys.length === 1 && keys[0] === 'required') {
+			return validators.required;
+		}
+
+		return validators[this.getType(rule)] || false;
+	}
+};
+
+Schema.register = function register(type, validator) {
+	if (typeof validator !== 'function') {
+		throw new Error('Cannot register a validator by type, validator is not a function');
+	}
+
+	validators[type] = validator;
+};
+
+Schema.warning = warning;
+Schema.messages = messages;
+
+export default Schema;
+//# sourceMappingURL=index.js.map
diff --git a/tuniao-ui/libs/utils/calendar.js b/tuniao-ui/libs/utils/calendar.js
new file mode 100644
index 0000000..da1456a
--- /dev/null
+++ b/tuniao-ui/libs/utils/calendar.js
@@ -0,0 +1,546 @@
+/**
+* @1900-2100区间内的公历、农历互转
+* @charset UTF-8
+* @github  https://github.com/jjonline/calendar.js
+* @Author  Jea杨(JJonline@JJonline.Cn)
+* @Time    2014-7-21
+* @Time    2016-8-13 Fixed 2033hex、Attribution Annals
+* @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
+* @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
+* @Version 1.0.3
+* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
+* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
+*/
+/* eslint-disable */
+var calendar = {
+
+    /**
+        * 农历1900-2100的润大小信息表
+        * @Array Of Property
+        * @return Hex
+        */
+    lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
+        0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
+        0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
+        0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
+        0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
+        0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
+        0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
+        0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
+        0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
+        0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
+        0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
+        0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
+        0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
+        0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
+        0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
+        /** Add By JJonline@JJonline.Cn**/
+        0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
+        0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
+        0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
+        0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
+        0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
+        0x0d520], // 2100
+
+    /**
+        * 公历每个月份的天数普通表
+        * @Array Of Property
+        * @return Number
+        */
+    solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+
+    /**
+        * 天干地支之天干速查表
+        * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+        * @return Cn string
+        */
+    Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
+
+    /**
+        * 天干地支之地支速查表
+        * @Array Of Property
+        * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+        * @return Cn string
+        */
+    Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
+
+    /**
+        * 天干地支之地支速查表<=>生肖
+        * @Array Of Property
+        * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+        * @return Cn string
+        */
+    Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
+
+    /**
+        * 24节气速查表
+        * @Array Of Property
+        * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+        * @return Cn string
+        */
+    solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
+
+    /**
+        * 1900-2100各年的24节气日期速查表
+        * @Array Of Property
+        * @return 0x string For splice
+        */
+    sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
+        '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
+        'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
+        '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
+        '97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
+        '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
+        '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
+        '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+        '97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
+        '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
+        '97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+        '9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
+        '97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
+        '97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+        '9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
+        '977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
+        '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
+        '977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
+        '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
+        '7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
+        '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
+        '7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
+        '7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
+        '7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
+        '665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
+        '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
+
+    /**
+        * 数字转中文速查表
+        * @Array Of Property
+        * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+        * @return Cn string
+        */
+    nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
+
+    /**
+        * 日期转农历称呼速查表
+        * @Array Of Property
+        * @trans ['初','十','廿','卅']
+        * @return Cn string
+        */
+    nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
+
+    /**
+        * 月份转农历称呼速查表
+        * @Array Of Property
+        * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+        * @return Cn string
+        */
+    nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
+
+    /**
+        * 返回农历y年一整年的总天数
+        * @param lunar Year
+        * @return Number
+        * @eg:var count = calendar.lYearDays(1987) ;//count=387
+        */
+    lYearDays: function (y) {
+        var i; var sum = 348
+        for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
+        return (sum + this.leapDays(y))
+    },
+
+    /**
+        * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+        * @param lunar Year
+        * @return Number (0-12)
+        * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+        */
+    leapMonth: function (y) { // 闰字编码 \u95f0
+        return (this.lunarInfo[y - 1900] & 0xf)
+    },
+
+    /**
+        * 返回农历y年闰月的天数 若该年没有闰月则返回0
+        * @param lunar Year
+        * @return Number (0、29、30)
+        * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+        */
+    leapDays: function (y) {
+        if (this.leapMonth(y)) {
+            return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
+        }
+        return (0)
+    },
+
+    /**
+        * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+        * @param lunar Year
+        * @return Number (-1、29、30)
+        * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+        */
+    monthDays: function (y, m) {
+        if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
+        return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
+    },
+
+    /**
+        * 返回公历(!)y年m月的天数
+        * @param solar Year
+        * @return Number (-1、28、29、30、31)
+        * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+        */
+    solarDays: function (y, m) {
+        if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+        var ms = m - 1
+        if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
+            return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
+        } else {
+            return (this.solarMonth[ms])
+        }
+    },
+
+    /**
+       * 农历年份转换为干支纪年
+       * @param  lYear 农历年的年份数
+       * @return Cn string
+       */
+    toGanZhiYear: function (lYear) {
+        var ganKey = (lYear - 3) % 10
+        var zhiKey = (lYear - 3) % 12
+        if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
+        if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
+        return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
+    },
+
+    /**
+       * 公历月、日判断所属星座
+       * @param  cMonth [description]
+       * @param  cDay [description]
+       * @return Cn string
+       */
+    toAstro: function (cMonth, cDay) {
+        var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
+        var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
+        return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
+    },
+
+    /**
+        * 传入offset偏移量返回干支
+        * @param offset 相对甲子的偏移量
+        * @return Cn string
+        */
+    toGanZhi: function (offset) {
+        return this.Gan[offset % 10] + this.Zhi[offset % 12]
+    },
+
+    /**
+        * 传入公历(!)y年获得该年第n个节气的公历日期
+        * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+        * @return day Number
+        * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+        */
+    getTerm: function (y, n) {
+        if (y < 1900 || y > 2100) { return -1 }
+        if (n < 1 || n > 24) { return -1 }
+        var _table = this.sTermInfo[y - 1900]
+        var _info = [
+            parseInt('0x' + _table.substr(0, 5)).toString(),
+            parseInt('0x' + _table.substr(5, 5)).toString(),
+            parseInt('0x' + _table.substr(10, 5)).toString(),
+            parseInt('0x' + _table.substr(15, 5)).toString(),
+            parseInt('0x' + _table.substr(20, 5)).toString(),
+            parseInt('0x' + _table.substr(25, 5)).toString()
+        ]
+        var _calday = [
+            _info[0].substr(0, 1),
+            _info[0].substr(1, 2),
+            _info[0].substr(3, 1),
+            _info[0].substr(4, 2),
+
+            _info[1].substr(0, 1),
+            _info[1].substr(1, 2),
+            _info[1].substr(3, 1),
+            _info[1].substr(4, 2),
+
+            _info[2].substr(0, 1),
+            _info[2].substr(1, 2),
+            _info[2].substr(3, 1),
+            _info[2].substr(4, 2),
+
+            _info[3].substr(0, 1),
+            _info[3].substr(1, 2),
+            _info[3].substr(3, 1),
+            _info[3].substr(4, 2),
+
+            _info[4].substr(0, 1),
+            _info[4].substr(1, 2),
+            _info[4].substr(3, 1),
+            _info[4].substr(4, 2),
+
+            _info[5].substr(0, 1),
+            _info[5].substr(1, 2),
+            _info[5].substr(3, 1),
+            _info[5].substr(4, 2)
+        ]
+        return parseInt(_calday[n - 1])
+    },
+
+    /**
+        * 传入农历数字月份返回汉语通俗表示法
+        * @param lunar month
+        * @return Cn string
+        * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+        */
+    toChinaMonth: function (m) { // 月 => \u6708
+        if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
+        var s = this.nStr3[m - 1]
+        s += '\u6708'// 加上月字
+        return s
+    },
+
+    /**
+        * 传入农历日期数字返回汉字表示法
+        * @param lunar day
+        * @return Cn string
+        * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+        */
+    toChinaDay: function (d) { // 日 => \u65e5
+        var s
+        switch (d) {
+            case 10:
+                s = '\u521d\u5341'; break
+            case 20:
+                s = '\u4e8c\u5341'; break
+                break
+            case 30:
+                s = '\u4e09\u5341'; break
+                break
+            default:
+                s = this.nStr2[Math.floor(d / 10)]
+                s += this.nStr1[d % 10]
+        }
+        return (s)
+    },
+
+    /**
+        * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+        * @param y year
+        * @return Cn string
+        * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
+        */
+    getAnimal: function (y) {
+        return this.Animals[(y - 4) % 12]
+    },
+
+    /**
+        * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+        * @param y  solar year
+        * @param m  solar month
+        * @param d  solar day
+        * @return JSON object
+        * @eg:console.log(calendar.solar2lunar(1987,11,01));
+        */
+    solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
+        // 年份限定、上限
+        if (y < 1900 || y > 2100) {
+            return -1// undefined转换为数字变为NaN
+        }
+        // 公历传参最下限
+        if (y == 1900 && m == 1 && d < 31) {
+            return -1
+        }
+        // 未传参  获得当天
+        if (!y) {
+            var objDate = new Date()
+        } else {
+            var objDate = new Date(y, parseInt(m) - 1, d)
+        }
+        var i; var leap = 0; var temp = 0
+        // 修正ymd参数
+        var y = objDate.getFullYear()
+        var m = objDate.getMonth() + 1
+        var d = objDate.getDate()
+        var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
+        for (i = 1900; i < 2101 && offset > 0; i++) {
+            temp = this.lYearDays(i)
+            offset -= temp
+        }
+        if (offset < 0) {
+            offset += temp; i--
+        }
+
+        // 是否今天
+        var isTodayObj = new Date()
+        var isToday = false
+        if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
+            isToday = true
+        }
+        // 星期几
+        var nWeek = objDate.getDay()
+        var cWeek = this.nStr1[nWeek]
+        // 数字表示周几顺应天朝周一开始的惯例
+        if (nWeek == 0) {
+            nWeek = 7
+        }
+        // 农历年
+        var year = i
+        var leap = this.leapMonth(i) // 闰哪个月
+        var isLeap = false
+
+        // 效验闰月
+        for (i = 1; i < 13 && offset > 0; i++) {
+            // 闰月
+            if (leap > 0 && i == (leap + 1) && isLeap == false) {
+                --i
+                isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
+            } else {
+                temp = this.monthDays(year, i)// 计算农历普通月天数
+            }
+            // 解除闰月
+            if (isLeap == true && i == (leap + 1)) { isLeap = false }
+            offset -= temp
+        }
+        // 闰月导致数组下标重叠取反
+        if (offset == 0 && leap > 0 && i == leap + 1) {
+            if (isLeap) {
+                isLeap = false
+            } else {
+                isLeap = true; --i
+            }
+        }
+        if (offset < 0) {
+            offset += temp; --i
+        }
+        // 农历月
+        var month = i
+        // 农历日
+        var day = offset + 1
+        // 天干地支处理
+        var sm = m - 1
+        var gzY = this.toGanZhiYear(year)
+
+        // 当月的两个节气
+        // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
+        var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
+        var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
+
+        // 依据12节气修正干支月
+        var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
+        if (d >= firstNode) {
+            gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
+        }
+
+        // 传入的日期的节气与否
+        var isTerm = false
+        var Term = null
+        if (firstNode == d) {
+            isTerm = true
+            Term = this.solarTerm[m * 2 - 2]
+        }
+        if (secondNode == d) {
+            isTerm = true
+            Term = this.solarTerm[m * 2 - 1]
+        }
+        // 日柱 当月一日与 1900/1/1 相差天数
+        var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
+        var gzD = this.toGanZhi(dayCyclical + d - 1)
+        // 该日期所属的星座
+        var astro = this.toAstro(m, d)
+
+        return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
+    },
+
+    /**
+        * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+        * @param y  lunar year
+        * @param m  lunar month
+        * @param d  lunar day
+        * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+        * @return JSON object
+        * @eg:console.log(calendar.lunar2solar(1987,9,10));
+        */
+    lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
+        var isLeapMonth = !!isLeapMonth
+        var leapOffset = 0
+        var leapMonth = this.leapMonth(y)
+        var leapDay = this.leapDays(y)
+        if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+        if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
+        var day = this.monthDays(y, m)
+        var _day = day
+        // bugFix 2016-9-25
+        // if month is leap, _day use leapDays method
+        if (isLeapMonth) {
+            _day = this.leapDays(y, m)
+        }
+        if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
+
+        // 计算农历的时间差
+        var offset = 0
+        for (var i = 1900; i < y; i++) {
+            offset += this.lYearDays(i)
+        }
+        var leap = 0; var isAdd = false
+        for (var i = 1; i < m; i++) {
+            leap = this.leapMonth(y)
+            if (!isAdd) { // 处理闰月
+                if (leap <= i && leap > 0) {
+                    offset += this.leapDays(y); isAdd = true
+                }
+            }
+            offset += this.monthDays(y, i)
+        }
+        // 转换闰月农历 需补充该年闰月的前一个月的时差
+        if (isLeapMonth) { offset += day }
+        // 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+        var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
+        var calObj = new Date((offset + d - 31) * 86400000 + stmap)
+        var cY = calObj.getUTCFullYear()
+        var cM = calObj.getUTCMonth() + 1
+        var cD = calObj.getUTCDate()
+
+        return this.solar2lunar(cY, cM, cD)
+    }
+}
+
+export default calendar
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/city.js b/tuniao-ui/libs/utils/city.js
new file mode 100644
index 0000000..94169eb
--- /dev/null
+++ b/tuniao-ui/libs/utils/city.js
@@ -0,0 +1 @@
+var cityData=[[{"label":"市辖区","value":"1101"}],[{"label":"市辖区","value":"1201"}],[{"label":"石家庄市","value":"1301"},{"label":"唐山市","value":"1302"},{"label":"秦皇岛市","value":"1303"},{"label":"邯郸市","value":"1304"},{"label":"邢台市","value":"1305"},{"label":"保定市","value":"1306"},{"label":"张家口市","value":"1307"},{"label":"承德市","value":"1308"},{"label":"沧州市","value":"1309"},{"label":"廊坊市","value":"1310"},{"label":"衡水市","value":"1311"}],[{"label":"太原市","value":"1401"},{"label":"大同市","value":"1402"},{"label":"阳泉市","value":"1403"},{"label":"长治市","value":"1404"},{"label":"晋城市","value":"1405"},{"label":"朔州市","value":"1406"},{"label":"晋中市","value":"1407"},{"label":"运城市","value":"1408"},{"label":"忻州市","value":"1409"},{"label":"临汾市","value":"1410"},{"label":"吕梁市","value":"1411"}],[{"label":"呼和浩特市","value":"1501"},{"label":"包头市","value":"1502"},{"label":"乌海市","value":"1503"},{"label":"赤峰市","value":"1504"},{"label":"通辽市","value":"1505"},{"label":"鄂尔多斯市","value":"1506"},{"label":"呼伦贝尔市","value":"1507"},{"label":"巴彦淖尔市","value":"1508"},{"label":"乌兰察布市","value":"1509"},{"label":"兴安盟","value":"1522"},{"label":"锡林郭勒盟","value":"1525"},{"label":"阿拉善盟","value":"1529"}],[{"label":"沈阳市","value":"2101"},{"label":"大连市","value":"2102"},{"label":"鞍山市","value":"2103"},{"label":"抚顺市","value":"2104"},{"label":"本溪市","value":"2105"},{"label":"丹东市","value":"2106"},{"label":"锦州市","value":"2107"},{"label":"营口市","value":"2108"},{"label":"阜新市","value":"2109"},{"label":"辽阳市","value":"2110"},{"label":"盘锦市","value":"2111"},{"label":"铁岭市","value":"2112"},{"label":"朝阳市","value":"2113"},{"label":"葫芦岛市","value":"2114"}],[{"label":"长春市","value":"2201"},{"label":"吉林市","value":"2202"},{"label":"四平市","value":"2203"},{"label":"辽源市","value":"2204"},{"label":"通化市","value":"2205"},{"label":"白山市","value":"2206"},{"label":"松原市","value":"2207"},{"label":"白城市","value":"2208"},{"label":"延边朝鲜族自治州","value":"2224"}],[{"label":"哈尔滨市","value":"2301"},{"label":"齐齐哈尔市","value":"2302"},{"label":"鸡西市","value":"2303"},{"label":"鹤岗市","value":"2304"},{"label":"双鸭山市","value":"2305"},{"label":"大庆市","value":"2306"},{"label":"伊春市","value":"2307"},{"label":"佳木斯市","value":"2308"},{"label":"七台河市","value":"2309"},{"label":"牡丹江市","value":"2310"},{"label":"黑河市","value":"2311"},{"label":"绥化市","value":"2312"},{"label":"大兴安岭地区","value":"2327"}],[{"label":"市辖区","value":"3101"}],[{"label":"南京市","value":"3201"},{"label":"无锡市","value":"3202"},{"label":"徐州市","value":"3203"},{"label":"常州市","value":"3204"},{"label":"苏州市","value":"3205"},{"label":"南通市","value":"3206"},{"label":"连云港市","value":"3207"},{"label":"淮安市","value":"3208"},{"label":"盐城市","value":"3209"},{"label":"扬州市","value":"3210"},{"label":"镇江市","value":"3211"},{"label":"泰州市","value":"3212"},{"label":"宿迁市","value":"3213"}],[{"label":"杭州市","value":"3301"},{"label":"宁波市","value":"3302"},{"label":"温州市","value":"3303"},{"label":"嘉兴市","value":"3304"},{"label":"湖州市","value":"3305"},{"label":"绍兴市","value":"3306"},{"label":"金华市","value":"3307"},{"label":"衢州市","value":"3308"},{"label":"舟山市","value":"3309"},{"label":"台州市","value":"3310"},{"label":"丽水市","value":"3311"}],[{"label":"合肥市","value":"3401"},{"label":"芜湖市","value":"3402"},{"label":"蚌埠市","value":"3403"},{"label":"淮南市","value":"3404"},{"label":"马鞍山市","value":"3405"},{"label":"淮北市","value":"3406"},{"label":"铜陵市","value":"3407"},{"label":"安庆市","value":"3408"},{"label":"黄山市","value":"3410"},{"label":"滁州市","value":"3411"},{"label":"阜阳市","value":"3412"},{"label":"宿州市","value":"3413"},{"label":"六安市","value":"3415"},{"label":"亳州市","value":"3416"},{"label":"池州市","value":"3417"},{"label":"宣城市","value":"3418"}],[{"label":"福州市","value":"3501"},{"label":"厦门市","value":"3502"},{"label":"莆田市","value":"3503"},{"label":"三明市","value":"3504"},{"label":"泉州市","value":"3505"},{"label":"漳州市","value":"3506"},{"label":"南平市","value":"3507"},{"label":"龙岩市","value":"3508"},{"label":"宁德市","value":"3509"}],[{"label":"南昌市","value":"3601"},{"label":"景德镇市","value":"3602"},{"label":"萍乡市","value":"3603"},{"label":"九江市","value":"3604"},{"label":"新余市","value":"3605"},{"label":"鹰潭市","value":"3606"},{"label":"赣州市","value":"3607"},{"label":"吉安市","value":"3608"},{"label":"宜春市","value":"3609"},{"label":"抚州市","value":"3610"},{"label":"上饶市","value":"3611"}],[{"label":"济南市","value":"3701"},{"label":"青岛市","value":"3702"},{"label":"淄博市","value":"3703"},{"label":"枣庄市","value":"3704"},{"label":"东营市","value":"3705"},{"label":"烟台市","value":"3706"},{"label":"潍坊市","value":"3707"},{"label":"济宁市","value":"3708"},{"label":"泰安市","value":"3709"},{"label":"威海市","value":"3710"},{"label":"日照市","value":"3711"},{"label":"莱芜市","value":"3712"},{"label":"临沂市","value":"3713"},{"label":"德州市","value":"3714"},{"label":"聊城市","value":"3715"},{"label":"滨州市","value":"3716"},{"label":"菏泽市","value":"3717"}],[{"label":"郑州市","value":"4101"},{"label":"开封市","value":"4102"},{"label":"洛阳市","value":"4103"},{"label":"平顶山市","value":"4104"},{"label":"安阳市","value":"4105"},{"label":"鹤壁市","value":"4106"},{"label":"新乡市","value":"4107"},{"label":"焦作市","value":"4108"},{"label":"濮阳市","value":"4109"},{"label":"许昌市","value":"4110"},{"label":"漯河市","value":"4111"},{"label":"三门峡市","value":"4112"},{"label":"南阳市","value":"4113"},{"label":"商丘市","value":"4114"},{"label":"信阳市","value":"4115"},{"label":"周口市","value":"4116"},{"label":"驻马店市","value":"4117"},{"label":"省直辖县级行政区划","value":"4190"}],[{"label":"武汉市","value":"4201"},{"label":"黄石市","value":"4202"},{"label":"十堰市","value":"4203"},{"label":"宜昌市","value":"4205"},{"label":"襄阳市","value":"4206"},{"label":"鄂州市","value":"4207"},{"label":"荆门市","value":"4208"},{"label":"孝感市","value":"4209"},{"label":"荆州市","value":"4210"},{"label":"黄冈市","value":"4211"},{"label":"咸宁市","value":"4212"},{"label":"随州市","value":"4213"},{"label":"恩施土家族苗族自治州","value":"4228"},{"label":"省直辖县级行政区划","value":"4290"}],[{"label":"长沙市","value":"4301"},{"label":"株洲市","value":"4302"},{"label":"湘潭市","value":"4303"},{"label":"衡阳市","value":"4304"},{"label":"邵阳市","value":"4305"},{"label":"岳阳市","value":"4306"},{"label":"常德市","value":"4307"},{"label":"张家界市","value":"4308"},{"label":"益阳市","value":"4309"},{"label":"郴州市","value":"4310"},{"label":"永州市","value":"4311"},{"label":"怀化市","value":"4312"},{"label":"娄底市","value":"4313"},{"label":"湘西土家族苗族自治州","value":"4331"}],[{"label":"广州市","value":"4401"},{"label":"韶关市","value":"4402"},{"label":"深圳市","value":"4403"},{"label":"珠海市","value":"4404"},{"label":"汕头市","value":"4405"},{"label":"佛山市","value":"4406"},{"label":"江门市","value":"4407"},{"label":"湛江市","value":"4408"},{"label":"茂名市","value":"4409"},{"label":"肇庆市","value":"4412"},{"label":"惠州市","value":"4413"},{"label":"梅州市","value":"4414"},{"label":"汕尾市","value":"4415"},{"label":"河源市","value":"4416"},{"label":"阳江市","value":"4417"},{"label":"清远市","value":"4418"},{"label":"东莞市","value":"4419"},{"label":"中山市","value":"4420"},{"label":"潮州市","value":"4451"},{"label":"揭阳市","value":"4452"},{"label":"云浮市","value":"4453"}],[{"label":"南宁市","value":"4501"},{"label":"柳州市","value":"4502"},{"label":"桂林市","value":"4503"},{"label":"梧州市","value":"4504"},{"label":"北海市","value":"4505"},{"label":"防城港市","value":"4506"},{"label":"钦州市","value":"4507"},{"label":"贵港市","value":"4508"},{"label":"玉林市","value":"4509"},{"label":"百色市","value":"4510"},{"label":"贺州市","value":"4511"},{"label":"河池市","value":"4512"},{"label":"来宾市","value":"4513"},{"label":"崇左市","value":"4514"}],[{"label":"海口市","value":"4601"},{"label":"三亚市","value":"4602"},{"label":"三沙市","value":"4603"},{"label":"儋州市","value":"4604"},{"label":"省直辖县级行政区划","value":"4690"}],[{"label":"市辖区","value":"5001"},{"label":"县","value":"5002"}],[{"label":"成都市","value":"5101"},{"label":"自贡市","value":"5103"},{"label":"攀枝花市","value":"5104"},{"label":"泸州市","value":"5105"},{"label":"德阳市","value":"5106"},{"label":"绵阳市","value":"5107"},{"label":"广元市","value":"5108"},{"label":"遂宁市","value":"5109"},{"label":"内江市","value":"5110"},{"label":"乐山市","value":"5111"},{"label":"南充市","value":"5113"},{"label":"眉山市","value":"5114"},{"label":"宜宾市","value":"5115"},{"label":"广安市","value":"5116"},{"label":"达州市","value":"5117"},{"label":"雅安市","value":"5118"},{"label":"巴中市","value":"5119"},{"label":"资阳市","value":"5120"},{"label":"阿坝藏族羌族自治州","value":"5132"},{"label":"甘孜藏族自治州","value":"5133"},{"label":"凉山彝族自治州","value":"5134"}],[{"label":"贵阳市","value":"5201"},{"label":"六盘水市","value":"5202"},{"label":"遵义市","value":"5203"},{"label":"安顺市","value":"5204"},{"label":"毕节市","value":"5205"},{"label":"铜仁市","value":"5206"},{"label":"黔西南布依族苗族自治州","value":"5223"},{"label":"黔东南苗族侗族自治州","value":"5226"},{"label":"黔南布依族苗族自治州","value":"5227"}],[{"label":"昆明市","value":"5301"},{"label":"曲靖市","value":"5303"},{"label":"玉溪市","value":"5304"},{"label":"保山市","value":"5305"},{"label":"昭通市","value":"5306"},{"label":"丽江市","value":"5307"},{"label":"普洱市","value":"5308"},{"label":"临沧市","value":"5309"},{"label":"楚雄彝族自治州","value":"5323"},{"label":"红河哈尼族彝族自治州","value":"5325"},{"label":"文山壮族苗族自治州","value":"5326"},{"label":"西双版纳傣族自治州","value":"5328"},{"label":"大理白族自治州","value":"5329"},{"label":"德宏傣族景颇族自治州","value":"5331"},{"label":"怒江傈僳族自治州","value":"5333"},{"label":"迪庆藏族自治州","value":"5334"}],[{"label":"拉萨市","value":"5401"},{"label":"日喀则市","value":"5402"},{"label":"昌都市","value":"5403"},{"label":"林芝市","value":"5404"},{"label":"山南市","value":"5405"},{"label":"那曲地区","value":"5424"},{"label":"阿里地区","value":"5425"}],[{"label":"西安市","value":"6101"},{"label":"铜川市","value":"6102"},{"label":"宝鸡市","value":"6103"},{"label":"咸阳市","value":"6104"},{"label":"渭南市","value":"6105"},{"label":"延安市","value":"6106"},{"label":"汉中市","value":"6107"},{"label":"榆林市","value":"6108"},{"label":"安康市","value":"6109"},{"label":"商洛市","value":"6110"}],[{"label":"兰州市","value":"6201"},{"label":"嘉峪关市","value":"6202"},{"label":"金昌市","value":"6203"},{"label":"白银市","value":"6204"},{"label":"天水市","value":"6205"},{"label":"武威市","value":"6206"},{"label":"张掖市","value":"6207"},{"label":"平凉市","value":"6208"},{"label":"酒泉市","value":"6209"},{"label":"庆阳市","value":"6210"},{"label":"定西市","value":"6211"},{"label":"陇南市","value":"6212"},{"label":"临夏回族自治州","value":"6229"},{"label":"甘南藏族自治州","value":"6230"}],[{"label":"西宁市","value":"6301"},{"label":"海东市","value":"6302"},{"label":"海北藏族自治州","value":"6322"},{"label":"黄南藏族自治州","value":"6323"},{"label":"海南藏族自治州","value":"6325"},{"label":"果洛藏族自治州","value":"6326"},{"label":"玉树藏族自治州","value":"6327"},{"label":"海西蒙古族藏族自治州","value":"6328"}],[{"label":"银川市","value":"6401"},{"label":"石嘴山市","value":"6402"},{"label":"吴忠市","value":"6403"},{"label":"固原市","value":"6404"},{"label":"中卫市","value":"6405"}],[{"label":"乌鲁木齐市","value":"6501"},{"label":"克拉玛依市","value":"6502"},{"label":"吐鲁番市","value":"6504"},{"label":"哈密市","value":"6505"},{"label":"昌吉回族自治州","value":"6523"},{"label":"博尔塔拉蒙古自治州","value":"6527"},{"label":"巴音郭楞蒙古自治州","value":"6528"},{"label":"阿克苏地区","value":"6529"},{"label":"克孜勒苏柯尔克孜自治州","value":"6530"},{"label":"喀什地区","value":"6531"},{"label":"和田地区","value":"6532"},{"label":"伊犁哈萨克自治州","value":"6540"},{"label":"塔城地区","value":"6542"},{"label":"阿勒泰地区","value":"6543"},{"label":"自治区直辖县级行政区划","value":"6590"}],[{"label":"台北","value":"6601"},{"label":"高雄","value":"6602"},{"label":"基隆","value":"6603"},{"label":"台中","value":"6604"},{"label":"台南","value":"6605"},{"label":"新竹","value":"6606"},{"label":"嘉义","value":"6607"},{"label":"宜兰","value":"6608"},{"label":"桃园","value":"6609"},{"label":"苗栗","value":"6610"},{"label":"彰化","value":"6611"},{"label":"南投","value":"6612"},{"label":"云林","value":"6613"},{"label":"屏东","value":"6614"},{"label":"台东","value":"6615"},{"label":"花莲","value":"6616"},{"label":"澎湖","value":"6617"}],[{"label":"香港岛","value":"6701"},{"label":"九龙","value":"6702"},{"label":"新界","value":"6703"}],[{"label":"澳门半岛","value":"6801"},{"label":"氹仔岛","value":"6802"},{"label":"路环岛","value":"6803"},{"label":"路氹城","value":"6804"}]];export default cityData;
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/emitter.js b/tuniao-ui/libs/utils/emitter.js
new file mode 100644
index 0000000..7af43d2
--- /dev/null
+++ b/tuniao-ui/libs/utils/emitter.js
@@ -0,0 +1,55 @@
+/**
+ * 递归使用call方式 this指向
+ * 
+ * @param {String} componentName 需要查找的组件的名称
+ * @param {String} eventName 事件名称
+ * @param {Object} params 需要传递的参数
+ */
+function broadcast(componentName, eventName, params) {
+  // 循环子节点找到需要的节点，没有查找到就递归进行查找
+  this.$children.map(child => {
+    if (componentName === child.$options.name) {
+      child.$emit.apply(child, [eventName].concat(params))
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat(params))
+    }
+  })
+}
+
+export default {
+  methods: {
+    /**
+     * 派发 向上查找一个
+     * @param {Object} componentName 需要查找的组件的名称
+     * @param {Object} eventName 事件名称
+     * @param {Object} params 需要传递的参数
+     */
+    dispatch(componentName, eventName, params) {
+      // 找到最近父节点 $root 根节点
+      let parent = this.$parent || this.$root
+      // 获取当前实例的名称
+      let name = parent.$options.name
+      
+      // 当前存在节点并且当前节点没有名称或者名称不等于我们要查找的节点名称，则继续遍历
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent
+        if (parent) {
+          name = parent.$options.name
+        }
+      }
+      // 如果有节点则表示找到
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params))
+      }
+    },
+    /**
+     * 广播 向下查找多个
+     * @param {Object} componentName 需要查找的组件的名称
+     * @param {Object} eventName 事件名称
+     * @param {Object} params 需要传递的参数
+     */
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params)
+    }
+  }
+}
\ No newline at end of file
diff --git a/tuniao-ui/libs/utils/province.js b/tuniao-ui/libs/utils/province.js
new file mode 100644
index 0000000..436b190
--- /dev/null
+++ b/tuniao-ui/libs/utils/province.js
@@ -0,0 +1 @@
+var provinceData=[{"label":"北京市","value":"11"},{"label":"天津市","value":"12"},{"label":"河北省","value":"13"},{"label":"山西省","value":"14"},{"label":"内蒙古自治区","value":"15"},{"label":"辽宁省","value":"21"},{"label":"吉林省","value":"22"},{"label":"黑龙江省","value":"23"},{"label":"上海市","value":"31"},{"label":"江苏省","value":"32"},{"label":"浙江省","value":"33"},{"label":"安徽省","value":"34"},{"label":"福建省","value":"35"},{"label":"江西省","value":"36"},{"label":"山东省","value":"37"},{"label":"河南省","value":"41"},{"label":"湖北省","value":"42"},{"label":"湖南省","value":"43"},{"label":"广东省","value":"44"},{"label":"广西壮族自治区","value":"45"},{"label":"海南省","value":"46"},{"label":"重庆市","value":"50"},{"label":"四川省","value":"51"},{"label":"贵州省","value":"52"},{"label":"云南省","value":"53"},{"label":"西藏自治区","value":"54"},{"label":"陕西省","value":"61"},{"label":"甘肃省","value":"62"},{"label":"青海省","value":"63"},{"label":"宁夏回族自治区","value":"64"},{"label":"新疆维吾尔自治区","value":"65"},{"label":"台湾","value":"66"},{"label":"香港","value":"67"},{"label":"澳门","value":"68"}];export default provinceData;
\ No newline at end of file
diff --git a/tuniao-ui/theme.scss b/tuniao-ui/theme.scss
new file mode 100644
index 0000000..136a6ec
--- /dev/null
+++ b/tuniao-ui/theme.scss
@@ -0,0 +1,183 @@
+// 此文件为TuniaoUI的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
+// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
+// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
+
+// 组件配置
+$tn-form-item-height: 70rpx;
+
+
+// 主颜色
+$tn-main-color: #01BEFF;
+$tn-main-orange: #FBBD12;
+$tn-embellished-green: #00FFC6;
+$tn-embellished-yellow: #FFF00D;
+$tn-auxiliary-powder: #FF71D2;
+$tn-auxiliary-blue: #82B2FF;
+$tn-bg-color: #FFFFFF;
+$tn-bg-gray-color: #F4F4F4;
+$tn-space-color: #F8F7F8;
+
+// 边框颜色
+$tn-border-solid-color: rgba(0, 0, 0, 0.1);
+$tn-border-solids-color: #eee;
+$tn-border-dashed-color: #ddd;
+
+// 阴影颜色
+$tn-shadow-color: rgba(0, 0, 0, 0.1);
+$tn-box-shadow-color: rgba(0, 0, 0, 0.2);
+
+// 字体颜色
+$tn-font-color: #080808;
+$tn-font-sub-color: #AAAAAA;
+$tn-content-color: #838383;
+$tn-font-holder-color: #E6E6E6;
+
+$tn-mask-bg-color: rgba(0, 0, 0, 0.4);
+
+$tn-progress-bg-color: #f0f0f0;
+
+
+$tn-color-red: #E83A30;
+$tn-color-red-dark: #BA2E26;
+$tn-color-red-disabled: #F39C97;
+$tn-color-red-light: #FAD8D6;
+
+$tn-color-purplered: #E72F8C;
+$tn-color-purplered-dark: #B9266F;
+$tn-color-purplered-disabled: #F397C5;
+$tn-color-purplered-light: #FAD5E8;
+
+$tn-color-purple: #892FE8;
+$tn-color-purple-dark: #6E26BA;
+$tn-color-purple-disabled: #C497F3;
+$tn-color-purple-light: #E7D5FA;
+
+$tn-color-bluepurple: #5F4FD9;
+$tn-color-bluepurple-dark: #4C3FAE;
+$tn-color-bluepurple-disabled: #AFA7EC;
+$tn-color-bluepurple-light: #DFDCF7;
+
+$tn-color-aquablue: #3646FF;
+$tn-color-aquablue-dark: #2B38CC;
+$tn-color-aquablue-disabled: #9AA2FF;
+$tn-color-aquablue-light: #D7DAFF;
+
+$tn-color-blue: #3D7EFF;
+$tn-color-blue-dark: #3165CC;
+$tn-color-blue-disabled: #9EBEFF;
+$tn-color-blue-light: #D8E5FF;
+
+$tn-color-indigo: #31C9E8;
+$tn-color-indigo-dark: #27A1BA;
+$tn-color-indigo-disabled: #98E4F3;
+$tn-color-indigo-light: #D6F4FA;
+
+$tn-color-cyan: #2DE8BD;
+$tn-color-cyan-dark: #24BA97;
+$tn-color-cyan-disabled: #96F3DE;
+$tn-color-cyan-light: #D5FAF2;
+
+$tn-color-teal: #24F083;
+$tn-color-teal-dark: #1DC069;
+$tn-color-teal-disabled: #91F7C1;
+$tn-color-teal-light: #D3FCE6;
+
+$tn-color-green: #31E749;
+$tn-color-green-dark: #27B93A;
+$tn-color-green-disabled: #98F3A4;
+$tn-color-green-light: #D6FADB;
+
+$tn-color-yellowgreen: #A4E82F;
+$tn-color-yellowgreen-dark: #82BA26;
+$tn-color-yellowgreen-disabled: #D1F397;
+$tn-color-yellowgreen-light: #EDFAD5;
+
+$tn-color-lime: #D5EB00;
+$tn-color-lime-dark: #AABC00;
+$tn-color-lime-disabled: #E9F57F;
+$tn-color-lime-light: #F7FBCC;
+
+$tn-color-yellow: #FFF420;
+$tn-color-yellow-dark: #CCC21A;
+$tn-color-yellow-disabled: #FFF88F;
+$tn-color-yellow-light: #FFFDD2;
+
+$tn-color-orangeyellow: #FFCA28;
+$tn-color-orangeyellow-dark: #CCA220;
+$tn-color-orangeyellow-disabled: #FFE493;
+$tn-color-orangeyellow-light: #FFF4D4;
+
+$tn-color-orange: #FFA726;
+$tn-color-orange-dark: #CC851E;
+$tn-color-orange-disabled: #FFD392;
+$tn-color-orange-light: #FFEDD4 ;
+
+$tn-color-orangered: #FF7043;
+$tn-color-orangered-dark: #CC5A36;
+$tn-color-orangered-disabled: #FFB7A1;
+$tn-color-orangered-light: #FFE2D9;
+
+$tn-color-brown: #914F2C;
+$tn-color-brown-dark: #743F23;
+$tn-color-brown-disabled: #C8A795;
+$tn-color-brown-light: #E9DCD5;
+
+$tn-color-grey: #78909C;
+$tn-color-grey-dark: #5F7E8B;
+$tn-color-grey-disabled: #C6D1D8;
+$tn-color-grey-light: #E4E9EC;
+
+$tn-color-gray: #AAAAAA;
+$tn-color-gray-dark: #838383;
+$tn-color-gray-disabled: #E6E6E6;
+$tn-color-gray-light: #F8F7F8;
+
+$tn-cool-bg-color-1-start: #F5317F;
+$tn-cool-bg-color-1-end: #FF7C6E;
+
+$tn-cool-bg-color-2-start: #CA26FF;
+$tn-cool-bg-color-2-end: #F360A7;
+
+$tn-cool-bg-color-3-start: #A26FFC;
+$tn-cool-bg-color-3-end: #9D12FF;
+
+$tn-cool-bg-color-4-start: #AA77F0;
+$tn-cool-bg-color-4-end: #E871E5;
+
+$tn-cool-bg-color-5-start: #40A0F7;
+$tn-cool-bg-color-5-end: #4866E6;
+
+$tn-cool-bg-color-6-start: #209CFF;
+$tn-cool-bg-color-6-end: #68E0CF;
+
+$tn-cool-bg-color-7-start: #00C3FF;
+$tn-cool-bg-color-7-end: #58FFF5;
+
+$tn-cool-bg-color-8-start: #00d1FF;
+$tn-cool-bg-color-8-end: #69FF97;
+
+$tn-cool-bg-color-9-start: #0FD893;
+$tn-cool-bg-color-9-end: #29ECBF;
+
+$tn-cool-bg-color-10-start: #0FD850;
+$tn-cool-bg-color-10-end: #F9F047;
+
+$tn-cool-bg-color-11-start: #24FE41;
+$tn-cool-bg-color-11-end: #F7FD47;
+
+$tn-cool-bg-color-12-start: #D6FF7F;
+$tn-cool-bg-color-12-end: #00F657;
+
+$tn-cool-bg-color-13-start: #FA709A;
+$tn-cool-bg-color-13-end: #FEE140;
+
+$tn-cool-bg-color-14-start: #FE5E9C;
+$tn-cool-bg-color-14-end: #F1AA76;
+
+$tn-cool-bg-color-15-start: #FF3181;
+$tn-cool-bg-color-15-end: #FF8331;
+
+$tn-cool-bg-color-16-start: #ED1C24;
+$tn-cool-bg-color-16-end: #FECE12;
+
+
diff --git a/uni.scss b/uni.scss
new file mode 100644
index 0000000..02a8b45
--- /dev/null
+++ b/uni.scss
@@ -0,0 +1,27 @@
+@import 'tuniao-ui/theme.scss';
+
+/* --- 项目全局颜色变量 --- */
+// 主题色 (天蓝)
+$brand-primary: #00BBE8;
+// 主题色 RGB 值，用于 rgba 计算透明度
+$brand-primary-rgb: 0, 187, 232;
+
+/* --- 图标设计系统色板 --- */
+// 品牌主图标色
+$icon-tone-brand: #00BBE8;
+// 品牌深色，用于强调图标
+$icon-tone-brand-deep: #0C6E8B;
+// 高级感点缀色，用于皇冠/精选等身份型图标
+$icon-tone-luxury: #D8B56A;
+// 深石墨色，用于主要功能图标
+$icon-tone-strong: #1E293B;
+// 中性辅助色，用于箭头、次级提示图标
+$icon-tone-muted: #8A94A6;
+// 浅色蒙层场景图标
+$icon-tone-overlay: rgba(255, 255, 255, 0.92);
+// 品牌浅底，用于图标容器底色
+$icon-surface-brand-soft: rgba($brand-primary, 0.12);
+// 高级金浅底
+$icon-surface-luxury-soft: rgba($icon-tone-luxury, 0.16);
+// 深色图标浅底
+$icon-surface-strong-soft: rgba($icon-tone-strong, 0.08);
diff --git a/uni_modules/tuniaoui-wx-user-info/changelog.md b/uni_modules/tuniaoui-wx-user-info/changelog.md
new file mode 100644
index 0000000..6072eb2
--- /dev/null
+++ b/uni_modules/tuniaoui-wx-user-info/changelog.md
@@ -0,0 +1,4 @@
+## 1.0.1（2022-11-22）
+更新使用文档
+## 1.0.0（2022-11-22）
+适配微信新版获取用户头像、昵称信息
diff --git a/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue b/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue
new file mode 100644
index 0000000..fd1e1c5
--- /dev/null
+++ b/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue
@@ -0,0 +1,330 @@
+<template>
+  <view
+    v-if="openModal"
+    class="wx-authorization-modal"
+  >
+    <view
+      class="wam__mask"
+      @touchmove.prevent=""
+      @tap.stop="closeModal"
+    ></view>
+    
+    <!-- 内容区域 -->
+    <view class="wam__wrapper">
+      <!-- 关闭按钮 -->
+      <view class="wam__close-btn" @tap.stop="closeModal">
+        <text class="tn-icon-close"></text>
+      </view>
+      <!-- 标题 -->
+      <view class="wam__title">获取您的昵称、头像</view>
+      <!-- tips -->
+      <view class="wam__sub-title">
+        获取用户头像、昵称，主要用于向用户提供具有辨识度的用户中心界面
+      </view>
+      
+      <!-- 头像选择 -->
+      <view class="wam__avatar">
+        <view class="button-shadow">
+          <button
+            class="button"
+            open-type="chooseAvatar"
+            @chooseavatar="chooseAvatarEvent"
+          >
+            <view v-if="userInfo.avatar" class="avatar__image">
+              <image class="image" :src="userInfo.avatar" mode="aspectFill"></image>
+            </view>
+            <view v-else class="avatar__empty">
+              <image class="image" src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1668928062708-assets/web-upload/764843cf-055a-4cb6-b5d3-dca528b33fd4.jpeg" mode="aspectFill"></image>
+            </view>
+            <view class="avatar--icon">
+              <view class="tn-icon-camera-fill"></view>
+            </view>
+          </button>
+        </view>
+      </view>
+      
+      <!-- 昵称输入 -->
+      <view class="wam__nickname">
+        <view class="nickname__data">
+          <input class="input" type="nickname" v-model="userInfo.nickname" placeholder="请输入昵称" placeholder-style="color: #AAAAAA;">
+        </view>
+      </view>
+      
+      
+      <!-- 保存按钮 -->
+      <view
+        class="wam__submit-btn"
+        :class="[{
+          'disabled': !userInfo.avatar || !userInfo.nickname
+        }]"
+        hover-class="tn-btn-hover-class"
+        :hover-stay-time="150"
+        @tap.stop="submitUserInfo"
+      >
+        保 存
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  
+  export default {
+    options: {
+      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
+      virtualHost: true
+    },
+    props: {
+      value: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        openModal: false,
+        userInfo: {
+          avatar: '',
+          nickname: ''
+        }
+      }
+    },
+    watch: {
+      value: {
+        handler(val) {
+          this.openModal = val
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      
+      
+      // 头像选择
+      chooseAvatarEvent(e) {
+        this.userInfo.avatar = e.detail.avatarUrl
+      },
+      
+      // 更新用户信息
+      submitUserInfo() {
+        // 判断是否已经选择了用户头像和输入了用户昵称
+        if (!this.userInfo.avatar || !this.userInfo.nickname) {
+          return uni.showToast({
+            icon: 'none',
+            title: '请选择头像和输入用户信息'
+          })
+        }
+        
+        // 更新完成事件
+        this.$emit('updated', this.userInfo)
+        
+      },
+      
+      // 关闭弹框
+      closeModal() {
+        this.$emit('input', false)
+      },
+      
+      
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  @import '../../static/iconfont.css';
+  
+  .wx-authorization-modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 99998;
+    
+    view {
+      box-sizing: border-box;
+    }
+    
+    .image {
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+    }
+    
+    .wam {
+      /* mask */
+      &__mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        animation: showMask 0.25s ease 0.1s forwards;
+      }
+      
+      /* close-btn */
+      &__close-btn {
+        position: absolute;
+        top: 30rpx;
+        right: 30rpx;
+        z-index: 99999;
+      }
+      
+      /* wrapper */
+      &__wrapper {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        background-color: #FFFFFF;
+        border-radius: 20rpx 20rpx 0rpx 0rpx;
+        padding: 40rpx;
+        padding-top: 60rpx;
+        padding-bottom: 40rpx;
+        padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
+        padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
+        transform-origin: center bottom;
+        transform: scaleY(0);
+        animation: showWrapper 0.25s ease 0.1s forwards;
+        z-index: 99999;
+      }
+      
+      /* title */
+      &__title {
+        font-size: 34rpx;
+      }
+      /* sub-title */
+      &__sub-title {
+        font-size: 26rpx;
+        color: #AAAAAA;
+        margin-top: 16rpx;
+        padding-bottom: 30rpx;
+      }
+      
+      /* 头像选择 */
+      &__avatar {
+        width: 100%;
+        margin-top: 30rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        .button-shadow {
+          border: 8rpx solid rgba(255,255,255,0.05);
+          box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
+          border-radius: 50%;
+        }
+        
+        .button {
+          position: relative;
+          width: 160rpx;
+          height: 160rpx;
+          border-radius: 50%;
+          overflow: visible;
+          background-image: repeating-linear-gradient(45deg, #E4E9EC, #F8F7F8);
+          color: #FFFFFF;
+          background-color: transparent;
+          padding: 0;
+          margin: 0;
+          font-size: inherit;
+          line-height: inherit;
+          border: none;
+          &::after {
+            border: none;
+          }
+        }
+        
+        .avatar {
+          &__empty, &__image {
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+          }
+          
+          &--icon {
+            position: absolute;
+            right: -10rpx;
+            bottom: -6rpx;
+            width: 60rpx;
+            height: 60rpx;
+            // transform: translate(50%, 50%);
+            background-color: #1D2541;
+            color: #FFFFFF;
+            border-radius: 50%;
+            border: 6rpx solid #FFFFFF;
+            line-height: 1;
+            font-size: 36rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+      
+      /* 昵称 */
+      &__nickname {
+        margin-top: 40rpx;
+        
+        .nickname {
+          
+          &__data {
+            margin-top: 16rpx;
+            width: 100%;
+            padding: 26rpx 20rpx;
+            border-radius: 10rpx;
+            background-color: #F8F7F8;
+            
+            .input {
+              color: #080808;
+            }
+          }
+        }
+      }
+      
+      /* 保存按钮 */
+      &__submit-btn {
+        width: 100%;
+        background-color: #05C160;
+        color: #FFFFFF;
+        margin-top: 60rpx;
+        margin-bottom: 10vh;
+        border-radius: 10rpx;
+        padding: 25rpx;
+        font-size: 32rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &.disabled {
+          background-color: #E6E6E6;
+        }
+      }
+      
+      
+    }
+  }
+  
+  .tn-btn-hover-class {
+    box-shadow: inset 10rpx 2rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
+  }
+  
+  @keyframes showMask {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes showWrapper {
+    0% {
+      transform: scaleY(0);
+    }
+    100% {
+      transform: scaleY(1);
+    }
+  }
+</style>
diff --git a/uni_modules/tuniaoui-wx-user-info/package.json b/uni_modules/tuniaoui-wx-user-info/package.json
new file mode 100644
index 0000000..67bad68
--- /dev/null
+++ b/uni_modules/tuniaoui-wx-user-info/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "tuniaoui-wx-user-info",
+  "displayName": "微信用户信息设置弹框",
+  "version": "1.0.1",
+  "description": "设置微信用户头像、昵称信息",
+  "keywords": [
+    "微信小程序",
+    "微信小程序用户信息",
+    "图鸟UI"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "u"
+        },
+        "App": {
+          "app-vue": "n",
+          "app-nvue": "n"
+        },
+        "H5-mobile": {
+          "Safari": "n",
+          "Android Browser": "n",
+          "微信浏览器(Android)": "n",
+          "QQ浏览器(Android)": "n"
+        },
+        "H5-pc": {
+          "Chrome": "n",
+          "IE": "n",
+          "Edge": "n",
+          "Firefox": "n",
+          "Safari": "n"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "n",
+          "百度": "n",
+          "字节跳动": "n",
+          "QQ": "n",
+          "钉钉": "n",
+          "快手": "n",
+          "飞书": "n",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/uni_modules/tuniaoui-wx-user-info/readme.md b/uni_modules/tuniaoui-wx-user-info/readme.md
new file mode 100644
index 0000000..35c2c78
--- /dev/null
+++ b/uni_modules/tuniaoui-wx-user-info/readme.md
@@ -0,0 +1,84 @@
+
+# 使用说明
+
+使用方法：
+
+```
+<template>
+	<view class="login-page">
+    <!-- 授权登录按钮 -->
+    <view class="submit-btn"  @tap.stop="openAuthorizationModal">
+      授权登录
+    </view>
+    
+    
+    <wx-user-info-modal
+      v-model="showAuthorizationModal"
+      @updated="updatedUserInfoEvent"
+    ></wx-user-info-modal>
+	</view>
+</template>
+
+<script>
+  import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
+  
+	export default {
+    components: { WxUserInfoModal },
+		data() {
+			return {
+				showAuthorizationModal: false
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+      // 打开获取用户信息弹框
+      openAuthorizationModal() {
+        this.showAuthorizationModal = true
+      },
+      
+      // 获取到的用户信息
+      updatedUserInfoEvent(info) {
+        console.log('获取到的用户信息', info)
+      },
+      
+      
+		}
+	}
+</script>
+
+<style>
+	.login-page {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  /* 授权按钮 */
+  .submit-btn {
+    width: 100%;
+    background-color: #05C160;
+    color: #FFFFFF;
+    margin-top: 60rpx;
+    border-radius: 10rpx;
+    padding: 25rpx;
+    font-size: 32rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 30rpx;
+  }
+</style>
+
+```
+
+参数说明：
+
+| 参数       | 说明                                                 |
+| :-------- | ---------------------------------------------------- |
+| v-model   | 弹出、关闭设置用户信息弹框                               |
+
diff --git a/uni_modules/tuniaoui-wx-user-info/static/iconfont.css b/uni_modules/tuniaoui-wx-user-info/static/iconfont.css
new file mode 100644
index 0000000..217a692
--- /dev/null
+++ b/uni_modules/tuniaoui-wx-user-info/static/iconfont.css
@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "tuniaoFont"; /* Project id 3784643 */
+  src: 
+       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN8AAsAAAAAB4gAAAMvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqCQIIdATYCJAMMCwgABCAFhH8HPRuYBiMRpmvPIfurAzsYPj7DCVbrRAmElfXCs4V6xacO8aHO69VXu54tTy8h0hcJ7ufgieY+3+xscrn9B8wKQQFBywplLZCw9SwcOyZ5pKsoAQAbcICJTr7AjPPqr06NRkeIAemFpXv8cje1+/LkuLvD789WJZUANjOe9F76qptDOSMUui/Ua0WQKpZGXaqf5hHZdAD6x8tRJtRKtQd7j5UKkk6lWywYkGADCZBnGLugJd6CAI4GOjH956Ep4k7imdNkYTGFAkm2nJyPrBNwA7YhWwgQ/K4bLXITD8wl8xxuBN+XwyYJwOAp5jFjOwNbPNwd3l3WiyFAv3sCBLjcAB6gQM3GjLLSbJpDo1ANiqsiFiX7WAQzqTcMA06j/pb/eAbEx8yMAaAChg3sDjs6COwub8IAoAD4PEZkA7iAZClPKdicmJLc2OiZcQC3cV613sc3Ab9W7YItQtio9YgdKGjgr+ANlbg5gPvXFacv8IyvKTH4pcjV7VIcfnuIAUd3VCbxcCIKj++rvr/hpx/iwxd4/5mxDXeILbBp2+ByMIlGMuQEU3gjiVaMcXk8Dn2gWo5wuRwuIldLRqRwWogvmCRXE9/kSvrVQP4iFDVWRSbRakMk/AtcBYVpO6rpah1V9J/m/Wt+q8WfsOV+S5KFTGD5dwW9KFstZUs5smuYK3V495zwUG+r/Izf0PWtbWj/HUQsAL9u+cGK8NCiAgRnaRJ49fqljrxWc4PaKs4pQwBlMLUeAzgcEGLakvg5nCZ3zgTBkZzAEEUuFEeJyMrq4BGhGT6OPjiqGd4eIZkLKGKjgTKuAAgpPIAhjmdQUngnsrJdeKTxBz4pkgjHjJQeFqFMXv8PQqg0QP+F2cbAdoHqFmaM52jYlcbNoeTq4CtPkjzHAE1Zl0QvFEjGmp9fY6vKwBI9kOvIuQhJ4kJWy0k1dVXFVXcpbfTmIIRKA/RfmG0M7G1T3cKM8VwMXGlEnR1KY0uU+CTJnM1ODk1ZdxJdSOjYdGOp+TW2k6szsNg8qIvIuQipetFCVstpQCB1lcXHXUl5ZOpfdBvgMI9QMaJi8TZdzLS36K8/ueDZOWMAAA==') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3784643_5jru9pe5fad.woff?t=1669045092678') format('woff'),
+       url('//at.alicdn.com/t/c/font_3784643_5jru9pe5fad.ttf?t=1669045092678') format('truetype');
+}
+
+[class*='tn-icon-'] {
+  font-family: 'tuniaoFont' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  text-align: center;
+  text-decoration: none;
+}
+
+.tn-icon-close:before {
+  content: "\e74d";
+}
+
+.tn-icon-camera-fill:before {
+  content: "\e75d";
+}
diff --git a/utils/account-api.js b/utils/account-api.js
new file mode 100644
index 0000000..b5b0c2c
--- /dev/null
+++ b/utils/account-api.js
@@ -0,0 +1,20 @@
+export {
+  applicationFormMePage,
+  checkRecordByChecked,
+  contractPreview,
+  contractSign,
+  getCountryList,
+  getEnums,
+  getMyEffectiveContracts,
+  getMyPendingSignContracts,
+  notificationPage,
+  notificationRead,
+  orderSearchedMePage,
+  registrationApplicationMePage,
+  submitApplicationForm,
+  submitRegistrationApplication,
+  sysdictPage,
+  userMe,
+  uploadCommonFile,
+  usersLogin
+} from '../api/index'
diff --git a/utils/app-state.js b/utils/app-state.js
new file mode 100644
index 0000000..2f0efe4
--- /dev/null
+++ b/utils/app-state.js
@@ -0,0 +1,431 @@
+import store from '@/store'
+
+const STORAGE_KEYS = {
+  REGISTERED_USER: 'registeredUser',
+  AUTH_TOKEN: 'authToken',
+  AUTH_TOKEN_EXPIRES: 'authTokenExpires',
+  IS_LOGIN: 'isLogin',
+  USER_INFO: 'userInfo',
+  HAS_CHECKED_IN: 'hasCheckedIn',
+  MY_ROOM_DATA: 'myRoomData',
+  CURRENT_BOOKING: 'currentBooking',
+  BOOKING_LIST: 'bookingList',
+  PENDING_CONTRACTS: 'pendingContracts',
+  PENDING_CONTRACT_COUNT: 'pendingContractCount',
+  EFFECTIVE_CONTRACTS: 'effectiveContracts',
+  MY_APPLICATION: 'myApplication',
+  ACTIVE_APPLICATION_CODE: 'activeApplicationCode',
+  FAILED_REGISTRATION_DRAFT: 'failedRegistrationDraft',
+  HOME_PAGE_TAB_ID: 'homePageTabId',
+  MESSAGE_LIST: 'messageList',
+  SERVICE_ORDER_LIST: 'serviceOrderList',
+  UTILITY_RECHARGE_LIST: 'utilityRechargeList',
+  LEGACY_DEMO_CACHE_CLEARED: 'legacyDemoCacheCleared'
+}
+
+function getStorage(key, fallback = null) {
+  const value = uni.getStorageSync(key)
+  return value === '' || typeof value === 'undefined' ? fallback : value
+}
+
+function getStoreState() {
+  return (store && store.state) || {}
+}
+
+function getStoreUser() {
+  const user = getStoreState().vuex_user
+  return user && typeof user === 'object' ? user : {}
+}
+
+function getStorePendingContracts() {
+  const list = getStoreState().vuex_pending_contracts
+  return Array.isArray(list) ? list : []
+}
+
+function getStoreEffectiveContracts() {
+  const list = getStoreState().vuex_effective_contracts
+  return Array.isArray(list) ? list : []
+}
+
+function getStoreValidOrders() {
+  const list = getStoreState().vuex_valid_orders
+  return Array.isArray(list) ? list : []
+}
+
+function getStoreCurrentOrder() {
+  return getStoreState().vuex_current_order || null
+}
+
+function buildRoomDataFromOrder(order = {}) {
+  if (!order || typeof order !== 'object' || !Object.keys(order).length) {
+    return null
+  }
+
+  const imageUrls = Array.isArray(order.imageUrls)
+    ? order.imageUrls
+    : typeof order.imageUrls === 'string'
+      ? order.imageUrls.split(',').map(item => item.trim()).filter(Boolean)
+      : []
+
+  const roomLabel = [
+    order.buildingName || order.buildingSectionName || order.unitName || '',
+    order.roomNo || order.roomCode || order.roomName || ''
+  ].filter(Boolean).join(' ')
+
+  const title = [
+    order.areaName || order.campusName || '',
+    order.roomTypeName || order.roomType || ''
+  ].filter(Boolean).join(' · ')
+
+  const start = String(order.startDate || order.start || order.checkinDate || '').slice(0, 10)
+  const end = String(order.endDate || order.end || order.checkoutDate || '').slice(0, 10)
+
+  return {
+    ...order,
+    id: roomLabel || order.roomNo || order.roomCode || order.orderNo || '',
+    roomLabel: roomLabel || order.roomNo || order.roomCode || '',
+    titleZh: title || order.roomTypeName || order.roomName || '当前入住房间',
+    titleEn: order.roomTypeNameEn || title || order.roomTypeName || 'Current Stay',
+    leaseText: [start, end].filter(Boolean).join(' - '),
+    image: order.imageUrl || imageUrls[0] || ''
+  }
+}
+
+function clearStoreSessionState() {
+  if (!store || !store.commit) {
+    return
+  }
+
+  store.commit('$tStore', { name: 'vuex_user', value: {} })
+  store.commit('$tStore', { name: 'vuex_checkin_status', value: false })
+  store.commit('$tStore', { name: 'vuex_current_order', value: null })
+  store.commit('$tStore', { name: 'vuex_pending_contracts', value: [] })
+  store.commit('$tStore', { name: 'vuex_pending_contract_count', value: 0 })
+  store.commit('$tStore', { name: 'vuex_effective_contracts', value: [] })
+  store.commit('$tStore', { name: 'vuex_valid_orders', value: [] })
+}
+
+export { STORAGE_KEYS }
+
+export function getRegisteredUser() {
+  return getStorage(STORAGE_KEYS.REGISTERED_USER, null)
+}
+
+export function saveRegisteredUser(user) {
+  uni.setStorageSync(STORAGE_KEYS.REGISTERED_USER, user)
+  return user
+}
+
+export function getCurrentUser() {
+  return getStorage(STORAGE_KEYS.USER_INFO, null)
+}
+
+export function saveCurrentUser(user) {
+  uni.setStorageSync(STORAGE_KEYS.USER_INFO, user)
+  return user
+}
+
+export function getLoginStatus() {
+  return !!getStorage(STORAGE_KEYS.IS_LOGIN, false)
+}
+
+export function setLoginStatus(isLogin) {
+  uni.setStorageSync(STORAGE_KEYS.IS_LOGIN, !!isLogin)
+  return !!isLogin
+}
+
+export function getAuthToken() {
+  return getStorage(STORAGE_KEYS.AUTH_TOKEN, '')
+}
+
+export function saveAuthToken(token) {
+  uni.setStorageSync(STORAGE_KEYS.AUTH_TOKEN, token || '')
+  return token || ''
+}
+
+export function clearAuthToken() {
+  uni.removeStorageSync(STORAGE_KEYS.AUTH_TOKEN)
+}
+
+export function getAuthTokenExpires() {
+  return getStorage(STORAGE_KEYS.AUTH_TOKEN_EXPIRES, '')
+}
+
+export function saveAuthTokenExpires(expires) {
+  uni.setStorageSync(STORAGE_KEYS.AUTH_TOKEN_EXPIRES, expires || '')
+  return expires || ''
+}
+
+export function clearAuthTokenExpires() {
+  uni.removeStorageSync(STORAGE_KEYS.AUTH_TOKEN_EXPIRES)
+}
+
+export function startLoginSession(user) {
+  setLoginStatus(true)
+  saveCurrentUser(user)
+  if (store && store.commit) {
+    store.commit('$tStore', {
+      name: 'vuex_user',
+      value: user && typeof user === 'object' ? user : {}
+    })
+  }
+  return user
+}
+
+export function startAuthorizedLoginSession(user, token, expires) {
+  if (token) saveAuthToken(token)
+  if (expires) saveAuthTokenExpires(expires)
+  return startLoginSession(user)
+}
+
+export function registerAndLogin(user) {
+  saveRegisteredUser(user)
+  startLoginSession(user)
+  return user
+}
+
+export function clearLoginSession() {
+  clearAuthToken()
+  clearAuthTokenExpires()
+  uni.removeStorageSync('lifeData')
+  clearStoreSessionState()
+  clearBookingState()
+  clearContractState()
+  clearMyRoomData()
+  uni.removeStorageSync(STORAGE_KEYS.HAS_CHECKED_IN)
+  uni.removeStorageSync(STORAGE_KEYS.IS_LOGIN)
+  uni.removeStorageSync(STORAGE_KEYS.USER_INFO)
+  uni.removeStorageSync(STORAGE_KEYS.MY_APPLICATION)
+  uni.removeStorageSync(STORAGE_KEYS.ACTIVE_APPLICATION_CODE)
+}
+
+export function getCheckedInStatus() {
+  return !!getStorage(STORAGE_KEYS.HAS_CHECKED_IN, false)
+}
+
+export function setCheckedInStatus(hasCheckedIn) {
+  uni.setStorageSync(STORAGE_KEYS.HAS_CHECKED_IN, !!hasCheckedIn)
+  return !!hasCheckedIn
+}
+
+export function getMyRoomData() {
+  return getStorage(STORAGE_KEYS.MY_ROOM_DATA, null)
+}
+
+export function saveMyRoomData(roomData) {
+  uni.setStorageSync(STORAGE_KEYS.MY_ROOM_DATA, roomData)
+  return roomData
+}
+
+export function clearMyRoomData() {
+  uni.removeStorageSync(STORAGE_KEYS.MY_ROOM_DATA)
+}
+
+export function getCurrentBooking() {
+  return getStorage(STORAGE_KEYS.CURRENT_BOOKING, null)
+}
+
+export function saveCurrentBooking(booking) {
+  uni.setStorageSync(STORAGE_KEYS.CURRENT_BOOKING, booking)
+  return booking
+}
+
+export function getBookingList() {
+  return getStorage(STORAGE_KEYS.BOOKING_LIST, [])
+}
+
+export function saveBookingList(list) {
+  uni.setStorageSync(STORAGE_KEYS.BOOKING_LIST, list)
+  return list
+}
+
+export function clearBookingState() {
+  uni.removeStorageSync(STORAGE_KEYS.CURRENT_BOOKING)
+  uni.removeStorageSync(STORAGE_KEYS.BOOKING_LIST)
+}
+
+export function getPendingContracts() {
+  return getStorage(STORAGE_KEYS.PENDING_CONTRACTS, [])
+}
+
+export function savePendingContracts(list) {
+  uni.setStorageSync(STORAGE_KEYS.PENDING_CONTRACTS, list || [])
+  return list || []
+}
+
+export function getPendingContractCount() {
+  return Number(getStorage(STORAGE_KEYS.PENDING_CONTRACT_COUNT, 0) || 0)
+}
+
+export function savePendingContractCount(count) {
+  const nextCount = Number(count || 0)
+  uni.setStorageSync(STORAGE_KEYS.PENDING_CONTRACT_COUNT, nextCount)
+  return nextCount
+}
+
+export function getEffectiveContracts() {
+  return getStorage(STORAGE_KEYS.EFFECTIVE_CONTRACTS, [])
+}
+
+export function saveEffectiveContracts(list) {
+  uni.setStorageSync(STORAGE_KEYS.EFFECTIVE_CONTRACTS, list || [])
+  return list || []
+}
+
+function patchContractListSign(list = [], contractNo = '', signImageUrl = '') {
+  const targetNo = String(contractNo || '').trim()
+  const targetSignImageUrl = String(signImageUrl || '').trim()
+
+  if (!targetNo || !Array.isArray(list) || !list.length) {
+    return Array.isArray(list) ? list : []
+  }
+
+  return list.map(item => {
+    const currentNo = String((item && (item.no || item.contractNo)) || '').trim()
+    if (currentNo !== targetNo) {
+      return item
+    }
+    return {
+      ...item,
+      signImageUrl: targetSignImageUrl || item.signImageUrl || ''
+    }
+  })
+}
+
+export function patchStoredContractSign(contractNo, signImageUrl) {
+  const nextPendingContracts = patchContractListSign(getPendingContracts(), contractNo, signImageUrl)
+  const nextEffectiveContracts = patchContractListSign(getEffectiveContracts(), contractNo, signImageUrl)
+
+  savePendingContracts(nextPendingContracts)
+  saveEffectiveContracts(nextEffectiveContracts)
+
+  return {
+    pendingContracts: nextPendingContracts,
+    effectiveContracts: nextEffectiveContracts
+  }
+}
+
+export function clearContractState() {
+  uni.removeStorageSync(STORAGE_KEYS.PENDING_CONTRACTS)
+  uni.removeStorageSync(STORAGE_KEYS.PENDING_CONTRACT_COUNT)
+  uni.removeStorageSync(STORAGE_KEYS.EFFECTIVE_CONTRACTS)
+}
+
+export function getListStorage(key) {
+  return getStorage(key, [])
+}
+
+export function saveListStorage(key, list) {
+  uni.setStorageSync(key, list)
+  return list
+}
+
+export function prependListStorage(key, item) {
+  const currentList = getListStorage(key)
+  const nextList = [item, ...currentList]
+  saveListStorage(key, nextList)
+  return nextList
+}
+
+export function getMyApplicationList() {
+  return getListStorage(STORAGE_KEYS.MY_APPLICATION)
+}
+
+export function saveMyApplicationList(list) {
+  return saveListStorage(STORAGE_KEYS.MY_APPLICATION, list || [])
+}
+
+export function getActiveApplicationCode() {
+  return getStorage(STORAGE_KEYS.ACTIVE_APPLICATION_CODE, '')
+}
+
+export function saveActiveApplicationCode(code) {
+  const nextCode = code || ''
+  uni.setStorageSync(STORAGE_KEYS.ACTIVE_APPLICATION_CODE, nextCode)
+  return nextCode
+}
+
+export function getFailedRegistrationDraft() {
+  return getStorage(STORAGE_KEYS.FAILED_REGISTRATION_DRAFT, null)
+}
+
+export function saveFailedRegistrationDraft(draft) {
+  const nextDraft = draft && typeof draft === 'object' ? draft : null
+  if (!nextDraft) {
+    uni.removeStorageSync(STORAGE_KEYS.FAILED_REGISTRATION_DRAFT)
+    return null
+  }
+  uni.setStorageSync(STORAGE_KEYS.FAILED_REGISTRATION_DRAFT, nextDraft)
+  return nextDraft
+}
+
+export function clearFailedRegistrationDraft() {
+  uni.removeStorageSync(STORAGE_KEYS.FAILED_REGISTRATION_DRAFT)
+}
+
+export function getHomePageTabId() {
+  return getStorage(STORAGE_KEYS.HOME_PAGE_TAB_ID, '')
+}
+
+export function saveHomePageTabId(tabId) {
+  const nextTabId = tabId || ''
+  uni.setStorageSync(STORAGE_KEYS.HOME_PAGE_TAB_ID, nextTabId)
+  return nextTabId
+}
+
+export function buildHomePageUrl(tabId) {
+  const nextTabId = tabId || getHomePageTabId()
+  return nextTabId
+    ? `/pages/index/index?pageId=${encodeURIComponent(nextTabId)}`
+    : '/pages/index/index'
+}
+
+export function getSessionSnapshot() {
+  const storeUser = getStoreUser()
+  const storageCurrentUser = getCurrentUser() || {}
+  const registeredUser = getRegisteredUser() || {}
+  const currentUser = Object.keys(storeUser).length ? storeUser : storageCurrentUser
+  const resolvedUser = Object.keys(currentUser).length ? currentUser : registeredUser
+  const storeCurrentOrder = getStoreCurrentOrder()
+  const storeBookingList = getStoreValidOrders()
+  const storePendingContracts = getStorePendingContracts()
+  const storeEffectiveContracts = getStoreEffectiveContracts()
+  const currentBooking = resolvedUser.currentBooking || getCurrentBooking()
+  const pendingContractCount = storePendingContracts.length || getPendingContractCount()
+  const hasCheckedIn = !!(resolvedUser.hasCheckedIn || getStoreState().vuex_checkin_status || getCheckedInStatus())
+  const myRoomData = hasCheckedIn
+    ? (getMyRoomData() || buildRoomDataFromOrder(storeCurrentOrder))
+    : null
+  const isLogin = getLoginStatus() || !!Object.keys(currentUser).length
+
+  return {
+    isLogin,
+    currentUser,
+    registeredUser,
+    resolvedUser,
+    hasCheckedIn: isLogin && hasCheckedIn,
+    currentBooking,
+    bookingList: storeBookingList.length ? storeBookingList : getBookingList(),
+    myRoomData,
+    pendingContracts: storePendingContracts.length ? storePendingContracts : getPendingContracts(),
+    pendingContractCount,
+    effectiveContracts: storeEffectiveContracts.length ? storeEffectiveContracts : getEffectiveContracts()
+  }
+}
+
+export function clearLegacyDemoCache() {
+  if (uni.getStorageSync(STORAGE_KEYS.LEGACY_DEMO_CACHE_CLEARED)) {
+    return
+  }
+  ;[
+    STORAGE_KEYS.CURRENT_BOOKING,
+    STORAGE_KEYS.BOOKING_LIST,
+    STORAGE_KEYS.MY_APPLICATION,
+    STORAGE_KEYS.MESSAGE_LIST,
+    STORAGE_KEYS.SERVICE_ORDER_LIST,
+    STORAGE_KEYS.UTILITY_RECHARGE_LIST
+  ].forEach(key => {
+    uni.removeStorageSync(key)
+  })
+  uni.setStorageSync(STORAGE_KEYS.LEGACY_DEMO_CACHE_CLEARED, true)
+}
diff --git a/utils/banner-api.js b/utils/banner-api.js
new file mode 100644
index 0000000..41089c9
--- /dev/null
+++ b/utils/banner-api.js
@@ -0,0 +1 @@
+export { bannerAll } from '../api/index'
diff --git a/utils/booking-guard.js b/utils/booking-guard.js
new file mode 100644
index 0000000..7369c3c
--- /dev/null
+++ b/utils/booking-guard.js
@@ -0,0 +1,112 @@
+import { getSessionSnapshot } from './app-state'
+import { getBookingStatusText, getStoredUser } from './flow'
+import { getCurrentLanguage } from './i18n'
+
+const ACTIVE_BOOKING_STATUSES = ['pending_review', 'approved_wait_assign', 'assigned_wait_room']
+
+function isZh(language) {
+  return language !== 'en'
+}
+
+function getGuardText(language = 'zh') {
+  const zh = isZh(language)
+  return {
+    loginTitle: zh ? '提示' : 'Notice',
+    loginContent: zh ? '您还未登录，请先登录或注册账号。' : 'Please sign in or register an account first.',
+    loginConfirmText: zh ? '去登录' : 'Sign In',
+    existingBookingTitle: zh ? '已有进行中的预订' : 'Existing Booking',
+    existingBookingContent: zh
+      ? '您当前状态为“{status}”，请先查看预订详情。'
+      : 'Your current booking status is "{status}". Please review the booking detail first.',
+    viewBooking: zh ? '查看预订' : 'View Booking'
+  }
+}
+
+function buildQueryString(query = {}) {
+  return Object.keys(query).reduce((result, key) => {
+    const value = query[key]
+    if (value === '' || value === null || typeof value === 'undefined') {
+      return result
+    }
+    result.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
+    return result
+  }, []).join('&')
+}
+
+function getCurrentPageUrl() {
+  const pages = getCurrentPages()
+  if (!Array.isArray(pages) || !pages.length) {
+    return ''
+  }
+  const currentPage = pages[pages.length - 1] || {}
+  const route = currentPage.route || ''
+  const options = currentPage.options || (currentPage.$page && currentPage.$page.options) || {}
+  if (!route) {
+    return ''
+  }
+  const queryString = buildQueryString(options)
+  return `/${route}${queryString ? `?${queryString}` : ''}`
+}
+
+export function ensureBookingAccess(options = {}) {
+  const language = options.language || getCurrentLanguage()
+  const guardText = getGuardText(language)
+  const session = getSessionSnapshot()
+  const sessionUser = session.resolvedUser && Object.keys(session.resolvedUser).length
+    ? session.resolvedUser
+    : {}
+  const optionUser = options.userInfo && Object.keys(options.userInfo).length
+    ? options.userInfo
+    : null
+  const userInfo = optionUser
+    ? {
+        ...sessionUser,
+        ...optionUser
+      }
+    : (Object.keys(sessionUser).length ? sessionUser : getStoredUser())
+
+  if (!session.isLogin) {
+    uni.showModal({
+      title: options.loginTitle || guardText.loginTitle,
+      content: options.loginContent || guardText.loginContent,
+      confirmText: options.loginConfirmText || guardText.loginConfirmText,
+      success: (res) => {
+        if (res.confirm) {
+          const redirectUrl = options.loginRedirectUrl || getCurrentPageUrl()
+          const query = [`bypass=1`]
+          if (redirectUrl) {
+            query.push(`redirect=${encodeURIComponent(redirectUrl)}`)
+          }
+          uni.navigateTo({ url: `/pkgAccount/login/login?${query.join('&')}` })
+        }
+      }
+    })
+    return false
+  }
+
+  if (ACTIVE_BOOKING_STATUSES.includes(userInfo.bookingStatus)) {
+    const statusText = getBookingStatusText(userInfo.bookingStatus, language)
+    uni.showModal({
+      title: guardText.existingBookingTitle,
+      content: guardText.existingBookingContent.replace('{status}', statusText),
+      confirmText: guardText.viewBooking,
+      success: (res) => {
+        if (res.confirm) {
+          const orderNo = encodeURIComponent(
+            userInfo.currentBooking && userInfo.currentBooking.orderNo
+              ? userInfo.currentBooking.orderNo
+              : ''
+          )
+          uni.navigateTo({
+            url: orderNo
+              ? `/pkgBooking/booking_detail/booking_detail?orderNo=${orderNo}`
+              : '/pkgBooking/booking_detail/booking_detail'
+          })
+        }
+      }
+    })
+    return false
+  }
+
+  return true
+}
diff --git a/utils/booking-helper.js b/utils/booking-helper.js
new file mode 100644
index 0000000..e05e92b
--- /dev/null
+++ b/utils/booking-helper.js
@@ -0,0 +1,386 @@
+import { getCurrentLanguage } from './i18n'
+
+function getBookingText(key = '', language = getCurrentLanguage()) {
+  const isEn = language === 'en'
+  const map = {
+    pendingReview: isEn ? 'Pending Review' : '审核中',
+    approved: isEn ? 'Approved' : '已通过',
+    waitingCheckin: isEn ? 'Waiting Check-in' : '待入住',
+    rejected: isEn ? 'Rejected' : '已驳回',
+    processing: isEn ? 'Processing' : '处理中',
+    contractSigned: isEn ? 'Signed' : '已签署'
+  }
+  return map[key] || ''
+}
+
+function parseJsonStringMaybe(value) {
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  const trimmed = value.trim()
+  if (!trimmed) {
+    return value
+  }
+
+  const looksLikeJson = (
+    (trimmed.startsWith('{') && trimmed.endsWith('}'))
+    || (trimmed.startsWith('[') && trimmed.endsWith(']'))
+  )
+
+  if (!looksLikeJson) {
+    return value
+  }
+
+  try {
+    return JSON.parse(trimmed)
+  } catch (error) {
+    console.warn('[orderSearchedMePage] JSON parse failed:', error)
+    return value
+  }
+}
+
+function parseResponsePayload(response) {
+  const basePayload = response && response.data ? response.data : response
+  return parseJsonStringMaybe(basePayload)
+}
+
+function collectObjectArray(value, depth = 0) {
+  if (!value || depth > 6) {
+    return []
+  }
+
+  const normalizedValue = parseJsonStringMaybe(value)
+
+  if (Array.isArray(normalizedValue)) {
+    if (normalizedValue.some(item => item && typeof item === 'object' && !Array.isArray(item))) {
+      return normalizedValue
+    }
+
+    for (let index = 0; index < normalizedValue.length; index += 1) {
+      const nestedList = collectObjectArray(normalizedValue[index], depth + 1)
+      if (nestedList.length) {
+        return nestedList
+      }
+    }
+    return []
+  }
+
+  if (typeof normalizedValue !== 'object') {
+    return []
+  }
+
+  const candidateKeys = [
+    'data',
+    'list',
+    'rows',
+    'items',
+    'records',
+    'result',
+    'payload',
+    '$values'
+  ]
+
+  for (let index = 0; index < candidateKeys.length; index += 1) {
+    const key = candidateKeys[index]
+    if (!Object.prototype.hasOwnProperty.call(normalizedValue, key)) {
+      continue
+    }
+    const nestedList = collectObjectArray(normalizedValue[key], depth + 1)
+    if (nestedList.length) {
+      return nestedList
+    }
+  }
+
+  return []
+}
+
+export function parseOrderListResponse(response) {
+  const payload = parseResponsePayload(response)
+  const orderList = collectObjectArray(payload)
+
+  if (!orderList.length) {
+    console.warn('[orderSearchedMePage] unsupported response structure:', payload)
+  } else {
+    console.log('[orderSearchedMePage] parsed order count:', orderList.length)
+  }
+
+  return orderList
+}
+
+export function parseOrderDetailResponse(response) {
+  const payload = parseResponsePayload(response)
+
+  if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
+    return payload
+  }
+
+  const orderList = collectObjectArray(payload)
+  return Array.isArray(orderList) && orderList.length ? orderList[0] : {}
+}
+
+export function formatOrderDateTime(value) {
+  if (!value) {
+    return '--'
+  }
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return String(value).replace('T', ' ').slice(0, 16) || '--'
+  }
+  const pad = item => String(item).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+export function formatOrderDate(value) {
+  if (!value) {
+    return '--'
+  }
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return String(value).slice(0, 10) || '--'
+  }
+  const pad = item => String(item).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}
+
+function normalizeStatusKey(order = {}) {
+  const rawStatus = String(order.status || order.orderStatus || '').trim()
+  if (['pending_review', 'approved_wait_assign', 'assigned_wait_room', 'rejected', 'contract_signed'].includes(rawStatus)) {
+    return rawStatus
+  }
+
+  const contractStatus = Number(order.contractStatus)
+  if (contractStatus === 1) {
+    return 'contract_signed'
+  }
+
+  const approvalStatus = Number(
+    order.approvalStatus !== undefined
+      ? order.approvalStatus
+      : order.auditStatus !== undefined
+        ? order.auditStatus
+        : order.statusCode
+  )
+
+  if (approvalStatus === -1 || /reject|refuse|驳回/i.test(rawStatus)) {
+    return 'rejected'
+  }
+  if (approvalStatus === 0 || /pending|review|审核中|待审批/i.test(rawStatus)) {
+    return 'pending_review'
+  }
+  if (
+    order.roomNo ||
+    order.roomCode ||
+    order.roomName ||
+    order.checkinDate ||
+    order.startDate ||
+    order.start
+  ) {
+    return 'assigned_wait_room'
+  }
+  return 'approved_wait_assign'
+}
+
+function resolveStatusText(order = {}, statusKey, language = getCurrentLanguage()) {
+
+  const contractStatus = Number(order.contractStatus)
+  if (contractStatus === 1 && order.contractStatusDesc && language !== 'en') {
+    return order.contractStatusDesc
+  }
+
+  if (language !== 'en' && order.approvalStatusDesc) {
+    return order.approvalStatusDesc
+  }
+  if (language !== 'en' && order.statusDesc) {
+    return order.statusDesc
+  }
+  const map = {
+    pending_review: getBookingText('pendingReview', language),
+    approved_wait_assign: getBookingText('approved', language),
+    assigned_wait_room: getBookingText('waitingCheckin', language),
+    rejected: getBookingText('rejected', language),
+    contract_signed: getBookingText('contractSigned', language)
+  }
+  return map[statusKey] || getBookingText('processing', language)
+}
+
+function resolveTagType(statusKey) {
+  if (statusKey === 'rejected') {
+    return 'rejected'
+  }
+  if (statusKey === 'pending_review') {
+    return 'pending'
+  }
+  if (statusKey === 'contract_signed') {
+    return 'approved'
+  }
+  return 'approved'
+}
+
+function getBuildingFloorText(order = {}, language = getCurrentLanguage()) {
+  const isEn = language === 'en'
+  const building = [
+    isEn
+      ? (order.buildingNameEn || order.buildingEn || order.buildingSectionNameEn || order.buildingName || order.building || order.buildingSectionName || '')
+      : (order.buildingName || order.building || order.buildingSectionName || ''),
+    isEn
+      ? (order.floorNameEn || order.floorEn || order.floorName || order.floor || '')
+      : (order.floorName || order.floor || '')
+  ].filter(Boolean).join(' ')
+  return building || '--'
+}
+
+function getRoomTypeText(order = {}, language = getCurrentLanguage()) {
+  const isEn = language === 'en'
+  if (isEn) {
+    return order.roomTypeNameEn || order.styleNameEn || order.roomNameEn || order.roomTypeName || order.styleNameZh || order.roomType || order.roomName || '--'
+  }
+  return order.roomTypeName || order.styleNameZh || order.roomType || order.roomName || '--'
+}
+
+function getOrderNo(order = {}) {
+  return order.orderNo || order.no || order.code || '--'
+}
+
+export function getOrderStatusCode(order = {}) {
+  const candidates = [
+    order.orderStatus,
+    order.statusCode,
+    order.status
+  ]
+
+  for (let index = 0; index < candidates.length; index += 1) {
+    const value = candidates[index]
+    if (value === '' || value === null || value === undefined) {
+      continue
+    }
+    const numericValue = Number(value)
+    if (Number.isFinite(numericValue)) {
+      return numericValue
+    }
+  }
+
+  return null
+}
+
+export function getOrderTime(order = {}) {
+  const checkInPeriod = order.checkInPeriod || {}
+  const candidates = [
+    order.updateTime,
+    order.createTime,
+    order.createdAt,
+    order.startDate,
+    order.start,
+    order.checkinDate,
+    checkInPeriod.start
+  ]
+
+  const timestamp = candidates
+    .map(value => new Date(value || 0).getTime())
+    .find(value => Number.isFinite(value) && value > 0)
+
+  return timestamp || 0
+}
+
+export function sortOrdersByLatest(orderList = []) {
+  return [...orderList].sort((prev, next) => getOrderTime(next) - getOrderTime(prev))
+}
+
+function hasStayFields(order = {}) {
+  return !!(
+    order.roomNo
+    || order.roomCode
+    || order.slotCode
+    || order.contractNo
+    || order.actualCheckInTime
+    || order.checkinTime
+  )
+}
+
+export function isRejectedBookingOrder(order = {}) {
+  const statusKey = normalizeStatusKey(order)
+  const statusCode = getOrderStatusCode(order)
+  return statusKey === 'rejected' || statusCode === -1
+}
+
+export function isCheckedInOrder(order = {}) {
+  const statusCode = getOrderStatusCode(order)
+  if (statusCode !== null) {
+    return statusCode > 0
+  }
+
+  const contractStatus = Number(order.contractStatus)
+  if (contractStatus === 1) {
+    return true
+  }
+
+  if (isRejectedBookingOrder(order)) {
+    return false
+  }
+
+  return hasStayFields(order)
+}
+
+export function isCurrentBookingOrder(order = {}) {
+  if (isRejectedBookingOrder(order) || isCheckedInOrder(order)) {
+    return false
+  }
+
+  const statusCode = getOrderStatusCode(order)
+  if (statusCode === 0) {
+    return true
+  }
+
+  const statusKey = normalizeStatusKey(order)
+  return ['pending_review', 'approved_wait_assign', 'assigned_wait_room', 'contract_signed'].includes(statusKey)
+}
+
+export function normalizeBookingOrder(order = {}, language = getCurrentLanguage()) {
+  const statusKey = normalizeStatusKey(order)
+  const statusCode = getOrderStatusCode(order)
+  const checkInPeriod = order.checkInPeriod || {}
+  const startDate = order.startDate || order.start || order.checkinDate || checkInPeriod.start
+  const endDate = order.endDate || order.end || order.checkoutDate || checkInPeriod.end
+  return {
+    ...order,
+    orderNo: getOrderNo(order),
+    roomTypeText: getRoomTypeText(order, language),
+    buildingFloorText: getBuildingFloorText(order, language),
+    startDateText: formatOrderDate(startDate),
+    endDateText: formatOrderDate(endDate),
+    createdAtText: formatOrderDateTime(order.createTime || order.updateTime || order.createdAt),
+    roomNoText: language === 'en'
+      ? (order.roomNoEn || order.roomCodeEn || order.roomNameEn || order.roomNo || order.roomCode || order.roomName || '--')
+      : (order.roomNo || order.roomCode || order.roomName || order.roomNoEn || order.roomCodeEn || order.roomNameEn || '--'),
+    areaText: language === 'en'
+      ? (order.areaNameEn || order.campusNameEn || order.areaName || order.campusName || '--')
+      : (order.areaName || order.campusName || '--'),
+    rejectReasonText: order.rejectReason || order.approveReason || order.remark || '',
+    startDate,
+    endDate,
+    status: statusKey,
+    statusCode,
+    statusKey,
+    statusText: resolveStatusText(order, statusKey, language),
+    tagType: resolveTagType(statusKey)
+  }
+}
+
+export function normalizeBookingList(orderList = [], language = getCurrentLanguage()) {
+  return sortOrdersByLatest(orderList).map(item => normalizeBookingOrder(item, language))
+}
+
+export function normalizeBookingDetail(order = {}, language = getCurrentLanguage()) {
+  if (!order || typeof order !== 'object' || Array.isArray(order)) {
+    return null
+  }
+  return normalizeBookingOrder(order, language)
+}
+
+export function pickCurrentStayOrder(orderList = []) {
+  return sortOrdersByLatest(orderList).find(item => isCheckedInOrder(item)) || null
+}
+
+export function pickCurrentBooking(orderList = []) {
+  return sortOrdersByLatest(orderList).find(item => isCurrentBookingOrder(item)) || null
+}
diff --git a/utils/common.js b/utils/common.js
new file mode 100644
index 0000000..279973d
--- /dev/null
+++ b/utils/common.js
@@ -0,0 +1,10 @@
+import { config } from '../config.js'
+
+export function addFilePrefix(url = '') {
+  const value = String(url || '').trim()
+  if (!value) return ''
+  if (/^(https?:\/\/|data:image|blob:)/i.test(value)) {
+    return value
+  }
+  return `${config.filePrefix}${value.startsWith('/') ? '' : '/'}${value}`
+}
diff --git a/utils/enum-store.js b/utils/enum-store.js
new file mode 100644
index 0000000..e696897
--- /dev/null
+++ b/utils/enum-store.js
@@ -0,0 +1,167 @@
+import { getEnums } from '@/api/index.js'
+import { getCurrentLanguage } from '@/utils/i18n'
+
+const ENUMS_CACHE_KEY = 'mini_enums_cache_v1'
+
+let enumsMap = {}
+let enumsLanguage = ''
+let fetchPromise = null
+
+function normalizeEnumMap(data) {
+  const map = {}
+  if (Array.isArray(data)) {
+    data.forEach((item) => {
+      if (item && item.code) {
+        map[item.code] = Array.isArray(item.data) ? item.data : []
+      }
+    })
+  }
+  return map
+}
+
+function getNormalizedLanguage(language = '') {
+  return String(language || getCurrentLanguage() || 'zh').trim().toLowerCase() === 'en' ? 'en' : 'zh'
+}
+
+function readEnumsCache(language) {
+  const cacheLanguage = getNormalizedLanguage(language)
+  try {
+    const cached = uni.getStorageSync(ENUMS_CACHE_KEY)
+    if (!cached) return {}
+    const resolveLanguageBucket = (payload) => {
+      if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
+        return {}
+      }
+      if (payload.en || payload.zh) {
+        const bucket = payload[cacheLanguage]
+        return bucket && typeof bucket === 'object' ? bucket : {}
+      }
+      return payload
+    }
+    if (typeof cached === 'string') {
+      const parsed = JSON.parse(cached)
+      return resolveLanguageBucket(parsed)
+    }
+    return resolveLanguageBucket(cached)
+  } catch (error) {
+    console.error('Failed to read enums cache', error)
+    return {}
+  }
+}
+
+function writeEnumsCache(map, language) {
+  const cacheLanguage = getNormalizedLanguage(language)
+  try {
+    const cached = uni.getStorageSync(ENUMS_CACHE_KEY)
+    let nextCache = {}
+    if (cached && typeof cached === 'object' && !Array.isArray(cached)) {
+      nextCache = { ...cached }
+    } else if (typeof cached === 'string') {
+      try {
+        const parsed = JSON.parse(cached)
+        if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+          nextCache = { ...parsed }
+        }
+      } catch (error) {
+        nextCache = {}
+      }
+    }
+    nextCache[cacheLanguage] = map
+    uni.setStorageSync(ENUMS_CACHE_KEY, nextCache)
+  } catch (error) {
+    console.error('Failed to write enums cache', error)
+  }
+}
+
+export function initEnumsFromCache(language) {
+  const currentLanguage = getNormalizedLanguage(language)
+  if (Object.keys(enumsMap).length && enumsLanguage === currentLanguage) return enumsMap
+  enumsMap = readEnumsCache(currentLanguage)
+  enumsLanguage = currentLanguage
+  return enumsMap
+}
+
+export async function fetchEnums(force = false, language) {
+  const currentLanguage = getNormalizedLanguage(language)
+  if (!force && Object.keys(enumsMap).length && enumsLanguage === currentLanguage) return enumsMap
+  if (fetchPromise) return fetchPromise
+
+  fetchPromise = (async () => {
+    if (!force && (!Object.keys(enumsMap).length || enumsLanguage !== currentLanguage)) {
+      initEnumsFromCache(currentLanguage)
+      if (Object.keys(enumsMap).length) return enumsMap
+    }
+
+    try {
+      const res = await getEnums({}, currentLanguage)
+      const data = res && res.data ? res.data : res
+      const map = normalizeEnumMap(data)
+      if (Object.keys(map).length) {
+        enumsMap = map
+        enumsLanguage = currentLanguage
+        writeEnumsCache(map, currentLanguage)
+      }
+      return enumsMap
+    } catch (error) {
+      console.error('Failed to fetch enums', error)
+      return enumsMap
+    } finally {
+      fetchPromise = null
+    }
+  })()
+
+  return fetchPromise
+}
+
+export function getEnumOptions(code, language) {
+  initEnumsFromCache(language)
+  return enumsMap[code] || []
+}
+
+export function getEnumLabel(code, key, fallback = '', language) {
+  const options = getEnumOptions(code, language)
+  const matched = options.find(item => String(item.key) === String(key))
+  if (matched) return matched.value
+  return fallback || key
+}
+
+export function getApprovalStatusLabel(status, fallback = '', language) {
+  return getEnumLabel('ApprovalStatusEnum', status, fallback, language)
+}
+
+export function getGenderLabel(gender, fallback = '', language) {
+  return getEnumLabel('GenderEnum', gender, fallback, language)
+}
+
+export const ACCOUNT_BILL_STATUS = {
+  ACTIVE: 10,
+  FINISHED: 99
+}
+
+export const ACCOUNT_BILL_PAYMENT_STATUS = {
+  UNPAID: 0,
+  PARTIAL: 1,
+  PAID: 2
+}
+
+export const ACCOUNT_BILL_REFUND_STATUS = {
+  NONE: 0,
+  PARTIAL: 10,
+  REFUNDED: 99
+}
+
+export function getAccountBillStatusLabel(status, fallback = '', language) {
+  return getEnumLabel('AccountBillStatusEnum', status, fallback, language)
+}
+
+export function getAccountBillPaymentStatusLabel(status, fallback = '', language) {
+  return getEnumLabel('AccountBillPaymentStatusEnum', status, fallback, language)
+}
+
+export function getAccountBillRefundStatusLabel(status, fallback = '', language) {
+  return getEnumLabel('AccountBillRefundStatusEnum', status, fallback, language)
+}
+
+export function getAccountReferenceTypeLabel(type, fallback = '', language) {
+  return getEnumLabel('AccountReferenceTypeEnum', type, fallback, language)
+}
diff --git a/utils/flow.js b/utils/flow.js
new file mode 100644
index 0000000..f34dc90
--- /dev/null
+++ b/utils/flow.js
@@ -0,0 +1,294 @@
+import {
+  getBookingList,
+  getCurrentUser,
+  getRegisteredUser,
+  saveBookingList,
+  saveCurrentBooking,
+  saveCurrentUser,
+  saveRegisteredUser
+} from './app-state'
+import { getApprovalStatusLabel, getGenderLabel } from './enum-store'
+import { getCurrentLanguage } from './i18n'
+import store from '@/store'
+
+const AUTH_STATUS_TEXT = {
+  zh: {
+    unsubmitted: '未实名',
+    pending: '审核中',
+    approved: '已通过',
+    rejected: '已驳回'
+  },
+  en: {
+    unsubmitted: 'Not Verified',
+    pending: 'Under Review',
+    approved: 'Approved',
+    rejected: 'Rejected'
+  }
+}
+
+const BOOKING_STATUS_TEXT = {
+  zh: {
+    none: '暂无预订',
+    pending_review: '预订审核中',
+    approved_wait_assign: '审核通过',
+    assigned_wait_room: '已分配管家，待分房号',
+    rejected: '预订已驳回'
+  },
+  en: {
+    none: 'No Booking',
+    pending_review: 'Booking Under Review',
+    approved_wait_assign: 'Approved',
+    assigned_wait_room: 'Butler Assigned, Awaiting Room',
+    rejected: 'Booking Rejected'
+  }
+}
+
+function resolveLanguageMap(map, language) {
+  const currentLanguage = language || getCurrentLanguage()
+  return currentLanguage === 'en' ? map.en : map.zh
+}
+
+function getFlowGenderFallback(gender, language) {
+  const currentLanguage = language || getCurrentLanguage()
+  if (gender === 1) {
+    return currentLanguage === 'en' ? 'Male' : '男'
+  }
+  if (gender === 0) {
+    return currentLanguage === 'en' ? 'Female' : '女'
+  }
+  return ''
+}
+
+export function mapRegistrationApprovalToAuthStatus(status) {
+  if (status === 1) return 'approved'
+  if (status === -1) return 'rejected'
+  if (status === 0) return 'pending'
+  return 'unsubmitted'
+}
+
+function normalizeLookupValue(value) {
+  if (value === null || typeof value === 'undefined') {
+    return ''
+  }
+  return String(value).trim()
+}
+
+function normalizeRegistrationCodeCandidate(value) {
+  const normalized = normalizeLookupValue(value)
+  if (!normalized) {
+    return ''
+  }
+
+  // 过滤业务状态码，避免把 200/500 这类响应码误存成申请单编号
+  if (/^\d{1,6}$/.test(normalized)) {
+    return ''
+  }
+
+  return normalized
+}
+
+export function resolveRegistrationApplicationCode(source = {}) {
+  const raw = source && source.data ? source.data : source
+  const candidates = [
+    source && source.registrationCode,
+    source && source.data,
+    raw && raw.code,
+    raw && raw.registrationCode,
+    raw,
+    raw && raw.data && raw.data.code,
+    raw && raw.data && raw.data.registrationCode,
+    raw && raw.data,
+    source && source.data && source.data.data && source.data.data.code,
+    source && source.data && source.data.data && source.data.data.registrationCode,
+    source && source.code
+  ]
+
+  return candidates.map(normalizeRegistrationCodeCandidate).find(Boolean) || ''
+}
+
+export function normalizeUser(raw = {}) {
+  const user = raw || {}
+  return {
+    ...user,
+    hasAuth: user.hasAuth === true,
+    authStatus: user.authStatus || 'unsubmitted',
+    authRejectReason: user.authRejectReason || '',
+    authProfile: user.authProfile || null,
+    bookingStatus: user.bookingStatus || 'none',
+    bookingRejectReason: user.bookingRejectReason || '',
+    currentBooking: user.currentBooking || null,
+    hasCheckedIn: user.hasCheckedIn === true
+  }
+}
+
+export function buildUserFromRegistrationApplication(application = {}, options = {}) {
+  const source = application || {}
+  const normalizedOptions = options || {}
+  const language = normalizedOptions.language || getCurrentLanguage()
+  const profile = {
+    identityType: source.passportNumber ? 'foreign' : 'domestic',
+    account: source.account || normalizedOptions.account || '',
+    email: source.email || normalizedOptions.email || '',
+    roleNo: source.roleNo || normalizedOptions.roleNo || '',
+    name: source.name || normalizedOptions.name || '',
+    gender: typeof source.gender === 'number' ? source.gender : null,
+    genderText: source.genderDesc || getGenderLabel(source.gender, getFlowGenderFallback(source.gender, language), language),
+    phone: source.phone || normalizedOptions.phone || '',
+    country: source.country || normalizedOptions.country || '',
+    idCard: source.idCard || '',
+    workUnit: source.workUnit || '',
+    hasHangzhouProperty: typeof source.hasHangzhouProperty === 'boolean' ? source.hasHangzhouProperty : null,
+    dietaryHabitTags: source.dietaryHabitTags || [],
+    hobbyTags: source.hobbyTags || [],
+    passportNumber: source.passportNumber || '',
+    passportExpiry: source.passportExpiry || '',
+    school: source.school || '',
+    religionTags: source.religionTags || [],
+    passportAttachment: source.passportAttachment || '',
+    idCardFrontAttachment: source.idCardFrontAttachment || '',
+    idCardBackAttachment: source.idCardBackAttachment || ''
+  }
+
+  return normalizeUser({
+    id: source.convertedUserCode || source.code || normalizedOptions.id || '',
+    code: source.code || source.convertedUserCode || normalizedOptions.code || '',
+    userCode: source.convertedUserCode || source.userCode || source.code || normalizedOptions.userCode || '',
+    firstChar: (source.name || normalizedOptions.name || 'U').charAt(0).toUpperCase(),
+    name: source.name || normalizedOptions.name || '',
+    account: source.account || normalizedOptions.account || '',
+    username: source.account || normalizedOptions.account || '',
+    password: normalizedOptions.password || '',
+    email: source.email || normalizedOptions.email || '',
+    phone: source.phone || normalizedOptions.phone || '',
+    roleNo: source.roleNo || normalizedOptions.roleNo || '',
+    hasAuth: source.approvalStatus === 1,
+    authStatus: mapRegistrationApprovalToAuthStatus(source.approvalStatus),
+    authRejectReason: source.approveReason || '',
+    authDate: source.createTime ? new Date(source.createTime).toLocaleDateString() : '',
+    authProfile: profile
+  })
+}
+
+export function mergeBackendUserInfo(baseUser = {}, backendUserInfo = {}) {
+  const user = baseUser || {}
+  const response = backendUserInfo || {}
+  const raw = response && response.data ? response.data : response
+  const info = raw || {}
+  const mergedUser = {
+    ...user,
+    id: info.code || info.userCode || user.id || '',
+    code: info.code || info.userCode || user.code || '',
+    userCode: info.userCode || info.code || user.userCode || '',
+    backendUserInfo: info,
+    name: info.name || user.name || '',
+    account: info.account || user.account || '',
+    username: info.account || user.username || user.account || '',
+    avatar: info.avatar || info.base64Face || user.avatar || '',
+    base64Face: info.base64Face || user.base64Face || '',
+    phone: info.phone || user.phone || '',
+    email: info.email || user.email || '',
+    roleNo: info.roleNo || user.roleNo || '',
+    roles: Array.isArray(info.roles) ? info.roles : (user.roles || []),
+    permissions: Array.isArray(info.permissions) ? info.permissions : (user.permissions || [])
+  }
+
+  if (mergedUser.authProfile) {
+    mergedUser.authProfile = {
+      ...mergedUser.authProfile,
+      name: mergedUser.name || mergedUser.authProfile.name || '',
+      account: mergedUser.account || mergedUser.authProfile.account || '',
+      email: mergedUser.email || mergedUser.authProfile.email || '',
+      phone: mergedUser.phone || mergedUser.authProfile.phone || '',
+      roleNo: mergedUser.roleNo || mergedUser.authProfile.roleNo || ''
+    }
+  }
+
+  return normalizeUser(mergedUser)
+}
+
+export function getStoredUser() {
+  const storeUser = store && store.state ? store.state.vuex_user : {}
+  if (storeUser && Object.keys(storeUser).length) {
+    return normalizeUser(storeUser)
+  }
+  const currentUser = getCurrentUser()
+  if (currentUser && Object.keys(currentUser).length) {
+    return normalizeUser(currentUser)
+  }
+  const registeredUser = getRegisteredUser()
+  return normalizeUser(registeredUser || {})
+}
+
+export function saveUser(user) {
+  const normalizedUser = normalizeUser(user)
+  saveCurrentUser(normalizedUser)
+  saveRegisteredUser(normalizedUser)
+  if (store && store.commit) {
+    store.commit('$tStore', {
+      name: 'vuex_user',
+      value: normalizedUser
+    })
+  }
+  return normalizedUser
+}
+
+export function getAuthStatusText(status, language) {
+  const languageMap = resolveLanguageMap(AUTH_STATUS_TEXT, language)
+  const numericMap = {
+    pending: 0,
+    approved: 1,
+    rejected: -1
+  }
+  if (Object.prototype.hasOwnProperty.call(numericMap, status)) {
+    return getApprovalStatusLabel(numericMap[status], languageMap[status] || languageMap.unsubmitted, language)
+  }
+  return languageMap[status] || languageMap.unsubmitted
+}
+
+export function getBookingStatusText(status, language) {
+  const languageMap = resolveLanguageMap(BOOKING_STATUS_TEXT, language)
+  return languageMap[status] || languageMap.none
+}
+
+export function getBookingTagType(status) {
+  if (status === 'rejected') {
+    return 'rejected'
+  }
+  if (status === 'pending_review') {
+    return 'pending'
+  }
+  return 'approved'
+}
+
+export function createBooking(payload = {}) {
+  const source = payload || {}
+  const now = Date.now()
+  const status = source.status || 'pending_review'
+  return {
+    orderNo: `LJYD${now}`,
+    status,
+    statusText: getBookingStatusText(status),
+    statusTextZh: getBookingStatusText(status, 'zh'),
+    statusTextEn: getBookingStatusText(status, 'en'),
+    createdAt: new Date(now).toLocaleString(),
+    butlerName: '',
+    roomAssignStatus: 'pending',
+    rejectReason: '',
+    ...source
+  }
+}
+
+export function saveBooking(booking) {
+  const normalizedBooking = booking && typeof booking === 'object'
+    ? {
+        ...booking,
+        statusTextZh: booking.statusTextZh || getBookingStatusText(booking.status || 'pending_review', 'zh'),
+        statusTextEn: booking.statusTextEn || getBookingStatusText(booking.status || 'pending_review', 'en')
+      }
+    : booking
+  const bookingList = getBookingList()
+  const nextList = [normalizedBooking, ...bookingList.filter(item => item.orderNo !== normalizedBooking.orderNo)]
+  saveCurrentBooking(normalizedBooking)
+  saveBookingList(nextList)
+  return nextList
+}
diff --git a/utils/i18n.js b/utils/i18n.js
new file mode 100644
index 0000000..c0d4761
--- /dev/null
+++ b/utils/i18n.js
@@ -0,0 +1,130 @@
+import store from '@/store'
+import globalMessages from '@/locales/messages'
+
+export const ZH_LOCALE = 'zh-Hans'
+export const EN_LOCALE = 'en'
+export const DEFAULT_LOCALE = ZH_LOCALE
+
+function safeReadStorageLocale() {
+  try {
+    const lifeData = uni.getStorageSync('lifeData') || {}
+    return lifeData.vuex_locale || ''
+  } catch (error) {
+    return ''
+  }
+}
+
+export function normalizeLocale(locale) {
+  const normalized = String(locale || '').trim().toLowerCase()
+  if (!normalized) {
+    return DEFAULT_LOCALE
+  }
+  if (normalized === 'en' || normalized === 'en-us' || normalized === 'en_us') {
+    return EN_LOCALE
+  }
+  if (normalized === 'zh' || normalized === 'zh-cn' || normalized === 'zh_cn' || normalized === 'zh-hans') {
+    return ZH_LOCALE
+  }
+  return normalized.startsWith('en') ? EN_LOCALE : ZH_LOCALE
+}
+
+export function getLocaleShort(locale) {
+  return normalizeLocale(locale) === EN_LOCALE ? 'en' : 'zh'
+}
+
+export function getCurrentLocale() {
+  const stateLocale = store && store.state ? store.state.vuex_locale : ''
+  return normalizeLocale(stateLocale || safeReadStorageLocale())
+}
+
+export function getCurrentLanguage() {
+  return getLocaleShort(getCurrentLocale())
+}
+
+export function getNextLocale(locale) {
+  return normalizeLocale(locale) === EN_LOCALE ? ZH_LOCALE : EN_LOCALE
+}
+
+export function resolveLanguageHeader(locale) {
+  return getLocaleShort(locale) === 'en' ? 'en-US' : 'zh-CN'
+}
+
+export function formatI18nText(template, params = {}) {
+  return String(template || '').replace(/\{(\w+)\}/g, (match, key) => {
+    return Object.prototype.hasOwnProperty.call(params, key) ? params[key] : match
+  })
+}
+
+function getMessageText(messages = {}, locale, key) {
+  const shortLocale = getLocaleShort(locale)
+  const fallbackMessages = messages.zh || messages[ZH_LOCALE] || {}
+  const scopedMessages = messages[shortLocale] || messages[normalizeLocale(locale)] || fallbackMessages
+  if (scopedMessages[key] !== undefined) {
+    return scopedMessages[key]
+  }
+  return fallbackMessages[key]
+}
+
+export function translateMessages(messages = {}, locale, key, params = {}) {
+  const text = getMessageText(messages, locale, key)
+  return formatI18nText(text !== undefined ? text : key, params)
+}
+
+export function getMessageScope(messages = {}, namespace = '') {
+  if (!namespace) {
+    return messages
+  }
+  return String(namespace)
+    .split('.')
+    .filter(Boolean)
+    .reduce((current, segment) => {
+      if (!current || typeof current !== 'object') {
+        return undefined
+      }
+      return current[segment]
+    }, messages)
+}
+
+export function getGlobalMessages(namespace = '') {
+  if (!namespace) {
+    return globalMessages
+  }
+  const zhScope = getMessageScope(globalMessages.zh || globalMessages[ZH_LOCALE] || {}, namespace)
+  const enScope = getMessageScope(globalMessages.en || globalMessages[EN_LOCALE] || {}, namespace)
+  
+  if (!zhScope && !enScope) {
+    return undefined
+  }
+  
+  return {
+    zh: zhScope || {},
+    en: enScope || {}
+  }
+}
+
+export function translateGlobalMessages(namespace, locale, key, params = {}) {
+  const scopedMessages = getGlobalMessages(namespace)
+  if (!scopedMessages || typeof scopedMessages !== 'object') {
+    return key
+  }
+  return translateMessages(scopedMessages, locale, key, params)
+}
+
+export function getGlobalMessage(namespace, locale, key, params = {}) {
+  const scopedMessages = getGlobalMessages(namespace)
+  if (!scopedMessages || typeof scopedMessages !== 'object') {
+    return ''
+  }
+  const text = getMessageText(scopedMessages, locale, key)
+  return text === undefined ? '' : formatI18nText(text, params)
+}
+
+export function pickLocalizedText(options = {}) {
+  const locale = getLocaleShort(options.locale)
+  const zhText = options.zh !== undefined ? options.zh : ''
+  const enText = options.en !== undefined ? options.en : zhText
+  if (locale === 'en') {
+    return enText || options.fallback || zhText || ''
+  }
+  return zhText || options.fallback || enText || ''
+}
diff --git a/utils/login-helper.js b/utils/login-helper.js
new file mode 100644
index 0000000..1f96ece
--- /dev/null
+++ b/utils/login-helper.js
@@ -0,0 +1,170 @@
+import {
+  buildUserFromRegistrationApplication,
+  normalizeUser
+} from './flow'
+
+function getText(language, zhText, enText) {
+  return String(language || 'zh').trim().toLowerCase() === 'en' ? enText : zhText
+}
+
+function getResponseData(response = {}) {
+  if (response && response.data && typeof response.data === 'object') {
+    return response.data
+  }
+  return response || {}
+}
+
+export function matchRegisteredUser(user = {}, account = '') {
+  const source = user || {}
+  const currentAccount = String(account || '').trim()
+  const candidateAccounts = [
+    source.account,
+    source.username,
+    source.email
+  ].map(value => String(value || '').trim()).filter(Boolean)
+
+  if (!currentAccount || !candidateAccounts.length) {
+    return null
+  }
+
+  if (!candidateAccounts.includes(currentAccount)) {
+    return null
+  }
+
+  return source
+}
+
+export function pickLatestRegistration(response = {}, options = {}) {
+  const source = options || {}
+  const account = String(source.account || '').trim()
+  const responseData = getResponseData(response)
+  const list = Array.isArray(responseData.data)
+    ? responseData.data
+    : (Array.isArray(responseData) ? responseData : [])
+
+  const matchedList = list.filter(item => {
+    if (!item) {
+      return false
+    }
+    return item.account === account || item.email === account
+  })
+  const targetList = matchedList.length ? matchedList : list
+
+  return targetList[0] || null
+}
+
+export function extractLoginSession(response = {}, language = 'zh') {
+  const responseData = getResponseData(response)
+  const nestedData = responseData && responseData.data && typeof responseData.data === 'object'
+    ? responseData.data
+    : {}
+  const token = responseData.accessToken
+    || responseData.token
+    || nestedData.accessToken
+    || nestedData.token
+    || response.accessToken
+    || response.token
+    || ''
+  const expires = responseData.expires
+    || responseData.expireTime
+    || nestedData.expires
+    || nestedData.expireTime
+    || response.expires
+    || response.expireTime
+    || ''
+
+  if (!token) {
+    throw new Error(getText(language, '登录成功但未返回 accessToken', 'Login succeeded but accessToken is missing'))
+  }
+
+  return {
+    token,
+    expires
+  }
+}
+
+export function buildHandledLoginError(language = 'zh', options = {}) {
+  const source = options || {}
+  return {
+    title: source.title || '',
+    navigateToAuthResult: source.navigateToAuthResult === true
+  }
+}
+
+export function buildLoginSessionUser(options = {}) {
+  const source = options || {}
+  const latestRegistration = source.latestRegistration || null
+  const matchedLocalUser = source.matchedLocalUser || null
+  const account = source.account || ''
+  const password = source.password || ''
+  const language = source.language || 'zh'
+
+  if (latestRegistration) {
+    return buildUserFromRegistrationApplication(latestRegistration, {
+      password,
+      language
+    })
+  }
+
+  if (matchedLocalUser) {
+    return matchedLocalUser
+  }
+
+  return normalizeUser({
+    account,
+    username: account,
+    password
+  })
+}
+
+export function resolveLoginPreparation(options = {}) {
+  const source = options || {}
+  const language = source.language || 'zh'
+  const matchedLocalUser = source.matchedLocalUser || null
+  const latestRegistration = source.latestRegistration || null
+  const account = source.account || ''
+  const password = source.password || ''
+
+  if (!latestRegistration) {
+    return {
+      ok: true,
+      sessionUser: buildLoginSessionUser({
+        matchedLocalUser,
+        account,
+        password,
+        language
+      })
+    }
+  }
+
+  if (latestRegistration.approvalStatus === 0) {
+    return {
+      ok: false,
+      handledError: buildHandledLoginError(language, {
+        title: getText(language, '注册申请审核中，暂不能登录', 'Registration is under review'),
+        navigateToAuthResult: true
+      })
+    }
+  }
+
+  if (latestRegistration.approvalStatus === -1) {
+    return {
+      ok: false,
+      handledError: buildHandledLoginError(language, {
+        title: latestRegistration.approveReason || getText(language, '注册申请已驳回', 'Rejected'),
+        navigateToAuthResult: true
+      })
+    }
+  }
+
+  return {
+    ok: true,
+    sessionUser: buildLoginSessionUser({
+      latestRegistration,
+      matchedLocalUser,
+      account,
+        password,
+        language
+    })
+  }
+}
diff --git a/utils/message-helper.js b/utils/message-helper.js
new file mode 100644
index 0000000..87ed3e7
--- /dev/null
+++ b/utils/message-helper.js
@@ -0,0 +1,49 @@
+export function resolveNotificationList(response) {
+  const payload = response && response.data ? response.data : response
+  if (payload && Array.isArray(payload.data)) {
+    return payload.data
+  }
+  if (payload && payload.data && Array.isArray(payload.data.data)) {
+    return payload.data.data
+  }
+  if (Array.isArray(payload)) {
+    return payload
+  }
+  return []
+}
+
+export function resolveNotificationUnreadTotal(response) {
+  const payload = response && response.data ? response.data : response
+  return Number((payload && payload.total) || (payload && payload.data && payload.data.total) || 0)
+}
+
+export function extractInspectionList(response) {
+  const payload = response && response.data ? response.data : response
+  if (Array.isArray(payload)) {
+    return payload
+  }
+  if (payload && Array.isArray(payload.data)) {
+    return payload.data
+  }
+  return []
+}
+
+export function isPendingInspectionRecord(record) {
+  return !!record && record.checkedUserAgree !== true && record.checkedUserAgree !== false
+}
+
+export function countPendingInspectionRecords(list = []) {
+  return (Array.isArray(list) ? list : []).filter(item => isPendingInspectionRecord(item)).length
+}
+
+export function formatMessageDateTime(value) {
+  if (!value) {
+    return ''
+  }
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return String(value).replace('T', ' ').slice(0, 16)
+  }
+  const pad = item => String(item).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
diff --git a/utils/messages.js b/utils/messages.js
new file mode 100644
index 0000000..eca7d66
--- /dev/null
+++ b/utils/messages.js
@@ -0,0 +1,47 @@
+const MESSAGE_DETAIL_KEY = 'messageDetailPayload'
+const MESSAGE_LIST_KEY = 'messageListSnapshot'
+
+function normalizeLookupValue(value = '') {
+  return String(value || '').trim()
+}
+
+function getMessageStorageKey(baseKey, language = '') {
+  const normalizedLanguage = String(language || '').trim().toLowerCase() === 'en' ? 'en' : 'zh'
+  return `${baseKey}_${normalizedLanguage}`
+}
+
+export function saveMessageDetailPayload(payload = {}, language = '') {
+  uni.setStorageSync(getMessageStorageKey(MESSAGE_DETAIL_KEY, language), payload || {})
+  return payload || {}
+}
+
+export function getMessageDetailPayload(language = '') {
+  return uni.getStorageSync(getMessageStorageKey(MESSAGE_DETAIL_KEY, language)) || {}
+}
+
+export function saveMessageListSnapshot(list = [], language = '') {
+  const nextList = Array.isArray(list) ? list : []
+  uni.setStorageSync(getMessageStorageKey(MESSAGE_LIST_KEY, language), nextList)
+  return nextList
+}
+
+export function getMessageListSnapshot(language = '') {
+  const list = uni.getStorageSync(getMessageStorageKey(MESSAGE_LIST_KEY, language))
+  return Array.isArray(list) ? list : []
+}
+
+export function findMessageDetailPayload(id = '', code = '', language = '') {
+  const targetId = normalizeLookupValue(id)
+  const targetCode = normalizeLookupValue(code)
+  const list = getMessageListSnapshot(language)
+
+  return list.find(item => {
+    const currentId = normalizeLookupValue(item && item.id)
+    const currentCode = normalizeLookupValue(item && item.code)
+    return (targetId && currentId === targetId) || (targetCode && currentCode === targetCode)
+  }) || {}
+}
+
+export function clearMessageDetailPayload(language = '') {
+  uni.removeStorageSync(getMessageStorageKey(MESSAGE_DETAIL_KEY, language))
+}
diff --git a/utils/navigation-title.js b/utils/navigation-title.js
new file mode 100644
index 0000000..252c55e
--- /dev/null
+++ b/utils/navigation-title.js
@@ -0,0 +1,16 @@
+import { getGlobalMessage, normalizeLocale } from './i18n'
+
+export function getNavigationTitle(route = '', locale) {
+  return getGlobalMessage('navigation.routes', normalizeLocale(locale), String(route || '').trim())
+}
+
+export function syncNavigationBarTitle(route = '', locale) {
+  const title = getNavigationTitle(route, locale)
+  if (!title) {
+    return ''
+  }
+  uni.setNavigationBarTitle({
+    title
+  })
+  return title
+}
diff --git a/utils/request.js b/utils/request.js
new file mode 100644
index 0000000..783e2ac
--- /dev/null
+++ b/utils/request.js
@@ -0,0 +1,210 @@
+import { config } from '../config.js'
+import { clearLoginSession, getAuthToken } from './app-state'
+import { getCurrentLanguage } from './i18n'
+
+const API_BASE_URL = config.baseURL
+const FILE_BASE_URL = config.filePrefix
+const FIXED_PROVIDER_TYPE = 'WechatMiniProgram'
+
+function getRequestText(key = '') {
+  const language = getCurrentLanguage()
+  const isEn = language === 'en'
+  const map = {
+    requestFailed: isEn ? 'Request failed' : '请求失败',
+    loginExpired: isEn ? 'Login expired. Please sign in again' : '登录已过期，请重新登录',
+    tooManyRequests: isEn ? 'Too many requests. Please try again later' : '操作太频繁了，请稍后再试',
+    networkFailed: isEn ? 'Network request failed' : '网络请求失败'
+  }
+  return map[key] || ''
+}
+
+function normalizeUrl(url = '') {
+  if (/^https?:\/\//i.test(url)) {
+    return url
+  }
+  if (!url) {
+    return API_BASE_URL
+  }
+  if (url.startsWith('/')) {
+    return `${API_BASE_URL}${url}`
+  }
+  return `${API_BASE_URL}/${url}`
+}
+
+function isPlainRequestObject(value) {
+  return !!value && typeof value === 'object' && !Array.isArray(value)
+}
+
+function appendFixedProviderType(payload) {
+  if (isPlainRequestObject(payload)) {
+    return {
+      ...payload,
+      ProviderType: FIXED_PROVIDER_TYPE
+    }
+  }
+
+  return {
+    ProviderType: FIXED_PROVIDER_TYPE
+  }
+}
+
+function hasBusinessCode(payload) {
+  return !!payload && typeof payload === 'object' && Object.prototype.hasOwnProperty.call(payload, 'code')
+}
+
+function isBusinessSuccess(payload) {
+  if (!hasBusinessCode(payload)) {
+    return true
+  }
+
+  const code = String(payload.code)
+  return code === '200' || code === '0'
+}
+
+function normalizeBusinessError(payload, fallback = {}) {
+  const message = (payload && (payload.msg || payload.message)) || fallback.errMsg || getRequestText('requestFailed')
+  return {
+    ...fallback,
+    ...(payload && typeof payload === 'object' ? payload : {}),
+    message
+  }
+}
+
+function getCurrentRoute() {
+  const pages = getCurrentPages()
+  if (!Array.isArray(pages) || !pages.length) {
+    return ''
+  }
+  const currentPage = pages[pages.length - 1] || {}
+  return currentPage.route || ''
+}
+
+function shouldSkipUnauthorizedRedirect() {
+  const route = getCurrentRoute()
+  return route === 'pkgAccount/login/login' || route === 'pages/login/index' || route === 'pages/login/login'
+}
+
+function handleUnauthorized(responseData) {
+  clearLoginSession()
+
+  if (shouldSkipUnauthorizedRedirect()) {
+    return
+  }
+
+  uni.showToast({
+    title: getRequestText('loginExpired'),
+    icon: 'none',
+    duration: 2000
+  })
+
+  setTimeout(() => {
+    uni.reLaunch({
+      url: '/pkgAccount/login/login'
+    })
+  }, 500)
+}
+
+export function request(options = {}) {
+  const {
+    url = '',
+    method = 'GET',
+    data,
+    params,
+    header = {},
+    hideErrorToast = false,
+    withAuth = true
+  } = options
+
+  return new Promise((resolve, reject) => {
+    const token = withAuth ? getAuthToken() : ''
+    const uppercaseMethod = String(method || 'GET').toUpperCase()
+    const normalizedParams = appendFixedProviderType(params)
+    const normalizedData = appendFixedProviderType(data)
+    uni.request({
+      url: normalizeUrl(url),
+      method: uppercaseMethod,
+      data: uppercaseMethod === 'GET'
+        ? (params !== undefined ? normalizedParams : normalizedData)
+        : normalizedData,
+      header: {
+        'Content-Type': 'application/json',
+        'X-Requested-Language': getCurrentLanguage(),
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        ...header
+      },
+      success: (res) => {
+        const { statusCode, data: responseData } = res
+        if ((statusCode === 401) || (responseData && Number(responseData.code) === 401)) {
+          handleUnauthorized(responseData)
+          reject(normalizeBusinessError(responseData, res))
+          return
+        }
+
+        if (statusCode === 429) {
+          if (!hideErrorToast) {
+            uni.showToast({
+              title: getRequestText('tooManyRequests'),
+              icon: 'none',
+              duration: 2500
+            })
+          }
+          reject({
+            ...normalizeBusinessError(responseData, res),
+            message: getRequestText('tooManyRequests'),
+            __toastShown: !hideErrorToast
+          })
+          return
+        }
+
+        if (statusCode >= 200 && statusCode < 300) {
+          if (isBusinessSuccess(responseData)) {
+            resolve(responseData)
+            return
+          }
+
+          const businessError = normalizeBusinessError(responseData, res)
+          if (!hideErrorToast) {
+            uni.showToast({
+              title: businessError.message || getRequestText('requestFailed'),
+              icon: 'none',
+              duration: 2000
+            })
+          }
+          reject({
+            ...businessError,
+            __toastShown: !hideErrorToast
+          })
+          return
+        }
+
+        const requestError = normalizeBusinessError(responseData, res)
+        if (!hideErrorToast) {
+          uni.showToast({
+            title: requestError.message || getRequestText('requestFailed'),
+            icon: 'none'
+          })
+        }
+        reject({
+          ...requestError,
+          __toastShown: !hideErrorToast
+        })
+      },
+      fail: (error) => {
+        const requestError = normalizeBusinessError(null, error)
+        if (!hideErrorToast) {
+          uni.showToast({
+            title: requestError.message || getRequestText('networkFailed'),
+            icon: 'none'
+          })
+        }
+        reject({
+          ...requestError,
+          __toastShown: !hideErrorToast
+        })
+      }
+    })
+  })
+}
+
+export { API_BASE_URL, FILE_BASE_URL }
+export default request
diff --git a/utils/rich-text.js b/utils/rich-text.js
new file mode 100644
index 0000000..faf6207
--- /dev/null
+++ b/utils/rich-text.js
@@ -0,0 +1,20 @@
+import { addFilePrefix } from './common'
+
+export function normalizeRichTextImages(content = '', imageStyle = '') {
+  const normalizedStyle = String(imageStyle || '').trim()
+
+  return String(content || '').replace(/<img\b([^>]*)>/gi, (match, rawAttrs = '') => {
+    const attrs = String(rawAttrs || '')
+      .replace(/\swidth\s*=\s*(['"]).*?\1/gi, '')
+      .replace(/\sheight\s*=\s*(['"]).*?\1/gi, '')
+      .replace(/\sstyle\s*=\s*(['"]).*?\1/gi, '')
+    const normalizedAttrs = attrs.replace(/\ssrc\s*=\s*(['"])(.*?)\1/gi, (srcMatch, quote, srcValue = '') => {
+      const normalizedSrc = addFilePrefix(srcValue)
+      return normalizedSrc ? ` src=${quote}${normalizedSrc}${quote}` : srcMatch
+    })
+
+    return normalizedStyle
+      ? `<img${normalizedAttrs} style="${normalizedStyle}" />`
+      : `<img${normalizedAttrs} />`
+  })
+}
diff --git a/utils/room-api.js b/utils/room-api.js
new file mode 100644
index 0000000..13041b6
--- /dev/null
+++ b/utils/room-api.js
@@ -0,0 +1,7 @@
+export {
+  areaPagination,
+  roomDetail,
+  roomTypeDetail,
+  roomPagination,
+  roomtypeList
+} from '../api/index'
diff --git a/utils/select-room-normalizers.js b/utils/select-room-normalizers.js
new file mode 100644
index 0000000..e43006f
--- /dev/null
+++ b/utils/select-room-normalizers.js
@@ -0,0 +1,406 @@
+import { addFilePrefix } from './common'
+import { getCurrentLanguage } from './i18n'
+
+const BANNER_TEXT_FALLBACK_MAP = {
+  title: {
+    '绿居·和山国际公寓': 'Luju Heshan Intl. Apartments',
+    '和山国际公寓': 'Heshan Intl. Apartments',
+    '乾晖里': 'Qianhui Residence'
+  },
+  subtitle: {
+    '国际轻奢公寓': 'International Light Luxury Apartment',
+    '城芯静境': 'Urban Quiet Retreat'
+  },
+  tab: {
+    '国际轻奢公寓': 'Light Luxury Living',
+    '城芯静境': 'Urban Quiet Retreat'
+  },
+  desc: {
+    '山境雅境 | 涉外住区 | 精致旅居': 'Mountain Views | Global Living | Boutique Stay'
+  },
+  areaLabel: {}
+}
+
+const VALUE_TEXT_FALLBACK_MAP = {
+  tags: {
+    '押一付一': 'Monthly Deposit',
+    '大型超市': 'Large Supermarket',
+    '地铁口': 'Near Metro',
+    '生活便利': 'Convenient Living',
+    '独立厨卫': 'Private Kitchen & Bath',
+    '商圈环绕': 'City Center',
+    '民水民电': 'Residential Utilities',
+    '拎包入住': 'Move-in Ready',
+    '近地铁': 'Near Metro',
+    '智能家居': 'Smart Home'
+  },
+  payMethod: {
+    '押一付一': 'Monthly Deposit',
+    '押一付三': 'Deposit 1, Pay 3',
+    '押一付六': 'Deposit 1, Pay 6',
+    '押一付年': 'Deposit 1, Annual Pay',
+    '月付': 'Monthly Pay',
+    '季付': 'Quarterly Pay',
+    '半年付': 'Semiannual Pay',
+    '年付': 'Annual Pay'
+  },
+  facility: {
+    '大型超市': 'Large Supermarket',
+    '地铁口': 'Near Metro',
+    '快递柜': 'Parcel Locker',
+    '健身房': 'Gym',
+    '自习室': 'Study Room',
+    '洗衣房': 'Laundry Room',
+    '停车场': 'Parking',
+    '便利店': 'Convenience Store',
+    '公共厨房': 'Shared Kitchen',
+    '休闲区': 'Lounge'
+  }
+}
+
+function firstNonEmptyText(...values) {
+  const matched = values.find((value) => String(value || '').trim())
+  return matched ? String(matched).trim() : ''
+}
+
+function normalizePayCount(value) {
+  if (value === '' || value === null || typeof value === 'undefined') {
+    return null
+  }
+
+  const parsed = Number(value)
+  if (Number.isFinite(parsed) && parsed >= 0) {
+    return parsed
+  }
+
+  return null
+}
+
+function formatPayCount(value) {
+  return String(value)
+}
+
+function buildPayMethodFromPricePlan(pricePlanDetail = {}, fallbackText = '') {
+  const deposit = normalizePayCount(pricePlanDetail.deposit)
+  const prepay = normalizePayCount(pricePlanDetail.prepay)
+
+  if (deposit !== null && prepay !== null) {
+    return `押${formatPayCount(deposit)}付${formatPayCount(prepay)}`
+  }
+
+  return String(fallbackText || '').trim()
+}
+
+export function compactEnglishText(text = '', maxLength = 24) {
+  const rawText = String(text || '').trim()
+  if (!rawText) {
+    return ''
+  }
+
+  const compacted = rawText
+    .replace(/\bInternational\b/gi, 'Intl.')
+    .replace(/\bApartment(s)?\b/gi, 'Apt$1')
+    .replace(/\bResidence\b/gi, 'Resid.')
+    .replace(/\bBuilding\b/gi, 'Bldg.')
+    .replace(/\bCommunity\b/gi, 'Comm.')
+    .replace(/\bBoulevard\b/gi, 'Blvd.')
+    .replace(/\bRoad\b/gi, 'Rd.')
+    .replace(/\bStreet\b/gi, 'St.')
+    .replace(/\bAvenue\b/gi, 'Ave.')
+    .replace(/\s{2,}/g, ' ')
+    .trim()
+
+  if (compacted.length <= maxLength) {
+    return compacted
+  }
+
+  return `${compacted.slice(0, Math.max(maxLength - 3, 1)).trim()}...`
+}
+
+function getSelectRoomText(key = '', params = {}) {
+  const isEn = getCurrentLanguage() === 'en'
+  const map = {
+    featuredContent: isEn ? 'Featured Picks' : '精选内容',
+    recommendedTab: isEn ? `Featured ${params.index}` : `推荐${params.index}`
+  }
+
+  return map[key] || ''
+}
+
+function localizeKnownValue(field, text = '', language = getCurrentLanguage()) {
+  const normalizedText = String(text || '').trim()
+  if (!normalizedText || language !== 'en') {
+    return normalizedText
+  }
+
+  if (field === 'payMethod') {
+    const payMethodMatch = normalizedText.match(/^押(\d+(?:\.\d+)?)付(\d+(?:\.\d+)?)$/)
+    if (payMethodMatch) {
+      return `Deposit ${payMethodMatch[1]}, Pay ${payMethodMatch[2]}`
+    }
+  }
+
+  const fieldMap = VALUE_TEXT_FALLBACK_MAP[field] || {}
+  return fieldMap[normalizedText] || normalizedText
+}
+
+export function localizeHousingTag(tag = '', language = getCurrentLanguage()) {
+  return localizeKnownValue('tags', tag, language)
+}
+
+export function localizePayMethodText(payMethod = '', language = getCurrentLanguage()) {
+  return localizeKnownValue('payMethod', payMethod, language)
+}
+
+export function localizeFacilityName(name = '', language = getCurrentLanguage()) {
+  return localizeKnownValue('facility', name, language)
+}
+
+function resolveBannerFallbackText(field, text) {
+  const normalizedText = String(text || '').trim()
+  if (!normalizedText) {
+    return ''
+  }
+  return BANNER_TEXT_FALLBACK_MAP[field] && BANNER_TEXT_FALLBACK_MAP[field][normalizedText]
+    ? BANNER_TEXT_FALLBACK_MAP[field][normalizedText]
+    : ''
+}
+
+function extractLabelValues(...sources) {
+  const values = sources.flatMap((source) => {
+    if (!Array.isArray(source)) {
+      return []
+    }
+
+    return source.map((item) => {
+      if (!item) {
+        return ''
+      }
+      if (typeof item === 'string') {
+        return item
+      }
+      if (typeof item === 'object') {
+        return item.value || item.label || item.name || item.key || ''
+      }
+      return ''
+    })
+  })
+
+  return [...new Set(values.filter(Boolean))]
+}
+
+export function parseBannerExtra(extra) {
+  if (!extra) {
+    return {}
+  }
+
+  if (typeof extra === 'object') {
+    return extra
+  }
+
+  try {
+    return JSON.parse(extra)
+  } catch (error) {
+    return {}
+  }
+}
+
+export function normalizeBannerImage(imageUrl) {
+  if (!imageUrl) {
+    return ''
+  }
+
+  if (/^https?:\/\//i.test(imageUrl)) {
+    return imageUrl
+  }
+  return addFilePrefix(imageUrl)
+}
+
+function isImageLikeLogo(value) {
+  if (!value) {
+    return false
+  }
+
+  return /^(https?:)?\/\//i.test(value) || value.startsWith('/') || value.startsWith('data:image')
+}
+
+function normalizeBannerLogo(extra = {}) {
+  const rawType = String(extra.logoType || '').trim().toLowerCase()
+  const rawLogo = String(extra.logo || '').trim()
+  const rawLogoIcon = String(extra.logoIcon || '').trim()
+  const rawLogoImage = String(extra.logoImage || '').trim()
+  const isImage = rawType === 'image' || (!rawType && !rawLogoImage && isImageLikeLogo(rawLogo))
+  const logoImageSource = rawLogoImage || (isImage ? rawLogo : '')
+  const logoIconSource = rawLogoIcon || (!isImage ? rawLogo : '')
+
+  return {
+    logoType: isImage ? 'image' : 'icon',
+    logoImage: normalizeBannerImage(logoImageSource),
+    logoIcon: logoIconSource,
+  }
+}
+
+function normalizeBannerLogoIconClass(icon) {
+  const normalizedIcon = String(icon || '').trim().toLowerCase()
+  if (!normalizedIcon) {
+    return ''
+  }
+
+  return normalizedIcon.startsWith('ri-') ? normalizedIcon : `ri-${normalizedIcon}`
+}
+
+export function normalizeBannerItem(item = {}, index = 0) {
+  const extra = parseBannerExtra(item.extra)
+  const title = firstNonEmptyText(item.title, item.name, extra.title, extra.mainTitle, extra.titleZh, getSelectRoomText('featuredContent'))
+  const titleEn = firstNonEmptyText(
+    item.titleEn,
+    item.title_en,
+    item.nameEn,
+    item.name_en,
+    extra.titleEn,
+    extra.title_en,
+    extra.enTitle,
+    extra.mainTitleEn,
+    extra.titleEnUs,
+    resolveBannerFallbackText('title', title),
+    'Featured Picks'
+  )
+  const subtitle = firstNonEmptyText(extra.subTitle, extra.subtitle, extra.remark, extra.note, item.remark)
+  const subtitleEn = firstNonEmptyText(
+    extra.subTitleEn,
+    extra.subtitleEn,
+    extra.sub_title_en,
+    extra.enSubtitle,
+    extra.remarkEn,
+    extra.remark_en,
+    extra.noteEn,
+    item.remarkEn,
+    item.remark_en,
+    resolveBannerFallbackText('subtitle', subtitle)
+  )
+  const desc = firstNonEmptyText(extra.desc, extra.description, extra.mainDesc, extra.slogan)
+  const descEn = firstNonEmptyText(
+    extra.descEn,
+    extra.descriptionEn,
+    extra.desc_en,
+    extra.description_en,
+    extra.enDesc,
+    extra.mainDescEn,
+    extra.sloganEn,
+    resolveBannerFallbackText('desc', desc)
+  )
+  const areaLabel = firstNonEmptyText(extra.areaName, extra.areaLabel, extra.area)
+  const areaLabelEn = firstNonEmptyText(extra.areaNameEn, extra.areaLabelEn, extra.area_name_en, extra.area_label_en, extra.enAreaName, resolveBannerFallbackText('areaLabel', areaLabel))
+  const tab = firstNonEmptyText(extra.tab, extra.topTab, title, getSelectRoomText('recommendedTab', { index: index + 1 }))
+  const tabEn = firstNonEmptyText(extra.tabEn, extra.tab_en, extra.enTab, extra.topTabEn, resolveBannerFallbackText('tab', tab), titleEn, `Featured ${index + 1}`)
+  const roomTypes = Array.isArray(extra.roomTypes) ? extra.roomTypes : []
+  const tags = Array.isArray(extra.tags) && extra.tags.length
+    ? extra.tags.filter(Boolean)
+    : []
+  const logoInfo = normalizeBannerLogo(extra)
+
+  return {
+    id: item.no || item.code || item.id || `banner-${index}`,
+    tab,
+    tabEn,
+    tabEnDisplay: compactEnglishText(tabEn, 18),
+    title,
+    titleEn,
+    titleEnDisplay: compactEnglishText(titleEn, 24),
+    subtitle,
+    subtitleEn,
+    subtitleEnDisplay: compactEnglishText(subtitleEn, 28),
+    desc,
+    descEn,
+    descEnDisplay: compactEnglishText(descEn, 36),
+    areaCode: extra.areaCode || extra.area || '',
+    areaLabel,
+    areaLabelEn,
+    areaLabelEnDisplay: compactEnglishText(areaLabelEn, 22),
+    roomTypes,
+    recommendLabel: extra.recommendLabel || extra.recommend || '',
+    image: normalizeBannerImage(item.imageUrl || extra.imageUrl),
+    tags,
+    logoType: logoInfo.logoType,
+    logoImage: logoInfo.logoImage,
+    logoIcon: logoInfo.logoIcon,
+    logoIconClass: normalizeBannerLogoIconClass(logoInfo.logoIcon),
+  }
+}
+
+export function normalizeImageList(item = {}) {
+  const candidates = []
+  const listFields = [item.images, item.imageUrls, item.pictures, item.pictureList]
+
+  listFields.forEach((field) => {
+    if (Array.isArray(field)) {
+      field.forEach((image) => {
+        const normalized = normalizeBannerImage(image)
+        if (normalized) {
+          candidates.push(normalized)
+        }
+      })
+    }
+  })
+
+  ;[item.imageUrl, item.image, item.cover, item.picture].forEach((image) => {
+    const normalized = normalizeBannerImage(image)
+    if (normalized) {
+      candidates.push(normalized)
+    }
+  })
+
+  return [...new Set(candidates)]
+}
+
+export function normalizeAreaRoomType(item = {}) {
+  const price = item.pricePlanDetail && typeof item.pricePlanDetail.price !== 'undefined'
+    ? String(item.pricePlanDetail.price)
+    : ''
+  const priceValue = item.pricePlanDetail && typeof item.pricePlanDetail.price !== 'undefined'
+    ? Number(item.pricePlanDetail.price)
+    : Number.MAX_SAFE_INTEGER
+  const tags = extractLabelValues(item.labelList, item.tags, item.labels, item.featureTags)
+
+  return {
+    code: item.code || '',
+    name: item.name || '',
+    nameEn: item.nameEn || '',
+    nameEnDisplay: compactEnglishText(item.nameEn || '', 22),
+    description: item.description || '',
+    descriptionEn: item.descriptionEn || '',
+    descriptionEnDisplay: compactEnglishText(item.descriptionEn || '', 34),
+    images: normalizeImageList(item),
+    price,
+    priceValue,
+    payMethod: buildPayMethodFromPricePlan(item.pricePlanDetail, item.pricePlanDetail && item.pricePlanDetail.payMethod),
+    tags
+  }
+}
+
+export function normalizeAreaItem(item = {}) {
+  const roomTypes = Array.isArray(item.roomTypes)
+    ? item.roomTypes
+      .map((roomType) => normalizeAreaRoomType(roomType))
+      .filter((roomType) => roomType.code || roomType.name)
+    : []
+  const tags = extractLabelValues(item.labelList, item.tags, item.labels, item.featureTags)
+
+  return {
+    code: item.code || '',
+    name: item.name || '',
+    nameEn: item.nameEn || '',
+    nameEnDisplay: compactEnglishText(item.nameEn || '', 24),
+    description: item.description || '',
+    descriptionEn: item.descriptionEn || '',
+    descriptionEnDisplay: compactEnglishText(item.descriptionEn || '', 36),
+    address: item.address || '',
+    addressEn: item.addressEn || '',
+    addressEnDisplay: compactEnglishText(item.addressEn || '', 32),
+    latitude: item.latitude || item.lat || '',
+    longitude: item.longitude || item.lng || '',
+    images: normalizeImageList(item),
+    tags,
+    roomTypes
+  }
+}
diff --git a/utils/session-sync.js b/utils/session-sync.js
new file mode 100644
index 0000000..a261f7f
--- /dev/null
+++ b/utils/session-sync.js
@@ -0,0 +1,346 @@
+import {
+  clearBookingState,
+  clearMyRoomData,
+  getCurrentUser,
+  getLoginStatus,
+  saveBookingList,
+  saveCurrentBooking,
+  saveEffectiveContracts,
+  saveCurrentUser,
+  saveMyRoomData,
+  savePendingContractCount,
+  savePendingContracts,
+  saveRegisteredUser,
+  setCheckedInStatus
+} from './app-state'
+import {
+  getMyEffectiveContracts,
+  getMyPendingSignContracts,
+  orderSearchedMePage
+} from '@/api/index.js'
+import store from '@/store'
+import {
+  normalizeBookingList,
+  parseOrderListResponse,
+  pickCurrentBooking,
+  pickCurrentStayOrder
+} from './booking-helper'
+import { getCurrentLanguage } from './i18n'
+
+const SYNC_TTL = 3000
+
+let syncStayStatePromise = null
+let lastSyncStayStateAt = 0
+
+function getSessionSyncText(key = '') {
+  const isEn = getCurrentLanguage() === 'en'
+  const map = {
+    pendingContract: isEn ? 'Pending Contract Signature' : '待签合同'
+  }
+
+  return map[key] || ''
+}
+
+function parseContractList(response) {
+  const payload = response && response.data ? response.data : response
+
+  if (Array.isArray(payload)) {
+    return payload
+  }
+
+  if (payload && Array.isArray(payload.data)) {
+    return payload.data
+  }
+
+  if (payload && payload.data && Array.isArray(payload.data.data)) {
+    return payload.data.data
+  }
+
+  return []
+}
+
+function buildLeaseText(order = {}) {
+  const start = String(order.startDate || order.start || order.checkinDate || '').slice(0, 10)
+  const end = String(order.endDate || order.end || order.checkoutDate || '').slice(0, 10)
+
+  if (start && end) {
+    return `${start} - ${end}`
+  }
+
+  return start || end || ''
+}
+
+function mapOrderToRoomData(order = {}) {
+  const imageUrls = Array.isArray(order.imageUrls)
+    ? order.imageUrls
+    : typeof order.imageUrls === 'string'
+      ? order.imageUrls.split(',').map(item => item.trim()).filter(Boolean)
+      : []
+
+  const roomLabel = [
+    order.buildingName || order.buildingSectionName || order.unitName || '',
+    order.roomNo || order.roomCode || order.roomName || ''
+  ].filter(Boolean).join(' ')
+
+  const title = [
+    order.areaName || order.campusName || '',
+    order.roomTypeName || order.roomType || ''
+  ].filter(Boolean).join(' · ')
+
+  return {
+    ...order,
+    id: roomLabel || order.roomNo || order.roomCode || order.orderNo || '',
+    roomLabel: roomLabel || order.roomNo || order.roomCode || '',
+    titleZh: title || order.roomTypeName || order.roomName || '当前入住房间',
+    titleEn: order.roomTypeNameEn || title || order.roomTypeName || 'Current Stay',
+    leaseText: buildLeaseText(order),
+    image: order.imageUrl || imageUrls[0] || ''
+  }
+}
+
+function pickFirstValue(...values) {
+  for (let index = 0; index < values.length; index += 1) {
+    const value = values[index]
+    if (value === undefined || value === null) {
+      continue
+    }
+    const text = String(value).trim()
+    if (text) {
+      return text
+    }
+  }
+  return ''
+}
+
+function buildPendingContractQuery() {
+  const user = getCurrentUser() || {}
+  const userCode = pickFirstValue(user.userCode, user.code, user.UserCode)
+  const query = {
+    ProviderType: 'WechatMiniProgram'
+  }
+
+  if (userCode) {
+    query.UserCode = userCode
+  }
+
+  return query
+}
+
+function enrichBookingLanguageFields(booking = {}) {
+  if (!booking || typeof booking !== 'object') {
+    return booking
+  }
+  return {
+    ...booking,
+    statusTextZh: booking.statusTextZh || '待签合同',
+    statusTextEn: booking.statusTextEn || 'Pending Contract Signature'
+  }
+}
+
+function buildContractStepBooking(pendingContracts = []) {
+  const contract = Array.isArray(pendingContracts) ? pendingContracts[0] : null
+  if (!contract || typeof contract !== 'object') {
+    return null
+  }
+
+  return {
+    ...contract,
+    orderNo: contract.orderNo || contract.OrderNo || '',
+    roomName: contract.roomName || contract.roomTypeName || contract.houseTypeName || '',
+    roomTypeName: contract.roomTypeName || contract.houseTypeName || contract.roomName || '',
+    startDate: contract.start || contract.startDate || '',
+    endDate: contract.end || contract.endDate || '',
+    status: 'contract_pending_sign',
+    statusKey: 'contract_pending_sign',
+    statusCode: 10,
+    statusText: getSessionSyncText('pendingContract'),
+    statusTextZh: '待签合同',
+    statusTextEn: 'Pending Contract Signature'
+  }
+}
+
+function syncStoredUser(hasCheckedIn, currentOrder, currentBooking) {
+  const user = getCurrentUser()
+
+  if (!user || typeof user !== 'object' || !Object.keys(user).length) {
+    return
+  }
+
+  const nextUser = {
+    ...user,
+    hasCheckedIn,
+    currentOrder: currentOrder || null,
+    currentBooking: currentBooking || null,
+    bookingStatus: currentBooking ? (currentBooking.status || currentBooking.statusKey || 'none') : 'none',
+    bookingRejectReason: currentBooking ? (currentBooking.rejectReasonText || currentBooking.rejectReason || '') : ''
+  }
+
+  saveCurrentUser(nextUser)
+  saveRegisteredUser(nextUser)
+
+  if (store && store.commit) {
+    store.commit('$tStore', {
+      name: 'vuex_user',
+      value: {
+        ...(store.state && store.state.vuex_user ? store.state.vuex_user : {}),
+        ...nextUser
+      }
+    })
+  }
+}
+
+function syncStoreState({
+  hasCheckedIn = false,
+  currentOrder = null,
+  pendingContracts = [],
+  effectiveContracts = [],
+  orderList = []
+} = {}) {
+  if (!store || !store.commit) {
+    return
+  }
+
+  store.commit('$tStore', {
+    name: 'vuex_checkin_status',
+    value: !!hasCheckedIn
+  })
+  store.commit('$tStore', {
+    name: 'vuex_current_order',
+    value: currentOrder || null
+  })
+  store.commit('$tStore', {
+    name: 'vuex_pending_contracts',
+    value: Array.isArray(pendingContracts) ? pendingContracts : []
+  })
+  store.commit('$tStore', {
+    name: 'vuex_pending_contract_count',
+    value: Array.isArray(pendingContracts) ? pendingContracts.length : 0
+  })
+  store.commit('$tStore', {
+    name: 'vuex_effective_contracts',
+    value: Array.isArray(effectiveContracts) ? effectiveContracts : []
+  })
+  store.commit('$tStore', {
+    name: 'vuex_valid_orders',
+    value: Array.isArray(orderList) ? orderList : []
+  })
+}
+
+function requestStayState(language = 'zh') {
+  return orderSearchedMePage({
+    PageIndex: 1,
+    PageSize: 100,
+    IsExport: false
+  }, language)
+    .then((orderResponse) => {
+      return Promise.all([
+        Promise.resolve(orderResponse),
+        getMyPendingSignContracts(buildPendingContractQuery(), language).catch(() => []),
+        getMyEffectiveContracts({}, language).catch(() => [])
+      ])
+    })
+    .then(([orderResponse, pendingContractsResponse, effectiveContractsResponse]) => {
+      const orderList = normalizeBookingList(parseOrderListResponse(orderResponse), language)
+      const currentOrder = pickCurrentStayOrder(orderList)
+      const pendingContracts = parseContractList(pendingContractsResponse)
+      const effectiveContracts = parseContractList(effectiveContractsResponse)
+      const currentBooking = enrichBookingLanguageFields(pickCurrentBooking(orderList) || buildContractStepBooking(pendingContracts))
+
+      return {
+        hasCheckedIn: !!currentOrder,
+        currentOrder,
+        currentBooking,
+        orderList,
+        pendingContracts,
+        effectiveContracts
+      }
+    })
+}
+
+export function syncLoginStayState(options = {}) {
+  const { language = 'zh', force = false } = options
+
+  if (!getLoginStatus()) {
+    return Promise.resolve({
+      hasCheckedIn: false,
+      currentOrder: null,
+      currentBooking: null,
+      orderList: []
+    })
+  }
+
+  const now = Date.now()
+
+  if (!force && syncStayStatePromise) {
+    return syncStayStatePromise
+  }
+
+  if (!force && lastSyncStayStateAt && now - lastSyncStayStateAt < SYNC_TTL) {
+    return Promise.resolve({
+      skipped: true
+    })
+  }
+
+  const syncSource = store && store.dispatch
+    ? store.dispatch('fetchUserGlobalStatus', {
+      force,
+      language
+    })
+    : requestStayState(language)
+
+  syncStayStatePromise = syncSource
+    .then((result = {}) => {
+      const orderList = Array.isArray(result.orderList)
+        ? result.orderList
+        : (Array.isArray(result.validOrders) ? result.validOrders : [])
+      const pendingContracts = Array.isArray(result.pendingContracts) ? result.pendingContracts : []
+      const effectiveContracts = Array.isArray(result.effectiveContracts) ? result.effectiveContracts : []
+      const currentOrder = result.currentOrder || pickCurrentStayOrder(orderList)
+      const currentBooking = enrichBookingLanguageFields(result.currentBooking || pickCurrentBooking(orderList) || buildContractStepBooking(pendingContracts))
+      const hasCheckedIn = typeof result.hasCheckedIn === 'boolean'
+        ? result.hasCheckedIn
+        : !!currentOrder
+
+      saveBookingList(orderList)
+      if (currentBooking) {
+        saveCurrentBooking(currentBooking)
+      } else {
+        clearBookingState()
+        saveBookingList(orderList)
+      }
+      setCheckedInStatus(hasCheckedIn)
+      savePendingContracts(pendingContracts)
+      savePendingContractCount(pendingContracts.length)
+      saveEffectiveContracts(effectiveContracts)
+
+      if (hasCheckedIn) {
+        saveMyRoomData(mapOrderToRoomData(currentOrder))
+      } else {
+        clearMyRoomData()
+      }
+
+      syncStoreState({
+        hasCheckedIn,
+        currentOrder,
+        pendingContracts,
+        effectiveContracts,
+        orderList
+      })
+      syncStoredUser(hasCheckedIn, currentOrder, currentBooking)
+      lastSyncStayStateAt = Date.now()
+
+      return {
+        hasCheckedIn,
+        currentOrder,
+        currentBooking,
+        orderList,
+        pendingContracts,
+        effectiveContracts
+      }
+    })
+    .finally(() => {
+      syncStayStatePromise = null
+    })
+
+  return syncStayStatePromise
+}
diff --git a/utils/smart-device.js b/utils/smart-device.js
new file mode 100644
index 0000000..47dd88e
--- /dev/null
+++ b/utils/smart-device.js
@@ -0,0 +1,809 @@
+import { getCurrentLanguage } from './i18n'
+
+function safeJsonParse(value, fallback = null) {
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  const text = value.trim()
+  if (!text) {
+    return fallback
+  }
+
+  const looksLikeJson = (
+    (text.startsWith('{') && text.endsWith('}'))
+    || (text.startsWith('[') && text.endsWith(']'))
+  )
+
+  if (!looksLikeJson) {
+    return fallback
+  }
+
+  try {
+    return JSON.parse(text)
+  } catch (error) {
+    return fallback
+  }
+}
+
+function pickFirstFilledValue(...values) {
+  for (let index = 0; index < values.length; index += 1) {
+    const value = values[index]
+    if (value === undefined || value === null) {
+      continue
+    }
+    const text = String(value).trim()
+    if (text) {
+      return text
+    }
+  }
+  return ''
+}
+
+function getSmartDeviceText(key = '', params = {}) {
+  const isEn = getCurrentLanguage() === 'en'
+  const map = {
+    commonSwitch: isEn ? 'General Switch' : '通用开关',
+    slideControl: isEn ? 'Slider Control' : '滑动控制',
+    curtainButton: isEn ? 'Curtain Button' : '窗帘按钮',
+    unknownFunction: isEn ? 'Unknown Function' : '未知功能',
+    fullyOpen: isEn ? 'Fully Open' : '已全开',
+    fullyClosed: isEn ? 'Fully Closed' : '已全关',
+    paused: isEn ? 'Paused' : '已暂停',
+    openness: isEn ? `Open Level ${params.value}%` : `开合度 ${params.value}%`,
+    controllable: isEn ? 'Ready to Control' : '可控制',
+    currentValue: isEn ? `Current Value ${params.value}%` : `当前值 ${params.value}%`,
+    adjustable: isEn ? 'Adjustable' : '可调节',
+    enabled: isEn ? 'Enabled' : '已开启',
+    disabled: isEn ? 'Disabled' : '已关闭',
+    unnamedDevice: isEn ? 'Unnamed Device' : '未命名设备'
+  }
+
+  return map[key] || ''
+}
+
+function collectObjectArray(value, depth = 0) {
+  if (!value || depth > 6) {
+    return []
+  }
+
+  const normalizedValue = typeof value === 'string'
+    ? (safeJsonParse(value, value))
+    : value
+
+  if (Array.isArray(normalizedValue)) {
+    if (normalizedValue.some(item => item && typeof item === 'object' && !Array.isArray(item))) {
+      return normalizedValue
+    }
+
+    for (let index = 0; index < normalizedValue.length; index += 1) {
+      const nestedList = collectObjectArray(normalizedValue[index], depth + 1)
+      if (nestedList.length) {
+        return nestedList
+      }
+    }
+
+    return []
+  }
+
+  if (!normalizedValue || typeof normalizedValue !== 'object') {
+    return []
+  }
+
+  const candidateKeys = ['data', 'list', 'rows', 'items', 'records', 'result', 'payload', '$values']
+  for (let index = 0; index < candidateKeys.length; index += 1) {
+    const key = candidateKeys[index]
+    if (!Object.prototype.hasOwnProperty.call(normalizedValue, key)) {
+      continue
+    }
+    const nestedList = collectObjectArray(normalizedValue[key], depth + 1)
+    if (nestedList.length) {
+      return nestedList
+    }
+  }
+
+  return []
+}
+
+function isSmartDeviceObject(value = {}) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return false
+  }
+
+  if (Array.isArray(value.functions)) {
+    return true
+  }
+
+  const deviceKeys = [
+    'deviceId',
+    'deviceNo',
+    'deviceName',
+    'platformDeviceId',
+    'deviceType',
+    'facilityCode',
+    'facilityType',
+    'currentStatus'
+  ]
+
+  return deviceKeys.some(key => Object.prototype.hasOwnProperty.call(value, key))
+}
+
+function unwrapSmartDevicePayload(value, depth = 0) {
+  if (!value || depth > 6) {
+    return {}
+  }
+
+  const normalizedValue = typeof value === 'string'
+    ? (safeJsonParse(value, value))
+    : value
+
+  if (!normalizedValue || typeof normalizedValue !== 'object') {
+    return {}
+  }
+
+  if (Array.isArray(normalizedValue)) {
+    for (let index = 0; index < normalizedValue.length; index += 1) {
+      const nestedDevice = unwrapSmartDevicePayload(normalizedValue[index], depth + 1)
+      if (Object.keys(nestedDevice).length) {
+        return nestedDevice
+      }
+    }
+    return {}
+  }
+
+  if (isSmartDeviceObject(normalizedValue)) {
+    return normalizedValue
+  }
+
+  const candidateKeys = ['data', 'result', 'payload', 'item', 'device', 'record']
+  for (let index = 0; index < candidateKeys.length; index += 1) {
+    const key = candidateKeys[index]
+    if (!Object.prototype.hasOwnProperty.call(normalizedValue, key)) {
+      continue
+    }
+    const nestedDevice = unwrapSmartDevicePayload(normalizedValue[key], depth + 1)
+    if (Object.keys(nestedDevice).length) {
+      return nestedDevice
+    }
+  }
+
+  return {}
+}
+
+function isCurtainDeviceLike(device = {}) {
+  const numericDeviceType = Number(device.deviceType)
+  if (numericDeviceType === 2) {
+    return true
+  }
+
+  const name = pickFirstFilledValue(device.deviceName, device.deviceNo).toLowerCase()
+  return name.includes('窗帘') || name.includes('curtain')
+}
+
+function normalizeFunctionCode(functionCode = '', device = {}) {
+  const normalizedCode = String(functionCode || '').trim().toLowerCase()
+  if (!normalizedCode) {
+    return ''
+  }
+
+  if (['light', 'switch', 'common:switch'].includes(normalizedCode)) {
+    return 'common:switch'
+  }
+  if (['slide', 'common:slide'].includes(normalizedCode)) {
+    return 'common:slide'
+  }
+  if (['curtain', 'curtain:button'].includes(normalizedCode)) {
+    return 'curtain:button'
+  }
+  if (normalizedCode === 'button') {
+    return isCurtainDeviceLike(device) ? 'curtain:button' : 'button'
+  }
+
+  return normalizedCode
+}
+
+function normalizeFunctionItem(item = {}, device = {}) {
+  const schema = item.commandSchema === undefined
+    ? null
+    : (typeof item.commandSchema === 'string'
+      ? (safeJsonParse(item.commandSchema, item.commandSchema))
+      : item.commandSchema)
+  const rawFunctionCode = pickFirstFilledValue(item.functionCode, item.controlType)
+  const normalizedCode = normalizeFunctionCode(rawFunctionCode, device)
+
+  return {
+    ...item,
+    functionCode: pickFirstFilledValue(item.functionCode, item.controlType),
+    functionDes: pickFirstFilledValue(item.functionDes, item.description),
+    controlType: normalizedCode,
+    commandSchema: schema
+  }
+}
+
+function normalizeSchemaOption(option, index = 0) {
+  if (option && typeof option === 'object' && !Array.isArray(option)) {
+    const value = Object.prototype.hasOwnProperty.call(option, 'value')
+      ? option.value
+      : (
+        Object.prototype.hasOwnProperty.call(option, 'code')
+          ? option.code
+          : (Object.prototype.hasOwnProperty.call(option, 'key') ? option.key : index)
+      )
+    return {
+      label: pickFirstFilledValue(option.label, option.text, option.name, option.title, value),
+      value
+    }
+  }
+
+  return {
+    label: String(option),
+    value: option
+  }
+}
+
+function normalizeSchemaOptions(rawOptions) {
+  if (!Array.isArray(rawOptions)) {
+    return []
+  }
+  return rawOptions.map((item, index) => normalizeSchemaOption(item, index))
+}
+
+function isSchemaMetaKey(key = '') {
+  return [
+    'type',
+    'title',
+    'description',
+    'required',
+    '$schema',
+    'properties',
+    'fields',
+    'params',
+    'definitions'
+  ].includes(String(key || '').trim())
+}
+
+function inferSchemaFieldType(fieldName = '', rawField) {
+  if (Array.isArray(rawField)) {
+    return 'enum'
+  }
+
+  if (typeof rawField === 'string') {
+    const normalizedType = rawField.trim().toLowerCase()
+    if (['boolean', 'bool'].includes(normalizedType)) {
+      return 'boolean'
+    }
+    if (['number', 'integer', 'int', 'float', 'double'].includes(normalizedType)) {
+      return 'number'
+    }
+  }
+
+  if (!rawField || typeof rawField !== 'object') {
+    return typeof rawField === 'boolean' ? 'boolean' : (typeof rawField === 'number' ? 'number' : 'string')
+  }
+
+  const explicitType = String(
+    rawField.type
+    || rawField.valueType
+    || rawField.inputType
+    || rawField.dataType
+    || ''
+  ).trim().toLowerCase()
+
+  if (rawField.enum || rawField.options || rawField.oneOf || rawField.values) {
+    return 'enum'
+  }
+  if (['boolean', 'bool'].includes(explicitType)) {
+    return 'boolean'
+  }
+  if (['number', 'integer', 'int', 'float', 'double'].includes(explicitType)) {
+    return 'number'
+  }
+  if (['string', 'text'].includes(explicitType)) {
+    return 'string'
+  }
+  if (typeof rawField.default === 'boolean') {
+    return 'boolean'
+  }
+  if (typeof rawField.default === 'number') {
+    return 'number'
+  }
+  if (fieldName === 'value' && typeof rawField === 'object' && !Array.isArray(rawField)) {
+    return 'number'
+  }
+  return 'string'
+}
+
+function normalizeSchemaField(fieldName = '', rawField = {}) {
+  const normalizedType = inferSchemaFieldType(fieldName, rawField)
+  const fieldObject = rawField && typeof rawField === 'object' && !Array.isArray(rawField)
+    ? rawField
+    : {}
+  const optionCandidates = fieldObject.enum || fieldObject.options || fieldObject.oneOf || fieldObject.values || rawField
+
+  return {
+    name: String(fieldName || '').trim(),
+    label: pickFirstFilledValue(
+      fieldObject.label,
+      fieldObject.title,
+      fieldObject.name,
+      fieldObject.description,
+      fieldName
+    ),
+    type: normalizedType,
+    required: !!fieldObject.required,
+    min: Number.isFinite(Number(fieldObject.min))
+      ? Number(fieldObject.min)
+      : (Number.isFinite(Number(fieldObject.minimum)) ? Number(fieldObject.minimum) : undefined),
+    max: Number.isFinite(Number(fieldObject.max))
+      ? Number(fieldObject.max)
+      : (Number.isFinite(Number(fieldObject.maximum)) ? Number(fieldObject.maximum) : undefined),
+    step: Number.isFinite(Number(fieldObject.step))
+      ? Number(fieldObject.step)
+      : (Number.isFinite(Number(fieldObject.multipleOf)) ? Number(fieldObject.multipleOf) : 1),
+    placeholder: pickFirstFilledValue(fieldObject.placeholder, fieldObject.hint, fieldObject.description),
+    defaultValue: Object.prototype.hasOwnProperty.call(fieldObject, 'default') ? fieldObject.default : undefined,
+    options: normalizeSchemaOptions(optionCandidates)
+  }
+}
+
+function parseCurrentStatus(value) {
+  if (value === undefined || value === null) {
+    return null
+  }
+
+  if (typeof value === 'object') {
+    return value
+  }
+
+  const parsedJson = safeJsonParse(value, null)
+  if (parsedJson !== null) {
+    return parsedJson
+  }
+
+  const text = String(value).trim()
+  if (!text) {
+    return null
+  }
+
+  if (text === 'true' || text === 'false') {
+    return {
+      value: text === 'true'
+    }
+  }
+
+  const numericValue = Number(text)
+  if (Number.isFinite(numericValue) && String(numericValue) === text) {
+    return {
+      value: numericValue
+    }
+  }
+
+  return {
+    text
+  }
+}
+
+function resolveFunctionCurrentStatus(device = {}, preferredControlType = '') {
+  const functionList = Array.isArray(device.functions) ? device.functions : []
+  if (!functionList.length) {
+    return null
+  }
+
+  const preferredCategory = getControlTypeCategory(preferredControlType)
+  const preferredFunction = functionList.find((item) => {
+    const itemControlType = pickFirstFilledValue(item && item.controlType, item && item.functionCode)
+    return getControlTypeCategory(itemControlType) === preferredCategory && parseCurrentStatus(item && item.currentStatus)
+  })
+  if (preferredFunction) {
+    return preferredFunction.currentStatus
+  }
+
+  const fallbackFunction = functionList.find(item => parseCurrentStatus(item && item.currentStatus))
+  return fallbackFunction ? fallbackFunction.currentStatus : null
+}
+
+function resolveDeviceCurrentStatus(device = {}, preferredControlType = '') {
+  const deviceStatus = parseCurrentStatus(device.currentStatus)
+  if (deviceStatus) {
+    return device.currentStatus
+  }
+  return resolveFunctionCurrentStatus(device, preferredControlType)
+}
+
+const CONTROL_TYPE_CATEGORY_MAP = {
+  light: 'switch',
+  switch: 'switch',
+  'common:switch': 'switch',
+  slide: 'slide',
+  'common:slide': 'slide',
+  curtain: 'curtain',
+  'curtain:button': 'curtain'
+}
+
+export const SUPPORTED_DEVICE_CONTROL_TYPES = ['common:switch', 'common:slide', 'curtain:button', 'light', 'switch', 'curtain']
+
+export function getControlTypeCategory(controlType = '') {
+  const normalizedType = String(controlType || '').trim().toLowerCase()
+  return CONTROL_TYPE_CATEGORY_MAP[normalizedType] || normalizedType
+}
+
+export function isSupportedDeviceControlType(controlType = '') {
+  const normalizedType = String(controlType || '').trim().toLowerCase()
+  return SUPPORTED_DEVICE_CONTROL_TYPES.includes(normalizedType) || ['switch', 'slide', 'curtain'].includes(getControlTypeCategory(normalizedType))
+}
+
+export function getDeviceControlLabel(controlType = '') {
+  const category = getControlTypeCategory(controlType)
+  if (category === 'switch') {
+    return getSmartDeviceText('commonSwitch')
+  }
+  if (category === 'slide') {
+    return getSmartDeviceText('slideControl')
+  }
+  if (category === 'curtain') {
+    return getSmartDeviceText('curtainButton')
+  }
+  return String(controlType || '').trim() || getSmartDeviceText('unknownFunction')
+}
+
+export function inferDeviceControlType(device = {}) {
+  const numericDeviceType = Number(device.deviceType)
+  if (numericDeviceType === 2) {
+    return 'curtain:button'
+  }
+
+  const functionList = Array.isArray(device.functions) ? device.functions : []
+  const normalizedFunctionTypes = functionList
+    .map(item => normalizeFunctionCode(
+      pickFirstFilledValue(item && item.functionCode, item && item.controlType),
+      device
+    ))
+    .filter(Boolean)
+
+  if (normalizedFunctionTypes.some(item => getControlTypeCategory(item) === 'switch')) {
+    return 'common:switch'
+  }
+  if (normalizedFunctionTypes.some(item => getControlTypeCategory(item) === 'slide')) {
+    return 'common:slide'
+  }
+  if (normalizedFunctionTypes.some(item => getControlTypeCategory(item) === 'curtain')) {
+    return 'curtain:button'
+  }
+
+  if (numericDeviceType === 1 || numericDeviceType === 0) {
+    return 'common:switch'
+  }
+
+  const name = pickFirstFilledValue(device.deviceName, device.deviceNo).toLowerCase()
+  if (name.includes('窗帘') || name.includes('curtain')) {
+    return 'curtain:button'
+  }
+  if (name.includes('开关') || name.includes('switch')) {
+    return 'common:switch'
+  }
+  if (name.includes('亮度') || name.includes('滑块') || name.includes('slider') || name.includes('slide')) {
+    return 'common:slide'
+  }
+
+  return 'common:switch'
+}
+
+export function getDeviceIconClass(controlType = '') {
+  const category = getControlTypeCategory(controlType)
+  if (category === 'curtain') {
+    return 'tn-icon-hardware-fill'
+  }
+  if (category === 'slide') {
+    return 'tn-icon-more-horizontal'
+  }
+  if (category === 'switch') {
+    return 'tn-icon-power'
+  }
+  return 'tn-icon-light-fill'
+}
+
+export function buildDeviceStateText(device = {}) {
+  const controlType = inferDeviceControlType(device)
+  const category = getControlTypeCategory(controlType)
+  const status = parseCurrentStatus(resolveDeviceCurrentStatus(device, controlType))
+
+  if (category === 'curtain' || Number(device.deviceType) === 2) {
+    const action = pickFirstFilledValue(
+      status && status.command,
+      status && status.action,
+      status && status.state,
+      status && status.text
+    ).toLowerCase()
+    const percentValue = Number(
+      status && (
+        status.value !== undefined
+          ? status.value
+          : (status.percent !== undefined ? status.percent : status.position)
+      )
+    )
+
+    if (action === 'open') {
+      return getSmartDeviceText('fullyOpen')
+    }
+    if (action === 'close') {
+      return getSmartDeviceText('fullyClosed')
+    }
+    if (action === 'stop') {
+      return getSmartDeviceText('paused')
+    }
+    if (Number.isFinite(percentValue)) {
+      return getSmartDeviceText('openness', { value: percentValue })
+    }
+    return getSmartDeviceText('controllable')
+  }
+
+  if (category === 'slide') {
+    const slideValue = Number(
+      status && (
+        status.value !== undefined
+          ? status.value
+          : (status.percent !== undefined ? status.percent : status.position)
+      )
+    )
+    if (Number.isFinite(slideValue)) {
+      return getSmartDeviceText('currentValue', { value: slideValue })
+    }
+    return getSmartDeviceText('adjustable')
+  }
+
+  const switchValue = status && status.value
+  if (typeof switchValue === 'boolean') {
+    return switchValue ? getSmartDeviceText('enabled') : getSmartDeviceText('disabled')
+  }
+
+  const switchCommand = String(
+    (status && (
+      status.command !== undefined
+        ? status.command
+        : (status.action !== undefined ? status.action : status.text)
+    )) || ''
+  ).trim().toLowerCase()
+  if (switchCommand === 'on') {
+    return getSmartDeviceText('enabled')
+  }
+  if (switchCommand === 'off') {
+    return getSmartDeviceText('disabled')
+  }
+
+  if (status && status.text) {
+    return String(status.text)
+  }
+
+  return getSmartDeviceText('controllable')
+}
+
+export function isDeviceActive(device = {}) {
+  const controlType = inferDeviceControlType(device)
+  const category = getControlTypeCategory(controlType)
+  const status = parseCurrentStatus(resolveDeviceCurrentStatus(device, controlType))
+
+  if (!status) {
+    return false
+  }
+
+  if (category === 'curtain' || Number(device.deviceType) === 2) {
+    const action = pickFirstFilledValue(
+      status.command,
+      status.action,
+      status.state,
+      status.text
+    ).toLowerCase()
+    const value = Number(
+      status.value !== undefined
+        ? status.value
+        : (status.percent !== undefined ? status.percent : status.position)
+    )
+    if (action === 'open') {
+      return true
+    }
+    if (action === 'close') {
+      return false
+    }
+    if (Number.isFinite(value)) {
+      return value > 0
+    }
+    return false
+  }
+
+  if (category === 'slide') {
+    const value = Number(
+      status.value !== undefined
+        ? status.value
+        : (status.percent !== undefined ? status.percent : status.position)
+    )
+    return Number.isFinite(value) ? value > 0 : false
+  }
+
+  const switchCommand = String(
+    (
+      status.command !== undefined
+        ? status.command
+        : (status.action !== undefined ? status.action : status.text)
+    ) || ''
+  ).trim().toLowerCase()
+  if (switchCommand === 'on') {
+    return true
+  }
+  if (switchCommand === 'off') {
+    return false
+  }
+
+  return !!status.value
+}
+
+export function normalizeSmartDevice(item = {}) {
+  const sourceDevice = unwrapSmartDevicePayload(item)
+  const functionList = Array.isArray(sourceDevice.functions)
+    ? sourceDevice.functions.filter(entry => entry && typeof entry === 'object').map(entry => normalizeFunctionItem(entry, sourceDevice))
+    : []
+  const normalizedDevice = {
+    ...sourceDevice,
+    functions: functionList
+  }
+  const controlType = inferDeviceControlType(normalizedDevice)
+  const currentStatus = resolveDeviceCurrentStatus(normalizedDevice, controlType)
+
+  return {
+    ...normalizedDevice,
+    currentStatus,
+    controlType,
+    iconClass: getDeviceIconClass(controlType),
+    active: isDeviceActive(normalizedDevice),
+    stateText: buildDeviceStateText(normalizedDevice),
+    roomName: pickFirstFilledValue(sourceDevice.roomName),
+    deviceName: pickFirstFilledValue(sourceDevice.deviceName, sourceDevice.deviceNo, sourceDevice.platformDeviceId, getSmartDeviceText('unnamedDevice'))
+  }
+}
+
+export function getDeviceFunctions(device = {}, includeFallback = true) {
+  const functionList = Array.isArray(device.functions)
+    ? device.functions.filter(item => item && typeof item === 'object').map(item => normalizeFunctionItem(item, device))
+    : []
+
+  if (functionList.length) {
+    return functionList
+  }
+
+  if (!includeFallback) {
+    return []
+  }
+
+  const fallbackType = inferDeviceControlType(device)
+  return fallbackType
+    ? [{
+      functionCode: fallbackType,
+      functionDes: getDeviceControlLabel(fallbackType),
+      controlType: fallbackType,
+      commandSchema: null,
+      isFallback: true
+    }]
+    : []
+}
+
+export function buildCommandSchemaFields(commandSchema = null) {
+  if (!commandSchema) {
+    return []
+  }
+
+  if (Array.isArray(commandSchema)) {
+    return commandSchema
+      .map((item, index) => normalizeSchemaField(
+        pickFirstFilledValue(item && item.name, item && item.key, `field${index + 1}`),
+        item
+      ))
+      .filter(item => item.name)
+  }
+
+  if (typeof commandSchema !== 'object') {
+    return []
+  }
+
+  let schemaSource = null
+  if (commandSchema.properties && typeof commandSchema.properties === 'object') {
+    schemaSource = commandSchema.properties
+  } else if (commandSchema.fields && typeof commandSchema.fields === 'object') {
+    schemaSource = commandSchema.fields
+  } else if (commandSchema.params && typeof commandSchema.params === 'object') {
+    schemaSource = commandSchema.params
+  } else {
+    const candidateEntries = Object.keys(commandSchema)
+      .filter(key => !isSchemaMetaKey(key))
+      .filter(key => {
+        const value = commandSchema[key]
+        return value !== undefined && value !== null && typeof value !== 'function'
+      })
+
+    if (candidateEntries.length) {
+      schemaSource = candidateEntries.reduce((result, key) => {
+        result[key] = commandSchema[key]
+        return result
+      }, {})
+    }
+  }
+
+  if (!schemaSource || typeof schemaSource !== 'object') {
+    return []
+  }
+
+  return Object.keys(schemaSource)
+    .map(key => normalizeSchemaField(key, schemaSource[key]))
+    .filter(item => item.name)
+}
+
+export function normalizeSmartDeviceList(response) {
+  const payload = response && response.data !== undefined ? response.data : response
+  const deviceList = collectObjectArray(payload)
+  if (deviceList.length) {
+    return deviceList
+      .filter(item => item && typeof item === 'object' && !Array.isArray(item))
+      .map(item => normalizeSmartDevice(item))
+  }
+
+  const singleDevice = unwrapSmartDevicePayload(payload)
+  return Object.keys(singleDevice).length ? [normalizeSmartDevice(singleDevice)] : []
+}
+
+export function patchDeviceStatus(device = {}, command = {}, forcedControlType = '') {
+  const controlType = String(forcedControlType || '').trim().toLowerCase() || inferDeviceControlType(device)
+  const category = getControlTypeCategory(controlType)
+
+  if (category === 'curtain') {
+    const action = String(command.command || command.action || command.value || '').trim().toLowerCase()
+    if (!action) {
+      return normalizeSmartDevice(device)
+    }
+
+    return normalizeSmartDevice({
+      ...device,
+      currentStatus: {
+        command: action
+      }
+    })
+  }
+
+  if (category === 'slide') {
+    const value = Number(
+      command.value !== undefined
+        ? command.value
+        : (command.percent !== undefined ? command.percent : command.position)
+    )
+    return normalizeSmartDevice({
+      ...device,
+      currentStatus: {
+        value: Number.isFinite(value) ? value : 0
+      }
+    })
+  }
+
+  const switchCommand = String(
+    (
+      command.command !== undefined
+        ? command.command
+        : (
+          command.action !== undefined
+            ? command.action
+            : (
+              command.value === true
+                ? 'on'
+                : (command.value === false ? 'off' : command.value)
+            )
+        )
+    ) || ''
+  ).trim().toLowerCase()
+
+  if (switchCommand) {
+    return normalizeSmartDevice({
+      ...device,
+      currentStatus: {
+        command: switchCommand
+      }
+    })
+  }
+
+  return normalizeSmartDevice(device)
+}
diff --git a/utils/style-data.js b/utils/style-data.js
new file mode 100644
index 0000000..62453ca
--- /dev/null
+++ b/utils/style-data.js
@@ -0,0 +1,170 @@
+export const STYLE_LIST = [
+  {
+    id: 'moroccan',
+    nameZh: '摩洛哥风',
+    nameEn: 'Moroccan Style',
+    descZh: '异域度假 · 热情松弛 · 拱门结构',
+    descEn: 'Exotic Vibe · Relaxing · Arch Design',
+    longDescZh: '摩洛哥风格以其大胆的色彩碰撞、繁复的几何图案和独特的拱门元素著称。在这里，你可以感受到浓郁的北非风情与地中海的慵懒气息。',
+    longDescEn: 'Moroccan style is known for its bold colors, intricate geometric patterns, and unique arch elements. Experience the rich North African flair and Mediterranean laziness here.',
+    tagsZh: ['拱门设计', '异域风情', '色彩碰撞'],
+    tagsEn: ['Arch Design', 'Exotic', 'Color Clash'],
+    cover: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_6.png',
+    plan: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_5.png',
+    planNameZh: '65方户型平面图',
+    planNameEn: '65m² Floor Plan',
+    buildings: ['B1', 'B2', 'B3'],
+    floors: ['1F', '2F', '3F', '4F', '5F'],
+    roomTypes: [
+      {
+        id: 'moroccan-onebed',
+        nameZh: '拱门一居套房',
+        nameEn: 'Arch One Bedroom',
+        area: '65㎡',
+        monthlyRent: '4200',
+        images: [
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_6.png',
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_8.png'
+        ]
+      },
+      {
+        id: 'moroccan-twobed',
+        nameZh: '庭院双卧套房',
+        nameEn: 'Courtyard Two Bedroom',
+        area: '92㎡',
+        monthlyRent: '5600',
+        images: [
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_14.png',
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_20.png'
+        ]
+      }
+    ]
+  },
+  {
+    id: 'southeast',
+    nameZh: '东南亚风',
+    nameEn: 'Southeast Asian',
+    descZh: '自然禅意 · 开放空间 · 原木藤编',
+    descEn: 'Zen Nature · Open Space · Rattan & Wood',
+    longDescZh: '大量使用原木、藤编和棉麻等天然材质，结合宽敞的开放式空间设计，营造出一种回归自然、宁静致远的居住体验。',
+    longDescEn: 'Extensive use of natural materials like wood, rattan, and linen, combined with spacious open design, creates a living experience that returns to nature and tranquility.',
+    tagsZh: ['原木材质', '自然禅意', '通透采光'],
+    tagsEn: ['Wood Material', 'Zen', 'Natural Light'],
+    cover: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_13.png',
+    plan: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_12.png',
+    planNameZh: '123方户型平面图',
+    planNameEn: '123m² Floor Plan',
+    buildings: ['S1', 'S2'],
+    floors: ['1F', '2F', '3F'],
+    roomTypes: [
+      {
+        id: 'southeast-garden',
+        nameZh: '花园阳台房',
+        nameEn: 'Garden Balcony Suite',
+        area: '88㎡',
+        monthlyRent: '4600',
+        images: [
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_13.png',
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_14.png'
+        ]
+      },
+      {
+        id: 'southeast-family',
+        nameZh: '藤编家庭套房',
+        nameEn: 'Rattan Family Suite',
+        area: '123㎡',
+        monthlyRent: '6200',
+        images: [
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_20.png',
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_12.png'
+        ]
+      }
+    ]
+  },
+  {
+    id: 'european',
+    nameZh: '简欧风格',
+    nameEn: 'Modern European',
+    descZh: '俄式简约 · 典雅通透 · 奶油底色',
+    descEn: 'Russian Minimalist · Elegant · Cream Tone',
+    longDescZh: '摒弃了传统欧式的繁琐，保留了经典的线条与对称美学。以低饱和度的奶油色为基调，展现出一种低调而不失优雅的生活态度。',
+    longDescEn: 'Discarding the cumbersomeness of traditional European style, it retains classic lines and symmetrical aesthetics. Based on low-saturation cream colors, it shows a low-key yet elegant life attitude.',
+    tagsZh: ['经典线条', '低调优雅', '奶油色调'],
+    tagsEn: ['Classic Lines', 'Elegant', 'Cream Tone'],
+    cover: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_19.png',
+    plan: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_18.png',
+    planNameZh: '143方户型平面图',
+    planNameEn: '143m² Floor Plan',
+    buildings: ['E1', 'E2', 'E3'],
+    floors: ['1F', '2F', '3F', '4F'],
+    roomTypes: [
+      {
+        id: 'european-suite',
+        nameZh: '奶油轻奢套房',
+        nameEn: 'Cream Luxury Suite',
+        area: '96㎡',
+        monthlyRent: '5200',
+        images: [
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_19.png',
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_18.png'
+        ]
+      },
+      {
+        id: 'european-premium',
+        nameZh: '对称大平层',
+        nameEn: 'Symmetry Premium Suite',
+        area: '143㎡',
+        monthlyRent: '7600',
+        images: [
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_19.png',
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_14.png'
+        ]
+      }
+    ]
+  },
+  {
+    id: 'modern',
+    nameZh: '现代风',
+    nameEn: 'Modern Minimalist',
+    descZh: '极简高级 · 动线流畅 · 隐形收纳',
+    descEn: 'Premium Minimal · Smooth Flow · Hidden Storage',
+    longDescZh: '追求极致的简约与实用，强调空间的动线流畅与收纳的隐蔽性。黑白灰的经典搭配，彰显出都市精英的干练与品味。',
+    longDescEn: 'Pursuing extreme simplicity and practicality, emphasizing smooth spatial flow and hidden storage. The classic match of black, white, and gray highlights the capability and taste of urban elites.',
+    tagsZh: ['隐蔽收纳', '动线流畅', '极简主义'],
+    tagsEn: ['Hidden Storage', 'Smooth Flow', 'Minimalism'],
+    cover: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_25.png',
+    plan: 'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_24.png',
+    planNameZh: '65方户型平面图',
+    planNameEn: '65m² Floor Plan',
+    buildings: ['M1', 'M2'],
+    floors: ['1F', '2F', '3F', '4F', '5F', '6F'],
+    roomTypes: [
+      {
+        id: 'modern-studio',
+        nameZh: '极简单身公寓',
+        nameEn: 'Minimal Studio',
+        area: '65㎡',
+        monthlyRent: '4300',
+        images: [
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_25.png',
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_24.png'
+        ]
+      },
+      {
+        id: 'modern-loft',
+        nameZh: '高层 loft 套房',
+        nameEn: 'High-rise Loft',
+        area: '98㎡',
+        monthlyRent: '5800',
+        images: [
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_24.png',
+          'https://hi.aizhuhotel.com/%E7%95%99%E5%AD%A6%E7%94%9F%E5%85%AC%E5%AF%93%20-%200320%281%29_converted_25.png'
+        ]
+      }
+    ]
+  }
+]
+
+export function getStyleById(styleId) {
+  return STYLE_LIST.find(item => item.id === styleId) || STYLE_LIST[0]
+}