| @@ -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; | ||||