/* 轮播 */ .sliderBox,.banner{ height: 470px; } .slider1{ background: url(../imgs/banner1.jpg) no-repeat center; background-size: cover; } .slider2{ background: url(../imgs/banner2.jpg) no-repeat center; background-size: cover; } .slider3{ background: url(../imgs/banner3.jpg) no-repeat center; background-size: cover; } span.swiper-pagination-bullet{ width: 30px; border-radius: 0; } span.swiper-pagination-bullet-active{ background: #3ab851; } /* 内容标题 */ .caption{ border-bottom: 5px solid #ff6a28; padding: 35px 0 15px; margin-bottom: 20px; } .caption .chinese{ font-size: 24px; font-weight: bold; color: #38b954; } .caption .english{ font-size: 12px; color: #b2b2b2; margin-left: 10px; } /* 内容-示范区 */ .content1{ height: 476px; display: flex; border: 1px solid #e3e3e3; border-top: none; overflow: hidden; } .content1 .excellentFarm{ width: 880px; } .farmsTop{ display: flex; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; height: 60px; justify-content: space-between; padding: 0 20px; align-items: center; } /* .farmsTop .title div{ border-left: 3px solid #ff6a28; padding-left: 8px; font-size: 16px; } */ .farmsTop .ctrlBtn{ font-size: 0; border: 1px solid #e8e6e7; } .farmsTop .ctrlBtn button{ width: 30px; height: 26px; line-height: 24px; font-size: 14px; background-color: #fff; border: 1px solid #e8e6e7; } .farmsTop .ctrlBtn button i{ color: #b0b0b0; } .farmsbottom{ display: flex; } .farmsbottom .farmImg{ flex: 1; position: relative; } .farmsbottom .farmImg .hotIcon{ position: absolute; right: 13px; top: 0; } .farmsbottom .farmImg .masking{ padding-top: 20px; position: absolute; bottom: 15px; left: 0; right: 0; background: rgba(58, 158, 89, 0.89); text-align: center; color: #fff; font-size: 14px; line-height: 30px; } .farmsbottom .farmIntroduce{ width: 600px; } .farmsSwiper{ height: 404px; overflow: hidden; padding: 20px; position: relative; } .farmsSwiper .farmsUl{ position: absolute; top: 0; transition: all 1s ease 0s; } .farmsUl .farm-item{ /* height: 62px; */ padding-top: 24px; overflow: hidden; } .farmsUl .farm-item img{ width: 88px; height: 72px; float: left; margin-right: 15px; } .farmsUl .farm-item .news-item-txt{ float: left; width: 456px; } .farmsUl .farm-item .news-item-txt h1{ width: 465px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 28px; font-size: 16px; color: #60a830; } .farmsUl .farm-item .desc{ height: 40px; overflow: hidden; margin-top: 3px; line-height: 20px; font-size: 12px; color: #666; } .content1 .news{ height: 100%; flex: 1; border-left: 1px solid #e3e3e3; } .content1 .news .newsTitle{ display: flex; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; height: 60px; justify-content: space-between; padding: 0 20px; align-items: center; background: #fbfbfb; } .content1 .news .newsTitle span{ font-size: 16px; color: #000; } .content1 .news .newsTitle .more{ height: 22px; padding: 0 10px; background-color: #fff; border: 1px solid #eaeaea; line-height: 22px; font-size: 12px; color: #666; } .content1 .news .newsContent{ height: 87%; overflow: hidden; } .content1 .news .newsContent .news-txt-list{ padding: 10px 20px; } .content1 .news .newsContent .news-txt-item{ position: relative; /* height: 16px; */ overflow: hidden; padding-left: 10px; margin-top: 12px; font-size: 12px; line-height: 21px; } .content1 .news .newsContent .news-txt-item::after{ background-color: #60a830; content: ''; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; } .content1 .news .newsContent .news-txt-item a{ white-space: nowrap; display: block; width: 265px; overflow: hidden; text-overflow: ellipsis; } /* 内容-广告区 */ .adv{ margin-top: 20px; } /* 内容-四季采摘 */ .pickCover{ display: flex; } .farmPick{ flex: 1; border: 1px solid #e3e3e3; } .farmPickTop{ display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 20px; border-bottom: 1px solid #e3e3e3; } .farmPickTop a{ font-size: 14px; color: #41b850; } .farmPickBottom{ display: flex; justify-content: space-between; min-height: 346px; } .farmPickBottom .product{ width:640px; border-right: 1px solid #e3e3e3; } .farmPickBottom .pickTitle{ background: #f0f0f0; color: #000000; font-size: 14px; font-weight: bold; line-height: 35px; padding: 0 30px; position: relative; } .farmPickBottom .pickTitle::before{ position: absolute; content: ''; height: 20px; width: 3px; background: #41b850; top: 7px; left: 20px; } .farmPickBottom .productList{ overflow: hidden; } .farmPickBottom .productItem{ width: 135px; float: left; margin: 10px; } .farmPickBottom .productItem img{ width: 135px; height: 105px; } .farmPickBottom .productItem P{ text-align: center; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .farmPickBottom .productItem:hover a{ color: #3ab851; } .farmPickBottom .supply{ border-left: 1px solid #e3e3e3; width: 260px; } .supply li{ padding: 0 18px; border-top: 1px solid #eaeaea; } .supply li:nth-child(1){ border: none; } .supply .sort-number { margin-right: 7%; text-align: center; line-height: 8px; margin: 5px 11px 5px 0; padding: 10px; display: inline-block; } .supply .sort-number-top{ background: #009237; color: #FFFFFF; } .supply li a{ white-space: nowrap; overflow: hidden; display: inline-block; width: 80%; text-overflow: ellipsis; vertical-align: middle; } .supply li a:hover{ color: #3ab851; } .farmPickImg{ width: 280px; position: relative; } .farmPickImg div{ position: absolute; bottom: 0; left: 0; right: 0; background: #3a9e598c; color: #fff; text-align: center; line-height: 30px; font-size: 16px; padding: 10px; } /* 内容-农场导览 */ .hacienda{ border: 1px solid #e3e3e3; } .hacienda .haciendaTop{ display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 20px; border-bottom: 1px solid #e3e3e3; } .hacienda .haciendaTop a{ color: #fff; border-radius: 5px; background-color: #ff6a28; padding: 8px 22px; } .hacienda .haciendaList{ display: flex; flex-flow: wrap; } .hacienda .haciendaList{ padding: 20px 20px 0 20px; } .hacienda .haciendaItem{ display: flex; margin-bottom: 20px; } .hacienda .haciendaImg{ width: 205px; height: 175px; position: relative; } .hacienda .haciendaImg .haciendaImg1{ width: 100%; height: 100%; } .hacienda .haciendaImg .haciendaImg2{ position: absolute; top: 0; left: 10px; } .hacienda .haciendaItem .haciendaTxt{ width: 180px; padding: 10px 15px; } .hacienda .haciendaItem .haciendaTxt h2{ font-size: 14px; font-weight: bold; line-height: 33px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hacienda .haciendaItem .haciendaTxt .desc{ letter-spacing: 2px; height: 82px; overflow: hidden; margin-bottom: 20px; } .hacienda .haciendaItem .haciendaTxt button{ color: #fff; padding: 5px 10px; border-radius: 5px; } .hacienda .haciendaItem .haciendaTxt button.btn1{ background-color: #00aeed; } .hacienda .haciendaItem .haciendaTxt button.btn2{ background-color: #3bb852; } /* 内容-旅游导览 */ .travelCover{ display: flex; } .travelCover .travelLeft{ flex: 1; } .travelLeft .travelList{ display: flex; flex-flow: wrap; } .travelList .travelItem{ width: 282px; margin: 10px; background-color: #f8f8f8; cursor: pointer; } .travelList .travelItem .travelImg{ position: relative; width: 270px; height: 155px; } .travelList .travelItem .travelImg .haciendaImg1{ width: 100%; height: 100%; } .travelList .travelItem .travelImg .haciendaImg2{ position: absolute; top: 0; left: 10px; } .travelList .travelItem .travelTitle{ padding: 10px; } .travelList .travelItem .travelTitle h2{ font-size: 14px; font-weight: bold; line-height: 30px; } .travelList .travelItem:hover .travelTitle h2{ color: #3ab851; } .travelList .travelItem .travelTitle div{ height: 40px; overflow: hidden; font-size: 14px; } .travelCover .travelRight{ width: 280px; padding-right: 20px; } .travelCover .travelRight .travelGuide{ /* width: 285px; */ padding: 20px 20px 20px 0; margin-top: 25px; } .travelCover .travelRight >a{ } .travelRight .travelGuide{ display: flex; align-items: center; border: 1px solid #e3e3e3; justify-content: space-around; padding: 20px 10px; box-shadow: 1px 1px 6px 0px #dadada; } .travelRight .travelGuide1{ border-top: 3px solid #34abe3; } .travelRight .travelGuide1 .guideTag{ color: #34abe3; } .travelRight .travelGuide2{ border-top: 3px solid #e4c666; } .travelRight .travelGuide2 .guideTag{ color: #e4c666; } .travelRight .travelGuide3{ border-top: 3px solid #e86f90; } .travelRight .travelGuide3 .guideTag{ color: #e86f90; } .travelRight .travelGuide4{ border-top: 3px solid #7accc0; } .travelRight .travelGuide4 .guideTag{ color: #7accc0; } .travelRight .travelGuide div .guideTag{ font-size: 18px; line-height: 28px; font-weight: 700; } .travelRight .travelGuide div p{ color: #c1c1c1; } /* 内容-民宿导览 */ .hotelCover{ display: flex; border: 1px solid #e3e3e3; } .hotelCover .hotHotel{ width: 282px; border-right: 1px solid #e3e3e3; } .hotelCover .hotHotel .title{ height: 60px; line-height: 60px; padding: 0 20px; border-bottom: 1px solid #e3e3e3; background: #f8f8f8; font-size: 18px; font-weight: 700; } .hotelCover .hotHotel .title span{ font-size: 12px; color: #797979; font-weight: 100; margin-left: 10px; } .hotHotelList .hotHotelItem{ padding: 16px 16px 16px 20px; border-bottom: 1px solid #e3e3e3; margin-bottom: 0px; overflow: hidden; } .hotHotelList .hotHotelItem:last-child{ border: none; } .hotHotelList .hotHotelItem img{ float: left; } .hotHotelList .hotHotelItem .desc{ margin-left: 110px; } .hotHotelList .hotHotelItem .desc h3{ font-size: 14px; line-height: 30px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hotHotelList .hotHotelItem .desc div{ height: 41px; overflow: hidden; line-height: 20px; color: #a4a4a4; } .hotHotelList .hotHotelItem:hover .desc h3{ color: #3ab851; } .recommendHotel{ flex: 1; } .recommendHotel .titel{ display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 20px; border-bottom: 1px solid #e3e3e3; } .recommendHotel .titel div{ font-size: 18px; font-weight: 700; } .recommendHotel .titel .more{ background: #ff6a28; color: #fff; border-radius: 5px; padding: 8px 22px; } .recommendHotel .recommendHotelList{ display: flex; flex-flow: wrap; } .recommendHotel .recommendHotelList .recommendHotelItem{ width: 305px; padding: 20px; } .recommendHotelList .recommendHotelItem:hover .recommendHotelImg img{ transform:scale(1.2);transform:scale(1.2); -webkit-transform:scale(1.2);transform:scale(1.2); } .recommendHotelList .recommendHotelItem:hover h1{ color: #3ab851; } .recommendHotelItem .recommendHotelImg{ width: 100%; height: 200px; overflow: hidden; } .recommendHotelItem .recommendHotelImg img{ width: 100%; height: 100%; transition:all 0.6s; } .recommendHotelItem h1{ line-height: 30px; padding: 0 20px; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recommendHotelItem .area{ line-height: 14px; padding: 0 20px; color: #949494; height: 30px; overflow: hidden; margin-bottom: 15px; } .recommendHotelItem .sortNum{ text-align: right; line-height: 14px; } .recommendHotelItem .sortNum span{ padding: 5px 10px; background: #f86928; color: #fff; border-radius: 6px; } /* 橘黄标题 */ .orangTitle{ border-left: 3px solid #ff6a28; padding-left: 8px; font-size: 16px; } /* 农场导览弹出观光样式 */ .tourismShow{ position: relative; z-index: 999; opacity: 0; display: none; position: fixed; top: 25%; left: 50%; margin-left: -300px; width: 600px; min-height: 400px; background-color: #fff; border: 1px solid #f1f1f1; -webkit-box-shadow: 2px 4px 10px rgba(0,0,0,.15); -moz-box-shadow: 2px 4px 10px rgba(0,0,0,.15); -o-box-shadow: 2px 4px 10px rgba(0,0,0,.15); box-shadow: 2px 4px 10px rgba(0,0,0,.15); padding: 20px; border-radius: 12px; z-index: 9; border-top-left-radius: 0; cursor: default; border-top-right-radius: 0; transition: all .5s; } .tourismShow .title{ border-left: 3px solid #ff6a28; padding-left: 8px; font-size: 16px; } .tourismShow .line{ border-bottom: 1px solid #ddd; margin-top: 10px; } .tourismShow .content{ height: 430px; padding-top: 20px; } .tourismShow .tourismShowCloseBtn{ position: absolute; right: 15px; top: 11px; border-radius: 50%; border: 2px solid #ddd; width: 25px; height: 25px; line-height: 20px; text-align: center; cursor: pointer; } .tourismShow .content .guideForm>input{ width: 40%; } .tourismShow .content .guideForm>button{ color: #fff; padding: 5px 6px; border-radius: 5px; vertical-align: middle; margin-left: 10px; background: #1eaeed; } .tourismShow .content .guideForm>button{ color: #fff; padding: 5px 6px; border-radius: 5px; vertical-align: middle; margin-left: 10px; background: #1eaeed; } .tourismShow .content #map{ height: 373px; margin-top: 10px; } .tourismShow .loadDiv{ position: absolute; left: 45%; top: 45%; }