.page-equity{ min-height: 100vh; width:100vw; background:#ebeaea; display:flex; .equity-header{ display:flex; background:#FFF; position: fixed; width:100%; flex-direction: column; z-index:999; .header-caption{ height:40px; margin-left:20px; margin-right:20px; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; border-bottom:1px solid #d5d5d5; .text{ font-size:14px; padding-left:10px; padding-right:10px; } .active{ color:#593320; font-weight: 900; font-size: 16px; } } .header-sub{ margin-left:20px; margin-right:20px; height:40px; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; .text{ font-size:14px; padding-left:10px; padding-right:10px; } .active{ color:#593320; font-weight: 900; font-size: 16px; } } } .ticket-list{ width:100%; margin-top:80px; margin-left:10px; margin-right:10px; .list-item{ .item{ margin-top:10px; .ticket-content{ background:#FFF; .content{ display:flex; flex-direction: row; padding-top:10px; padding-bottom:10px; position: relative; .ticket-img{ width:30%; display:flex; justify-content: center; align-items: center; .img{ width:50px; height:50px; border-radius: 50%; } } .ticket-info{ width:70%; .ticket-name{ color:#000; font-size:14px; font-weight: bold; } .ticket-expire{ font-size:12px; color:#593320; margin-top:5px; width: 70%; line-height: 20px; } } .ticket-status{ position: absolute; right:0px; top:0px; height:80px; width:80px; overflow: hidden; .ticket-text{ width:80px; height:20px; margin-top:10px; margin-left:20px; transform: rotate(45deg); display:flex; flex-direction: column; justify-content: center; align-items: center; font-size:12px; } } .ticket-status-st{ position: absolute; right:20px; top:20px; width:80px; overflow: hidden; .ticket-st{ width:80px; height:80px; line-height: 30px; border-radius: 50%; display:flex; flex-direction: column; justify-content: center; align-items: center; font-size:18px; background: #FFF; color: #ccc; border: 2px dotted #cccccc; } } .used{ .ticket-text{ background:#593320; color:#FFFFFF; } } } } .ticket-splite{ display: flex; flex-direction: row; background:#FFF; justify-content:space-evenly; align-items: center; .left{ background:#ebeaea; height:20px; width:10px; border-top-right-radius: 60%; border-bottom-right-radius: 60%; } .mid{ height:1px; width:100%; border-bottom: 2px dotted #cccccc; } .right{ background:#ebeaea; height:20px; width:10px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; } } .ticket-other{ background:#FFF; height:20px; .other-txt{ display:flex; flex-direction:row; justify-content: flex-end; align-items: center; font-size:12px; .btn{ width:20%; margin: 0 auto; .btn-user{ height:20px; background-color: #593320; color: #EDEDED; line-height: 20px; font-size:12px; border-radius: 7px; } } } } } .shadow{ box-shadow: 0px 2px 5px 0px #bababa } } } .more-ticket{ background:#ebeaea; width:100%; height:100%; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; .more-ticket-title{ height:40px; width:100%; text-align:center; line-height:40px; font-size:14px; background:#593320; color: #EDEDED; } .more-items{ height:500px; overflow: hidden; overflow-y: auto; padding-bottom: 30px; .item{ margin-top:10px; margin-left: 10px; margin-right: 10px; box-shadow: 0px 2px 5px 0px #bababa; .ticket-content{ background:#FFF; .content{ display:flex; flex-direction: row; padding-top:10px; padding-bottom:10px; position: relative; .ticket-img{ width:30%; display:flex; justify-content: center; align-items: center; .img{ width:50px; height:50px; border-radius: 50%; } } .ticket-info{ width:70%; .ticket-name{ color:#000; font-size:14px; font-weight: bold; } .ticket-expire{ font-size:12px; color:#593320; margin-top:5px; } } .ticket-status{ position: absolute; right:0px; top:0px; height:80px; width:80px; overflow: hidden; .ticket-text{ width:80px; height:20px; margin-top:10px; margin-left:20px; transform: rotate(45deg); display:flex; flex-direction: column; justify-content: center; align-items: center; font-size:12px; } } .used{ .ticket-text{ background:#593320; color:#FFFFFF; } } } } .ticket-splite{ display: flex; flex-direction: row; background:#FFF; justify-content:space-evenly; align-items: center; .left{ background:#ebeaea; height:10px; width:10px; border-top-right-radius: 70%; border-bottom-right-radius: 70%; } .mid{ height:1px; width:100%; border-bottom: 2px dotted #cccccc; } .right{ background:#ebeaea; height:10px; width:10px; border-top-right-radius: 70%; border-bottom-right-radius: 70%; } } .ticket-other{ background:#FFF; height:20px; padding-top: 5px; .other-txt{ display:flex; flex-direction:row; align-items: center; font-size:12px; .btn{ width:20%; margin: 0 auto; .btn-user{ height:20px; line-height: 20px; background-color: #593320; color: #EDEDED; font-size:12px; border-radius: 5px; .shadow{ box-shadow: 0px 2px 20px 0px #bababa } } } } } } } } .qr-code{ background:#FFF; border-radius: 10px; overflow: hidden; .qr-box{ display:flex; justify-content: center; align-items: center; padding:20px; } .qr-text{ text-align:center; font-size:12px; padding-bottom:20px; } } } .ticket-status-st{ position: absolute; right:20px; top:20px; width:80px; overflow: hidden; .ticket-st{ width:80px; height:80px; line-height: 30px; border-radius: 50%; background-color: #FFF; display:flex; flex-direction: column; justify-content: center; align-items: center; font-size:18px; color: #ccc; border: 2px dotted #cccccc; } } .shadow{ box-shadow: 0px 2px 5px 0px #bababa; } .ticket-expire-rule{ font-size:12px; color:darkred; margin-top:5px; width: 60%; line-height: 20px; }