.container{ margin-top: 90px; background-color: #E5E5E5; min-height: 760px; width: 100%; .banner{ width:100%; } .section1{ width: 100%; min-height: 104px; background-color: #FFF; margin: 3px auto; .row { display: flex; /* 设置为Flex布局 */ width: 95%; /* 行宽度占满容器 */ margin: 0 auto; } .column { flex: 1; /* 每列平均分配空间 */ display: flex; flex-direction: column; /* 列内部元素垂直排列 */ padding: 20px 3px; text-align: center; /* 文本居中 */ } .cell { flex: 1; /* 在列内部,每行平均分配空间 */ font-size: 16px; color: #666666; display: flex; font-weight: bold; padding: 0px 0px; /* 内边距 */ .cl{ text-align: left; /* 文本靠左 */ } } .full-row { font-size: 14px; margin-top: -20px; text-align: center; /* 文本居中 */ display: flex; width: 70%; .column { flex: 0 0 59px; /* 每列平均分配空间 */ display: flex; flex-direction: column; /* 列内部元素垂直排列 */ padding: 10px 0px 0px 10px; text-align: left; /* 文本居中 */ } .column2 { flex: 0 0 7px; /* 每列平均分配空间 */ display: flex; flex-direction: column; /* 列内部元素垂直排列 */ padding: 15px 20px 0px 0px; text-align: left; /* 文本居中 */ } } } .section2{ width: 100%; min-height: 132px; background-color: #FFF; border-radius: 10px; margin: -28px auto; position: relative; display: flex; flex-direction: column; /* 子元素垂直排列 */ align-items: center; /* 子元素在交叉轴上居中对齐 */ .row { width: 95%; /* 行宽度占满容器 */ padding: 10px 20px; /* 行内边距 */ text-align: left; /* 文本居中 */ border-bottom: 1px dotted #ccc; /* 每行的底部边框 */ margin-top: 10px; margin-left: 5px; margin-right: 5px; display: flex; flex-wrap: nowrap; } .divider { width: 80%; /* 分割线宽度 */ height: 2px; /* 分割线高度 */ background-color: #000; /* 分割线颜色 */ margin: 20px 0; /* 分割线的上下外边距 */ } } .section3{ width: 100%; min-height: 502px; .item{ width: 100%; height: 180px; background-color: #FFF; margin-top: 5px; border-radius: 5px; display: flex; .item_img{ margin: 15px 0px 10px 10px; width: 222px; height: 147px; border-radius: 7px; overflow: hidden; flex: 0 0 200px; img{ width: 100%; height: 100%; } } .item_info{ flex: 0 0 45%; line-height: 22px; height: 80px; .title{ font-size: 14px; padding: 10px 10px 0px 15px; font-weight: bold; height: 75px; overflow: hidden; margin-bottom: 7px; } } } } .time_yuyue{ width: 95%; padding: 2px 0px 0px 2px; font-size: 12px; color: #666666; display: flex; line-height: 18px; height: 30px; flex-wrap: wrap; .ico{ padding-top: 2px; flex:0 0 20px; padding-left: 5px; } .time{ flex:0 0 80%; text-align: left; } .didian{ flex:0 0 80%; text-align: left; } } .yuyue_btn{ margin-left: 70px; margin-top: 12px; image{ justify-content: flex-end; } } } .slide-image{ width: 100%; height: 300px; }