Skip to content

Y
Ygopro Arena Web
Commit 3774601a authored by Tang Xinwei's avatar Tang Xinwei
Browse files
Options

更换决斗数据库卡片排名页面的按钮

parent e16e97c9
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 51 deletions
src/assets/darkModelCss/darkStyleMix.css
View file @ 3774601a
...@@ -35,8 +35,8 @@ background-color: #1D252F; ...@@ -35,8 +35,8 @@ background-color: #1D252F;
} }
.tab-img { .tab-img {
height: 72px; height: 93px;
width: 120px; width: 156px;
} }
/* 收缩页面边框 白色 */ /* 收缩页面边框 白色 */
......
src/components/Cards.vue
View file @ 3774601a
...@@ -66,37 +66,42 @@ ...@@ -66,37 +66,42 @@
<div> <div>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li :class="{ active: activeTab === 'Deck' }">
<li :class="{ active: isActive }" v-if="isActive"> <a href="#tab-0" role="tab" data-toggle="tab" @click="setActive('Deck')">
<a href="#tab-0" role="tab" data-toggle="tab" @click='navClick("Deck")'><img class="tab-img" <img class="tab-img" :src="getTabImage('Deck')" />
:src="img0"></a> </a>
</li> </li>
<li :class="{ active: !isActive }"> <li :class="{ active: activeTab === 'Monster' }">
<a href="#tab-1" role="tab" data-toggle="tab" @click='navClick("Monster")'><img class="tab-img" <a href="#tab-1" role="tab" data-toggle="tab" @click="setActive('Monster')">
:src="img1"></a> <img class="tab-img" :src="getTabImage('Monster')" />
</li> </a>
<li> </li>
<a href="#tab-2" role="tab" data-toggle="tab" @click='navClick("Spell")'><img class="tab-img" <li :class="{ active: activeTab === 'Spell' }">
:src="img2"></a> <a href="#tab-2" role="tab" data-toggle="tab" @click="setActive('Spell')">
</li> <img class="tab-img" :src="getTabImage('Spell')" />
<li> </a>
<a href="#tab-3" role="tab" data-toggle="tab" @click='navClick("Trap")'><img class="tab-img" </li>
:src="img3"></a> <li :class="{ active: activeTab === 'Trap' }">
</li> <a href="#tab-3" role="tab" data-toggle="tab" @click="setActive('Trap')">
<li> <img class="tab-img" :src="getTabImage('Trap')" />
<a href="#tab-4" role="tab" data-toggle="tab" @click='navClick("Side")'><img class="tab-img" </a>
:src="img4"></a> </li>
</li> <li :class="{ active: activeTab === 'Side' }">
<li> <a href="#tab-4" role="tab" data-toggle="tab" @click="setActive('Side')">
<a href="#tab-5" role="tab" data-toggle="tab" @click='navClick("Extra")'><img class="tab-img" <img class="tab-img" :src="getTabImage('Side')" />
:src="img5"></a> </a>
</li> </li>
<li :class="{ active: activeTab === 'Extra' }">
<a href="#tab-5" role="tab" data-toggle="tab" @click="setActive('Extra')">
<img class="tab-img" :src="getTabImage('Extra')" />
</a>
</li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane" :class="{ active: isActive }" v-if="isActive" <div role="tabpanel" class="tab-pane" :class="{ active: activeTab === 'Deck' }" v-show="activeTab === 'Deck'" id="tab-0">
id="tab-0">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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" <table id="deck" class="table table-striped table-bordered table-hover example"
...@@ -104,7 +109,7 @@ ...@@ -104,7 +109,7 @@
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane" :class="{ active: !isActive }" id="tab-1"> <div role="tabpanel" class="tab-pane" :class="{ active: activeTab === 'Monster' }" v-show="activeTab === 'Monster'" id="tab-1">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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" <table id="monster" class="table table-striped table-bordered table-hover example"
...@@ -112,7 +117,7 @@ ...@@ -112,7 +117,7 @@
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane" id="tab-2"> <div role="tabpanel" class="tab-pane" :class="{ active: activeTab === 'Spell' }" v-show="activeTab === 'Spell'" id="tab-2">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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" <table id="spell" class="table table-striped table-bordered table-hover example"
...@@ -120,7 +125,7 @@ ...@@ -120,7 +125,7 @@
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane" id="tab-3"> <div role="tabpanel" class="tab-pane" :class="{ active: activeTab === 'Trap' }" v-show="activeTab === 'Trap'" id="tab-3">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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" <table id="trap" class="table table-striped table-bordered table-hover example"
...@@ -128,7 +133,7 @@ ...@@ -128,7 +133,7 @@
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane" id="tab-4"> <div role="tabpanel" class="tab-pane" :class="{ active: activeTab === 'Side' }" v-show="activeTab === 'Side'" id="tab-4">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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" <table id="side" class="table table-striped table-bordered table-hover example"
...@@ -136,7 +141,7 @@ ...@@ -136,7 +141,7 @@
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane" id="tab-5"> <div role="tabpanel" class="tab-pane" :class="{ active: activeTab === 'Extra' }" v-show="activeTab === 'Extra'" id="tab-5">
<br> <br>
<div class="table-responsive" style="width:100%;overflow-x:auto;overflow-y:hidden;"> <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" <table id="ex" class="table table-striped table-bordered table-hover example"
...@@ -168,16 +173,23 @@ import { ...@@ -168,16 +173,23 @@ import {
mapGetters mapGetters
} from 'vuex' } from 'vuex'
import API from '../api'; import API from '../api';
import img0 from '../assets/img/500x300_deck.png' import deck1 from '../assets/img/deck1.png'
import deck2 from '../assets/img/deck2.png'
import monster1 from '../assets/img/monster1.png'
import monster2 from '../assets/img/monster2.png'
import img1 from '../assets/img/500x300_monster.png' import spell1 from '../assets/img/spell1.png'
import spell2 from '../assets/img/spell2.png'
import img2 from '../assets/img/500x300_Spell.png' import trap1 from '../assets/img/trap1.png'
import trap2 from '../assets/img/trap2.png'
import img3 from '../assets/img/500x300_Trap.png' import side1 from '../assets/img/side1.png'
import side2 from '../assets/img/side2.png'
import img4 from '../assets/img/500x300_side.png' import extra1 from '../assets/img/extra1.png'
import img5 from '../assets/img/ExtraWithBorder.png' import extra2 from '../assets/img/extra2.png'
var dt = require('datatables.net') var dt = require('datatables.net')
var dt2 = require('datatables.net-bs') var dt2 = require('datatables.net-bs')
...@@ -223,14 +235,16 @@ export default { ...@@ -223,14 +235,16 @@ export default {
return { return {
totalDeck: 0, totalDeck: 0,
type: "", type: "",
isActive: true, activeTab: 'Deck', // default selected tab
width: "100%", width: "100%",
img0: img0, tabImages: {
img1: img1, Deck: { A: deck1, B: deck2 },
img2: img2, Monster: { A: monster1, B: monster2 },
img3: img3, Spell: { A: spell1, B: spell2 },
img4: img4, Trap: { A: trap1, B: trap2 },
img5: img5, Side: { A: side1, B: side2 },
Extra: { A: extra1, B: extra2 },
},
} }
}, },
computed: { computed: {
...@@ -273,12 +287,22 @@ export default { ...@@ -273,12 +287,22 @@ export default {
// var selectedType = $("#type").val(); // var selectedType = $("#type").val();
// return periodMap[selectedType] || 1; // return periodMap[selectedType] || 1;
// }, // },
navClick(tab) {
this.activeTab = tab;
$(".input-sm").attr("placeholder", placeholder[tab]);
},
navClick(data) { setActive(tab) {
// console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Cards.vue---------------------%c:238', 'background:#f034c6', 'background:#14f1a4', this.activeTab = tab;
// data) $(".input-sm").attr("placeholder", placeholder[tab]);
$(".input-sm").attr("placeholder", placeholder[data]) },
getTabImage(tab) {
return this.activeTab === tab
? this.tabImages[tab].B
: this.tabImages[tab].A;
}, },
init: function (lang) { init: function (lang) {
if (lang === "cn") { if (lang === "cn") {
this.isActive = true; this.isActive = true;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment