交互优化

app/src/components/index/rank/index.vue

@@ -17,10 +17,14 @@
                 <li v-for="item in 10" :key="item">
                     <em class="rank-num">{{item}}</em>
                     <div class="img"><img src="http://fed.webdev.ouj.com/214x116" alt=""></div>
-                    <div class="text">
+                    <div class="txt">
                         <p class="game">game-name<i class="icon-hot">H</i></p>
                         <rate :score="item+2" v-if="item < 4"></rate>
                     </div>
+                    <div class="entry-newserve">
+                        <div class="text">进新服</div>
+                        <i class="icon"></i>
+                    </div>
                 </li>
             </ul>
         </div>

app/src/components/index/rank/style.scss

@@ -33,11 +33,26 @@
     .tab-content {
         // height: 200px;
         padding-bottom: 11px;
+        .entry-newserve {
+            @include entry-newserve;
+            right: 10px;
+            display: none;
+        }
         li {
             overflow: hidden;
             padding: 11px 20px 11px 20px;
             display: flex;
             align-items: center;
+            position: relative;
+            &:hover {
+                background: #e9e9e9;
+                .entry-newserve {
+                    display: flex;
+                }
+                .rate {
+                    opacity: 0;
+                }
+            }
             @for $i from 1 through 3 {
                 &:nth-of-type(#{$i}) {
                     .rank-num {
@@ -47,6 +62,14 @@
                         width: 48px;
                         height: 48px;
                     }
+                    .entry-newserve {
+                        top: 37px;
+                        right: 47px;
+                    }
+                    .txt {
+                        margin-bottom: 10px;
+                    }
+                    
                 }
                 
             }
@@ -81,13 +104,14 @@
                 line-height: 20px;
                 width: 100%;
             }
-            .text {
+            .txt {
                 display: flex;
                 flex-direction: column;     
                 justify-content: flex-start;
                 width: 108px;
+                margin-bottom: 5px;
             }
-            .icon_hot {
+            .icon-hot {
                 display: inline-block;
                 width: 15px;
                 height: 15px;

app/src/components/list/gameListPop/style.scss

@@ -63,46 +63,10 @@
                 text-align: center;
             }
             .entry-newserve {
-                width: 86px;
-                height: 26px;
-                background: $main-active-color;
-                border-radius: 3px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                box-sizing: border-box;
-                position: absolute;
                 right: -10px;
                 top: -3px;
+                @include entry-newserve;
                 display: none;
-                .text {
-                    height: 26px;
-                    line-height: 26px;
-                    font-size: 14px;
-                    color: #fff;
-                    border-right: 1px solid rgba(255, 255, 255, 0.4);
-                    padding: 0 8px;
-                    &:hover {
-                        border-radius: 3px 0 0 3px;
-                        background: #c33333;
-                    }
-                }
-                .icon {
-                    width: 27px;
-                    line-height: 26px;
-                    text-align: center;
-                    &:after {
-                        content: '';
-                        display: inline-block;
-                        width: 13px;
-                        height: 13px;
-                        background: url(./img/icon_serve.png) no-repeat
-                            center/100%;
-                    }
-                    &:hover {
-                        background: #c33333;
-                    }
-                }
             }
         }
     }

app/src/duowan-ui/rate/index.vue

@@ -5,24 +5,24 @@
 	</div>
 </template>
 <script>
-	export default {
-        name: "rate",
-        props: {
-            score :{
-                type: [Number,String],
-                //传入数值在0 - 10之间
-                validator(val) {
-                    return val >= 0 && val <= 10;
-                },
-                default: 0
-            }
-        },
-        computed: {
-            percent () {
-                return `${((this.score / 10).toFixed(4)) * 100 }%`
-            }
+export default {
+    name: "rate",
+    props: {
+        score :{
+            type: [Number,String],
+            //传入数值在0 - 10之间
+            validator(val) {
+                return val >= 0 && val <= 10;
+            },
+            default: 0
         }
-	};
+    },
+    computed: {
+        percent () {
+            return `${((this.score / 10).toFixed(4)) * 100 }%`
+        }
+    }
+};
 </script>
 <style lang="scss" scoped>
 .rate {
@@ -37,9 +37,10 @@
 }
 .rate-value {
 	position: absolute;
-	right: -28px;
+	left: 75px;
 	font-size: 12px;
 	color: #999999;
 	top: 2px;
+	width: 35px;
 }
 </style>

app/src/style/mixins.scss

@@ -306,4 +306,44 @@ $gray: #999;
         background: $main-active-color;
         text-align: center;
     }
+}
+
+@mixin entry-newserve {
+    width: 86px;
+    height: 26px;
+    background: $main-active-color;
+    border-radius: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    position: absolute;
+    .text {
+        height: 26px;
+        line-height: 26px;
+        font-size: 14px;
+        color: #fff;
+        border-right: 1px solid rgba(255, 255, 255, 0.4);
+        padding: 0 8px;
+        &:hover {
+            border-radius: 3px 0 0 3px;
+            background: #c33333;
+        }
+    }
+    .icon {
+        width: 27px;
+        line-height: 26px;
+        text-align: center;
+        &:after {
+            content: '';
+            display: inline-block;
+            width: 13px;
+            height: 13px;
+            background: url(~@/assets/icon_serve.png) no-repeat
+                center/100%;
+        }
+        &:hover {
+            background: #c33333;
+        }
+    }
 }