排版

hdPad/src/admin/work/components/order-info.vue

@@ -0,0 +1,62 @@
+<template>
+    <view class="work-info">
+        <view class="work-detail">
+        </view>
+        <view class="operate-area">
+          <view @click="changeProperty(1)">花材</view>
+          <view @click="changeProperty(0)">成品</view>
+          <view @click="logout">退出</view>
+          <view @click="resetCustomer">选客户</view>
+          <view @click="clearItemFn">清空花材</view>
+          <view @click="breakage">报损</view>
+          <view @click="gosettleCommit">结算 </view>
+        </view>
+        <view class="work-item-detail">
+        </view>
+    </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.work-info{
+  display:flex;
+  height: 100%;
+  & .work-detail{
+        flex: 40;
+        background-color:green;
+    }
+	& .operate-area {
+		flex: 9;
+		height: 100vh;
+    display: flex;
+    flex-direction: column;
+    padding: 5upx;
+    & > view {
+        border: 1upx solid #CCCCCC;
+        border-radius: 5upx;
+        text-align: center;
+        padding: 10upx 0;
+        color: #666666;
+        margin-bottom: 10upx;
+        font-size: 10upx;
+        text-align: center;
+        &.active {
+            color: #008000;
+            border-color: #008000;
+            border-radius: 2upx;
+        }
+    }
+	}
+	& .work-item-detail {
+		flex: 40;
+		height: 100%;
+    background-color:red;
+	}
+}
+</style>

hdPad/src/admin/work/index.vue

@@ -8,13 +8,8 @@
             <view class="work-order-list">
                 <orderList></orderList>
             </view>
-            <view class="work-detail" style="background:blue;">
-            </view>
-            <view class="operate-area" style="background:yellow;">
-
-            </view>
-            <view class="work-item-detail" style="background:red;">
-
+            <view class="work-order-info">
+                <orderInfo></orderInfo>
             </view>
         </view>
     </view>
@@ -25,9 +20,10 @@ import { mapGetters } from "vuex";
 import productMins from "@/mixins/product";
 import casherNav from '@/components/casher-nav.vue'
 import orderList from './components/order-list.vue'
+import orderInfo from './components/order-info.vue'
 export default {
 	name: "workIndex",
-	components: {casherNav,orderList},
+	components: {casherNav,orderList,orderInfo},
 	mixins: [productMins],
 	data() {
 		return {
@@ -37,7 +33,7 @@ export default {
 		...mapGetters(["getLoginInfo"])
 	},
 	onLoad() {
-		this.initDataFromStorage()
+		//this.initDataFromStorage()
 	},
 	methods: {
 	}
@@ -56,16 +52,9 @@ export default {
 		flex: 32;
 		height: 100%;
 	}
-    & .work-detail{
-        flex: 40;
-    }
-	& .operate-area {
-		flex: 9;
-		height: 100vh;
-	}
-	& .work-item-detail {
-		flex: 40;
+    & .work-order-info{
+        flex: 89;
 		height: 100%;
-	}
+    }
 }
 </style>