perf: 优化放映底部按钮在不同底色下的显示

src/plugins/iconPark.ts

@@ -60,8 +60,8 @@ import {
   PentagonOne,
   Text,
   Rotate,
-  LeftC,
-  RightC,
+  LeftTwo,
+  RightTwo,
   Platte,
   UpOne,
   DownOne,
@@ -144,8 +144,8 @@ export default {
 
     // 箭头与符号
     app.component('IconDown', Down)
-    app.component('IconLeftC', LeftC)
-    app.component('IconRightC', RightC)
+    app.component('IconLeftTwo', LeftTwo)
+    app.component('IconRightTwo', RightTwo)
     app.component('IconPlus', Plus)
     app.component('IconMinus', Minus)
     app.component('IconCloseSmall', CloseSmall)

src/views/Screen/index.vue

@@ -42,13 +42,13 @@
     />
 
     <div class="tools">
-      <IconLeftC class="tool-btn" @click="execPrev()" />
-      <IconRightC class="tool-btn" @click="execNext()" />
+      <IconLeftTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execPrev()" />
+      <IconRightTwo class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" @click="execNext()" />
       <Popover trigger="click" v-model:visible="writingBoardToolVisible">
         <template #content>
           <WritingBoardTool @close="writingBoardToolVisible = false" />
         </template>
-        <IconWrite class="tool-btn" />
+        <IconWrite class="tool-btn" theme="two-tone" :fill="['#111', '#fff']" />
       </Popover>
     </div>
 
@@ -421,10 +421,15 @@ export default defineComponent({
   right: 8px;
   padding: 8px 12px;
   color: #666;
-  background-color: rgba($color: #f2f4f6, $alpha: .7);
-  box-shadow: 0 2px 12px 0 rgba($color: #333, $alpha: .2);
+  border: 2px solid #acacac;
+  background-color: rgba($color: #fff, $alpha: .6);
   border-radius: $borderRadius;
   z-index: 10;
   cursor: pointer;
+
+  &:hover {
+    border: 2px solid #333;
+    color: #333;
+  }
 }
 </style>