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;
}
.tab-img {
height: 72px;
width: 120px;
height: 93px;
width: 156px;
}
/* 收缩页面边框 白色 */
......
src/components/Cards.vue
View file @ 3774601a
......@@ -66,37 +66,42 @@
<div>
<ul class="nav nav-tabs">
<li :class="{ active: isActive }" v-if="isActive">
<a href="#tab-0" role="tab" data-toggle="tab" @click='navClick("Deck")'><img class="tab-img"
:src="img0"></a>
</li>
<li :class="{ active: !isActive }">
<a href="#tab-1" role="tab" data-toggle="tab" @click='navClick("Monster")'><img class="tab-img"
:src="img1"></a>
</li>
<li>
<a href="#tab-2" role="tab" data-toggle="tab" @click='navClick("Spell")'><img class="tab-img"
:src="img2"></a>
</li>
<li>
<a href="#tab-3" role="tab" data-toggle="tab" @click='navClick("Trap")'><img class="tab-img"
:src="img3"></a>
</li>
<li>
<a href="#tab-4" role="tab" data-toggle="tab" @click='navClick("Side")'><img class="tab-img"
:src="img4"></a>
</li>
<li>
<a href="#tab-5" role="tab" data-toggle="tab" @click='navClick("Extra")'><img class="tab-img"
:src="img5"></a>
</li>
<li :class="{ active: activeTab === 'Deck' }">
<a href="#tab-0" role="tab" data-toggle="tab" @click="setActive('Deck')">
<img class="tab-img" :src="getTabImage('Deck')" />
</a>
</li>
<li :class="{ active: activeTab === 'Monster' }">
<a href="#tab-1" role="tab" data-toggle="tab" @click="setActive('Monster')">
<img class="tab-img" :src="getTabImage('Monster')" />
</a>
</li>
<li :class="{ active: activeTab === 'Spell' }">
<a href="#tab-2" role="tab" data-toggle="tab" @click="setActive('Spell')">
<img class="tab-img" :src="getTabImage('Spell')" />
</a>
</li>
<li :class="{ active: activeTab === 'Trap' }">
<a href="#tab-3" role="tab" data-toggle="tab" @click="setActive('Trap')">
<img class="tab-img" :src="getTabImage('Trap')" />
</a>
</li>
<li :class="{ active: activeTab === 'Side' }">
<a href="#tab-4" role="tab" data-toggle="tab" @click="setActive('Side')">
<img class="tab-img" :src="getTabImage('Side')" />
</a>
</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>
<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: activeTab === 'Deck' }" v-show="activeTab === 'Deck'" 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"
......@@ -104,7 +109,7 @@
</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>
<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"
......@@ -112,7 +117,7 @@
</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>
<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"
......@@ -120,7 +125,7 @@
</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>
<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"
......@@ -128,7 +133,7 @@
</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>
<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"
......@@ -136,7 +141,7 @@
</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>
<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"
......@@ -168,16 +173,23 @@ import {
mapGetters
} from 'vuex'
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 img5 from '../assets/img/ExtraWithBorder.png'
import extra1 from '../assets/img/extra1.png'
import extra2 from '../assets/img/extra2.png'
var dt = require('datatables.net')
var dt2 = require('datatables.net-bs')
......@@ -223,14 +235,16 @@ export default {
return {
totalDeck: 0,
type: "",
isActive: true,
activeTab: 'Deck', // default selected tab
width: "100%",
img0: img0,
img1: img1,
img2: img2,
img3: img3,
img4: img4,
img5: img5,
tabImages: {
Deck: { A: deck1, B: deck2 },
Monster: { A: monster1, B: monster2 },
Spell: { A: spell1, B: spell2 },
Trap: { A: trap1, B: trap2 },
Side: { A: side1, B: side2 },
Extra: { A: extra1, B: extra2 },
},
}
},
computed: {
......@@ -273,12 +287,22 @@ export default {
// var selectedType = $("#type").val();
// return periodMap[selectedType] || 1;
// },
navClick(tab) {
this.activeTab = tab;
$(".input-sm").attr("placeholder", placeholder[tab]);
},
navClick(data) {
// console.log('%c ---------------------src' + '\\' + 'components' + '\\' + 'Cards.vue---------------------%c:238', 'background:#f034c6', 'background:#14f1a4',
// data)
$(".input-sm").attr("placeholder", placeholder[data])
setActive(tab) {
this.activeTab = tab;
$(".input-sm").attr("placeholder", placeholder[tab]);
},
getTabImage(tab) {
return this.activeTab === tab
? this.tabImages[tab].B
: this.tabImages[tab].A;
},
init: function (lang) {
if (lang === "cn") {
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