工作台基础布局

ghsPad/src/admin/home/workbench.vue

@@ -1,18 +1,72 @@
 <template>
 	<view class="app-workbench_box">
 		<view class="nav-left">
-			收银
+			<view class="item-list">
+				收银
+			</view>
 		</view>
-		<view class="shouList-box">
-			2121212
+		<view class="shopList-box">
+			<view class="title">商品列表</view>
+			<view class="shopList-item_box">
+				<view class="shop-item_box">
+					<view class="shop-body_box">
+						<view class="flower-name_box">
+							<view class="name">
+								小菊
+							</view>
+						</view>
+						<view>
+							<view>25元/支</view>
+							<view>5支</view>
+							<view>￥108</view>
+						</view>
+					</view>
+				</view>
+				<view class="shop-item_box">
+					<view class="shop-body_box">
+						<view class="flower-name_box">
+							<view class="name">
+								小菊
+							</view>
+						</view>
+						<view>
+							<view>25元/支</view>
+							<view>5支</view>
+							<view>￥108</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="shopList-footer_box">
+				<view>
+					数量：
+					<text style="fontWeight:bold">
+						8扎5支
+					</text>
+				</view>
+				<view>
+					合计:
+					<text style="color:red">￥123</text>	
+				</view>
+			</view>
 		</view>
 		<view class="open-box">
-			2121
+			<view>
+				客户
+			</view>
+			<view>
+				扎
+			</view>
+			<view>
+				删除商品
+			</view>
+			<view>
+				清空商品
+			</view>
 		</view>
 		<view class="shop-list">
 			212121
 		</view>
-		<!-- <NotLogin></NotLogin> -->
 	</view>
 </template>
 <script>
@@ -26,6 +80,7 @@ export default {
 	mixins: [productMins,autoUpdateMixins],
 	data() {
 		return {
+			
 		};
 	},
 	computed: {
@@ -55,8 +110,77 @@ export default {
 		}
 		& .nav-left {
 			height: 100%;
-			width: 55upx;
+			width: 50upx;
 			background-color: rgba(72, 91, 107, 1);
+			// #599981
+			& .item-list {
+				margin-top: 50upx;
+				font-size: 20upx;
+				text-align: center;
+				padding: 15upx 0;
+				background-color: #599981;
+				color: #FFFFFF;
+			}
+		}
+		& .shopList-box {
+			width: 250upx;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			& .title {
+				padding: 3upx;
+				font-size: 12upx;
+				background-color: rgba(72, 91, 107, 1);
+				color: #FFFFFF;
+			}
+			& .shopList-item_box {
+				flex: 1;
+			    border: 1px solid #eee;
+				& .shop-item_box {
+					padding: 5upx;
+					& .shop-body_box {
+						background-color: #f2f8f8;
+						padding: 5upx;
+						font-size: 14upx;
+						& .flower-name_box {
+							padding: 0 5upx;
+							& .name {
+								color: #333333;
+								font-weight: bold;
+							}
+						}
+						& > view:nth-child(2) {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							padding-top: 15upx;
+						}
+					}
+				}
+			}
+			& .shopList-footer_box {
+				height: 50upx;
+				border: 1px solid #eee;
+				font-size: 12upx;
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+			}
+		}
+		& .open-box {
+			width: 80upx;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			padding: 5upx;
+			padding-top: 10upx;
+			& > view {
+				border: 1px solid #eee;
+				text-align: center;
+				padding: 10upx;
+				color: #333333;
+				margin-bottom: 15upx;
+			}
 		}
 	}
 </style>