From 6d48c1c8d0bd1cbb59773d93f577b63c651a4eed Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Mon, 6 May 2024 17:57:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8B=E6=8B=89=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/shopListPopup.vue   |  233 +++---
 pageQuota/goodDetail/index.vue |   11 +
 pageQuota/quotation/index.vue  |   18 +
 pages.json                     |  247 +++---
 pages/index/index.vue          | 1370 ++++++++++++++++----------------
 5 files changed, 986 insertions(+), 893 deletions(-)
 create mode 100644 pageQuota/goodDetail/index.vue
 create mode 100644 pageQuota/quotation/index.vue

diff --git a/components/shopListPopup.vue b/components/shopListPopup.vue
index eb4f0fc..72f042c 100644
--- a/components/shopListPopup.vue
+++ b/components/shopListPopup.vue
@@ -1,137 +1,142 @@
 <template>
-  <up-popup :show="show" closeable round="10" @close="close">
-    <view class="address-popup">
-      <view class="head-title">选择提货点</view>
-      <view class="list-admin">
-        <up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword" @custom="searchKeyword"></up-search>
-      </view>
-      <scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
-        <view class="row" v-for="(item,index) in list" :key="index" @click="addressType=index">
-          <view class="content">
-            <view class="top">
-              <view class="name">{{item.mer_name}}</view>
-              <u-tag v-if="item.distance" style="pointer-events: none;" :text="item.distance" type="success" plain size="mini"></u-tag>
-            </view>
-            <view class="bottom u-line-2">{{item.service_phone}}</view>
-          </view>
-          <image v-if="addressType==index" src="@/static/icon/check.png"></image>
-          <image v-else src="@/static/icon/n-check.png"></image>
-        </view>
-      </scroll-view>
-      <up-button color="#20B128" shape="circle" @click="submitAddress">确认提货点</up-button>
-    </view>
-  </up-popup>
+	<!-- fixed -->
+	<up-popup :show="show" closeable round="10" @close="close">
+		<view class="address-popup">
+			<view class="head-title">选择提货点</view>
+			<view class="list-admin">
+				<up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword"
+					@custom="searchKeyword"></up-search>
+			</view>
+			<scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
+				<view class="row" v-for="(item,index) in list" :key="index" @click="addressType=index">
+					<view class="content">
+						<view class="top">
+							<view class="name">{{item.mer_name}}</view>
+							<u-tag v-if="item.distance" style="pointer-events: none;" :text="item.distance"
+								type="success" plain size="mini"></u-tag>
+						</view>
+						<view class="bottom u-line-2">{{item.service_phone}}</view>
+					</view>
+					<image v-if="addressType==index" src="@/static/icon/check.png"></image>
+					<image v-else src="@/static/icon/n-check.png"></image>
+				</view>
+			</scroll-view>
+			<up-button color="#20B128" shape="circle" @click="submitAddress">确认提货点</up-button>
+		</view>
+	</up-popup>
 </template>
 
 <script setup>
-  import { ref } from "vue"
+	import {
+		ref
+	} from "vue"
 
-  const addressType = ref(-1)
+	const addressType = ref(-1)
 
-  const props = defineProps({
-    show: {
-      type: Boolean,
-      default: false
-    },
-    list: {
-      type: Array,
-      default: ()=>[]
-    }
-  })
+	const props = defineProps({
+		show: {
+			type: Boolean,
+			default: false
+		},
+		list: {
+			type: Array,
+			default: () => []
+		}
+	})
 
-  const emit = defineEmits(['close', 'change', 'search']);
-  const close = () => {
-    emit('close');
-  }
+	const emit = defineEmits(['close', 'change', 'search']);
+	const close = () => {
+		emit('close');
+	}
 
-  const submitAddress = () => {
-    emit('change', props.list[addressType.value]);
-  }
-  
-  const keyword = ref('')
-  const searchKeyword = ()=>{
-    emit('search', keyword.value);
-  }
-  
-  const navTo = (url)=>{
-    uni.navigateTo({
-      url: url
-    })
-  }
+	const submitAddress = () => {
+		emit('change', props.list[addressType.value]);
+	}
+
+	const keyword = ref('')
+	const searchKeyword = () => {
+		emit('search', keyword.value);
+	}
+
+	const navTo = (url) => {
+		uni.navigateTo({
+			url: url
+		})
+	}
 </script>
 
 <style scoped lang="scss">
-  .address-popup {
-    padding: 30rpx;
+	.address-popup {
+		padding: 30rpx;
 
-    .head-title {
-      font-weight: bold;
-      text-align: center;
-      margin-bottom: 20rpx;
-    }
+		.head-title {
+			font-weight: bold;
+			text-align: center;
+			margin-bottom: 20rpx;
+		}
 
-    .list-admin {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 20rpx;
+		.list-admin {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 20rpx;
 
-      .admin-btn {
-        display: flex;
-        color: #20B128;
+			.admin-btn {
+				display: flex;
+				color: #20B128;
 
-        .btn {
-          margin-left: 20rpx;
-          display: flex;
-          align-items: center;
-          
-          &:active {
-            color: rgba(#20B128, 0.8);
-            transition: background-color 0.5s;
-            animation: disappear 0.5s 0.5s forwards;
-          }
-        }
-      }
-    }
+				.btn {
+					margin-left: 20rpx;
+					display: flex;
+					align-items: center;
 
-    .row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-bottom: 20rpx;
-      border-bottom: 1rpx solid #f6f6f6;
-      margin-bottom: 20rpx;
+					&:active {
+						color: rgba(#20B128, 0.8);
+						transition: background-color 0.5s;
+						animation: disappear 0.5s 0.5s forwards;
+					}
+				}
+			}
+		}
 
-      &:last-child {
-        border-bottom: none;
-        margin-bottom: 0;
-      }
+		.row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-bottom: 20rpx;
+			border-bottom: 1rpx solid #f6f6f6;
+			margin-bottom: 20rpx;
 
-      .content {
-        .top {
-          display: flex;
+			&:last-child {
+				border-bottom: none;
+				margin-bottom: 0;
+			}
 
-          view {
-            margin-right: 20rpx;
-          }
-        }
+			.content {
+				.top {
+					display: flex;
 
-        .bottom {}
-      }
+					view {
+						margin-right: 20rpx;
+					}
+				}
 
-      image {
-        width: 40rpx;
-        height: 40rpx;
-        flex-shrink: 0;
-      }
-    }
-  }
+				.bottom {}
+			}
 
-  @keyframes disappear {
-    to {
-      opacity: 0;
-      /* 渐隐 */
-      transform: scale(0);
-      /* 缩小 */
-    }
-  }
+			image {
+				width: 40rpx;
+				height: 40rpx;
+				flex-shrink: 0;
+			}
+		}
+	}
+
+	@keyframes disappear {
+		to {
+			opacity: 0;
+			/* 渐隐 */
+			transform: scale(0);
+			/* 缩小 */
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pageQuota/goodDetail/index.vue b/pageQuota/goodDetail/index.vue
new file mode 100644
index 0000000..13c35e8
--- /dev/null
+++ b/pageQuota/goodDetail/index.vue
@@ -0,0 +1,11 @@
+<template>
+	<view class="">
+		商品详情
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/pageQuota/quotation/index.vue b/pageQuota/quotation/index.vue
new file mode 100644
index 0000000..9938daa
--- /dev/null
+++ b/pageQuota/quotation/index.vue
@@ -0,0 +1,18 @@
+<template>
+	<view class="">
+		<up-navbar placeholder style="z-index: 10080;">
+			<template #left>
+				<view style="font-size: 30rpx;font-weight: bold;" @click="test">报价单</view>
+			</template>
+		</up-navbar>
+
+		dgfsdhjg
+
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 69412e3..5dbe60e 100644
--- a/pages.json
+++ b/pages.json
@@ -1,119 +1,138 @@
 {
-  "easycom": {
-    "autoscan": true,
-    // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
-    "custom": {
-      "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
-      "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
-      "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
-    }
-  },
-  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-    {
-      "path": "pages/login/login",
-      "style": {
-        "navigationBarTitleText": "登录",
-        "enablePullDownRefresh": false,
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/index/index",
-      "style": {
-        "navigationBarTitleText": "购物",
-        "disableScroll": true,
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/cart/cart",
-      "style": {
-        "navigationBarTitleText": "购物车",
-        "enablePullDownRefresh": false,
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/my/my",
-      "style": {
-        "navigationBarTitleText": "个人中心",
-        "enablePullDownRefresh": false,
-        "navigationStyle": "custom"
-      }
-    }
+	"easycom": {
+		"autoscan": true,
+		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
+		"custom": {
+			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
+			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
+			"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
+		}
+	},
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "购物",
+				"disableScroll": true,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/cart/cart",
+			"style": {
+				"navigationBarTitleText": "购物车",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/my/my",
+			"style": {
+				"navigationBarTitleText": "个人中心",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		}
 
-  ],
-  "subPackages": [{
-    "root": "pagesOrder",
-    "pages": [{
-        "path": "order/order",
-        "style": {
-          "navigationBarTitleText": "我的订单",
-          "enablePullDownRefresh": false
-        }
-      },
-      {
-        "path": "detail/detail",
-        "style": {
-          "navigationBarTitleText": "",
-          "enablePullDownRefresh": false
-        }
-      },
-      {
-        "path": "addressList/addressList",
-        "style": {
-          "navigationBarTitleText": "地址管理",
-          "enablePullDownRefresh": false
-        }
-      },
-      {
-        "path": "addressEdit/addressEdit",
-        "style": {
-          "navigationBarTitleText": "",
-          "enablePullDownRefresh": false
-        }
-      },
-      {
-        "path": "settle/settle",
-        "style": {
-          "navigationBarTitleText": "确认订单",
-          "enablePullDownRefresh": false
-        }
-      }
-    ]
-  }],
-  "globalStyle": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "",
-    "navigationBarBackgroundColor": "#fff",
-    "backgroundColor": "#fff"
-  },
-  // "tabBar": {
-  //   "color": "#999999",
-  //   "selectedColor": "#20b128",
-  //   "borderStyle": "white",
-  //   "backgroundColor": "#FFFFFF",
-  //   "list": [{
-  //       "pagePath": "pages/index/index",
-  //       "text": "首页",
-  //       "iconPath": "static/tab/a.png",
-  //       "selectedIconPath": "static/tab/aa.png"
-  //     },
-  //     {
-  //       "pagePath": "pages/cart/cart",
-  //       "text": "购物车",
-  //       "iconPath": "static/tab/b.png",
-  //       "selectedIconPath": "static/tab/ba.png"
-  //     },
+	],
+	"subPackages": [{
+		"root": "pagesOrder",
+		"pages": [{
+				"path": "order/order",
+				"style": {
+					"navigationBarTitleText": "我的订单",
+					"enablePullDownRefresh": false
+				}
+			},
+			{
+				"path": "detail/detail",
+				"style": {
+					"navigationBarTitleText": "",
+					"enablePullDownRefresh": false
+				}
+			},
+			{
+				"path": "addressList/addressList",
+				"style": {
+					"navigationBarTitleText": "地址管理",
+					"enablePullDownRefresh": false
+				}
+			},
+			{
+				"path": "addressEdit/addressEdit",
+				"style": {
+					"navigationBarTitleText": "",
+					"enablePullDownRefresh": false
+				}
+			},
+			{
+				"path": "settle/settle",
+				"style": {
+					"navigationBarTitleText": "确认订单",
+					"enablePullDownRefresh": false
+				}
+			}
+		]
+	}, {
+		"root": "pageQuota",
+		"pages": [{
+				"path": "quotation/index",
+				"style": {
+					"navigationBarTitleText": "报价单",
+					"enablePullDownRefresh": false,
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path": "goodDetail/index",
+				"style": {
+					"navigationBarTitleText": "商品详情",
+					"enablePullDownRefresh": false
+				}
+			}
+		]
+	}],
 
-  //     {
-  //       "pagePath": "pages/my/my",
-  //       "text": "我的",
-  //       "iconPath": "static/tab/c.png",
-  //       "selectedIconPath": "static/tab/ca.png"
-  //     }
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "",
+		"navigationBarBackgroundColor": "#fff",
+		"backgroundColor": "#fff"
+	},
+	// "tabBar": {
+	//   "color": "#999999",
+	//   "selectedColor": "#20b128",
+	//   "borderStyle": "white",
+	//   "backgroundColor": "#FFFFFF",
+	//   "list": [{
+	//       "pagePath": "pages/index/index",
+	//       "text": "首页",
+	//       "iconPath": "static/tab/a.png",
+	//       "selectedIconPath": "static/tab/aa.png"
+	//     },
+	//     {
+	//       "pagePath": "pages/cart/cart",
+	//       "text": "购物车",
+	//       "iconPath": "static/tab/b.png",
+	//       "selectedIconPath": "static/tab/ba.png"
+	//     },
 
-  //   ]
-  // },
-  "uniIdRouter": {}
+	//     {
+	//       "pagePath": "pages/my/my",
+	//       "text": "我的",
+	//       "iconPath": "static/tab/c.png",
+	//       "selectedIconPath": "static/tab/ca.png"
+	//     }
+
+	//   ]
+	// },
+	"uniIdRouter": {}
 }
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 5f05f5c..50e19ee 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,746 +1,786 @@
 <template>
-  <view class="content">
-    <up-navbar placeholder style="z-index: 10080;">
-      <template #left>
-        <view style="font-size: 30rpx;font-weight: bold;">惠农批发</view>
-      </template>
-    </up-navbar>
-    <view class="navbar">
-      <view style="width: 500rpx;">
-        <up-search placeholder="请输入商品" @search="searchKeyword" v-model="keyword" :showAction="false"></up-search>
-      </view>
-      <view class="nav-item" @click="navTo('/pages/cart/cart')">
-        <image src="@/static/tab/ba.png"></image>
-        <text>购物车</text>
-      </view>
-      <view class="nav-item" @click="navTo('/pages/my/my')">
-        <image src="@/static/tab/ca.png"></image>
-        <text>个人中心</text>
-      </view>
-    </view>
-    <view style="position: relative;overflow: hidden;">
-      <scroll-view class="head-view" scroll-x>
-        <view class="list">
-          <view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
-            :key="index" @click="changeOne(item, index)">
-            <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
-            <view class="c-text u-line-1">{{item.name}}</view>
-          </view>
-          <view class="item" style="width: 80rpx;height: 20rpx;">
-          </view>
-        </view>
-      </scroll-view>
-      <view class="r-btn" @click="show=1">
-        <view>全</view>
-        <view>部</view>
-        <up-icon name="list"></up-icon>
-      </view>
-    </view>
-    <viewPopup nav v-if="show===1" @close="show=0">
-      <view class="cateOne">
-        <view class="head-title">全部分类</view>
-        <scroll-view scroll-y style="height: 600rpx;">
-          <view class="list">
-            <view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
-              :key="index" @click="changeOne(item, index)">
-              <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
-              <view class="c-text u-line-1">{{item.name}}</view>
-            </view>
-          </view>
-        </scroll-view>
-      </view>
-    </viewPopup>
-    <view class="scroll-box">
-      <scroll-view class="left" scroll-y>
-        <view class="item u-line-1" :class="{'item-active': leftActive===item.id}" v-for="(item, index) in goodClassTow"
-          :key="index" @click="changeTwo(item, index)">{{item.name}}</view>
-        <view style="width: 100%;height: 300rpx;"></view>
-      </scroll-view>
-      <view class="right">
-        <view class="classify">
-          <scroll-view style="height: 90rpx;" scroll-x>
-            <view class="classify-list">
-              <view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
-                v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
-                {{item.name}}
-              </view>
-              <view style="width: 70rpx;flex-shrink: 0;"></view>
-            </view>
-          </scroll-view>
-          <view class="done" @click="show=2">
-            <up-icon name="arrow-down"></up-icon>
-          </view>
-          <view class="order-by">
-            <view class="item" :class="{'order-active': where.order==''}" @click="changeOrder('')">综合</view>
-            <view class="item" :class="{'order-active': where.order=='desc'||where.order=='asc'}"
-              @click="changeOrder(where.order=='asc'?'desc':'asc')">价格</view>
-            <view class="item" :class="{'order-active': where.order=='sales'}" @click="changeOrder('sales')">销量</view>
-          </view>
-        </view>
-        <viewPopup v-if="show===2" @close="show=0">
-          <view class="cateOne">
-            <scroll-view scroll-y style="height: 230rpx;">
-              <view class="classify-list">
-                <view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
-                  v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
-                  {{item.name}}
-                </view>
-              </view>
-            </scroll-view>
-          </view>
-        </viewPopup>
-        <scroll-view class="list" scroll-y @scrolltolower="loadMoreGood">
-          <view class="shop-item" v-for="(item, index) in goodList" :key="item.id" @click="openGoodPopup(item)">
-            <view class="shop-img">
-              <up-image width="160rpx" height="160rpx" :src="item.imgs"></up-image>
-            </view>
-            <view class="shop-content">
-              <view class="title">
-                <view class="name u-line-2">{{item.name}}</view>
-                <view class="tip u-line-1">
-                  <text>{{item.brand_name}}|</text>
-                  <text>{{item.class_name}}|</text>
-                  <text>{{item.unit_name}}</text>
-                </view>
-              </view>
-              <view class="price-btn">
-                <view class="price">￥{{item.sell}}</view>
-                <view class="btn">
-                  <u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
-                </view>
-              </view>
-            </view>
-          </view>
-          <view style="width: 100%;height: 300rpx;"></view>
-        </scroll-view>
-      </view>
-    </view>
-    <view class="fiexd-btn-box">
-      <view class="price-info">
-        <view class="row">
-          <view>合计</view>
-          <view class="price">¥<text style="font-size: 36rpx;">{{cartInfo.total_price}}</text></view>
-        </view>
-        <!-- <view class="row">
+	<view class="content">
+		<up-navbar placeholder style="z-index: 10080;">
+			<template #left>
+				<view style="font-size: 30rpx;font-weight: bold;" @click="test">惠农批发</view>
+			</template>
+		</up-navbar>
+		<view class="navbar">
+			<view style="width: 500rpx;">
+				<up-search placeholder="请输入商品" @search="searchKeyword" v-model="keyword"
+					:showAction="false"></up-search>
+			</view>
+			<view class="nav-item" @click="navTo('/pages/cart/cart')">
+				<image src="@/static/tab/ba.png"></image>
+				<text>购物车</text>
+			</view>
+			<view class="nav-item" @click="navTo('/pages/my/my')">
+				<image src="@/static/tab/ca.png"></image>
+				<text>个人中心</text>
+			</view>
+		</view>
+		<view class='headScoll' ref='headscroll' :style="{height:isScroll?'0':'200rpx'}">
+			<scroll-view class="head-view" scroll-x>
+				<view class="list">
+					<view class="item" :class="{'item-active': topActive===item.id}"
+						v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
+						<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
+						<view class="c-text u-line-1">{{item.name}}</view>
+					</view>
+					<view class="item" style="width: 80rpx;height: 20rpx;">
+					</view>
+				</view>
+			</scroll-view>
+			<view class="r-btn" @click="show=1">
+				<view>全</view>
+				<view>部</view>
+				<up-icon name="list"></up-icon>
+			</view>
+		</view>
+		<viewPopup nav v-if="show===1" @close="show=0">
+			<view class="cateOne">
+				<view class="head-title">全部分类</view>
+				<scroll-view scroll-y style="height: 600rpx;">
+					<view class="list">
+						<view class="item" :class="{'item-active': topActive===item.id}"
+							v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
+							<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image>
+							</view>
+							<view class="c-text u-line-1">{{item.name}}</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</viewPopup>
+		<view class="scroll-box">
+			<scroll-view class="left" scroll-y>
+				<view class="item u-line-1" :class="{'item-active': leftActive===item.id}"
+					v-for="(item, index) in goodClassTow" :key="index" @click="changeTwo(item, index)">{{item.name}}
+				</view>
+				<view style="width: 100%;height: 300rpx;"></view>
+			</scroll-view>
+			<view class="right">
+				<view class="classify">
+					<scroll-view style="height: 90rpx;" scroll-x>
+						<view class="classify-list">
+							<view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
+								v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
+								{{item.name}}
+							</view>
+							<view style="width: 70rpx;flex-shrink: 0;"></view>
+						</view>
+					</scroll-view>
+					<view class="done" @click="show=2">
+						<up-icon name="arrow-down"></up-icon>
+					</view>
+					<view class="order-by">
+						<view class="item" :class="{'order-active': where.order==''}" @click="changeOrder('')">综合</view>
+						<view class="item" :class="{'order-active': where.order=='desc'||where.order=='asc'}"
+							@click="changeOrder(where.order=='asc'?'desc':'asc')">价格</view>
+						<view class="item" :class="{'order-active': where.order=='sales'}"
+							@click="changeOrder('sales')">销量</view>
+					</view>
+				</view>
+				<viewPopup v-if="show===2" @close="show=0">
+					<view class="cateOne">
+						<scroll-view scroll-y style="height: 230rpx;">
+							<view class="classify-list">
+								<view class="classify-list-item u-line-1"
+									:class="{'item-active': rightActive===item.id}"
+									v-for="(item, index) in goodClassThree" :key="index"
+									@click="changeThree(item, index)">
+									{{item.name}}
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+				</viewPopup>
+				<scroll-view class="list" scroll-y @scrolltolower="loadMoreGood" @scroll='hideHeadView'>
+					<view class="shop-item" v-for="(item, index) in goodList" :key="item.id">
+						<view class="shop-img" @tap="navTo(`/pageQuota/goodDetail/index`)">
+							<up-image width="160rpx" height="160rpx" :src="item.imgs"></up-image>
+						</view>
+						<view class="shop-content">
+							<view class="title">
+								<view class="name u-line-2">{{item.name}}</view>
+								<view class="tip u-line-1">
+									<text>{{item.brand_name}}|</text>
+									<text>{{item.class_name}}|</text>
+									<text>{{item.unit_name}}</text>
+								</view>
+							</view>
+							<view class="price-btn">
+								<view class="price">￥{{item.sell}}</view>
+								<view class="btn" @click="openGoodPopup(item)">
+									<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view style="width: 100%;height: 300rpx;"></view>
+				</scroll-view>
+			</view>
+		</view>
+		<view class="fiexd-btn-box">
+			<view class="price-info">
+				<view class="row">
+					<view>合计</view>
+					<view class="price">¥<text style="font-size: 36rpx;">{{cartInfo.total_price}}</text></view>
+				</view>
+				<!-- <view class="row">
           <view style="color: #777;">原价 ¥50.00</view>
           <view class="price">优惠 ¥0.00</view>
         </view> -->
-      </view>
-      <view class="btn">
-        <up-button color="#20b128" :disabled="cartInfo.count==0" @click="settleAccounts">结算</up-button>
-      </view>
-      <view class="cart" @click="navTo('/pages/cart/cart')">
-        <image src="@/static/icon/cart.png"></image>
-        <view class="badge">{{cartInfo.count}}</view>
-      </view>
-    </view>
+			</view>
+			<view class="btn">
+				<up-button color="#20b128" :disabled="cartInfo.count==0" @click="settleAccounts">结算</up-button>
+			</view>
+			<view class="cart" @click="navTo('/pages/cart/cart')">
+				<image src="@/static/icon/cart.png"></image>
+				<view class="badge">{{cartInfo.count}}</view>
+			</view>
+		</view>
 
-    <goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
-  </view>
+		<goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
+	</view>
 </template>
 
 <script setup>
-  import { onLoad, onShow } from "@dcloudio/uni-app"
-  import { reactive, ref } from "vue"
-  import { goodListApi, goodClassListApi } from "@/api/good.js"
-  import { cartCreateApi, cartChangeApi, cartListApi } from "@/api/cart.js"
-  import viewPopup from "@/components/viewPopup.vue"
-  import goodPopup from "@/components/goodPopup.vue"
-  import useCartStore from "@/store/cart.js"
+	import {
+		onLoad,
+		onShow
+	} from "@dcloudio/uni-app"
+	import {
+		reactive,
+		ref
+	} from "vue"
+	import {
+		goodListApi,
+		goodClassListApi
+	} from "@/api/good.js"
+	import {
+		cartCreateApi,
+		cartChangeApi,
+		cartListApi
+	} from "@/api/cart.js"
+	import viewPopup from "@/components/viewPopup.vue"
+	import goodPopup from "@/components/goodPopup.vue"
+	import useCartStore from "@/store/cart.js"
 
-  const cartStore = useCartStore();
+	/*商品列表滚动隐藏头部导航 */
+	const isScroll = ref(false)
+	let lastScollTop = 0
+	const hideHeadView = (e) => {
+		isScroll.value = e.detail.scrollTop > lastScollTop
+		lastScollTop = e.detail.scrollTop
+	}
+	/*商品列表滚动隐藏头部导航结束 */
+	const test = () => {
+		uni.navigateTo({
+			url: '/pageQuota/quotation/index'
+		})
+	}
 
-  const show = ref(0);
+	const cartStore = useCartStore();
 
-  const topActive = ref(0);
-  const changeOne = (item, index) => {
-    console.log('选择', item, index);
-    topActive.value = item.id;
-    show.value = 0;
-    goodClassTow.value = item?.children || [];
-    goodClassThree.value = goodClassTow.value[0]?.children || [];
-    leftActive.value = goodClassTow.value[0]?.id || '';
-    rightActive.value = goodClassThree.value[0]?.id || '';
-    getGoodList();
-  }
+	const show = ref(0);
 
-  const leftActive = ref(0);
-  const changeTwo = (item, index) => {
-    console.log('选择', item, index);
-    leftActive.value = item.id;
-    show.value = 0;
-    goodClassThree.value = item?.children || [];
-    rightActive.value = goodClassThree.value[0]?.id || '';
-    getGoodList();
-  }
+	const topActive = ref(0);
+	const changeOne = (item, index) => {
+		console.log('选择', item, index);
+		topActive.value = item.id;
+		show.value = 0;
+		goodClassTow.value = item?.children || [];
+		goodClassThree.value = goodClassTow.value[0]?.children || [];
+		leftActive.value = goodClassTow.value[0]?.id || '';
+		rightActive.value = goodClassThree.value[0]?.id || '';
+		getGoodList();
+	}
 
-  const rightActive = ref(0);
-  const changeThree = (item, index) => {
-    console.log('选择', item, index);
-    rightActive.value = item.id;
-    show.value = 0;
-    getGoodList();
-  }
+	const leftActive = ref(0);
+	const changeTwo = (item, index) => {
+		console.log('选择', item, index);
+		leftActive.value = item.id;
+		show.value = 0;
+		goodClassThree.value = item?.children || [];
+		rightActive.value = goodClassThree.value[0]?.id || '';
+		getGoodList();
+	}
 
-  const cartList = reactive(new Map());
-  const addCart = (id, cart_num) => { //加入购物车
-    cartCreateApi({
-      cart_num: cart_num,
-      is_new: 0, // 是否直接购买0否1是
-      goods_id: id
-    }).then(res => {
-      console.log(res);
-      let now = cartList.get(id) || 0;
-      cartList.set(id, now + 1);
-      getCartList();
-    })
-  }
-  const removeCart = (id) => {
-    let num = cartList.get(id) || 0;
-    if (num == 0) return;
-    cartChangeApi({
-      goods_id: id,
-      cart_num: num--
-    }).then(res => {
-      console.log(res);
-      cartList.set(id, num)
-    })
-  }
+	const rightActive = ref(0);
+	const changeThree = (item, index) => {
+		console.log('选择', item, index);
+		rightActive.value = item.id;
+		show.value = 0;
+		getGoodList();
+	}
 
-  const keyword = ref('');
+	const cartList = reactive(new Map());
+	const addCart = (id, cart_num) => { //加入购物车
+		cartCreateApi({
+			cart_num: cart_num,
+			is_new: 0, // 是否直接购买0否1是
+			goods_id: id
+		}).then(res => {
+			console.log(res);
+			let now = cartList.get(id) || 0;
+			cartList.set(id, now + 1);
+			getCartList();
+		})
+	}
+	const removeCart = (id) => {
+		let num = cartList.get(id) || 0;
+		if (num == 0) return;
+		cartChangeApi({
+			goods_id: id,
+			cart_num: num--
+		}).then(res => {
+			console.log(res);
+			cartList.set(id, num)
+		})
+	}
 
-  const searchKeyword = () => {
-    where.value.name = keyword.value;
-    getGoodList();
-  }
+	const keyword = ref('');
 
-  const changeOrder = (order) => {
-    console.log('排序', order);
-    where.value.order = order;
-  }
+	const searchKeyword = () => {
+		where.value.name = keyword.value;
+		getGoodList();
+	}
 
-  const where = ref({
-    page_no: 1,
-    page_size: 25,
-    name: '',
-    order: ''
-  })
-  const loading = ref(true);
-  const goodList = ref([]);
-  const getGoodList = (loadmore = false) => {
-    loading.value = true;
-    let class_id = rightActive.value || leftActive.value || topActive.value || '';
-    let class_all = '';
-    // 若分类没有选中时,则直接查询上一级分类
-    if(rightActive.value=='') class_all = leftActive.value;
-    if(leftActive.value=='') class_all = topActive.value;
-    if(topActive.value=='') class_all = '';
-    if(class_all) class_id = ""; //只能带其中一个
-    goodListApi({
-      ...where.value,
-      class_all: class_all,
-      class: class_id
-    }).then(res => {
-      if (loadmore) goodList.value.push(...res.data.lists);
-      else goodList.value = res.data.lists;
-    })
-  }
+	const changeOrder = (order) => {
+		console.log('排序', order);
+		where.value.order = order;
+	}
 
-  // 商品列表触底
-  const loadMoreGood = () => {
-    console.log('触底了');
-  }
+	const where = ref({
+		page_no: 1,
+		page_size: 25,
+		name: '',
+		order: ''
+	})
+	const loading = ref(true);
+	const goodList = ref([]);
+	const getGoodList = (loadmore = false) => {
+		loading.value = true;
+		let class_id = rightActive.value || leftActive.value || topActive.value || '';
+		let class_all = '';
+		// 若分类没有选中时,则直接查询上一级分类
+		if (rightActive.value == '') class_all = leftActive.value;
+		if (leftActive.value == '') class_all = topActive.value;
+		if (topActive.value == '') class_all = '';
+		if (class_all) class_id = ""; //只能带其中一个
+		goodListApi({
+			...where.value,
+			class_all: class_all,
+			class: class_id
+		}).then(res => {
+			if (loadmore) goodList.value.push(...res.data.lists);
+			else goodList.value = res.data.lists;
+		})
+	}
 
-  const goodClassList = ref([]); // 一级分类
-  const goodClassTow = ref([]); // 二级分类
-  const goodClassThree = ref([]); // 三级分类
-  const getgoodClassList = () => {
-    goodClassListApi().then(res => {
-      res.data?.lists?.unshift({
-        id: "",
-        name: "全部",
-        pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png",
-        children: []
-      })
-      res.data.lists = res.data.lists.map(item=>{
-        if(!item.children) item.children = [];
-        item.children?.unshift({
-          id: "",
-          pid: item.id,
-          name: "全部",
-        })
-        item.children = item.children.map(t=>{
-          if(!t.children) t.children = [];
-          t.children?.unshift({
-            id: "",
-            pid: t.id,
-            name: "全部",
-          })
-          return t;
-        })
-        return item;
-      })
-      goodClassList.value = res.data?.lists || [];
-      goodClassTow.value = goodClassList.value[0]?.children || [];
-      goodClassThree.value = goodClassTow.value[0]?.children || [];
-      topActive.value = goodClassList.value[0]?.id;
-      leftActive.value = goodClassTow.value[0]?.id;
-      rightActive.value = goodClassThree.value[0]?.id;
-    })
-  }
+	// 商品列表触底
+	const loadMoreGood = () => {
+		console.log('触底了');
+	}
 
-  const navTo = (url) => {
-    uni.navigateTo({
-      url: url
-    })
-  }
+	const goodClassList = ref([]); // 一级分类
+	const goodClassTow = ref([]); // 二级分类
+	const goodClassThree = ref([]); // 三级分类
+	const getgoodClassList = () => {
+		goodClassListApi().then(res => {
+			res.data?.lists?.unshift({
+				id: "",
+				name: "全部",
+				pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png",
+				children: []
+			})
+			res.data.lists = res.data.lists.map(item => {
+				if (!item.children) item.children = [];
+				item.children?.unshift({
+					id: "",
+					pid: item.id,
+					name: "全部",
+				})
+				item.children = item.children.map(t => {
+					if (!t.children) t.children = [];
+					t.children?.unshift({
+						id: "",
+						pid: t.id,
+						name: "全部",
+					})
+					return t;
+				})
+				return item;
+			})
+			goodClassList.value = res.data?.lists || [];
+			goodClassTow.value = goodClassList.value[0]?.children || [];
+			goodClassThree.value = goodClassTow.value[0]?.children || [];
+			topActive.value = goodClassList.value[0]?.id;
+			leftActive.value = goodClassTow.value[0]?.id;
+			rightActive.value = goodClassThree.value[0]?.id;
+		})
+	}
 
-  // 选择商品相关
-  const showGoodPopup = ref(false);
-  const goodRef = ref(null);
-  const goodData = ref({});
-  const openGoodPopup = (item) => { // 打开数量/重量弹窗
-    goodData.value = item;
-    goodRef.value.setData(item);
-    showGoodPopup.value = true;
-  };
-  const changeGood = (data)=>{ // 确定选择商品重量
-    showGoodPopup.value = false;
-    addCart(data.id, data.cart_num);
-  }
-  // 结算
-  const settleAccounts = ()=>{
-    uni.navigateTo({
-      url: '/pagesOrder/settle/settle'
-    })
-  }
-  
-  // 购物车相关
-  const cartInfo = ref({
-    total_price: '0.00',
-    count: 0
-  })
-  const getCartList = (res)=>{
-    cartListApi({
-      page_no: 1,
-      page_size: 100,
-    }).then(res=>{
-      cartInfo.value = {
-        total_price: res.data?.extend?.total_price || '0.00',
-        count: res.data?.count || 0
-      }
-      cartStore.setCartList(res.data?.lists.map(item=>item.cart_id))
-    })
-  }
+	const navTo = (url) => {
+		uni.navigateTo({
+			url: url
+		})
+	}
 
-  onLoad(() => {
-    getgoodClassList();
-    getGoodList();
-  })
-  onShow(()=>{
-    getCartList();
-  })
+	// 选择商品相关
+	const showGoodPopup = ref(false);
+	const goodRef = ref(null);
+	const goodData = ref({});
+	const openGoodPopup = (item) => { // 打开数量/重量弹窗
+		goodData.value = item;
+		goodRef.value.setData(item);
+		showGoodPopup.value = true;
+	};
+	const changeGood = (data) => { // 确定选择商品重量
+		showGoodPopup.value = false;
+		addCart(data.id, data.cart_num);
+	}
+	// 结算
+	const settleAccounts = () => {
+		uni.navigateTo({
+			url: '/pagesOrder/settle/settle'
+		})
+	}
+
+	// 购物车相关
+	const cartInfo = ref({
+		total_price: '0.00',
+		count: 0
+	})
+	const getCartList = (res) => {
+		cartListApi({
+			page_no: 1,
+			page_size: 100,
+		}).then(res => {
+			cartInfo.value = {
+				total_price: res.data?.extend?.total_price || '0.00',
+				count: res.data?.count || 0
+			}
+			cartStore.setCartList(res.data?.lists.map(item => item.cart_id))
+		})
+	}
+
+	onLoad(() => {
+		getgoodClassList();
+		getGoodList();
+	})
+	onShow(() => {
+		getCartList();
+	})
 </script>
 
 <style lang="scss">
-  .content {
-    background-color: #fff;
-  }
+	.content {
+		background-color: #fff;
+	}
 
-  .navbar {
-    padding: 0 20rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 22rpx;
-    color: #777;
+	.navbar {
+		padding: 0 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 22rpx;
+		color: #777;
 
-    .nav-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
+		.nav-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
 
-      image {
-        height: 40rpx;
-        width: 40rpx;
-      }
-    }
-  }
+			image {
+				height: 40rpx;
+				width: 40rpx;
+			}
+		}
+	}
 
-  .head-view {
-    background-color: #fff;
-    height: 180rpx;
-    width: 750rpx;
+	.head-view {
+		background-color: #fff;
+		height: 180rpx;
+		width: 750rpx;
 
-    .list {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      padding: 0 20rpx;
-      font-size: 22rpx;
+		.list {
+			height: 100%;
+			display: flex;
+			align-items: center;
+			padding: 0 20rpx;
+			font-size: 22rpx;
 
-      .item {
-        width: 120rpx;
-        flex-shrink: 0;
-        margin-right: 20rpx;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+			.item {
+				width: 120rpx;
+				flex-shrink: 0;
+				margin-right: 20rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
 
-        .c-img {
-          height: 100rpx;
-          width: 100rpx;
-          flex-shrink: 0;
-          border-radius: 50%;
-          border: 2px solid transparent;
-          overflow: hidden;
-        }
+				.c-img {
+					height: 100rpx;
+					width: 100rpx;
+					flex-shrink: 0;
+					border-radius: 50%;
+					border: 2px solid transparent;
+					overflow: hidden;
+				}
 
-        .c-text {
-          width: 100%;
-          text-align: center;
-          box-sizing: border-box;
-          padding: 2rpx 4rpx 3rpx 4rpx;
-          border-radius: 50rpx;
-          margin-top: 5rpx;
-        }
-      }
+				.c-text {
+					width: 100%;
+					text-align: center;
+					box-sizing: border-box;
+					padding: 2rpx 4rpx 3rpx 4rpx;
+					border-radius: 50rpx;
+					margin-top: 5rpx;
+				}
+			}
 
-      .item-active {
-        .c-img {
-          border: 2px solid #20b128;
-        }
+			.item-active {
+				.c-img {
+					border: 2px solid #20b128;
+				}
 
-        .c-text {
-          background-color: #20b128;
-          color: #fff;
-        }
-      }
-    }
-  }
+				.c-text {
+					background-color: #20b128;
+					color: #fff;
+				}
+			}
+		}
+	}
 
-  .r-btn {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: 60rpx;
-    font-size: 24rpx;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    box-shadow: -10rpx 0 60rpx 1rpx rgba(0, 0, 0, 0.3);
-  }
+	.r-btn {
+		position: absolute;
+		right: 0;
+		top: 0;
+		height: 100%;
+		width: 60rpx;
+		font-size: 24rpx;
+		background-color: #fff;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		box-shadow: -10rpx 0 60rpx 1rpx rgba(0, 0, 0, 0.3);
+	}
 
-  .cateOne {
-    background-color: #fff;
+	.cateOne {
+		background-color: #fff;
 
-    .head-title {
-      color: #666666;
-      font-size: 30rpx;
-      height: 80rpx;
-      line-height: 80rpx;
-      padding-left: 30rpx;
-    }
+		.head-title {
+			color: #666666;
+			font-size: 30rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			padding-left: 30rpx;
+		}
 
-    .list {
-      padding: 20rpx 20rpx;
-      font-size: 22rpx;
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-      justify-content: center;
-      grid-gap: 20rpx;
+		.list {
+			padding: 20rpx 20rpx;
+			font-size: 22rpx;
+			display: grid;
+			grid-template-columns: repeat(5, 1fr);
+			justify-content: center;
+			grid-gap: 20rpx;
 
-      .item {
-        width: 120rpx;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
 
-        .c-img {
-          height: 100rpx;
-          width: 100rpx;
-          flex-shrink: 0;
-          border-radius: 50%;
-          border: 2px solid transparent;
-          overflow: hidden;
-        }
+			.item {
+				width: 120rpx;
+				margin: 0 auto;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
 
-        .c-text {
-          width: 100%;
-          text-align: center;
-          box-sizing: border-box;
-          padding: 2rpx 4rpx 3rpx 4rpx;
-          border-radius: 50rpx;
-          margin-top: 5rpx;
-        }
-      }
+				.c-img {
+					height: 100rpx;
+					width: 100rpx;
+					flex-shrink: 0;
+					border-radius: 50%;
+					border: 2px solid transparent;
+					overflow: hidden;
+				}
 
-      .item-active {
-        .c-img {
-          border: 2px solid #20b128;
-        }
+				.c-text {
+					width: 100%;
+					text-align: center;
+					box-sizing: border-box;
+					padding: 2rpx 4rpx 3rpx 4rpx;
+					border-radius: 50rpx;
+					margin-top: 5rpx;
+				}
+			}
 
-        .c-text {
-          background-color: #20b128;
-          color: #fff;
-        }
-      }
-    }
+			.item-active {
+				.c-img {
+					border: 2px solid #20b128;
+				}
 
-    .classify-list {
-      padding: 20rpx 30rpx;
-      font-size: 22rpx;
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      justify-content: center;
-      grid-gap: 20rpx;
+				.c-text {
+					background-color: #20b128;
+					color: #fff;
+				}
+			}
+		}
 
-      .classify-list-item {
-        flex-shrink: 0;
-        text-align: center;
-        width: 150rpx;
-        height: 42rpx;
-        line-height: 42rpx;
-        background: #F6F6F6;
-        border-radius: 22rpx 22rpx 22rpx 22rpx;
-        border: 1rpx solid transparent;
-      }
+		.classify-list {
+			padding: 20rpx 30rpx;
+			font-size: 22rpx;
+			display: grid;
+			grid-template-columns: repeat(3, 1fr);
+			justify-content: center;
+			grid-gap: 20rpx;
 
-      .item-active {
-        border: 1rpx solid #20b128;
-        color: #20b128;
-        background-color: rgba(#20b128, 0.1);
-      }
-    }
-  }
+			.classify-list-item {
+				flex-shrink: 0;
+				text-align: center;
+				width: 150rpx;
+				height: 42rpx;
+				line-height: 42rpx;
+				background: #F6F6F6;
+				border-radius: 22rpx 22rpx 22rpx 22rpx;
+				border: 1rpx solid transparent;
+			}
 
-  .scroll-box {
-    // background-color: red;
-    display: flex;
+			.item-active {
+				border: 1rpx solid #20b128;
+				color: #20b128;
+				background-color: rgba(#20b128, 0.1);
+			}
+		}
+	}
 
-    .left {
-      height: calc(100vh - var(--window-top) - var(--window-bottom) - 500rpx);
-      /* #ifdef H5 */
-      height: calc(100vh - 44px - 300rpx);
-      /* #endif */
-      width: 170rpx;
-      box-sizing: border-box;
-      background-color: #f6f6f6;
-      font-size: 24rpx;
+	.scroll-box {
+		// background-color: red;
+		display: flex;
 
-      .item {
-        height: 96rpx;
-        line-height: 96rpx;
-        text-align: center;
-      }
+		.left {
+			height: calc(100vh - var(--window-top) - var(--window-bottom) - 300rpx);
+			/* #ifdef H5 */
+			height: calc(100vh - 44px - 100rpx);
+			/* #endif */
+			width: 170rpx;
+			box-sizing: border-box;
+			background-color: #f6f6f6;
+			font-size: 24rpx;
 
-      .item-active {
-        background-color: #fff;
-        position: relative;
-        color: #20b128;
+			.item {
+				height: 96rpx;
+				line-height: 96rpx;
+				text-align: center;
+			}
 
-        &::before {
-          content: '';
-          background-color: #20b128;
-          width: 6rpx;
-          height: 48rpx;
-          border-radius: 10rpx;
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translate(0, -50%);
-        }
-      }
-    }
+			.item-active {
+				background-color: #fff;
+				position: relative;
+				color: #20b128;
 
-    .right {
-      height: calc(100vh - var(--window-top) - 500rpx);
-      /* #ifdef H5 */
-      height: calc(100vh - 96px - 180rpx);
-      /* #endif */
-      width: 580rpx;
-      box-sizing: border-box;
-      position: relative;
-      overflow: hidden;
+				&::before {
+					content: '';
+					background-color: #20b128;
+					width: 6rpx;
+					height: 48rpx;
+					border-radius: 10rpx;
+					position: absolute;
+					left: 0;
+					top: 50%;
+					transform: translate(0, -50%);
+				}
+			}
+		}
 
-      .classify {
-        height: 150rpx;
-        background-color: #fff;
-        border-bottom: 1rpx solid #f6f6f6;
-        position: relative;
-        font-size: 24rpx;
+		.right {
+			height: calc(100vh - var(--window-top) - 300rpx);
+			/* #ifdef H5 */
+			height: calc(100vh - 96px + 20rpx);
+			/* #endif */
+			width: 580rpx;
+			box-sizing: border-box;
+			position: relative;
+			overflow: hidden;
 
-        .classify-list {
-          display: flex;
-          padding: 20rpx;
+			.classify {
+				height: 150rpx;
+				background-color: #fff;
+				border-bottom: 1rpx solid #f6f6f6;
+				position: relative;
+				font-size: 24rpx;
 
-          .classify-list-item {
-            flex-shrink: 0;
-            text-align: center;
-            width: 108rpx;
-            height: 42rpx;
-            line-height: 42rpx;
-            background: #F6F6F6;
-            border-radius: 22rpx 22rpx 22rpx 22rpx;
-            margin-right: 20rpx;
-            border: 1rpx solid transparent;
-          }
+				.classify-list {
+					display: flex;
+					padding: 20rpx;
 
-          .item-active {
-            border: 1rpx solid #20b128;
-            color: #20b128;
-            background-color: rgba(#20b128, 0.1);
-          }
-        }
+					.classify-list-item {
+						flex-shrink: 0;
+						text-align: center;
+						width: 108rpx;
+						height: 42rpx;
+						line-height: 42rpx;
+						background: #F6F6F6;
+						border-radius: 22rpx 22rpx 22rpx 22rpx;
+						margin-right: 20rpx;
+						border: 1rpx solid transparent;
+					}
 
-        .done {
-          height: 90rpx;
-          width: 60rpx;
-          position: absolute;
-          top: 0;
-          right: 0;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background-color: #fff;
-        }
+					.item-active {
+						border: 1rpx solid #20b128;
+						color: #20b128;
+						background-color: rgba(#20b128, 0.1);
+					}
+				}
 
-        .order-by {
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
+				.done {
+					height: 90rpx;
+					width: 60rpx;
+					position: absolute;
+					top: 0;
+					right: 0;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background-color: #fff;
+				}
 
-          .item {
-            padding-right: 20rpx;
-          }
+				.order-by {
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
 
-          .order-active {
-            color: #20b128;
-          }
-        }
-      }
+					.item {
+						padding-right: 20rpx;
+					}
 
-      .list {
-        height: calc(100vh - var(--window-top) - 600rpx);
-        /* #ifdef H5 */
-        height: calc(100vh - 44px - 400rpx);
+					.order-active {
+						color: #20b128;
+					}
+				}
+			}
 
-        /* #endif */
-        .shop-item {
-          padding: 20rpx;
-          border-bottom: 1rpx solid #f6f6f6;
-          background-color: #fff;
-          display: flex;
+			.list {
+				height: calc(100vh - var(--window-top) - 400rpx);
+				/* #ifdef H5 */
+				height: calc(100vh - 44px - 200rpx);
 
-          .shop-img {
-            height: 160rpx;
-            width: 160rpx;
-            margin-right: 20rpx;
-            border-radius: 14rpx;
-            overflow: hidden;
-          }
+				/* #endif */
+				.shop-item {
+					padding: 20rpx;
+					border-bottom: 1rpx solid #f6f6f6;
+					background-color: #fff;
+					display: flex;
 
-          .shop-content {
-            width: 380rpx;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
+					.shop-img {
+						height: 160rpx;
+						width: 160rpx;
+						margin-right: 20rpx;
+						border-radius: 14rpx;
+						overflow: hidden;
+					}
 
-            .title {
-              .name {
-                font-size: 28rpx;
-              }
+					.shop-content {
+						width: 380rpx;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
 
-              .tip {
-                color: #999;
-                font-size: 24rpx;
-                margin: 12rpx 0;
-              }
-            }
+						.title {
+							.name {
+								font-size: 28rpx;
+							}
 
-            .price {
-              font-size: 30rpx;
-              font-weight: bold;
-              color: #F55726;
-            }
+							.tip {
+								color: #999;
+								font-size: 24rpx;
+								margin: 12rpx 0;
+							}
+						}
 
-            .price-btn {
-              display: flex;
-              justify-content: space-between;
+						.price {
+							font-size: 30rpx;
+							font-weight: bold;
+							color: #F55726;
+						}
 
-              .btn {
-                display: flex;
-                align-items: center;
+						.price-btn {
+							display: flex;
+							justify-content: space-between;
 
-                .num {
-                  width: 60rpx;
-                  text-align: center;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+							.btn {
+								display: flex;
+								align-items: center;
 
-  .fiexd-btn-box {
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-    height: 140rpx;
-    height: calc(constant(safe-area-inset-bottom) + 140rpx);
-    /* 适用于iOS设备 */
-    height: calc(env(safe-area-inset-bottom) + 140rpx);
-    /* 适用于Android设备 */
-    padding-top: 40rpx;
+								.num {
+									width: 60rpx;
+									text-align: center;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 
-    .price-info {
-      .row {
-        display: flex;
-        font-size: 26rpx;
-        align-items: center;
+	.fiexd-btn-box {
+		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+		height: 140rpx;
+		height: calc(constant(safe-area-inset-bottom) + 140rpx);
+		/* 适用于iOS设备 */
+		height: calc(env(safe-area-inset-bottom) + 140rpx);
+		/* 适用于Android设备 */
+		padding-top: 40rpx;
 
-        &>view {
-          margin-right: 15rpx;
-        }
+		.price-info {
+			.row {
+				display: flex;
+				font-size: 26rpx;
+				align-items: center;
 
-        .price {
-          color: #F55726;
-        }
-      }
-    }
+				&>view {
+					margin-right: 15rpx;
+				}
 
-    .btn {
-      width: 200rpx;
-    }
+				.price {
+					color: #F55726;
+				}
+			}
+		}
 
-    .cart {
-      position: absolute;
-      top: -40rpx;
-      left: 40rpx;
+		.btn {
+			width: 200rpx;
+		}
 
-      image {
-        width: 80rpx;
-        height: 80rpx;
-      }
+		.cart {
+			position: absolute;
+			top: -40rpx;
+			left: 40rpx;
 
-      .badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        background-color: #F55726;
-        color: #fff;
-        border-radius: 50%;
-        width: 26rpx;
-        height: 26rpx;
-        text-align: center;
-        line-height: 26rpx;
-        font-size: 18rpx;
-      }
-    }
-  }
+			image {
+				width: 80rpx;
+				height: 80rpx;
+			}
+
+			.badge {
+				position: absolute;
+				top: 0;
+				right: 0;
+				background-color: #F55726;
+				color: #fff;
+				border-radius: 50%;
+				width: 26rpx;
+				height: 26rpx;
+				text-align: center;
+				line-height: 26rpx;
+				font-size: 18rpx;
+			}
+		}
+	}
+
+	.headScoll {
+		position: relative;
+		overflow: hidden;
+		transition: 400ms;
+	}
 </style>
\ No newline at end of file