前端常遇到的問題！！！

 

一丶element-ui中遇到的坑

1.message消息提示框

咱們在點擊彈出消息提示時，點擊屢次的話會一直彈出多個相同的消息提示，感受很是的不友好。這時候咱們能夠在調用 Message 或 this.$message 會返回當前 Message。 調用實例以前關閉前面提示就行了。

這其實很簡單，就是一句代碼的事：加上 this.$message.closeAll()就行了！！！

    async findTijiao () {

       this.$message.closeAll() // (只彈出一個消息提示框)

      let tj = checkPhone(this.findMobile, 1) // 找回密碼手機號

      let findMima = checkPhone(this.findMima, 2) // 新密碼

      let againMima = checkPhone(this.confirmWord, 2) // 再次輸入的新密碼

      if (tj.code === 500 || findMima.code == 500 || againMima.code == 500) {

        this.$message(tj.msg + '和相關的信息')

        return

      }

      if (tj.code === 200) {

        if (this.findMima === this.againMima) {

          let res = await this.$http.post('/api/retrievePasswd', {

            mobile: this.findMobile,

            password: this.findMima,

            verification_code: this.findY

          })

          if (res.data.code === 200) {

            // 隱藏找回密碼對話框和展現show2

            this.show = 1

            this.pswdDialogVisible = false

            if (this.$route.path !== '/') {

              this.$router.push({ path: '/' })

            }

            this.$message({

              message: '找回密碼成功'

            })

          } else if (res.data.code === 10002) {

            this.$message({

              message: '驗證碼錯誤'

            })

          } else if (res.data.code === 10001) {

            this.$message({

              message: '手機格式錯誤'

            })

          }

        } else {

          this.$message('兩次輸入的密碼不一致')

        }

      }

    }

2.tooltip文字提示

咱們鼠標移入的時候會彈出一個提示框，裏邊的內容咱們能夠經過slot="content"來顯示想要提示的內容，不過當咱們想要現實鼠標移出目標元素就關閉提示時（也就是hover效果）就須要添加

:enterable='false'這麼一段代碼

<el-tooltip

              v-if="win[i] && k < win[i].bo_list.length && win[i].bo_list.length > 0"

              class="item"

              :key="k"

              effect="dark"

              placement="bottom"

               :enterable='false' // hover效果

            >

               <div slot="content" class="xianshi"> //編輯提示的內容

                <span class="yincang" :title="win[i].bo_list[k].league_name">{{win[i].bo_list[k].league_name}}</span>

                <br />

                <span class="shijian">{{statrTime(win[i].bo_list[k].begin_time)}}</span>

                <br />

                <span class="bifen">{{win[i].bo_list[k].kills}}&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;{{win[i].bo_list[k].opponent.kills}}</span>

                <br />

                <span class="zhandui">{{win[i].bo_list[k].team_name}}&nbsp;&nbsp;:&nbsp;&nbsp;{{win[i].bo_list[k].opponent.team_name}}</span>

              </div>

              <div :class="{'nei':true, sheng:win[i].bo_list[k].is_win}">

                <span>{{win[i].bo_list[k].is_win?'勝':'負'}}</span>

              </div>

            </el-tooltip>

3.修改element-ui組件裏邊的樣式

咱們開發的時候，要改組件的裏邊的樣式時，就在

<style lang="less" scoped>裏邊直接加話是沒有效果的，此時咱們能夠在全局給樣式，或者在樣式前邊加上/ deep /

/deep/ .el-input__inner { //樣式修改

        text-align: center;

        width: 100%;

        color: #fff;

      }

二丶作登陸和註冊頁面時要用到的一些驗證

1.經過es6的 export 和 import 來封裝方法和調用

（1）模塊是獨立的文件，該文件內部的全部的變量外部都沒法獲取。若是但願獲取某個變量，必須經過export輸出

（2）export定義了模塊的對外接口後，其餘JS文件就能夠經過import來加載這個模塊

2.手機驗證和驗證碼驗證以及密碼驗證

 （1）定義一個msg對象

const msg = {

  'code': 500,

  'msg': '錯誤！'

}

（2）封裝checkPhone方法return msg

export function checkPhone ( str, flag) { 

   // 檢驗手機號 //str是傳入的字符串，flag是用來判斷是驗證手機號碼仍是驗證碼以及密碼的

  if (flag == 1) {

//正則判斷手機號碼

    var reg = 10 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/

    if (str == '') {

      msg.code = 500

      msg.msg = '請輸入手機號碼'

    } else if (!reg.test(str)) {

      msg.code = 500

      msg.msg = '手機格式不正確'

    } else {

      msg.code = 200

      msg.msg = '成功'

    }

  } else if (flag == 2) {

    var reg_pass = /^(\w){6,20}$/

    // 密碼6到20位數字的密碼

   //爲空時提示請輸入密碼

    if (str == '') {

      msg.code = 500

      msg.msg = '請輸入密碼'

    } else if (!reg_pass.test(str)) {

      msg.code = 500

      msg.msg = '密碼格式不正確, 請輸入6-20位數字。'

    } else {

      msg.code = 200

    }

  } else if (flag == 3) {

    // 驗證碼，驗證輸入6位數的數字驗證碼

    var reg_yanzheng = /^\d{6}$/

    if (str == '') {

      msg.code = 500

      msg.msg = '請輸入驗證碼'

    } else if (!reg_yanzheng.test(str)) {

      msg.code = 500

      msg.msg = '驗證碼格式不正確, 請輸入6位數的驗證碼。'

    } else {

      msg.code = 200

    }

  }

  return msg

}

（3）調用

import { checkPhone } from '@/utils/common.js' //調用驗證的方法

   async register () {

      this.$message.closeAll()

      let ss = checkPhone(this.zhucePassword, 2) // 聲明一個ss變量接收要驗證的手機號碼或着驗證碼以及密碼

      // let sss = checkPhone(this.verification_code, 3) // 驗證碼 （this.zhucePasswordthis就是CheckPhone中的str而這裏的1，2，3就是flag）

      let ssss = checkPhone(this.againzhuce, 2) // 再次密碼

      if (ss.code === 500 || ssss.code === 500) {

        this.$message(ss.msg)

        return

      }//   if (this.checked === true) 是否閱讀和勾選協議

      if (this.zhucePassword === this.againzhuce) {

         if (this.checked === true) {

          let res = await this.$http.post('/api/register', {

            verification_code: '',

            mobile: this.mobile,

            password: this.zhucePassword

          })

          if (res.data.code === 200) {

            this.show = 2

            if (this.$route.path !== '/') {

              this.$router.push({ path: '/' })

            }

            // this.centerDialogVisible = false

            this.$store.commit('CHANGE_ZUCHE', false)

            this.$cookies.set('logintoken', res.data.data.user_token, {

              expires: getExpireTime(res.data.data.expire_time)

            })

            this.$store.commit('LOGIN_TOKEN', {

              loginToken: res.data.data.user_token

            })

            localStorage.setItem('userInfo', JSON.stringify(res.data.data))

            this.$store.commit('USERINFO', { userInfo: res.data.data })

            localStorage.setItem(

              'userId',

              JSON.stringify(res.data.data.user_id)

            )

            this.$store.commit('USER_ID', { userId: res.data.data.user_id })

          } else if (res.data.code === 10007) {

            this.$message('該手機號已經註冊!')

          }

        } else {

          this.$message('請閱讀並勾選用戶協議')

        }

      } else {

        this.$message('兩次密碼不一致')

      }

    }

2.時間戳轉換爲日期和時間，以及取小數後幾位

export function times (time傳入的參數)｛

let d = new Date(time*1000)//毫秒轉換成秒

let mon =(d.getMonth()+1)//轉換成月份的時候要注意是從0開始的記得加1

let day =d.getDate()

let h=d.getHours()

let m=d.getMinuters()

//利用二元判斷是否小於10，小於的話前面加0

mon = mon<10? "0"+mon:mon

day = day<10?"0"+day:day

  h = h < 10 ? '0' + h : h

  m = m < 10 ? '0' + m : m

//返回格式2019-11-11-8-23

return (

    d.getFullYear() + '-' + mon + '-' + day + '  ' + h + ':' + m

  )

｝

2.調用方法

import { times } from '@/utils/common.js'

調用一下

 methods: {

    times (time) {

      return shijian(time)

    }

  },

使用

 <span>{{shijian(item && item.begin_time?item.begin_time:"")}}</span>

3.取兩位小數

封裝

export function jsRound (number, precision) {
  return Math.round(+number + 'e' + precision) / Math.pow(10, precision)
}

調用

  methods: {
    // 四捨六入 .toFixed()
    // 取兩位小數
    format (t) {
      return jsRound(t, 2)
    }
  }
}

怎麼用

 <span>參團率：{{format(item.ave_group_rate*100)}}%</span>

 

三丶點擊導航欄切換顯示不一樣的內容

以下圖切換不一樣的位置顯示兩隊不一樣位置的數據對比

 

導航欄的代碼實現

<div
          v-for="(v,i) in list"
          :key="i"
          @click="changeL(i)"
          :class="{active: i == active}"
        >{{ v }}</div>
      </div>
//下面是說明

:class="{active: i == active}"根據下標綁定類實現點擊切換高亮

@click="changeL(i)"點擊事件傳入下標爲參數

  data () {
    return {
      list: ['上單', '打野', '中單', 'ADC', '輔助'],利用v-for顯示導航欄的顯示
      active: 0,默認下標爲0的高亮
      src: require('@/assets/image/default.png'),設置圖片src爲空時顯示的默認圖片
      //下面至關與映射，把後端返回的英文字段用中文渲染但頁面上
      //頁面上如何用以下

        //<span class="player-wz">{{areaString[item.game_id][item.area]}}</span>這裏的game_id爲1，即areaSring[1][item.area]

      areaString: {
        '1': {
          'top': '上單',
          'jun': '打野',
          'mid': '中路',
          'adc': 'ADC',
          'sup': '輔助'
        },
        '2': {
          'top': '一號位',
          'mid': '二號位',
          'adc': '三號位',
          'jun': '四號位',
          'sup': '五號位'
        }
      }
    }
  },

 methods: {
   //點擊事件，點擊切換顯示
    changeL (i) {
      this.active = i
    },
    // 四捨六入 .toFixed()
    // 取兩位小數
    format (t) {
      return jsRound(t, 2)
    }
  }

藍隊

<div class="content" v-for="(item,index) in teamPlayer[0]" :key="'a'+index" v-if="index == active">
.....//這裏是你要顯示的內容，kda,參團率什麼的
//

v-if="index == active"由於遍歷出來的有五個位置，因此要用v-if綁定下標index==active來切換顯示各個位置的信息

</div>

紅隊

<div class="content" v-for="(item,index) in teamPlayer[1]" :key="'aa'+index" v-if="index == active">
.....//這裏是你要顯示的內容，kda,參團率什麼的
key拼接aa是由於有兩個相同的key報錯以下

  vue.esm.js?efeb:628 [Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

</div>

 四丶往二維數組裏邊加字段

如下是返回的數據結構

  computed: {
    teamPlayer () {
      // 加字段
      let t = this.data.teamPlayer || []
      for (let i = 0; i < t.length; i++) {
        // e=teamPlayer[0,1]一維
        const e = t[i]
        for (let k = 0; k < e.length; k++) {
          // ee=teamPlaye[0,1,2,3,4]二維
          const ee = e[k]
          // 在二維數組裏邊加字段'kda'
          t[i][k]['kda'] = ((ee.ave_assists + ee.ave_kills) / ee.ave_deaths).toFixed(2)
        }
      }

      for (let i = 0; i < t.length; i++) {
        const e = t[i]
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // kda的百分比
          t[i][k]['kda_width'] = parseInt((t[i][k]['kda'] / (parseFloat(t[0][k]['kda']) + parseFloat(t[1][k]['kda']))) * 100)
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 兩隊的分經濟總和
          t[i][k]['double_economy'] = parseInt((parseFloat(t[0][k]['ave_min_economy']) + parseFloat(t[1][k]['ave_min_economy'])))
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 兩隊的分輸出總和
          t[i][k]['double_output'] = parseInt((parseFloat(t[0][k]['ave_min_output']) + parseFloat(t[1][k]['ave_min_output'])))
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 兩隊的參團率總和
          t[i][k]['double_groupRate'] = ((parseFloat(t[0][k]['ave_group_rate']) + parseFloat(t[1][k]['ave_group_rate'])))
        }
      }
      return t
    }

  },

完整代碼以下

<template>
  <div>
    <div class="all">
      <div class="top">
        <div
          v-for="(v,i) in list"
          :key="i"
          @click="changeL(i)"
          :class="{active: i == active}"
        >{{ v }}</div>
      </div>
      <!-- 藍隊 -->
      <!-- 盒子 -->
      <div>
        <!-- key重複聲明報錯 字符串拼接成不一樣的key -->
        <div class="content" v-for="(item,index) in teamPlayer[0]" :key="'a'+index" v-if="index == active">
          <!-- 隊伍頭像 -->
          <div class="team-icon">
            <img :src="item.team_icon?item.team_icon:srcO" alt />
          </div>
          <!-- 玩家信息 -->
          <div class="play">
            <!-- 左邊 -->
            <div class="player">
              <!-- 玩家頭像 -->
              <!-- <img class="touxiang" :src="item.head_img?item.head_img:src" alt /> -->
               <div class="touxiang" :style="{backgroundImage:'url('+(item.head_img)+')'}"></div>
              <!-- 玩家名字 -->
              <span class="player-id">{{item.player_name}}</span>
              <!-- 玩家位置 -->
              <span class="player-wz">{{areaString[item.game_id][item.area]}}</span>
            </div>
            <!-- 右邊 -->
            <div class="match-message">
              <!-- KDA -->
              <div class="kda">
                <!-- 進度條 -->
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: item.kda_width + '%'}"></div>
                </div>
                <div class="kill">
                  <span>KDA：{{item.ave_kills}}/{{item.ave_deaths}}/{{item.ave_assists}}</span>
                </div>
              </div>
              <!-- 分經濟 -->
              <div class="jing-ji kda">
                <div class="jd-1 jd-2">
                  <div class="jd-nei" :style="{width: (item.ave_min_economy/item.double_economy)*100+ '%'}"></div>
                </div>
                <div class="money kill">
                  <span>分均經濟：{{item.ave_min_economy}}</span>
                </div>
              </div>
              <!-- 分均輸出 -->
              <div class="shu-chu kda">
                <div class="jd-1 jd-3">
                  <div class="jd-nei" :style="{width: (item.ave_min_output/item.double_output)*100 + '%'}"></div>
                </div>
                <div class="shang-hai kill">
                  <span>分均輸出：{{item.ave_min_output}}</span>
                </div>
              </div>
              <!-- 參團率 -->
              <div class="can-tuan kda">
                <div class="jd-1 jd-4">
                  <div class="jd-nei" :style="{width: item.ave_group_rate*100 + '%'}"></div>
                </div>
                <div class="tuan-zhan kill">
                  <span>參團率：{{format(item.ave_group_rate*100)}}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 紅隊 -->
        <div class="second content" v-for="(item,index) in teamPlayer[1]" :key="'aa'+index" v-if="index == active">
          <!-- 戰隊圖標 -->
          <div class="team-icon">
            <img :src="item.team_icon?item.team_icon:srcO" alt />
          </div>
          <!-- 玩家信息 -->
          <div class="play">
            <!-- 左邊 -->
            <div class="player">
              <!-- 玩家頭像 -->
              <!-- <img class="touxiang" :src="item.head_img?item.head_img:src" alt /> -->
               <div class="touxiang" :style="{backgroundImage:'url('+(item.head_img)+')'}"></div>
              <!-- 玩家名字 -->
              <span class="player-id">{{item.player_name}}</span>
              <!-- 玩家位置 -->
              <span class="player-wz">{{areaString[item.game_id][item.area]}}</span>
            </div>
            <!-- 右邊 -->
            <div class="match-message">
              <!-- KDA -->
              <div class="kda">
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: item.kda_width + '%'}"></div>
                </div>
                <div class="kill">
                  <span>KDA：{{item.ave_kills}}/{{item.ave_deaths}}/{{item.ave_assists}}</span>
                </div>
              </div>
              <!-- 分均經濟 -->
              <div class="jing-ji kda">
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: (item.ave_min_economy/item.double_economy)*100 + '%'}"></div>
                </div>
                <div class="money kill">
                  <span>分均經濟：{{item.ave_min_economy}}</span>
                </div>
              </div>
              <!-- 分均輸出 -->
              <div class="shu-chu kda">
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: (item.ave_min_output/item.double_output)*100  + '%'}"></div>
                </div>
                <div class="shang-hai kill">
                  <span>分均輸出：{{item.ave_min_output}}</span>
                </div>
              </div>
              <!-- 參團率 -->
              <div class="can-tuan kda">
                <div class="jd-1">
                  <div class="jd-nei" :style="{width: (item.ave_group_rate*100)+ '%'}"></div>
                </div>
                <div class="tuan-zhan kill">
                  <span>參團率：{{format(item.ave_group_rate*100)}}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { jsRound } from '@/utils/common.js'
export default {
  name: 'player',
  props: ['data'],
  data () {
    return {
      list: ['上單', '打野', '中單', 'ADC', '輔助'],
      active: 0,
      src: require('@/assets/image/default.png'),
      srcO: require('@/assets/image/teamDefault.png'),
      areaString: {
        '1': {
          'top': '上單',
          'jun': '打野',
          'mid': '中路',
          'adc': 'ADC',
          'sup': '輔助'
        },
        '2': {
          'top': '一號位',
          'mid': '二號位',
          'adc': '三號位',
          'jun': '四號位',
          'sup': '五號位'
        }
      }
    }
  },
  computed: {
    teamPlayer () {
      // 加字段
      let t = this.data.teamPlayer || []
      for (let i = 0; i < t.length; i++) {
        // e=teamPlayer[0,1]
        const e = t[i]
        for (let k = 0; k < e.length; k++) {
          // ee=teamPlayer[0,1][0,1,2,3,4]
          const ee = e[k]
          // 在二維數組裏邊加字段'kda'
          t[i][k]['kda'] = ((ee.ave_assists + ee.ave_kills) / ee.ave_deaths).toFixed(2)
        }
      }

      for (let i = 0; i < t.length; i++) {
        const e = t[i]
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // kda的百分比
          t[i][k]['kda_width'] = parseInt((t[i][k]['kda'] / (parseFloat(t[0][k]['kda']) + parseFloat(t[1][k]['kda']))) * 100)
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 兩隊的分經濟總和
          t[i][k]['double_economy'] = parseInt((parseFloat(t[0][k]['ave_min_economy']) + parseFloat(t[1][k]['ave_min_economy'])))
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 兩隊的分輸出總和
          t[i][k]['double_output'] = parseInt((parseFloat(t[0][k]['ave_min_output']) + parseFloat(t[1][k]['ave_min_output'])))
        }
        for (let k = 0; k < e.length; k++) {
          const ee = e[k]
          // 兩隊的參團率總和
          t[i][k]['double_groupRate'] = ((parseFloat(t[0][k]['ave_group_rate']) + parseFloat(t[1][k]['ave_group_rate'])))
        }
      }
      return t
    }

  },
  methods: {
    changeL (i) {
      this.active = i
    },
    // 四捨六入 .toFixed()
    // 取兩位小數
    format (t) {
      return jsRound(t, 2)
    }
  }
}
</script>
<style lang="less" scoped>
.all {
  width: 420px;
  height: 508px;
  background: rgba(51, 51, 51, 1);
  .top {
    padding: 20px 20px 20px 16px;
    display: flex;
    width: 384px;
    height: 36px;
    div {
      font-size: 14px;
      background: rgba(40, 40, 40, 1);
      width: 76px;
      height: 36px;
      display: inline-block;
      text-align: center;
      line-height: 36px;
      color: #ccc;
      margin-left: 1px;
      cursor: pointer;
    }
    .active {
      background: #505050;
    }
  }
  .content {
    width: 400px;
    height: 194px;
    font-size: 12px;
    // background-color: #ccc;
    .team-icon {
      width: 20px;
      height: 20px;
      //   background-color: pink;
      margin-left: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .play {
      width: 400px;
      height: 164px;
      margin-top: 10px;
      display: flex;
      .player {
        width: 100px;
        height: 164px;
        // background-color: pink;
        padding-top: 30px;
        box-sizing: border-box;
        // 頭像用背景圖
        .touxiang {
           margin: 0 auto;
          // display: block;
          // width: 60px;
          // height: 60px;
          // background: rgba(153, 153, 153, 1);
          // border-radius: 30px;
            width: 60px;
            height: 60px;
            background: rgba(153, 153, 153, 1);
            border-radius: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
        .player-id {
          display: block;
          text-align: center;
          line-height: 36px;
          color: #ccc;
        }
        .player-wz {
          display: block;
          text-align: center;
          color: #ccc;
        }
      }
      .match-message {
        width: 300px;
        height: 164px;
        color: #ccc;
        // background-color: yellowgreen;
        .kda {
          width: 300px;
          height: 41px;
          .jd-1 {
            width: 300px;
            height: 6px;
            background-color: #999999;
            .jd-nei {
              height: 6px;
              background-color: #23A8F6;
            }
          }
          .kill {
            width: 300px;
            margin-top: 10px;
            // color:#ccc;
          }
        }
      }
    }
  }
  .second {
    margin-top: 20px;
    .match-message {
      .jd-1 {
        background-color: #999999;
      }
      .jd-nei {
        height: 6px;
        background-color: #f6233f !important;
      }
    }
  }
}
</style>

五丶有關src圖片拉伸

有時咱們從後臺返回的數據中拿到的圖片會很大，就會有拉伸的問題，這是時候咱們改成背景圖就能夠了

<div class="touxiang" :style="{backgroundImage:'url('+(item.head_img)+')'}"></div>

樣式：上面完整的代碼有用到

 .touxiang {
           margin: 0 auto;
            width: 60px;
            height: 60px;
            background: rgba(153, 153, 153, 1);
            border-radius: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

六丶vue中的移入移出，以及滾動到必定高度顯示和點擊置頂

滾動條滾動往下距離大於60時顯示如圖

具體代碼以下

<template>
  <div>
    <div class="all" v-if="btnFlag">

      <div class="jwplay" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <div class="wechat" :style="active">
        <img src="../../assets/image/default.png" alt />
      </div>
        <p>嘻嘻</p>
        <p>APP</p>
      </div>
      <div class="arrowTip"  @mouseover="one"  @mouseleave="two" ref="cc">
        <i class="jiantou font_family icon-shouqi" :style="aa"></i>
        <span :style="bb" @click="toTop">你好</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'wechat',
  data () {
    return {
      active: 'display:none',
      aa: 'display:block',
      bb: 'display:none',
      btnFlag: false//v-if讓它一開始不顯示
    }
  },

  // window對象，全部瀏覽器都支持window對象。它表示瀏覽器窗口，監聽滾動事件
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },

  methods: {
    mouseOver () {
      this.active = 'display:block'
    },
    mouseLeave () {
      this.active = 'display:none'
    },
    one () {
      this.aa = 'display:none'
      this.bb = 'display:block'
      var dd = this.$refs.cc
      dd.style.backgroundColor = '#ED5019'
    },
    two () {
      this.bb = 'display:none'
      this.aa = 'display:block'
      var dd = this.$refs.cc
      dd.style.backgroundColor = '#222222'
    },
    // 點擊圖片回到頂部方法，加計時器是爲了過渡順滑
    toTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 爲了計算距離頂部的高度，當高度大於60顯示回頂部圖標，小於60則隱藏，
    scrollToTop () {
      const that = this //this指向問題
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 60) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.all {
  width: 180px;
  height: 320px;
  // background-color: pink;
  position: fixed;
    right: 100px;
    top: 564px;

  .jwplay {

  .wechat {
    position: absolute;
    top: -200px;
    left: 0px;
    box-sizing: border-box;
    width: 180px;
    height: 190px;
    background:rgba(26,38,59,1);
    padding: 10px 10px;
    img {
      display: block;
      width: 160px;
      height: 160px;
      // background: yellow;
    }
  }
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    background: rgba(237, 80, 25, 1);
    border-radius: 6px;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    margin-top: 2px;
    padding-top: 12px;
    cursor: pointer;
    p {
      position: relative;
      font-size: 12px;

    }
  }
  .arrowTip {
    width: 60px;
    height: 60px;
    background:rgba(34,34,34,1);
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 8px;
    box-sizing: border-box;
    padding-top: 18px;
    cursor: pointer;

     i{
        font-size: 24px;
        display: block;
        text-align: center;
        // background-color: green;
        margin: 0 auto;
        color: #fff;
    }
    span{
        position: absolute;
        top: 88px;
        left: 74px;
        color: #fff;
    }
  }
}
</style>