body { color: #515a6e; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, Arial, sans-serif; } p { margin: 0; } .v-title{ position: absolute; bottom: 0; left: 0; background-color: #4c4c50; color: #fabf64; width: 150px; height: 50px; line-height: 50px; text-align: center; font-weight: 600; border-top-left-radius: 10px; border-top-right-radius:10px; } /* 会员中心 */ .vip-model { display: flex; flex-wrap: nowrap; justify-content: flex-start; font-size: 14px; position: relative; margin-top: 10px; padding-top: 20px; } .v-left { width: 320px; border-right: 1px solid #f8f8f8; padding: 0 20px; } .v-left .v-name { font-size: 16px; font-weight: 600; margin-bottom: 10px; } .v-left .v-logo { width: 100px; height: 100px; border-radius: 100px; border: 1px solid #ddd; } .v-left .vip-interest { margin: 20px 0; line-height: 2.8; } .v-left .vip-title { font-size: 24px; font-weight: 600; color: #ed4014; } .v-right { flex: 1; padding: 0 16px; } .vip-list { display: flex; flex-wrap: nowrap; justify-content: space-around; } .vip-list .vip-item { width: 200px; font-weight: 600; border-radius: 10px; text-align: center; padding-bottom: 10px; cursor: pointer; margin-bottom: 12px; position: relative; box-shadow: 1px 1px 2px #ddd, -1px -1px 2px #ddd; } .vip-list .vip-item.active { color: #4c4c50; background: linear-gradient(to bottom, #fabf6440, #fabf64); } .vip-list .vip-item.active .vip-red { color: #ed4014; } .vip-list .vip-name { font-size: 16px; padding: 10px 0; } .vip-list .vip-price { font-size: 14px; margin-bottom: 15px; } .vip-list .vip-market-price { margin-left: 10px; text-decoration: line-through; opacity: 0.8; } .vip-list .price-value { font-size: 28px; font-weight: 600; margin-left: 3px; } .vip-list .vip-desc { color: #999; font-size: 12px; } .vip-list .vip-red { color: #e12424; font-weight: 600; } .vip-tips { color: #999; font-size: 12px; margin: 10px 0; text-align: center; position: relative; } .vip-tips::before { content: ''; position: absolute; width: 25%; height: 1px; top: 0; bottom: 0; left: 5%; margin: auto; background-color: #f8f8f8; } .vip-tips::after { content: ''; position: absolute; width: 25%; height: 1px; top: 0; bottom: 0; right: 5%; margin: auto; background-color: #f8f8f8; } .pay-line .pay-icon { width: 25px; height: 25px; } .pay-tips { color: #e12424; font-weight: 600; font-size: 12px; margin-top: 8px; } .pay-item { border: 1px solid #ddd; padding: 0 15px; border-radius: 5px; cursor: pointer; height: 35px; margin-right: 15px; } .pay-item .iconfont { margin-right: 5px; } .pay-item .icon-zhifubaozhifu { color: #027AFF; } .pay-item .icon-weixinzhifu { color: #62b900; } .pay-cont { padding: 10px; display: flex; flex-wrap: nowrap; justify-content: flex-start; } .pay-cont .pay-img { width: 150px; height: 150px; background-color: #eee; position: relative; } .pay-cont .pay-desc { padding-left: 20px; line-height: 2.2; font-size: 14px; } .pay-cont .iconfont { vertical-align: middle; font-size: 16px; margin: 0 5px 0 10px; } .iconfont { vertical-align: middle; } .dis-agreement { display: none; text-align: center; height: 170px; line-height: 170px; font-size: 18px; font-weight: 600; color: #ed4014; } .pay-agreement { margin-top: 5px; } .pay-agreement span { font-size: 12px; color: #999; margin: 0 !important; } .agreement-txt { cursor: pointer; } .agreement-txt:hover { color: #ed4014; } .money-color { color: #ed4014; font-size: 30px; font-weight: 600; margin-left: 2px; } .vip-banner { background-color: #eee; height: 60px; width: 100%; margin-bottom: 15px; border-radius: 30px; } .font-12 { font-size: 12px !important; } .font-13 { font-size: 13px !important; } .open-member { width: 100px; height: 24px; border-radius: 24px; vertical-align: middle; cursor: pointer; margin-right: 10px; } .vip-top { height: 70px; background: url('/static/logo/v-topbgs.png') no-repeat center center; margin: 0 0 8px 0; display: flex; flex-wrap: nowrap; justify-content: flex-end; padding: 10px 40px; color: #333; position: relative; } .vip-top .vt-logo { width: 50px; height: 50px; border-radius: 50px; border: 1px solid #eee; margin-right: 10px; } .vip-top .vt-name { font-size: 16px; font-weight: 600; padding-top: 5px; margin: 0; } .il-vip { text-align: center; } .il-vip img { width: 40px; height: 40px; } .il-interest { line-height: 3.8; text-align: left; font-size: 14px; font-weight: 600; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; } .il-interest .il-item { width: 50%; } .il-interest .il-item img { width: 35px; height: 35px; } .member-model { line-height: 1.8; padding: 10px; display: none; position: absolute; left: 0; top: 0; z-index: 3; background-color: #fff; } .member-model .member-btn { text-align: right; margin-top: 20px; } .agreement-content { height: 500px; overflow: auto; text-indent: 2em; } .agreement-content .font-600 { font-weight: 600; font-size: 18px; } .member-btn button { background-color: #F56C6C; border: 1px solid transparent; border-color: #F56C6C; font-size: 14px; border-radius: 4px; padding: 0 15px; height: 32px; color: #fff; } .member-btn button:hover { background-color: #F56C6C90; border-color: #F56C6C90; } .i-cost { position: absolute; width: 30px; top: -10px; left: 5px; } .coupon-modal { position: absolute; bottom: 0; right: 0; background: #ed4014; padding: 20px; z-index: 2; font-size: 12px; color: #999; border-radius: 10px; display: none; } .coupon-bg { background: #fff; border-radius: 10px; padding: 10px 20px; } .coupon-price { color: #ed4014; font-size: 26px; font-weight: 600; } .coupon-desc { font-size: 14px; } .coupon-tips { border-top: 1px dashed #ddd; margin-top: 10px; padding-top: 10px; font-size: 12px; } .coupon-close { position: absolute; left: 0px; top: 0; line-height: 1; color: #fff; font-size: 30px; transform: rotateZ(45deg); cursor: pointer; }