body{ margin: 0; color: #333; display: flex; flex-direction: column; min-height: 100vh; font-family: "microsoft yahei"; background-color: #f8f8f8; font-size: 16px; } *{ margin: 0; padding: 0; box-sizing: border-box; line-height: unset !important; } .crumbs{ width: 1200px; margin:auto; margin-top: 20px; color: #444; cursor: pointer; font-size: 16px; } .crumbs a{ color: #444; } .crumbs a:hover{ color: #ff9736; } /* 本地宝头部 */ .header .header-content{ width: 1200px; } .header-content ul li a{ font-size: 16px !important; } .header-content a{ font-size: 16px !important; } .bot-about { margin: auto; text-align: center; color: #999; margin-top: 20px; padding: 20px 50px; text-align: center; color: #666; font-size: 14px; width: 1200px; } .wenzi { padding: 12px 0px 12px 0px; text-align: center; border-top: 1px solid #000000; border-top: 0px !important; line-height: normal; font-size: 14px !important; } .footer .notice { text-align: center; display: block; margin-top: 15px; font-size: 14px !important; } .footer { margin-top: 0px !important; width: 100%; background-color: #666666; color: #999; } .footer a { color: #999; text-decoration: none; font-size: 14px; } a:hover{ color: #ff8c20; } .center_part{ margin: auto; width: 1200px; margin-top: 20px; background-color: #fff; border-radius: 12px; } .main_part{ flex: 1; background-color: #f8f8f8; margin: auto; margin-top: 20px; width: 1200px; overflow: hidden; } /* 顶部 */ .top_back{ margin: auto; background-image: ; background-position: center; background-size: 1920px auto; height: 253px; background-repeat: no-repeat; width: 100%; } .top_menu{ color: #fff; width: 100%; height:54px; display: flex; align-items: center; background-color: rgba(255,255,255,0.12); } .top_menu a{ color: #fff; } .top_menu .center{ margin: auto; width: 1200px; display: flex; align-items: center; justify-content: space-between; } .top_menu .center ul{ display: flex; } .top_menu .center ul li{ margin-right: 30px; display: flex; align-items: center; cursor: default; } .top_menu .center ul li.active{ font-weight: 600; } .top_menu .center ul li img{ margin-left: 8px; width: 12px;height: 12px; } .top_menu .city_menu{ position: relative; border-radius: 6px; border: 1px solid rgba(255,255,255,0.7); padding: 4px 14px; display: flex; align-items: center; cursor: default; } .top_menu .city_menu img{ width: 12px; height: 12px; margin-left: 8px; } .top_back .top_info{ width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; /* background-color: pink; */ margin-top: 70px; } .top_back .top_info .title .time{ color: #ffe641; } .top_back .top_info .logo{ display: flex; align-items: flex-end; color: white; font-size: 18px; } .top_back .top_info .logo img{ width: 183px; height: 49px; margin-right: 12px; margin-bottom: -5px; } .top_back .top_info .tips{ width: fit-content; height: 40px; line-height: 40px; font-size: 16px; color: #4587f8; border-radius: 6px; background: #fff; padding: 0px 17px; margin-top: 12px; } .search_form{ width: 670px; height: 50px; box-shadow: 0 0 20px 0 #00000005; border-radius: 68px; padding-left: 26px; padding-right: 6px; display: flex; align-items: center; justify-content: space-between; background-color: white; } .search_form img{ width: 20px; height: 20px; margin-right: 16px; } .search_form input{ outline: none; border: none; flex: 1; height: 48px; font-size: 16px; color: #333; } .search_form input::placeholder{ color: #999; } .search_form .btn{ border:none; color: white; width: 126px; height: 40px; flex-shrink: 0; border-radius: 36px; font-size: 18px; font-weight: 600; margin-left: 12px; background: linear-gradient(139deg, #ff8a00 14.72%, #f60 76.61%); } /* 顶部end */ /* 热门服务 */ .remen_fw{ padding: 8px; display: flex; } .remen_fw .fuwu_logo{ width: 172px; height: 120px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(270deg, #ffffff00 0.32%, #ffe8d200 0.33%, #ffedddcc 99.68%); /* display: flex; align-items: center; */ padding-left: 32px; padding-top: 14px; } .remen_fw .fuwu_logo img{ width: 86px; height: 86px; } .swiper{ /* background-color: pink; */ } .swiper-wrapper{ /* padding: 20px 60px; */ /* background-color: rgb(177, 177, 245); */ } .swiper .swiper-button-next:after, .swiper .swiper-button-prev:after{ color: rgb(163, 163, 163); font-size: 20px; } .swiper .swiper-slide{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; padding: 5px 55px; } .swiper .swiper-slide .fuwu_item{ width: 162px; margin: 12px 0; margin-right: 20px; /* background-color: rgb(189, 189, 248); */ } .swiper .swiper-slide .fuwu_item:nth-child(5n){ margin-right: 0px; } .swiper .fuwu_item .r_name{ text-align: center; } /* 分类条 */ .fenlei_tab{ position: sticky; top: 0; padding: 5px 0; z-index: 1001; box-shadow: 0 0 20px 0 #00000010; } .fenlei_tab .swiper2 .swiper-slide{ display: flex; /* flex-wrap: nowrap; */ justify-content: space-between; align-items: center; } .fenlei_tab .swiper2 .swiper-wrapper .swiper-slide:last-child{ display: flex; justify-content: flex-start; align-items: flex-start; /* background-color: blue; */ } .fenlei_tab .swiper2 .swiper-wrapper .swiper-slide:last-child .fenlei_item{ margin-right: 30px; } .fenlei_tab .fenlei_item{ font-size: 18px; /* background-color: pink; */ height: 60px; position: relative; max-width: 100px; white-space: wrap; text-align: center; flex-shrink: 0; display: flex; align-items: center; cursor: default; } .swiper2 .swiper-slide{ padding: 0 60px; } .fenlei_tab .fenlei_item.active{ color: #f60; font-weight: 600; } .fenlei_tab .fenlei_item.active::after{ content: ""; display: block; position: absolute; bottom: 0; left: 50%; transform: translatex(-50%); width: 32px; height: 5px; background-color: #ff6600; border-radius: 0px 42px 0px 29px; } /* 每一块主要内容 */ .content_box{ min-height: 240px; position: relative; display: flex; /* align-items: flex-start; */ justify-content: space-between; margin-bottom: 20px; /* background-color: pink; */ } .content_box .point{ position: absolute; top: -70px; } .content_box .left{ padding: 20px 26px 31px 26px; width: 873px; background-color: #fff; border-radius: 12px; min-height: 241px; } /* .main_part .content_box:first-child .left{ border-radius: 12px 12px 0 0 ; } .main_part .content_box:last-child .left{ border-radius: 0 0 12px 12px; } */ .content_box .t{ display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #999; margin-bottom: 24px; } .content_box .t .t_title{ font-size: 18px; font-weight: 600; color: #333; } .content_box .t .t_more{ font-size: 14px; font-weight: 500; color: #999; } .card_box{ display: flex; justify-content: space-between; } .card_box .card{ width: 405px; /* height: 148px; */ background-color: #fafafa; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; transition: all 0.2s linear; } .card_box .card .info_t{ height: 60px; display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 14px; } .card_box .card .info_t .card_icon{ width: 56px; height: 56px; margin-top: 4px; opacity: 0.2; } .card_box .card:hover .card_icon{ opacity: 1; } .card_box .card:hover { box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.08); } .card_box .card .relate_t{ background-color: #f5f5f5; flex: 1; padding: 16px 16px; } .card_box .card .relate_t .line{ margin-bottom: 13px; color: #999; display: flex; line-height: 26px !important } .card_box .card .relate_t .line .label{ white-space: nowrap; } .card_box .card .relate_t .line a{ color: #666; padding-right: 15px; margin-right: 14px; position: relative; } .card_box .card .relate_t .line a::after{ content: "|"; position: absolute; top: 50%; transform: translatey(-50%); font-size: 12px; color: rgb(226, 226, 226); right: 0; } .card_box .card .relate_t .line a:last-child::after{ content: ""; } .card_box .card .relate_t .line a:hover{ color: rgb(255, 123, 35); } .card_box .card .relate_t .line:last-child{ margin-bottom: 0; } .content_box .right{ width: 303px; background-color: #fff; border-radius: 12px; padding: 16px 22px; /* margin-bottom: 12px; */ } .content_box .right .zixun_title{ font-size: 16px; display: flex; justify-content: space-between; align-items: center; } .content_box .right .zixun_title span{ max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .content_box .right .zixun_title .more{ font-size: 14px; color: #999; white-space: nowrap; } .content_box .right ul li a{ display: block; font-size: 14px; color: #666; margin-top: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .content_box .right ul li a::before{ content: "•"; margin-right: 7px; color: #f60; } .select_btn{ position: relative; } .swiper-button-next:after{ content: ""; } .swiper-button-prev:after{ content: ""; } .big_swiper_btn{ width: 21px; height: 21px; } .small_swiper_btn{ width: 15px; height: 15px; } .content_box .right.no_data_box{ min-height: 241px; display: flex; align-items: center; justify-content: center; } .no_data{ margin: auto; font-size: 14px; color: #888; display: flex; flex-direction: column; align-items: center; justify-content: center; } .no_data img{ width: 220px; } .item_list{ display: flex; flex-wrap: wrap; } .item_list a{ display: block; } .item_list a:last-child{ margin-right: 0 !important; padding-right: 0 !important; } .crumbs{ width: 1200px; margin: auto; color: #555; font-size: 15px; } .crumbs a{ color: #555; font-size: 15px; } .crumbs a:hover{ color: #f60; } .crumbs h1{ font-size: 15px; margin: 0; font-weight: normal; display: inline; } .ggwrap{ width: 1200px; margin: 0 auto; margin-top: 20px; padding:20px; flex-shrink: 0; border-radius: 20px; /* border: 1px solid #ffcbb7; */ background: linear-gradient(172deg, #ffedddcc 0.48%, #fff 112.46%); } .ggwrap .ggtitle{ color: #333; text-align: left; width: fit-content; font-family: "pingfang sc"; font-size: 18px; font-style: normal; font-weight: 700; position: relative; line-height: 18px; } .ggwrap .ggtitle:after{ position: absolute; bottom:-14px; left: calc(50% - 30px); content:""; width: 60px; height: 5px; flex-shrink: 0; background: linear-gradient(270deg, #f60 0%, #fff 100%);; } .ggdetail-wrap{ margin-top: 28px; display: flex; } .ggdetail:first-child{ margin-left: 0; } .ggdetail{ margin-left: 18px; width: 230px; height: 100px; flex-shrink: 0; border-radius: 10px; background: #fff; } .ggdetail img{ width: 100%; height: 100%; }