Merge pull request #16 from aidenzou/master

组件样式优化：放大缩小控制条 #9
idle-dog · Oct 28, 2015 · 73ef6f1 · 73ef6f1
2 parents 8376764 + 2def940
commit 73ef6f1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 23 deletions.
diff --git a/src/module/widget/zoom/zoom.css b/src/module/widget/zoom/zoom.css
@@ -8,36 +8,26 @@
     height: 20px;
     line-height: 20px;
     text-align: center;
-    font-size: 50%;
     border-radius: 10px;
-    background-color: #000;
-    color: #FFF;
+    background-color: #FFF;
+    color: #000;
 }
 
 .w-zoom_size {
     height: 58px;
-    margin: 1px 9px;
-    background-color: #000;
-
+    margin: 5px 9px;
+    background-color: #FFF;
     position: relative;
+    text-align: center;
 }
 
-/*.w-zoom_size:after {
-    content: "";
-    position: absolute;
-    top: 20px;
-    right: 0;
-    width: 12px;
-    height: 3px;
-    background-color: #000;
-}*/
-
 .w-zoom_size span {
-    content: "";
     position: absolute;
-    /*top: 20px;*/
-    right: 0;
+    height: 12px;
     width: 12px;
-    height: 2px;
-    background-color: #000;
+    background-color: #FFF;
+    border-radius: 10px;
+    box-shadow: -1px -1px 2px #999 inset;
+    transform: translate(-50%, -50%);
+    transition: all 0.2s width : 0;
 }
diff --git a/src/module/widget/zoom/zoom.html b/src/module/widget/zoom/zoom.html
@@ -1,5 +1,5 @@
 <div class="w-zoom">
-    <div class="w-zoom_btn" @click="zoomUp">╋</div>
+    <div class="w-zoom_btn" @click="zoomUp">+</div>
     <div class="w-zoom_size"><span :style="{top:top}"></span></div>
-    <div class="w-zoom_btn" @click="zoomDown">━</div>
+    <div class="w-zoom_btn" @click="zoomDown">-</div>
 </div>