From 03ee367334842864b4cd72d23d9cfe50be5c3c00 Mon Sep 17 00:00:00 2001
From: yuanteng0011 <1876787513@qq.com>
Date: Sat, 9 Nov 2024 23:05:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Shopping-cart/productmain/productmain.vue | 1032 ++++++++---------
 1 file changed, 495 insertions(+), 537 deletions(-)

diff --git a/pages/Shopping-cart/productmain/productmain.vue b/pages/Shopping-cart/productmain/productmain.vue
index eace0a9..85e4d18 100644
--- a/pages/Shopping-cart/productmain/productmain.vue
+++ b/pages/Shopping-cart/productmain/productmain.vue
@@ -1,602 +1,560 @@
+<!-- 购物车的详细页面 包含服务类和商品类 -->
 <template>
 	<view class="flex-col page">
 	  <view class="flex-col">
 	    <view class="flex-col justify-start items-end text-wrapper"><text class="font text">编辑</text></view>
+			<!-- <view class="flex-col justify-start items-end text-wrapper"><text class="font text">完成</text></view> -->
 	    <view class="flex-col section">
 	      <view class="flex-row justify-between self-stretch group">
-	        <text class="font text_2">商品类</text>
-	        <text class="font">服务类</text>
+	        <text class="font text_2" :style="getTextStyle(1)" @click="changeType(1)">商品类</text>
+	        <text class="font"  :style="getTextStyle(2)" @click="changeType(2)">服务类</text>
 	      </view>
-	      <view class="self-start section_2"></view>
 	    </view>
 	    <view class="flex-col list">
-	      <view class="flex-col mt-10 list-item section_3" v-for="(item, index) in products" :key="index" >
-	        <view class="flex-row">
-	          <image
-	            class="self-start image_4"
-	            :src="item.select_img" 
-	          />
-	          <image
-	            class="image image_2" @click="jump_product"
-	            :src="item.product_img"
-	          />
-	          <view class="flex-col self-start group_2">
-	            <view class="flex-row group_3" @click="jump_product">
-	              <text class="font_2">{{ item.product_name }}</text>
-	              <text class="ml-4 font_2">【{{ item.product_type }}】</text>
+				<checkbox-group @change="checkBoxChange">
+	      <view class="flex-col list-item mt-8" v-for="(item, index) in products" :key="index">
+					<!-- 实体类商品 -->
+	        <view class="flex-row section_1" v-if="current == 1">
+						<!-- 多选框 -->
+						<checkbox class="shrink-0 self-center image_2" :value="index" :checked="item.checked"/>
+	          <view class="flex-row flex-1 self-center group_2">
+	            <image
+	              class="shrink-0 image"
+	              :src="item.goodVO.goodImg"
+								@click="jump_product"
+	            />
+	            <view class="flex-col flex-1 group_3 ml-12">
+	              <view class="flex-row group_4">
+	                <text class="font_2" @click="jump_product">{{ item.goodVO.name }}</text>
+	                <text class="font_2 ml-4" @click="jump_product">【{{ item.goodVO.type }}】</text>
+	              </view>
+	              <view class="flex-row items-center mt-47">
+	                <view class="flex-row items-center self-stretch group_5">
+	                  <text class="font_3 text_3" @click="jump_product"><text class="font_4">￥</text>{{ item.goodVO.price }}.<text class="font_4">00</text></text>
+	                  <!-- <image
+	                    class="image_6"
+	                    src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJipaVPoQ-storeRmb.png"
+	                  /> -->
+	                </view>
+	                
+	              </view>
 	            </view>
-	            <view class="flex-col section_4">
-	              <text class="self-start font_3 text_3">已选种类：{{ item.selected_style }}</text>
+	          </view>
+						<!-- 减少数量 -->
+	          <image
+	            class="shrink-0 self-start image_3 image_4"
+	            src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FosWvYyNx-short1.png"
+							@click="decrease(index , item.checked)"
+						/>
+	          <view class="flex-row shrink-0 self-start group_9">
+	            <view class="flex-col justify-start items-center text-wrapper_2"><text class="font_5 text_4">{{ item.quantity }}</text></view>
+	            <!-- 添加数量 -->
+							<image
+	              class="image_5 ml-2"
+	              src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FGbdSQDul-add1.png"
+								@click="increase(index , item.checked)"
+	            />
+	          </view>
+	        </view>
+					<!-- 服务类商品 -->
+	       <view class="flex-col list-item_2 mt-8" v-if="current == 2">
+	          <view class="flex-row">
+	            <image
+	              class="shrink-0 self-start image_2 image_8"
+	              src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=radio.png"
+	            />
+	            <image
+	              class="shrink-0 image_7"
+	              src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=service.png"
+	            />
+	            <view class="flex-col flex-1 group_1">
+	              <text class="font_6">【非遗手工艺体验】纸笺加工技艺-流沙笺团扇制作体验</text>
+	              <view class="flex-row justify-between items-center section_3 mt-7">
+	                <view class="flex-col items-start">
+	                  <text class="font_7">仿真丝团扇;上午场(09:30-12:00)</text>
+	                  <text class="font_8 text_5 mt-6">预约日期：2024-10-15</text>
+	                </view>
+	                <image
+	                  class="image_9"
+	                  src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=pull.png"
+	                />
+	              </view>
+	            </view>
+	          </view>
+	          <view class="flex-row justify-end items-center group_7 mt-14">
+	            <view class="flex-row items-center">
+	              <text class="font_3 text_6">138.</text>
 	              <image
-	                class="shrink-0 self-end image_3"
-	                :src="item.pull_img"
+	                class="shrink-0 image_6"
+	                src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=storeRmb.png"
+	              />
+	              <text class="font_4 text_7">00</text>
+	            </view>
+	            <view class="flex-row ml-82">
+	              <image
+	                class="image_3"
+	                src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=short1.png"
+	              />
+	              <view class="flex-col justify-start items-center text-wrapper_2 ml-2">
+	                <text class="font_5 text_8">1</text>
+	              </view>
+	              <image
+	                class="image_5 ml-2"
+	                src="https://ide.code.fun/api/image?token=672db25dc471750012de4901&name=add1.png"
 	              />
 	            </view>
 	          </view>
 	        </view>
-	        <view class="mt-10 flex-row justify-end items-center group_4">
-	          <view class="flex-row items-center">
-	            <text class="font_4 text_4">{{ item.product_price }}</text>
-	            <image
-	              class="shrink-0 image_7"
-	              :src="rmb"
-	            />
-	            <text class="font_5 text_5">.00</text>
-	          </view>
-	          <view class="flex-row ml-79">
-	            <image
-	              class="image_5"
-	              :src="short"
-	            />
-	            <view class="ml-2 flex-col justify-start items-center text-wrapper_2">
-	              <text class="font_6 text_6">{{ item.product_num }}</text>
-	            </view>
-	            <image
-	              class="ml-2 image_6"
-	              :src="add"
-	            />
-	          </view>
-	        </view>
 	      </view>
-	    </view>
-	  </view>
-	  <view class="flex-row justify-between items-center section_6 mt-243">
+				</checkbox-group>
+			</view>
+			
+		</view>
+	  <view class="flex-row justify-between items-center section_4 mt-569">
 	    <view class="flex-row items-center">
-	      <image
-	        class="shrink-0 image_9"
-	        :src="choose"
-	      />
-	      <text class="ml-10 font text_7">全选</text>
+				<checkbox class="shrink-0 image_2" :checked="allCheck" @tap="allChecked"/>
+	      <text class="ml-10 font text_10">全选</text>
 	    </view>
-	    <view class="flex-col justify-start items-center text-wrapper_3"><text class="text_8">删除</text></view>
-	  </view>
+	    <view class="flex-row items-center group_3">
+	      <text class="font">合计：</text>
+	      <image
+	        class="shrink-0 image_7 image_9"
+	        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJipaVPoQ-storeRmb.png"
+	      />
+	      <text class="font text_12">{{ totalPrice }}</text>
+	      <view class="flex-col justify-start items-center shrink-0 text-wrapper_3"><text class="text_11">去结算</text></view>
+				<!-- <view class="flex-col justify-start items-center shrink-0 text-wrapper_3"><text class="text_11">删除</text></view> -->
+	    </view>
+	  </view> 
 	</view>
 </template>
 
 <script setup>
-	import {
-		ref
-	} from 'vue'
-	import product_img from '@/pages/Shopping-cart/productmain/img/productimg.png';
-	import add from '@/pages/Shopping-cart/productmain/img/add.png';
-	import choose from '@/pages/Shopping-cart/productmain/img/choose.png';
-	import choosed from '@/pages/Shopping-cart/productmain/img/choosed.png';
-	import pull from '@/pages/Shopping-cart/productmain/img/pull.png';
-	import rmb from '@/pages/Shopping-cart/productmain/img/rmb.png';
-	import short from '@/pages/Shopping-cart/productmain/img/short.png';
-	const items = ref([null, null, null, null, null, null, null])
-	const products = ref([
-		{
-			"product_name" : "非遗绒花",
-			"product_type" : "材料包",
-			"selected_style" : "紫色",
-			"product_num" : 1,
-			"product_price" : 138,
-			"product_img" : product_img,
-			"pull_img" : pull,
-			"select_img" : choose,
-			"rmb_img" : rmb,
-			"min_img" : short,
-			"add_img" : add
-		},
-		{
-			"product_name" : "非遗绒花",
-			"product_type" : "材料包",
-			"selected_style" : "紫色",
-			"product_num" : 1,
-			"product_price" : 138,
-			"product_img" : product_img,
-			"pull_img" : pull,
-			"select_img" : choose,
-			"rmb_img" : rmb,
-			"min_img" : short,
-			"add_img" : add
-		},
-		{
-			"product_name" : "非遗绒花",
-			"product_type" : "材料包",
-			"selected_style" : "紫色",
-			"product_num" : 1,
-			"product_price" : 138,
-			"product_img" : product_img,
-			"pull_img" : pull,
-			"select_img" : choose,
-			"rmb_img" : rmb,
-			"min_img" : short,
-			"add_img" : add
-		},
-		{
-			"product_name" : "非遗绒花",
-			"product_type" : "材料包",
-			"selected_style" : "紫色",
-			"product_num" : 1,
-			"product_price" : 138,
-			"product_img" : product_img,
-			"pull_img" : pull,
-			"select_img" : choose,
-			"rmb_img" : rmb,
-			"min_img" : short,
-			"add_img" : add
-		},
-		{
-			"product_name" : "非遗绒花",
-			"product_type" : "材料包",
-			"selected_style" : "紫色",
-			"product_num" : 1,
-			"product_price" : 138,
-			"product_img" : product_img,
-			"pull_img" : pull,
-			"select_img" : choose,
-			"rmb_img" : rmb,
-			"min_img" : short,
-			"add_img" : add
-		},
-		{
-			"product_name" : "非遗绒花",
-			"product_type" : "材料包",
-			"selected_style" : "紫色",
-			"product_num" : 1,
-			"product_price" : 138,
-			"product_img" : product_img,
-			"pull_img" : pull,
-			"select_img" : choose,
-			"rmb_img" : rmb,
-			"min_img" : short,
-			"add_img" : add
-		}
-	])
-	const jump_product =()=>{
-		uni.navigateTo({
-			url:'../../../pages/store-home/ProductDetails/ProductDetails'
+import { ref , onMounted} from 'vue'
+import { onShow } from "@dcloudio/uni-app";
+import { baseUrl , testUrl ,suiUrl} from '../../../api/request';
+//本地图片
+import product_img from '@/pages/Shopping-cart/productmain/img/productimg.png';
+import add from '@/pages/Shopping-cart/productmain/img/add.png';
+import choose from '@/pages/Shopping-cart/productmain/img/choose.png';
+import choosed from '@/pages/Shopping-cart/productmain/img/choosed.png';
+import pull from '@/pages/Shopping-cart/productmain/img/pull.png';
+import rmb from '@/pages/Shopping-cart/productmain/img/rmb.png';
+import short from '@/pages/Shopping-cart/productmain/img/short.png';
+const products = ref([])
+let checkedArr = []  //变量
+const current = ref(1)
+const allCheck = ref(false)  //全选
+const checkedData = ref([])  //选择的暂存保存数组
+const totalPrice = ref(0)
+const userInfo = wx.getStorageSync('userInfo')
+onMounted(()=>{
+	
+})
+onShow(()=>{
+	getProductCart() //获取商品类
+	
+	// getServiceCart()
+})
+//小程序刷新根据用户id获取购物车信息
+const getProductCart = async ()=>{
+	const res = await uni.request({
+		url: baseUrl + '/cart/list',
+		method: 'POST',
+		data: { id: userInfo.id }
+	})
+	if(res.data.code === 1) {
+		products.value = res.data.data
+		products.value.forEach((item)=>{
+			item.checked = false
 		})
 	}
+	console.log('products-->',products.value);
+}
+const getServiceCart =()=>{
+	console.log('获取服务类商品方法被触发');
+}
+//更改实体商品和服务类方法
+const changeType = async (num)=>{
+	current.value = num;
+	if(num ===1 ) { //为一的时候就获取用户商品购物车
+		
+	}
+}
+//更改下划线
+const getTextStyle = (num) => ({
+		'border-bottom' : current.value === num ? '2px solid orange' : '2px solid  #ffffff'
+});
+//复选框绑定方法
+const checkBoxChange =(event)=>{
+	totalPrice.value = 0;
+	// products.value[parseInt(event.detail.value)].checked = true;
+	console.log('event--->',event.detail);
+	products.value[parseInt(event.detail.value)].checked = true;
+	//计算一下总金额
+	for(let key in event.detail.value) {
+		
+		let temp = parseInt(event.detail.value[parseInt(key)]) //相当于商品数组下标
+		// totalPrice.value += products.value[temp].goodVO.price * products.value[temp].quantity
+		computed(products.value[temp].goodVO.price , products.value[temp].quantity)
+		// console.log('--->',event.detail.value[parseInt(key)]);
+	}
+	// products.value.forEach((item)=>{
+	// 	item.checked = false
+	// 	allCheck.value = false
+	// })
+	event.detail.value.forEach((item)=>{
+		products.value[parseInt(item)].checked = true
+		allCheck.value = false
+	})
+  //然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
+	products.value.forEach((x)=>{
+		event.detail.value.forEach((y)=>{
+			if(x.value == y) {
+				x.checked = true
+			}
+		})
+	})
+	//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
+	// console.log('length',event.detail.value.length);
+	if(event.detail.value.length == products.value.length) {
+		allCheck.value = true
+	}
+	//将选中的数组保存在某一个ref中
+	checkedData.value = event.detail.value
+}
+//全选方法
+const allChecked = ()=>{
+	allCheck.value = !allCheck.value
+	totalPrice.value = 0
+	if ( allCheck.value == true ) {
+		products.value.forEach((item)=>{
+			item.checked = true //将全部选项选上
+			// console.log('item--->',item);
+			// totalPrice.value += item.goodVO.price * item.quantity
+			computed(item.goodVO.price , item.quantity)
+		})
+		// checkedData.value = products.value.map((item)=>{ return item.value })
+	} else {
+		products.value.forEach((item)=>{
+			item.checked = false  //将全部都取消选择
+		})
+	}
+}
+//减少商品
+const decrease =(index , item)=>{  //item用于监测是否选中
+	console.log('index-->',index);
+	console.log('item-->',item);
+	if(products.value[index].quantity > 1) {
+		products.value[index].quantity -= 1
+		if(item && products.value[index].quantity >= 1) {
+			computed(-products.value[index].goodVO.price, 1)
+		}
+	}
+}
+//这里应该结合库存有多少  11.8
+const increase =(index , item) =>{  //item用于监测是否选中
+	console.log('index-->',index);
+	console.log('item-->',item);
+	if(products.value[index].quantity <= 99) { 
+		products.value[index].quantity += 1
+	}
+	if(item) {
+		computed(products.value[index].goodVO.price, 1)
+	}
+}
+//计算方法
+const computed =( price , quantity )=>{
+	totalPrice.value += price * quantity
+	return totalPrice.value
+}
+const jump_product =()=>{
+	uni.navigateTo({
+		url:'../../../pages/store-home/ProductDetails/ProductDetails'
+	})
+}
 </script>
 
 <style lang="scss" scoped>
-	.ml-79 {
-		margin-left: 148.13rpx;
-	}
-
-	.mt-243 {
-		
-		position: fixed;
-		
-		bottom: 0;
-		width: 100%;
-	}
-
-	.page {
-		background-color: #f8e8c1;
-		width: 100%;
-		overflow-y: auto;
-		overflow-x: hidden;
-		height: 100%;
-	}
-
-	.text-wrapper {
-		padding: 26.25rpx 0;
-		background-color: #f5f5dc;
-		position: fixed;
-		top: 0;
-		width: 100%;
-	}
-
-	.section {
-		padding: 0 121.88rpx;
-		background-color: #fffef8;
-		position: fixed;
-		top: 70rpx;
-		width: 100%;
-	}
-
-	.group {
-		padding: 18.75rpx 3.75rpx 18.75rpx 11.25rpx;
-	}
-
-	.section_2 {
-		background-color: #fb8b05;
-		width: 112.5rpx;
-		height: 5.63rpx;
-	}
-
-	.list {
-		// background-color: ;
-		padding: 9.35rpx 18.75rpx 9.35rpx 18.75rpx ;
-		padding-bottom: 200rpx;
-	}
-
-	.list-item {
-		padding: 33.75rpx 18.75rpx;
-		background-color: #fffef8;
-		border-radius: 18.75rpx;
-	}
-
-	.list-item:first-child {
-		margin-top: 0;
-	}
-
-	.section_3 {
-		margin-right: 5.63rpx;
-	}
-
-	.image_4 {
-		margin-top: 86.25rpx;
-		width: 31.88rpx;
-		height: 31.88rpx;
-	}
-
-	.image {
-		border-radius: 9.38rpx;
-		width: 146.25rpx;
-		height: 144.38rpx;
-	}
-
-	.image_2 {
-		margin-left: 48.75rpx;
-	}
-
-	.group_2 {
-		margin-left: 30rpx;
-	}
-
-	.group_3 {
-		padding-bottom: 15rpx;
-	}
-
-	.font_2 {
-		font-size: 26.25rpx;
-		font-family: Open Sans;
-		line-height: 24.43rpx;
-		color: #323232;
-	}
-
-	.section_4 {
-		padding: 11.25rpx 15rpx 24.38rpx;
-		background-color: #f5f5dc;
-		border-radius: 9.38rpx;
-	}
-
-	.font_3 {
-		font-size: 22.5rpx;
-		font-family: Open Sans;
-		line-height: 19.29rpx;
-		color: #818181;
-	}
-
-	.text_3 {
-		line-height: 20.79rpx;
-	}
-
-	.image_3 {
-		margin-right: 7.5rpx;
-		margin-top: -7.5rpx;
-		width: 22.5rpx;
-		height: 22.5rpx;
-	}
-
-	.group_4 {
-		padding: 0 5.63rpx;
-	}
-
-	.font_4 {
-		font-size: 33.75rpx;
-		font-family: Open Sans;
-		line-height: 24.43rpx;
-		font-weight: 600;
-		color: #fb8b05;
-	}
-
-	.text_4 {
-		margin-left: 26.25rpx;
-		line-height: 24.88rpx;
-	}
-
-	.image_7 {
-		margin-left: -90rpx;
-		width: 30rpx;
-		height: 26.25rpx;
-	}
-
-	.font_5 {
-		font-size: 26.25rpx;
-		font-family: Open Sans;
-		line-height: 19.29rpx;
-		font-weight: 600;
-		color: #fb8b05;
-	}
-
-	.text_5 {
-		margin-left: 60rpx;
-	}
-
-	.image_5 {
-		border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
-		width: 45rpx;
-		height: 45rpx;
-	}
-
-	.text-wrapper_2 {
-		padding: 15rpx 0;
-		background-color: #f5f5dc;
-		width: 58.13rpx;
-		height: 45rpx;
-	}
-
-	.font_6 {
-		font-size: 26.25rpx;
-		font-family: Open Sans;
-		line-height: 19.29rpx;
-		color: #323232;
-	}
-
-	.text_6 {
-		line-height: 18.73rpx;
-	}
-
-	.image_6 {
-		border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
-		width: 45rpx;
-		height: 45rpx;
-	}
-
-	.image_9 {
-		width: 37.5rpx;
-		height: 37.5rpx;
-	}
-
-	.section_6 {
-		padding: 18.75rpx;
-		background-color: #fffef8;
-	}
-
-	.font {
-		font-size: 30rpx;
-		font-family: Open Sans;
-		line-height: 27.69rpx;
-		color: #323232;
-	}
-
-	.text_2 {
-		line-height: 27.6rpx;
-	}
-
-	.text {
-		margin-right: 30rpx;
-		line-height: 27.79rpx;
-	}
-
-	.text_7 {
-		line-height: 27.64rpx;
-	}
-
-	.text-wrapper_3 {
-		margin-right: 3.75rpx;
-		padding: 22.5rpx 0;
-		background-color: #ffd45a;
-		border-radius: 75rpx;
-		width: 219.38rpx;
-		height: 76.88rpx;
-	}
-
-	.text_8 {
-		color: #ffffff;
-		font-size: 33.75rpx;
-		font-family: Open Sans;
-		line-height: 30.97rpx;
-	}
-.ml-79 {
-  margin-left: 148.13rpx;
+.mt-47 {
+  margin-top: 88.13rpx;
 }
-.mt-243 {
-  margin-top: 455.63rpx;
+.mt-7 {
+  margin-top: 13.13rpx;
+}
+.mt-173 {
+  margin-top: 324.38rpx;
 }
 .page {
   background-color: #f8e8c1;
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  height: 100%;
+  height: 100vh;
 }
 .text-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 26.25rpx 0;
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+  padding: 25.46rpx 0 25.5rpx;
   background-color: #f5f5dc;
 }
-.section {
-  position: fixed;
-  top: 75rpx;
-  right: 0;
-  left: 0;
-  padding: 0 121.88rpx;
-  background-color: #fffef8;
-}
-.group {
-  padding: 18.75rpx 3.75rpx 18.75rpx 11.25rpx;
-}
-.section_2 {
-  background-color: #fb8b05;
-  width: 112.5rpx;
-  height: 5.63rpx;
-}
-.list {
-	margin-top: 134rpx;
-  margin-bottom: 125rpx;
-  padding: 18.75rpx 13.13rpx 0;
-}
-.list-item {
-  padding: 33.75rpx 18.75rpx;
-  background-color: #fffef8;
-  border-radius: 18.75rpx;
-}
-.list-item:first-child {
-  margin-top: 0;
-}
-.section_3 {
-  margin-right: 5.63rpx;
-}
-.image_4 {
-  margin-top: 86.25rpx;
-  width: 31.88rpx;
-  height: 31.88rpx;
-}
-.image {
-  border-radius: 9.38rpx;
-  width: 146.25rpx;
-  height: 144.38rpx;
-}
-.image_2 {
-  margin-left: 48.75rpx;
-}
-.group_2 {
-  margin-left: 30rpx;
-}
-.group_3 {
-  padding-bottom: 15rpx;
-}
-.font_2 {
-  font-size: 26.25rpx;
-  font-family: Open Sans;
-  line-height: 24.43rpx;
-  color: #323232;
-}
-.section_4 {
-  padding: 11.25rpx 15rpx 24.38rpx;
-  background-color: #f5f5dc;
-  border-radius: 9.38rpx;
-}
-.font_3 {
-  font-size: 22.5rpx;
-  font-family: Open Sans;
-  line-height: 19.29rpx;
-  color: #818181;
-}
-.text_3 {
-  line-height: 20.79rpx;
-}
-.image_3 {
-  margin-right: 7.5rpx;
-  margin-top: -7.5rpx;
-  width: 22.5rpx;
-  height: 22.5rpx;
-}
-.group_4 {
-  padding: 0 5.63rpx;
-}
-.font_4 {
-  font-size: 33.75rpx;
-  font-family: Open Sans;
-  line-height: 24.43rpx;
-  font-weight: 600;
-  color: #fb8b05;
-}
-.text_4 {
-  margin-left: 26.25rpx;
-  line-height: 24.88rpx;
-}
-.image_7 {
-  margin-left: -90rpx;
-  width: 30rpx;
-  height: 26.25rpx;
-}
-.font_5 {
-  font-size: 26.25rpx;
-  font-family: Open Sans;
-  line-height: 19.29rpx;
-  font-weight: 600;
-  color: #fb8b05;
-}
-.text_5 {
-  margin-left: 60rpx;
-}
-.image_5 {
-  border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
-  width: 45rpx;
-  height: 45rpx;
-}
-.text-wrapper_2 {
-  padding: 15rpx 0;
-  background-color: #f5f5dc;
-  width: 58.13rpx;
-  height: 45rpx;
-}
-.font_6 {
-  font-size: 26.25rpx;
-  font-family: Open Sans;
-  line-height: 19.29rpx;
-  color: #323232;
-}
-.text_6 {
-  line-height: 18.73rpx;
-}
-.image_6 {
-  border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
-  width: 45rpx;
-  height: 45rpx;
-}
-.image_9 {
-  width: 37.5rpx;
-  height: 37.5rpx;
-}
-.section_6 {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 18.75rpx;
-  background-color: #fffef8;
-}
 .font {
   font-size: 30rpx;
   font-family: Open Sans;
   line-height: 27.69rpx;
   color: #323232;
 }
+.text {
+  margin-right: 30.86rpx;
+  line-height: 27.79rpx;
+}
+.section {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 74rpx;
+  padding: 0 121.88rpx;
+  background-color: #fffef8;
+}
+.group {
+  padding: 21.64rpx 4.63rpx 18.17rpx 11.42rpx;
+}
 .text_2 {
   line-height: 27.6rpx;
 }
-.text {
-  margin-right: 30rpx;
-  line-height: 27.79rpx;
+.section_2 {
+  background-color: #fb8b05;
+  width: 112.5rpx;
+  height: 5.63rpx;
+}
+.list {
+  padding: 155rpx 15rpx 110rpx;
+}
+.list-item:first-child {
+  margin-top: 0;
+}
+.section_1 {
+  padding: 35.63rpx 20.63rpx 28.13rpx;
+  background-color: #fffef8;
+  border-radius: 18.75rpx;
+}
+.image_2 {
+  width: 37.5rpx;
+  height: 37.5rpx;
+}
+.group_2 {
+  margin-left: 41.25rpx;
+}
+.image {
+  border-radius: 9.38rpx;
+  width: 146.25rpx;
+  height: 144.38rpx;
+}
+.group_3 {
+  margin-top: 2.19rpx;
+}
+.group_4 {
+  padding-left: 8.53rpx;
+}
+.font_2 {
+  font-size: 26.25rpx;
+  font-family: Open Sans;
+  line-height: 24.43rpx;
+  color: #323232;
+}
+.group_5 {
+  width: 90.66rpx;
+}
+.font_3 {
+  font-size: 33.75rpx;
+  font-family: Open Sans;
+  line-height: 24.43rpx;
+  font-weight: 600;
+  color: #fb8b05;
+}
+.text_3 {
+  margin-left: 25.03rpx;
+  line-height: 24.88rpx;
+}
+.image_6 {
+  margin-left: -90.66rpx;
+  width: 30rpx;
+  height: 26.25rpx;
+}
+.font_4 {
+  font-size: 26.25rpx;
+  font-family: Open Sans;
+  line-height: 19.29rpx;
+  font-weight: 600;
+  color: #fb8b05;
+}
+.image_3 {
+  border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
+  width: 45rpx;
+  height: 45rpx;
+}
+.image_4 {
+  margin-left: 18.15rpx;
+  margin-top: 106.88rpx;
+}
+.group_9 {
+  margin: 106.88rpx 3.77rpx 0 3.75rpx;
+}
+.text-wrapper_2 {
+  padding: 12.39rpx 0 13.88rpx;
+  background-color: #f5f5dc;
+  width: 58.13rpx;
+  height: 45rpx;
+}
+.font_5 {
+  font-size: 26.25rpx;
+  font-family: Open Sans;
+  line-height: 19.29rpx;
+  color: #323232;
+}
+.text_4 {
+  line-height: 18.73rpx;
+}
+.image_5 {
+  border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
+  width: 45rpx;
+  height: 45rpx;
+}
+.list-item_2 {
+  padding: 24.38rpx 18.75rpx 18.75rpx;
+  background-color: #fffef8;
+  border-radius: 18.75rpx;
+}
+.image_8 {
+  margin-top: 108.75rpx;
+}
+.image_7 {
+  margin-left: 39.38rpx;
+  width: 121.88rpx;
+  height: 172.5rpx;
+}
+.group_1 {
+  margin: 3.07rpx 17.76rpx 7.5rpx 22.5rpx;
+}
+.font_6 {
+  font-size: 26.25rpx;
+  font-family: Open Sans;
+  line-height: 31.88rpx;
+  color: #323233;
+}
+.section_3 {
+  margin-right: 4.74rpx;
+  padding: 12.94rpx 9.83rpx 13.09rpx;
+  background-color: #f5f5dc;
+  border-radius: 9.38rpx;
+}
+.font_7 {
+  font-size: 22.5rpx;
+  font-family: Open Sans;
+  line-height: 22.5rpx;
+  color: #6b6e72;
+}
+.font_8 {
+  font-size: 22.5rpx;
+  font-family: Open Sans;
+  line-height: 19.29rpx;
+  color: #6b6e72;
+}
+.text_5 {
+  line-height: 20.79rpx;
+}
+.image_9 {
+  margin-right: 5.17rpx;
+  width: 22.5rpx;
+  height: 22.5rpx;
+}
+.group_7 {
+  padding: 0 22.5rpx;
+}
+.text_6 {
+  margin-left: 25.03rpx;
+  line-height: 24.88rpx;
 }
 .text_7 {
+  margin-left: 61.14rpx;
+}
+.text_8 {
+  line-height: 18.73rpx;
+}
+.section_4 {
+	position: fixed;
+	right: 0;
+	left: 0;
+	bottom: 0;
+  padding: 18.75rpx 18.75rpx 16.88rpx;
+  background-color: #fffef8;
+}
+.text_9 {
   line-height: 27.64rpx;
 }
 .text-wrapper_3 {
+  margin-right: 3.77rpx;
+  padding: 22.37rpx 0 23.53rpx;
+  background-color: #ffd45a;
+  border-radius: 75rpx;
+  width: 219.38rpx;
+  height: 76.88rpx;
+}
+.text_10 {
+  color: #ffffff;
+  font-size: 33.75rpx;
+  font-family: Open Sans;
+  line-height: 30.97rpx;
+}
+.mt-569 {
+  margin-top: 1066.88rpx;
+}
+.image_2 {
+  width: 37.5rpx;
+  height: 37.5rpx;
+}
+.image_7 {
+  width: 30rpx;
+  height: 26.25rpx;
+}
+.section_4 {
+  padding: 18.75rpx;
+  background-color: #fffef8;
+}
+.font {
+  font-size: 30rpx;
+  font-family: Open Sans;
+  line-height: 27.54rpx;
+  color: #323232;
+}
+.text_10 {
+  line-height: 27.64rpx;
+}
+.group_3 {
   margin-right: 3.75rpx;
+}
+.image_9 {
+  margin-left: -11.25rpx;
+}
+.text_12 {
+  color: #fb8b05;
+  line-height: 22.01rpx;
+}
+.text-wrapper_3 {
+  margin-left: 22.5rpx;
   padding: 22.5rpx 0;
   background-color: #ffd45a;
   border-radius: 75rpx;
   width: 219.38rpx;
   height: 76.88rpx;
 }
-.text_8 {
+.text_11 {
   color: #ffffff;
   font-size: 33.75rpx;
   font-family: Open Sans;
-  line-height: 30.97rpx;
+  line-height: 31.48rpx;
 }
 	@import url(../../../common/css/global.css);
 </style>
\ No newline at end of file