操作员布局

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>

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>

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 */
 }