chushihua

src/App.vue

@@ -0,0 +1,90 @@
+<template>
+  <div id="app" @click="getLastTime">
+    <router-view/>
+  </div>
+</template>
+<script>
+  import { mapState } from 'vuex'
+export default {
+  name: 'App',
+  data(){
+    return {
+      routeName: null,
+       lastTime:localStorage.getItem("lastTime"),
+       currentTime: new Date().getTime(),
+       timeOut :5*60*1000 //设置超时时间： 5分
+    }
+  },
+
+  mounted: function() {
+    var _this=this;
+    clearInterval(window['checkLoginTime']);
+     setTimeout(function(){
+
+       if(_this.routeName!="login"&&_this.webconfig.isSetExpired&&_this.routeName!="play_tel"){
+         window['checkLoginTime']= window.setInterval(_this.checkTimeout, 10000);
+       }
+     },0)
+
+
+
+  },
+  methods: {
+    getLastTime:function(){
+
+      var _this=this;
+      if(_this.routeName!="login"&&_this.webconfig.isSetExpired&&_this.routeName!="play_tel"){
+        localStorage.setItem("lastTime", new Date().getTime());
+        /* 定时器 间隔30秒检测是否长时间未操作页面 */
+        clearInterval(window['checkLoginTime']);
+        window['checkLoginTime'] = window.setInterval(_this.checkTimeout, 10000);
+      //  debugger;
+      }
+    },
+     checkTimeout() {
+
+       var _this=this;
+       _this.currentTime = new Date().getTime(); //更新当前时间
+       _this.lastTime = localStorage.getItem("lastTime");
+    if (Number(_this.currentTime) - Number(_this.lastTime) > _this.timeOut) { //判断是否超时
+      console.log("超时");
+      this.$message.error('长时间没操作,请重新登录！');
+      this.$cookies.remove('userInfo');
+      this.$router.push('/');
+      localStorage.removeItem('lastTime');
+      clearInterval(window['checkLoginTime']);
+
+      window.location.reload();
+
+    }
+  }
+
+  },
+  computed: {
+          ...mapState(['webconfig'])
+},
+  watch:{
+
+    $route:{
+      handler: function(newData){
+        var _this=this;
+        this.routeName=newData.name;
+        var table_id=0;
+        // 判断台名 传tab_id
+        if(newData.name=='play'){
+          table_id=parseInt(this.$route.query.table);
+        }else{
+          table_id=0;
+        }
+        this.$store.dispatch('updateKeepline',table_id);
+      },
+      immediate:true
+    },
+  }
+
+}
+</script>
+
+<style>
+
+</style>

src/api/index.js

@@ -0,0 +1,100 @@
+import axios from 'axios'
+import qs from 'qs'
+
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; 
+
+let base = 'http://www.abc.com/apicloud';
+let token = '';
+
+
+let http = axios.create({
+  baseURL: 'http://localhost:8080/',
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
+  },
+  transformRequest: [function (data) {
+    let newData = '';
+    for (let k in data) {
+      if (data.hasOwnProperty(k) === true) {
+        newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
+      }
+    }
+    return newData;
+  }]
+});
+
+
+function apiAxios(method, url, params, response) {
+  http({
+    method: method,
+    url: url,
+    data: method === 'POST' || method === 'PUT' ? params : null,
+    params: method === 'GET' || method === 'DELETE' ? params : null,
+  }).then(function (res) {
+    response(res);
+  }).catch(function (err) {
+    response(err);
+  })
+}
+
+export default {
+	get: function (url, params, response) {
+	    return apiAxios('GET', url, params, response)
+	},
+	post: function (url, params, response) {
+	  return apiAxios('POST', url, params, response)
+	},
+	put: function (url, params, response) {
+	  return apiAxios('PUT', url, params, response)
+	},
+	delete: function (url, params, response) {
+	  return apiAxios('DELETE', url, params, response)
+	}
+}
+
+
+
+
+
+export const bmz = params => { return axios.get(`${base1}/getGroupCodeList`, { params: params }); };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/common/css/play.css

@@ -0,0 +1,275 @@
+  .play{
+    width: 14.5rem;
+    overflow: hidden;
+    position:absolute;
+    top: 0;
+    right: 0;
+  }
+  .play .play-top{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% - 3.05rem);
+    height: 0.5rem;
+    background: rgba(0,0,0,0.3);
+    z-index: 99;
+
+  }
+  .play .play-top .notice{
+    width:6.5rem;
+    background: url(../../common/image/icon/icon_notice.png) 0.1rem 0.12rem no-repeat;
+    -webkit-background-size: 20px auto;
+    background-size: 20px auto;
+    padding-left: 40px;
+    float: left;
+    height: 0.5rem;
+  }
+  .play .notice .tip-box{
+    position: absolute;
+    left:50%;
+    margin-left: -2.5rem;
+    top: 0.58rem;
+    z-index: 999;
+    background: rgba(0,0,0,0.5);
+    color: #faf1b4;
+    font-weight: 600;
+    width:5rem;
+    padding: 0.1rem;
+    border-radius: 5px;
+    -webkit-box-shadow:0 0 2px rgba(255, 255, 255, .2);  
+    -moz-box-shadow:0 0 2px rgba(255, 255, 255, .2);  
+    box-shadow:0 0 2px rgba(255, 255, 255, .2); 
+    transition: 0.5s all; 
+    display: none;
+  }
+  .play .notice:hover .tip-box{
+    display: block;
+  }
+  .play .notice .tip-box:after{
+    content: "";
+    width:0;
+    height:0;
+    border-right:10px solid transparent;
+    border-left:10px solid transparent;
+    border-bottom:10px solid rgba(0,0,0,0.8);
+    position: absolute;
+    top: -8px;
+    left:50%;
+    margin-left: -5px;
+  }
+  .play .play-top .setup .btn{
+    float: left;
+    width:0.36rem;
+    height: 0.5rem;
+    margin-left: 0.12rem;
+    -webkit-background-size: 0.35rem;
+    background-size: 0.35rem;
+    background-position-x: center;
+    background-position-y: center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+   .play .play-top .hall-btn{
+    background-image:url(../../common/image/icon/btn_hall.png);
+  }
+  .play .play-top .audio-btn.on{
+    background-image:url(../../common/image/icon/btn_volume_on.png);
+  }
+  .play .play-top .audio-btn{
+    background-image:url(../../common/image/icon/btn_volume_off.png);
+  }
+  .play .play-top .fontj{
+    background-image:url(../../common/image/icon/jt.png);
+
+  }
+  .play .play-top .service{
+    background-image:url(../../common/image/icon/kf.png);
+
+  }
+  .play .play-top .history-btn{
+    background-image:url(../../common/image/icon/btn_history.png);
+  }
+  .play .play-top .rules-btn{
+    background-image:url(../../common/image/icon/btn_help.png);
+  }
+  .play .play-top .updatepwd-btn{
+    background-image:url(../../common/image/icon/btn_lock.png);
+  }
+  .play .play-top .setting-btn{
+    background-image:url(../../common/image/icon/btn_setting.png);
+  }
+     .play .play-top .signout-btn{
+    background-image:url(../../common/image/icon/btn_exit.png);
+  }
+
+
+  
+
+  .play .play-top .notice marquee{
+    line-height: 0.5rem;
+    margin-right: 5px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 12px;
+    display: block;
+    height: 0.5rem;
+  }
+
+
+  .play .video-view{
+    width: 100%;
+    height: 100%;
+  }
+
+  .play .play-video{
+    width:calc(100% - 3.05rem);
+    height:calc(6.4rem - 2px);
+    background: url(../../common/image/play_bg.jpg) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    overflow: hidden;
+ }
+.play .play-video.setSwitch{  width:calc(100% - 0rem);}
+  .play .play-top.setSwitchTop {width: calc(100% - 0rem);}
+.play .play-top.setSwitchTop .notice{width: 9.5rem}
+
+.play .play-video .video-box{
+  width: 100%;
+  height: 100%;
+  transition: all .5s;
+}
+
+.play .play-video .el-loading-mask{
+  z-index: 1;
+}
+.play .el-loading-spinner .path{
+  stroke: #fbf0b5;
+}
+.play .el-loading-spinner .el-loading-text{
+  color:#fbf0b5;
+}
+
+.play .play-video .minvideo{
+  width: 3.5rem;
+  height: 2.2rem;
+  position: absolute;
+  top: 0.5rem;
+  left: 0.1rem;
+  z-index: 1;
+  background: url(../../common/image/minvideo_bg.jpg) no-repeat;
+  -webkit-background-size: 100% 100%;
+  background-size: 100% 100%;
+  
+}
+
+
+.play .play-video .nn .minvideo{
+  left: auto;
+  top: 2.3rem;
+  right: 0.1rem;
+}
+
+.play .play-video .iframe{
+  transition: all 2.0s;
+}
+
+.play .play-video .scale{
+  transform: scale(2.5) translateY(-26%);
+}
+
+
+
+.play .el-progress--circle{
+  position: absolute;
+  z-index: 99;
+  right:1.5rem;
+  bottom:1.5rem;
+}
+
+.el-progress--circle .el-progress__text{
+  color: #fff;
+  font-size: 40px !important;
+  font-weight: bold;
+}
+.el-progress-circle{
+  background: rgba(0,0,0,0.4);
+  border-radius: 100%;
+}
+
+
+/*打赏*/
+.reward-btn{
+  position: absolute;
+  bottom: 22px;
+  left: 22px;
+  width: 75px;
+  height: 45px;
+  background: url(../../common/image/ds_icon.png) no-repeat;
+  -webkit-background-size: 100%;
+  background-size: 100%;
+  cursor: pointer;
+  z-index: 2;
+}
+.reward-btn:active{
+  opacity: 0.8;
+}
+
+.reward-box{
+  width: 450px;
+  height: 130px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-top: -65px;
+  margin-left: -225px;
+  background: rgba(0,0,0,0.6);
+  border-radius: 5px;
+  border: 1px solid #88a366;
+  z-index: 999;
+}
+
+.reward-box .off-btn{
+    width: 0.466667rem;
+    height: 0.466667rem;
+    position: absolute;
+    right: -0.16rem;
+    top: -0.16rem;
+    background: url(../../common/image/off_box_bg.png);
+    background-size: 100%;
+}
+
+.reward-box .item{
+  width: 20%;
+  float: left;
+  text-align: center;
+  color: #f3ff47;
+  font-weight: 500;
+  margin-top: 30px;
+  cursor: pointer;
+}
+
+.reward-box .item:hover img{
+  -webkit-animation-timing-function:ease-in-out;
+  -webkit-animation-name:bigsmall;
+  -webkit-animation-duration:500ms;
+  -webkit-animation-iteration-count:infinite;
+  -webkit-animation-direction:alternate;
+}
+
+.reward-box .item p{
+  padding-top: 8px;
+  font-size: 12px;
+}
+.reward-box .item img{
+  width: 45px;
+}
+
+
+.maskclick{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}

src/common/css/reset.css

@@ -0,0 +1,380 @@
+body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
+body {
+   font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: url(../image/bg.png) center center;
+  -webkit-background-size: cover;
+  background-size: cover;
+  font-size: 12px;
+}
+body {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -ms-flex-align: center;
+    align-items: center;
+    overflow: hidden;
+}
+body, html {
+    width: 100%;
+    height: 100%;
+}
+
+q:before,q:after {content:"";}  
+
+
+fieldset,img,abbr,acronym {border: 0 none;}
+abbr,acronym {font-variant: normal;}
+legend {color:#000;}
+
+address,caption,cite,code,dfn,em,strong,th,var {   
+　　font-weight: normal;   
+　　font-style: normal;   
+}
+
+sup {vertical-align: text-top;}
+sub {vertical-align: text-bottom;}
+
+table{   
+　　border-collapse: collapse; 
+　　border-spacing:0;   
+}   
+
+caption,th {text-align: left;}
+input,img,select,button {vertical-align:middle; border:none; text-decoration: none; outline:none;}
+
+
+ol,ul {list-style: none;}  
+
+
+input,button,textarea,select,optgroup,option {
+    font-family:inherit;
+    font-size:inherit;
+    font-style:inherit;
+    font-weight:inherit;
+}
+
+
+h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;   
+}   
+
+
+del,ins,a {text-decoration:none; color: #555;}
+
+a:hover,a:active{color:#6DD1C1; text-decoration:none;} 
+
+input[type="submit"] {cursor: pointer;}
+button {cursor: pointer;}
+input::-moz-focus-inner { border: 0; padding: 0;}
+
+.clearfix{zoom:1;}
+.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
+
+.fl{float:left;}
+.fr{float:right;} 
+
+.box-sizing{
+    box-sizing:border-box;
+    -moz-box-sizing:border-box; 
+    -webkit-box-sizing:border-box; 
+}
+
+img {
+max-width: 100%;
+height: auto;
+width:auto\9; /* ie8 */
+-ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/
+}
+.transition{
+    -webkit-transition: all 1s;
+    -moz-transition: all 1s;
+    -ms-transition: all 1s;
+    -o-transition: all 1s;
+    transition: all 1s;
+}
+
+.iframe{
+  border: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.table-box{
+    display: table;
+    width: 100%;
+}
+.table-box .cell{
+    display: table-cell; 
+}
+
+body .main {
+    position: relative;
+    width: 16.8rem;
+    height: 8.9rem;
+    overflow: hidden;
+    background: rgba(0,0,0,0.5);
+}
+
+.btn:active{
+    opacity: 0.8
+}
+.red{color: #b33025;}
+.blue{color: #117cfd;}
+.green{color: #149e38;}
+/*滑动开关*/
+.btn-switch{
+    width: .7rem;
+    height: .32rem;
+    padding: 0;
+    transition: all .3s;
+    margin-left: 0;
+    border: 1px solid #6e6e6e;
+    background: #493d37;
+    border-radius: .32rem;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+.btn-switch:after{
+    position: absolute;
+    content: "关";
+    font-size: .2rem;
+    top: .01rem;
+    right: .1rem;
+    color: #fff;
+    transition: all .5s;
+}
+.btn-switch.on {
+    background: #2f8213;
+}
+.btn-switch.on:after {
+    content: "开";
+    -webkit-transform: translateX(-.26rem);
+    transform: translateX(-.26rem);
+}
+.btn-switch.on:before {
+    -webkit-transform: translateX(.4rem);
+    transform: translateX(.4rem);
+}
+.btn-switch:before {
+    position: absolute;
+    content: " ";
+    width: .26rem;
+    height: .26rem;
+    background: #fff;
+    border-radius: .13rem;
+    top: .019rem;
+    left: .01rem;
+    right: auto;
+    transition: all .5s;
+}
+.doloding .path{
+    stroke-width: 3;
+    stroke: #faf1b4;
+}
+
+.doloding .el-loading-text{
+    color: #faf1b4;
+}
+
+video{
+ width: 100%;
+ height: 100%;
+ object-fit:fill;
+}
+.login .swiper-pagination .swiper-pagination-bullet-active{
+    background: #e2ac2d;
+  }
+.el-tooltip__popper.is-dark{
+    background: rgba(0,0,0,0.8);
+    color: #faf1b4;
+    font-weight: 600;
+}
+
+
+.hidden{
+  visibility: hidden;
+}
+.unclick{
+  pointer-events:none;
+}
+
+.nonedata-box{
+  position: absolute;
+  text-align: center;
+  background: rgba(0,0,0,0.8);
+  color: #faf1b4;
+  font-weight: 600;
+  width: 5rem;
+  left:50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.nonedata-box .title{
+  font-size: 0.22rem;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.1rem 0;
+  font-weight: bold;
+  width: 100%;
+}
+.nonedata-box .text{
+  font-size: 0.2rem;
+  line-height: 1.8rem;
+}
+
+
+@-webkit-keyframes bigsmall{
+  0% {
+    opacity:.8;
+    transform: scale(1.25);
+    
+  }
+100% {
+    opacity:1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bigsmall{
+  0% {
+    opacity:.8;
+    transform: scale(1.25);
+    
+  }
+100% {
+    opacity:1;
+    transform: scale(1);
+  }
+}
+
+
+@-webkit-keyframes breathe {
+  0% {
+    opacity:.5;
+    -moz-box-shadow: 0px 1px 10px #030c03;
+    box-shadow: 0px 1px 10px #030c03;
+  }
+100% {
+    opacity:1;
+    box-shadow:0 1px 20px rgba(59,255,255,1);
+    -moz-box-shadow:0 1px 20px rgba(59,255,255,1);
+  }
+}
+
+
+@keyframes breathe {
+  0% {
+    opacity:.5;
+    -moz-box-shadow: 0px 1px 10px #030c03;
+    box-shadow: 0px 1px 10px #030c03;
+  }
+100% {
+    opacity:1;
+    box-shadow:0 1px 20px rgba(59,255,255,1);
+    -moz-box-shadow:0 1px 20px rgba(59,255,255,1);
+  }
+}
+
+
+@keyframes lightY {
+  0%,
+  70% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+@-webkit-keyframes lightY {
+  0%,
+  70% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+
+@-webkit-keyframes flipInY {
+    0% {
+      -webkit-transform: perspective(400px) rotateY(90deg);
+      transform: perspective(400px) rotateY(90deg);
+      opacity: 0;
+    }
+    0%,
+    40% {
+      -webkit-animation-timing-function: ease-in;
+      animation-timing-function: ease-in;
+    }
+    40% {
+      -webkit-transform: perspective(400px) rotateY(-20deg);
+      transform: perspective(400px) rotateY(-20deg);
+    }
+    60% {
+      -webkit-transform: perspective(400px) rotateY(10deg);
+      transform: perspective(400px) rotateY(10deg);
+      opacity: 1;
+    }
+    80% {
+      -webkit-transform: perspective(400px) rotateY(-5deg);
+      transform: perspective(400px) rotateY(-5deg);
+    }
+    to {
+      -webkit-transform: perspective(400px);
+      transform: perspective(400px);
+    }
+}
+@keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+  0%,
+  40% {
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-20deg);
+    transform: perspective(400px) rotateY(-20deg);
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotateY(-5deg);
+    transform: perspective(400px) rotateY(-5deg);
+  }
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+
+
+
+
+
+
+
+