修改右侧菜单弹窗样式

.gitignore

@@ -24,5 +24,3 @@ dist-ssr
 *.sw?
 
 /components.d.ts
-/components.d.ts
-/components.d.ts

src/views/page/Aside/cameraRightMenu.vue

@@ -10,37 +10,38 @@
             </template>
             <div class="buttomItem">
                 <div class="buttomName">标签标志</div>
-            </div> </Popover>
-            <div class="buttomItem">
-                <div class="buttomName">截图</div>
-            </div>
-            <div class="buttomItem">
-                <div class="buttomName">录像</div>
-            </div>
-            <div class="buttomItem">
-                <div class="buttomName">3D缩放</div>
-            </div>
-            <div class="buttomItem">
-                <div class="buttomName">设备标记</div>
-            </div>
-            <div class="buttomItem">
-                <div class="buttomName">工具箱</div>
-            </div>
-            <div class="buttomItem" @click="openUserEdit">
-                <div class="buttomName">设置</div>
             </div>
+        </Popover>
+        <div class="buttomItem">
+            <div class="buttomName">截图</div>
+        </div>
+        <div class="buttomItem">
+            <div class="buttomName">录像</div>
+        </div>
+        <div class="buttomItem">
+            <div class="buttomName">3D缩放</div>
+        </div>
+        <div class="buttomItem">
+            <div class="buttomName">设备标记</div>
         </div>
+        <div class="buttomItem">
+            <div class="buttomName">工具箱</div>
+        </div>
+        <div class="buttomItem" @click="openUserEdit">
+            <div class="buttomName">设置</div>
+        </div>
+    </div>
 </template>
 
 <script setup lang='ts'>
 import userEdit from '@/views/page/aside/rightMenuItem/userEdit.vue'
 import { ref } from 'vue';
-
+import { Popover } from 'ant-design-vue';
+import { useStore } from '@/store/index';
 const visible = ref(false)
-function openUserEdit(){  
+function openUserEdit() {
     visible.value = !visible.value
-}import { Popover } from 'ant-design-vue';
+}
-import { useStore } from '@/store/index';
 let piniaStore = useStore();
 function addLabelFn(str: string) {
     piniaStore.updateIsAddLabel({ labelType: str, isAddLabel: true })
@@ -49,57 +50,65 @@ function addLabelFn(str: string) {
 </script>
 
 <style scoped lang='less'>
-   .buttomList {
+.buttomList {
-        position: absolute;
+    position: absolute;
-        right: 1%;
+    right: 1%;
-        top: 15%;
+    top: 15%;
-        width: 80px;
+    width: 80px;
-    }
+}
-
-    @keyframes rounte {
-        from {
-            transform: rotate(0deg);
-        }
 
-        to {
+@keyframes rounte {
-            transform: rotate(360deg);
+    from {
-        }
+        transform: rotate(0deg);
     }
 
-    .buttomItem {
+    to {
-        position: relative;
+        transform: rotate(360deg);
-        width: 80px;
-        height: 80px;
     }
+}
 
-    .buttomItem::before {
+.buttomItem {
-        content: '';
+    position: relative;
-        background: url(@/assets/images/buttonBG01.png);
+    width: 80px;
-        background-size: 100% 100%;
+    height: 80px;
-        position: absolute;
+}
-        animation: rounte 5s linear infinite;
-        top: 5%;
-        bottom: 5%;
-        left: 5%;
-        right: 5%;
-        z-index: 1;
-    }
 
-    .buttomItem:hover::before {
+.buttomItem::before {
-        background: url(@/assets/images/buttonBG02.png);
+    content: '';
-        background-size: 100% 100%;
+    background: url(@/assets/images/buttonBG01.png);
-    }
+    background-size: 100% 100%;
+    position: absolute;
+    animation: rounte 5s linear infinite;
+    top: 5%;
+    bottom: 5%;
+    left: 5%;
+    right: 5%;
+    z-index: 1;
+}
+
+.buttomItem:hover::before {
+    background: url(@/assets/images/buttonBG02.png);
+    background-size: 100% 100%;
+}
+
+.buttomName {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: #fff;
+    line-height: 3vw;
+    width: 100%;
+    z-index: 2;
+    font-size: 0.8em;
+}
+ul{
+    padding: 0;
+    margin: 0;
+    p:last-child{
+    margin: 0;
+}
+}
 
-    .buttomName {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        text-align: center;
-        color: #fff;
-        line-height: 3vw;
-        width: 100%;
-        z-index: 2;
-        font-size: 0.8em;
-    }
 </style>