决斗数据库 卡组胜率:1.禁用table拖拽 2.排序着色功能 3.多页面暗黑模式样式调整

src/assets/darkModelCss/darkStyleMix.css

 .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
 {
-    background-color: #1a4861;
-    border: 3px solid #161b22;
-
+background-color: #1a4861;
+border: 3px solid #161b22;
 
 }
 
 .nav-tabs {
-    border-bottom: 1px solid black;
+border-bottom: 1px solid black;
 }
 
-  .well
-  {
+.well
+{
 
-    background-color: #1a4861;
+background-color: #1a4861;
 
-    border:none;
-  }
+border:none;
+}
 .input-group-addon
 {
-  color: white;
-  background-color: #161b22;
-  border: 1px solid black;
+color: white;
+background-color: #161b22;
+border: 1px solid black;
 }
 
+.form-control
+{
 
-  .form-control
-  {
+border: 2px solid black;
+color: white;
+background-color: #1D252F;
 
-    border: 1px solid black;
-    color: white;
-    background-color: #283044;
+}
+.tab-img {
+height: 72px;
+width: 120px;
+}
+.table-responsive {
+
+border: 0px solid transparent!important;
+overflow: hidden!important;
+}
+
+.search-form div.input-group-addon {
+background: #1D252F;
+color: #80A3BD;
+border-bottom-left-radius: 2px;
+border-top-left-radius: 2px;
+border: 1px solid #b6c3cd;
+border-right: 0;
+}
+.search-form div.input-group-addon {
+background: #1a4861;
+color: #80A3BD;
+border-bottom-left-radius: 2px;
+border-top-left-radius: 2px;
+border: 2px solid black
+;
+border-right: 1px solid black;
+}
+.search-form .input-group input {
+background-color: #1D252F;
+box-shadow: none;
+color: white;
+outline: none;
+border: 2px solid black;
+border-right: 0;
+border-left: 0;
+}
+.search-form div.input-group-btn button {
+border-bottom-right-radius: 2px;
+border-top-right-radius: 2px;
+background: #1a4861;
+box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
+color: #ffffff;
+border: 1px solid black;
+outline: none;
+opacity: 0.9;
+}
+.thumbnail {
+display: block;
+padding: 4px;
+margin-bottom: 22px;
+line-height: 1.42857143;
+background-color: #1D252F;
+border: 1px solid black;
+border-radius: 4px;
+color:white;
+-webkit-transition: border .2s ease-in-out;
+-o-transition: border .2s ease-in-out;
+transition: border .2s ease-in-out;
+}
+.thumbnail .caption {
+padding: 9px;
+color: white;
+}
+.panel-default>.panel-heading {
+color:white;
+background-color: #1a4861;
+border-color: #dddddd;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd){
+
+background-color: #1D252F;
+}
+
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
+color: white;
+}
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
+background-color: #1a4861;
+border: 1px solid #161b22;
+}
 
-  }
-    .tab-img {
-        height: 72px;
-        width: 120px;
-    }
-    .table-responsive {
+.nav>li>a:hover, .nav>li>a:focus {
+text-decoration: none;
+background-color: #161b22;
+}
+.nav-tabs>li>a:hover {
+border-color: #161b22 #161b22 #161b22;
+}
+a:hover, a:focus {
+color: white;
+text-decoration: underline;
+}
+.panel-default {
+border: 2px solid black;
+
+background-color: #1b2738;
+}
+
+.panel-default>.panel-heading {
+color: #fff;
+background-color: #1a4861;
+border-color: #000;
+}
+tbody {
+border-color: #000;
+}
+.panel>.table-responsive>.table-bordered {
+border-color: #000;
+
+}
+.pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus,
+.pagination>.active>span:focus{
+z-index: 3;
+color: #fff;
+background-color: #1a4861;
+border-color: #1a4861;
+cursor: default;
+}
+.pagination>.active>a, .pagination>.active>span {
+z-index: 3;
+color: #fff;
+background-color: #1a4861;
+border-color: #1a4861;
+cursor: default;
+}
+.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
+z-index: 2;
+color: #fff;
+background-color: #0B202B;
+border-color: #3AB6BA;
+}
+.pagination>li>a, .pagination>li>span {
+position: relative;
+float: left;
+padding: 8px px 12px;
+line-height: 1.42857143;
+text-decoration: none;
+color: #333;
+background-color: #fff;
+border: 1px solid black;
+margin-left: -1px;
+}
+.pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
+color: black;
+background-color: #1D252F;
+border-color: #1D252F;
+border:1px solid black;
+cursor: not-allowed;
+}
+.pagination>li>a, .pagination>li>span {
 
+color: #fff;
+background-color: #181D24;
+border: 1px solid black;
+
+}
+#entertain_rank{
+
+overflow:hidden;
+
+}
+
+thead {
+background-color: #1a4861;
+}
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  list-style: none;
+  font-size: 16px;
+  text-align: left;
+  background-color: #283044;
+  border: 1px solid black;
   border: 1px solid black;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+  box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.dropdown-menu>li>a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.42857143;
+  color: white;
+  white-space: nowrap;
+}
+.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
+  text-decoration: none;
+  color: #fff;
+  background-color: #1a4861;
+}
+.dropdown-menu .divider {
+  height: 1px;
+  margin: 10px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
 }
\ No newline at end of file

src/components/Cards.vue

@@ -54,7 +54,8 @@
                             </div>
 
                             <div class="form-group" style="display:none">
-                                <button type="submit" id="search" class="form-control btn btn-primary">{{lang.search}}</button>
+                                <button type="submit" id="search"
+                                    class="form-control btn btn-primary">{{lang.search}}</button>
                             </div>
 
                         </form>
@@ -62,8 +63,6 @@
 
                     <h4 class="color-blue"><i class="glyphicon glyphicon-list-alt"></i> {{lang.table_data}} </h4>
 
-
-
                     <div>
                         <ul class="nav nav-tabs">
 
@@ -89,50 +88,58 @@
 
                         <div class="tab-content">
 
-                            <div role="tabpanel" class="tab-pane" :class="{ active: isActive }" v-if="isActive" id="tab-0">
+                            <div role="tabpanel" class="tab-pane" :class="{ active: isActive }" v-if="isActive"
+                                id="tab-0">
                                 <br>
                                 <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
-                                    <table id="deck" class="table table-striped table-bordered table-hover example" :width="width"></table>
+                                    <table id="deck" class="table table-striped table-bordered table-hover example"
+                                        :width="width"></table>
                                 </div>
                             </div>
 
                             <div role="tabpanel" class="tab-pane" :class="{ active: !isActive }" id="tab-1">
                                 <br>
                                 <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
-                                    <table id="monster" class="table table-striped table-bordered table-hover example" :width="width"></table>
+                                    <table id="monster" class="table table-striped table-bordered table-hover example"
+                                        :width="width"></table>
                                 </div>
                             </div>
 
                             <div role="tabpanel" class="tab-pane" id="tab-2">
                                 <br>
                                 <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
-                                    <table id="spell" class="table table-striped table-bordered table-hover example" :width="width"></table>
+                                    <table id="spell" class="table table-striped table-bordered table-hover example"
+                                        :width="width"></table>
                                 </div>
                             </div>
 
                             <div role="tabpanel" class="tab-pane" id="tab-3">
                                 <br>
                                 <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
-                                    <table id="trap" class="table table-striped table-bordered table-hover example" :width="width"></table>
+                                    <table id="trap" class="table table-striped table-bordered table-hover example"
+                                        :width="width"></table>
                                 </div>
                             </div>
 
                             <div role="tabpanel" class="tab-pane" id="tab-4">
                                 <br>
                                 <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
-                                    <table id="side" class="table table-striped table-bordered table-hover example" :width="width"></table>
+                                    <table id="side" class="table table-striped table-bordered table-hover example"
+                                        :width="width"></table>
                                 </div>
                             </div>
 
                             <div role="tabpanel" class="tab-pane" id="tab-5">
                                 <br>
                                 <div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;">
-                                    <table id="ex" class="table table-striped table-bordered table-hover example" :width="width"></table>
+                                    <table id="ex" class="table table-striped table-bordered table-hover example"
+                                        :width="width"></table>
                                 </div>
                             </div>
 
                             <div class="form-group" style="display:none">
-                                <button type="submit" id="search" class="form-control btn btn-primary">{{lang.search}}</button>
+                                <button type="submit" id="search"
+                                    class="form-control btn btn-primary">{{lang.search}}</button>
                             </div>
 
                         </div>
@@ -143,17 +150,16 @@
             </div>
         </div>
 
-  
     </div>
 </template>
 
 <script>
     import Footads from './Footads'
     import tb_language from './tb_lang.js'
-    import { mapGetters } from 'vuex'
-
+    import {
+        mapGetters
+    } from 'vuex'
     import API from '../api';
-
     import img0 from '../assets/img/500x300_deck.jpg'
     // import img1 from '../assets/MonsterWithBorder.jpg'
     import img1 from '../assets/img/500x300_monster.jpg'
@@ -164,45 +170,36 @@
     // import img4 from '../assets/SideWithBorder.jpg'
     import img4 from '../assets/img/500x300_side.jpg'
     import img5 from '../assets/img/ExtraWithBorder.jpg'
-
-
     var dt = require('datatables.net')
     var dt2 = require('datatables.net-bs')
     import "../assets/css/dataTables.bootstrap.min.css"
-
     var monsterTable;
     var spellTable;
     var trapTable;
     var exTable;
     var sideTable;
-
     var deckTable;
-
     export default {
         components: {
             Footads
         },
-        created: function () {
-
-            var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
+        created: function() {
+            var regex_match =
+                /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
             var u = navigator.userAgent;
             if (null == u) {
                 return true;
             }
             var result = regex_match.exec(u);
-            if (null == result) {
-            } else {
+            if (null == result) {} else {
                 this.width = "250%"
             }
-
             var lang = localStorage.getItem('lang') || 'cn';
             this.init(lang)
         },
-        mounted: function () {
+        mounted: function() {
             this.init2();
         },
-
-
         data() {
             return {
                 isActive: true,
@@ -222,13 +219,13 @@
             }),
         },
         watch: {
-            lang: function (val) {
+            lang: function(val) {
                 // console.log('lang change1', val)
                 this.init2()
             },
         },
         methods: {
-            init: function (lang) {
+            init: function(lang) {
                 if (lang === "cn") {
                     this.isActive = true;
                 } else {
@@ -237,13 +234,14 @@
                 // this.lang = language[lang]
                 this.getCount()
             },
-            init2: function () {
+            init2: function() {
                 var lang = localStorage.getItem('lang') || 'cn';
                 if (lang === "cn") {
                     this.isActive = true;
                 } else {
                     this.isActive = false;
                 }
+
                 function renderPage() {
                     if (monsterTable) {
                         monsterTable.clear();
@@ -265,49 +263,43 @@
                         sideTable.clear();
                         sideTable.destroy();
                     }
-
                     var server = $("#server").val() || "mycard"
                     var source = $("#source").val() || "athletic"
                     var final_source = server + "-" + source
-
                     $.get('https://sapi.moecube.com:444/ygopro/analytics/single/type', {
                         type: $("#type").val(),
                         lang: localStorage.getItem('lang') || 'cn',
                         extra: 'name',
                         source: final_source
-                    }, function (data) {
+                    }, function(data) {
                         var monster = data.monster;
                         var spell = data.spell;
                         var trap = data.trap;
                         var side = data.side;
                         var ex = data.ex;
-
                         monsterTable = renderTable("#monster", monster)
                         spellTable = renderTable("#spell", spell)
                         trapTable = renderTable("#trap", trap)
                         exTable = renderTable("#ex", ex)
                         sideTable = renderTable("#side", side)
                     });
-
                     //卡组api https://sapi.moecube.com:444/ygopro/analytics/deck/type?type=day&source=mycard-entertain
                     //只显示中文
                     var lang = localStorage.getItem('lang') || 'cn';
                     if (lang === "cn") {
-
                         if (deckTable) {
                             deckTable.clear();
                             deckTable.destroy();
                         }
-
                         $.get('https://sapi.moecube.com:444/ygopro/analytics/deck/type', {
                             type: $("#type").val(),
                             source: final_source
-                        }, function (data) {
+                        }, function(data) {
                             var obj = data;
                             if (typeof obj === 'string')
                                 obj = JSON.parse(data);
                             var rank = 1;
-                            var processData = obj.map(function (x) {
+                            var processData = obj.map(function(x) {
                                 var tagStr = [];
                                 var deckName = x.name;
                                 for (var i = 0; i < x.tags.length; i++) {
@@ -317,95 +309,101 @@
                                 }
                                 return [rank++, x.name, x.count, tagStr.join(" , ")];
                             });
-
                             deckTable = $("#deck").DataTable({
                                 data: processData,
                                 pageLength: 25,
-                                order: [[2, "desc"]],
-                                "ordering": true,
-                                columns: [
-                                    { title: tb_language[lang].rank },
-                                    { title: tb_language[lang].deck },
-                                    { title: tb_language[lang].count },
-                                    { title: tb_language[lang].topTags },
+                                order: [
+                                    [2, "desc"]
                                 ],
-                                "columnDefs": [
+                                "ordering": true,
+                                columns: [{
+                                        title: tb_language[lang].rank
+                                    },
+                                    {
+                                        title: tb_language[lang].deck
+                                    },
                                     {
-                                        "render": function (data, type, row) {
+                                        title: tb_language[lang].count
+                                    },
+                                    {
+                                        title: tb_language[lang].topTags
+                                    },
+                                ],
+                                "columnDefs": [{
+                                    "render": function(data, type, row) {
                                         // return "<span title='" + data + "'>" + data + "</span>";
                                         // return "<img src='imag.png' />";
-                                            return "<a href='?name=" + data + "#/deck'>" + data + "</a>";
+                                        return "<a href='?name=" + data + "#/deck'>" +
+                                            data + "</a>";
                                     },
                                     "targets": 1
-                                    },
-                                ],
+                                }, ],
                                 "language": tb_language[lang]
                             });
                         });
                     }
-
                 }
 
                 function renderTable(tableID, tableData) {
                     tableData = tableData || [];
-
                     var lang = localStorage.getItem('lang') || 'cn';
                     var langIndex = (lang === 'en' ? 'en-US' : 'zh-CN');
-
                     var rank = 1;
-                    var processData = tableData.map(function (d) {
-                        return [rank++, d.name ? d.name[langIndex] : "未知卡片", d.frequency, d.putone, d.puttwo, d.putthree, d.id];
+                    var processData = tableData.map(function(d) {
+                        return [rank++, d.name ? d.name[langIndex] : "未知卡片", d.frequency, d.putone, d
+                            .puttwo, d.putthree, d.id
+                        ];
                     });
-
                     var table = $(tableID).DataTable({
                         data: processData,
                         pageLength: 50,
-                        order: [[2, "desc"]],
-                        "ordering": true,
-                        columns: [
-                            { title: tb_language[lang].rank },
-                            { title: tb_language[lang].cardName },
-                            { title: tb_language[lang].used },
-                            { title: tb_language[lang].put1 },
-                            { title: tb_language[lang].put2 },
-                            { title: tb_language[lang].put3 },
+                        order: [
+                            [2, "desc"]
                         ],
-                        "columnDefs": [
+                        "ordering": true,
+                        columns: [{
+                                title: tb_language[lang].rank
+                            },
                             {
-                                "render": function (data, type, row) {
-                                    // return "<span title='" + data + "'>" + data + "</span>";
-// <<<<<<< HEAD
-                                    // return "<a href='?id=" + row[6] + "#/cardinfo'>" + data + "</a>";
-                                    return "<a href='https://www.ourocg.cn/search/" + row[6] + "'>" + data + "</a>";
-// =======
-                                    // return "<a href='https://www.ourocg.cn/search/" + row[6] + "/'>" + data + "</a>";
-// >>>>>>> 77e3b283f8782193f4ecdaf5219a79ecf9fd2a91
+                                title: tb_language[lang].cardName
                             },
-                                "targets": 1
+                            {
+                                title: tb_language[lang].used
+                            },
+                            {
+                                title: tb_language[lang].put1
+                            },
+                            {
+                                title: tb_language[lang].put2
+                            },
+                            {
+                                title: tb_language[lang].put3
                             },
                         ],
+                        "columnDefs": [{
+                            "render": function(data, type, row) {
+                                return "<a href='https://www.ourocg.cn/search/" + row[6] +
+                                    "'>" + data + "</a>";
+                            },
+                            "targets": 1
+                        }, ],
                         "language": tb_language[lang]
                     });
-
                     return table;
                 }
-
                 renderPage();
-
-                $("#search").click(function () {
+                $("#search").click(function() {
                     renderPage();
                     return false;
                 })
             },
-            onChange: function () {
+            onChange: function() {
                 $("#search").trigger('click')
                 this.getCount()
             },
-            getCount: function () {
-
+            getCount: function() {
                 var server = $("#server").val() || "mycard"
                 var source = $("#source").val() || "athletic"
-
                 var opt = {
                     type: $("#type").val() || "day",
                     source: server + "-" + source
@@ -421,58 +419,17 @@
             }
         },
         events: {
-            'lang-change': function (lang) {
+            'lang-change': function(lang) {
                 this.init(lang)
                 this.onChange()
             }
         },
     }
-
 </script>
 
-
 <style scoped>
-    .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
-{
-    background-color: #1a4861;
-    border: 3px solid #161b22;
-
-
-}
-
-.nav-tabs {
-    border-bottom: 1px solid black;
-}
-
-  .well
-  {
-
-    background-color: #1a4861;
-
-    border:none;
+   #deck {
+       margin-top:20px!important;
+      border:1px solid black;
     }
-.input-group-addon
-{
-  color: white;
-  background-color: #161b22;
-  border: 1px solid black;
-}
-
-
-  .form-control
-  {
-
-    border: 1px solid black;
-    color: white;
-    background-color: #283044;
-
-  }
-    .tab-img {
-        height: 72px;
-        width: 120px;
-    }
-    .table-responsive {
-
-    border: 1px solid black;
-}
 </style>
\ No newline at end of file

src/components/Download.vue

@@ -2,7 +2,7 @@
   <div class="team-boxed">
     <div class="container">
       <div class="intro">
-        <h2 class="text-center">{{lang.downloadPage.welcome}} </h2>
+        <h2 id='downLoadWelcome' class="text-center">{{lang.downloadPage.welcome}} </h2>
         <p class="text-center"><strong>{{lang.downloadPage.desc}}</strong> </p>
       </div>
       <div class="row people">
@@ -42,22 +42,20 @@
 <script>
   import querystring from 'querystring';
   import API from '../api'
-
-  import { mapGetters } from 'vuex'
-
+  import {
+    mapGetters
+  } from 'vuex'
   import "../assets/css/Team-Boxed.css"
   import "../assets/css/Team-Clean.css"
-
   export default {
     data() {
       return {
         downloadUrls: {},
       }
     },
-    created: function () {
+    created: function() {
       // https://wudizhanche.mycard.moe/download?platform=win32
       // https://wudizhanche.mycard.moe/download?platform=darwin
-
       var self = this
       self.downloadUrls['windows'] = "https://mycard.moe"
       self.downloadUrls['mac'] = "https://mycard.moe"
@@ -84,39 +82,53 @@
       }),
     },
     watch: {
-      lang: function (val) {
+      lang: function(val) {
         this.initLang()
       },
     },
     events: {
-      'lang-change': function (lang) {
+      'lang-change': function(lang) {
         this.initLang(lang)
       }
     },
     methods: {
-      initLang: function (lang) {
-        
-      },
-      gogo: function (url) {
+      initLang: function(lang) {},
+      gogo: function(url) {
         // window.open(url)
         window.location.href = this.downloadUrls[url]
       }
     },
   }
-
 </script>
 
 <style scoped>
+  #downLoadWelcome {color: white;}
+
   .team-boxed {
-    color: #313437;
-    background-color: #ffffff;
+    color: white;
+    background-color: #1b2738;
   }
 
   .item1 {
     cursor: pointer;
   }
 
-  .box {
-    background-color: red;
-  }
+ 
+  .team-boxed .item1 .box {
+    text-align: center;
+    padding: 30px;
+    background-color: #1b2738;
+    margin-bottom: 30px;
+}
+.team-boxed .item1 {
+  text-align:center;
+  box-shadow:10px 10px 15px #1b2738;
+ 
+}
+.team-boxed .item1 {
+   
+    text-align: center;
+    box-shadow: 10px 10px 35px black;
+}
+
 </style>
\ No newline at end of file

src/components/Index.vue

@@ -62,12 +62,12 @@
 </template>
 
 <script>
-  import querystring from 'querystring';
+
   import image from '../assets/img/banner.jpg'
   import image3 from '../assets/img/image3.jpg'
   import { mapGetters } from 'vuex'
   import API from '../api'
-  /* import "../assets/darkModelCss/darkMix.css" */
+  import "../assets/darkModelCss/darkStyleMix.css" 
   export default {
     data() {
       return {

src/components/Rates.vue

@@ -29,7 +29,7 @@
                                 :cell-style="csMonitor" @sort-change='sortChange'>
 
                                 <el-table-column v-for="item in tableHead" :key="item.key" :label='item.label'
-                                    :property='item.prop' :sortable="item.sortable" :render-header="labelFunction">
+                                    :property='item.prop' :sortable="item.sortable" :resizable="item.resizable" :render-header="labelFunction">
                                     <template slot-scope="scope">
                                         <div>{{item.key== 0  ? scope.row[item.label]: scope.row[item.label]+'%'}}
 
@@ -54,12 +54,14 @@
     //例如：import 《组件名称》 from '《组件路径》';
     import API from '../api';
     const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率']
+    const builtInColumnTitle = {deckType:'卡组种类', avgWinRate:'均胜率'}
     export default {
         //import引入的组件需要注入到对象中才能使用
         components: {},
         data() {
             //这里存放数据
             return {
+                builtInColumnTitle,
                 tableChangeCount: 0,
                 winRateColumnTitle: [],
                 winRateButtonDefault: '0',
@@ -100,7 +102,37 @@
                 return label;
             },
             sortChange(para) {
-                this.tableOrder = para.order
+               
+                let curChangeColName = para.prop //排序列名
+                this.tableOrder = para.order//排序方式
+                let tempOrderTable = [...this.tableData]
+                
+               tempOrderTable = this.tableBubbleSort(curChangeColName, tempOrderTable)
+              this.tableData=tempOrderTable
+                
+                
+            },
+            tableBubbleSort(OrderKey, curTable) {
+         
+              let arr=curTable
+                for (let i = 0; i < arr.length; i++) {
+                    for (let j = 0; j < arr.length - 1 - i; j++) {
+                        let curOrderItem=arr[j][OrderKey]
+                        let curOrderNextItem=arr[j+1][OrderKey]
+                           
+                        if (curOrderItem < curOrderNextItem) {
+                            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
+                        }
+                    }
+                }//降序
+               if ( this.tableOrder=='ascending') {
+                   curTable=curTable.reverse()
+               }
+               if ( this.tableOrder==null) {
+                   curTable= [...this.totalWinRateData[this.tableFlag]]
+               }
+                return [...curTable]
+                
             },
             toPoint(percent) {
                 percent = percent + ''
@@ -175,10 +207,13 @@
                         tempCellCss["font-weight"] = 'bold'
                     }
                 }
-                if (this.tableOrder == null) {
-                    let tempLabel = cell.column.label
-                    let tempContent = this.winRateColumnTitle[cell.rowIndex]
+               
+                    let tempLabel = cell.column.label//当前格子的列名
+                   
+                    let tempContent = this.tableData[cell.rowIndex][this.builtInColumnTitle.deckType]//当前格子的行名
+              
                     if (tempLabel == tempContent) {
+                              
                         {
                             if (this.tableFlag == '2') {
                                 tempCellCss["color"] = '#39485C'
@@ -186,47 +221,51 @@
                             tempCellCss["background-color"] = '#141A21' //胜率50的斜线
                         }
                     }
-                }
+                
                 return tempCellCss
             },
             showClickWinRate(tab, event) {
                 let curTabNo = parseInt(tab.name)
-                this.tableData = this.totalWinRateData[curTabNo]
+                this.tableData = [...this.totalWinRateData[curTabNo]]
                 this.tableFlag = curTabNo
+           
             },
             handleColumn(jsonTxT) {
                 let tempColumnTitle = []
                 let tempObj = {
-                    label: '卡组种类',
-                    prop: '卡组种类',
+                    label: this.builtInColumnTitle.deckType,
+                    prop: this.builtInColumnTitle.deckType,
                     key: 0
                 }
+                tempObj['resizable'] = false
                 tempObj['sortable'] = false
                 tempColumnTitle.push(tempObj)
                 for (let index = 0; index < 10; index++) {
                     const element = jsonTxT[index].deckb;
-                    let tempColumn = {
+                     tempObj = {
                         label: element,
                         prop: element,
                         key: index + 1
                     }
-                    tempColumn['sortable'] = true
-                    tempColumnTitle.push(tempColumn)
+                    tempObj['resizable'] = false
+                    tempObj['sortable'] = 'custom'
+                    tempColumnTitle.push(tempObj)
                     this.winRateColumnTitle.push(element)
                 }
                 tempObj = {
-                    label: '均胜率',
-                    prop: '均胜率',
+                    label: this.builtInColumnTitle.avgWinRate,
+                    prop: this.builtInColumnTitle.avgWinRate,
                     key: 11
                 }
-                tempObj['sortable'] = true
+                tempObj['resizable'] = false
+                tempObj['sortable'] = 'custom'
                 tempColumnTitle.push(tempObj)
                 this.tableHead = tempColumnTitle
                 for (let x = 0; x < 3; x++) {
                     let tempRowList = []
                     for (let j = 0; j < 10; j++) {
                         let tempRow = {}
-                        tempRow['卡组种类'] = tempColumnTitle[j + 1].label
+                        tempRow[this.builtInColumnTitle.deckType] = tempColumnTitle[j + 1].label
                         let avgRowRateList = []
                         for (let i = 0; i < 10; i++) {
                             let secondStrikeJson = jsonTxT[10 * i + j]
@@ -247,7 +286,7 @@
                             tempRow[tempColumnTitle[i + 1].label] = tempWinRate[x]
                             avgRowRateList.push(tempWinRate[x])
                         }
-                        tempRow['均胜率'] = (Math.round((avgRowRateList.reduce((prev, current, index, avgRowRateList) => {
+                        tempRow[this.builtInColumnTitle.avgWinRate] = (Math.round((avgRowRateList.reduce((prev, current, index, avgRowRateList) => {
                             return prev + current
                         }) / 10 * 100)) / 100)
                         tempRowList.push(tempRow)
@@ -255,7 +294,9 @@
                     tempRowList.push()
                     this.totalWinRateData.push(tempRowList)
                 }
-                this.tableData = this.totalWinRateData[0]
+                this.tableData = [...this.totalWinRateData[0]]//包含三种场次的数据
+                
+                
             }
         },
         //生命周期 - 创建完成（可以访问当前this实例）
@@ -330,6 +371,9 @@
         background: #409eff;
 
     }
+    .winRateContent .el-tabs__nav-wrap::after {
+    background-color: black;
+    }
 
     .el-table,
     .el-table__expanded-cell {