Merge branch 'ranking_icon' into 'master'

Add select effect for ranking item & fix minor bugs

See merge request !17

src/assets/darkModelCss/darkStyleMix.css

@@ -34,20 +34,55 @@ color: white;
 background-color: #1D252F;
 
 }
+
+/* tab-img是卡片排行对应不同卡片分类的按钮 */
 .tab-img {
-height: 93px;
-width: 156px;
+  height: 92px;
+  width: 153px;
+}
+.tab-img { background-color: #1D252F;}
+.tab-img { background-color: #1a4861;}
+
+.nav-tabs > li > a {
+  /* use your comfortable desktop padding */
+  padding: 8px 14px;             /* bigger than mobile */
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 3px solid transparent; /* reserves space; no jumping */
+}
+
+/* Active state */
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+  border-color: #1a4861;
+  background-color: #161b22;
+}
+
+/* 给被选中的卡片排行按钮加亮，来让用户知道选了啥 */
+.nav-tabs > li.active > a {
+  border: 3px solid #1a4861 !important;
+  border-radius: 1px;
 }
 
 /* 收缩页面边框 白色 */
  .table-responsive {
-
-border: 0px solid transparent!important;
-/* overflow: hidden!important; */
+  border: 0px solid transparent!important;
+  /* overflow: hidden!important; */
 } 
 
+@media (max-width: 768px) {
+  .table-responsive table td:first-child,
+  .table-responsive table th:first-child {
+    width: 3%;   /* adjust as needed */
+    white-space: nowrap;
+  }
+}
+
+
 .search-form div.input-group-addon {
-background: #1D252F;
+background: #476992;
 color: #80A3BD;
 border-bottom-left-radius: 2px;
 border-top-left-radius: 2px;
@@ -262,8 +297,7 @@ color:white;
 
 background-color: #161b22;
 }
-.tab-img { background-color: #1D252F;}
-.tab-img { background-color: #1a4861;}
+
 /* 用户名点击链接 */
 a {
   color: #409eff; 
@@ -289,4 +323,46 @@ color: #e5e5e5;
   background-color: transparent;
   color: #409eff;
 
-  }
+  }
\ No newline at end of file
+
+/* Mobile: 2 tab buttons per row 卡片排名页面手机端 一行俩按钮*/
+@media (max-width: 768px) {
+  /* turn the tab list into a wrapping flex row */
+  .nav-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between; /* spreads pairs nicely */
+    border-bottom: 1px solid black; /* keep your existing border */
+  }
+
+  /* kill Bootstrap's float on mobile and make each li half width */
+  .nav-tabs > li {
+    float: none;              /* override Bootstrap float */
+    flex: 0 0 50%;            /* 2 per row */
+    max-width: 50%;
+    text-align: center;
+    margin: 0 0 20px 0;
+    box-sizing: border-box;
+  }
+
+  /* make the clickable area fill its half, reduce padding so images fit */
+  .nav-tabs > li > a {
+    padding: 4px 6px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 3px solid transparent;    
+  }
+
+
+  /* override your fixed desktop size (156x93) with smaller, fluid size */
+  .nav-tabs > li > a > .tab-img {
+    width: 100%;
+    height: auto;
+    max-width: 120px;
+    max-height: 72px;
+    display: block;
+    margin: 0 auto;
+  }
+}
+

src/components/Cards.vue

@@ -229,6 +229,7 @@ export default {
         this.init(lang)
     },
     mounted: function () {
+        this.preloadTabImages();
         this.init2();
     },
     data() {
@@ -297,10 +298,20 @@ export default {
             this.activeTab = tab;
             $(".input-sm").attr("placeholder", placeholder[tab]);
         },
+        preloadTabImages() {
+            const imgs = []
+            Object.values(this.tabImages).forEach(({A, B}) => {
+            [A, B].forEach(src => {
+                const im = new Image()
+                im.src = src
+                imgs.push(im)
+            })
+            })
+            // Keep a reference so GC doesn’t drop them immediately
+            this._preloaded = imgs
+        },
         getTabImage(tab) {
-            return this.activeTab === tab
-            ? this.tabImages[tab].B
-            : this.tabImages[tab].A;
+            return this.activeTab === tab ? this.tabImages[tab].B : this.tabImages[tab].A
         },
 
         init: function (lang) {
@@ -521,10 +532,6 @@ export default {
 </script>
 
 <style scoped>
-#deck {
-    margin-top: 20px !important;
-    border: 1px solid black;
-}
 
 </style>