.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:20%; display:flex; justify-content: center; align-items: center; .img{ width:50px; height:50px; border-radius: 50%; } } .ticket-info{ width:55%; .ticket-name{ color:#000; font-size:14px; font-weight: bold; } .ticket-expire{ font-size:12px; color:#593320; margin-top:5px; width: 100%; 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:#F4F5F7; 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:#F4F5F7; height:20px; width:10px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; } } .ticket-other{ background:#FFF; height:20px; .intro{ font-size:12px; margin-left:20px; color:#593320; } .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 } }