Merge branch 'master' of http://svn.ouj.com:3000/FED/fortnite

web/1807-工具页面/src/arsenal.html

@@ -39,46 +39,62 @@
                         <div class="ku-tab_bd" data-switchable-role="content">
                             <div class="ku-tab_panel">
                                 <div class="box-tab ext-arsenal">
-                                    <table class="box-tab_nav">
-                                        <tr data-switchable-role="nav">
-                                            <td :class="[{'active':typeIndex==0}]" v-for="(weaponsType,typeIndex) in weaponsTypeArr" :key="typeIndex">{{weaponsType.name}}</td>
-                                        </tr>
-                                    </table>
+                                    <div class="box-tab_nav">
+                                        <ul class="clearfix"　data-switchable-role="nav">
+                                            <li :class="[{'active':typeIndex==0}]" v-for="(weaponsType,typeIndex) in weaponsTypeArr" :key="typeIndex">{{weaponsType.name}}</li>
+                                        </ul>
+                                    </div>
                                     <div class="box-tab_cont" data-switchable-role="content">
                                         <div :class="['box-tab_pannel',{'u-hide':typeIndex!=0}]" v-for="(weaponsType,typeIndex) in weaponsTypeArr">
-                                            <table class="table-ku" v-for="(tabWeapons,tabWeaponsIndex) in weaponsType.list" :key="tabWeaponsIndex">
-                                                <thead>
-                                                    <tr>
-                                                        <td class="col-name">枪械名</td>
-                                                        <td class="col-cover">造型</td>
-                                                        <td>稀有度</td>
-                                                        <td>单发伤害</td>
-                                                        <td>爆头伤害</td>
-                                                        <td>射速</td>
-                                                        <td>弹匣容量</td>
-                                                    </tr>
-                                                </thead>
-                                                <tbody>
-                                                    <tr v-for="(item,index) in tabWeapons" :key="index">
-                                                        <td class="col-name col-rows" :rowspan="weaponsType['listNum'][item.name]" v-if="index==0">
-                                                            <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity">{{item.nameCN || item.name}}</a>
-                                                        </td>
-                                                        <td class="col-rows" :rowspan="weaponsType['listNum'][item.name]" v-if="index==0">
-                                                            <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity">
-                                                                <img v-if="index==0" :src="'//api-fn.duowan.com/'+item.image"></a>
-                                                                <img v-else src="//pub.dwstatic.com/common/img/blank.png" :data-src="'//api-fn.duowan.com/'+item.image" alt="">
-                                                            </a>
-                                                        </td>
-                                                        <td :class="'col-rarity col-rarity-'+item.rarity">
-                                                            <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity">{{item['rarityCN']}}</a>
-                                                        </td>
-                                                        <td>{{item["env-damage"]}}</td>
-                                                        <td>{{item["detail-damage"]['pb-range'] | getPbRange}}</td>
-                                                        <td>{{item["quick-information"]['fire-rate']}}</td>
-                                                        <td>{{item["quick-information"]['magazine-size']}}</td>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
+                                            <div class="table-ku-wrap clearfix" v-for="(tabWeapons,tabWeaponsIndex) in weaponsType.list" :key="tabWeaponsIndex">
+                                                
+                                                <table class="table-ku table-ku-30 fl">
+                                                    <thead>
+                                                        <tr>
+                                                            <td class="col-name">枪械名</td>
+                                                            <td class="col-cover">造型</td>
+                                                        </tr>
+                                                    </thead>
+                                                    <tbody>
+                                                        <tr v-for="(item,index) in tabWeapons" :key="index">
+                                                            <td class="col-name col-rows" :rowspan="weaponsType['listNum'][item.name]" v-if="index==0">
+                                                                <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity">{{item.nameCN || item.name}}</a>
+                                                            </td>
+                                                            <td class="col-rows" :rowspan="weaponsType['listNum'][item.name]" v-if="index==0">
+                                                                <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity">
+                                                                    <img v-if="index==0" :src="'//api-fn.duowan.com/'+item.image"></a>
+                                                                    <img v-else src="//pub.dwstatic.com/common/img/blank.png" :data-src="'//api-fn.duowan.com/'+item.image" alt="">
+                                                                </a>
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                                <div class="table-ku-scroll">
+                                                    <table class="table-ku table-ku-70 fl">
+                                                        <thead>
+                                                            <tr>
+                                                                <td>稀有度</td>
+                                                                <td>单发伤害</td>
+                                                                <td>爆头伤害</td>
+                                                                <td>射速</td>
+                                                                <td>弹匣容量</td>
+                                                            </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                            <tr v-for="(item,index) in tabWeapons" :key="index">
+                                                                <td :class="'col-rarity col-rarity-'+item.rarity">
+                                                                    <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity">{{item['rarityCN']}}</a>
+                                                                </td>
+                                                                <td>{{item["env-damage"]}}</td>
+                                                                <td>{{item["detail-damage"]['pb-range'] | getPbRange}}</td>
+                                                                <td>{{item["quick-information"]['fire-rate']}}</td>
+                                                                <td>{{item["quick-information"]['magazine-size']}}</td>
+                                                            </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -88,30 +104,30 @@
                                     <thead>
                                         <tr>
                                             <td>枪械名</td>
-                                            <td>品质</td>
+                                            <td class="m-hide">品质</td>
                                             <td class="btn-sort" @click="sortWeapons('dps',$event)">秒伤<i></i></td>
                                             <td class="btn-sort" @click="sortWeapons('damage',$event)">伤害<i></i></td>
                                             <td class="btn-sort" @click="sortWeapons('fire-rate',$event)">射速<i></i></td>
                                             <td class="btn-sort" @click="sortWeapons('magazine-size',$event)">弹匣容量<i></i></td>
-                                            <td class="btn-sort" @click="sortWeapons('reload-time',$event)">装填时间<i></i></td>
-                                            <td class="btn-sort" @click="sortWeapons('vertical',$event)">垂直后坐力<i></i></td>
+                                            <td class="btn-sort m-hide" @click="sortWeapons('reload-time',$event)">装填时间<i></i></td>
+                                            <td class="btn-sort m-hide" @click="sortWeapons('vertical',$event)">垂直后坐力<i></i></td>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <tr v-for="(item,index) in weapons" :key="index">
                                             <td class="col-imgtxt">
-                                                <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity"><img src="//pub.dwstatic.com/common/img/blank.png" :data-src="'//api-fn.duowan.com/'+item.image" alt=""></a>
+                                                <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity"><img :class="'bg-'+item.rarity" src="//pub.dwstatic.com/common/img/blank.png" :src="'//api-fn.duowan.com/'+item.image" alt=""></a>
                                                 <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity">{{item.nameCN || item.name}}</a>
                                             </td>
-                                            <td>
+                                            <td class="m-hide">
                                                 <a :href="'./arsenalDetail.html?w='+item.name+'-'+item.rarity" :class="'color-'+item.rarity">{{item['rarityCN'] || item['rarity']}}</a>
                                             </td>
                                             <td>{{item['dps']}}</td>
                                             <td>{{item['quick-information']['damage']}}</td>
                                             <td>{{item['quick-information']['fire-rate']}}</td>
                                             <td>{{item['quick-information']['magazine-size']}}</td>
-                                            <td>{{item['quick-information']['reload-time']}}</td>
-                                            <td>{{item['recoil']['vertical']}}</td>
+                                            <td class="m-hide">{{item['quick-information']['reload-time']}}</td>
+                                            <td class="m-hide">{{item['recoil']['vertical']}}</td>
                                         </tr>
                                     </tbody>
                                 </table>

web/1807-工具页面/src/arsenalDetail.html

@@ -33,7 +33,7 @@
                         <div class="primary-fl fl">
                             <h2>简要信息</h2>
                             <div class="primary-box clearfix">
-                                <div class="w-cover fl">
+                                <div :class="'w-cover w-cover_'+curWeapon.rarity+' fl'">
                                     <img :src="'//api-fn.duowan.com/'+curWeapon.image" alt="">
                                 </div>
                                 <div class="clearfix">
@@ -248,8 +248,8 @@
                             </thead>
                             <tbody>
                                 <tr v-for="(item,index) in loot" :key="index">
-                                    <td class="col-chest">{{item['name']}}</td>
-                                    <td>{{item['package-name']}}</td>
+                                    <td class="col-chest">{{item['package-name-cn'] || item['package-name']}}</td>
+                                    <td>{{item['name-cn'] || item['name']}}</td>
                                     <td>{{item['chance']}}</td>
                                     <td>{{item['real-chance']}}</td>
                                 </tr>

web/1807-工具页面/src/modules/page/arsenal.js

@@ -67,6 +67,15 @@ var app = new Vue({
               return item['recoil'][key] * x
               break;
         }
+
+        setTimeout(() => {
+          $btn.parents(".ku-tab_panel").img.each(function(i,e){
+              var $img = $(e),
+                  originalSrc = $img.data("src");
+
+              if(originalSrc) $img.attr("src",originalSrc)
+          })
+        }, 0);
       });
     },
     //处理武器类型

web/1807-工具页面/src/sass/global.scss

@@ -51,6 +51,10 @@ img{
     overflow: hidden;
 }
 
+.m-add{
+    display: none;
+}
+
 .fl{
     float: left;
 }
@@ -237,7 +241,8 @@ img{
 }
 
 .zt-mod-primary{
-    
+    height: px2rem(351);
+    background: url(/src/img/bg-primary_tool.jpg) center 0 / auto 100%;
 }
 
 .zt-mod-nav{
@@ -470,12 +475,12 @@ img{
         line-height: px2rem(42);
         font-size: px2rem(15);
         font-weight: 700;
-        a{
-            display: block;
-            color: #FFFFFF;
-            &:hover{
-                text-decoration: underline;
-            }
+    }
+    a{
+        display: block;
+        color: #FFFFFF;
+        &:hover{
+            text-decoration: underline;
         }
     }
 }
@@ -706,54 +711,12 @@ img{
 .box-tab{
     position: relative;
     text-align: center;
-    &.ext-bullet{
-        .box-tab_nav{
-            td{
-                color: #5b6177;
-                text-align: left;
-                padding: 0 px2rem(20);
-                @include gradient-horizontal(#b1badd,#b7bfe1);
-                &:after{
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    width: px2rem(60);
-                    height: px2rem(58);
-                    background: url(/src/img/require/icon-tab-nav.png) 0 / auto 100% no-repeat;
-                }
-                &.active{
-                    background: #5161a6;
-                    color: #FFFFFF;
-                    &:before{
-                        @include triangle-down(px2rem(10),#5161a6);
-                    }
-                }
-            }
-        }
-    }
-    &.ext-prop{
-        .box-tab_nav{
-            td{
-                color: #4a4b35;
-                padding: 0 px2rem(20);
-                background: #eceeac;
-                &.active{
-                    background: #5b5d2f;
-                    color: #FFFFFF;
-                    &:before{
-                        @include triangle-down(px2rem(10),#5b5d2f);
-                    }
-                }
-            }
-        }
-        .box-tab_desc{
-            color: #fdffdd;
-        }
-    }
     &.ext-arsenal{
         .box-tab_nav{
-            td{
+            li{
+                float: left;
+            }
+            td,li{
                 background: #dbdda6;
                 color: #797a55;
                 &:after{
@@ -772,7 +735,7 @@ img{
         margin: px2rem(30) 0;
         width: 100%;
         table-layout: fixed;
-        td{
+        li,td{
             position: relative;
             flex: 1;
             background: #bdc5e6;
@@ -1203,7 +1166,7 @@ img{
         background: #5f6c9a;
         color: #FFFFFF;
         text-align: center;
-        font-size: px2rem(18);
+        font-size: px2rem(15);
         font-weight: 700;
         thead{
             background: #4d577e;
@@ -1226,7 +1189,7 @@ img{
         img{
             display: inline-block;
             width: auto;
-            height: px2rem(40);
+            height: px2rem(30);
             vertical-align: middle;
         }
         em{
@@ -1277,6 +1240,7 @@ img{
             margin-top: px2rem(21);
             tr{
                 border-top: 1px solid #bec088;
+                
             }
             td{
                 border: 0;
@@ -1284,22 +1248,51 @@ img{
             }
             tbody{
                 td{
-                    padding: px2rem(15) 0;
+                    height: px2rem(99);
                 }
             }
             img{
                 height: px2rem(63);
-                margin: 0 px2rem(15) 0 px2rem(30);
+                margin: 0 px2rem(8) 0 px2rem(15);
+                background: url(/src/img/tool/common.png) center / 100% no-repeat;
+                border: 2px solid $commonColor;
+                &.bg-uncommon{
+                    background: url(/src/img/tool/uncommon.png) center / 100% no-repeat;
+                    border: 2px solid $uncommonColor;
+                }
+                &.bg-legendary{
+                    background: url(/src/img/tool/legendary.png) center / 100% no-repeat;
+                    border: 2px solid $legendaryColor;
+                }
+                &.bg-epic{
+                    background: url(/src/img/tool/epic.png) center / 100% no-repeat;
+                    border: 2px solid $epicColor;
+                }
+                &.bg-rare{
+                    background: url(/src/img/tool/rare.png) center / 100% no-repeat;
+                    border: 2px solid $rareColor;
+                }
             }
             .col-imgtxt{
                 width: auto;
                 text-align: left;
             }
         }
+        &.table-ku-30{
+            height: px2rem(270);
+            width: 29%;
+            border-right: 1px solid #bec088;
+        }
+        &.table-ku-70{
+            height: px2rem(270);
+            width: 70%;
+            border-left: 0;
+            margin-left: -1px;
+        }
         td{
             border: 1px solid #bec088;
-            line-height: px2rem(60);
-            height: px2rem(60);
+            line-height: px2rem(51);
+            height: px2rem(51);
             vertical-align: middle;
             width: px2rem(90);
         }
@@ -1314,7 +1307,7 @@ img{
         }
         a{
             display: inline-block;
-            line-height: px2rem(30);
+            line-height: 1.2em;
             vertical-align: middle;
             color: #6d6f48;
             &:hover{
@@ -1450,6 +1443,64 @@ img{
             line-height: px2rem(192);
             background: #959868;
             margin-right: px2rem(18);
+            position: relative;
+            border: px2rem(4) solid $commonColor;
+            overflow: hidden;
+            background: url(/src/img/tool/common.png) 0 / 100% 100% no-repeat;
+            &:before{
+                position: absolute;
+                top: 0;
+                left: px2rem(-45);
+                z-index: 2;
+                width: px2rem(120);
+                font-size: 12px;
+                height: px2rem(30);
+                line-height: px2rem(30);
+                transform: rotate(-45deg);
+                color: #FFFFFF;
+                text-align: center;
+                background: $commonColor;
+                z-index: 1;
+            }
+            &.w-cover_common{
+                border-color: $commonColor;
+                background-image: url(/src/img/tool/common.png);
+                &:before{
+                    content: "普通";
+                    background: $commonColor;
+                }
+            }
+            &.w-cover_uncommon{
+                border-color: $uncommonColor;
+                background-image: url(/src/img/tool/uncommon.png);
+                &:before{
+                    content: "罕见";
+                    background: $uncommonColor;
+                }
+            }
+            &.w-cover_epic{
+                border-color: $epicColor;
+                background-image: url(/src/img/tool/epic.png);
+                &:before{
+                    content: "史诗";
+                    background: $epicColor;
+                }
+            }
+            &.w-cover_legendary{
+                border-color: $legendaryColor;
+                background-image: url(/src/img/tool/legendary.png);
+                &:before{
+                    content: "传奇";
+                    background: $legendaryColor;
+                }
+            }
+            &.w-cover_rare{
+                border-color: $rareColor;
+                background: url(/src/img/tool/rare.png) 0 / 100% 100% no-repeat;
+                &:before{
+                    content: "稀有"
+                }
+            }
             img{
                 display: inline-block;
                 vertical-align: middle;
@@ -2102,14 +2153,76 @@ img{
 
 //---------wap---------------
 //H5适配
-@media screen and (max-width: 800px) {
-    .zt-crumbs,.zt-mod-header,.zt-sidebar-zt,.zt-sidebar-tool{
+@media screen and (max-width: 1000px) {
+    .zt-mod-primary{
+        height: wpx2rem(351);
+        padding-bottom: wpx2rem(87);
+        background: url(/src/img/wbg-primary_tool.jpg) center 0 / auto 100%;
+    }
+    .m-hide,.zt-mod-header .hItem-logo,.zt-mod-header .row-expand,.zt-crumbs,.zt-sidebar-zt,.zt-sidebar-tool{
         display: none;
     }
     .zt-inner{
         width: 100%;
         box-sizing: border-box;
     }
+    .zt-mod-header{
+        position: absolute;
+        top: wpx2rem(351);
+        left: 0;
+        z-index: 2;
+        margin: 0;
+        width: 100%;
+        background-image: none;
+        background-color: #000000;
+        animation: initial;
+        line-height: wpx2rem(87);
+        overflow: hidden;
+        &:before{
+            content: "";
+            position: absolute;
+            top: 50%;
+            right: wpx2rem(15);
+            z-index: 3;
+            margin-top: wpx2rem(-9);
+            @include triangle-right(wpx2rem(9),#FFFFFF);
+        }
+        &:after{
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 2;
+            width: wpx2rem(99);
+            height: 100%;
+            @include gradient-horizontal(rgba(0,0,0,0), rgba(0,0,0,1));
+        }
+        .hItem-menu{
+            position: relative;
+            line-height: wpx2rem(87);
+            position: relative;
+            white-space: nowrap;
+            overflow: auto;
+            padding-right: wpx2rem(105);
+            li{
+                display: inline-block;
+                float: initial;
+                margin-right: 0;
+                span{
+                    font-size: px2rem(21);
+                    margin: 0;
+                }
+                a{
+                    padding: 0 px2rem(18);
+                    font-size: px2rem(21);
+                    height: auto;
+                }
+            }
+        }
+        em{
+            display: none;
+        }
+    }
     .zt-list-goods{
         padding: wpx2rem(30) 0 wpx2rem(3) wpx2rem(30);
         margin: 0 -0.83333rem -0.1rem 0;
@@ -2145,7 +2258,26 @@ img{
             }
         }
     }
+    .box-tab{
+        &.ext-arsenal{
+            .box-tab_nav{
+                margin: wpx2rem(21) 0;
+                ul{
+                    display: flex;
+                    flex-wrap:wrap;
+                }
+                li{
+                    font-size: wpx2rem(27);
+                    line-height: wpx2rem(75);
+                    width: wpx2rem(225);
+                }
+            }
+        }
+    }
     .page-tool{
+        .tool-box{
+            margin: 0 wpx2rem(9);
+        }
         h1{
             font-size: wpx2rem(60);
         }
@@ -2326,7 +2458,73 @@ img{
         }
     }
     .page-arsenal{
+        .ku-tab_hd{
+            li{
+                font-size: wpx2rem(33);
+                border-width: wpx2rem(6);
+                padding: 0 wpx2rem(3) wpx2rem(12);
+                margin: 0 wpx2rem(60);
+            }
+        }
+        .table-ku-wrap{
+            position: relative;
+            padding-left: wpx2rem(306);
+        }
+        .table-ku-scroll{
+            overflow: auto;
+        }
+        .table-ku{
+            &.ext-data{
+                margin-top: wpx2rem(21);
+                td{
+                    width: wpx2rem(57);
+                    padding: wpx2rem(15) 0;
+                }
+                img{
+                    height: wpx2rem(63);
+                }
+            }
+            &.table-ku-30{
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 2;
+                width: wpx2rem(306);
+                height: wpx2rem(210);
+            }
+            &.table-ku-70{
+                position: relative;
+                z-index: 1;
+                width: wpx2rem(498);
+                height: wpx2rem(210);
+            }
+            td{
+                width: wpx2rem(99);
+                line-height: wpx2rem(51);
+                height: wpx2rem(51);
+            }
+            img{
+                height: wpx2rem(54);
+            }
+            .col-cover{
 
+            }
+            .btn-sort{
+                i{
+                    width: wpx2rem(15);
+                    height: wpx2rem(15);
+                    &:before,&:after{
+                        border-width: wpx2rem(7);
+                    }
+                    &:before{
+                        top: wpx2rem(-10);
+                    }
+                    &:after{
+                        bottom: wpx2rem(-10);
+                    }
+                }
+            }
+        }
     }
     .page-loot{
         .tool-box{
@@ -2398,4 +2596,77 @@ img{
             }
         }
     }
+    .page-arsenalDetail{
+        .info-primary{
+            h2{
+                font-size: wpx2rem(30);
+            }
+            .primary-fl{
+                width: 100%;
+                .primary-box{
+                    padding: wpx2rem(27) wpx2rem(30);
+                }
+            }
+            .primary-fr{
+                display: none;
+            }
+            .w-cover{
+                position: relative;
+                float: initial;
+                width: wpx2rem(204);
+                height: wpx2rem(249);
+                line-height: wpx2rem(249);
+                border: wpx2rem(4) solid $commonColor;
+                background: url(/src/img/tool/common.png) 0 / 100% 100% no-repeat;
+                &:before{
+                    top: 0;
+                    left: wpx2rem(-45);
+                    width: wpx2rem(120);
+                    height: wpx2rem(36);
+                    line-height: wpx2rem(36);
+                    font-size: wpx2rem(21);
+                }
+            }
+            .w-info{
+                line-height: wpx2rem(42);
+                width: wpx2rem(310);
+                margin-top: wpx2rem(30);
+            }
+            .primary-box{
+                position: relative;
+                background: #adb079;
+                height: auto;
+                p{
+                    position: absolute;
+                    top: wpx2rem(27);
+                    left: wpx2rem(252);
+                    font-size: wpx2rem(21);
+                    line-height: wpx2rem(30);
+                    max-height: wpx2rem(60);
+                }
+            }
+        }
+        .info-row{
+            margin-top: wpx2rem(24);
+            .info-table{
+                width: 100%;
+            }
+        }
+        .table-title{
+            background: 0;
+            line-height: wpx2rem(66);
+            &:before,span,i{
+                display: none;
+            }
+        }
+        .table-info{
+            font-size: wpx2rem(24);
+            thead {
+                font-size: wpx2rem(21);
+            }
+            td {
+                line-height: wpx2rem(69);
+            }
+        }
+    }
 }

web/1807-工具页面/src/toolNav.html

@@ -1,6 +1,5 @@
 <link rel="import" href="./topNav.html?__inline">
 <div class="zt-mod-primary">
-    <img src="/src/img/bg-primary_tool.jpg" alt="">
 </div>
 
 <div class="zt-sidebar-tool">
@@ -24,9 +23,4 @@
             <a href="#" target="_self">任务刷新点</a>
         </li>
     </ul>
-</div>
-
-<script>
-    var navIndex = $("body").data("ztnav") * 1;
-    $(".zt-mod-nav .nav"+navIndex).addClass("active");
-</script>
+</div>

web/1807-工具页面/src/topNav.html

@@ -5,37 +5,44 @@
             <ul class="hItem-menu clearfix fr">
                 <li>
                     <a href="http://fn.duowan.com/">
-                        <span>专区首页</span>HOME
+                        <span>专区首页</span>
+                        <em>HOME</em>
                     </a>
                 </li>
                 <li>
                     <a href="./store.html" target="_self">
-                        <span>每日商城</span>STORE
+                        <span>每日商城</span>
+                        <em>STORE</em>
                     </a>
                 </li>
                 <li>
                     <a href="./arsenal.html"  target="_self">
-                        <span>武器库</span>arsenal
+                        <span>武器库</span>
+                        <em>arsenal</em>
                     </a>
                 </li>
                 <li>
                     <a href="./task.html"  target="_self">
-                        <span>任务列表</span>TASk LIST
+                        <span>任务列表</span>
+                        <em>TASk LIST</em>
                     </a>
                 </li>
                 <li>
                     <a href="./loot.html"  target="_self">
-                        <span>掉落率列表</span>DROP LIST
+                        <span>掉落率列表</span>
+                        <em>DROP LIST</em>
                     </a>
                 </li>
                 <li>
                     <a href="./chests.html"  target="_self">
-                        <span>战利品刷新点</span>CHESTS
+                        <span>战利品刷新点</span>
+                        <em>CHESTS</em>
                     </a>
                 </li>
                 <li>
                     <a href="./challenges.html"  target="_self">
-                        <span>任务刷新点</span>CHALLENGES
+                        <span>任务刷新点</span>
+                        <em>CHALLENGES</em>
                     </a>
                 </li>
             </ul>