feature: 样式调整

XiaoLin1995 · Jan 4, 2020 · fa55c5d · fa55c5d
1 parent 76b6b58
commit fa55c5d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-fortune-wheel",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "author": "Xiaolin Zhu",
   "license": "MIT",
   "bugs": {

diff --git a/src/components/fortuneWheel/index.scss b/src/components/fortuneWheel/index.scss
@@ -30,10 +30,11 @@
 }
 
 .btn-container {
-  position: relative;
+  position: absolute;
   cursor: pointer;
-  width: 40%;
-  height: 40%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .fortuneWheel-btn{

diff --git a/src/components/fortuneWheel/index.vue b/src/components/fortuneWheel/index.vue
@@ -16,8 +16,8 @@
       <slot name="wheel" v-else />
     </div>
     <div class="fortuneWheel-wrapper">
-      <div class="btn-container" :style="{ width: btnWidth, height: btnWidth}" @click="onRotateStart">
-        <div v-if="type === 'canvas'" class="fortuneWheel-btn">{{ btnText }}</div>
+      <div class="btn-container" @click="onRotateStart">
+        <div v-if="type === 'canvas'" class="fortuneWheel-btn" :style="{ width: btnWidth, height: btnWidth}">{{ btnText }}</div>
         <slot v-else name="button"/>
       </div>
     </div>