From 20279627339388650367488a51c3f805f8580c60 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 3 Aug 2023 10:55:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=93=8D=E4=BD=9C=E5=91=98=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Operator.vue | 33 +++++++++++++++++++++++++++++++++
 src/pages/Home.vue          | 18 ++++++++++++++++++
 src/style.scss              |  5 +++++
 3 files changed, 56 insertions(+)
 create mode 100644 src/components/Operator.vue

diff --git a/src/components/Operator.vue b/src/components/Operator.vue
new file mode 100644
index 0000000..946e538
--- /dev/null
+++ b/src/components/Operator.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="operator_main_content">
+    <div class="left_contaienr"></div>
+    <div class="right_container"></div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.operator_main_content {
+  margin-bottom: 30px;
+  height: 580px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  .left_contaienr {
+    margin-right: 30px;
+    width: 766px;
+    height: 580px;
+    box-sizing: border-box;
+    border-radius: 16px;
+    background: #ffffff;
+  }
+  .right_container {
+    height: 580px;
+    box-sizing: border-box;
+    border-radius: 16px;
+    background: #ffffff;
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 32b9ede..51e2d3b 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -118,11 +118,17 @@
         <p class="text">设置</p>
       </div>
     </div>
+    <Operator v-if="activeTab == 1" />
+    <div class="other_info">
+      <p>IP192.0.0.0.0</p>
+      <p>2023-8-23 11:40:20</p>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import Operator from 'cpns/Operator'
 const activeTab = ref(1)
 
 const changeTab = index => {
@@ -146,6 +152,7 @@ const changeTab = index => {
     border-radius: 40px;
     display: flex;
     align-items: center;
+    margin-bottom: 30px;
     .tab_btn {
       width: 239.5px;
       height: 58px;
@@ -174,5 +181,16 @@ const changeTab = index => {
       color: #ffffff;
     }
   }
+  .other_info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: Source Han Sans CN;
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: 0.06em;
+    color: #ffffff;
+    padding: 0 30px;
+  }
 }
 </style>
diff --git a/src/style.scss b/src/style.scss
index 0f3b20e..85fe8df 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -3,4 +3,9 @@ body {
   width: 1280px;
   height: 800px;
   box-sizing: border-box;
+  // 禁止推拽
+  -webkit-user-select: none; /* Chrome/Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+ */
+  user-select: none; /* Standard */
 }