.main { background-color: #F8F8F8; min-height: 100vh; display: flex; flex-direction: column; position: relative; .header { background: #68b4ff; background-size: cover; height: 560px; position: relative; .card-main { margin-top: 10px; } } .auth-suspension { position: absolute; z-index: 1; inset: 0; } .header-card { position: absolute; left: 50%; bottom: -18%; transform: translateX(-50%); } .crad { width: 702px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 30px; box-sizing: border-box; box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05); } .card-info { display: flex; justify-content: space-between; position: absolute; top: -15%; left: 0; right: 0; width: 702px; padding: 0 30px; box-sizing: border-box; } .arcd-info-left { display: flex; align-items: flex-end; } .arcd-info-left-portrait { width: 170px; height: 170px; background: rgba(0, 0, 0, 0.00); border: 4px solid #ffffff; border-radius: 50%; overflow: hidden; } .arcd-info-left-portrait image { width: 100%; height: 100%; object-fit: cover; } .arcd-info-left-desc { margin-left: 24px; } .arcd-info-left-nickname { font-size: 44px; font-weight: 700; color: #000000; display: flex; align-items: center; } .arcd-info-left-phone { font-size: 24px; font-weight: 400; color: #707070; } .arcd-info-left-phone button { padding: 0 10px; height: 42px; background: #ffffff; border: 2px solid #cde5ff; border-radius: 20px; font-size: 22px; font-weight: 400; color: #007aff; display: flex; align-items: center; justify-content: center; } .card-info-right { font-size: 26px; display: flex; align-items: flex-end; } .setup-icon { position: relative; padding-bottom: 10px; } .icon-wrapper { font-size: 60px; } .icon-point { width: 8px; height: 8px; border-radius: 50%; background: #ff0000; position: absolute; right: 0; top: 0; } .card-main { margin: 20px auto 0; } .card-main-title { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #dddddd; padding: 0 5px 15px; box-sizing: border-box; .card_main_title_order{ flex:1; font-size: 28px; font-weight: 700; } .order_more{ display: flex; justify-content: flex-end; align-items: center; font-size: 25px; color: #707070; text{ width: auto; } } } .card-main-title text { font-size: 22px; font-weight: 400; color: #ababab; display: inline-block; text-align: right; width: 150px; } .card-main-title-content { display: grid; grid-template-columns: repeat(5, 1fr); } .card-main-title-content-item { font-size: 24px; font-weight: 400; color: #3c3c3c; text-align: center; margin-top: 30px; position: relative; } .card-main-title-content-item Text { font-size: 56px; color: #3C3C3C; } .card-main-title-content-item-badge { padding: 0 10px; height: 32px; background: #007aff; border: 2px solid #ffffff; border-radius: 32px; box-sizing: border-box; overflow: hidden; font-size: 18px; font-weight: 700; color: #ffffff; display: flex; align-items: center; justify-content: center; position: absolute; top: -10px; right: 0; } .assets-title { font-size: 28px; font-weight: 700; color: #3c3c3c; margin-bottom: 20px; } .assets-content { display: grid; grid-template-columns: repeat(2, 1fr); } .assets-content>view, .assets-content>navigator { text-align: center; } .assets-content-item-top { color: #007aff; font-weight: 400; } .assets-content-item-top-before { font-size: 20px; } .assets-content-item-top-content { font-size: 36px; } .assets-content-item-top-after { font-size: 20px; } .assets-content-item-tips { font-size: 24px; font-weight: 400; color: #707070; } .main-card { margin: 131px auto 0; } .card-feature { margin-bottom: 50px; } .card-main-list-content-item { display: flex; align-items: center; justify-content: space-between; height: 90px; position: relative; } .card-main-list-content-item-left { font-size: 26px; font-weight: 400; text-align: left; color: #707070; display: flex; align-items: center; min-width: 260px; } .card-main-list-content-item .label { width: 100%; text-align: right; padding-right: 10px; font-size: 26px; } .card-main-list-content-item-left text { margin-right: 35px; font-size: 56px; color: #707070; } .card-main-list-content-item-right text { font-size: 30px; } .card-main-list-content-item .customer { position: absolute; opacity: 0; width: 100%; height: 100%; } .auth { margin-top: 115px; } .auth-top { display: flex; align-items: center; justify-content: space-between; } .auth-status { padding: 0 10px; height: 30px; background: #dddddd; border-radius: 10px 4px 0px 0px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color: #707070; } .auth-status, .auth-status-ongoing { color: #EE7500; background-color: #FFE6CE; } .auth-status, .auth-status-adopt { color: #007AFF; background-color: #CDE5FF; } .auth-tips { font-size: 18px; font-weight: 400; color: #007aff; text-align: right; } .auth-tips, .auth-tips-adopt { color: #ABABAB; } .auth-tips text { font-size: 17px; } .auth-company { height: 70px; width: 100%; background: #f6f6f6; border: 2px solid #f0f0f0; border-radius: 0px 10px 10px 10px; font-size: 26px; font-weight: 700; color: #707070; display: flex; align-items: center; justify-content: center; } .auth-company, .auth-company-adopt { background: #ecf5ff; border: 2px solid #cde5ff; } .tips-modal { background: rgba(0, 0, 0, 0.6); position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 2; } .tips-modal-content { width: 598px; background: #ffffff; border-radius: 10px; animation: enlargeK 0.2s linear; overflow: hidden; } @keyframes enlargeK { 0% { transform: scale(0); } 100% { transform: scale(1); } } .tips-modal-title { font-size: 32px; font-weight: 700; text-align: center; color: #000000; margin-bottom: 58px; padding-top: 48px; } .tips-modal-letter { font-size: 26px; font-weight: 400; color: #707070; padding: 0 30px; line-height: 50px; } .tips-modal-letter-text { text-indent: 60px; } .tips-modal-letter-beginn { font-size: 28px; font-weight: 400; color: #000000; margin-bottom: 25px; } .tips-modal-letter-end { font-size: 26px; font-weight: 400; text-align: right; margin-top: 61px; } .tips-modal-button { display: flex; border-top: 1px solid #DDDDDD; margin-top: 45px; } .tips-modal-button button, .tips-modal-button view { display: flex; align-items: center; justify-content: center; width: 50%; height: 90px; background-color: white; } .tips-modal-button button { font-size: 26px; font-weight: 400; color: #707070; border-radius: 0; border-right: 1px solid #DDDDDD; } .tips-modal-button button::after { border: 0; border-radius: 0; } .tips-modal-button view { font-size: 26px; font-weight: 400; color: #007aff; } .auth-box { width: 614px; height: 70px; background: #f6f6f6; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; padding-left: 18px; padding-right: 16px; .auth-left-box { display: flex; align-items: center; .auth-tag { width: 86px; height: 34px; background: #dddddd; border-radius: 10px; font-size: 22px; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: center; color: #707070; text-align: center; line-height: 34px; margin-right: 28px; } .auth-tagone { width: 86px; height: 34px; background: #ffe6ce; border-radius: 10px; font-size: 22px; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; text-align: center; color: #707070; text-align: center; line-height: 34px; margin-right: 28px; } .auth-tagtwo { display: flex; align-items: center; overflow: hidden; padding-left: 10px; width: 100px; height: 32px; background: #cde5ff; border-radius: 10px; .iconFont-color { display: flex; align-items: center; font-size: 30px; margin-right: 3px; color: #007aff; } .auth-font { font-size: 20px; font-family: Microsoft YaHei, Microsoft YaHei-Regular; font-weight: 400; color: #007aff; } } .tagthree { display: flex; align-items: center; overflow: hidden; padding-left: 10px; width: 100px; height: 32px; background: rgba(255, 0, 0, 0.10); border-radius: 10px; color: #ff0000; } .auth-cont { margin-left: 16px; font-size: 26px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; color: #ababab; } .auth-contone { margin-left: 16px; font-size: 26px; font-family: Microsoft YaHei, Microsoft YaHei-Bold; font-weight: 700; color: #3c3c3c; } } } }