我的菜窖样式修改

pages/home/myCellar.vue

@@ -11,33 +11,28 @@
 		</view>
 
 
-		<view style="background: #fff;flex-flow: 1; height: calc(100vh - 65vw - 50px); 
-			width: 100%; margin-top: -13vw;
-			border-radius: 25px;display: flex;flex-direction: column; box-sizing: border-box;">
+		<view style="background: #fff; height: calc(100vh - 45px - 50vw);width: 100%; border-radius: 15px;display: flex;flex-direction: column; box-sizing: border-box;margin-top: -15px;box-sizing: border-box;">
 
-			<view style="display: flex;flex-direction: row;height: 25px; width: 100%; flex-shrink: 0;">
+<!-- 			<view style="display: flex;flex-direction: row;height: 25px; width: 100%; flex-shrink: 0;">
 
 				<view style="width: 20%;background: #F7F7F7;border-top-left-radius: 25px;"></view>
 				<view style="width: 80%;background: #fff; border-top-right-radius: 25px;"></view>
-			</view>
-
-			<view style="display: flex;flex-direction: row;min-height: calc(100% - 80px);  ">
+			</view> -->
 
-				<view style="display: flex;flex-direction: column;width: 21%;background: #F7F7F7; ">
-					<text style="font-weight: 600;font-family: sans-serif;
+			<view class="center">
+				<!-- 左侧菜单 -->
+				<view style="width: 22%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
+<!-- 					<text style="font-weight: 600;font-family: sans-serif;
 					color: #333;
 					font-size: 15px;
 					padding-top: 15px;
 					padding-bottom: 15px;
 					margin-top: -20px;
-					text-align: center;">菜窖分类</text>
-
+					text-align: center;">菜窖分类</text> -->
 
-					<scroll-view scroll-y="true" style="height: 100%; width: 100%;border-bottom-left-radius: 25px;"
+<!-- 					<scroll-view scroll-y="true" style="height: 100%; width: 100%;border-bottom-left-radius: 25px;"
 						:scroll-top="scrollLeftTop" bindscrolltoupper="upper" bindscrolltolower="lower"
 						:show-scrollbar="false" :enhanced="true" bindscroll="scroll">
-
-
 						<view
 							style="width: 100%;height: 100%;; display: flex;flex-direction: column; background: #F7F7F7;border-bottom-left-radius: 25px;">
 							<view v-for="(item,index) in data" @click="labelClick(index,item)"
@@ -54,11 +49,18 @@
 							</view>
 
 						</view>
-					</scroll-view>
+					</scroll-view> -->
+					
+					<!-- 左侧菜单列表 -->
+					<view style="width: 100%;display: flex;flex-direction: column; ">
+						<view v-for="(item,index) in data" @click="labelClick(index,item)"	style="display: flex;flex-direction: column;justify-content: center;">
+							<text class="label" :class="{'label2':selectIndex==index}">{{item.name}}</text>
+						</view>
+					</view>
 				</view>
-				<view style="width: 80%;min-height: calc(100% - 80px); display: flex;flex-direction: column; 
-					margin-left: 10px; margin-right: 10px; margin-top: -10px; ">
-
+				
+				
+				<view style="width: 78%;background-color: #fff;overflow-y: auto;">
 					<scroll-view scroll-y="true" style="height: 100%;  width: 100%;" bindscrolltoupper="upper"
 						bindscrolltolower="lower" bindscroll="scroll" :show-scrollbar="false"
 						:scroll-top="scrollRightTop" :enhanced="true">
@@ -532,7 +534,7 @@
 	.top {
 		width: 100vw;
 		/* height: 126.66vw; */
-		height: 75vw;
+		height: 50vw;
 		/* 加载背景图 */
 		background-image: url(https://supervise.yxtsoft.com/lpk/image/clound_bj1.png);
 		/* background-image: url(../../static/clound_bj1.png); */
@@ -540,7 +542,7 @@
 		background-size: 100% 100%;
 	}
 
-	.label {
+/* 	.label {
 		background: #fff;
 		color: #FF9900;
 		font-size: 13px;
@@ -548,15 +550,47 @@
 		padding-bottom: 15px;
 		text-align: center;
 	}
-
 	.label2 {
-
+	
 		background: #FF9900;
 		color: #fff;
 		font-size: 13px;
 		padding-top: 15px;
 		padding-bottom: 15px;
 		text-align: center;
+	} */
+	.label {
+		color: #191919;
+		font-size: 12px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+		text-align: center;
+		padding-top: 7px;
+		padding-bottom: 7px;
+		margin-left: 5px;
+	}
+	.label2 {
+		background: #FFF;
+		color: #FFF;
+		background-color: #FF9900;
+		font-size: 12px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+		padding-top: 7px;
+		padding-bottom: 7px;
+		text-align: center;
+		font-weight: bold;
+		border-radius: 20px;
+		margin-left: 5px;
+	}
+	.center {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		background-color: #f7f7f7;
+		border-radius: 15px;
+		overflow: hidden;
+		min-width: 0;
 	}
 
 	/* 弹窗样式 */