活动页面

引入rem

1.将rem.js文件放置在index.html文件同级下
2.在index.html页面内引用

  <script type="text/javascript" src="./rem.js"></script>

活动页面css 设置

<style lang="less">
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .bgimg{
    margin: 0 auto;
    // background-image: url('~@/assets/images/luncky-box/bgImg.png');
    background-size: 100% 100%;
    min-height: 37.42rem;
    max-width: 7.5rem;
  }
</style>

动态改变背景图

<template>
  <div class="bgimg" :style="{'background-image':'url('+ bgImg + ')'}">
  </div>
</template>
<script>
import { getQueryString, languagePrefix} from '@/util/public.js'
export default {
  data() {
    return {
      bgImg: require('@/assets/images/lucky-box/bgImg.png'),
    }
  },  
  mounted() {
    let languageStr = getQueryString('language');
    let languagePrefixStr = languagePrefix(languageStr)
    this.language = languagePrefixStr
    if(languagePrefixStr == 'ar') {
      // 沙特阿拉伯
      this.bgImg = require('@/assets/images/lucky-box/bgImgAr.png')
    } else if (languagePrefixStr == 'id') {
      // 印尼
      this.bgImg = require('@/assets/images/lucky-box/bgImgId.png')
    } else if (languagePrefixStr == 'ru') {
      // 俄语
      this.bgImg = require('@/assets/images/lucky-box/bgImg.png')
    } else if (languagePrefixStr == 'vi') {
      // 越南语
      this.bgImg = require('@/assets/images/lucky-box/bgImgVi.png')
    }else {
      // 英语
      this.bgImg = require('@/assets/images/lucky-box/bgImg.png')
    }
  }
}
___________________util/public.js
export let getQueryString =  function(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
  let index = window.location.hash.indexOf('?')
  let searchStr =  window.location.hash.substring(index, window.location.hash.length)
  var r = searchStr.substr(1).match(reg); 
  console.log(searchStr)
    if (r != null) return unescape(r[2]); return null; 
}
// 判断语言前缀
export const languagePrefix = function(data) {
  data = '' + data
return data.substr(0, 2)
}
</script>

vue-i18n 使用

// npm 安装
npm install vue-i18n

vue滚动插件

// npm 安装
npm install vue-seamless-scroll --save

_____________template
         <vueSeamless :data="scrollList" :class-option="classOption" class="vueSeamless">
            <ul class="item">
              <li class="itemOption" v-for="(item, index) in scrollList" :key="index">
                <span>{{formatDate(item.awardTime)}} </span>
                <span>{{$t('usersLuckyBox')}}</span>
                <span>{{item.nickName}}</span>
                <span>{{$t('getLuckyBox')}}</span>
                <span>{{item.diamond}}</span>
                <span>{{$t('diamondsTreasureBoxLuckyBox')}}</span>
              </li>
            </ul>
          </vueSeamless>
_________________script
import vueSeamless from 'vue-seamless-scroll' // 引入滚动的插件
  components: {
    vueSeamless
  },
  computed: {
    classOption () {
      return {
        direction: 1,
        step: 0.1,
      }
    }
  },

computed: {
classOption() {
return {
// singleHeight: 26,
// waitTime: 2500,
step: 1.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight:21, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1200 // 单步运动停止的时间(默认值1000ms)
}
},
},

css

//超出长度文字隐藏显示···
  .overflowText-1 {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }