.my-page { color: #444; background: #f0f0f0; a { color: #444; } .my-header { position: relative; .students-entry { display: block; width: 120px; height: 40px; line-height: 40px; border-top-left-radius: 40px; border-bottom-left-radius: 40px; background: #d0021b; color: #fff; padding-left: 20px; position: absolute; top: 20px; right: 0; font-size: 24px; } } .user-info { display: block; position: relative; padding: 0 30px; color: #fff; font-size: 34px; line-height: 125px; height: 168px; background: resolve("home/index/header-bg.jpg"); background-size: cover; .user-avatar { float: left; position: relative; top: 16px; width: 126px; height: 126px; border-radius: 50%; border: 6px solid #a7a8a9; background-image: resolve("home/index/user-avatar.png"); background-size: 100%; } .username { float: left; padding: 0 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 260px; font-size: 16PX; height: 75px; } .vip-icon { display: inline-block; width: 72px; height: 32px; vertical-align: middle; } .vip-3 { background: url("/home/vip/vip-3.png"); } .vip-2 { background: url("/home/vip/vip-2.png"); } .vip-1 { background: url("/home/vip/vip-1.png"); } .more-icon { position: absolute; top: 40px; right: 30px; width: 88px; height: 88px; line-height: 88px; text-align: center; &.highlight { background: rgba(200, 200, 200, 0.1) !important; } } .invition { max-width: 600px; font-size: 24px; position: absolute; top: 95px; left: 172px; height: 46px; line-height: 46px; overflow: hidden; .code { display: inline-block; vertical-align: top; } .code-set { margin-left: 8px; width: 37px; height: 52px; background: url("/home/index/code-set.png"); background-size: 100%; background-repeat: no-repeat; display: inline-block; position: relative; top: 8px; z-index: 5; } .code-tip { margin-left: 4px; width: 94px; height: 26px; background: url("/home/index/clkl.png"); background-size: 100%; background-repeat: no-repeat; display: block; float: right; position: relative; top: 12px; } } } .family-entry { width: 136px; height: 136px; position: absolute; bottom: 0; right: 0; display: block; background-size: 100%; background-repeat: no-repeat; background-image: resolve("home/index/family-entry.gif"); } .login-btn { display: block; position: absolute; top: 40px; left: 194px; width: 244px; height: 82px; line-height: 82px; color: #fff; border: 4px solid #fff; text-align: center; } .my-link { padding: 6px 0; text-align: center; background: rgba(0, 0, 0, 0.8); height: 76px; .link-item { position: relative; float: left; color: #fff; font-size: 12PX; width: 212px; &.highlight { background: rgba(200, 200, 200, 0.1) !important; } p { font-size: 12PX; } &:after { content: ""; position: absolute; right: 0; top: 12px; width: 0; height: 44px; border-right: 4px solid #fff; } &:last-of-type:after { content: none; } } &.no-login { padding: 0; height: 88px; .link-item { p { font-size: 12PX; line-height: 88px; } &:after { top: 24px; } } } } .notice { margin-bottom: 30px; padding: 0 30px; background: #fff; height: 72px; overflow: hidden; .notice-item { display: block; width: 100%; font-size: 24px; line-height: 72px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notice-icon { display: inline-block; margin-right: 10px; width: 28px; height: 28px; background: url("/home/index/volume.png"); vertical-align: middle; } } .my-order { margin-bottom: 30px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background: #fff; .order-title { display: block; padding: 0 30px; font-size: 16PX; line-height: 88px; span { color: #e0e0e0; float: right; } &.highlight { background: #eee; } .iconfont { font-size: 14PX; } } .order-type { padding: 20px 30px; text-align: center; border-top: 1px solid #e0e0e0; .type-item { position: relative; float: left; color: #444; font-size: 14PX; line-height: 1.5; width: 193px; &.highlight { background: #eee; } .num { position: absolute; top: -24px; right: 36px; width: 72px; height: 72px; font-size: 40px; line-height: 72px; color: #fff; background: #f03d35; text-align: center; border-radius: 50%; transform: scale(0.5); } } .iconfont { font-size: 40px; } } } .my-order-top { margin-top: 30px; } .group-list { margin-bottom: 30px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; background: #fff; .list-item { display: block; position: relative; padding: 0 30px; font-size: 16PX; line-height: 88px; .opinion { width: 1.2rem; height: 1.2rem; overflow: hidden; display: inline-block; background: url("/home/index/talk.png"); position: relative; top: 0.34rem; margin-right: 12px; } &.highlight { background: #eee; } &:after { content: ""; position: absolute; right: 0; bottom: 0; width: 540px; height: 0; border-top: 1px solid #e0e0e0; } &:last-child:after { content: none; } .iconfont { font-size: 38px; } .iconfont.num { font-size: 14PX; } } .invite { background: #d0021b; color: #fff; &:after { content: none; } .horn { width: 45px; height: 88px; display: block; background-image: url("/home/index/horn.png"); background-size: 100%; float: left; margin-right: 12px; } } .message { clear: both; } .icon { margin-right: 10px; font-size: 50px; vertical-align: top; } .num { color: #e0e0e0; float: right; font-size: 16PX; } } .res-c { img { width: 100%; } .thumb-row { padding-top: 0; } } } .is-mars-app { .my-page { padding-bottom: 120px; .my-order > .order-type { > .type-item { width: 145px; } > .type-item > .num { right: 18px; } } } }