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