添加更多

src/components/screen.vue

@@ -0,0 +1,109 @@
+<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>
+
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useUser } from "@/store/user.js"
+
+const store = useUser()
+
+
+const dialogVisible = ref(false)
+
+function show() {
+    dialogVisible.value = true
+}
+
+defineExpose({
+    show
+})
+
+
+</script>
+
+<style scoped lang="scss">
+.drawerbox {
+    :deep(.el-drawer__body) {
+        background: #1c1d1f !important;
+    }
+
+    .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>