Skip to content

Y
Ygopro Arena Web
Commit 783257f4 authored by Tang Xinwei's avatar Tang Xinwei
Browse files
Options

Merge branch 'ranking_icon' into 'master' 

Updating Card Ranking page icon

See merge request !16
parents e16e97c9 e290fc27
Pipeline #40248 passed with stages
      in 1 minute and 29 seconds
      Hide whitespace changes
      Inline Side-by-side
      Showing with 82 additions and 54 deletions
      src/assets/darkModelCss/darkStyleMix.css
      View file @ 783257f4
      ...@@ -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 @ 783257f4
      ...@@ -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;
      ......
      src/components/Footads.vue
      View file @ 783257f4
      ...@@ -94,6 +94,7 @@ ...@@ -94,6 +94,7 @@
      .ads { .ads {
      text-align: center; text-align: center;
      cursor: pointer;
      padding: 25%; padding: 25%;
      /*padding-left: 200px; /*padding-left: 200px;
      padding-right: 200px; padding-right: 200px;
      ......
      src/components/Rates.vue
      View file @ 783257f4
      ...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
      <!-- <div id="winRateTitle-2">更新:在每个月<div class="winRateTitle-color-3">20日</div>之前，胜率为<div <!-- <div id="winRateTitle-2">更新:在每个月<div class="winRateTitle-color-3">20日</div>之前，胜率为<div
      class="winRateTitle-color-3">上月胜率</div>。在每个月<div class="winRateTitle-color-3">20日</div> class="winRateTitle-color-3">上月胜率</div>。在每个月<div class="winRateTitle-color-3">20日</div>
      以及之后，胜率为<div class="winRateTitle-color-3">当月胜率</div> </div>--> 以及之后，胜率为<div class="winRateTitle-color-3">当月胜率</div> </div>-->
      <div id="winRateTitle-2">更新:<div class="winRateTitle-color-3">每天更新,当月胜率</div></div> <div id="winRateTitle-2">更新:<div class="winRateTitle-color-3">每天更新,当月胜率。所以月初胜率参考价值低。</div></div>
      </div> </div>
      <div class='winRateContent'> <div class='winRateContent'>
      <div class='winRateContent-Tabs'> <div class='winRateContent-Tabs'>
      ...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
      <div class='winRateFooter'>查看线上各卡组与单卡使用数据请进入<a class="winRateTitle-color-4" <div class='winRateFooter'>查看线上各卡组与单卡使用数据请进入<a class="winRateTitle-color-4"
      href="#/cards">【卡片排行】</a></div> href="#/cards">【卡片排行】</a></div>
      </div> </div>
      <Footads></Footads>
      </div> </div>
      </div> </div>
      </div> </div>
      ...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
      //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
      //例如：import 《组件名称》 from '《组件路径》'; //例如：import 《组件名称》 from '《组件路径》';
      import API from '../api'; import API from '../api';
      import Footads from './Footads'
      const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率'] const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率']
      const builtInColumnTitle = { const builtInColumnTitle = {
      deckType: '卡组种类', deckType: '卡组种类',
      ...@@ -61,7 +62,9 @@ ...@@ -61,7 +62,9 @@
      } }
      export default { export default {
      //import引入的组件需要注入到对象中才能使用 //import引入的组件需要注入到对象中才能使用
      components: {}, components: {
      Footads
      },
      data() { data() {
      //这里存放数据 //这里存放数据
      return { return {
      ......
      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