Merge branch 'master' of http://gitlab.vchangyi.com/liupengwei/party

程雨佳
2 parents d0392759 3d894794
Showing 4 changed files with 85 additions and 12 deletions
lottery.html
lottery.js
mobile.html
mobile.js
@@ -37,7 +37,8 @@
         .main-left .avatar-img {position: relative; width: 488px;height: 488px;border-radius: 50%;overflow: hidden;}
         .main-left .avatar-list {position: absolute;top: 0;left: 0;}
         .winner {width: 488px;height: 488px;border-radius: 50%;overflow: hidden;}
-        .main-left .avatar-item {float: left;width: 488px;height: 488px;border-radius: 50%;}
+        .main-left .avatar-item-wrap {float: left;width: 488px;height: 488px;border-radius: 50%;overflow: hidden;}
+        .main-left .avatar-item {width: 488px;}
         .main-left .avatar-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('./img/pc/avatar_bg.png') no-repeat;background-size: 100% 100%;}
         .user-info {display: flex;font-size: 55px;color: #FFCD7E;}
         .user-info .label {width: 292px;text-align: right;}
@@ -83,7 +84,9 @@
             <div class="avatar">
                 <div class="avatar-img">
                     <div class="avatar-list clearfix">
-                        <img class="avatar-item" src="./img/pc/default_avatar.png">
+                        <div class="avatar-item-wrap">
+                            <img class="avatar-item" src="./img/pc/default_avatar.png">
+                        </div>
                     </div>
                 </div>
                 <div class="winner hide">
@@ -52,6 +52,38 @@ let action = {
             $('.result-title').html(action.prizeList[action.curPrizeIndex].prize_name);
         }
     },
+    loadImage: function(dom, parent) {
+        var width = $(parent).width();
+        $(dom).on('load', function() {
+            var imgWidth = $(dom).width();
+            var imgHeight = $(dom).height();
+            var ratio = imgWidth / imgHeight;
+            if (ratio > 1) {
+                imgHeight = width;
+                imgWidth = width * ratio;
+                var margin = (imgWidth - width) / 2;
+                $(dom).css({
+                    width: imgWidth + 'px',
+                    height: imgHeight + 'px',
+                    'margin-left': -margin + 'px'
+                });
+            } else if (ratio < 1) {
+                imgWidth = width;
+                imgHeight = width / ratio;
+                var margin = (imgHeight - width) / 2;
+                $(dom).css({
+                    width: imgWidth + 'px',
+                    height: imgHeight + 'px',
+                    'margin-top': -margin + 'px'
+                });
+            } else {
+                $(dom).css({
+                    width: width + 'px',
+                    height: width + 'px'
+                });
+            }
+        });
+    },
     // 获取奖项列表
     getPrizeList: function() {
         let url = '/apicp.PrizeList.php';
@@ -113,18 +145,16 @@ let action = {
         let nameStr = '';
         let prizeNoStr = '';
         this.userList.map(user => {
-            if (user.headimg) {
-                imgStr += '<img class="avatar-item" src="' + user.headimg + '">';
-            } else {
-                imgStr += '<img class="avatar-item" src="' + defaultAvatar + '">';
-            }
+            var userAvatar = user.headimg ? user.headimg : defaultAvatar;
+            imgStr += '<div class="avatar-item-wrap"><img class="avatar-item" src="' + userAvatar + '"></div>';
             nameStr += '<span class="scroll-item">' + user.realname + '</span>';
             prizeNoStr += '<span class="scroll-item">' + user.prize_no + '</span>';
         });
         $('.avatar-list').html(imgStr);
         $('.user-name .scroll-list').html(nameStr);
         $('.user-no .scroll-list').html(prizeNoStr);
-        let imgListWidth = parseInt($('.avatar-list .avatar-item').css('width')) * this.userList.length + 'px';
+        this.loadImage('.avatar-list .avatar-item', '.avatar-list .avatar-item-wrap');
+        let imgListWidth = parseInt($('.avatar-list .avatar-item-wrap').css('width')) * this.userList.length + 'px';
         $('.avatar-list').css('width', imgListWidth);
         let nameListWidth = parseInt($('.user-name .scroll-item').css('width')) * this.userList.length + 'px';
         $('.user-name .scroll-list').css('width', nameListWidth);
@@ -142,7 +172,7 @@ let action = {
         $('.stop-btn').show();
  
         // 开始抽奖动画
-        imgTimer = this.lotteryAnimation($('.avatar-list'), '.avatar-item', 244);
+        imgTimer = this.lotteryAnimation($('.avatar-list'), '.avatar-item-wrap', 244);
         nameTimer = this.lotteryAnimation($('.user-name .scroll-list'), '.scroll-item', 146);
         prizeNoTimer = this.lotteryAnimation($('.user-no .scroll-list'), '.scroll-item', 146);
     },
@@ -179,7 +209,7 @@ let action = {
         $('.continue-btn, .start-btn').hide();
  
         // 开始抽奖动画
-        imgTimer = this.lotteryAnimation($('.avatar-list'), '.avatar-item', 244);
+        imgTimer = this.lotteryAnimation($('.avatar-list'), '.avatar-item-wrap', 244);
         nameTimer = this.lotteryAnimation($('.user-name .scroll-list'), '.scroll-item', 146);
         prizeNoTimer = this.lotteryAnimation($('.user-no .scroll-list'), '.scroll-item', 146);
     },
@@ -222,6 +252,7 @@ let action = {
         $('.winner .avatar-item').attr('src', userAvatar);
         $('.winner-name').html(this.currentUser.realname);
         $('.winner-no').html(this.currentUser.prize_no);
+        action.loadImage('.winner .avatar-item', '.winner');
  
         // 更新中奖名单模板
         action.updateResultTmpl();
@@ -133,6 +133,24 @@
         .dialog-reverse-btn {background: url('./img/mobile/dialog_btn_cancel.png') no-repeat;background-size: 100% 100%;color: #CF3727;}
         .dialog-close {position: absolute;top: -.6rem;right: .26rem;width: .76rem;height: .76rem;background: url('./img/mobile/dialog_close.png') no-repeat;background-size: 100% 100%;}
  
+        @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+            .home {padding-bottom: 3.5rem;}
+            .home-vote-btn {bottom: 2.1rem;}
+            .home-barrage-wrap {padding-bottom: .5rem;}
+            .bottom-btn {padding-bottom: .2rem;}
+        }
+        @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
+            .home {padding-bottom: 3.5rem;}
+            .home-vote-btn {bottom: 2.1rem;}
+            .home-barrage-wrap {padding-bottom: .5rem;}
+            .bottom-btn {padding-bottom: .2rem;}
+        }
+        @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
+            .home {padding-bottom: 3.5rem;}
+            .home-vote-btn {bottom: 2.1rem;}
+            .home-barrage-wrap {padding-bottom: .5rem;}
+            .bottom-btn {padding-bottom: .2rem;}
+        }
         .no-auth {width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: .32rem;color: #000;}
         .no-auth-icon {width: 3rem;margin-bottom: .3rem;}
         .no-auth-text {padding-bottom: 2rem;}
@@ -230,8 +248,9 @@
                    type="text"
                    placeholder="发条弹幕试试"
                    maxlength="50"
+                   onfocus="action.onFocus()"
                    oninput="action.toggleBtnState()"
-                   onblur="action.resetPosition()">
+                   onblur="action.onBlur()">
             <div class="send-btn">发送</div>
         </div>
     </div>
@@ -311,15 +311,35 @@ var action = {
     // 发送弹幕
     initBarrage: function() {
         var socket = io(socketUrl);
-        
+
         $('.send-btn').on('click', function() {
             if ($('.barrage-input').val() != '') {
                 socket.emit('barrage', $('.barrage-input').val());
+                action.showToast('发送成功');
                 $('.barrage-input').val('');
                 $('.send-btn').removeClass('active');
             }
         });
     },
+    onFocus: function() {
+        var width = window.screen.width;
+        var height = window.screen.height;
+        if ((width == 375 && height == 812) || (width == 414 && height == 896)) {
+            $('.home').css('padding-bottom', '3rem');
+            $('.home-vote-btn').css('bottom', '1.6rem');
+            $('.home-barrage-wrap').css('padding-bottom', '0');
+        }
+    },
+    onBlur: function() {
+        var width = window.screen.width;
+        var height = window.screen.height;
+        if ((width == 375 && height == 812) || (width == 414 && height == 896)) {
+            $('.home').css('padding-bottom', '3.5rem');
+            $('.home-vote-btn').css('bottom', '2.1rem');
+            $('.home-barrage-wrap').css('padding-bottom', '0.5rem');
+        }
+        this.resetPosition();
+    },
     resetPosition: function () {
         var currentPosition, timer;
         var speed = 1; // 页面滚动距离