决斗数据库 暗黑版

src/components/Cards.vue

@@ -431,8 +431,47 @@
 
 
 <style scoped>
+    .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
+{
+    background-color: #1a4861;
+    border: 3px solid #161b22;
+
+
+}
+
+.nav-tabs {
+    border-bottom: 1px solid black;
+}
+
+  .well
+  {
+
+    background-color: #1a4861;
+
+    border:none;
+  }
+.input-group-addon
+{
+  color: white;
+  background-color: #161b22;
+  border: 1px solid black;
+}
+
+
+  .form-control
+  {
+
+    border: 1px solid black;
+    color: white;
+    background-color: #283044;
+
+  }
     .tab-img {
         height: 72px;
         width: 120px;
     }
+    .table-responsive {
+
+    border: 1px solid black;
+}
 </style>

src/components/PageHeader.vue

@@ -6,16 +6,33 @@
         <!--<nav class="navbar navbar-inverse">-->
         <div class="container">
           <div class="navbar-header">
-            <a class="navbar-brand navbar-link" href="index.html"><img src="../assets/img/mycardlogo.png" id="logo">{{lang.database}} </a>
-            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
+            <a class="navbar-brand navbar-link" href="index.html"><img src="../assets/img/mycardlogo.png" id="logo">MyCard
+            </a>
+            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span
+              class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span
+              class="icon-bar"></span></button>
           </div>
           <div class="collapse navbar-collapse" id="navcol-1">
             <ul class="nav navbar-nav navbar-right">
-              <li role="presentation"><a href="#/ranking">{{lang.rank}} </a></li>
-              <li role="presentation"><a href="#/cards">{{lang.card_rank}} </a></li>
-
               <li role="presentation"><a href="https://ygobbs.com/" target="_blank">{{lang.forum}} </a></li>
-              <li role="presentation"><a href="https://event.ygobbs.com" target="_blank">{{lang.race}} </a></li>
+
+
+              <li role="presentation"><a href="https://shop387046095.taobao.com/?spm=2013.1.1000126.2.61a97e3emY0JZB">{{lang.shop}} </a>
+              </li>
+              <li class="dropdown">
+                <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
+                  {{lang.database}} <span class="caret"></span></a>
+                <ul class="dropdown-menu" role="menu">
+                  <li role="presentation"><a href="#/ranking">{{lang.rank}} </a></li>
+                  <li role="presentation"><a href="#/cards">{{lang.card_rank}} </a></li>
+
+                </ul>
+              </li>
+
+
+              <li role="presentation"><a href=" https://event.ygobbs.com">{{lang.race}} </a></li>
+
+              <li role="presentation"><a href="#/download">{{lang.download}} </a></li>
 
               <li class="dropdown">
                 <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
@@ -23,12 +40,13 @@
                 <ul class="dropdown-menu" role="menu">
                   <li role="presentation"><a href="#/deckprint">{{lang.deckprint}} </a></li>
                   <li role="presentation"><a href="#/tabulate">{{lang.tabulate}} </a></li>
-                  <li role="presentation"><a href="https://rep.ygobbs.com" target="_blank">{{lang.battlelog}} </a></li>
+                  <li role="presentation"><a href="https://rep.ygobbs.com">{{lang.battlelog}} </a></li>
                 </ul>
               </li>
 
               <li v-if="user.isLogin" class="dropdown">
-                <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#"><img v-bind:src="user.avatar_url" id="head-portrait">{{user.username}} <span class="caret"></span></a>
+                <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#"><img
+                  v-bind:src="user.avatar_url" id="head-portrait">{{user.username}} <span class="caret"></span></a>
                 <ul class="dropdown-menu" role="menu">
                   <li role="presentation"><a href="#/profile">{{lang.profile}} </a></li>
                   <li role="presentation"><a href="https://accounts.moecube.com/profiles">{{lang.account}} </a></li>
@@ -36,7 +54,7 @@
                   <li role="presentation"><a @click.prevent="logout" href="#">{{lang.signout}} </a></li>
                 </ul>
               </li>
-              
+
               <li v-else role="presentation"><a @click.prevent="login" href="#">{{lang.signin}} </a></li>
               <li class="dropdown">
                 <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
@@ -54,12 +72,12 @@
     <!--<other-component></other-component>-->
 
 
-
     <!-- Form -->
 
     <el-dialog title="MCPRO服务改进调查" v-if="!(voteObj.multiple)" :visible.sync="dialogFormVisible" :size='size'>
 
-      <div class="voteTitle">{{ voteObj.title }} </div><br>
+      <div class="voteTitle">{{ voteObj.title }}</div>
+      <br>
 
       <el-form :model="form">
 
@@ -82,7 +100,8 @@
 
     <el-dialog title="MCPRO服务改进调查" v-if="voteObj.multiple" :visible.sync="dialogFormVisible" :size='size'>
 
-      <div class="voteTitle">{{ voteObj.title }} （最多选{{voteObj.max}}项）</div><br>
+      <div class="voteTitle">{{ voteObj.title }} （最多选{{voteObj.max}}项）</div>
+      <br>
 
       <el-form :model="form">
 
@@ -101,13 +120,15 @@
 
     <div id="ads" style="display: none;position: relative;">
       <div @click="adClick">
-        <div v-if="autoClose" style="text-align: center;position: absolute;width:20px;height: 20px;margin-top: 0px; float: right;background-color: red">{{timer}}</div>
+        <div v-if="autoClose"
+             style="text-align: center;position: absolute;width:20px;height: 20px;margin-top: 0px; float: right;background-color: red">
+          {{timer}}
+        </div>
         <img v-bind:style="{ height: 'auto',  width: width  }" v-bind:src="adObj.src">
       </div>
     </div>
 
 
-
   </div>
 </template>
 
@@ -116,7 +137,7 @@
   import crypto from 'crypto';
 
   import language from './lang';
-  import { mapGetters } from 'vuex'
+  import {mapGetters} from 'vuex'
   import API from '../api'
   import moment from 'moment'
 
@@ -136,9 +157,7 @@
           multiple: false,
           options: []
         },
-        adObj: {
-
-        },
+        adObj: {},
         autoClose: false,
         size: 'small',
         dialogFormVisible: false,
@@ -160,7 +179,6 @@
       this.init()
 
 
-
       var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
       if (regex_match.exec(navigator.userAgent)) {
         this.isMobile = true
@@ -178,7 +196,6 @@
       }
 
 
-
       // var voteTime = localStorage.getItem('voteTime');
       // if (voteTime) {
       //   var today = moment().format('YYYY-MM-DD')
@@ -198,7 +215,7 @@
       var time = 5000
 
       var _this = this
-      API.getAd({type:1}).then((res) => {
+      API.getAd({type: 1}).then((res) => {
         if (res.data.auto_close_ad && res.data.auto_close_ad === "true") {
           _this.autoClose = true
         }
@@ -265,13 +282,12 @@
       });
 
 
-
       if (!this.user.isLogin) {
         return;
       }
 
 
-      API.getVote({ user: this.user.id, username: this.user.username }).then((res) => {
+      API.getVote({user: this.user.id, username: this.user.username}).then((res) => {
         if (res.data.data && res.data.data !== "null") {
           this.voteObj = res.data.data
           this.voteObj.options = JSON.parse(this.voteObj.options)
@@ -290,21 +306,32 @@
 
               layer.open({
                 type: 1
-                , title: ''
-                , offset: 'b' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
-                , area: ['100%', 'auto']
-                , closeBtn: 0
-                , id: 'layerDemo'
+                ,
+                title: ''
+                ,
+                offset: 'b' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
+                ,
+                area: ['100%', 'auto']
+                ,
+                closeBtn: 0
+                ,
+                id: 'layerDemo'
                 // ,skin: 'demo-class'
-                , content: '<div style="padding: 20px;margin-bottom: -20px; text-align: center">' + '是否参与问卷调查? <br><p class="voteFoot">参与调查可以改善您游戏体验与获得EXP！</p> ' + '</div>'
-                , btn: ['投票Start!', '但是我拒绝!']
-                , btnAlign: 'c' //按钮居中
-                , shade: 0 //不显示遮罩
-                , yes: function () {
+                ,
+                content: '<div style="padding: 20px;margin-bottom: -20px; text-align: center">' + '是否参与问卷调查? <br><p class="voteFoot">参与调查可以改善您游戏体验与获得EXP！</p> ' + '</div>'
+                ,
+                btn: ['投票Start!', '但是我拒绝!']
+                ,
+                btnAlign: 'c' //按钮居中
+                ,
+                shade: 0 //不显示遮罩
+                ,
+                yes: function () {
                   layer.closeAll();
                   _this.dialogFormVisible = true;
                 }
-                , btn2: function () {
+                ,
+                btn2: function () {
                   console.log('拒绝！')
                 }
               });
@@ -324,16 +351,24 @@
 
               layer.open({
                 type: 1
-                , title: 'Hi, ' + _this.user.username
-                , offset: 'rb' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
+                ,
+                title: 'Hi, ' + _this.user.username
+                ,
+                offset: 'rb' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                 // , area: ['100%', 'auto']
-                , id: 'layerDemo'
+                ,
+                id: 'layerDemo'
                 // ,skin: 'demo-class'
-                , content: '<div style="padding: 20px;margin-bottom: -20px; text-align: center">' + '是否参与问卷调查? <br><p class="voteFoot">参与调查可以改善您游戏体验与获得EXP！</p> ' + '</div>'
-                , btn: '好的'
-                , btnAlign: 'c' //按钮居中
-                , shade: 0 //不显示遮罩
-                , yes: function () {
+                ,
+                content: '<div style="padding: 20px;margin-bottom: -20px; text-align: center">' + '是否参与问卷调查? <br><p class="voteFoot">参与调查可以改善您游戏体验与获得EXP！</p> ' + '</div>'
+                ,
+                btn: '好的'
+                ,
+                btnAlign: 'c' //按钮居中
+                ,
+                shade: 0 //不显示遮罩
+                ,
+                yes: function () {
                   layer.closeAll();
                   _this.dialogFormVisible = true;
                 }
@@ -343,15 +378,11 @@
         }
 
 
-
-
-
       }, (res) => {
         console.log(res)
       });
 
 
-
     },
 
     computed: {
@@ -364,7 +395,7 @@
 
       adClick: function () {
 
-        API.adClick({ id: this.adObj.id }).then((res) => {
+        API.adClick({id: this.adObj.id}).then((res) => {
 
         }, (res) => {
           console.log(res)
@@ -375,7 +406,7 @@
 
       adImpl: function () {
 
-        API.adImpl({ id: this.adObj.id }).then((res) => {
+        API.adImpl({id: this.adObj.id}).then((res) => {
 
         }, (res) => {
           console.log(res)
@@ -449,19 +480,19 @@
                 layer.closeAll();
                 //return false 开启该代码可禁止点击该按钮关闭
 
-                API.getVote({ user: _this.user.id, username: _this.user.username }).then((res) => {
+                API.getVote({user: _this.user.id, username: _this.user.username}).then((res) => {
                   if (res.data.data && res.data.data !== "null") {
                     _this.voteObj = res.data.data
                     _this.voteObj.options = JSON.parse(_this.voteObj.options)
                     _this.dialogFormVisible = true;
                   } else {
-                    API.getVote({ user: _this.user.id, username: _this.user.username }).then((res) => {
+                    API.getVote({user: _this.user.id, username: _this.user.username}).then((res) => {
                       if (res.data.data && res.data.data !== "null") {
                         _this.voteObj = res.data.data
                         _this.voteObj.options = JSON.parse(_this.voteObj.options)
                         _this.dialogFormVisible = true;
                       } else {
-                        API.getVote({ user: _this.user.id, username: _this.user.username }).then((res) => {
+                        API.getVote({user: _this.user.id, username: _this.user.username}).then((res) => {
                           if (res.data.data && res.data.data !== "null") {
                             _this.voteObj = res.data.data
                             _this.voteObj.options = JSON.parse(_this.voteObj.options)
@@ -507,19 +538,19 @@
                 layer.closeAll();
                 //return false 开启该代码可禁止点击该按钮关闭
 
-                API.getVote({ user: _this.user.id, username: _this.user.username }).then((res) => {
+                API.getVote({user: _this.user.id, username: _this.user.username}).then((res) => {
                   if (res.data.data && res.data.data !== "null") {
                     _this.voteObj = res.data.data
                     _this.voteObj.options = JSON.parse(_this.voteObj.options)
                     _this.dialogFormVisible = true;
                   } else {
-                    API.getVote({ user: _this.user.id, username: _this.user.username }).then((res) => {
+                    API.getVote({user: _this.user.id, username: _this.user.username}).then((res) => {
                       if (res.data.data && res.data.data !== "null") {
                         _this.voteObj = res.data.data
                         _this.voteObj.options = JSON.parse(_this.voteObj.options)
                         _this.dialogFormVisible = true;
                       } else {
-                        API.getVote({ user: _this.user.id, username: _this.user.username }).then((res) => {
+                        API.getVote({user: _this.user.id, username: _this.user.username}).then((res) => {
                           if (res.data.data && res.data.data !== "null") {
                             _this.voteObj = res.data.data
                             _this.voteObj.options = JSON.parse(_this.voteObj.options)
@@ -547,8 +578,6 @@
           }
 
 
-
-
           // localStorage.setItem('voteTime', moment().format('YYYY-MM-DD'));
         }, (res) => {
           console.log(res)
@@ -627,18 +656,19 @@
     margin-left: 20px;
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   }
-  
+
   .voteFoot {
     /*margin-left: 20px;*/
   }
-  
+
   .wrap {
     white-space: normal;
     width: 260px;
     /*word-break:break-all; width:100px; overflow:auto;*/
   }
+
   /*body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
 body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
 body .demo-class .layui-layer-btn a{background:#333;}
 body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}*/
-</style>
+</style>
\ No newline at end of file

src/components/lang.js

@@ -42,7 +42,7 @@ module.exports = {
     athleticDueHistory: '竞技场决斗记录',
     entertainDueHistory: '娱乐场决斗记录',
     tagInfo:'绿色表示获胜方，红色则表示掉线。',
-    
+
 
     exp_rank: 'EXP 排名',
     athletic_rank: 'D.P 排名',
@@ -52,7 +52,7 @@ module.exports = {
     all: '总场',
     ratio: '胜率',
     violation: '违规次数',
-
+    shop:"Merch❤",
     userRank: {
       expRank: 'EXP排名',
       pointRank: '竞技场排名',
@@ -91,17 +91,17 @@ module.exports = {
       attack: "攻击",
       defend:"防御"
     },
-    
+
     index: {
-      p1: 'MyCard是一款免费开源的游戏平台，支持着YGOPro，东方弹幕等游戏的联机。同时平台内也自带制作组自主研发的单机游戏。',
+      p1: 'MyCard是一款免费开源的游戏平台，支持着YGOPRO，东方弹幕等游戏的联机。同时平台内也自带制作组自主研发的单机游戏。',
       srartNow: 'START NOW!',
-      p2: '欢迎来到MCPro决斗数据库',
-      p3: '在这里你可以找到一切与MyCard中YGOPro决斗有关的数据。强力的决斗者离不开数据分析参考，请尽情使用这些数据变的更强吧！',
+      p2: '欢迎来到MyCard决斗数据库',
+      p3: '在这里你可以找到一切MyCard决斗有关的数据。强力的决斗者离不开数据分析参考，请尽情使用这些数据变的更强吧！',
 
       p4: '查看EXP与竞技场排行榜，你是否也是榜上有名的明星决斗者？',
       p5: '查看玩家详细资料，记录你的MyCard决斗生涯。',
       p6: '查看各卡片 / 卡组的使用状况，这个环境的主流是什么？',
-      p7: 'YGOPro战队联盟存放统计友谊赛战报的地方。',
+      p7: 'Ygopro战队联盟存放统计友谊赛战报的地方。',
       h1: '决斗排名',
       h2: '玩家信息',
       h3: '卡片排名',
@@ -115,7 +115,6 @@ module.exports = {
     lang: '语言',
     cn: '中文',
     en: 'English',
-    database: 'MCPro Database',
     forum: 'Forum',
     rank: 'User rank',
     battlelog: 'Battle log',
@@ -163,7 +162,8 @@ module.exports = {
     all: 'All',
     ratio: 'W/L',
     violation: 'Violation',
-
+    shop:"Merch❤",
+    database:"DataBase",
     userRank: {
       expRank: 'EXP Rank',
       pointRank: 'Athletic Rank',

static/assets/css/styles.css

@@ -89,3 +89,52 @@ body {
 }
 
 
+.table-striped > tbody > tr:nth-of-type(even) {
+  background-color: #283044;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: transparent;
+}
+
+body {
+  background-color: #1b2738;
+  color: #ebf5ee;
+}
+
+a {
+  color: #ebf5ee;
+}
+
+.table-bordered {
+  border: none;
+
+}
+
+.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
+  border: none;
+}
+
+thead {
+  background-color: #1a4861;
+}
+
+
+.navbar-inverse {
+  background-color: #161b22;
+  border-color: #dddddd;
+
+}
+.navbar-inverse .navbar-nav>li>a {
+  color: #bdbcba;
+}
+.navbar-inverse .navbar-link {
+  color: #FFFFFF;
+}
+.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {
+
+  color: #FFFFFF;
+}
+.navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
+  color: #FFFFFF!important;
+}