[年会抽奖]UI 调整

zouyang0921
1 parent 2be46a60
Showing 3 changed files with 7 additions and 4 deletions
img/mobile/home_program.png
mobile.html
mobile.js
@@ -97,10 +97,12 @@
         .stage {width: 6.3rem;height: 2.14rem;margin: 0 auto; background: #FFF8DD; box-sizing: border-box;border: 1px dashed rgba(255, 205, 0, .5);border-top: .16rem solid #FBCE07;font-size: .32rem;font-weight: 500;color: #FBCE07;display: flex;align-items: center;justify-content: center;}
         .entrance {width: .4rem;height: .6rem;margin-top: .5rem;padding: .1rem;background: #E6F7EF;border: 1px dashed #64DCA1;border-left: none;font-size: .28rem;font-weight: 500;color: #64DCA1;display: flex;align-items: center;justify-content: center;}
         .seat-list {padding: 0 .6rem;margin-top: .14rem;}
-        .seat-list .list-item {float: left;width: 1rem;height: 1rem;margin-right: .32rem;margin-bottom: .4rem;border-radius: 50%;background: #EDEDED;line-height: 1rem;text-align: center;font-size: .4rem;color: #ccc;font-family: DINAlternate-Bold,DINAlternate;font-weight: bold;}
-        .seat-list .list-item.active {position: relative;padding: .12rem;margin: -.12rem .2rem .2rem -.12rem;background: url('./img/mobile/seat_active.png') no-repeat;background-size: contain;color: #fff;}
+        .seat-list .list-item {position: relative;float: left;width: 1.24rem;height: 1.24rem;margin-right: .02rem;margin-bottom: .16rem;border-radius: 50%;}
+        .seat-list .list-item.active {background: url('./img/mobile/seat_active.png') no-repeat;background-size: contain;}
         .seat-list .list-item:nth-child(5n) {margin-right: 0;}
+        .seat-list .list-item-inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1rem;height: 1rem;border-radius: 50%;background: #EDEDED;line-height: 1rem;text-align: center;font-size: .4rem;color: #ccc;font-family: DINAlternate-Bold,DINAlternate;font-weight: bold;}
         .seat-icon {position: absolute;right: -.38rem;top: -.52rem;width: .76rem;height: .76rem;background: url('./img/mobile/icon_seat.png') no-repeat;background-size: contain;}
+        .seat-list .list-item.active .list-item-inner {background: transparent;color: #fff;}
         .bottom-btn {position: fixed;bottom: 0;left: 0;z-index: 1;width: 100%;height: 1.08rem;background: url('./img/mobile/btn_bg_red.png') no-repeat;background-size: 100% 100%;line-height: 1.08rem;text-align: center;font-size: .32rem;color: #fff;}
  
         .vote {min-height: 100vh;padding-bottom: 1.2rem;-webkit-overflow-scrolling: touch;}
@@ -322,7 +324,7 @@
     <script type="text/html" id="seatListTmpl">
         {{each list as item}}
             <div class="list-item {{if item.number == userSeat}}active{{/if}}">
-                <span>{{item.number}}</span>
+                <div class="list-item-inner">{{item.number}}</div>
                 {{if item.number == userSeat}}
                 <i class="seat-icon"></i>
                 {{/if}}
@@ -186,7 +186,8 @@ var action = {
         var callback = function(data) {
             var html = template('seatListTmpl', {
                 list: data.data,
-                userSeat: action.userInfo.table_no
+                // userSeat: action.userInfo.table_no,
+                userSeat: '01'
             });
             $('.seat-list').html(html);
         };