@xysfe/actui/lib/GoldBenefitDemo/style.css

A fantastic mobile ui lib implement by Vue

.act-popup{position:fixed;left:0;right:0;top:0;bottom:0}.act-popup-container,.act-popup-mask{position:absolute;width:100%;height:100%}.act-popup-mask{overflow:hidden}.act-popup-mask:before{content:".";display:block;width:1px;height:1px;background-color:rgba(0,0,0,.1);margin-left:-10px}.act-popup-container{-webkit-transform:translate(100%,100%);transform:translate(100%,100%)}.act-popup-content{position:absolute;top:0;left:0;width:100%;box-sizing:border-box;-webkit-transform:translate(-100%,-100%);transform:translate(-100%,-100%)}.act-popup-center .act-popup-content{position:absolute;top:-50%;left:-50%;width:auto;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.act-popup-top-radius{border-top-left-radius:12px;border-top-right-radius:12px}.act-popup-top-radius.act-popup-content{overflow:hidden}.act-gold-popup-fade-enter[data-v-f3b563a0]{opacity:0}.act-gold-popup-fade-enter-active[data-v-f3b563a0]{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.act-gold-popup-move-enter[data-v-f3b563a0]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.act-gold-popup-move-enter-active[data-v-f3b563a0]{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.act-gold-popup-container[data-v-f3b563a0]{position:absolute;bottom:0;left:0;width:100%;line-height:1;background-color:#fff;border-radius:12px 12px 0 0}.act-gold-popup-container .act-gold-popup-hd[data-v-f3b563a0]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;position:relative;text-align:center;font-size:17px;color:#333}.act-gold-popup-container .act-gold-popup-hd[data-v-f3b563a0] h3{padding:13px 40px;line-height:20px;font-size:17px}.act-gold-popup-container .act-gold-popup-hd i[data-v-f3b563a0]{display:block;position:absolute;top:50%;z-index:1;margin:12px;background-repeat:no-repeat}.act-gold-popup-container .act-gold-popup-hd i.act-gold-popup-icon-close[data-v-f3b563a0]{position:absolute;top:-5px;right:-4px;display:block;width:20px;height:20px}.act-gold-popup-container .act-gold-popup-hd i.act-gold-popup-icon-close[data-v-f3b563a0]:after,.act-gold-popup-container .act-gold-popup-hd i.act-gold-popup-icon-close[data-v-f3b563a0]:before{position:absolute;content:"";width:16px;height:2px;background:#b3b3b3;top:9px;left:2.5px}.act-gold-popup-container .act-gold-popup-hd i.act-gold-popup-icon-close[data-v-f3b563a0]:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.act-gold-popup-container .act-gold-popup-hd i.act-gold-popup-icon-close[data-v-f3b563a0]:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.act-gold-popup-container .act-gold-popup-hd.act-gold-popup-hd-custom[data-v-f3b563a0]{min-height:36px;line-height:36px}div p[data-v-94fc8f90]{box-sizing:border-box}.single-line[data-v-94fc8f90]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.act-gold-benefit-demo[data-v-94fc8f90]{background:#fff;border-radius:12px;overflow:hidden}.act-gold-benefit-demo .cost-btn-warp[data-v-94fc8f90]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;margin:16px 0 22px}.act-gold-benefit-demo .cost-btn-warp .cost-btn[data-v-94fc8f90]{border-radius:18px;overflow:hidden;width:170px;height:36px;color:#fff;text-align:center;line-height:36px;font-weight:700;font-size:15px}.act-gold-benefit-demo .gold-finance-title[data-v-94fc8f90]{margin:16px 0 23px 14px;height:20px;line-height:20px;position:relative;padding:0 16px 0 0}.act-gold-benefit-demo .gold-finance-title .title-inner[data-v-94fc8f90]{width:115px;height:20px;font-size:14px;font-weight:700;color:#333;position:relative;z-index:1}.act-gold-benefit-demo .gold-finance-title .name[data-v-94fc8f90]{color:#8c7fee;height:20px;font-size:14px;-webkit-box-flex:1;-webkit-flex:1;flex:1;text-align:right}.act-gold-benefit-demo .gold-finance-title .toggle-btn[data-v-94fc8f90]{width:34px;height:18px;background:#a69dff;border-radius:6px;margin-left:6px;font-weight:700;font-size:11px;color:#fff}.benefit[data-v-5f772591]{position:relative;background:#fff;margin:0 16px;border-radius:12px;overflow:hidden;text-align:center;line-height:1;color:#666;box-shadow:0 4px 8px 0 hsla(0,0%,70%,.09),0 -4px 8px 0 hsla(0,0%,70%,.1)}.benefit>.visible-hide[data-v-5f772591]{visibility:hidden}.act-gold-benefit-title[data-v-e4de03ba]{margin:0 22px;padding:0 22px;background:#f9f9f9;border-radius:0 0 5px 5px;line-height:27px;color:#666;display:inline-block;overflow:hidden}.act-gold-benefit-title .num[data-v-e4de03ba]{color:#333}.price[data-v-3bf4a81d]{margin:22px 0 8px}.price .price-name[data-v-3bf4a81d]{font-weight:700;margin-bottom:4px}.price .price-name .name[data-v-3bf4a81d]{font-size:18px;color:#333}.price .price-name .cash[data-v-3bf4a81d]{font-size:32px;margin-top:15px;color:#ff5a6e}.price .price-value[data-v-3bf4a81d]{margin-top:8px;font-size:13px;color:#999}.choose-wrapper[data-v-5a5d37b4]{position:relative}.choose-wrapper .translate-left[data-v-5a5d37b4]{left:0}.choose-wrapper .translate-left[data-v-5a5d37b4],.choose-wrapper .translate-right[data-v-5a5d37b4]{position:absolute;top:0;bottom:0;height:58px;width:48px;background:-webkit-linear-gradient(right,hsla(0,0%,100%,0),hsla(0,0%,100%,.8));background:linear-gradient(270deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.8))}.choose-wrapper .translate-right[data-v-5a5d37b4]{right:0}.choose[data-v-5a5d37b4]{position:relative;width:100%;height:58px;overflow:hidden;margin-bottom:26px}.choose .choose-value[data-v-5a5d37b4]{position:absolute;top:0;left:50%;width:3px;height:28px;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:3px}.choose .choose-container[data-v-5a5d37b4]{width:100%;height:58px;overflow:hidden}.choose .choose-content[data-v-5a5d37b4]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden;height:58px;padding:10px 50% 0}.choose .choose-content .number-item[data-v-5a5d37b4]{margin-top:12px;width:100%;height:6px;border-left:1px solid #eee}.choose .choose-content .number-part[data-v-5a5d37b4]{margin-top:0;height:18px}.choose .choose-item[data-v-5a5d37b4]{-webkit-flex-shrink:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;width:12px}.choose .choose-item .number-text[data-v-5a5d37b4]{margin:5px 0 0 -12px;line-height:17px;font-size:12px;color:#999;text-align:center;white-space:nowrap}.choose .choose-item[data-v-5a5d37b4]:last-child{width:1px}.cost[data-v-3b226c45]{bottom:0;width:100%;padding:0 15px}.cost .cost-title[data-v-3b226c45]{padding-right:28px;font-size:16px;color:#333;line-height:24px;margin-bottom:16px}.cost .cost-table-head[data-v-3b226c45]{font-size:13px;color:#666;line-height:1;margin-bottom:12px}.cost .cost-desc[data-v-3b226c45]{margin-bottom:12px;color:#333}.cost-scroll[data-v-3b226c45]{height:280px;overflow:hidden}.no-data[data-v-3b226c45]{height:280px;font-size:14px;margin-top:40px;text-align:center}.thead.table-tr .table-item[data-v-3b226c45]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:center;align-content:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;line-height:1.4;height:40px;background-color:#8c7fee;color:#fff;font-size:12px;opacity:.65;padding:0 2px}.table-body[data-v-3b226c45]{width:100%}.table-tr[data-v-3b226c45]{display:-webkit-box;display:-webkit-flex;display:flex}.table-tr .table-item[data-v-3b226c45]:first-child{width:64px}.table-tr .table-item[data-v-3b226c45]:nth-child(2){width:40px}.table-tr .table-item[data-v-3b226c45]:nth-child(3),.table-tr .table-item[data-v-3b226c45]:nth-child(4),.table-tr .table-item[data-v-3b226c45]:nth-child(5),.table-tr .table-item[data-v-3b226c45]:nth-child(6){-webkit-box-flex:1;-webkit-flex:1;flex:1}.table-tr .table-item[data-v-3b226c45]{height:24px;line-height:24px;border:1px solid #f5f5f5;font-size:12px;text-align:center;color:#999}.table-tr .table-item.sw[data-v-3b226c45]{color:#fe5b70}