mockup: 放大縮小按鈕套用設計

side-project-at-SPT · Sep 6, 2024 · cac04fc · cac04fc
1 parent 672d14d
commit cac04fc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/assets/images/icon-zoom-in.svg b/src/assets/images/icon-zoom-in.svg
diff --git a/src/assets/images/icon-zoom-out.svg b/src/assets/images/icon-zoom-out.svg
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
@@ -446,17 +446,13 @@ const handleZoomOut = () => {
         class="w-[50px] h-[50px] p-2 cursor-pointer pointer-events-auto rounded-full bg-gradient-to-b from-[#FFFFFF] to-[#DAFFFF] border border-[#DBDFEO] shadow-button flex justify-center items-center"
         @click="handleZoomIn"
       >
-        <div class="h-[38px] w-[38px] flex items-center justify-center">
-          +
-        </div>
+        <div class="zoom-in h-[38px] w-[38px]"></div>
       </div>
       <div
         class="w-[50px] h-[50px] p-2 cursor-pointer pointer-events-auto rounded-full bg-gradient-to-b from-[#FFFFFF] to-[#DAFFFF] border border-[#DBDFEO] shadow-button flex justify-center items-center"
         @click="handleZoomOut"
       >
-        <div class="h-[38px] w-[38px] flex items-center justify-center">
-          -
-        </div>
+        <div class="zoom-out h-[38px] w-[38px]"></div>
       </div>
       <div
         class="w-[50px] h-[50px] p-2 cursor-pointer pointer-events-auto rounded-full bg-gradient-to-b from-[#FFFFFF] to-[#DAFFFF] border border-[#DBDFEO] shadow-button flex justify-center items-center"
@@ -608,6 +604,18 @@ const handleZoomOut = () => {
   background-position: center;
 }
 
+.zoom-in {
+  background-image: url('@/assets/images/icon-zoom-in.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.zoom-out {
+  background-image: url('@/assets/images/icon-zoom-out.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .score-yellow {
   background: #ffc23b;
   border: 3px solid #fff7ae;