.page-calendar{ background: #543928; min-height:100vh; width:100%; display: flex; padding-bottom:10px; .calendar-out{ width:95%; margin:auto; height:90%; margin-top:10px; .top-header{ height:20px; background-image: url(/static/images/caltop.png); } .top-content{ background:#FFF; } .mid-bg{ height:110px; background-image: url(/static/images/calmid.jpg); background-size: 101% 110px; background-repeat: no-repeat; width: 100%; } .mid-data{ background:#FFF; height:250px; overflow: hidden; overflow-y: auto; .news-date{ font-size:14px; font-weight: bold; margin-left:10px; } .data-list{ margin-top:10px; display:flex; flex-direction: column; margin-bottom:10px; margin-left:10px; margin-right: 10px; .item{ height:80px; overflow: hidden; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; .image{ width:70px; height: 70px; display:flex; justify-content: center; align-items: center; margin-right: 10px; .img{ width:100%; height:100%; border-radius: 10px; overflow: hidden; } } .news{ width:70%; height:100%; .title{ height:30px; display:flex; flex-direction: row; justify-content: space-between; align-items: center; margin-left:5px; .text{ font-size:16px; font-weight:bold; color:#000; } .date{ font-size:12px; margin-right:10px; } } .intro{ font-size:12px; color:#aaaaaa; margin-top:5px; margin-left:5px; } } } } } } }