商城页面样式修改

pages/Shopping-cart/productmain/productmain.vue

@@ -113,11 +113,17 @@
 }
 .text-wrapper {
   position: fixed;
-  
+  top: 0;
+  left: 0;
+  right: 0;
   padding: 26.25rpx 0;
   background-color: #f5f5dc;
 }
 .section {
+  position: fixed;
+  top: 75rpx;
+  right: 0;
+  left: 0;
   padding: 0 121.88rpx;
   background-color: #fffef8;
 }
@@ -130,6 +136,7 @@
   height: 5.63rpx;
 }
 .list {
+	margin-top: 134rpx;
   margin-bottom: 125rpx;
   padding: 18.75rpx 13.13rpx 0;
 }

pages/store-home/main/main.vue

@@ -1,76 +1,61 @@
 <template>
-	<view class="flex-col page">
+	<view class="flex-row relative page">
-		<view class="flex-col">
+		<view class="flex-row items-center section pos_8">
-			<view class="flex-row items-center section">
 			<text class="text">商品</text>
-				<view class="flex-row section_2 ml-15">
+			<view class="flex-row items-center section_2 ml-15">
 				<image class="image"
-						src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=348b14e68c9ce02a3b9fe870f131c4c7.png" />
+					src="https://ide.code.fun/api/image?token=671134c30a3d780012a6a0cb&name=9be8d37ecdad5a4ae97f3017b8b13575.png" />
-					<input class="text-wrapper ml-2" placeholder="请输入想要搜索的商品" />
+				<input class="text-wrapper ml-3" placeholder="请输入内容" />
 			</view>
 		</view>
-			<view class="flex-col justify-start items-center image-wrapper mt-3">
+		<view class="flex-col justify-start items-center image-wrapper pos_1">
 			<image class="shrink-0 image_2"
-					src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=bf3dfe8c3d572943e00870d83c40b20c.png" />
+				src="" />
+		</view>
+		<view class="flex-col justify-start section_3 pos_9">
+			<view class="flex-col group">
+				<view class="flex-col items-center list-item mt-5" v-for="(item, index) in sort" :key="index">
+					<image class="image_3"
+						:src="item.imgurl" />
+					<text class="font_4 mt-3">{{ item.name }}</text>
 				</view>
 			</view>
-		<view class="flex-row relative group">
-			<view class="shrink-0 section_3"></view>
-			<view class="flex-col shrink-0 group_1 pos_5">
-				<view class="flex-col items-center section_6 list-item_1 mt-4" v-for="(item, index) in sort"
-					:key="index">
-					<image class="image_3" :src="item.imgurl" />
-					<text class="font_3 text_5 mt-3">{{ item.name }}</text>
 		</view>
-			</view>
+		<view class="flex-col justify-start section_4 pos_4">
-			<view class="flex-col justify-start flex-1 relative section_4">
 			<view class="flex-col items-start section_5">
-					<text class="font_2 text_3">材料包</text>
+				<text class="font_2">材料包</text>
-					<text class="font text_4 mt-6">提供材料自行DIY</text>
+				<text class="font_3 text_3 mt-6">提供材料自行DIY</text>
 			</view>
-				<view class="flex-col shrink-0 pos">
+		</view>
-					<!-- <scroll-view style="height: 1000rpx;" scroll-y="true"> -->
+		<view class="flex-col pos_5">
-						<view class="flex-row list-item mt-5" v-for="(item, index) in product_list" :key="index">
+			<scroll-view scroll-y class="scrollable-content">
-							
+				<view class="flex-row section_9 list-item_2 mt-5" v-for="(item, index) in product_list" :key="index" @click="tap">
-							<image class="self-center image_4" :src="item.imgurl" />
+					<image class="self-center image_4"
-							<view class="flex-col items-start self-center group_5">
+						:src="item.imgurl" />
-								<text class="font_2">{{ item.product_name }}</text>
+					<view class="flex-col items-start self-center group_3">
-								<text class="font mt-13">{{ item.detail }}</text>
+						<text class="font_2 text_5">{{ item.product_name }}</text>
-								<text class="font_4 text_7 mt-13">￥{{ item.value }}</text>
+						<text class="font_3 mt-13">{{ item.detail }}</text>
+						<text class="font mt-13">￥{{ item.value }}</text>
 					</view>
 					<image class="self-start image_5"
-								src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=806f54ff88b61d172a611e704c80a85c.png" />
+						:src="add_img" />
-						
-						</view>
-					<!-- </scroll-view> -->
-				</view>
-			</view>
-			<!-- <view class="flex-col shrink-0 pos">
-				<scroll-view style="height: 1000rpx;" scroll-y="true">
-					<view class="flex-row list-item mt-5" v-for="(item, index) in product_list" :key="index">
-						<image class="self-center image_4" :src="item.imgurl" />
-						<view class="flex-col items-start self-center group_5">
-							<text class="font_2">{{ item.product_name }}</text>
-							<text class="font mt-13">{{ item.detail }}</text>
-							<text class="font_4 text_7 mt-13">￥{{ item.value }}</text>
-						</view> 
-						<image class="self-start image_5"
-							src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=806f54ff88b61d172a611e704c80a85c.png" />
 				</view>
 			</scroll-view>
-			</view> -->
 		</view>
 	</view>
 </template>
 
 <script setup>
-	import { ref } from 'vue';
+	import {
+		ref
+	} from 'vue';
 	import img1 from '@/pages/store-home/main/img/cailiaobao.png';
 	import img2 from '@/pages/store-home/main/img/shouchiwu.png';
 	import img3 from '@/pages/store-home/main/img/toushi.png';
 	import img4 from '@/pages/store-home/main/img/dingzhi.png';
 	import img5 from '@/pages/store-home/main/img/jifenduihuan.png';
 	import product_img from '@/pages/store-home/main/img/shangpingtupian.png';
+	import add_img from '@/pages/store-home/main/img/tianjia.png';
 	const sort = ref([{
 			name: "材料包",
 			imgurl: img1
@@ -145,31 +130,47 @@
 		type: "材料包",
 		detail: "提供材料自行DIY"
 	}]
+	const tap =()=> {
+		uni.navigateTo({
+			url: '../../../pages/order/product-close/product-close'
+		})
+	}
 </script>
 
 <style lang="scss" scoped>
+	.scrollable-content {
+		height: 56vh;
+		/* 100px 是头部和底部的高度之和 */
+	}
+
 	.ml-15 {
 		margin-left: 28.13rpx;
 	}
 
+	.ml-3 {
+		margin-left: 5.63rpx;
+	}
+
 	.mt-3 {
 		margin-top: 5.63rpx;
 	}
 
-	.mt-5 {
-		margin-top: 9.38rpx;
-	}
-
 	.mt-13 {
 		margin-top: 24.38rpx;
 	}
 
+	.mt-5 {
+		margin-top: 9.38rpx;
+	}
+
 	.page {
 		background-color: #f5f5dc;
+		// height: 1413.75rpx;
 		width: 100%;
 		overflow-y: auto;
 		overflow-x: hidden;
-		height: 100%;
+		height: 100vh;
+		overflow: hidden;
 	}
 
 	.section {
@@ -177,6 +178,13 @@
 		background-color: #f7de98;
 	}
 
+	.pos_8 {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+	}
+
 	.text {
 		color: #c1651a;
 		font-size: 37.5rpx;
@@ -185,66 +193,72 @@
 	}
 
 	.section_2 {
-		padding: 7.5rpx 30.43rpx;
+		padding: 5.63rpx 15rpx 8.44rpx;
 		background-color: #ffffff;
 		border-radius: 28.13rpx;
 		height: 63.75rpx;
+		width: 500.69rpx;
 	}
 
 	.image {
-		width: 48.75rpx;
+		width: 50.63rpx;
-		height: 48.75rpx;
+		height: 50.63rpx;
 	}
 
 	.text-wrapper {
-		margin-right: 5.31rpx;
+		margin-right: 17.42rpx;
+	}
+
+	.font {
+		font-size: 26.25rpx;
+		font-family: STFangsong;
+		line-height: 18rpx;
+		color: #ff0000;
 	}
 
 	.image-wrapper {
-		margin-left: 22.5rpx;
-		margin-right: 24.38rpx;
 		background-color: #ffffff;
 		border-radius: 28.13rpx;
 		overflow: hidden;
 		border: solid 9.38rpx #ffffff;
 	}
 
+	.pos_1 {
+		position: absolute;
+		left: 22.5rpx;
+		right: 24.38rpx;
+		top: 118.13rpx;
+	}
+
 	.image_2 {
 		width: 91.25vw;
 		height: 37.5vw;
 	}
 
-	.group {
-		position: relative;
-		
-		border: 3px solid brown;
-		margin-top: 22.5rpx;
-		// height: 1000rpx;
-	}
-
 	.section_3 {
-		background-color: #FFFEF8;
+		padding: 8.44rpx 5.63rpx 750rpx;
+		background-color: #f7de98;
 		width: 151.88rpx;
-		// height: 1156.88rpx;
 	}
 
-	.group_1 {
+	.pos_9 {
-		width: 142.5rpx;
-	}
-
-	.pos_5 {
 		position: absolute;
-		left: 5.63rpx;
+		left: 0;
-		top: 5.63rpx;
+		top: 440.63rpx;
 	}
 
-	.section_6 {
+	.group {
+		margin: auto;
+		width: 137.81rpx;
+	}
+
+	.list-item {
 		padding: 11.25rpx 0 9.94rpx;
 		background-color: #fffef8;
 		border-radius: 9.38rpx;
 	}
 
-	.list-item_1:first-child {
+	.list-item:first-child {
 		margin-top: 0;
 	}
 
@@ -254,71 +268,65 @@
 		height: 48.75rpx;
 	}
 
-	.font_3 {
+	.font_4 {
 		font-size: 30rpx;
 		font-family: STFangsong;
-		line-height: 28.65rpx;
+		line-height: 28.26rpx;
 		color: #c1651a;
 	}
 
-	.text_5 {
-		line-height: 28.26rpx;
-	}
-
 	.section_4 {
-		border: 3px solid blue;
+		padding-bottom: 879.38rpx;
-		overflow: auto;
-		margin-right: 7.5rpx;
-		padding-bottom: 790.13rpx;
 		background-color: #f8e8c1;
 		border-radius: 0rpx 18.75rpx 0rpx 0rpx;
-		// height: 760.88rpx;
+		width: 600.13rpx;
+	}
+
+	.pos_4 {
+		position: absolute;
+		right: 0;
+		top: 440.63rpx;
 	}
 
 	.section_5 {
 		padding: 18.06rpx 16.24rpx 14.94rpx;
-		background-color: #C1651A;
+		background-color: #fffef8;
-		
 		border-radius: 0rpx 18.75rpx 0rpx 0rpx;
+		width: 598.13rpx;
 	}
 
 	.font_2 {
 		font-size: 30rpx;
 		font-family: STFangsong;
-		line-height: 28.65rpx;
+		line-height: 28.26rpx;
 		color: #000000;
 	}
 
-	.text_3 {
+	.font_3 {
-		line-height: 28.26rpx;
-	}
-
-	.font {
 		font-size: 22.5rpx;
 		font-family: STFangsong;
 		line-height: 21.56rpx;
 		color: #727272;
 	}
 
-	.text_4 {
+	.text_3 {
 		line-height: 21.15rpx;
 	}
 
-	.pos {
+	.pos_5 {
 		position: absolute;
-		border: 3px solid red;
-		// height: 500rpx;
 		right: 15rpx;
-		top: 99.38rpx;
+		top: 543.75rpx;
 	}
 
-	.list-item {
+	.section_9 {
-		padding: 20.63rpx 27.88rpx 22.5rpx;
+		padding: 20.63rpx 22.88rpx 22.5rpx;
 		background-color: #fffef8;
 		border-radius: 9.38rpx;
+		right: 13.13rpx;
 	}
 
-	.list-item:first-child {
+	.list-item_2:first-child {
 		margin-top: 0;
 	}
 
@@ -328,27 +336,21 @@
 		height: 131.25rpx;
 	}
 
-	.group_5 {
+	.group_3 {
 		margin-left: 24.84rpx;
 	}
 
-	.font_4 {
+	.text_5 {
-		font-size: 26.25rpx;
+		line-height: 28.65rpx;
-		font-family: STFangsong;
-		line-height: 18rpx;
-		color: #ff0000;
-	}
-
-	.text_7 {
-		-webkit-text-stroke: 1.88rpx #ff000040;
 	}
 
 	.image_5 {
-		margin: 75rpx 3.77rpx 0 96.71rpx;
+		margin: 75rpx 5.63rpx 0 107.96rpx;
 		border-radius: 9.38rpx;
 		width: 56.25rpx;
 		height: 56.25rpx;
 	}
 
+
 	@import url(../../../common/css/global.css);
 </style>

unpackage/dist/dev/mp-weixin/common/assets.js

@@ -5,6 +5,8 @@ const img3 = "/assets/toushi.6558cc23.png";
 const img4 = "/assets/dingzhi.d6614f9f.png";
 const img5 = "/assets/jifenduihuan.a1c23524.png";
 const product_img = "/assets/shangpingtupian.ec8c0440.png";
+const add_img = "/assets/tianjia.187834c9.png";
+exports.add_img = add_img;
 exports.img1 = img1;
 exports.img2 = img2;
 exports.img3 = img3;

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -6568,6 +6568,95 @@ function getCreateApp() {
     return my[method];
   }
 }
+function vOn(value, key) {
+  const instance = getCurrentInstance();
+  const ctx = instance.ctx;
+  const extraKey = typeof key !== "undefined" && (ctx.$mpPlatform === "mp-weixin" || ctx.$mpPlatform === "mp-qq" || ctx.$mpPlatform === "mp-xhs") && (isString(key) || typeof key === "number") ? "_" + key : "";
+  const name = "e" + instance.$ei++ + extraKey;
+  const mpInstance = ctx.$scope;
+  if (!value) {
+    delete mpInstance[name];
+    return name;
+  }
+  const existingInvoker = mpInstance[name];
+  if (existingInvoker) {
+    existingInvoker.value = value;
+  } else {
+    mpInstance[name] = createInvoker(value, instance);
+  }
+  return name;
+}
+function createInvoker(initialValue, instance) {
+  const invoker = (e2) => {
+    patchMPEvent(e2);
+    let args = [e2];
+    if (e2.detail && e2.detail.__args__) {
+      args = e2.detail.__args__;
+    }
+    const eventValue = invoker.value;
+    const invoke = () => callWithAsyncErrorHandling(patchStopImmediatePropagation(e2, eventValue), instance, 5, args);
+    const eventTarget = e2.target;
+    const eventSync = eventTarget ? eventTarget.dataset ? String(eventTarget.dataset.eventsync) === "true" : false : false;
+    if (bubbles.includes(e2.type) && !eventSync) {
+      setTimeout(invoke);
+    } else {
+      const res = invoke();
+      if (e2.type === "input" && (isArray(res) || isPromise(res))) {
+        return;
+      }
+      return res;
+    }
+  };
+  invoker.value = initialValue;
+  return invoker;
+}
+const bubbles = [
+  // touch事件暂不做延迟，否则在 Android 上会影响性能，比如一些拖拽跟手手势等
+  // 'touchstart',
+  // 'touchmove',
+  // 'touchcancel',
+  // 'touchend',
+  "tap",
+  "longpress",
+  "longtap",
+  "transitionend",
+  "animationstart",
+  "animationiteration",
+  "animationend",
+  "touchforcechange"
+];
+function patchMPEvent(event) {
+  if (event.type && event.target) {
+    event.preventDefault = NOOP;
+    event.stopPropagation = NOOP;
+    event.stopImmediatePropagation = NOOP;
+    if (!hasOwn(event, "detail")) {
+      event.detail = {};
+    }
+    if (hasOwn(event, "markerId")) {
+      event.detail = typeof event.detail === "object" ? event.detail : {};
+      event.detail.markerId = event.markerId;
+    }
+    if (isPlainObject(event.detail) && hasOwn(event.detail, "checked") && !hasOwn(event.detail, "value")) {
+      event.detail.value = event.detail.checked;
+    }
+    if (isPlainObject(event.detail)) {
+      event.target = extend({}, event.target, event.detail);
+    }
+  }
+}
+function patchStopImmediatePropagation(e2, value) {
+  if (isArray(value)) {
+    const originalStop = e2.stopImmediatePropagation;
+    e2.stopImmediatePropagation = () => {
+      originalStop && originalStop.call(e2);
+      e2._stopped = true;
+    };
+    return value.map((fn) => (e3) => !e3._stopped && fn(e3));
+  } else {
+    return value;
+  }
+}
 function vFor(source, renderItem) {
   let ret;
   if (isArray(source) || isString(source)) {
@@ -6600,6 +6689,7 @@ function vFor(source, renderItem) {
   }
   return ret;
 }
+const o = (value, key) => vOn(value, key);
 const f = (source, renderItem) => vFor(source, renderItem);
 const t = (val) => toDisplayString(val);
 function createApp$1(rootComponent, rootProps = null) {
@@ -7436,5 +7526,8 @@ const createSubpackageApp = initCreateSubpackageApp();
 exports._export_sfc = _export_sfc;
 exports.createSSRApp = createSSRApp;
 exports.f = f;
+exports.index = index;
+exports.o = o;
 exports.ref = ref;
 exports.t = t;
+exports.unref = unref;

unpackage/dist/dev/mp-weixin/pages/Shopping-cart/productmain/productmain.wxss

@@ -416,10 +416,17 @@ text.data-v-641af6de {
 }
 .text-wrapper.data-v-641af6de {
   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   padding: 26.25rpx 0;
   background-color: #f5f5dc;
 }
 .section.data-v-641af6de {
+  position: fixed;
+  top: 75rpx;
+  right: 0;
+  left: 0;
   padding: 0 121.88rpx;
   background-color: #fffef8;
 }
@@ -432,6 +439,7 @@ text.data-v-641af6de {
   height: 5.63rpx;
 }
 .list.data-v-641af6de {
+  margin-top: 134rpx;
   margin-bottom: 125rpx;
   padding: 18.75rpx 13.13rpx 0;
 }

unpackage/dist/dev/mp-weixin/pages/store-home/main/main.js

@@ -76,6 +76,11 @@ const _sfc_main = {
         imgurl: common_assets.product_img
       }
     ]);
+    const tap = () => {
+      common_vendor.index.navigateTo({
+        url: "../../../pages/order/product-close/product-close"
+      });
+    };
     return (_ctx, _cache) => {
       return {
         a: common_vendor.f(sort.value, (item, index, i0) => {
@@ -91,9 +96,11 @@ const _sfc_main = {
             b: common_vendor.t(item.product_name),
             c: common_vendor.t(item.detail),
             d: common_vendor.t(item.value),
-            e: index
+            e: index,
+            f: common_vendor.o(tap, index)
           };
-        })
+        }),
+        c: common_vendor.unref(common_assets.add_img)
       };
     };
   }

unpackage/dist/dev/mp-weixin/pages/store-home/main/main.wxml

@@ -1 +1 @@
-<view class="flex-col page data-v-7e3c386d"><view class="flex-col data-v-7e3c386d"><view class="flex-row items-center section data-v-7e3c386d"><text class="text data-v-7e3c386d">商品</text><view class="flex-row section_2 ml-15 data-v-7e3c386d"><image class="image data-v-7e3c386d" src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=348b14e68c9ce02a3b9fe870f131c4c7.png"/><input class="text-wrapper ml-2 data-v-7e3c386d" placeholder="请输入想要搜索的商品"/></view></view><view class="flex-col justify-start items-center image-wrapper mt-3 data-v-7e3c386d"><image class="shrink-0 image_2 data-v-7e3c386d" src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=bf3dfe8c3d572943e00870d83c40b20c.png"/></view></view><view class="flex-row relative group data-v-7e3c386d"><view class="shrink-0 section_3 data-v-7e3c386d"></view><view class="flex-col shrink-0 group_1 pos_5 data-v-7e3c386d"><view wx:for="{{a}}" wx:for-item="item" wx:key="c" class="flex-col items-center section_6 list-item_1 mt-4 data-v-7e3c386d"><image class="image_3 data-v-7e3c386d" src="{{item.a}}"/><text class="font_3 text_5 mt-3 data-v-7e3c386d">{{item.b}}</text></view></view><view class="flex-col justify-start flex-1 relative section_4 data-v-7e3c386d"><view class="flex-col items-start section_5 data-v-7e3c386d"><text class="font_2 text_3 data-v-7e3c386d">材料包</text><text class="font text_4 mt-6 data-v-7e3c386d">提供材料自行DIY</text></view><view class="flex-col shrink-0 pos data-v-7e3c386d"><view wx:for="{{b}}" wx:for-item="item" wx:key="e" class="flex-row list-item mt-5 data-v-7e3c386d"><image class="self-center image_4 data-v-7e3c386d" src="{{item.a}}"/><view class="flex-col items-start self-center group_5 data-v-7e3c386d"><text class="font_2 data-v-7e3c386d">{{item.b}}</text><text class="font mt-13 data-v-7e3c386d">{{item.c}}</text><text class="font_4 text_7 mt-13 data-v-7e3c386d">￥{{item.d}}</text></view><image class="self-start image_5 data-v-7e3c386d" src="https://ide.code.fun/api/image?token=670c83a81511d900114a6d7e&name=806f54ff88b61d172a611e704c80a85c.png"/></view></view></view></view></view>
+<view class="flex-row relative page data-v-7e3c386d"><view class="flex-row items-center section pos_8 data-v-7e3c386d"><text class="text data-v-7e3c386d">商品</text><view class="flex-row items-center section_2 ml-15 data-v-7e3c386d"><image class="image data-v-7e3c386d" src="https://ide.code.fun/api/image?token=671134c30a3d780012a6a0cb&name=9be8d37ecdad5a4ae97f3017b8b13575.png"/><input class="text-wrapper ml-3 data-v-7e3c386d" placeholder="请输入内容"/></view></view><view class="flex-col justify-start items-center image-wrapper pos_1 data-v-7e3c386d"><image class="shrink-0 image_2 data-v-7e3c386d" src="{{''}}"/></view><view class="flex-col justify-start section_3 pos_9 data-v-7e3c386d"><view class="flex-col group data-v-7e3c386d"><view wx:for="{{a}}" wx:for-item="item" wx:key="c" class="flex-col items-center list-item mt-5 data-v-7e3c386d"><image class="image_3 data-v-7e3c386d" src="{{item.a}}"/><text class="font_4 mt-3 data-v-7e3c386d">{{item.b}}</text></view></view></view><view class="flex-col justify-start section_4 pos_4 data-v-7e3c386d"><view class="flex-col items-start section_5 data-v-7e3c386d"><text class="font_2 data-v-7e3c386d">材料包</text><text class="font_3 text_3 mt-6 data-v-7e3c386d">提供材料自行DIY</text></view></view><view class="flex-col pos_5 data-v-7e3c386d"><scroll-view scroll-y class="scrollable-content data-v-7e3c386d"><view wx:for="{{b}}" wx:for-item="item" wx:key="e" class="flex-row section_9 list-item_2 mt-5 data-v-7e3c386d" bindtap="{{item.f}}"><image class="self-center image_4 data-v-7e3c386d" src="{{item.a}}"/><view class="flex-col items-start self-center group_3 data-v-7e3c386d"><text class="font_2 text_5 data-v-7e3c386d">{{item.b}}</text><text class="font_3 mt-13 data-v-7e3c386d">{{item.c}}</text><text class="font mt-13 data-v-7e3c386d">￥{{item.d}}</text></view><image class="self-start image_5 data-v-7e3c386d" src="{{c}}"/></view></scroll-view></view></view>

unpackage/dist/dev/mp-weixin/pages/store-home/main/main.wxss

@@ -401,29 +401,43 @@ text.data-v-7e3c386d {
 .mt-100.data-v-7e3c386d {
   margin-top: 187.5rpx;
 }
+.scrollable-content.data-v-7e3c386d {
+  height: 56vh;
+  /* 100px 是头部和底部的高度之和 */
+}
 .ml-15.data-v-7e3c386d {
   margin-left: 28.13rpx;
 }
+.ml-3.data-v-7e3c386d {
+  margin-left: 5.63rpx;
+}
 .mt-3.data-v-7e3c386d {
   margin-top: 5.63rpx;
 }
-.mt-5.data-v-7e3c386d {
-  margin-top: 9.38rpx;
-}
 .mt-13.data-v-7e3c386d {
   margin-top: 24.38rpx;
 }
+.mt-5.data-v-7e3c386d {
+  margin-top: 9.38rpx;
+}
 .page.data-v-7e3c386d {
   background-color: #f5f5dc;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  height: 100%;
+  height: 100vh;
+  overflow: hidden;
 }
 .section.data-v-7e3c386d {
   padding: 22.5rpx 39.28rpx 16.88rpx;
   background-color: #f7de98;
 }
+.pos_8.data-v-7e3c386d {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+}
 .text.data-v-7e3c386d {
   color: #c1651a;
   font-size: 37.5rpx;
@@ -431,53 +445,61 @@ text.data-v-7e3c386d {
   line-height: 36.19rpx;
 }
 .section_2.data-v-7e3c386d {
-  padding: 7.5rpx 30.43rpx;
+  padding: 5.63rpx 15rpx 8.44rpx;
   background-color: #ffffff;
   border-radius: 28.13rpx;
   height: 63.75rpx;
+  width: 500.69rpx;
 }
 .image.data-v-7e3c386d {
-  width: 48.75rpx;
+  width: 50.63rpx;
-  height: 48.75rpx;
+  height: 50.63rpx;
 }
 .text-wrapper.data-v-7e3c386d {
-  margin-right: 5.31rpx;
+  margin-right: 17.42rpx;
+}
+.font.data-v-7e3c386d {
+  font-size: 26.25rpx;
+  font-family: STFangsong;
+  line-height: 18rpx;
+  color: #ff0000;
 }
 .image-wrapper.data-v-7e3c386d {
-  margin-left: 22.5rpx;
-  margin-right: 24.38rpx;
   background-color: #ffffff;
   border-radius: 28.13rpx;
   overflow: hidden;
   border: solid 9.38rpx #ffffff;
 }
+.pos_1.data-v-7e3c386d {
+  position: absolute;
+  left: 22.5rpx;
+  right: 24.38rpx;
+  top: 118.13rpx;
+}
 .image_2.data-v-7e3c386d {
   width: 91.25vw;
   height: 37.5vw;
 }
-.group.data-v-7e3c386d {
-  position: relative;
-  border: 3px solid brown;
-  margin-top: 22.5rpx;
-}
 .section_3.data-v-7e3c386d {
-  background-color: #FFFEF8;
+  padding: 8.44rpx 5.63rpx 750rpx;
+  background-color: #f7de98;
   width: 151.88rpx;
 }
-.group_1.data-v-7e3c386d {
+.pos_9.data-v-7e3c386d {
-  width: 142.5rpx;
-}
-.pos_5.data-v-7e3c386d {
   position: absolute;
-  left: 5.63rpx;
+  left: 0;
-  top: 5.63rpx;
+  top: 440.63rpx;
 }
-.section_6.data-v-7e3c386d {
+.group.data-v-7e3c386d {
+  margin: auto;
+  width: 137.81rpx;
+}
+.list-item.data-v-7e3c386d {
   padding: 11.25rpx 0 9.94rpx;
   background-color: #fffef8;
   border-radius: 9.38rpx;
 }
-.list-item_1.data-v-7e3c386d:first-child {
+.list-item.data-v-7e3c386d:first-child {
   margin-top: 0;
 }
 .image_3.data-v-7e3c386d {
@@ -485,58 +507,56 @@ text.data-v-7e3c386d {
   width: 48.75rpx;
   height: 48.75rpx;
 }
-.font_3.data-v-7e3c386d {
+.font_4.data-v-7e3c386d {
   font-size: 30rpx;
   font-family: STFangsong;
-  line-height: 28.65rpx;
+  line-height: 28.26rpx;
   color: #c1651a;
 }
-.text_5.data-v-7e3c386d {
-  line-height: 28.26rpx;
-}
 .section_4.data-v-7e3c386d {
-  border: 3px solid blue;
+  padding-bottom: 879.38rpx;
-  overflow: auto;
-  margin-right: 7.5rpx;
-  padding-bottom: 790.13rpx;
   background-color: #f8e8c1;
   border-radius: 0rpx 18.75rpx 0rpx 0rpx;
+  width: 600.13rpx;
+}
+.pos_4.data-v-7e3c386d {
+  position: absolute;
+  right: 0;
+  top: 440.63rpx;
 }
 .section_5.data-v-7e3c386d {
   padding: 18.06rpx 16.24rpx 14.94rpx;
-  background-color: #C1651A;
+  background-color: #fffef8;
   border-radius: 0rpx 18.75rpx 0rpx 0rpx;
+  width: 598.13rpx;
 }
 .font_2.data-v-7e3c386d {
   font-size: 30rpx;
   font-family: STFangsong;
-  line-height: 28.65rpx;
+  line-height: 28.26rpx;
   color: #000000;
 }
-.text_3.data-v-7e3c386d {
+.font_3.data-v-7e3c386d {
-  line-height: 28.26rpx;
-}
-.font.data-v-7e3c386d {
   font-size: 22.5rpx;
   font-family: STFangsong;
   line-height: 21.56rpx;
   color: #727272;
 }
-.text_4.data-v-7e3c386d {
+.text_3.data-v-7e3c386d {
   line-height: 21.15rpx;
 }
-.pos.data-v-7e3c386d {
+.pos_5.data-v-7e3c386d {
   position: absolute;
-  border: 3px solid red;
   right: 15rpx;
-  top: 99.38rpx;
+  top: 543.75rpx;
 }
-.list-item.data-v-7e3c386d {
+.section_9.data-v-7e3c386d {
-  padding: 20.63rpx 27.88rpx 22.5rpx;
+  padding: 20.63rpx 22.88rpx 22.5rpx;
   background-color: #fffef8;
   border-radius: 9.38rpx;
+  right: 13.13rpx;
 }
-.list-item.data-v-7e3c386d:first-child {
+.list-item_2.data-v-7e3c386d:first-child {
   margin-top: 0;
 }
 .image_4.data-v-7e3c386d {
@@ -544,20 +564,14 @@ text.data-v-7e3c386d {
   width: 131.25rpx;
   height: 131.25rpx;
 }
-.group_5.data-v-7e3c386d {
+.group_3.data-v-7e3c386d {
   margin-left: 24.84rpx;
 }
-.font_4.data-v-7e3c386d {
+.text_5.data-v-7e3c386d {
-  font-size: 26.25rpx;
+  line-height: 28.65rpx;
-  font-family: STFangsong;
-  line-height: 18rpx;
-  color: #ff0000;
-}
-.text_7.data-v-7e3c386d {
-  -webkit-text-stroke: 1.88rpx #ff000040;
 }
 .image_5.data-v-7e3c386d {
-  margin: 75rpx 3.77rpx 0 96.71rpx;
+  margin: 75rpx 5.63rpx 0 107.96rpx;
   border-radius: 9.38rpx;
   width: 56.25rpx;
   height: 56.25rpx;