perf[RightPanel]: tidy css (#2101)

src/components/RightPanel/index.vue

@@ -86,32 +86,27 @@ export default {
 
 <style lang="scss" scoped>
 .rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
   opacity: 0;
   transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
   background: rgba(0, 0, 0, .2);
-  width: 0;
-  height: 0;
-  top: 0;
-  left: 0;
-  position: fixed;
   z-index: -1;
 }
 
 .rightPanel {
-  background: #fff;
-  z-index: 3000;
-  position: fixed;
-  height: 100vh;
   width: 100%;
   max-width: 260px;
-  top: 0px;
-  left: 0px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
   transition: all .25s cubic-bezier(.7, .3, .1, 1);
   transform: translate(100%);
+  background: #fff;
   z-index: 40000;
-  left: auto;
-  right: 0px;
 }
 
 .show {
@@ -130,20 +125,18 @@ export default {
 }
 
 .handle-button {
+  width: 48px;
+  height: 48px;
   position: absolute;
   left: -48px;
+  text-align: center;
+  font-size: 24px;
   border-radius: 6px 0 0 6px !important;
-  width: 48px;
-  height: 48px;
-  pointer-events: auto;
   z-index: 0;
-  cursor: pointer;
   pointer-events: auto;
-  font-size: 24px;
-  text-align: center;
+  cursor: pointer;
   color: #fff;
   line-height: 48px;
-
   i {
     font-size: 24px;
     line-height: 48px;