Commit e47fed5e authored by lixy's avatar lixy

首页图片优化

parent 0cbd1057
.footer-container {
width: 100%;
height: 300px;
position: relative;
background:url("../assets/images/footer.jpg") no-repeat;
color: #fff;
margin-top: -5px;
}
.footer {
font-family: sans-serif;
padding: 15px 0;
display: flex;
width: 1120px;
margin: 0 auto;
}
.footer-scan{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0px 42px;
border-right: 1px solid #323737;
}
.footer-scan img{
width: 120px;
margin: 5px;
}
.footer-scan:last-child{
border: none;
}
.contact{
background: #1bbb9f;
padding: 3px 10px;
font-size: 14px;
text-align: center;
width: 100px;
margin-top: 20px;
cursor: pointer;
}
.r-contant-i{
margin: 5px 0;
}
.r-contant img{
width:20px;
margin-right: 10px;
}
.link-f{
padding: 20px;
/* border-top: 1px solid #323737; */
font-size: 12px;
color: #999;
}
.link-f a{
color: #999;
}
.link-f a:hover{
color: #1bbb9f;
}
.fri{
list-style-type: none;
padding: 0px;
margin: 0px;
display: flex;
justify-content: space-between;
font-size: 14px;
color: #999;
}
.fri li{
list-style-type: none;
padding: 0px;
margin: 0px;
margin: 0 15px
}
.fri li a{
text-decoration: none;
color: #999;
}
.fri li a:hover{
color: #1bbb9f !important;
cursor:pointer
}
.banner-vehicle{
height: 600px;
}
.video-container{
width: 100%;
height: 100%;
position: relative;
background:url(https://mgmt.dfangche.com/xxfccn/image/home/backgroud03.jpg) no-repeat;
}
@media screen and (max-width:1120px){
.map-container{
width: 100%;
position: relative;
color: #fff;
}
.map-city{
font-size: 60px;
position: absolute;
top: 180px;
}
.map-company{
font-size: 60px;
width: 1120px;
margin: 0 auto;
position: absolute;
top: 300px;
}
}
.map-container{
position: relative;
}
.map-city,.map-company{
position: absolute;
}
@media screen and (min-width:1120px) and (max-width:1200px){
.menu-container{
max-width:1200px;
}
}
@media screen and (min-width:1200px) and (max-width:1920px){
.map-container{
width: 100%;
position: relative;
color: #fff;
}
.map-city{
font-size: 60px;
position: absolute;
top: 180px;
left: 200px;
}
.map-company{
font-size: 60px;
width: 1120px;
margin: 0 auto;
position: absolute;
top: 300px;
left: 200px;
}
}
@media screen and (min-width:1920px){
.map-container{
width: 100%;
position: relative;
color: #fff;
}
.map-city{
font-size: 60px;
position: absolute;
top: 180px;
left: 400px;
}
.map-company{
font-size: 60px;
width: 1120px;
margin: 0 auto;
position: absolute;
top: 300px;
left: 400px;
}
}
.new-tt{
font-size: 20px;
color: #333;
font-weight: 700;
}
.gallery-thumbs{
width: 1120px;
}
.gallery-thumbs-box{
height: 140px;
padding: 10px 0;
}
.video-play{
position: absolute;
width: 770px;
height: auto;
}
.activity-container{
width: 100%;
height: 100%;
position: relative;
background:url(https://mgmt.dfangche.com/xxfccn/image/home/background01.jpg) no-repeat;
}
.vehicle-container{
width: 100%;
height: 100%;
background-position:bottom;
position: relative;
}
.vehicle-bg{
background:url(https://mgmt.dfangche.com/xxfccn/image/home/background02.jpg) no-repeat;
}
.tour-t-l-00, .tour-b-r-01, .tour-t-r-02, .tour-b-l-03, .tour-t-l-04, .tour-b-r-05{
cursor: pointer;
}
.tour-t-l-00:hover .show-detail, .tour-t-r-01:hover .show-detail, .tour-t-r-02:hover .show-detail,
.tour-t-l-03:hover .show-detail, .tour-t-l-04:hover .show-detail{
display: block;
}
.tour-b-r-05:hover .show-detail{
display: block;
top: 170px;
right: 0px;
}
.tour-t-l-00 .show-detail, .tour-b-r-05 .show-detail{
display: none;
background: #000;
opacity: 0.6;
width: 518px;
height: 348px;
position: absolute;
top: 0;
text-align: center;
line-height: 300px;
color: #000;
}
.tour-t-r-01 .show-detail,.tour-t-r-02 .show-detail{
display: none;
background: #000;
opacity: 0.6;
width: 255px;
height: 160px;
position: absolute;
top: 0;
text-align: center;
line-height: 160px;
color: #000;
}
.tour-t-l-03 .show-detail,.tour-t-l-04 .show-detail{
display: none;
background: #000;
opacity: 0.6;
width: 255px;
height: 160px;
position: absolute;
top: 357px;
text-align: center;
line-height: 160px;
color: #000;
}
.more-container{
position: relative;
margin-bottom: 50px;
}
.tour-t{
color: #666;
padding: 15px 30px;
display: flex;
border: 1px solid #eee;
}
/*.tour-t:hover{*/
/*background: linear-gradient(to right, #5DE6AD , #3EC6AD);*/
/*color: #fff;*/
/*padding: 10px;*/
/*display: flex;*/
/*}*/
/*.tour-t:hover .tour-t-s{*/
/*color: #fff;*/
/*}*/
/*.tour-t:hover .tour-t-s-b{*/
/*border-bottom: 3px solid #fff;*/
/*}*/
.tour-t-s, .tour-t-s-b{
font-size: 54px;
color: #E1E1E1;
font-weight: 100;
margin: 0 auto;
}
.tour-t-s-b{
border-bottom: 3px solid #e1e1e1;
width: 20px;
}
/*.tour-t:hover .tour-t-s-b{*/
/*color: #fff;*/
/*border-bottom: 3px solid #fff;*/
/*}*/
.tour-t-s-t{
font-size: 16px;
font-weight: 700;
margin-bottom: 22px;
}
.item-c{
/*width: 600px;*/
/*height: 150px;*/
padding: 10px;
margin: 10px;
}
.title{
width: 1200px;
padding: 10px;
padding-top: 100px;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.item-c-img{
width: 180px;
height: 135px;
margin-right: 20px;
}
.item-c-r{
width: 350px;
height: 135px;
}
.item-c-r .desc{
margin: 28px 0;
font-size: 14px;
color: #666;
}
.item-c-r .time{
font-size: 13px;
color: #666;
}
.line-title{
background: #1bbb9f;
width: 30px;
height: 5px;
margin: 0 auto;
}
.swiper-container-top {
width: 1120px;
height: 481px;
}
.gallery-top img{
width: 100%;
height: 481px;
}
.swiper-wrapper-thu{
/*max-width: 293px;*/
margin: 0 !important;
}
.swiper-wrapper-thu img{
width: 275px;
height: 120px;
/*border: 2px solid #fff;*/
}
.swiper-wrapper-thu img.active, .swiper-wrapper-thu img:hover{
border: 2px solid #1bbb9f;
padding: 5px;
width: 271px;
height: 116px;
}
.swiper-slide{
/*margin-right: 0 !important;*/
}
.min-win-hc{
width: 1070px;
}
.tour-detail{
border: 1px solid rgb(255, 255, 255);
padding: 10px;
color: #fff;
font-size: 14px;
}
.show-detail span{
border: 1px solid rgb(255, 255, 255);
padding: 10px 40px 10px 20px;
color: #fff;
font-size: 14px;
position: relative;
}
.show-detail img{
position: absolute;
top: 10px;
margin-left: 5px;
}
......@@ -290,7 +290,7 @@ h2{
overflow: auto;
}
.swiper-button-prev.swiper-button-black{
background-image: url('/assets/images/l.png') !important;
background-image: url(https://mgmt.dfangche.com/xxfccn/image/home/pre.png) !important;
}
.swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black{
background: #000;
......@@ -305,7 +305,7 @@ h2{
background-position:center;
}
.swiper-button-next.swiper-button-black{
background-image: url('/assets/images/r.png') !important;
background-image: url(https://mgmt.dfangche.com/xxfccn/image/home/next.png) !important;
}
.swiper-button-prev.swiper-button-black:hover, .swiper-button-next.swiper-button-black:hover{
opacity: 0.7;
......
@media screen and (min-width:1120px) and (max-width:1920px){
.menu-logo-l{
width: 175px;
/*margin-right: 60px;*/
}
}
@media screen and (min-width:1920px){
.menu-logo-l{
width: 175px;
/*margin-right: 60px;*/
}
}
.menu-container {
position: fixed;
z-index: 999;
top:0;
width: 100%;
min-width: 1120px;
height: 120px;
background: #fff;
display: flex;
justify-content: center;
border-bottom: 1px solid #eee;
}
.logo-t{
color: #333;
font-size: 16px;
}
.logo-d{
color: #9F9F9F;
font-size: 12px;
}
.menu {
font-family: sans-serif;
position: fixed;
top:50px;
display: flex;
align-items: center;
width: 1120px;
margin: 0 auto;
}
.users {
list-style-type: none;
display: flex;
width: 100%;
justify-content: space-between;
}
.users li a {
display: inline-block;
margin: 0 30px;
padding: 10px 0;
text-align: left;
color: #222;
text-decoration: none;
border-bottom: 3px solid #fff;
font-size: 18px;
}
.users li a:hover, .active{
color: #1bbb9f !important;
border-bottom: 3px solid #1bbb9f !important;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -3,7 +3,7 @@
<div id="goTop">
<div class="show-go-top" v-show="goTopShow" @click="goTop">
<img style="width: 20px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjhGNUZDOUNDQTA4MTFFOTk5MENGOTY5QzExODBBNEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjhGNUZDOUJDQTA4MTFFOTk5MENGOTY5QzExODBBNEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY2NzE3NzI0LTA0YmUtYmU0Mi05MWNiLTdhMmEzYjNhZjkyMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5ok33PAAAA1UlEQVR42mL8//8/A7UBEwMNwKihA2OoLxC/AmIHok0FJSk8WBeIf/2HgD9AHEhAPRjjk5QE4sdQA/8hGVxIrqFcQHwCyaBcIH74HwEmAzEzKYaCFG9EMqAUyeVnkMQ3ATE3sYZOQ9I4DU2OB4g3I8mDLJEgZGghkoaNOLwIEpuCpA4ULNq4DPWDht9/aHhyEYiQIiD+C1X/AYid0Q01B+KvUAWgGJchJukAcRAQf4Pq24Ju6F4kG3WJNBDZQXuAmB/dUF5oBDiRaCBWzDhaSFMdAAQYAIXvsMke49Y7AAAAAElFTkSuQmCC"/>
<img style="width: 20px;" src="https://mgmt.dfangche.com/xxfccn/image/home/top.png"/>
<div class="goTop">回到顶部</div>
</div>
</div>
......
This diff is collapsed.
......@@ -19,6 +19,8 @@ module.exports = {
},
css: [
'~/assets/main.css',
'~/assets/menu.css',
'~/assets/footer.css',
'swiper/dist/css/swiper.min.css',
'element-ui/lib/theme-chalk/index.css'
],
......
......@@ -52,7 +52,7 @@
<img :src="item.logo" alt style="width:100%;height:223px" />
<h2 style="font-size:20px;margin-top:22px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ item.name }}</h2>
<!--<nuxt-link :to="item.link" class="">-->
<button class="buttonDetails">营地详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
<button class="buttonDetails">营地详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
</nuxt-link>
</li>
</ul>
......
This diff is collapsed.
......@@ -58,7 +58,7 @@
<div style="float:left;padding-top:10px;width:850px;color:#333">
<h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2>
<h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6>
<button class="buttonDetails">旅行详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
<button class="buttonDetails">旅行详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
</div>
</nuxt-link>
</li>
......
......@@ -42,7 +42,7 @@
</div>
</div>
<nuxt-link :to="item.link" class="flex-aic">
<button class="buttonDetails">租车详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
<button class="buttonDetails">租车详情<img style="position: absolute;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></button>
</nuxt-link>
</nuxt-link>
</li>
......@@ -163,7 +163,7 @@
mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
},
},
async asyncData() {
const { data } = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/2');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment