.event-content{ background:#F0F0F0; width:100%; } .com-event-item{ background:#FFF; display: flex; flex-direction: row; min-height:80px; margin-bottom:5px; padding-top: 5px; .event-img{ display: flex; width:90px; height:90px; vertical-align: top; align-items: center; margin: 10px 15px 0px 10px; border-radius: 5px; overflow: hidden; .img{ width:100%; height:100%; } } .event-info{ display:flex; width:45%; flex-direction: column; .name{ height:30px; line-height: 30px; font-size:14px; font-weight: bold; color:#000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tip{ font-size:12px; color:#333; height:20px; line-height: 20px; } .header{ margin-top:5px; margin-bottom: 5px; .user{ height:30px; width:30px; float:left; margin-right: 5px; border-radius: 50%; overflow: hidden; .header-icon{ width:30px; height:30px; border-radius: 50%; } } .more{ border-radius: 50%; overflow: hidden; border:1px solid #b21c1c; display:flex; justify-content: center; align-items: center; padding-bottom:10px; } } } .tags{ display: flex; flex-direction: row; .tag{ margin-right: 4px; font-size:12px; border:1px solid #b21c1c; border-radius: 7px; color: #b21c1c; padding: 0px 5px; } } .event-btn{ font-size:12px; display: flex; flex-direction: column; margin-top: 30px; width: 80px; margin-left: 10px; .btn{ margin-top:10px; margin-right:10px; display: flex; justify-content: center; align-items: center; .btn-yy{ height:30px; line-height: 30px; width:60px; padding:0px; background:#b21c1c; font-size:12px; color:#FFF; border-radius: 10px; } } .qty{ font-size:12px; margin-top:10px; } } } .part_area{ margin-top: -5px; width: 150px; height: 40px; overflow: hidden; display: flex; flex-wrap: wrap; } .partic{ border-radius: 50%;width: 20px; height: 20px; overflow: hidden; margin-right:1px; margin-bottom:2px; display: flex; } .partic img { width: 100%; height:100%; } .parttip{ width: 100%; position: relative; font-size: 12px; }