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;
      }
      .tab-img {
      height: 72px;
      width: 120px;
      height: 93px;
      width: 156px;
      }
      /* 收缩页面边框 白色 */
      ......
      src/components/Cards.vue
      View file @ 783257f4
      ......@@ -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;
      ......
      src/components/Footads.vue
      View file @ 783257f4
      ......@@ -94,6 +94,7 @@
      .ads {
      text-align: center;
      cursor: pointer;
      padding: 25%;
      /*padding-left: 200px;
      padding-right: 200px;
      ......
      src/components/Rates.vue
      View file @ 783257f4
      ......@@ -10,7 +10,7 @@
      <!-- <div id="winRateTitle-2">更新:在每个月<div class="winRateTitle-color-3">20日</div>之前，胜率为<div
      class="winRateTitle-color-3">上月胜率</div>。在每个月<div class="winRateTitle-color-3">20日</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 class='winRateContent'>
      <div class='winRateContent-Tabs'>
      ......@@ -44,7 +44,7 @@
      <div class='winRateFooter'>查看线上各卡组与单卡使用数据请进入<a class="winRateTitle-color-4"
      href="#/cards">【卡片排行】</a></div>
      </div>
      <Footads></Footads>
      </div>
      </div>
      </div>
      ......@@ -54,6 +54,7 @@
      //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
      //例如：import 《组件名称》 from '《组件路径》';
      import API from '../api';
      import Footads from './Footads'
      const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率']
      const builtInColumnTitle = {
      deckType: '卡组种类',
      ......@@ -61,7 +62,9 @@
      }
      export default {
      //import引入的组件需要注入到对象中才能使用
      components: {},
      components: {
      Footads
      },
      data() {
      //这里存放数据
      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