.banner { margin: auto; min-width: 1200px; .swiper-pagination-bullet { width: 30px; height: 3px; background: white !important; border-radius: 0; } .banner_img { width: 100%; } } .t_title_row { width: 100%; height: 80px; position: relative; z-index: 999; .title_h { width: 100%; height: 60px; line-height: 60px; position: absolute; top: 0; text-align: center; font-size: 30px; color: rgba(51, 51, 51, 0.2); z-index: 1000; } .title_q { width: 100%; height: 60px; line-height: 60px; position: absolute; top: 20px; text-align: center; font-size: 32px; color: #333333; z-index: 1001; font-weight: bold; } } .shopping_mall_recommendation { padding: 30px 0; margin: 20px auto; } // .producr_list_row { width: 1200px; padding: 0; margin: 30px auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; .product { width: 580px; height: 230px; padding: 30px 0; background: white; //background-color: #00F7DE; border-radius: 5px; } .product .border_div { width: 580px; height: 150px; padding: 40px 0; transition: 0.5s all; } .product .border_div:hover { -moz-box-shadow: 0px 0px 20px #999999; -webkit-box-shadow: 0px 0px 20px #999999; box-shadow: 0px 0px 20px #999999; } .product .product_img { width: 250px; height: 150px; line-height: 150px; text-align: center; float: left; } .product .product_img img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; margin: auto; } .product .product_name { width: 300px; padding: 10px; float: right; } .product .product_name .name { font-size: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product .value { width: 300px; height: 40px; line-height: 40px; margin-top: 40px; font-size: 22px; color: #a42b2b; } .product .value .shopping_car { width: auto; height: 25px; float: right; margin-top: 7.5px; margin-left: 10px; } } .fg_img { width: 100%; display: block; margin: 40px auto; } .event_div { margin: 50px auto; padding: 30px 0; .event_banner { width: 610px; height: 345px; float: left; } .event_banner .swiper-button-next { width: 33px; height: 33px; background: url("/static/images/index_56.png"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } .event_banner .swiper-button-prev { width: 33px; height: 33px; background: url("/static/images/index_57.png"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: none !important; } @list_height: 345px; .zc_list { width: 610px; height: @list_height; margin: 0 auto; background: #00F7DE; position: relative; } .zc_list { background: url("/static/images/index_47.jpg"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } .zc_list .zc_img { width: 160px; height: @list_height; line-height: @list_height; text-align: center; float: left; margin-left: 40px; } .zc_list .zc_img img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; } .zc_title { width: 390px; height: @list_height; float: right; margin-right: 10px; color: white; } .zc_title .z_title { font-size: 35px; margin-top: 80px; text-align: center; } .zc_title .z_info { font-size: 22px; margin-top: 30px; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .zc_title .z_time { font-size: 18px; margin-top: 30px; text-align: center; } .event_info { width: 580px; float: right; } .event_info .title { height: 80px; position: relative; } .event_info .t_title_row .title_h, .event_info .t_title_row .title_q { text-align: left; } .event_info .title .more_div { width: 150px; height: 80px; line-height: 80px; text-align: right; font-size: 16px; position: absolute; right: 0; top: 0; } .event_info .info_row { padding: 10px 0; } .event_info .info_row .info_list { height: 30px; line-height: 30px; font-size: 14px; color: #333333; margin: 10px auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .event_info .info_row .info_list .time{ float: right; } }