Skip to content

Commit

Permalink
fix:百战优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@fifthThirteen
fifthThirteen committed Aug 1, 2023
1 parent a529e93 commit adb4e79
Show file tree
Hide file tree
Showing 11 changed files with 124 additions and 43 deletions.
30 changes: 23 additions & 7 deletions src/assets/css/baizhan/baizhan.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,12 @@
width: 100%;
background-color: @baizhan_bg;
overflow: hidden;
padding: 0 20px;
height: calc(100vh - 113px);
padding: 15px 20px 0;
height: calc(100vh - 112px);

.m-baizhan-sidebar {
padding: 0;
top: calc(112px + 20px);
padding-left: 20px;
background-color: transparent;
border-right: none;
Expand All @@ -43,7 +44,8 @@
}
&:hover {
.c-sidebar-left-toggle {
.db;
// .db;
.none;
background-color: @baizhan_tab_bg;
border-color: @baizhan_tab_bg;
color: @baizhan_color;
Expand Down Expand Up @@ -94,23 +96,37 @@
background-color: @baizhan_bg;
border-right: none;
width: 292px;
height: calc(100vh - 64px - 48px - 32px);
height: calc(100vh - 125px);
background: #111827;
margin-right: 20px;
transition: 0.2s ease-in-out;
transform: translateX(0);
.r(10px);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.m-right-wrap {
.size(100%, 100%);
overflow-x: hidden;
overflow-y: auto;
.scrollbar(2px, #666);
}
.c-sidebar-right-toggle {
background-color: #101827;
border-color: #101827;
color: @baizhan_color;
}
.c-sidebar-right-toggle {
.none;
border-radius: 0;
}
&:hover {
.c-sidebar-right-toggle {
.db;
background-color: #101827;
border-color: #101827;
color: @baizhan_color;
}
}
&.is-no {
transform: translateX(calc(100% + 20px));
}
&.is-close {
transform: translateX(calc(100% + 20px));
.c-sidebar-right-toggle {
Expand Down
6 changes: 6 additions & 0 deletions src/assets/css/baizhan/main_tabs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@
color: @tab-text-color-active;
background-color: @tab-bg-active;
}
&.is-gray {
img,
.u-name {
opacity: 0.3;
}
}
}

.u-map-info {
Expand Down
14 changes: 14 additions & 0 deletions src/assets/css/baizhan/map.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,12 @@
}
}
&.is-info {
background-color: @baizhan_active !important;
color: @baizhan_map_select_color !important;
.u-name,
.u-index {
color: @baizhan_map_select_color;
}
.u-info-icon {
.db;
}
Expand Down Expand Up @@ -289,6 +295,14 @@
gap: 8px;
height: 150px;
color: @baizhan_map_color;
&.has-info {
.u-floor {
opacity: 0.2;
&.is-info {
opacity: 1;
}
}
}
&:nth-of-type(even) {
flex-direction: row-reverse;
.u-floor {
Expand Down
4 changes: 3 additions & 1 deletion src/assets/css/baizhan/map_filter.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@
position: relative;
overflow-x: hidden;
overflow-y: auto;
height: calc(100vh - 457px);
height: calc(100vh - 428px);
.scrollbar(2px, #666);
padding: 0 24px 20px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
.m-section-title {
.w(100%);
position: relative;
Expand Down
40 changes: 35 additions & 5 deletions src/assets/css/baizhan/map_level_info.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@
.u-header {
font-weight: 700;
}
.u-effect-desc {
height: 78px;
}
.u-title {
.flex;
align-items: center;
Expand All @@ -50,6 +53,12 @@
cursor: pointer;
}
}
.u-no-effect {
.flex;
align-items: center;
justify-content: center;
height: 78px;
}
}
.u-skill-wrap {
.flex;
Expand All @@ -68,20 +77,41 @@
height: 30px;
.flex;
gap: 10px;
justify-content: space-between;
align-items: center;
background-color: #000;
color: @baizhan_color;
cursor: pointer;
&:hover {
color: @skill_active;
.u-skill-left {
color: @skill_active;
}
}
.u-skill-left {
.flex;
align-items: center;
gap: 10px;
}
.u-skill-right {
font-size: 12px;
color: @baizhan_active;
}
.u-skill-icon {
transform: scale(1.15);
}
.u-img-wrap {
.flex;
justify-content: center;
align-items: center;
overflow: hidden;
.size(30px, 30px);
&.is-passive {
.size(26px, 26px);
margin-right: 2px;
margin-left: 2px;
border-radius: 50%;
background-color: @baizhan_map_bg;
.u-skill-icon {
.size(24px, 24px);
border-radius: 50%;
transform: scale(1);
}
}
}
&.u-skill-icon__1 {
Expand Down
2 changes: 1 addition & 1 deletion src/assets/data/baizhan_effects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ export const effects = [
name: "因陀罗的护佑",
desc: "获得一个随机前进次数，直接获得80个修罗之印。",
reward: 80,
tags: ["随机次数"],
tags: ["随机前进"],
buffID: 24902,
buffLevel: 1,
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/baizhan/main_tabs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="u-tab-list">
<div
class="u-tab"
:class="tab.value === activeTab && 'is-active'"
:class="[tab.value === activeTab ? 'is-active' : '', tab.value === 'boss' ? 'is-gray' : '']"
v-for="tab in tabs"
:key="tab.value"
@click="setActiveTab(tab.value)"
Expand Down Expand Up @@ -56,7 +56,7 @@ export default {
icon_active: require("@/assets/img/baizhan/tabs/skill_active.svg"),
},
{
label: "即将上线",
label: "首领数据",
value: "boss",
icon: require("@/assets/img/baizhan/tabs/boss.svg"),
icon_active: require("@/assets/img/baizhan/tabs/boss_active.svg"),
Expand Down
25 changes: 16 additions & 9 deletions src/components/baizhan/map_index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@
@click="preventClick"
>
<!-- <el-button class="u-download" icon="el-icon-download" @click="exportToImage"></el-button> -->
<div class="u-step" v-for="(item, step) in list" :key="step">
<div
class="u-step"
:class="currentBoss.dwBossID ? 'has-info' : ''"
v-for="(item, step) in list"
:key="step"
>
<!-- activeFloor === step * 10 + index + 1 ? 'is-active' : '', -->
<div
class="u-floor"
Expand Down Expand Up @@ -274,9 +279,9 @@ export default {
getEffectInfo,
setBoss(floor, i) {
let val = floor;
// if (floor.dwBossID === this.currentBoss?.dwBossID) {
// val = {};
// }
if (floor.dwBossID === this.currentBoss?.dwBossID) {
val = {};
}
this.$store.commit("baizhan/setState", {
key: "currentBoss",
val: Object.assign(val, {
Expand Down Expand Up @@ -373,7 +378,7 @@ export default {
val: false,
});
// 初始化地图右侧信息
this.$store.dispatch("baizhan/resetCurrent", true);
// this.$store.dispatch("baizhan/resetCurrent", true);
});
})
.catch((error) => {
Expand Down Expand Up @@ -405,10 +410,12 @@ export default {
const topTxtY = 30 * 1.5; // 垂直位置
ctx.fillText(topTxt, topTxtX, topTxtY);
// const bottomTxt = "By: 魔盒 (https://www.jx3box.com)";
// const bottomTxtX = canvas.width / 2; // 居中位置
// const bottomTxtY = canvas.height - topTxtY; // 垂直位置
// ctx.fillText(bottomTxt, bottomTxtX, bottomTxtY);
const bottomTxt = "魔盒·百战查询 https://www.jx3box.com/fb/baizhan";
ctx.font = `bold 30px Arial`;
const txtBottomWidth = ctx.measureText(bottomTxt).width;
const bottomTxtX = canvas.width - txtBottomWidth / 2 - 30 * 2;
const bottomTxtY = canvas.height - topTxtY; // 垂直位置
ctx.fillText(bottomTxt, bottomTxtX, bottomTxtY);
// 绘制文字水印
// const txt = "JX3BOX";
Expand Down
24 changes: 13 additions & 11 deletions src/components/baizhan/map_level_info.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
</div>
<div class="u-effect-wrap">
<div class="u-header">层数效果</div>
<template v-if="current.nEffectID">
<div class="u-effect-desc" v-if="current.nEffectID">
<div class="u-title">
<img
class="u-effect-icon"
Expand All @@ -33,11 +33,11 @@
<div class="u-name">{{ current.effectName }}</div>
</div>
<div class="u-desc" v-html="current.effectDesc"></div>
</template>
<div v-else class="u-title">当前层没有特殊效果</div>
</div>
<div v-else class="u-no-effect">当前层没有特殊效果</div>
</div>
<div class="u-skill-wrap">
<div class="u-header">掉落</div>
<div class="u-header">技能掉落</div>
<div class="u-skill-list">
<a
class="u-skill-item"
Expand All @@ -47,13 +47,15 @@
:href="getUrl(skill.skillId)"
target="_blank"
>
<img
class="u-skill-icon"
:class="skill.isPassive && 'is-passive'"
:src="skill.skillIcon"
:alt="skill.skillName"
/>
<span>{{ skill.skillName }}</span>
<div class="u-skill-left">
<div class="u-img-wrap" :class="skill.isPassive && 'is-passive'">
<img class="u-skill-icon" :src="skill.skillIcon" :alt="skill.skillName" />
</div>
<span>{{ skill.skillName }}</span>
</div>
<div class="u-skill-right">
<span v-if="skill.isPassive">被动技能</span>
</div>
</a>
</div>
</div>
Expand Down
9 changes: 5 additions & 4 deletions src/store/modules/baizhan.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default {
resetCurrent({ commit, state }, isInitBoss = false) {
commit("setState", {
key: "currentBoss",
// val: isInitBoss ? state.maps?.[0] || {} : {},
val: isInitBoss ? state.maps?.[0] || {} : {},
});
commit("setState", {
Expand Down Expand Up @@ -205,10 +206,10 @@ export default {
key: "maps",
val: list,
});
commit("setState", {
key: "currentBoss",
val: list[0],
});
// commit("setState", {
// key: "currentBoss",
// val: list[0],
// });
});
},
},
Expand Down
9 changes: 6 additions & 3 deletions src/views/Baizhan.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,12 @@
<Skills v-if="activeTab === 'skill'"></Skills>
<Bosses v-if="activeTab === 'boss'"></Bosses>
</div>
<div class="m-baizhan-right" :class="rightOpen ? 'is-open' : 'is-close'" v-if="hasRight">
<BInfo></BInfo>
<BComment></BComment>
<!-- v-if="hasRight" -->
<div class="m-baizhan-right" :class="[rightOpen ? 'is-open' : 'is-close', hasRight ? 'is-has' : 'is-no']">
<div class="m-right-wrap">
<BInfo></BInfo>
<BComment v-if="hasRight"></BComment>
</div>
<span class="c-sidebar-right-toggle" @click="rightOpen = !rightOpen">
<i :class="rightOpen ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
</span>
Expand Down

0 comments on commit adb4e79

Please sign in to comment.