完善订单

src/components/leftMenu.vue

@@ -22,12 +22,14 @@
     </div>
     <!-- 更多 -->
     <more ref="moreref"></more>
+
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import more from '@/components/more.vue'
+
 const route = useRoute()
 const moreref = ref(null)
 console.log(route.path)

src/components/more.vue

@@ -40,16 +40,16 @@
                                 设置
                             </div>
                         </div>
-                        <!-- <div class="drawerbox_bo_box_itembox" @click="screenref.show()">
+                        <div class="drawerbox_bo_box_itembox" @click="screenref.shows()">
                             <div class="drawerbox_bo_box_icon">
                                 <el-icon size="40" style="margin:30px;">
-                                    <Setting />
+                                    <Switch />
                                 </el-icon>
                             </div>
                             <div class="drawerbox_bo_box_icontext">
                                 锁屏
                             </div>
-                        </div> -->
+                        </div>
                     </div>
                 </div>
             </div>
@@ -63,12 +63,13 @@
             </div>
         </el-drawer>
     </div>
-    <!-- <screen ref="screenref"></screen> -->
+    <screen ref="screenref"></screen>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useUser } from "@/store/user.js"
+import screen from '@/components/screen.vue'
 
 import packageData from '../../package.json'
 const store = useUser()
@@ -96,9 +97,9 @@ defineExpose({
 
     .boxabsolute {
         position: absolute;
-        width: 100%;
         bottom: 20px;
-
+        left: 50%;
+        transform: translate(-50%);
         div {
             color: #8c9196;
             text-align: center;

src/components/screen.vue

@@ -1,29 +1,37 @@
 <template>
-    <div class="drawerbox">
-        <el-drawer size="50%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0;">
-            <div class="drawerbox_box">
-               111
-            </div>
-        </el-drawer>
-    </div>
+    <el-dialog width="400" v-model="dialogVisible" style="padding: 0; " title="以锁屏" :close-on-click-modal="false" :show-close="false">
+        <div class="drawerbox_box">
+            <el-input v-model="loginName" placeholder="请输入登录账号" />
+            <el-button style="width: 100%; margin-top: 20px;" type="primary" @click="loginNameclick">确认</el-button>
+        </div>
+    </el-dialog>
 
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useUser } from "@/store/user.js"
-
+import { ElMessage } from 'element-plus'
 const store = useUser()
-
-
+const loginName = ref()
+const loginNameclick = () => {
+    if (loginName.value == store.userInfo.loginName) {
+        dialogVisible.value = false
+    } else {
+        ElMessage({
+            message: '输入错误',
+            type: 'Error',
+        })
+    }
+}
 const dialogVisible = ref(false)
 
-function show() {
+function shows() {
     dialogVisible.value = true
 }
 
 defineExpose({
-    show
+    shows
 })
 
 
@@ -37,73 +45,6 @@ defineExpose({
 
     .drawerbox_box {
         color: #fff;
-
-        .drawerbox_bo_top {
-            padding: 20px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid #ccc;
-
-            .drawerbox_bo_top_left {
-                display: flex;
-                flex-direction: column;
-            }
-
-            .drawerbox_bo_top_ring {
-                display: flex;
-                align-items: center;
-
-                .drawerbox_bo_top_ring_tb {
-                    display: flex;
-                    flex-direction: column;
-                    border: 1px solid #ccc;
-                    border-radius: 6px;
-                    padding: 6px 10px;
-
-                    span {
-                        width: 80px;
-                        margin-top: 5px;
-                        text-align: center;
-                    }
-                }
-            }
-        }
-
-        .drawerbox_bo_box {
-            width: 100%;
-
-            .drawerbox_bo_box_itemb_felx {
-                display: flex;
-                justify-content: flex-start;
-                padding: 0 20px;
-
-                .drawerbox_bo_box_itembox:nth-child(1) {
-                    margin-left: 0px;
-
-                }
-
-                .drawerbox_bo_box_itembox {
-                    width: 20%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    margin-left: 40px;
-
-                    .drawerbox_bo_box_icon {
-                        border-radius: 6px;
-                        background: #2196f3;
-                        width: 100px;
-                        height: 100px;
-                    }
-
-                    .drawerbox_bo_box_icontext {
-                        margin-top: 10px;
-                    }
-                }
-            }
-
-        }
     }
 }
 </style>