样式整理

pages/home/myCellar.vue

@@ -1,27 +1,16 @@
 <template>
-
+	<view id="page">
-	<view
+		<!-- 顶部 -->
-		style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
-
 		<view class="top">
 			<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
 				:end-change-height="page.endHeight">
 			</NavBar>
-
 		</view>
-
+		<!-- 功能区 -->
-
+		<view class="func-area">
-		<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="width: 20%;background: #F7F7F7;border-top-left-radius: 25px;"></view>
-				<view style="width: 80%;background: #fff; border-top-right-radius: 25px;"></view>
-			</view> -->
-
 			<view class="center">
-				<!-- 左侧菜单 -->
+				<!-- 左侧菜单区 -->
-				<view style="width: 22%;display: flex;flex-direction: column;overflow-y: auto;padding-top: 10px;">
+				<view class="menu-area">
 <!-- 					<text style="font-weight: 600;font-family: sans-serif;
 					color: #333;
 					font-size: 15px;
@@ -50,15 +39,19 @@
 
 						</view>
 					</scroll-view> -->
-					
 					<!-- 左侧菜单列表 -->
-					<view style="width: 100%;display: flex;flex-direction: column; ">
+					<scroll-view scroll-y="true" style="height: 100%; width: 100%;border-bottom-left-radius: 25px;"
-						<view v-for="(item,index) in data" @click="labelClick(index,item)"	style="display: flex;flex-direction: column;justify-content: center;">
+						:scroll-top="scrollLeftTop" bindscrolltoupper="upper" bindscrolltolower="lower"
-							<text class="label" :class="{'label2':selectIndex==index}">{{item.name}}</text>
+						:show-scrollbar="false" :enhanced="true" bindscroll="scroll">
+						<view class="menu">
+							<view v-for="(item,index) in data" @click="labelClick(index,item)"	class="method">
+								<text class="label" :class="{'label-selected':selectIndex==index}">{{item.name}}</text>
+								<view v-if="item.count>0" class="goods-count">{{item.count}}</view>
+							</view>
 						</view>
-					</view>
+					</scroll-view>
-				</view>
 
+				</view>
 				
 				<view style="width: 78%;background-color: #fff;overflow-y: auto;">
 					<scroll-view scroll-y="true" style="height: 100%;  width: 100%;" bindscrolltoupper="upper"
@@ -531,6 +524,14 @@
 </script>
 
 <style>
+	
+	#page{
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background: -webkit-linear-gradient(left,#FEA65F,#FB9440);
+	}
+	/* 顶部 */
 	.top {
 		width: 100vw;
 		/* height: 126.66vw; */
@@ -541,7 +542,80 @@
 		/* 让背景图基于容器大小伸缩 */
 		background-size: 100% 100%;
 	}
+	/* 功能区 */
+    .func-area{
+		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;
+	}
+	/* 功能区-菜单区 */
+	.func-area .menu-area{
+        width: 22%;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		padding-top: 10px;
+    }
 	
+	/* 功能区-菜单区-菜单 */
+	.func-area .menu-area .menu{
+		width: 100%;
+		display: flex;
+		flex-direction: column; 
+	}
+	
+	/* 功能区-菜单区-菜单-显示方法 */
+	.func-area .menu-area .menu .method{
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+	
+	/* 功能区-菜单区-菜单-标签 */
+	.func-area .menu-area .menu .label{
+		color: #191919;
+		font-size: 12px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+		text-align: center;
+		padding-top: 7px;
+		padding-bottom: 7px;
+		margin-left: 5px;
+	}
+	/* 功能区-菜单区-菜单-标签选中 */
+	.func-area .menu-area .menu .label-selected{
+		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;
+	}
+	/* 功能区-菜单区-菜单-商品数量 */
+	.func-area .menu-area .menu .goods-count{
+	    border-radius: 50%;
+		text-align: center;
+		background: #f00;
+		color: #fff;
+		font-size: 8px;
+	    position: absolute;
+	    top: 8px;
+	    right: 3px;
+	    padding: 2px 5px;
+	    width: auto;
+	}
 /* 	.label {
 		background: #fff;
 		color: #FF9900;
@@ -559,30 +633,7 @@
 		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;