Skip to content

Y
Ygopro Arena Web
Commit 76ec88ce authored by GaiaXalter's avatar GaiaXalter 💬
Browse files
Options

决斗数据库 卡组胜率:1.禁用table拖拽 2.排序着色功能 3.多页面暗黑模式样式调整

parent 9a8c3b03
Expand all Show whitespace changes
Inline Side-by-side
Showing with 417 additions and 206 deletions
src/assets/darkModelCss/darkStyleMix.css
View file @ 76ec88ce
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
{
background-color: #1a4861;
border: 3px solid #161b22;
background-color: #1a4861;
border: 3px solid #161b22;
}
.nav-tabs {
border-bottom: 1px solid black;
border-bottom: 1px solid black;
}
.well
{
.well
{
background-color: #1a4861;
background-color: #1a4861;
border:none;
}
border:none;
}
.input-group-addon
{
color: white;
background-color: #161b22;
border: 1px solid black;
color: white;
background-color: #161b22;
border: 1px solid black;
}
.form-control
{
.form-control
{
border: 2px solid black;
color: white;
background-color: #1D252F;
border: 1px solid black;
color: white;
background-color: #283044;
}
.tab-img {
height: 72px;
width: 120px;
}
.table-responsive {
border: 0px solid transparent!important;
overflow: hidden!important;
}
.search-form div.input-group-addon {
background: #1D252F;
color: #80A3BD;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border: 1px solid #b6c3cd;
border-right: 0;
}
.search-form div.input-group-addon {
background: #1a4861;
color: #80A3BD;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
border: 2px solid black
;
border-right: 1px solid black;
}
.search-form .input-group input {
background-color: #1D252F;
box-shadow: none;
color: white;
outline: none;
border: 2px solid black;
border-right: 0;
border-left: 0;
}
.search-form div.input-group-btn button {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
background: #1a4861;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
color: #ffffff;
border: 1px solid black;
outline: none;
opacity: 0.9;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 22px;
line-height: 1.42857143;
background-color: #1D252F;
border: 1px solid black;
border-radius: 4px;
color:white;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
.thumbnail .caption {
padding: 9px;
color: white;
}
.panel-default>.panel-heading {
color:white;
background-color: #1a4861;
border-color: #dddddd;
}
.table-striped>tbody>tr:nth-of-type(odd){
background-color: #1D252F;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: white;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
background-color: #1a4861;
border: 1px solid #161b22;
}
}
.tab-img {
height: 72px;
width: 120px;
}
.table-responsive {
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #161b22;
}
.nav-tabs>li>a:hover {
border-color: #161b22 #161b22 #161b22;
}
a:hover, a:focus {
color: white;
text-decoration: underline;
}
.panel-default {
border: 2px solid black;
background-color: #1b2738;
}
.panel-default>.panel-heading {
color: #fff;
background-color: #1a4861;
border-color: #000;
}
tbody {
border-color: #000;
}
.panel>.table-responsive>.table-bordered {
border-color: #000;
}
.pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus,
.pagination>.active>span:focus{
z-index: 3;
color: #fff;
background-color: #1a4861;
border-color: #1a4861;
cursor: default;
}
.pagination>.active>a, .pagination>.active>span {
z-index: 3;
color: #fff;
background-color: #1a4861;
border-color: #1a4861;
cursor: default;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
z-index: 2;
color: #fff;
background-color: #0B202B;
border-color: #3AB6BA;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 8px px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #333;
background-color: #fff;
border: 1px solid black;
margin-left: -1px;
}
.pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
color: black;
background-color: #1D252F;
border-color: #1D252F;
border:1px solid black;
cursor: not-allowed;
}
.pagination>li>a, .pagination>li>span {
color: #fff;
background-color: #181D24;
border: 1px solid black;
}
#entertain_rank{
overflow:hidden;
}
thead {
background-color: #1a4861;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 16px;
text-align: left;
background-color: #283044;
border: 1px solid black;
border: 1px solid black;
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: white;
white-space: nowrap;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
text-decoration: none;
color: #fff;
background-color: #1a4861;
}
.dropdown-menu .divider {
height: 1px;
margin: 10px 0;
overflow: hidden;
background-color: #e5e5e5;
}
\ No newline at end of file
src/components/Cards.vue
View file @ 76ec88ce
This diff is collapsed.
src/components/Download.vue
View file @ 76ec88ce
......@@ -2,7 +2,7 @@
<div class="team-boxed">
<div class="container">
<div class="intro">
<h2 class="text-center">{{lang.downloadPage.welcome}} </h2>
<h2 id='downLoadWelcome' class="text-center">{{lang.downloadPage.welcome}} </h2>
<p class="text-center"><strong>{{lang.downloadPage.desc}}</strong> </p>
</div>
<div class="row people">
......@@ -42,22 +42,20 @@
<script>
import querystring from 'querystring';
import API from '../api'
import { mapGetters } from 'vuex'
import {
mapGetters
} from 'vuex'
import "../assets/css/Team-Boxed.css"
import "../assets/css/Team-Clean.css"
export default {
data() {
return {
downloadUrls: {},
}
},
created: function () {
created: function() {
// https://wudizhanche.mycard.moe/download?platform=win32
// https://wudizhanche.mycard.moe/download?platform=darwin
var self = this
self.downloadUrls['windows'] = "https://mycard.moe"
self.downloadUrls['mac'] = "https://mycard.moe"
......@@ -84,39 +82,53 @@
}),
},
watch: {
lang: function (val) {
lang: function(val) {
this.initLang()
},
},
events: {
'lang-change': function (lang) {
'lang-change': function(lang) {
this.initLang(lang)
}
},
methods: {
initLang: function (lang) {
},
gogo: function (url) {
initLang: function(lang) {},
gogo: function(url) {
// window.open(url)
window.location.href = this.downloadUrls[url]
}
},
}
</script>
<style scoped>
#downLoadWelcome {color: white;}
.team-boxed {
color: #313437;
background-color: #ffffff;
color: white;
background-color: #1b2738;
}
.item1 {
cursor: pointer;
}
.box {
background-color: red;
}
.team-boxed .item1 .box {
text-align: center;
padding: 30px;
background-color: #1b2738;
margin-bottom: 30px;
}
.team-boxed .item1 {
text-align:center;
box-shadow:10px 10px 15px #1b2738;
}
.team-boxed .item1 {
text-align: center;
box-shadow: 10px 10px 35px black;
}
</style>
\ No newline at end of file
src/components/Index.vue
View file @ 76ec88ce
......@@ -62,12 +62,12 @@
</template>
<script>
import querystring from 'querystring';
import image from '../assets/img/banner.jpg'
import image3 from '../assets/img/image3.jpg'
import { mapGetters } from 'vuex'
import API from '../api'
/* import "../assets/darkModelCss/darkMix.css" */
import "../assets/darkModelCss/darkStyleMix.css"
export default {
data() {
return {
......
src/components/Rates.vue
View file @ 76ec88ce
......@@ -29,7 +29,7 @@
:cell-style="csMonitor" @sort-change='sortChange'>
<el-table-column v-for="item in tableHead" :key="item.key" :label='item.label'
:property='item.prop' :sortable="item.sortable" :render-header="labelFunction">
:property='item.prop' :sortable="item.sortable" :resizable="item.resizable" :render-header="labelFunction">
<template slot-scope="scope">
<div>{{item.key== 0 ? scope.row[item.label]: scope.row[item.label]+'%'}}
......@@ -54,12 +54,14 @@
//例如：import 《组件名称》 from '《组件路径》';
import API from '../api';
const winRateButtonText = ['先攻胜率', '后攻胜率', '综合胜率']
const builtInColumnTitle = {deckType:'卡组种类', avgWinRate:'均胜率'}
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
builtInColumnTitle,
tableChangeCount: 0,
winRateColumnTitle: [],
winRateButtonDefault: '0',
......@@ -100,7 +102,37 @@
return label;
},
sortChange(para) {
this.tableOrder = para.order
let curChangeColName = para.prop //排序列名
this.tableOrder = para.order//排序方式
let tempOrderTable = [...this.tableData]
tempOrderTable = this.tableBubbleSort(curChangeColName, tempOrderTable)
this.tableData=tempOrderTable
},
tableBubbleSort(OrderKey, curTable) {
let arr=curTable
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
let curOrderItem=arr[j][OrderKey]
let curOrderNextItem=arr[j+1][OrderKey]
if (curOrderItem < curOrderNextItem) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
}//降序
if ( this.tableOrder=='ascending') {
curTable=curTable.reverse()
}
if ( this.tableOrder==null) {
curTable= [...this.totalWinRateData[this.tableFlag]]
}
return [...curTable]
},
toPoint(percent) {
percent = percent + ''
......@@ -175,10 +207,13 @@
tempCellCss["font-weight"] = 'bold'
}
}
if (this.tableOrder == null) {
let tempLabel = cell.column.label
let tempContent = this.winRateColumnTitle[cell.rowIndex]
let tempLabel = cell.column.label//当前格子的列名
let tempContent = this.tableData[cell.rowIndex][this.builtInColumnTitle.deckType]//当前格子的行名
if (tempLabel == tempContent) {
{
if (this.tableFlag == '2') {
tempCellCss["color"] = '#39485C'
......@@ -186,47 +221,51 @@
tempCellCss["background-color"] = '#141A21' //胜率50的斜线
}
}
}
return tempCellCss
},
showClickWinRate(tab, event) {
let curTabNo = parseInt(tab.name)
this.tableData = this.totalWinRateData[curTabNo]
this.tableData = [...this.totalWinRateData[curTabNo]]
this.tableFlag = curTabNo
},
handleColumn(jsonTxT) {
let tempColumnTitle = []
let tempObj = {
label: '卡组种类',
prop: '卡组种类',
label: this.builtInColumnTitle.deckType,
prop: this.builtInColumnTitle.deckType,
key: 0
}
tempObj['resizable'] = false
tempObj['sortable'] = false
tempColumnTitle.push(tempObj)
for (let index = 0; index < 10; index++) {
const element = jsonTxT[index].deckb;
let tempColumn = {
tempObj = {
label: element,
prop: element,
key: index + 1
}
tempColumn['sortable'] = true
tempColumnTitle.push(tempColumn)
tempObj['resizable'] = false
tempObj['sortable'] = 'custom'
tempColumnTitle.push(tempObj)
this.winRateColumnTitle.push(element)
}
tempObj = {
label: '均胜率',
prop: '均胜率',
label: this.builtInColumnTitle.avgWinRate,
prop: this.builtInColumnTitle.avgWinRate,
key: 11
}
tempObj['sortable'] = true
tempObj['resizable'] = false
tempObj['sortable'] = 'custom'
tempColumnTitle.push(tempObj)
this.tableHead = tempColumnTitle
for (let x = 0; x < 3; x++) {
let tempRowList = []
for (let j = 0; j < 10; j++) {
let tempRow = {}
tempRow['卡组种类'] = tempColumnTitle[j + 1].label
tempRow[this.builtInColumnTitle.deckType] = tempColumnTitle[j + 1].label
let avgRowRateList = []
for (let i = 0; i < 10; i++) {
let secondStrikeJson = jsonTxT[10 * i + j]
......@@ -247,7 +286,7 @@
tempRow[tempColumnTitle[i + 1].label] = tempWinRate[x]
avgRowRateList.push(tempWinRate[x])
}
tempRow['均胜率'] = (Math.round((avgRowRateList.reduce((prev, current, index, avgRowRateList) => {
tempRow[this.builtInColumnTitle.avgWinRate] = (Math.round((avgRowRateList.reduce((prev, current, index, avgRowRateList) => {
return prev + current
}) / 10 * 100)) / 100)
tempRowList.push(tempRow)
......@@ -255,7 +294,9 @@
tempRowList.push()
this.totalWinRateData.push(tempRowList)
}
this.tableData = this.totalWinRateData[0]
this.tableData = [...this.totalWinRateData[0]]//包含三种场次的数据
}
},
//生命周期 - 创建完成（可以访问当前this实例）
......@@ -330,6 +371,9 @@
background: #409eff;
}
.winRateContent .el-tabs__nav-wrap::after {
background-color: black;
}
.el-table,
.el-table__expanded-cell {
......
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