3
1 ·<template>
<view class="container">
<view class="header"><text>QQ自由幻想 · 宠物→角色加成</text></view>
<!-- 基础属性 -->
<view class="section-title">基础属性 → 角色加成</view>
<view class="section-content">
<view class="table">
<view class="table-row table-header">
<text>属性</text>
<text>当前值</text>
<text>实际资质</text>
<text>加成结果</text>
</view>
<view class="table-row" v-for="(item, idx) in baseList" :key="idx">
<text>{{ item.name }}</text>
<input type="number" v-model="item.current" @input="calcAll" placeholder="请输入"/>
<input type="number" v-model="item.actual" @input="calcAll" placeholder="请输入"/>
<text class="result">{{ item.bonus }}</text>
</view>
</view>
</view>
<!-- 被动技能 -->
<view class="section-title">被动技能等级 → 额外加成</view>
<view class="section-content">
<view class="skill-row">
<text>刚力等级</text>
<input type="number" v-model="gangLv" @input="calcAll" placeholder="0"/>
<text class="result">{{ gangDmg }}（额外物理）</text>
</view>
<view class="skill-row">
<text>霹雳等级</text>
<input type="number" v-model="piLv" @input="calcAll" placeholder="0"/>
<text class="result">{{ piDmg }}（额外魔法）</text>
</view>
<view class="skill-row">
<text>蛮力等级</text>
<input type="number" v-model="manLv" @input="calcAll" placeholder="0"/>
<text class="result">{{ manPct }}%（角色物攻%）</text>
</view>
<view class="skill-row">
<text>灵悟等级</text>
<input type="number" v-model="lingLv" @input="calcAll" placeholder="0"/>
<text class="result">{{ lingPct }}%（角色魔攻%）</text>
</view>
</view>
<view class="footer">
<text>公式：\n基础加成 = 当前属性 × 实际资质 ÷ 1000（向下取整）\n刚力伤害 = 力量 ÷ 10 × (6 + 刚力等级 − 1)\n霹雳伤害 = 智慧 ÷ 10 × (6 + 霹雳等级 − 1)\n蛮力% = (3 + 蛮力等级 − 1)%\n灵悟% = (3 + 灵悟等级 − 1)%</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
baseList: [
{ name: '力量', current: 0, actual: 0, bonus: 0 },
{ name: '体质', current: 0, actual: 0, bonus: 0 },
{ name: '敏捷', current: 0, actual: 0, bonus: 0 },
{ name: '智慧', current: 0, actual: 0, bonus: 0 },
{ name: '灵巧', current: 0, actual: 0, bonus: 0 },
{ name: '精神', current: 0, actual: 0, bonus: 0 }
],
gangLv: 0,
piLv: 0,
manLv: 0,
lingLv: 0,
gangDmg: 0,
piDmg: 0,
manPct: 0,
lingPct: 0
};
},
onLoad() {
this.calcAll();
},
methods: {
calcAll() {
this.baseList.forEach(item => {
item.bonus = Math.floor(this.toNum(item.current) * this.toNum(item.actual)) / 1000;
});
const str = this.toNum(this.baseList.find(i => i.name === '力量')?.current || 0);
const int = this.toNum(this.baseList.find(i => i.name === '智慧')?.current || 0);
this.gangDmg = Math.floor(str / 10 * (6 + this.toNum(this.gangLv)));
this.piDmg = Math.floor(int / 10 * (6 + this.toNum(this.piLv)));
this.manPct = 3 + this.toNum(this.manLv);
this.lingPct = 3 + this.toNum(this.lingLv);
},
toNum(v) {
return v === '' || isNaN(v) ? 0 : Number(v);
}
}
};
</script>
<style scoped>
.container {
padding: 20px;
background-color: #1f2637;
}
.header {
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 20px;
}
.section-title {
font-size: 20px;
color: #b967ff;
margin: 20px 0;
}
.section-content {
margin-bottom: 20px;
}
.table {
width: 100%;
margin-top: 10px;
}
.table-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 5px 0;
background-color: #ffaa00;
border-radius: 8px;
}
.table-header {
font-weight: bold;
background-color: #ffaa00;
}
.result {
color: #00c2ff;
font-weight: bold;
}
.skill-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 5px 0;
background-color: #55aa00;
border-radius: 8px;
}
.skill-row input {
width: 100px;
}
.footer {
font-size: 16px;
color: #8a93b0;
line-height: 24px;
margin-top: 20px;
}
</style>
演示小程序：幻想的小窝
