feature:云顶之弈模拟器S2赛季更新

2019专题/云顶之弈模拟器/src/components/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app">
-    <div class="container">
+    <div class="container" @drop="dropHero" @dragover="allowDrop">
       <div class="title" ></div>
       <div class="guide">
         <a href="http://lol.duowan.com/1908/429554416930.html" target="_blank">>>使用指南<<</a>
@@ -68,16 +68,16 @@
                 @addHero="addHero"/>
             </div>
           <div class="element-box">
-            <div :class="['element-wrapper', currentElement === 'fire' ? 'active' : '']" title="火"  @click="currentElement = 'fire'">
+            <div :class="['element-wrapper', currentElement === 'fire' ? 'active' : '']" title="炼狱:回合开始时，在此格的英雄提高攻速"  @click="currentElement = 'fire'">
                 <div class="element fire"></div>
             </div>
-            <div :class="['element-wrapper', currentElement === 'water' ? 'active' : '']" title="水" @click="currentElement = 'water'">
+            <div :class="['element-wrapper', currentElement === 'water' ? 'active' : '']" title="海洋:回合开始时，在此格的英雄增加初始法力值" @click="currentElement = 'water'">
                 <div class="element water"></div>
             </div>
-            <div :class="['element-wrapper', currentElement === 'wind' ? 'active' : '']" title="风"  @click="currentElement = 'wind'">
+            <div :class="['element-wrapper', currentElement === 'wind' ? 'active' : '']" title="云端:回合开始时，在此格的英雄增加闪避"  @click="currentElement = 'wind'">
                 <div class="element wind"></div>
             </div>
-            <div :class="['element-wrapper', currentElement === 'earth' ? 'active' : '']" title="土" @click="currentElement = 'earth'">
+            <div :class="['element-wrapper', currentElement === 'earth' ? 'active' : '']" title="山脉:此格的英雄每一回合都会永久增加生命值" @click="currentElement = 'earth'">
                 <div class="element earth"></div>
             </div>
           </div>
@@ -388,7 +388,8 @@ export default {
           cover: '', // 封面图 用小小英雄的
           level: 1, // 玩家等级
           selectedHeroes: [], // 阵容的英雄
-          activatedFetters: [] // 激活的羁绊效果
+          activatedFetters: [], // 激活的羁绊效果
+          memoElementsIndexes: []
         }
       },
       isLogin: !!dwUDBProxy.isLogin(),
@@ -466,7 +467,7 @@ export default {
       const targetIndex = Array.from(document.querySelectorAll('.board-grid')).indexOf(parentNode)
       ev.dataTransfer.setData('elementIndex', targetIndex)
     },
-    // 拖拽添加英雄到阵容中
+    // 拖拽相关逻辑
     handleDrop(ev, targetIndex) {
       ev.preventDefault()
       ev.stopPropagation()
@@ -474,11 +475,15 @@ export default {
       const elementIndex = ev.dataTransfer.getData('elementIndex') ? Number(ev.dataTransfer.getData('elementIndex')) : -1
       const heroIndex = ev.dataTransfer.getData('heroIndex') ? Number(ev.dataTransfer.getData('heroIndex')) : -1
       const hero = this.selectedHeroes[heroIndex]
+      const targetHero = this.selectedHeroes[targetIndex]
       // 拖拽添加英雄
       if (ev.dataTransfer.getData('hero')) {
         if (this.currentPopulation < this.currentMaxHero) {
           const hero = JSON.parse(ev.dataTransfer.getData('hero'))
           this.selectedHeroes.splice(targetIndex, 1, hero)
+          if(this.memoElementsIndexes.includes(targetIndex)) {
+            this.selectedHeroes[targetIndex].selectedEquipments.splice(0, 1, elementEquipmentsMap[this.currentElement])
+          }
         } else {
           alert('你该升级啦~点击小小英雄下方的升级按钮提升你的等级吧~')
         }
@@ -495,6 +500,10 @@ export default {
           if (heroIndex > -1 && hero) {
             this.selectedHeroes.splice(heroIndex, 1, null)
             this.selectedHeroes.splice(targetIndex, 1, hero)
+            if(this.memoElementsIndexes.includes(heroIndex)) {
+              const elementEquipmentIndex = hero.selectedEquipments.findIndex(eq => eq && eq.effectType === 'element')
+              hero.selectedEquipments.splice(elementEquipmentIndex, 1, null)
+            }
           }
         }
         return
@@ -503,12 +512,42 @@ export default {
       if (classList.contains('hero') || classList.contains('item-hero') || classList.contains('equipment')) {
         if(elementIndex > -1) {
           // 此时为用户将元素移动到有英雄棋子的位置上
+          if(this.memoElementsIndexes.includes(targetIndex)) {
+            return
+          }
+          const emptyIndex = targetHero.selectedEquipments.findIndex(eq => !eq)
+          // 将元素移动到有英雄的棋子上时应判断该英雄的装备栏是否已满
+          if(emptyIndex === -1) {
+            return alert('英雄装备栏已满。')
+          }
           this.memoElementsIndexes.splice(this.memoElementsIndexes.indexOf(elementIndex), 1, targetIndex)
+          targetHero.selectedEquipments.splice(emptyIndex, 1, elementEquipmentsMap[this.currentElement])
         } else {
           // 此时为用户想要交换棋子位置
           if (heroIndex > -1 && hero) {
+            // 交换棋子的时候要判断对方棋子是否在有元素的格子上
+            // 如果被交换的英雄装备栏已满，且不在元素格子上，则不允许进行交换。
+            if(!this.memoElementsIndexes.includes(targetIndex) && targetHero.selectedEquipments.findIndex(eq => !eq) === -1 && this.memoElementsIndexes.includes(heroIndex)) {
+              return alert('英雄装备栏已满。')
+            }
+            if(!this.memoElementsIndexes.includes(heroIndex) && hero.selectedEquipments.findIndex(eq => !eq) === -1 && this.memoElementsIndexes.includes(targetIndex)) {
+              return alert('英雄装备栏已满。')
+            }
             this.selectedHeroes.splice(heroIndex,1,this.selectedHeroes[targetIndex])
             this.selectedHeroes.splice(targetIndex, 1, hero)
+
+            if(this.memoElementsIndexes.includes(heroIndex) && !this.memoElementsIndexes.includes(targetIndex)) {
+              const heroElementEquipmentIndex = hero.selectedEquipments.findIndex(eq => eq && eq.effectType === 'element')
+              const targetHeroEquipmentEmptyIndex = targetHero.selectedEquipments.findIndex(eq => !eq)
+              hero.selectedEquipments.splice(heroElementEquipmentIndex, 1, null)
+              targetHero.selectedEquipments.splice(targetHeroEquipmentEmptyIndex, 1, elementEquipmentsMap[this.currentElement])
+            }
+            if(this.memoElementsIndexes.includes(targetIndex) && !this.memoElementsIndexes.includes(heroIndex)) {
+              const heroEquipmentEmptyIndex = hero.selectedEquipments.findIndex(eq => !eq)
+              const targetHeroElementEquipmentIndex = targetHero.selectedEquipments.findIndex(eq => eq && eq.effectType === 'element')
+              hero.selectedEquipments.splice(heroEquipmentEmptyIndex, 1, elementEquipmentsMap[this.currentElement])
+              targetHero.selectedEquipments.splice(targetHeroElementEquipmentIndex, 1, null)
+            }
           }
         }
         return
@@ -517,12 +556,26 @@ export default {
       if(classList.contains('element-bg')){
         // 此时为用户想要将英雄棋子移动到有元素的空位上
         if(elementIndex === -1) {
+          //将英雄移动到有元素的空位前要先检查该英雄的装备栏是否已满
+          const emptyIndex = hero.selectedEquipments.findIndex(eq => !eq)
+          if(emptyIndex === -1 && !this.memoElementsIndexes.includes(heroIndex)) {
+            return alert('英雄装备栏已满。')
+          }
           this.selectedHeroes.splice(heroIndex, 1, null)
           this.selectedHeroes.splice(targetIndex, 1, hero)
+          if(hero.selectedEquipments.findIndex(eq => eq && eq.effectType === 'element') === -1) {
+            hero.selectedEquipments.splice(emptyIndex, 1, elementEquipmentsMap[this.currentElement])
+          }
         }
         // 另外一种情况为用户将带有元素的棋子拖拽到另一带有元素的棋子，这种情况不需要处理。
       }
     },
+    dropHero(ev){
+      const heroIndex = ev.dataTransfer.getData('heroIndex') ? Number(ev.dataTransfer.getData('heroIndex')) : -1
+      if(!document.querySelector('.hero-list.normal').contains(ev.target) && heroIndex !== -1) {
+        this.selectedHeroes.splice(heroIndex, 1, null)
+      }
+    },
     // 选择小小英雄星级
     selectStarLevel(starLevel) {
       this.selectedLittleHero = this.currentLittleHeroType.upgrade[starLevel]
@@ -552,6 +605,9 @@ export default {
       if (this.currentPopulation < this.currentMaxHero) {
         const positon = this.selectedHeroes.findIndex(el => !el)
         this.selectedHeroes.splice(positon, 1, JSON.parse(JSON.stringify(_hero)))
+        if(this.memoElementsIndexes.includes(positon)) {
+          this.selectedHeroes[positon].selectedEquipments.splice(0, 1, elementEquipmentsMap[this.currentElement])
+        }
       } else {
         alert('你该升级啦~点击小小英雄下方的升级按钮提升你的等级吧~')
       }
@@ -599,7 +655,8 @@ export default {
         this.shareInfo.body.selectedHeroes = this.selectedHeroes
         this.shareInfo.body.activatedFetters = this.activatedFetters
         this.shareInfo.body.cover = this.selectedLittleHero ? this.selectedLittleHero.url : 'http://img.dwstatic.com/lol/1907/427893999988/1563938993304.jpg'
-
+        this.shareInfo.body.memoElementsIndexes = this.memoElementsIndexes
+        this.shareInfo.body.element = this.currentElement
         if(!this.shareInfo.body.desc.trim()) {
           const defaultDesc = ['这个人很鸡贼，阵容都不说明白...', '这个人很懒，什么都没留下...']
           this.shareInfo.body.desc = defaultDesc[ genRandomInteger(0, 1) ]
@@ -821,7 +878,7 @@ export default {
     },
     currentElement(newVal){
       // 这里的逻辑针对琪亚娜这个英雄做特殊处理
-      const heroIndex = this.selectedHeroes.findIndex(h => h.name === '元素女皇 琪亚娜')
+      const heroIndex = this.selectedHeroes.findIndex(h => h && h.name === '元素女皇 琪亚娜')
       if(heroIndex !== -1) {
         const elementToFetter = {
           water: 'heroSort7',
@@ -831,6 +888,16 @@ export default {
         }
         this.selectedHeroes[heroIndex].sort = [elementToFetter[newVal]]
       }
+      // 这里的逻辑针对阵容中在元素位置上的英雄的元素装备做修改
+      this.memoElementsIndexes.forEach(index => {
+        const hero = this.selectedHeroes[index]
+        if(hero) {
+          const equipmentIndex = hero.selectedEquipments.findIndex(eq => eq && eq.effectType === 'element')
+          if(equipmentIndex > -1) {
+            hero.selectedEquipments.splice(equipmentIndex, 1, elementEquipmentsMap[newVal])
+          }
+        }
+      })
     }
   },
   mounted() {

2019专题/云顶之弈模拟器/src/components/m-index.vue

@@ -27,6 +27,7 @@
           :flexible="true"
           @click="selectGrid(index)"
         />
+        <div :class="['element-bg', currentElement]" v-if="memoElementsIndexes.includes(index)" ></div>
       </div>
     </div>
     <div class="fetters-wrapper">
@@ -152,6 +153,11 @@
                   :class="currentSelectType === 'equipment' ? 'active' : ''"
                   @click.stop="currentSelectType = 'equipment'"
                 >装备</span>
+                <span
+                  :class="currentSelectType === 'element' ? 'active' : ''"
+                  @click.stop="currentSelectType = 'element'"
+                  v-show="memoElementsIndexes.includes(currentGird)"
+                >元素</span>
               </div>
               <button @click.stop="clear">清除</button>
             </div>
@@ -186,6 +192,16 @@
                 />
               </div>
             </div>
+            <div v-show="currentSelectType === 'element'">
+              <button class="move-element" @click="moveElement" >移动元素</button>
+              <span class='tip'>更换元素:</span>
+              <div class="element-wrapper">
+                <img src="../assets/images/fire.png" :class="currentElement === 'fire' ? 'active' : ''" @click="currentElement = 'fire'">
+                <img src="../assets/images/water.png" :class="currentElement === 'water' ? 'active' : ''" @click="currentElement = 'water'">
+                <img src="../assets/images/wind.png" :class="currentElement === 'wind' ? 'active' : ''" @click="currentElement = 'wind'">
+                <img src="../assets/images/earth.png" :class="currentElement === 'earth' ? 'active' : ''" @click="currentElement = 'earth'">
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -195,14 +211,16 @@
 
 <script>
 import hero from '../components/hero'
-import { findFromTail, genRandomInteger, uuid } from '../utils/helper'
+import { genRandomInteger, uuid } from '../utils/helper'
 import options from '../components/options'
 import { shareTeam, getSimulatorData, getUserInfo } from '../API/index'
 
 const HERO_MAX_EUIPMENT = 3 // 英雄最大装备上限
 const INITIAL_MAX_POPULATION = 9 // 初始最大英雄上限
-const MAX_HEROES_COUNT = 21 // 棋盘所能容纳的最大英雄上限
+const MAX_HEROES_COUNT = 28 // 棋盘所能容纳的最大英雄上限
 const LOCALSTORAGE_KEY = '__ydzySimulatorUserInfo'
+const elements = ['fire', 'water', 'wind', 'earth'] // 元素属性
+const elementEquipmentsMap = {}  // 元素属性与元素装备的映射
 
 let fetters
 const original = {}
@@ -216,6 +234,16 @@ function duplicateHeroes(heroes) {
   return Object.values(map)
 }
 
+function initElementsIndexes (){
+  const ret = []
+  while(ret.length < 2) {
+    let n = genRandomInteger(0, MAX_HEROES_COUNT - 1)
+    !ret.includes(n) && ret.push(n)
+  }
+  return ret
+}
+
+
 export default {
   data() {
     return {
@@ -235,6 +263,9 @@ export default {
       goals: [], // 待激活的羁绊
       extra_population: 0, // 通过装备额外增加的人口
       level: 1, // 当前玩家等级
+      currentElement: elements[genRandomInteger(0, elements.length - 1)], // 当前格子元素
+      memoElementsIndexes: initElementsIndexes(), // 记录带元素格子的索引
+      isMovingElement: false, // 标记用户是否在移动元素
       starSelectorVisiable: false, // 控制小小英雄选星级的对话框的显隐
       littleHeroSelectorVisiable: false, // 小小英雄选择框的显隐
       sharingPopupVisiable: false, // 分享对话框显隐
@@ -251,7 +282,7 @@ export default {
           activatedFetters: [] // 激活的羁绊效果
         }
       },
-      currentSelectType: 'hero', // 当前用户在选择的类型 英雄 /  装备
+      currentSelectType: 'hero', // 当前用户在选择的类型 英雄 /  装备 / 元素
       isLogin: DEV ? true : !!dwUDBProxy.isLogin(),
       nickname: localStorage.getItem(LOCALSTORAGE_KEY)
         ? JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY)).nickname
@@ -297,10 +328,43 @@ export default {
   methods: {
     // 选择棋子空位
     selectGrid(index) {
+      if(this.isMovingElement) {
+        // 此时用户在移动元素
+        // 当点击已有元素的格子时直接返回
+        if(this.memoElementsIndexes.includes(index)) {
+          return 
+        }
+        if(this.currentGird !== index) {
+          //如果对方格子上已经有英雄
+          if(this.selectedHeroes[index]) {
+            const emptyIndex = this.selectedHeroes[index].selectedEquipments.findIndex(_eq => !_eq)
+            if(emptyIndex === -1) {
+              // 此时英雄装备已满 
+              //FIXME:alert的话直接alert三次，暂时不知道什么原因。
+              return
+            } else {
+              this.selectedHeroes[index].selectedEquipments.splice(emptyIndex, 1, elementEquipmentsMap[this.currentElement])
+            }
+          }
+          if(this.selectedHeroes[this.currentGird]) {
+            // 如果当前格子有英雄，当移动元素时，要将当前英雄的元素装备同时移除掉
+            const elementEquipmentIndex = this.selectedHeroes[this.currentGird].selectedEquipments.findIndex(eq => eq && eq.effectType === 'element')
+            this.selectedHeroes[this.currentGird].selectedEquipments.splice(elementEquipmentIndex, 1, null)
+          }
+          this.memoElementsIndexes.splice(this.memoElementsIndexes.indexOf(this.currentGird), 1, index)
+
+          // 这里移动端点击有延迟，做个延时。
+          setTimeout(() => {
+            this.isMovingElement = false
+          }, 500)
+
+          return
+        }
+      }
       this.currentGird = index
       this.equipmentSelectorVisiable = true
       if(this.selectedHeroes[index]) {
-        this.currentHero = this.selectedHeroes[index]
+        this.currentHero = JSON.parse(JSON.stringify(this.selectedHeroes[index]))
       } else {
         this.currentHero = null
       }
@@ -348,12 +412,16 @@ export default {
     // 点击添加英雄到阵容中
     addHero(_hero) {
       if (this.currentPopulation < this.currentMaxHero) {
-        this.currentHero = _hero
+        this.currentHero = JSON.parse(JSON.stringify(_hero))
         this.selectedHeroes.splice(
           this.currentGird,
           1,
           JSON.parse(JSON.stringify(_hero))
         )
+        if(this.memoElementsIndexes.includes(this.currentGird)) {
+          // 如果是在元素格子上添加英雄，自动添加一个元素装备
+          this.selectedHeroes[this.currentGird].selectedEquipments.splice(0, 1, elementEquipmentsMap[this.currentElement])
+        }
       } else {
         alert('人口已经超额啦！快给你的英雄装备自然之力吧！')
       }
@@ -368,6 +436,11 @@ export default {
         )
       }
     },
+    //移动元素位置
+    moveElement(){
+      this.equipmentSelectorVisiable = false
+      this.isMovingElement = true
+    },
     // 分享阵容
     shareTeam() {
       function minifyData(_data) {
@@ -410,6 +483,8 @@ export default {
         this.shareInfo.body.level = this.level
         this.shareInfo.body.selectedHeroes = this.selectedHeroes
         this.shareInfo.body.activatedFetters = this.activatedFetters
+        this.shareInfo.body.memoElementsIndexes = this.memoElementsIndexes
+        this.shareInfo.body.element = this.currentElement
         this.shareInfo.body.cover = this.selectedLittleHero
           ? this.selectedLittleHero.url
           : 'http://img.dwstatic.com/lol/1907/427893999988/1563938993304.jpg'
@@ -496,12 +571,38 @@ export default {
         let duplicatedHeroes = duplicateHeroes(filteredHero)
 
         duplicatedHeroes.forEach(hero => {
-          hero.job.forEach(job => {
-            heroCount[job]++
-          })
+          // 拉克丝特殊处理
+          if (hero.name === '大元素使 拉克丝') {
+            hero.sort.forEach(job => {
+              heroCount[job] += 2
+            })
+            hero.job.forEach(job => {
+              heroCount[job]++
+            })
+            return
+          }
+
+          // 元素女皇特殊处理
+          if(hero.name === '元素女皇 琪亚娜') {
+            const elementToFetter = {
+              water: 'heroSort7',
+              fire: 'heroSort5',
+              wind: 'heroSort2',
+              earth: 'heroSort11'
+            }
+            heroCount[ elementToFetter[this.currentElement] ]++
+            hero.job.forEach(job => {
+              heroCount[job]++
+            })
+            return
+          }
           hero.sort.forEach(job => {
+            heroCount[job] ++
+          })
+          hero.job.forEach(job => {
             heroCount[job]++
           })
+
         })
 
         // 重复的英雄带的装备只有自然之力不是唯一被动
@@ -521,19 +622,10 @@ export default {
             // 当两个或多个相同的英雄装备同一个身份装备，该身份装备也只生效一次（其他装备一样）
             // 如果还是没看懂就去玩下游戏或者请教一下专区编辑
             if (equipment.effectType === 'job') {
-              if (
-                !uniqueSkills.includes(equipment.effectJob) &&
-                !hero.job.includes(equipment.effectJob) &&
-                !hero.sort.includes(equipment.effectJob)
-              ) {
+              if (!uniqueSkills.includes(equipment.effectJob) && !hero.job.includes(equipment.effectJob) && !hero.sort.includes(equipment.effectJob) ) {
                 const splicedHeroList = filteredHero.slice(0, index)
                 const sameHero = splicedHeroList.find(_h => _h.id === hero.id)
-                if (
-                  sameHero &&
-                  sameHero.selectedEquipments.find(
-                    _e => _e && _e.id === equipment.id
-                  )
-                ) {
+                if(sameHero && sameHero.selectedEquipments.find(_e => _e && _e.id === equipment.id)) {
                   return
                 }
                 uniqueSkills.push(equipment.effectJob)
@@ -548,20 +640,20 @@ export default {
           if (count !== 0) {
             fetters.forEach(fetter => {
               // 忍者进行特殊处理
-              if (job === 'heroSort5') {
-                if (
-                  job === fetter.requiredType &&
-                  count === fetter.requiredCount
-                ) {
-                  let _index = copy.findIndex(_f => _f.requiredType === job)
-                  if (_index !== -1) {
-                    copy.splice(_index, 1)
-                  }
-                  fetter.currentCount = count
-                  copy.push(fetter)
-                }
-                return
-              }
+              // if (job === 'heroSort5') {
+              //   if (
+              //     job === fetter.requiredType &&
+              //     count === fetter.requiredCount
+              //   ) {
+              //     let _index = copy.findIndex(_f => _f.requiredType === job)
+              //     if (_index !== -1) {
+              //       copy.splice(_index, 1)
+              //     }
+              //     fetter.currentCount = count
+              //     copy.push(fetter)
+              //   }
+              //   return
+              // }
               // 正常情况
               if (
                 job === fetter.requiredType &&
@@ -592,15 +684,15 @@ export default {
             let fetter = fetters.find(f => f.requiredType === job)
 
             // 忍者特殊处理
-            if (fetter.requiredType === 'heroSort5') {
-              fetter = findFromTail(
-                fetters,
-                f => f.requiredType === 'heroSort5'
-              )
-              fetter.currentCount = heroCount[job]
-              goals.push(fetter)
-              return
-            }
+            // if (fetter.requiredType === 'heroSort5') {
+            //   fetter = findFromTail(
+            //     fetters,
+            //     f => f.requiredType === 'heroSort5'
+            //   )
+            //   fetter.currentCount = heroCount[job]
+            //   goals.push(fetter)
+            //   return
+            // }
             fetter.currentCount = heroCount[job]
             goals.push(fetter)
           }
@@ -615,6 +707,15 @@ export default {
         this.currentSelectType = 'hero'
       }
     },
+    currentElement() {
+      this.memoElementsIndexes.forEach(i => {
+        const hero = this.selectedHeroes[i]
+        if(hero) {
+          const elementEquipmentIndex = hero.selectedEquipments.findIndex(eq => eq && eq.effectType === 'element')
+          hero.selectedEquipments.splice(elementEquipmentIndex, 1, elementEquipmentsMap[this.currentElement])
+        }
+      })
+    }
   },
   mounted() {
     // 获取模拟器数据
@@ -636,8 +737,15 @@ export default {
 
       initData()
 
+      const simulatorEquipment = []
+
+      data.simulatorEquipment.forEach(eq => {
+        eq.effectType !== 'element' ? simulatorEquipment.push(eq) : elementEquipmentsMap[eq.effectJob] = eq
+      })
+
+
       fetters = data.fetters
-      this.simulatorEquipment = data.simulatorEquipment
+      this.simulatorEquipment = simulatorEquipment
       this.heroes = data.hero.data
       this.littleHeroes = data.littleHero.data
       this.jobs = [{ value: 'all', label: '全部' }].concat(
@@ -690,7 +798,7 @@ $theme-color: #c49a2a;
   .title {
     width: px2rem(720);
     height: px2rem(54);
-    margin: px2rem(53) auto px2rem(41) auto;
+    margin: px2rem(0) auto px2rem(41) auto;
     background: url("../assets/images/m-title.png") no-repeat 100% / 100%;
   }
   .btn-group {
@@ -732,9 +840,42 @@ $theme-color: #c49a2a;
       &.filled {
         background: none;
       }
+        .element-bg{
+          width: px2rem(81);
+          height: px2rem(92);
+          position: absolute;
+          left: px2rem(8);
+          top: px2rem(8);
+          opacity: 0.6;
+          transition: all 0.3s ease;
+          z-index: -1;
+          clip-path: polygon(
+                50% 0%,
+                100% 25%,
+                100% 75%,
+                50% 100%,
+                0% 75%,
+                0% 25%
+          );
+          &.fire{
+            background: url('../assets/images/fire.png') no-repeat 100% / 100%;
+          }
+          &.water{
+            background: url('../assets/images/water.png') no-repeat 100% / 100%;
+          }
+          &.earth{
+            background: url('../assets/images/earth.png') no-repeat 100% / 100%;
+          }
+          &.wind{
+            background: url('../assets/images/wind.png') no-repeat 100% / 100%;
+          }
+          &:hover{
+            opacity: 0.8;
+          }
+        }
     }
     &.normal {
-      height: px2rem(275);
+      height: px2rem(355);
       margin-bottom: px2rem(46);
       .board-grid {
         margin-right: px2rem(2);
@@ -750,6 +891,9 @@ $theme-color: #c49a2a;
         &:nth-child(n + 15) {
           transform: translateY(px2rem(-48));
         }
+        &:nth-child(n + 22) {
+          transform: translateY(px2rem(-72));
+        }
       }
     }
   }
@@ -1015,9 +1159,7 @@ $theme-color: #c49a2a;
             box-sizing: border-box;
             border-bottom: px2rem(4) solid #202020;
             color: white;
-            &:first-child {
-              margin-right: px2rem(60);
-            }
+            margin-right: px2rem(20);
             &.active {
               color: $theme-color;
               border-bottom: px2rem(4) solid $theme-color;
@@ -1043,6 +1185,20 @@ $theme-color: #c49a2a;
       .job {
         margin-bottom: px2rem(18);
       }
+      .element-wrapper{
+        display: flex;
+        flex-wrap: wrap;
+        img{
+          width: px2rem(100);
+          height: px2rem(100);
+          margin-top: px2rem(40);
+          border-radius: 10px;
+          box-sizing: border-box;
+          &.active{
+            border:  2px solid $theme-color;
+          }
+        }
+      }
       .scroller {
         width: 100%;
         height: px2rem(250);
@@ -1072,6 +1228,14 @@ $theme-color: #c49a2a;
           }
         }
       }
+      span.tip{
+        font-size: px2rem(24);
+        color: #b3b3b3;
+        display: block;
+      }
+      button.move-element{
+        margin: px2rem(40) 0;
+      }
     }
   }
 }

2019专题/云顶之弈模拟器/src/components/m-shareDetail.vue

@@ -22,6 +22,7 @@
           :flexible="true"
           @click="selectGrid(index)"
         />
+        <div :class="['element-bg', currentElement]" v-if="memoElementsIndexes.includes(index)" ></div>
       </div>
     </div>
     <div class="fetters-wrapper">
@@ -117,7 +118,9 @@ export default {
       is_like: false,
       is_dislike: false,
       comment3Uniqid: '',
-      isLogin: DEV ? true : !!dwUDBProxy.isLogin()
+      isLogin: DEV ? true : !!dwUDBProxy.isLogin(),
+      memoElementsIndexes: [],
+      currentElement: '',
     }
   },
   computed: {
@@ -191,6 +194,8 @@ export default {
       this.dislike_count = _data.dislike_count
       this.comment3Uniqid = _data.body.comment3Uniqid
       this.author = _data.nickname
+      this.memoElementsIndexes = _data.body.memoElementsIndexes || []
+      this.currentElement = _data.body.element || ''
     })
   }
 }
@@ -246,9 +251,42 @@ $theme-color: #c49a2a;
       &.filled {
         background: none;
       }
+      .element-bg{
+        width: px2rem(81);
+        height: px2rem(92);
+        position: absolute;
+        left: px2rem(8);
+        top: px2rem(8);
+        opacity: 0.6;
+        transition: all 0.3s ease;
+        z-index: -1;
+        clip-path: polygon(
+              50% 0%,
+              100% 25%,
+              100% 75%,
+              50% 100%,
+              0% 75%,
+              0% 25%
+        );
+        &.fire{
+          background: url('../assets/images/fire.png') no-repeat 100% / 100%;
+        }
+        &.water{
+          background: url('../assets/images/water.png') no-repeat 100% / 100%;
+        }
+        &.earth{
+          background: url('../assets/images/earth.png') no-repeat 100% / 100%;
+        }
+        &.wind{
+          background: url('../assets/images/wind.png') no-repeat 100% / 100%;
+        }
+        &:hover{
+          opacity: 0.8;
+        }
+      }
     }
     &.normal {
-      height: px2rem(275);
+      height: px2rem(355);
       margin-bottom: px2rem(46);
       .board-grid {
         margin-right: px2rem(2);
@@ -264,6 +302,9 @@ $theme-color: #c49a2a;
         &:nth-child(n + 15) {
           transform: translateY(px2rem(-48));
         }
+        &:nth-child(n + 22) {
+          transform: translateY(px2rem(-72));
+        }
       }
     }
   }

2019专题/云顶之弈模拟器/src/components/shareDetail.vue

@@ -13,6 +13,7 @@
             :style="{'z-index': (100 - index)}"
           >
             <hero :key="_hero.id + index" :hero="_hero" v-if="_hero" />
+            <div :class="['element-bg', currentElement]" v-if="memoElementsIndexes.includes(index)" ></div>
           </div>
         </div>
         <div class="result-container">
@@ -101,7 +102,9 @@ export default {
       is_star: false,
       is_like: false,
       is_dislike: false,
-      comment3Uniqid: ''
+      comment3Uniqid: '',
+      memoElementsIndexes: [],
+      currentElement: '',
     }
   },
   computed: {
@@ -129,7 +132,7 @@ export default {
     }
   },
   mounted() {
-    getTeamDetail(ID).then(res => {
+    ID && getTeamDetail(ID).then(res => {
       const _data = res.data
       this.title = _data.title
       this.yyuid = _data.yyuid
@@ -142,6 +145,8 @@ export default {
       this.dislike_count = _data.dislike_count
       this.comment3Uniqid = _data.body.comment3Uniqid
       this.author = _data.nickname
+      this.memoElementsIndexes = _data.body.memoElementsIndexes || []
+      this.currentElement = _data.body.element || ''
     })
   }
 }
@@ -153,7 +158,6 @@ export default {
   background: url("../assets/images/bg.png") no-repeat 100% / 100%;
   background-attachment: fixed;
   box-sizing: border-box;
-  padding-top: 66px;
   padding-bottom: 30px;
   width: 100%;
   height: 100%;
@@ -201,7 +205,7 @@ export default {
 
 .board {
   border: 1px solid #635d60;
-  height: 495px;
+  height: 585px;
   box-sizing: border-box;
   padding: 30px 28px;
   position: relative;
@@ -236,6 +240,39 @@ export default {
       &.filled {
         background: none;
       }
+      .element-bg{
+        width: 81px;
+        height: 92px;
+        position: absolute;
+        left: 2px;
+        top: 2px;
+        opacity: 0.6;
+        transition: all 0.3s ease;
+        z-index: -1;
+        clip-path: polygon(
+              50% 0%,
+              100% 25%,
+              100% 75%,
+              50% 100%,
+              0% 75%,
+              0% 25%
+        );
+        &.fire{
+          background: url('../assets/images/fire.png') no-repeat 100% / 100%;
+        }
+        &.water{
+          background: url('../assets/images/water.png') no-repeat 100% / 100%;
+        }
+        &.earth{
+          background: url('../assets/images/earth.png') no-repeat 100% / 100%;
+        }
+        &.wind{
+          background: url('../assets/images/wind.png') no-repeat 100% / 100%;
+        }
+        &:hover{
+          opacity: 0.8;
+        }
+      }
     }
     &.small {
       &:last-child {
@@ -249,7 +286,8 @@ export default {
       }
     }
     &.normal {
-      height: 265px;
+      height: 355px;
+      padding-left: 20px;
       .board-grid {
         &:nth-child(14n + 1) {
           margin-left: 54px;
@@ -263,6 +301,9 @@ export default {
         &:nth-child(n + 15) {
           transform: translateY(-44px);
         }
+        &:nth-child(n + 22) {
+          transform: translateY(-66px);
+        }
       }
     }
   }