.dot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setBetween { display: flex; justify-content: space-between; } .setRowCenter { display: flex; align-items: center; } .setColumnCenter { display: flex; align-items: center; } .setCenter { display: flex; flex-direction: column; align-items: center; justify-content: center; } .ra { border-radius: 0.2rem; overflow: hidden; } .bs { box-shadow: 0 0 0.5rem #ebebeb; } .box-shadow { box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(36, 65, 116, 0.1); } .btn { padding: 0.3rem 1rem; background-color: #3b52f6; color: #fff; border-radius: 2rem; } .btn.s1 { background-color: transparent; border: 1px solid #3b52f6; color: #3b52f6; } .member-container { background-image: url("../images/member-bg.jpg"); background-size: cover; background-repeat: no-repeat; } .member-container h1 { text-align: center; font-size: 2rem; color: #3b52f6; font-weight: bold; margin-bottom: 1rem; } .member-container .container { display: flex; justify-content: space-between; } .member-container .container .img { max-width: 24rem; padding-top: 6rem; } .member-container .container .text { width: 24rem; } .member-container .container .text h1 { max-width: 18rem; } .member-container .content-title { border-bottom: 1px solid #ebebeb; display: flex; } .member-container .content-title a, .member-container .content-title span { display: inline-block; font-size: 1rem; border-bottom: 1px solid transparent; padding: 0 1.5rem 1rem; margin: 0 0.5rem; } .member-container .content-title a:hover, .member-container .content-title span:hover, .member-container .content-title a.active, .member-container .content-title span.active { border-color: #3b52f6; } .member-container .register-title { display: flex; justify-content: space-between; margin-bottom: 1rem; } .member-container .register-title p { font-size: 0.9rem; } .member-container .register-title div { position: relative; } .member-container .register-title div span { position: absolute; top: 50%; right: calc(100% + 0.5rem); padding: 0.3rem; background-color: #f5f7fa; font-size: 0.6rem; white-space: nowrap; transform: translateY(-50%); display: none; } .member-container .register-title div span::after { content: ""; position: absolute; top: 50%; left: 100%; border-left: 0.3rem solid #f5f7fa; border-top: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent; transform: translateY(-50%); } .member-container .register-title div:hover span { display: block; } .member-container .content { padding-top: 1rem; } .member-container .con-title { display: flex; margin-bottom: 1rem; } .member-container .con-title a { display: flex; align-items: center; background-color: #f5f7fa; border-radius: 0.4rem; margin-right: 0.5rem; padding: 0.5rem; flex: 1; } .member-container .con-title a:last-of-type { margin-right: 0; } .member-container .con-title a:nth-of-type(1) .i { background-color: #feebe0; } .member-container .con-title a:nth-of-type(1) .i i { color: #ff9128; } .member-container .con-title a:nth-of-type(2) .i { background-color: #f8ebe9; } .member-container .con-title a:nth-of-type(2) .i i { color: #f44f39; } .member-container .con-title a:nth-of-type(3) .i { background-color: #e8ecf9; } .member-container .con-title a:nth-of-type(3) .i i { color: #4285ff; } .member-container .con-title a .i { width: 2.2rem; height: 2.2rem; padding: 0.8rem; border-radius: 50%; margin-right: 0.5rem; display: flex; align-items: center; justify-content: center; } .member-container .con-title a .i i { font-size: 1rem; } .member-container .con-title a:hover, .member-container .con-title a.active { background-color: #3b52f6; } .member-container .con-title a:hover span, .member-container .con-title a.active span { color: #fff; } .member-container .form > div { margin-bottom: 1.5rem; position: relative; } .member-container .form > div.to { display: flex; justify-content: space-between; } .member-container .form > div.to input { width: 49%; } .member-container .form .bt { display: flex; justify-content: space-between; align-items: center; } .member-container .form .bt input { width: 8rem; } .member-container .form .bt a { color: #3b52f6; font-size: 0.7rem; } .member-container .form .bt a:hover { text-decoration: underline; } .member-container .form input { padding: 0 4%; } .member-container .form input, .member-container .form .select-value, .member-container .form button { display: block; width: 100%; height: 2.5rem; border-radius: 0.3rem; border: 1px solid #ebebeb; box-sizing: border-box; } .member-container .form input p, .member-container .form .select-value p, .member-container .form button p { border: none !important; } .member-container .form .select-container { flex: 1; } .member-container .form .code-wrap { display: flex; justify-content: space-between; } .member-container .form .code-wrap .code { display: flex; align-items: center; margin-left: 2rem; position: relative; flex-shrink: 0; border-radius: 0.3rem; overflow: hidden; } .member-container .form .code-wrap .code img { height: 2.5rem; width: auto; } .member-container .form .code-wrap .code a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-style: 0.7rem; cursor: pointer; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .member-container .form .code-wrap .code:hover a { opacity: 1; } .member-container .form .err-msg { position: absolute; top: 100%; left: 0; width: 100%; display: none; margin-left: auto; font-size: 0.7rem; color: #3b52f6; text-align: right; padding-right: 1rem; margin-top: 0.2rem; } .member-container .form .nodrop { cursor: no-drop !important; background: #ebebeb !important; color: #343434 !important; } .member-container .form input[type="submit"] { background-color: #3b52f6; color: #fff; cursor: pointer; } .member-container .wechat .img { width: 8rem; height: 8rem; background-color: #ccc; margin: 2rem auto; border: 1px solid #ebebeb; border-radius: 0.5rem; overflow: hidden; } .member-container .o .line-tit { text-align: center; } .member-container .o .line-tit span { position: relative; color: #999; font-size: 0.7rem; } .member-container .o .line-tit span::before, .member-container .o .line-tit span::after { content: ""; position: absolute; top: 50%; width: 4rem; border-bottom: 1px solid #ebebeb; } .member-container .o .line-tit span::before { right: calc(100% + 1rem); } .member-container .o .line-tit span::after { left: calc(100% + 1rem); } .member-container .o .other { display: flex; justify-content: center; margin: 1rem 0; } .member-container .o .other .i { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; margin: 0 1.5rem; box-shadow: 0rem 0.3rem 0.5rem 0rem #eaeaea; } .member-container .o .other .i .icon { font-size: 1.3rem; } .member-container .o > span { display: block; text-align: center; color: #999; font-size: 0.7rem; } .member-container .o > span a { font-size: inherit; color: #3b52f6; } .member-container .o > span a:hover { text-decoration: underline; } .user-container { background-color: #f5f7fa; padding-bottom: 3rem; } .user-container .container { display: flex; align-items: flex-start; padding-bottom: 1rem; } .user-container .container > div { border-radius: 0.5rem; overflow: hidden; background-color: #fff; } .user-container .container .left { width: 12rem; margin-right: 1rem; padding: 1rem 0; } .user-container .container .left a { display: flex; align-items: center; justify-content: center; padding: 1rem 0; position: relative; } .user-container .container .left a::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 4px solid transparent; transition: all ease 0.3s; } .user-container .container .left a i { font-size: 1rem; margin-right: 1rem; } .user-container .container .left a:hover, .user-container .container .left a.active { background-color: #f5f7fa; } .user-container .container .left a:hover::before, .user-container .container .left a.active::before { border-color: #3b52f6; } .user-container .container .left a:hover i, .user-container .container .left a.active i { color: #3b52f6; } .user-container .container .right { flex: 1; padding: 1rem; } .user-container .container .right > div.active { display: block; } .user-container .container .right .label-btn { padding-bottom: 1rem; border-bottom: 1px solid #ebebeb; } .user-container .container .right .label-btn a { margin-right: 2rem; } .user-container .container .right > h1 { font-size: 2.3rem; } .user-container .container .right .cart-tit { font-size: 2rem; color: #999; font-weight: 300; margin-bottom: 1rem; } .user-container .container .right .c-tit { font-size: 1.2rem; border-left: 4px solid #3b52f6; line-height: 1; padding-left: 0.5rem; margin-bottom: 2rem; } .user-container .container .right .data-content { display: flex; } .user-container .container .right .data-content .via { flex-shrink: 0; text-align: center; margin-right: 6%; } .user-container .container .right .data-content .via .img { width: 5rem; height: 5rem; border-radius: 50%; margin-bottom: 1rem; background-color: #ccc; } .user-container .container .right .data-content .via a { font-size: 0.7rem; } .user-container .container .right .data-content .con { display: flex; justify-content: space-between; flex-wrap: wrap; } .user-container .container .right .data-content .con .inp { display: flex; align-items: center; width: 48%; margin-bottom: 1rem; } .user-container .container .right .data-content .con .inp label { width: 4rem; font-size: 0.7rem; color: #666; } .user-container .container .right .data-content .con .inp input, .user-container .container .right .data-content .con .inp select { flex: 1; height: 2.5rem; border-radius: 0.2rem; padding: 0 2%; border: 1px solid #ebebeb; } .user-container .container .right .data-content .con button { display: block; width: 15rem; height: 2.5rem; border-radius: 0.2rem; background-color: #3b52f6; color: #fff; margin: 2rem auto 0; } .user-container .container .right .data-content-copy .more-form { display: none; } .user-container .container .right .data-content-copy form { padding-right: 20%; } .user-container .container .right .data-content-copy h2 { margin-bottom: 0.5rem; color: #3b52f6; } .user-container .container .right .data-content-copy h4 { margin-bottom: 2rem; color: #3b52f6; } .user-container .container .right .data-content-copy p { margin-bottom: 1rem; color: #999; } .user-container .container .right .data-content-copy .ui.button { margin-bottom: 1rem; } .user-container .container .right .data-content-copy .ui.form .field > label { font-size: 1em; margin-bottom: 0.6rem; } .user-container .container .right .data-content-copy .ui.dropdown .menu > .item { font-size: 0.9em; } .user-container .container .right .data-content-copy .ui.button, .user-container .container .right .data-content-copy .ui.buttons .button, .user-container .container .right .data-content-copy .ui.buttons .or { font-size: 0.7rem; } .user-container .container .right .safety-content .item { display: flex; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #ebebeb; } .user-container .container .right .safety-content .item:last-of-type { border-bottom: none; } .user-container .container .right .safety-content .item .i { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid #3b52f6; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 1rem; } .user-container .container .right .safety-content .item .txt h6 { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; } .user-container .container .right .safety-content .item .txt h6 span { font-size: 0.8rem; } .user-container .container .right .safety-content .item .txt h6 span.c1 { color: #3b52f6; } .user-container .container .right .safety-content .item .txt h6 span.c2 { color: #ffb818; } .user-container .container .right .safety-content .item .txt p { font-size: 0.7rem; color: #999; } .user-container .container .right .safety-content .item a { margin-left: auto; width: 6rem; height: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #3b52f6; border-radius: 0.2rem; font-size: 0.7rem; color: #3b52f6; } .user-container .container .right .safety-content .item a:hover { background-color: #3b52f6; color: #fff; } .user-container .container .right .course-content { display: flex; justify-content: space-between; flex-wrap: wrap; } .user-container .container .right .course-content .item { width: 49%; border: 1px solid #3b52f6; border-radius: 0.5rem; padding: 1rem; margin-bottom: 2%; position: relative; } .user-container .container .right .course-content .item h6 { font-size: 0.9rem; display: flex; align-items: center; justify-content: space-between; } .user-container .container .right .course-content .item h6 object a { font-size: 0.6rem; padding: 0.1rem 0.3rem; border: 1px solid #3b52f6; border-radius: 3rem; color: #3b52f6; text-transform: uppercase; } .user-container .container .right .course-content .item .start { display: flex; align-items: center; justify-content: space-between; margin: 0.5rem 0; } .user-container .container .right .course-content .item .start span { font-size: 0.7rem; } .user-container .container .right .course-content .item > p { font-size: 0.7rem; line-height: 1.8; color: #999; margin-bottom: 1rem; } .user-container .container .right .course-content .item > em { position: absolute; bottom: 1rem; right: 1rem; padding: 0.1rem 0.3rem; border: 1px solid #ccc; border-radius: 0.2rem; font-size: 0.7rem; } .user-container .container .right .shopping-content { position: relative; } .user-container .container .right .shopping-content table { width: 100%; } .user-container .container .right .shopping-content table * { font-size: 0.7rem; } .user-container .container .right .shopping-content table tr { border-bottom: 1px solid #ebebeb; } .user-container .container .right .shopping-content table tr:last-of-type { border-bottom: none; } .user-container .container .right .shopping-content table .t { border-bottom: 1px solid #ebebeb; } .user-container .container .right .shopping-content table .t th { padding-bottom: 0.5rem; font-size: 1.1rem; vertical-align: middle; text-align: center; } .user-container .container .right .shopping-content table .t th:first-of-type { text-align: left; padding-left: 2rem; padding-right: 2rem; } .user-container .container .right .shopping-content table .t th:last-of-type { text-align: right; padding-left: 2rem; padding-right: 2rem; } .user-container .container .right .shopping-content table .b td { padding: 1rem 0; padding-right: 2rem; width: 20%; vertical-align: middle; text-align: center; } .user-container .container .right .shopping-content table .b td:first-of-type { text-align: left; } .user-container .container .right .shopping-content table .b td:last-of-type { text-align: right; padding-right: 0; } .user-container .container .right .shopping-content table .b .b1 { width: 30%; } .user-container .container .right .shopping-content table .b .b1 > div { display: flex; align-items: flex-start; } .user-container .container .right .shopping-content table .b .b1 > div > input { margin: 0; margin-right: 1rem; width: 0.8rem; height: 0.8rem; cursor: pointer; } .user-container .container .right .shopping-content table .b .b1 > div div { flex: 1; width: 100%; } .user-container .container .right .shopping-content table .b .b1 span { padding: 0.1rem 0.4rem; border-radius: 0.1rem; background-color: #c5cbfc; color: #fff; text-transform: uppercase; } .user-container .container .right .shopping-content table .b .b1 h6 { font-size: 0.9rem; margin: 0.5rem 0; } .user-container .container .right .shopping-content table .b .b1 p { color: #666; margin-top: 0.5rem; } .user-container .container .right .shopping-content table .b .b2 a { display: block; border: 1px solid #ebebeb; text-align: center; padding: 0.1rem 0; color: #666; margin-top: 0.2rem; max-width: 10rem; } .user-container .container .right .shopping-content table .b .b4 { font-size: 1rem; position: relative; } .user-container .container .right .shopping-content table .b .b4 button { position: absolute; bottom: 0.5rem; right: 0; padding: 0.3rem 1rem; background-color: #3b52f6; color: #fff; border-radius: 2rem; margin-top: 2rem; } .user-container .container .right .shopping-content table .b .b4 em { position: absolute; bottom: 0.5rem; right: 0; display: block; width: fit-content; margin-left: auto; color: #666; padding: 0.3rem 0; border-bottom: 1px solid #666; cursor: pointer; } .user-container .container .right .shopping-content table .b .b4 em:hover { color: #3b52f6; border-color: #3b52f6; } .user-container .container .right .shopping-content .tip { font-size: 0.7rem; color: #999; text-align: right; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #ebebeb; } .user-container .container .right .shopping-content .count > div { text-align: right; width: 15rem; margin-left: auto; display: flex; justify-content: space-between; } .user-container .container .right .shopping-content .count > div * { color: #666; } .user-container .container .right .shopping-content .count .s { margin-top: 2rem; } .user-container .container .right .shopping-content .count .s em { font-size: 1.2rem; } .user-container .container .right .shopping-content .count .s strong { font-size: 1rem; } .user-container .container .right .shopping-content .count .b { margin-top: 1rem; } .user-container .container .right .shopping-content .count .b em { font-size: 1.6rem; } .user-container .container .right .shopping-content .count .b strong { font-size: 1.6rem; } .user-container .container .right .shopping-content .oper-all { position: absolute; right: 0; bottom: calc(100% + 2rem); border: 1px solid #3b52f6; color: #3b52f6; padding: 0.3rem 1rem; border-radius: 0.2rem; cursor: pointer; transform: translateY(50%); } .user-container .container .right .shopping-content .oper-all:hover { color: #fff; background-color: #3b52f6; } .user-container .container .right .shopping-content .oper-btn { display: flex; justify-content: flex-end; } .user-container .container .right .shopping-content .oper-btn .btn { margin-left: 1rem; } .user-container .container .right .shopping-content .pay-btn { text-align: right; margin-top: 2rem; } .user-container .container .right .shopping-content .pay-btn > .btn { display: inline-block; margin-left: auto; padding-left: 3rem; padding-right: 3rem; } .user-container .container .right .payment-content h6 { font-size: 0.9rem; font-weight: normal; margin-bottom: 1rem; margin-top: 3rem; } .user-container .container .right .payment-content h6.hint { color: #ff8400; } .user-container .container .right .payment-content h6:first-of-type { margin-top: 0; } .user-container .container .right .payment-content .sec { padding-bottom: 1rem; border-bottom: 1px solid #ebebeb; margin-bottom: 1rem; } .user-container .container .right .payment-content .sec:last-of-type { border-bottom: none; } .user-container .container .right .payment-content .sec > p { text-align: right; } .user-container .container .right .payment-content .sec > p strong { font-size: 1.6rem; color: #f01414; font-weight: bold; } .user-container .container .right .payment-content .sec .pay-btn { text-align: right; margin-top: 2rem; } .user-container .container .right .payment-content .sec .pay-btn .btn { padding: 0.5rem 1.5rem; } .user-container .container .right .payment-content .info { background-color: #f8f8f9; padding: 1rem; position: relative; } .user-container .container .right .payment-content .info span { display: inline-block; padding: 0.2rem 1rem; background-color: rgba(59, 82, 246, 0.4); color: #fff; font-size: 0.7rem; border-radius: 0.2rem; text-transform: uppercase; margin-bottom: 0.5rem; } .user-container .container .right .payment-content .info h4 { font-size: 1.1rem; margin-bottom: 0.5rem; } .user-container .container .right .payment-content .info p { margin-bottom: 0.5rem; } .user-container .container .right .payment-content .info p:last-of-type { color: #999; margin-bottom: 0; } .user-container .container .right .payment-content .info strong { position: absolute; bottom: 1rem; right: 1rem; color: #f01414; font-size: 1.1rem; } .user-container .container .right .payment-content .way { display: flex; } .user-container .container .right .payment-content .way .item { flex: 1; height: 4.5rem; margin-right: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f8f8f9; border: 1px solid transparent; border-radius: 0.2rem; } .user-container .container .right .payment-content .way .item.active { border-color: #3b52f6; } .user-container .container .right .payment-content .way .item:last-of-type { margin-right: 0; } .user-container .container .right .order-content .item { display: block; padding: 1rem 0; border-bottom: 1px solid #ebebeb; } .user-container .container .right .order-content .item:last-of-type { border-bottom: none; } .user-container .container .right .order-content .item .t { position: relative; margin-bottom: 0.5rem; } .user-container .container .right .order-content .item .t h6 { font-size: 0.9rem; } .user-container .container .right .order-content .item .t p { font-size: 0.7rem; color: #666; } .user-container .container .right .order-content .item .t .btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 0.7rem; } .user-container .container .right .order-content .item .par-con { display: flex; justify-content: space-between; } .user-container .container .right .order-content .item .par-con .par { min-width: initial; } .user-container .container .right .help-content li { display: flex; cursor: pointer; margin-bottom: 0.5rem; } .user-container .container .right .help-content li.active .text > p i { transform: rotate(-180deg); } .user-container .container .right .help-content li.active .info { max-height: 10rem !important; transition: all linear 0.5s !important; } .user-container .container .right .help-content li .q { width: 2.1rem; height: 2.1rem; border-radius: 50%; background-color: #3b52f6; color: #fff; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.1rem; margin-right: 1rem; } .user-container .container .right .help-content li .text { flex: 1; border-bottom: 1px solid #ebebeb; padding: 0.5rem 0; } .user-container .container .right .help-content li .text > p { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 0.5rem; } .user-container .container .right .help-content li .text > p i { margin-left: auto; } .user-container .container .right .help-content li .text .info { overflow: hidden; max-height: 0; transition: none; } .user-container .container .right .help-content li .text .info *, .user-container .container .right .help-content li .text .info { color: #666; } @media screen and (max-width: 768px) { .user-container .container { flex-direction: column; } .user-container .container > div { width: 100% !important; } .user-container .container .left { display: flex; overflow-x: scroll; } .user-container .container .left a { white-space: nowrap; padding: 1rem; } .user-container .container .left a::before { display: none !important; } .user-container .container .right .order-content .item .t h6 { margin-bottom: 0.2rem; } .user-container .container .right .order-content .item .par-con { flex-wrap: wrap; } .user-container .container .right .order-content .item .par-con .par { width: 50%; display: flex; flex-wrap: wrap; } .user-container .container .right .shopping-content table .b .b1 span { white-space: nowrap; } .user-container .container .right .course-content .item { width: 100%; } }