From d99575b2b74d76d0c7b7f6f4b39f8cc92984469c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=95=BE?= <1144797966@qq.com>
Date: Thu, 22 Feb 2024 16:25:34 +0800
Subject: [PATCH] wwz

---
 src/views/order/index.vue | 155 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 147 insertions(+), 8 deletions(-)

diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index ebc1a18..0b8f01a 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -1,23 +1,162 @@
-<script setup>
-import { useRoute } from "vue-router"
-const route = useRoute()
-console.log(route)
-</script>
 <template>
     <div class="orderbox">
-        <div class="orderbox_left">order</div>
+        <div class="orderbox_left">
+            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick(activeName)">
+                <el-tab-pane label="全部" name="first">
+                    <div class="demo_tabs_div">
+                        <el-input v-model="firstinput" placeholder="请输入订单号查询" clearable />
+                        <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button>
+                    </div>
+                    <div class="demo_tabs_box">
+                        <div class="demo_tabs_boxitem">
+                            <div class="demo_tabs_boxitem_one">
+                                <el-image style="width: 100px; height: 70px;border-radius: 10px;"
+                                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                                    fit="scale-down" />
+                                <div class="demo_tabs_boxitem_oneone">
+                                    <div>
+                                        11:19
+                                    </div>
+                                    <div style="color: #757575;">
+                                        2024/02/01
+                                    </div>
+                                </div>
+                                <div class="demo_tabs_boxitem_onetow">
+                                    <div>
+                                        <span>销售</span><span
+                                            style="font-size: 16px; color: #757575;">11111111111111111111111111</span>
+                                    </div>
+                                    <div>
+                                        <span style="color: #5a31f1;">[222]</span><span>待点单</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="demo_tabs_boxitem_tow">
+                                <div>
+                                    ￥0.0
+                                </div>
+                                <div style="color:#ff9e01;">
+                                    开台
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="销售" name="second">销售</el-tab-pane>
+                <el-tab-pane label="退单" name="third">退单</el-tab-pane>
+            </el-tabs>
+        </div>
         <div class="orderbox_right">order</div>
     </div>
 </template>
 
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from "vue-router"
+import { ElMessage } from 'element-plus'
+const route = useRoute()
+console.log(route)
+const activeName = ref('first')//定义初始name
+const handleClick = (Name) => {
+    console.log(Name)
+}
+const firstinput = ref('')//搜索输入框
+const onSubmit = () => {
+    if (firstinput.value) {
+
+    } else {
+        ElMessage({
+            message: '请输入订单号查询',
+            type: 'warning',
+        })
+    }
+}
+</script>
+
 <style scoped lang="scss">
 .orderbox {
+    display: flex;
+    height: 100%;
+
     .orderbox_left {
-        width: 80%;
+        width: 70%;
+        height: 100%;
+        background: #fff;
+        border-radius: 10px;
+
+        .demo-tabs {
+            :deep(.el-tabs__nav) {
+                width: 100%;
+            }
+
+            :deep(.el-tabs__item) {
+                width: 33.33%;
+            }
+
+            :deep(.el-is-active) {
+                width: 33.33%;
+                color: var(--primary-color);
+            }
+
+            .demo_tabs_div {
+                padding: 0 20px;
+                display: flex;
+            }
+
+            .demo_tabs_box {
+                width: 100%;
+                padding: 10px 20px;
+
+                .demo_tabs_boxitem {
+                    width: 100%;
+                    padding: 6px 16px;
+                    border-radius: 6px;
+                    display: flex;
+                    justify-content: space-between;
+                    // background: #eeeeee;
+                    border-bottom: 1px solid #ccc;
+                    .demo_tabs_boxitem_one {
+                        display: flex;
+                        justify-content: flex-start;
+
+                        .demo_tabs_boxitem_oneone {
+                            display: flex;
+                            margin-left: 20px;
+                            flex-direction: column;
+                            height: 70px;
+                            justify-content: space-around;
+                        }
+
+                        .demo_tabs_boxitem_onetow {
+                            display: flex;
+                            margin-left: 20px;
+                            flex-direction: column;
+                            height: 70px;
+                            justify-content: space-around;
+                        }
+                    }
+                }
+
+                .demo_tabs_boxitem_tow {
+                    display: flex;
+                    flex-direction: column;
+                    height: 70px;
+                    justify-content: space-around;
+                    align-items: flex-end;
+
+                }
+            }
+
+        }
+
     }
 
     .orderbox_right {
-        width: 20%;
+        width: 30%;
+        margin-left: 10px;
+        background: #fff;
+        border-radius: 10px;
+
     }
 }
 </style>
\ No newline at end of file