@@ -36,7 +36,7 @@ export default { | |||||
background: none !important; | background: none !important; | ||||
border-bottom: none !important; | border-bottom: none !important; | ||||
width: 50%; | width: 50%; | ||||
min-width: 900px; | |||||
min-width: 800px; | |||||
} | } | ||||
.el-menu-item { | .el-menu-item { | ||||
margin-right: 3%; | margin-right: 3%; | ||||
@@ -1,9 +1,9 @@ | |||||
<template> | <template> | ||||
<el-container> | <el-container> | ||||
<el-header> | <el-header> | ||||
<img src="@/assets/logo.png" id="logo" /> | |||||
<yqheaders/> | |||||
<el-button plain class="login" size="small">注册 / 登陆</el-button> | |||||
<img src="@/assets/logo.png" id="logo" /> | |||||
<yqheaders/> | |||||
<el-button plain class="login" size="small">注册 / 登陆</el-button> | |||||
</el-header> | </el-header> | ||||
<el-main> | <el-main> | ||||
<router-view /> | <router-view /> | ||||
@@ -31,8 +31,8 @@ | |||||
<div class="bottom"/> | <div class="bottom"/> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="wk"> | |||||
<div class="content"> | |||||
<div class="swhz"> | |||||
<div class="content"> | |||||
<div class="callme"> | <div class="callme"> | ||||
<a class="title">商务合作</a> | <a class="title">商务合作</a> | ||||
<div> | <div> | ||||
@@ -43,6 +43,18 @@ | |||||
<img src="../../assets/aboutbottom.png"> | <img src="../../assets/aboutbottom.png"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<!-- <div id="wk"> | |||||
<div class="content"> | |||||
<div class="callme"> | |||||
<a class="title">商务合作</a> | |||||
<div> | |||||
<a>联系方式: 458233656411</a> | |||||
<a>联系邮箱: 458233656411@Gmail.com</a> | |||||
</div> | |||||
</div> | |||||
<img src="../../assets/aboutbottom.png"> | |||||
</div> | |||||
</div> --> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
@@ -120,25 +132,23 @@ export default { | |||||
#hot, #daliay, #wk { | #hot, #daliay, #wk { | ||||
width: 100%; | width: 100%; | ||||
height: 700px; | |||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
flex-direction: column; | flex-direction: column; | ||||
justify-content: center; | justify-content: center; | ||||
background: #E3E5EA; | background: #E3E5EA; | ||||
.content { | .content { | ||||
min-width: 1100px; | |||||
width: 60%; | |||||
width: 1200px; | |||||
height: 90%; | height: 90%; | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
padding-top: 30px; | |||||
.top, .bottom { | .top, .bottom { | ||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.top { | .top { | ||||
min-height: 470px; | |||||
margin-bottom: 40px; | |||||
margin-bottom: 30px; | |||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: space-around; | justify-content: space-around; | ||||
@@ -211,6 +221,7 @@ export default { | |||||
min-height: 120px; | min-height: 120px; | ||||
background-image: url('../../assets/bottom.png'); | background-image: url('../../assets/bottom.png'); | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
margin-bottom: 30px; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -234,6 +245,47 @@ export default { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.swhz { | |||||
background: #E3E5EA; | |||||
.content { | |||||
display: flex; | |||||
flex-direction: row; | |||||
align-items: center; | |||||
margin: 0 auto; | |||||
width: 1200px; | |||||
padding: 96px 0; | |||||
.callme { | |||||
display: flex; | |||||
flex-direction: column; | |||||
.title { | |||||
font-size: 36px; | |||||
border-left: 7px solid #07CAAF; | |||||
padding-left: 30px; | |||||
text-align: left; | |||||
font-weight: bold; | |||||
color: #0D1114; | |||||
} | |||||
div { | |||||
margin-top: 50px; | |||||
a { | |||||
text-align: left; | |||||
display: block; | |||||
padding-left: 35px; | |||||
font-size: 18px; | |||||
font-weight: 400; | |||||
color: #0D1114; | |||||
line-height: 30px; | |||||
} | |||||
} | |||||
} | |||||
img { | |||||
width: 390px; | |||||
height: 240px; | |||||
margin-left: 300px; | |||||
} | |||||
} | |||||
} | |||||
#wk { | #wk { | ||||
height: 400px; | height: 400px; | ||||
background: #E3E5EA; | background: #E3E5EA; | ||||
@@ -242,7 +294,7 @@ export default { | |||||
flex-direction: row; | flex-direction: row; | ||||
align-items: center; | align-items: center; | ||||
.callme { | .callme { | ||||
height: 60%; | |||||
height: 1200px; | |||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
.title { | .title { | ||||
@@ -142,12 +142,6 @@ export default { | |||||
name: '丰田锋兰达值得买吗?', | name: '丰田锋兰达值得买吗?', | ||||
content: '年底购车多少钱能落地价?', | content: '年底购车多少钱能落地价?', | ||||
flag: 'video' | flag: 'video' | ||||
}, | |||||
{ | |||||
img: '/aigc_img4.png', | |||||
name: '丰田锋兰达值得买吗?', | |||||
content: '年底购车多少钱能落地价?', | |||||
flag: 'video' | |||||
} | } | ||||
], | ], | ||||
gg1: '', | gg1: '', | ||||
@@ -284,15 +278,14 @@ export default { | |||||
#hot, #daliay { | #hot, #daliay { | ||||
width: 100%; | width: 100%; | ||||
height: 700px; | |||||
background: #E3E5EA; | background: #E3E5EA; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
flex-direction: column; | flex-direction: column; | ||||
justify-content: center; | justify-content: center; | ||||
padding-top: 30px; | |||||
.content { | .content { | ||||
min-width: 1100px; | |||||
width: 60%; | |||||
width: 1200px; | |||||
height: 90%; | height: 90%; | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
@@ -301,12 +294,12 @@ export default { | |||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.top { | .top { | ||||
min-height: 470px; | |||||
margin-bottom: 40px; | |||||
margin-bottom: 30px; | |||||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: space-around; | justify-content: space-around; | ||||
padding: 20px 0; | |||||
.ai { | .ai { | ||||
position: relative; | position: relative; | ||||
a { | a { | ||||
@@ -356,10 +349,12 @@ export default { | |||||
min-height: 120px; | min-height: 120px; | ||||
background-image: url('../../assets/bottom.png'); | background-image: url('../../assets/bottom.png'); | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
margin-bottom: 30px; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
#daliay { | #daliay { | ||||
padding-top: 0; | |||||
.content { | .content { | ||||
.top { | .top { | ||||
background-color: #ffffff00; | background-color: #ffffff00; | ||||
@@ -389,13 +384,13 @@ export default { | |||||
} | } | ||||
#zb { | #zb { | ||||
.imagezb { | .imagezb { | ||||
width: 240px; | |||||
width: 220px; | |||||
height: 400px; | height: 400px; | ||||
float: left; | float: left; | ||||
margin-right: 60px; | |||||
margin-right: 20px; | |||||
position: relative; | position: relative; | ||||
img { | img { | ||||
width: 240px; | |||||
width: 220px; | |||||
height: 370px; | height: 370px; | ||||
} | } | ||||
.el-button { | .el-button { | ||||
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<el-carousel height="590px"> | |||||
<el-carousel > | |||||
<el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | ||||
<div id="txt"> | <div id="txt"> | ||||
<a class="title">{{ item.title }}</a> | <a class="title">{{ item.title }}</a> | ||||
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<el-carousel height="590px"> | |||||
<el-carousel > | |||||
<el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | ||||
<div id="txt"> | <div id="txt"> | ||||
<a class="title">{{ item.title }}</a> | <a class="title">{{ item.title }}</a> | ||||
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<el-carousel height="590px"> | |||||
<el-carousel > | |||||
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | <el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | ||||
<div id="txt"> | <div id="txt"> | ||||
<a class="title">{{ item.title }}</a> | <a class="title">{{ item.title }}</a> | ||||
@@ -12,7 +12,7 @@ | |||||
<div class="content"> | <div class="content"> | ||||
<div class="top"> | <div class="top"> | ||||
<div id="videocar" class="lr"> | <div id="videocar" class="lr"> | ||||
<el-carousel :interval="5000" arrow="always" height="500px"> | |||||
<el-carousel :interval="5000" arrow="always" height="470px"> | |||||
<template v-for="item in hotList.left" > | <template v-for="item in hotList.left" > | ||||
<el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'"> | <el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'"> | ||||
<video :src="item" /> | <video :src="item" /> | ||||
@@ -21,7 +21,7 @@ | |||||
</el-carousel> | </el-carousel> | ||||
</div> | </div> | ||||
<div id="hottxt" class="lr"> | <div id="hottxt" class="lr"> | ||||
<el-carousel :interval="5000" height="500px"> | |||||
<el-carousel :interval="5000" height="470px"> | |||||
<el-carousel-item v-for="item in hotList.right" :key="item.title"> | <el-carousel-item v-for="item in hotList.right" :key="item.title"> | ||||
<div class="txtcontent"> | <div class="txtcontent"> | ||||
<div class="title"> | <div class="title"> | ||||
@@ -55,15 +55,18 @@ | |||||
<el-button plain class="more" size="small">MORE</el-button> | <el-button plain class="more" size="small">MORE</el-button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="yyzrbimg lr" :style="{ backgroundImage: `url(${daliay.img})` }"/> | |||||
<div class="yyzrbimg lr" > | |||||
<img :src="daliay.img" alt=""> | |||||
</div> | |||||
</div> | </div> | ||||
<div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/> | <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="wk"> | <div id="wk"> | ||||
<a :href="alink" target="_blank"> | |||||
<el-button type="primary" class="wkbtn" size="medium">点击进入</el-button> | |||||
</a> | |||||
<a :href="alink" target="_blank"> | |||||
<img src="@/assets/wk.png" alt=""> | |||||
<el-button type="primary" class="wkbtn" size="medium">点击进入</el-button> | |||||
</a> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -191,14 +194,13 @@ export default { | |||||
} | } | ||||
#hot, #daliay { | #hot, #daliay { | ||||
width: 100%; | width: 100%; | ||||
height: 700px; | |||||
background: #E3E5EA; | background: #E3E5EA; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
padding: 30px 0; | |||||
.content { | .content { | ||||
width: 60%; | |||||
min-width: 1100px; | |||||
width: 1200px; | |||||
height: 90%; | height: 90%; | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
@@ -207,9 +209,10 @@ export default { | |||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.top { | .top { | ||||
min-height: 470px; | |||||
// min-height: 470px; | |||||
// background: black; | // background: black; | ||||
display: flex; | display: flex; | ||||
padding-bottom: 30px; | |||||
.lr { | .lr { | ||||
width: 50%; | width: 50%; | ||||
height: 100%; | height: 100%; | ||||
@@ -283,6 +286,7 @@ export default { | |||||
min-height: 120px; | min-height: 120px; | ||||
background-image: url('../../assets/bottom.png'); | background-image: url('../../assets/bottom.png'); | ||||
background-size: 100% 100%; | background-size: 100% 100%; | ||||
margin-top: 30px; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -337,19 +341,22 @@ export default { | |||||
} | } | ||||
} | } | ||||
.yyzrbimg { | .yyzrbimg { | ||||
background-image: url('../../assets/yyzrb.png'); | |||||
background-size: 100% 100%; | |||||
// background-image: url('../../assets/yyzrb.png'); | |||||
// background-size: 100% 100%; | |||||
width: 50% !important; | width: 50% !important; | ||||
img{ | |||||
width: 640px; | |||||
height: 438px; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||
#wk { | #wk { | ||||
background-image: url('../../assets/wk.png'); | |||||
width: 100%; | width: 100%; | ||||
// min-width: 1920px; | |||||
height: 830px; | |||||
background-size: 100% 100%; | |||||
position: relative; | position: relative; | ||||
img { | |||||
width: 100%; | |||||
} | |||||
.el-button--primary { | .el-button--primary { | ||||
width: 200px; | width: 200px; | ||||
height: 60px; | height: 60px; | ||||
@@ -360,8 +367,9 @@ export default { | |||||
font-weight: 400; | font-weight: 400; | ||||
color: #FFFFFF; | color: #FFFFFF; | ||||
position: absolute; | position: absolute; | ||||
top: 70%; | |||||
left: 45%; | |||||
bottom: 10%; | |||||
left: 50%; | |||||
margin-left: -100px; | |||||
} | } | ||||
} | } | ||||
</style> | </style> | ||||
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<el-carousel height="590px"> | |||||
<el-carousel > | |||||
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | <el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | ||||
<div id="txt"> | <div id="txt"> | ||||
<a class="title">{{ item.title }}</a> | <a class="title">{{ item.title }}</a> | ||||
@@ -260,8 +260,7 @@ export default { | |||||
flex-direction: column; | flex-direction: column; | ||||
justify-content: center; | justify-content: center; | ||||
.content { | .content { | ||||
min-width: 1100px; | |||||
width: 60%; | |||||
width: 1200px; | |||||
height: 90%; | height: 90%; | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<el-carousel height="590px"> | |||||
<el-carousel > | |||||
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | <el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | ||||
<div id="txt"> | <div id="txt"> | ||||
<a class="title">{{ item.title }}</a> | <a class="title">{{ item.title }}</a> | ||||
@@ -231,15 +231,14 @@ export default { | |||||
} | } | ||||
#hot, #daliay, #wk { | #hot, #daliay, #wk { | ||||
width: 100%; | width: 100%; | ||||
height: 700px; | |||||
background: #E3E5EA; | background: #E3E5EA; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
flex-direction: column; | flex-direction: column; | ||||
justify-content: center; | justify-content: center; | ||||
padding-top: 30px;; | |||||
.content { | .content { | ||||
min-width: 1100px; | |||||
width: 60%; | |||||
width: 1200px; | |||||
height: 90%; | height: 90%; | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
@@ -248,8 +247,7 @@ export default { | |||||
width: 100%; | width: 100%; | ||||
} | } | ||||
.top { | .top { | ||||
min-height: 470px; | |||||
margin-bottom: 40px; | |||||
margin-bottom: 30px; | |||||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||||
display: flex; | display: flex; | ||||
#imgtxt { | #imgtxt { | ||||
@@ -350,8 +348,7 @@ export default { | |||||
#hot { | #hot { | ||||
.content { | .content { | ||||
.top { | .top { | ||||
min-height: 470px; | |||||
margin-bottom: 40px; | |||||
margin-bottom: 30px; | |||||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||||
display: flex; | display: flex; | ||||
background-image: url('../../assets/hotTopLeft.png'); | background-image: url('../../assets/hotTopLeft.png'); | ||||
@@ -385,7 +382,6 @@ export default { | |||||
} | } | ||||
} | } | ||||
#wk { | #wk { | ||||
height: 500px; | |||||
.content { | .content { | ||||
background-color: #FFFFFF; | background-color: #FFFFFF; | ||||
} | } | ||||
@@ -458,6 +454,7 @@ export default { | |||||
flex-direction: row !important; | flex-direction: row !important; | ||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
margin-bottom: 30px; | |||||
.txt { | .txt { | ||||
display: flex; | display: flex; | ||||