diff --git a/pages/index/components/statistics.vue b/pages/index/components/statistics.vue
index 026e7d1..737594b 100644
--- a/pages/index/components/statistics.vue
+++ b/pages/index/components/statistics.vue
@@ -121,7 +121,7 @@ const pageData = reactive({
     },
     {
       payType: "主扫收款",
-      key: "scanPayAmount",
+      key: "backScanPayAmount",
       payAmount: 0,
       bgcolor: "#FF5C6D",
     },
diff --git a/pages/shopSetUp/index.vue b/pages/shopSetUp/index.vue
index 6e405bd..60ea6ab 100644
--- a/pages/shopSetUp/index.vue
+++ b/pages/shopSetUp/index.vue
@@ -1,66 +1,119 @@
 <template>
-	<view class="page-wrapper">
-		<view class="page-cell">
-			<view class="label">头像</view>
-			<view class="right">
-				<up-avatar class="fileImg" :src="vdata.shopInfo.coverImg ? vdata.shopInfo.coverImg : ''" mode="aspectFill"></up-avatar>
-				<view class="file" @tap="chooseAndUploadAvatar('coverImg')"></view>
-			</view>
-		</view>
-		<!-- <view class="page-cell m" @tap="updateValue('商户名称','shopName',vdata.shopInfo.shopName)"> -->
-		<view class="page-cell m" @tap="go.to('PAGES_SHOP_EDITVAL', { name: 'shopName', value: vdata.shopInfo.shopName })">
-			<view class="label">商户名称</view>
-			<view class="right">
-				<view>{{ vdata.shopInfo.shopName }}</view>
-				<up-icon name="arrow-right" color="#999999" size="15"></up-icon>
-			</view>
-		</view>
-		<view class="page-cell m" @tap="go.to('PAGES_SHOP_EDITVAL', { name: 'phone', value: vdata.shopInfo.phone })">
-			<view class="label">商户电话</view>
-			<view class="right">
-				<view>{{ vdata.shopInfo.phone }}</view>
-				<up-icon name="arrow-right" color="#999999" size="15"></up-icon>
-			</view>
-		</view>
-		<!-- 	<view class="page-cell m" >
+  <view class="page-wrapper">
+    <view class="page-cell">
+      <view class="label">头像</view>
+      <view class="right">
+        <up-avatar
+          class="fileImg"
+          :src="vdata.shopInfo.coverImg ? vdata.shopInfo.coverImg : ''"
+          mode="aspectFill"
+        ></up-avatar>
+        <view class="file" @tap="chooseAndUploadAvatar('coverImg')"></view>
+      </view>
+    </view>
+    <!-- <view class="page-cell m" @tap="updateValue('商户名称','shopName',vdata.shopInfo.shopName)"> -->
+    <view
+      class="page-cell m"
+      @tap="
+        go.to('PAGES_SHOP_EDITVAL', {
+          name: 'shopName',
+          value: vdata.shopInfo.shopName,
+        })
+      "
+    >
+      <view class="label">商户名称</view>
+      <view class="right">
+        <view>{{ vdata.shopInfo.shopName }}</view>
+        <up-icon name="arrow-right" color="#999999" size="15"></up-icon>
+      </view>
+    </view>
+    <view
+      class="page-cell m"
+      @tap="
+        go.to('PAGES_SHOP_EDITVAL', {
+          name: 'phone',
+          value: vdata.shopInfo.phone,
+        })
+      "
+    >
+      <view class="label">商户电话</view>
+      <view class="right">
+        <view>{{ vdata.shopInfo.phone }}</view>
+        <up-icon name="arrow-right" color="#999999" size="15"></up-icon>
+      </view>
+    </view>
+    <!-- 	<view class="page-cell m" >
 		<view class="label">到期时间</view>
 		<view class="right"><view>{{ vdata.shopInfo.realname }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
 	</view> -->
-		<view class="page-cell m">
-			<view class="label">营业状态</view>
-			<view class="right">
-				<up-switch v-model="vdata.shopInfo.status" size="20" :inactiveValue="2" :activeValue="1" activeColor="#0FC161" @change="switchChange('status')"></up-switch>
-			</view>
-		</view>
-		<view class="page-cell m" @tap="showMap">
-			<view class="label">门店详细地址</view>
-			<view class="right">
-				<view>{{ vdata.shopInfo.address }}</view>
-				<up-icon name="arrow-right" color="#999999" size="15"></up-icon>
-			</view>
-		</view>
-		<!-- <view class="page-cell">
+    <view class="page-cell m">
+      <view class="label">营业状态</view>
+      <view class="right">
+        <up-switch
+          v-model="vdata.shopInfo.status"
+          size="20"
+          :inactiveValue="2"
+          :activeValue="1"
+          activeColor="#0FC161"
+          @change="switchChange('status')"
+        ></up-switch>
+      </view>
+    </view>
+    <view class="page-cell m" @tap="showMap">
+      <view class="label">门店详细地址</view>
+      <view class="right">
+        <view>{{ vdata.shopInfo.address }}</view>
+        <up-icon name="arrow-right" color="#999999" size="15"></up-icon>
+      </view>
+    </view>
+    <!-- <view class="page-cell">
 		<view class="label">堂食功能</view>
 		<view class="right"><up-switch v-model="vdata.dineIn" size="20" activeColor="#0FC161" @change="switchChange('eatModel')"></up-switch></view>	
 	</view> -->
-		<view class="page-cell">
-			<view class="label">允许打包</view>
-			<view class="right"><up-switch v-model="vdata.takeout" size="20" activeColor="#0FC161" @change="switchChange('eatModel')"></up-switch></view>
-		</view>
-		<view class="page-cell m">
-			<view class="label">是否开启会员余额支付</view>
-			<view class="right">
-				<up-switch
-					v-model="vdata.shopInfo.isAccountPay"
-					size="20"
-					:inactiveValue="0"
-					:activeValue="1"
-					activeColor="#0FC161"
-					@change="switchChange('isAccountPay')"
-				></up-switch>
-			</view>
-		</view>
-		<view class="page-cell m">
+    <view class="page-cell">
+      <view class="label">允许打包</view>
+      <view class="right"
+        ><up-switch
+          v-model="vdata.takeout"
+          size="20"
+          activeColor="#0FC161"
+          @change="switchChange('eatModel')"
+        ></up-switch
+      ></view>
+    </view>
+    <view class="page-cell m">
+      <view class="label">是否开启会员余额支付</view>
+      <view class="right">
+        <up-switch
+          v-model="vdata.shopInfo.isAccountPay"
+          size="20"
+          :inactiveValue="0"
+          :activeValue="1"
+          activeColor="#0FC161"
+          @change="switchChange('isAccountPay')"
+        ></up-switch>
+      </view>
+    </view>
+    <view class="page-cell m" style="display: block">
+      <view class="u-flex u-row-between">
+        <view class="label">点餐电子围栏</view>
+        <view class="right"
+          ><up-switch
+            v-model="vdata.shopInfo.isOrderFence"
+            size="20"
+            :inactiveValue="0"
+            :activeValue="1"
+            activeColor="#0FC161"
+            @change="switchChange('isOrderFence')"
+          ></up-switch
+        ></view>
+      </view>
+      <view class="u-m-t-6 color-666 u-font-24"
+        >开启后，用户只能在店铺附近两公里范围内点餐</view
+      >
+    </view>
+
+    <!-- <view class="page-cell m">
 			<view class="label">是否开启会员价支付</view>
 			<view class="right">
 				<up-switch
@@ -72,23 +125,38 @@
 					@change="switchChange('isMemberPrice')"
 				></up-switch>
 			</view>
-		</view>
-		<view class="page-cell">
-			<view class="label">
-				桌位费
-				<view v-if="!vdata.isTableFee" class="tableFee" @tap="go.to('PAGES_SHOP_EDITVAL', { name: 'tableFee', value: vdata.shopInfo.tableFee })">
-					{{ vdata.shopInfo.tableFee }}
-				</view>
-			</view>
-			<view class="right">
-				<view>
-					<up-checkbox-group>
-						<up-checkbox label="免桌位费" v-model:checked="vdata.isTableFee" activeColor="#0FC161" shape="circle" @change="isTableFeeChange"></up-checkbox>
-					</up-checkbox-group>
-				</view>
-			</view>
-		</view>
-		<!-- <view class="page-cell">
+		</view> -->
+    <view class="page-cell">
+      <view class="label">
+        桌位费
+        <view
+          v-if="!vdata.isTableFee"
+          class="tableFee"
+          @tap="
+            go.to('PAGES_SHOP_EDITVAL', {
+              name: 'tableFee',
+              value: vdata.shopInfo.tableFee,
+            })
+          "
+        >
+          {{ vdata.shopInfo.tableFee }}
+        </view>
+      </view>
+      <view class="right">
+        <view>
+          <up-checkbox-group>
+            <up-checkbox
+              label="免桌位费"
+              v-model:checked="vdata.isTableFee"
+              activeColor="#0FC161"
+              shape="circle"
+              @change="isTableFeeChange"
+            ></up-checkbox>
+          </up-checkbox-group>
+        </view>
+      </view>
+    </view>
+    <!-- <view class="page-cell">
 			<view class="label">台桌清理类型</view>
 			<view class="right">
 				<up-radio-group v-model="vdata.shopInfo.tableClearType" placement="row" @change="tableClearChange">
@@ -105,495 +173,523 @@
 				
 			</view>
 		</view> -->
-		<view class="page-cell m">
-			<view class="label">付费模式</view>
-			<view class="right">
-				<up-radio-group v-model="vdata.shopInfo.registerType" placement="row">
-					<up-radio
-						:customStyle="{ marginRight: '10px' }"
-						v-for="(item, index) in vdata.registerTypeList"
-						:key="index"
-						:label="item.name"
-						:name="item.value"
-						activeColor="#0FC161"
-						@change="radioChange"
-					></up-radio>
-				</up-radio-group>
-			</view>
-		</view>
-		<view class="page-cell" @tap="go.to('PAGES_SHOP_QRCODE', { paymentQrcode: vdata.shopInfo.paymentQrcode })">
-			<view class="label">店铺收款码</view>
-			<view class="right"><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
-		</view>
-	
-		<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
-	</view>
+    <view class="page-cell m">
+      <view class="label">付费模式</view>
+      <view class="right">
+        <up-radio-group v-model="vdata.shopInfo.registerType" placement="row">
+          <up-radio
+            :customStyle="{ marginRight: '10px' }"
+            v-for="(item, index) in vdata.registerTypeList"
+            :key="index"
+            :label="item.name"
+            :name="item.value"
+            activeColor="#0FC161"
+            @change="radioChange"
+          ></up-radio>
+        </up-radio-group>
+      </view>
+    </view>
+    <view
+      class="page-cell"
+      @tap="
+        go.to('PAGES_SHOP_QRCODE', {
+          paymentQrcode: vdata.shopInfo.paymentQrcode,
+        })
+      "
+    >
+      <view class="label">店铺收款码</view>
+      <view class="right"
+        ><up-icon name="arrow-right" color="#999999" size="15"></up-icon
+      ></view>
+    </view>
+
+    <!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
+  </view>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
-import { onShow } from '@dcloudio/uni-app';
-import go from '@/commons/utils/go.js';
-import { uploadFile } from '@/http/api/index.js';
-import { getShopInfo, editShopInfo, getShopExtend, editShopExtend } from '@/http/api/shop.js';
+import { ref, reactive, onMounted } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+import go from "@/commons/utils/go.js";
+import { uploadFile } from "@/http/api/index.js";
+import {
+  getShopInfo,
+  editShopInfo,
+  getShopExtend,
+  editShopExtend,
+} from "@/http/api/shop.js";
 
 const vdata = reactive({
-	shopInfo: {
-		status: 2,
-		isAccountPay: 0,
-		isMemberPrice: 0
-	},
-	extendList: [],
-	registerTypeList: [
-		{ name: '先付费', value: 'before' },
-		{ name: '后付费', value: 'after' }
-	],
-	extendIndex: 0,
-	extendInfo: {},
-	dineIn: false,
-	takeout: false,
-	isTableFee: false,
-	label: '',
-	type: '',
-	inputValue: ''
+  shopInfo: {
+    status: 2,
+    isAccountPay: 0,
+    isMemberPrice: 0,
+  },
+  extendList: [],
+  registerTypeList: [
+    { name: "先付费", value: "before" },
+    { name: "后付费", value: "after" },
+  ],
+  extendIndex: 0,
+  extendInfo: {},
+  dineIn: false,
+  takeout: false,
+  isTableFee: false,
+  label: "",
+  type: "",
+  inputValue: "",
 });
 onMounted(() => {
-	shopExtend();
+  shopExtend();
 });
 
 onShow(() => {
-	shopInfo();
-	uni.$on('refreshPreviousPage', (params) => {
-		// 这里执行刷新数据的操作，例如重新调用API获取数据
-		refreshData(params);
-	});
+  shopInfo();
+  uni.$on("refreshPreviousPage", (params) => {
+    // 这里执行刷新数据的操作，例如重新调用API获取数据
+    refreshData(params);
+  });
 });
 
 /**
  * 输入内容修改
  */
 let refreshData = (e) => {
-	let params = {
-		id: vdata.shopInfo.id
-	};
-	params[e.name] = e.value;
-	vdata.type = e.name;
-	vdata.inputValue = e.value;
-	updateShopInfo(params, 'input');
+  let params = {
+    id: vdata.shopInfo.id,
+  };
+  params[e.name] = e.value;
+  vdata.type = e.name;
+  vdata.inputValue = e.value;
+  updateShopInfo(params, "input");
 };
 
 /**
  * 获取店铺信息
  */
 const shopInfo = () => {
-	getShopInfo({ id: uni.getStorageSync('shopInfo').id }).then((res) => {
-		vdata.isTableFee = res.isTableFee == 1 ? true : false;
-		if (res.eatModel.split(',').indexOf('dine-in') != -1) {
-			vdata.dineIn = true;
-		}
-		if (res.eatModel.split(',').indexOf('take-out') != -1) {
-			vdata.takeout = true;
-		}
-		vdata.shopInfo = res;
-	});
+  getShopInfo({ id: uni.getStorageSync("shopInfo").id }).then((res) => {
+    vdata.isTableFee = res.isTableFee == 1 ? true : false;
+    if (res.eatModel.split(",").indexOf("dine-in") != -1) {
+      vdata.dineIn = true;
+    }
+    if (res.eatModel.split(",").indexOf("take-out") != -1) {
+      vdata.takeout = true;
+    }
+    vdata.shopInfo = res;
+  });
 };
 
 /**
  * 获取店铺图片
  */
 let shopExtend = () => {
-	getShopExtend().then((res) => {
-		if (res && res.length > 0) {
-			vdata.extendList = res;
-			vdata.extendIndex = 0;
-			vdata.extendInfo = res[0];
-		}
-	});
+  getShopExtend().then((res) => {
+    if (res && res.length > 0) {
+      vdata.extendList = res;
+      vdata.extendIndex = 0;
+      vdata.extendInfo = res[0];
+    }
+  });
 };
 
 // 台桌清理模式修改
 function tableClearChange(n) {
-	let params = {
-		id: vdata.shopInfo.id,
-		tableClearType: n
-	};
-	updateShopInfo(params);
+  let params = {
+    id: vdata.shopInfo.id,
+    tableClearType: n,
+  };
+  updateShopInfo(params);
 }
 
 /**
  * 付费模式修改
  */
 let radioChange = (n) => {
-	let params = {
-		id: vdata.shopInfo.id,
-		registerType: n
-	};
-	updateShopInfo(params);
+  let params = {
+    id: vdata.shopInfo.id,
+    registerType: n,
+  };
+  updateShopInfo(params);
 };
 
 /**
  * 修改
  */
 let updateShopInfo = (params, type) => {
-	editShopInfo(params).then((res) => {
-		if (type && type == 'input') {
-			vdata.shopInfo[vdata.type] = vdata.inputValue;
-		}
-	});
+  editShopInfo(params).then((res) => {
+    if (res) {
+      uni.showToast({
+        title: "修改成功",
+        icon: "none",
+      });
+    } else {
+      uni.showToast({
+        title: "修改失败",
+        icon: "none",
+      });
+    }
+    if (type && type == "input") {
+      vdata.shopInfo[vdata.type] = vdata.inputValue;
+    }
+  });
 };
 
 /**
  * 修改店铺图片
  */
 let updateShopExtend = () => {
-	editShopExtend({
-		autokey: vdata.extendInfo.autoKey,
-		value: vdata.extendInfo.value
-	}).then((res) => {});
+  editShopExtend({
+    autokey: vdata.extendInfo.autoKey,
+    value: vdata.extendInfo.value,
+  }).then((res) => {});
 };
 
 /**
  * 上传头像
  */
 let chooseAndUploadAvatar = (type) => {
-	// 选择图片
-	uni.chooseImage({
-		count: 1, // 默认为1，只选择一张图片
-		sizeType: ['original', 'compressed'], // 图片质量，原图或压缩
-		sourceType: ['album', 'camera'], // 图片来源，相册或相机
-		success: (res) => {
-			let file = res.tempFiles[0];
-			uploadFile(file)
-				.then((res) => {
-					if (type == 'coverImg') {
-						vdata.shopInfo.coverImg = res;
-						let params = {
-							id: vdata.shopInfo.id,
-							coverImg: vdata.shopInfo.coverImg
-						};
-						updateShopInfo(params);
-					}
-					if (type == 'extendUp') {
-						vdata.extendInfo.value = res;
-						updateShopExtend();
-					}
-				})
-				.catch((res) => {
-					if (res.errMsg) {
-						uni.showToast({
-							title: '图片大小超出限制',
-							icon: 'error'
-						});
-					}
-				});
-		},
-		fail: (chooseImageError) => {
-			// 选择图片失败处理逻辑
-			console.log('choose image fail:', chooseImageError);
-		}
-	});
+  // 选择图片
+  uni.chooseImage({
+    count: 1, // 默认为1，只选择一张图片
+    sizeType: ["original", "compressed"], // 图片质量，原图或压缩
+    sourceType: ["album", "camera"], // 图片来源，相册或相机
+    success: (res) => {
+      let file = res.tempFiles[0];
+      uploadFile(file)
+        .then((res) => {
+          if (type == "coverImg") {
+            vdata.shopInfo.coverImg = res;
+            let params = {
+              id: vdata.shopInfo.id,
+              coverImg: vdata.shopInfo.coverImg,
+            };
+            updateShopInfo(params);
+          }
+          if (type == "extendUp") {
+            vdata.extendInfo.value = res;
+            updateShopExtend();
+          }
+        })
+        .catch((res) => {
+          if (res.errMsg) {
+            uni.showToast({
+              title: "图片大小超出限制",
+              icon: "error",
+            });
+          }
+        });
+    },
+    fail: (chooseImageError) => {
+      // 选择图片失败处理逻辑
+      console.log("choose image fail:", chooseImageError);
+    },
+  });
 };
 
 /**
  * 店铺图片TAB切换
  */
 let extendTabClick = (item, index) => {
-	vdata.extendInfo = item;
-	vdata.extendIndex = index;
+  vdata.extendInfo = item;
+  vdata.extendIndex = index;
 };
 
 /**
  * 是否免桌位费
  */
 let isTableFeeChange = (e) => {
-	if (e) {
-		vdata.isTableFee = true;
-	} else {
-		vdata.isTableFee = false;
-	}
-	switchChange('isTableFee');
+  if (e) {
+    vdata.isTableFee = true;
+  } else {
+    vdata.isTableFee = false;
+  }
+  switchChange("isTableFee");
 };
 
 /**
  * 修改
  */
 let switchChange = (type) => {
-	let params = {
-		id: vdata.shopInfo.id
-	};
-	switch (type) {
-		case 'address':
-			params.lng = vdata.shopInfo.lng;
-			params.lat = vdata.shopInfo.lat;
-			params.address = vdata.shopInfo.address;
-			break;
-		case 'status':
-			params.status = vdata.shopInfo.status;
-			break;
-		case 'eatModel':
-			params.eatModel = [];
-			if (vdata.dineIn) {
-				params.eatModel.push('dine-in');
-			}
-			if (vdata.takeout) {
-				params.eatModel.push('take-out');
-			}
-			params.eatModel = params.eatModel.join(',');
-			break;
-		case 'isAccountPay':
-			params.isAccountPay = vdata.shopInfo.isAccountPay;
-			break;
-		case 'isMemberPrice':
-			params.isMemberPrice = vdata.shopInfo.isMemberPrice;
-			break;
-		case 'isTableFee':
-			if (vdata.isTableFee) {
-				params.isTableFee = 1;
-			} else {
-				params.isTableFee = 0;
-			}
-			break;
-	}
-	updateShopInfo(params);
+  let params = {
+    id: vdata.shopInfo.id,
+  };
+  switch (type) {
+    case "address":
+      params.lng = vdata.shopInfo.lng;
+      params.lat = vdata.shopInfo.lat;
+      params.address = vdata.shopInfo.address;
+      break;
+    case "status":
+      params.status = vdata.shopInfo.status;
+      break;
+    case "eatModel":
+      params.eatModel = [];
+      if (vdata.dineIn) {
+        params.eatModel.push("dine-in");
+      }
+      if (vdata.takeout) {
+        params.eatModel.push("take-out");
+      }
+      params.eatModel = params.eatModel.join(",");
+      break;
+    case "isAccountPay":
+      params.isAccountPay = vdata.shopInfo.isAccountPay;
+      break;
+    case "isMemberPrice":
+      params.isMemberPrice = vdata.shopInfo.isMemberPrice;
+      break;
+    case "isTableFee":
+      if (vdata.isTableFee) {
+        params.isTableFee = 1;
+      } else {
+        params.isTableFee = 0;
+      }
+      break;
+    case "isOrderFence":
+      params.isOrderFence = vdata.shopInfo.isOrderFence;
+      break;
+  }
+  updateShopInfo(params);
 };
 
 /**
  * 选择地图
  */
 let showMap = () => {
-	// 本地 测试选择
-	// 打开地图
+  // 本地 测试选择
+  // 打开地图
 
-	uni.chooseLocation({
-		// type: 'wgs84',
-		success: function (res) {
-			vdata.shopInfo.lng = res.longitude.toFixed(6); // IOS 小程序中：  经纬度12位。
-			vdata.shopInfo.lat = res.latitude.toFixed(6);
-			vdata.shopInfo.address = res.name;
-			switchChange('address');
-		},
-		fail: function (err) {
-			console.log(err);
-			// uni.showToast({
-			// 	title:err,
-			// 	icon:'error'
-			// })
-		}
-	});
+  uni.chooseLocation({
+    // type: 'wgs84',
+    success: function (res) {
+      vdata.shopInfo.lng = res.longitude.toFixed(6); // IOS 小程序中：  经纬度12位。
+      vdata.shopInfo.lat = res.latitude.toFixed(6);
+      vdata.shopInfo.address = res.name;
+      switchChange("address");
+    },
+    fail: function (err) {
+      console.log(err);
+      // uni.showToast({
+      // 	title:err,
+      // 	icon:'error'
+      // })
+    },
+  });
 };
 </script>
 
 <style lang="scss" scoped>
 .page-wrapper {
-	background-color: #f8f8f8;
-	padding-bottom: 32rpx;
-	.page-cell {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 32rpx 28rpx;
-		box-sizing: border-box;
-		background-color: #fff;
-		.label {
-			font-weight: bold;
-			font-size: 28rpx;
-			color: #333333;
-			display: flex;
-			align-items: center;
-			flex-shrink: 0;
-			margin-right: 20rpx;
-			.tableFee {
-				width: 186rpx;
-				height: 54rpx;
-				line-height: 54rpx;
-				margin-left: 10rpx;
-				font-size: 28rpx;
-				color: #333;
-				border-radius: 8rpx 8rpx 8rpx 8rpx;
-				border: 2rpx solid #e5e5e5;
-				text-align: left;
-				padding: 0 18rpx;
-				box-sizing: border-box;
-			}
-		}
-		.extendList {
-			width: 100%;
-			display: flex;
-			flex-direction: column;
-			margin-top: 24rpx;
-			.extendTab {
-				display: flex;
-				justify-content: flex-start;
-				.extendTab_item {
-					font-size: 24rpx;
-					font-weight: 400;
-					padding: 4rpx 12rpx;
-					border-radius: 4rpx;
-					border: 2rpx solid #e5e5e5;
-					margin-right: 20rpx;
-				}
-				.active {
-					background: #318afe;
-					border: 2rpx solid #318afe;
-					color: #fff;
-				}
-			}
-			.extend_content {
-				display: flex;
-				margin-top: 32rpx;
-				.preview {
-					min-width: 146rpx;
-					height: 342rpx;
-					position: relative;
-					margin-right: 32rpx;
-					background-color: #f7f7f7;
-					::v-deep .bg,
-					::v-deep .bg .u-image,
-					::v-deep .bg .u-image__image {
-						width: 146rpx !important;
-						height: 342rpx !important;
-						position: absolute;
-						top: 0;
-					}
+  background-color: #f8f8f8;
+  padding-bottom: 32rpx;
+  .page-cell {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32rpx 28rpx;
+    box-sizing: border-box;
+    background-color: #fff;
+    .label {
+      font-weight: bold;
+      font-size: 28rpx;
+      color: #333333;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-right: 20rpx;
+      .tableFee {
+        width: 186rpx;
+        height: 54rpx;
+        line-height: 54rpx;
+        margin-left: 10rpx;
+        font-size: 28rpx;
+        color: #333;
+        border-radius: 8rpx 8rpx 8rpx 8rpx;
+        border: 2rpx solid #e5e5e5;
+        text-align: left;
+        padding: 0 18rpx;
+        box-sizing: border-box;
+      }
+    }
+    .extendList {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-top: 24rpx;
+      .extendTab {
+        display: flex;
+        justify-content: flex-start;
+        .extendTab_item {
+          font-size: 24rpx;
+          font-weight: 400;
+          padding: 4rpx 12rpx;
+          border-radius: 4rpx;
+          border: 2rpx solid #e5e5e5;
+          margin-right: 20rpx;
+        }
+        .active {
+          background: #318afe;
+          border: 2rpx solid #318afe;
+          color: #fff;
+        }
+      }
+      .extend_content {
+        display: flex;
+        margin-top: 32rpx;
+        .preview {
+          min-width: 146rpx;
+          height: 342rpx;
+          position: relative;
+          margin-right: 32rpx;
+          background-color: #f7f7f7;
+          ::v-deep .bg,
+          ::v-deep .bg .u-image,
+          ::v-deep .bg .u-image__image {
+            width: 146rpx !important;
+            height: 342rpx !important;
+            position: absolute;
+            top: 0;
+          }
 
-					::v-deep .index_bg .u-image,
-					::v-deep .index_bg .u-image__image {
-						width: 146rpx !important;
-						height: 242rpx !important;
-						position: absolute;
-						top: 0;
-					}
+          ::v-deep .index_bg .u-image,
+          ::v-deep .index_bg .u-image__image {
+            width: 146rpx !important;
+            height: 242rpx !important;
+            position: absolute;
+            top: 0;
+          }
 
-					::v-deep .my_bg .u-image,
-					::v-deep .my_bg .u-image__image {
-						width: 146rpx !important;
-						height: 90rpx !important;
-						position: absolute;
-						top: 0;
-					}
+          ::v-deep .my_bg .u-image,
+          ::v-deep .my_bg .u-image__image {
+            width: 146rpx !important;
+            height: 90rpx !important;
+            position: absolute;
+            top: 0;
+          }
 
-					::v-deep .member_bg .u-image,
-					::v-deep .member_bg .u-image__image {
-						width: 34rpx !important;
-						height: 63rpx !important;
-						position: absolute;
-						top: 22rpx;
-						left: 0;
-						right: 0;
-						margin: auto;
-						border-radius: 5rpx !important;
-					}
+          ::v-deep .member_bg .u-image,
+          ::v-deep .member_bg .u-image__image {
+            width: 34rpx !important;
+            height: 63rpx !important;
+            position: absolute;
+            top: 22rpx;
+            left: 0;
+            right: 0;
+            margin: auto;
+            border-radius: 5rpx !important;
+          }
 
-					::v-deep .shopinfo_bg .u-image,
-					::v-deep .shopinfo_bg .u-image__image {
-						width: 146rpx !important;
-						height: 50rpx !important;
-						position: absolute;
-						top: 0;
-					}
-					::v-deep .bg.ticket_logo,
-					::v-deep .bg.ticket_logo .u-image,
-					::v-deep .bg.ticket_logo .u-image__image {
-						width: 359rpx !important;
-						height: 232rpx !important;
-						position: absolute;
-						top: 0;
-					}
-					::v-deep .ticket_logo.img .u-image,
-					::v-deep .ticket_logo.img .u-image__image {
-						width: 146rpx !important;
-						height: 50rpx !important;
-						position: absolute;
-						top: 0;
-						left: 10rpx;
-					}
+          ::v-deep .shopinfo_bg .u-image,
+          ::v-deep .shopinfo_bg .u-image__image {
+            width: 146rpx !important;
+            height: 50rpx !important;
+            position: absolute;
+            top: 0;
+          }
+          ::v-deep .bg.ticket_logo,
+          ::v-deep .bg.ticket_logo .u-image,
+          ::v-deep .bg.ticket_logo .u-image__image {
+            width: 359rpx !important;
+            height: 232rpx !important;
+            position: absolute;
+            top: 0;
+          }
+          ::v-deep .ticket_logo.img .u-image,
+          ::v-deep .ticket_logo.img .u-image__image {
+            width: 146rpx !important;
+            height: 50rpx !important;
+            position: absolute;
+            top: 0;
+            left: 10rpx;
+          }
 
-					.shopinfo_bg_f {
-						width: 146rpx;
-						height: 290rpx;
-						position: absolute;
-						bottom: 0;
-						background-color: #fff;
-					}
-				}
-				.extend_img {
-					display: flex;
-					flex-direction: column;
-					.extend_title {
-						font-weight: 400;
-						font-size: 24rpx;
-						color: #333333;
-						margin-bottom: 16rpx;
-					}
-					.fileUp {
-						width: 148rpx;
-						height: 148rpx;
-						position: relative;
-						.file {
-							width: 148rpx;
-							height: 148rpx;
-							position: absolute;
-							top: 0;
-						}
-					}
-					::v-deep .u-image,
-					::v-deep .u-image__image {
-						width: 148rpx !important;
-						height: 148rpx !important;
-					}
-				}
-			}
-		}
-	}
-	.column {
-		flex-direction: column;
-		.label {
-			align-self: flex-start;
-		}
-	}
-	.m {
-		margin-bottom: 12rpx;
-	}
-	.cutShop {
-		width: 530rpx;
-		height: 80rpx;
-		line-height: 80rpx;
-		background: #318afe;
-		border-radius: 56rpx;
-		font-weight: 500;
-		font-size: 32rpx;
-		color: #ffffff;
-		margin: 48rpx auto 0 auto;
-		text-align: center;
-	}
+          .shopinfo_bg_f {
+            width: 146rpx;
+            height: 290rpx;
+            position: absolute;
+            bottom: 0;
+            background-color: #fff;
+          }
+        }
+        .extend_img {
+          display: flex;
+          flex-direction: column;
+          .extend_title {
+            font-weight: 400;
+            font-size: 24rpx;
+            color: #333333;
+            margin-bottom: 16rpx;
+          }
+          .fileUp {
+            width: 148rpx;
+            height: 148rpx;
+            position: relative;
+            .file {
+              width: 148rpx;
+              height: 148rpx;
+              position: absolute;
+              top: 0;
+            }
+          }
+          ::v-deep .u-image,
+          ::v-deep .u-image__image {
+            width: 148rpx !important;
+            height: 148rpx !important;
+          }
+        }
+      }
+    }
+  }
+  .column {
+    flex-direction: column;
+    .label {
+      align-self: flex-start;
+    }
+  }
+  .m {
+    margin-bottom: 12rpx;
+  }
+  .cutShop {
+    width: 530rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    background: #318afe;
+    border-radius: 56rpx;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #ffffff;
+    margin: 48rpx auto 0 auto;
+    text-align: center;
+  }
 
-	.right {
-		display: flex;
-		align-items: center;
-		font-weight: 400;
-		font-size: 28rpx;
-		color: #999999;
-		position: relative;
+  .right {
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #999999;
+    position: relative;
 
-		.file {
-			width: 112rpx;
-			height: 112rpx;
-			line-height: 112rpx;
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			right: 0;
-			margin: auto;
-		}
+    .file {
+      width: 112rpx;
+      height: 112rpx;
+      line-height: 112rpx;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+    }
 
-		.fileImg {
-			width: 112rpx !important;
-			height: 112rpx !important;
-			::v-deep .u-avatar__image {
-				width: 112rpx !important;
-				height: 112rpx !important;
-			}
-		}
-	}
+    .fileImg {
+      width: 112rpx !important;
+      height: 112rpx !important;
+      ::v-deep .u-avatar__image {
+        width: 112rpx !important;
+        height: 112rpx !important;
+      }
+    }
+  }
 }
 </style>