刘鹏伟 / party · Commits

Commit 8832baca03f332aee6d11b56b47ce5a312b025b9

Authored by zouyang0921
1 parent 39e640a2

[年会抽奖]修复弹框UI错乱问题

Inline Side-by-side
Showing 1 changed file with 11 additions and 11 deletions
mobile.html
  View file @8832bac
@@ -66,7 +66,7 @@ @@ -66,7 +66,7 @@
66 .pic-btn-wrap {position: absolute;bottom: 1.2rem;left: 50%;transform: translateX(-50%);width: 6.82rem;padding-bottom: .72rem;} 66 .pic-btn-wrap {position: absolute;bottom: 1.2rem;left: 50%;transform: translateX(-50%);width: 6.82rem;padding-bottom: .72rem;}
67 .pic-btn-album {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 3rem;display: flex;align-items: center;justify-content: center;} 67 .pic-btn-album {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 3rem;display: flex;align-items: center;justify-content: center;}
68 .pic-btn-album .album-text {font-size: .28rem;color: #fff;margin-right: .1rem;} 68 .pic-btn-album .album-text {font-size: .28rem;color: #fff;margin-right: .1rem;}
69 - .pic-btn-album .pic-arrow {width: .32rem;height: .32rem;background: url('./img/mobile/pic_arrow.png') no-repeat;background-size: contain;} 69 + .pic-btn-album .pic-arrow {width: .32rem;height: .32rem;background: url('./img/mobile/pic_arrow.png') no-repeat;background-size: 100% 100%;}
70 70
71 .home {padding-bottom: 3rem; background: url('./img/mobile/home_bg.png') no-repeat;background-size: cover;} 71 .home {padding-bottom: 3rem; background: url('./img/mobile/home_bg.png') no-repeat;background-size: cover;}
72 .user-info {position: relative;padding-top: 1.16rem;} 72 .user-info {position: relative;padding-top: 1.16rem;}
@@ -75,13 +75,13 @@ @@ -75,13 +75,13 @@
75 .info-center {position: absolute;top: .4rem;left: 50%;transform: translateX(-50%);} 75 .info-center {position: absolute;top: .4rem;left: 50%;transform: translateX(-50%);}
76 .user-avatar {position: relative;width: 1.34rem;height: 1.4rem;box-sizing: border-box;padding-top: .24rem;padding-left: .18rem;margin: 0 auto;overflow: hidden;} 76 .user-avatar {position: relative;width: 1.34rem;height: 1.4rem;box-sizing: border-box;padding-top: .24rem;padding-left: .18rem;margin: 0 auto;overflow: hidden;}
77 .user-avatar .avatar-img {width: 1.14rem;height: 1.14rem;border-radius: 50%;} 77 .user-avatar .avatar-img {width: 1.14rem;height: 1.14rem;border-radius: 50%;}
78 - .user-avatar .avatar-border {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('./img/mobile/home_avatar.png') no-repeat;background-size: contain;} 78 + .user-avatar .avatar-border {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('./img/mobile/home_avatar.png') no-repeat;background-size: 100% 100%;}
79 .info-center .user-name {text-align: center;font-size: .36rem;font-weight: 500;color: #C93120;margin-top: .1rem;} 79 .info-center .user-name {text-align: center;font-size: .36rem;font-weight: 500;color: #C93120;margin-top: .1rem;}
80 .info-main {position: absolute;bottom: .8rem;left: 50%;transform: translateX(-50%); width: 6.3rem; height: .82rem;display: flex;align-items: center;} 80 .info-main {position: absolute;bottom: .8rem;left: 50%;transform: translateX(-50%); width: 6.3rem; height: .82rem;display: flex;align-items: center;}
81 .info-main-item {position: relative;flex: 1;-webkit-flex: 1;text-align: center;} 81 .info-main-item {position: relative;flex: 1;-webkit-flex: 1;text-align: center;}
82 .info-main-item .item-content {font-size: .32rem;font-weight: 600;color: #C93120;margin-bottom: .04rem;} 82 .info-main-item .item-content {font-size: .32rem;font-weight: 600;color: #C93120;margin-bottom: .04rem;}
83 .info-main-item .item-label {font-size: .24rem;font-weight: 400;color: #631810;} 83 .info-main-item .item-label {font-size: .24rem;font-weight: 400;color: #631810;}
84 - .enter-btn {position: absolute; top: -.48rem;right: .4rem;width: 1.18rem;height: .48rem;background: url('./img/mobile/home_enter.png') no-repeat;background-size: contain;} 84 + .enter-btn {position: absolute; top: -.48rem;right: .4rem;width: 1.18rem;height: .48rem;background: url('./img/mobile/home_enter.png') no-repeat;background-size: 100% 100%;}
85 .info-main-space {width: .02rem;height: .6rem;background: rgba(208, 162, 82, .2);} 85 .info-main-space {width: .02rem;height: .6rem;background: rgba(208, 162, 82, .2);}
86 .home-title {width: 5.64rem;height: 1.46rem;margin: .2rem auto 0;background: url('./img/mobile/home_title.png') no-repeat;background-size: 100%;} 86 .home-title {width: 5.64rem;height: 1.46rem;margin: .2rem auto 0;background: url('./img/mobile/home_title.png') no-repeat;background-size: 100%;}
87 .home-list {width: 100%;height: 21.82rem;margin-top: -.2rem;background: url('./img/mobile/home_program.png') no-repeat;background-size: 100%;} 87 .home-list {width: 100%;height: 21.82rem;margin-top: -.2rem;background: url('./img/mobile/home_program.png') no-repeat;background-size: 100%;}
@@ -98,10 +98,10 @@ @@ -98,10 +98,10 @@
98 .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;} 98 .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;}
99 .seat-list {padding: 0 .6rem;margin-top: .14rem;} 99 .seat-list {padding: 0 .6rem;margin-top: .14rem;}
100 .seat-list .list-item {position: relative;float: left;width: 1.24rem;height: 1.24rem;margin-right: .02rem;margin-bottom: .16rem;border-radius: 50%;} 100 .seat-list .list-item {position: relative;float: left;width: 1.24rem;height: 1.24rem;margin-right: .02rem;margin-bottom: .16rem;border-radius: 50%;}
101 - .seat-list .list-item.active {background: url('./img/mobile/seat_active.png') no-repeat;background-size: contain;} 101 + .seat-list .list-item.active {background: url('./img/mobile/seat_active.png') no-repeat;background-size: 100% 100%;}
102 .seat-list .list-item:nth-child(5n) {margin-right: 0;} 102 .seat-list .list-item:nth-child(5n) {margin-right: 0;}
103 .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;} 103 .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;}
104 - .seat-icon {position: absolute;right: -.38rem;top: -.52rem;width: .76rem;height: .76rem;background: url('./img/mobile/icon_seat.png') no-repeat;background-size: contain;} 104 + .seat-icon {position: absolute;right: -.38rem;top: -.52rem;width: .76rem;height: .76rem;background: url('./img/mobile/icon_seat.png') no-repeat;background-size: 100% 100%;}
105 .seat-list .list-item.active .list-item-inner {background: transparent;color: #fff;} 105 .seat-list .list-item.active .list-item-inner {background: transparent;color: #fff;}
106 .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;} 106 .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;}
107 107
@@ -113,10 +113,10 @@ @@ -113,10 +113,10 @@
113 .program-item:not(:last-of-type) {border-bottom: 1px solid #F7F7F7;} 113 .program-item:not(:last-of-type) {border-bottom: 1px solid #F7F7F7;}
114 .program-item-icon {width: .44rem;height: .44rem;box-sizing: border-box;border: 1px solid rgba(201, 49, 32, .5);border-radius: 50%;} 114 .program-item-icon {width: .44rem;height: .44rem;box-sizing: border-box;border: 1px solid rgba(201, 49, 32, .5);border-radius: 50%;}
115 .program-item-label {flex: 1;-webkit-flex: 1;max-width: 6rem;overflow: hidden;word-break: break-all;font-size: .3rem;color: #000;margin-left: .22rem;} 115 .program-item-label {flex: 1;-webkit-flex: 1;max-width: 6rem;overflow: hidden;word-break: break-all;font-size: .3rem;color: #000;margin-left: .22rem;}
116 - .program-item.active .program-item-icon {background: url('./img/mobile/vote_active.png') no-repeat;background-size: contain;border: none;} 116 + .program-item.active .program-item-icon {background: url('./img/mobile/vote_active.png') no-repeat;background-size: 100% 100%;border: none;}
117 117
118 .dialog-wrap {position: fixed;z-index: 10;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,.5);} 118 .dialog-wrap {position: fixed;z-index: 10;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,.5);}
119 - .dialog-main {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 9.36rem;box-sizing: border-box;padding-top: 3.2rem;background: url('./img/mobile/dialog_bg.png') no-repeat;background-size: contain;} 119 + .dialog-main {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 9.36rem;box-sizing: border-box;padding-top: 3.2rem;background: url('./img/mobile/dialog_bg.png') no-repeat;background-size: 100%;}
120 .dialog-title {width: 3.7rem;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;} 120 .dialog-title {width: 3.7rem;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
121 .title-icon-left, .title-icon-right {width: .9rem;height: .2rem;} 121 .title-icon-left, .title-icon-right {width: .9rem;height: .2rem;}
122 .title-icon-left {background: url('./img/mobile/dialog_title1.png') no-repeat;background-size: 100% 100%;} 122 .title-icon-left {background: url('./img/mobile/dialog_title1.png') no-repeat;background-size: 100% 100%;}
@@ -124,12 +124,12 @@ @@ -124,12 +124,12 @@
124 .title-text {font-size: .32rem;font-weight: 600;color: #C93120;} 124 .title-text {font-size: .32rem;font-weight: 600;color: #C93120;}
125 .dialog-content {width: 5rem;margin: .4rem auto 0;padding: .2rem;line-height: .46rem;font-size: .28rem;color: #C93120;} 125 .dialog-content {width: 5rem;margin: .4rem auto 0;padding: .2rem;line-height: .46rem;font-size: .28rem;color: #C93120;}
126 .content-row {text-align: center;} 126 .content-row {text-align: center;}
127 - .dialog-btn-single {width: 4.3rem;height: .94rem;margin: 1rem auto 0;background: url('./img/mobile/dialog_btn_bg.png') no-repeat;background-size: cover;line-height: .94rem;text-align: center; font-size: .32rem;color: #FBDB97;} 127 + .dialog-btn-single {width: 4.3rem;height: .94rem;margin: 1rem auto 0;background: url('./img/mobile/dialog_btn_bg.png') no-repeat;background-size: 100% 100%;line-height: .94rem;text-align: center; font-size: .32rem;color: #FBDB97;}
128 .dialog-btn-wrap {width: 4.62rem;margin: 1rem auto;display: flex;justify-content: space-between;} 128 .dialog-btn-wrap {width: 4.62rem;margin: 1rem auto;display: flex;justify-content: space-between;}
129 .dialog-btn-item {width: 2.12rem;height: .94rem;line-height: .94rem;text-align: center; font-size: .32rem;} 129 .dialog-btn-item {width: 2.12rem;height: .94rem;line-height: .94rem;text-align: center; font-size: .32rem;}
130 - .dialog-theme-btn {background: url('./img/mobile/dialog_btn_confirm.png') no-repeat;background-size: cover;color: #FBDB97;}  
131 - .dialog-reverse-btn {background: url('./img/mobile/dialog_btn_cancel.png') no-repeat;background-size: cover;color: #CF3727;}  
132 - .dialog-close {position: absolute;top: -.6rem;right: .26rem;width: .76rem;height: .76rem;background: url('./img/mobile/dialog_close.png') no-repeat;background-size: contain;} 130 + .dialog-theme-btn {background: url('./img/mobile/dialog_btn_confirm.png') no-repeat;background-size: 100% 100%;color: #FBDB97;}
  131 + .dialog-reverse-btn {background: url('./img/mobile/dialog_btn_cancel.png') no-repeat;background-size: 100% 100%;color: #CF3727;}
  132 + .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%;}
133 133
134 .toast-tip {display: none;position: fixed;bottom: 50%;left: 50%;transform: translateX(-50%);z-index: 11;opacity: 0;padding: 0 .5rem;height: .84rem;background: rgba(0, 0, 0, .8);border-radius: .06rem;transition: opacity 1s ease-out;line-height: .84rem;text-align: center;font-size: .28rem;color: #fff;} 134 .toast-tip {display: none;position: fixed;bottom: 50%;left: 50%;transform: translateX(-50%);z-index: 11;opacity: 0;padding: 0 .5rem;height: .84rem;background: rgba(0, 0, 0, .8);border-radius: .06rem;transition: opacity 1s ease-out;line-height: .84rem;text-align: center;font-size: .28rem;color: #fff;}
135 .clearfix:after {content: " ";display: block;height: 0;visibility: hidden;clear: both;} 135 .clearfix:after {content: " ";display: block;height: 0;visibility: hidden;clear: both;}