修改云控台样式

@@ -81,6 +81,7 @@
 
   //type  1:上    2:右    3:下    4:左    5:暂停
   const handleClick = (type: number) => {
+    console.log(type, 'type');
     if (type == 5) {
       // if (unref(isPlay)) {
       //   unref(videoPlayInstance)?.play();
@@ -130,11 +131,6 @@
       <h1>云台控制</h1>
 
       <div class="home mt-5">
-        <CaretUpOutlined class="front-sty-top child-icon" @click="handleClick(1)" />
-        <CaretRightOutlined class="front-sty-right child-icon" @click="handleClick(2)" />
-        <CaretDownOutlined class="front-sty-bottom child-icon" @click="handleClick(4)" />
-        <CaretLeftOutlined class="front-sty-left child-icon" @click="handleClick(3)" />
-
         <Button class="front-sty-center child center" shape="circle" @click="handleClick(5)">
           <!-- 暂停 -->
           <PauseOutlined v-if="!isPlay" class="child-icon" style="color: #fffbfb" />
@@ -145,18 +141,18 @@
         <div class="box">
           <div>
             <Button class="left-top in-block" @click="handleClick(1)">
-              <i> 上</i>
+              <CaretUpOutlined class="icon-rotate child-icon" @click="handleClick(1)" />
             </Button>
             <Button class="right-top in-block" @click="handleClick(2)">
-              <i> 右</i>
+              <CaretRightOutlined class="icon-rotate child-icon" @click="handleClick(2)" />
             </Button>
           </div>
           <div>
             <Button class="left-bottom in-block" @click="handleClick(3)">
-              <i> 左</i>
+              <CaretLeftOutlined class="icon-rotate child-icon" @click="handleClick(3)" />
             </Button>
             <Button class="right-bottom in-block" @click="handleClick(4)">
-              <i> 下</i>
+              <CaretDownOutlined class="icon-rotate child-icon" @click="handleClick(4)" />
             </Button>
           </div>
 
@@ -231,40 +227,8 @@
     height: 10rem;
   }
 
-  .box i {
-    visibility: collapse;
-  }
-
-  .front-sty-top {
-    position: absolute;
-    top: 1rem;
-    z-index: 9999;
-    left: 50%;
-    transform: translate(-50%);
-  }
-
-  .front-sty-bottom {
-    position: absolute;
-    bottom: 1rem;
-    z-index: 9999;
-    left: 50%;
-    transform: translate(-50%);
-  }
-
-  .front-sty-right {
-    position: absolute;
-    top: 50%;
-    z-index: 9999;
-    right: 1rem;
-    transform: translateY(-50%);
-  }
-
-  .front-sty-left {
-    position: absolute;
-    top: 50%;
-    z-index: 9999;
-    left: 1rem;
-    transform: translateY(-50%);
+  .icon-rotate {
+    transform: rotate(315deg);
   }
 
   .front-sty-center {